Fix: Clean & Update lookbook (#920)

* delete unnecessary components from the lookbook

* move loader component and notification component to the display folder in the lookbook preview

* add empty state component to the lookbook

* add icon with tooltip buttons to lookbook

* update pill button in the lookbook

* add list items component to the look

* remove component preview component from the lookbook

* fix ListItemsShowMoreComponent was not displayed properly on lookbook

* update usages of empty state

app/assets/stylesheets/components/pill_button.scss

@@ -3,6 +3,7 @@
     display: flex;
     align-items: center;
     border: 1px solid var(--primary-color);
+    color: var(--primary-color) !important;
     border-radius: 32px;
     padding: 10px 20px;
     cursor: pointer;

app/components/display/empty_state_component.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+class Display::EmptyStateComponent < ViewComponent::Base
+
+  def initialize(text: t('no_result_was_found'))
+    @text = text
+  end
+
+
+  def call
+    content_tag(:div, class:'browse-empty-illustration') do
+      inline_svg_tag('empty-box.svg') +
+      content_tag(:p, @text)
+    end.html_safe
+  end
+end

app/controllers/annotator_controller.rb

@@ -74,7 +74,7 @@ def annotator_results(uri)
       end
 
       # if we are in a slice, pass the ontologies of this slice in the params
-      
+
       if at_slice?
         slice_ontologies_acronyms = @subdomain_filter[:ontologies].map{ |id| link_last_part(id)}
         if api_params[:ontologies]
@@ -89,7 +89,7 @@ def annotator_results(uri)
       annotations = LinkedData::Client::HTTP.get(uri, api_params)
       @ontologies = LinkedData::Client::Models::Ontology.all({:include_views => true}).map{ |o| [o.id.to_s, o]}.to_h
 
-      @semantic_types = get_semantic_types 
+      @semantic_types = get_semantic_types
       @results = []
       annotations.each do |annotation|
         if annotation.annotations.empty?
@@ -199,7 +199,7 @@ def initialize_options
     end
     @semantic_groups.each_pair do |group, label|
         @semantic_groups_for_select << ["#{label} (#{group})", group]
-    end 
+    end
     @semantic_types_for_select.sort! {|a,b| a[0] <=> b[0]}
     @semantic_groups_for_select.sort! {|a,b| a[0] <=> b[0]}
     @ancestors_levels = ['None', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'All']
@@ -216,7 +216,7 @@ def empty_advanced_options
       params[:fast_context].nil? &&
       params[:lemmatize].nil?
   end
-  
+
 
   def remove_special_chars(input)
     regex = /^[a-zA-Z0-9\s]*$/
@@ -227,4 +227,3 @@ def remove_special_chars(input)
   end
 
 end
-

app/helpers/application_helper.rb

@@ -405,11 +405,8 @@ def insert_sample_text_button(text)
     end
   end
 
-  def empty_state(text = t('no_result_was_found'))
-    content_tag(:div, class:'browse-empty-illustration') do
-      inline_svg_tag('empty-box.svg') +
-      content_tag(:p, text)
-    end
+  def empty_state(text: t('no_result_was_found'))
+    render Display::EmptyStateComponent.new(text: text)
   end
 
   def ontologies_selector(id:, label: nil, name: nil, selected: nil, placeholder: nil, multiple: true, ontologies: onts_for_select)

app/views/annotator/index.html.haml

@@ -47,7 +47,7 @@
         .annotator-page-button
           = render Buttons::RegularButtonComponent.new(id:'annotator', value: t('annotator.get_annotation'), variant: "primary", type: 'submit')
     - if @results && @results.empty?
-      = empty_state(t('no_result_was_found'))
+      = empty_state(text: t('no_result_was_found'))
     - unless @results.nil? || @results.empty?
       .annotator-page-results
         .cont

app/views/content_finder/index.html.haml

@@ -19,6 +19,6 @@
       = n_triples_to_table(@result)
 
 - else
-  = empty_state("Content not found")
+  = empty_state(text: "Content not found")
 
 

app/views/taxonomy/_taxonomies.html.haml

@@ -1,7 +1,7 @@
 .taxonomy-section
     - if taxonomies.blank?
         .taxonomy-empty-illustration
-            = empty_state(t('taxonomy.no_taxonomy_created', type: type))
+            = empty_state(text: t('taxonomy.no_taxonomy_created', type: type))
             - if current_user_admin?
                 .taxonomy-empty-illustration-button
                     = regular_button('create-taxonomy', "Create #{type}", variant: "secondary", size: "slim", href: "/admin?section=#{type}")

test/components/previews/buttons/icon_with_tooltip_component_preview.rb

@@ -0,0 +1,23 @@
+class Buttons::IconWithTooltipComponentPreview < ViewComponent::Preview
+
+  # @param title text
+
+  def edit(icon: "edit.svg", title: "Edit")
+    render IconWithTooltipComponent.new(icon: icon, link: "#", title: title)
+  end
+
+  # @param title text
+
+  def delete(icon: "icons/delete.svg", title: "Delete")
+    render IconWithTooltipComponent.new(icon: icon, link: "#", title: title)
+  end
+
+
+  # @param title text
+
+  def preview(icon: "eye.svg", title: "Preview")
+    render IconWithTooltipComponent.new(icon: icon, link: "#", title: title)
+  end
+
+
+end

test/components/previews/buttons/pill_button_component_preview.rb

@@ -2,7 +2,7 @@
 
 class Buttons::PillButtonComponentPreview < ViewComponent::Preview
   # @param text text
-  def default(text: 'hello')
+  def default(text: 'Watch')
     render PillButtonComponent.new(text: text)
   end
 end

test/components/previews/display/empty_state_component_preview.rb

@@ -0,0 +1,6 @@
+class Display::EmptyStateComponentPreview < ViewComponent::Preview
+
+  def default()
+    render Display::EmptyStateComponent.new(text: 'No result was found')
+  end
+end

test/components/previews/layout/list_items_show_more_component_preview.rb

@@ -0,0 +1,13 @@
+class Layout::ListItemsShowMoreComponentPreview < ViewComponent::Preview
+
+  def default
+    render ListItemsShowMoreComponent.new(max_items: 5) do |component|
+      10.times do |i|
+        component.container do
+          "Item #{i + 1}"
+        end
+      end
+    end
+  end
+
+end