Feature: Extract summary page components

app/assets/stylesheets/bioportal.scss

@@ -1,6 +1,10 @@
-a{
+a {
   text-decoration: none !important;
 }
+p {
+  margin-bottom: 0;
+}
+
 .alignright {
   float:right;
 }

app/assets/stylesheets/components/card.scss

@@ -0,0 +1,5 @@
+.summary-card {
+    border: 1px solid #dfdfdf;
+    border-radius: 5px;
+    margin-top: 20px;
+}

app/assets/stylesheets/components/chip_button.scss

@@ -5,11 +5,14 @@
   color: #777777 !important;
   font-weight: 500;
   font-size: 15px;
+  line-height: 44px;
+  display: inline;
 }
 
 .chip_button_small{
   font-size: 10px;
   padding: 5px;
+  line-height: unset;
 }
 
 .chip_button_container_clickable {
@@ -20,4 +23,5 @@
   color: var(--primary-color);
   font-weight: 500;
   font-size: 15px;
+  cursor: grab;
 }

app/assets/stylesheets/components/dropdown.scss

@@ -6,7 +6,7 @@
   font-size: 16px;
   color: #000000;
   cursor: pointer;
-  padding: 14px 20px;
+  padding: 0 14px 0 0;
 }
 
 .dropdown-container {

app/assets/stylesheets/components/field_container.scss

@@ -1,15 +1,12 @@
 .field-container {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
+  margin-bottom: 0.5rem;
 }
 
 
 .field-description_text,
 .field-description_text a {
   color: #888888 !important;
   font-size: 15px;
-  margin-top: 10px;
   margin-bottom: 0;
 }
 

app/assets/stylesheets/components/header.scss

@@ -0,0 +1,15 @@
+.header-component {
+    display: flex;
+    align-items: center;
+    margin-bottom: 5px;
+    font-weight: 550;
+    justify-content: space-between;
+    font-size: 16px;
+    color: #000000;
+    cursor: pointer;
+    width: 100%;
+    padding: 14px 20px;
+    p {
+        margin-bottom: 0;
+    }
+}

app/assets/stylesheets/components/image.scss

@@ -0,0 +1,22 @@
+.image-container {
+    position: relative;
+    .image-content{
+        width: 100%;
+        object-fit: scale-down;
+        margin-bottom: 30px;
+    }
+    .loop_icon {
+        position: absolute;
+        width: 50px;
+        background-color: white;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 50px;
+        padding: 10px;
+        bottom: 0;
+        right: 0;
+    }
+}

app/assets/stylesheets/components/index.scss

@@ -19,4 +19,7 @@
 @import 'pill_button';
 @import "switch";
 @import "table";
-@import "concept_details";
+@import "concept_details";
+@import "card";
+@import "header";
+@import "image";

app/assets/stylesheets/components/summary_section.scss

@@ -1,4 +1,5 @@
 .card_title {
+  display: flex;
   font-size: 18px;
   margin-top: 40px;
   margin-bottom: 20px;
@@ -7,12 +8,6 @@
     text-decoration: underline;
     text-underline-offset: 12px;
     text-decoration-color: var(--primary-color);
-    text-decoration-thickness: 1px;
+    text-decoration-thickness: 2px;
   }
 }
-.Summary-page-card {
-  border: 1px solid #dfdfdf;
-  border-radius: 5px;
-  padding: 20px 20px;
-  margin-top: 20px;
-}

app/assets/stylesheets/components/table.scss

@@ -4,16 +4,23 @@
   border-spacing: 0;
 }
 
+.table-layout-fixed{
+  table-layout: fixed;
+}
+
 .table-content thead th{
   background-color: hsl(0, 0%, 100%);
   border-bottom: 1px solid hsl(240, 4%, 85%);
   font-weight: 700;
   color: hsl(230, 13%, 9%);
 }
 
+.table-content-borderless thead th {
+  border-bottom: none !important;
+}
 
 .table-content td, .table-content th{
-  padding: 12px 24px;
+  padding: 0.75rem;
   vertical-align: top;
 }
 

app/assets/stylesheets/components/tabs_container.scss

@@ -5,6 +5,7 @@
   & > div {
     display: flex;
     justify-content: space-between;
+    width: 100%;
   }
 }
 

app/components/display/header_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+class Display::HeaderComponent < ViewComponent::Base
+
+  renders_one :text
+
+  def initialize(text: nil, tooltip: nil)
+    super
+    @text = text
+    @info = tooltip
+  end
+
+  def call
+    content_tag(:div, class: 'header-component') do
+      out = content_tag(:p, text || @text)
+      if @info && [email protected]?
+        out = out + render(Display::InfoTooltipComponent.new(text: @info))
+      end
+      out
+    end
+  end
+
+end

app/components/display/image_component.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+class Display::ImageComponent < ViewComponent::Base
+  include ModalHelper
+
+  def initialize(src: , title: '', enable_zoom: true)
+    super
+    @src = src
+    @title = title
+    @enable_zoom = enable_zoom
+  end
+
+  def call
+    content_tag(:div, class: 'image-container ') do
+      depiction_with_modal(@src)
+    end
+  end
+
+  def depiction_with_modal(depiction_url)
+    img_tag = image_tag(depiction_url, class: 'image-content')
+    loop_icon_tag = content_tag(:span , image_tag('icons/loop.svg'), class: 'loop_icon')
+    modal_url = "/ajax/images/show?url=#{depiction_url}"
+    modal_options = { data: { show_modal_title_value: @title, show_modal_size_value: 'modal-xl' } }
+
+    if @enable_zoom
+      link_to_modal(nil, modal_url, modal_options) do
+        loop_icon_tag + img_tag
+      end
+    else
+      img_tag
+    end
+
+  end
+end

app/components/display/info_tooltip_component.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+class Display::InfoTooltipComponent < ViewComponent::Base
+
+  def initialize(text: )
+    super
+    @text = text
+  end
+  def call
+    image_tag("icons/info.svg", data:{controller:'tooltip'}, title: @text)
+  end
+
+end

app/components/dropdown_container_component.rb

@@ -1,8 +1,8 @@
 # frozen_string_literal: true
 
 class DropdownContainerComponent < ViewComponent::Base
-
-  def initialize(title:, id:)
+  renders_one :empty_state
+  def initialize(title:, id:, tooltip:nil)
     super
     @title = title
     @id = id

app/components/dropdown_container_component/dropdown_container_component.html.haml

@@ -1,7 +1,12 @@
 .dropdown-container
   .dropdown-title-bar{"data-toggle" => "collapse", "data-target" => "##{@id}"}
-    %p.mb-0
-      = @title
-    %img{alt: "", src: asset_path("summary/arrow-down.svg")}
+    = render Display::HeaderComponent.new(text: @title, tooltip: @tooltip)
+    = image_tag("summary/arrow-down.svg", class: 'ml-2')
+
   .collapse{id: @id}
-    = content
+    - if content && !content.empty?
+      = content
+    - else
+      = render Layout::ListComponent.new do |l|
+        - l.row do  
+          = empty_state || 'no data'

app/components/field_container_component.rb

@@ -2,9 +2,14 @@
 
 class FieldContainerComponent < ViewComponent::Base
 
-  def initialize(label:, value:)
+  renders_one :label
+  def initialize(label: nil, value: nil)
     super
     @label = label
     @value = value
   end
+
+  def show?
+    content && !content.strip.empty? || ([email protected]? && [email protected]?)
+  end
 end

app/components/field_container_component/field_container_component.html.haml

@@ -1,6 +1,9 @@
-%div
-  .field-container
+- if show?
+  %div.field-container
     %p.field-description_text
-      = @label.humanize
-  %p.field-normal_text
-    = @value
+      = label || @label.humanize
+    - if content
+      = content
+    - else
+      %span.field-normal_text
+        = @value

app/components/layout/card_component.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+class Layout::CardComponent < ViewComponent::Base
+  renders_one :header, Display::HeaderComponent
+
+  def call
+    content_tag(:div, class: 'summary-card') do
+      out = ''
+      out = header  if header?
+      raw(out.to_s + content)
+    end
+  end
+end

app/components/layout/horizontal_list_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+class Layout::HorizontalListComponent < ViewComponent::Base
+  renders_many :elements
+
+  def call
+    return if elements.empty?
+
+    content_tag(:div, class: 'd-flex flex-wrap') do
+      out = ''
+      elements.each do |element|
+        out = out +  content_tag(:div, element, class: 'mr-1 mb-1 text-truncate overflow-hidden')
+      end
+      raw out
+    end
+  end
+
+end

app/components/layout/list_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+class Layout::ListComponent < ViewComponent::Base
+
+  renders_many :rows
+
+  def call
+    return if rows.map(&:to_s).reject(&:empty?).empty?
+
+    content_tag(:div, style: 'padding: 0px 20px 20px 20px;') do
+      out = ""
+      rows.each do |row|
+        next if row.nil? || row.to_s.empty?
+        out = out + content_tag(:div, row.to_s, class: 'mb-1')
+      end
+      out.html_safe
+    end
+  end
+
+end

app/components/summary_section_component.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 class SummarySectionComponent < ViewComponent::Base
+  renders_many :action_links
 
   def initialize(title: , link: nil, link_title: nil, show_card:  true)
     super