Merge pull request #1607 from projectblacklight/hierarchy-buttons

Extract HierarchyToggleComponent and related icons

Author: corylown

app/assets/stylesheets/arclight/modules/hierarchy_and_online_contents.scss

@@ -1,34 +1,60 @@
 :root {
   --al-toggle-icon-color: #{$navbar-light-color};
-  /* Font Awesome Free 6.5.2 by @fontawesome - https: //fontawesome.com License - https://fontawesome.com/license/free (CC BY 4.0 License) Copyright 2024 Fonticons, Inc. */
-  --al-hierarchy-view-expand-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 475 512'><path stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' stroke='rgb(0, 0, 0)' fill='rgb(0, 0, 0)' d='M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM200 344V280H136c-13.3 0-24-10.7-24-24s10.7-24 24-24h64V168c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24H248v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/></svg>");
-  --al-hierarchy-view-collapse-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 475 512'><path stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' stroke='rgb(0, 0, 0)' fill='rgb(0, 0, 0)' d='M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm88 200H296c13.3 0 24 10.7 24 24s-10.7 24-24 24H152c-13.3 0-24-10.7-24-24s10.7-24 24-24z'/></svg>");
 }
 
 // Collapse +/- indicators
 .al-toggle-view-children {
-  background-color: var(--al-toggle-icon-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
   flex-shrink: 0;
   height: 1.25rem;
   margin-left: -1.25rem;
   margin-right: 0.25 * $spacer;
   margin-top: 0.1 * $spacer;
-  mask: var(--al-hierarchy-view-expand-icon);
   width: 1.1rem;
 
+  svg {
+    fill: var(--al-toggle-icon-color);
+  }
+
+  .icon-minus {
+    display: none;
+  }
   &:not(.collapsed) {
-    mask: var(--al-hierarchy-view-collapse-icon);
+    .icon-plus {
+      display: none;
+    }
+    .icon-minus {
+      display: inline;
+    }
+  }
+  &.collapsed {
+    .icon-plus {
+      display: inline;
+    }
+    .icon-minus {
+      display: none;
+    }
   }
 }
 
 .al-hierarchy-highlight > .documentHeader {
   background: $mark-bg;
 }
 
+ul.documents {
+  list-style: none;
+  li {
+    list-style: none;
+  }
+}
+
 #collection-context {
+  list-style: none;
+
   ul {
     list-style: none;
-
     padding-left: 1.5rem;
 
     ul {
@@ -68,6 +94,7 @@
 
     li {
       padding: 0.25 * $spacer 0.5 * $spacer;
+      list-style: none;
     }
 
     li:nth-of-type(odd) {

app/components/arclight/document_collection_hierarchy_component.html.erb

@@ -8,21 +8,7 @@
   itemtype: @document.itemtype,
   class: (classes.flatten + ['al-collection-context', ('al-hierarchy-highlight' if current_target?)].compact).join(' ') do %>
   <div class="documentHeader" data-document-id="<%= document.id %>">
-    <% if document.children? %>
-      <%= link_to('',
-          "#collapsible-hierarchy-#{document.id}",
-          class: "al-toggle-view-children#{ ' collapsed' unless show_expanded?}",
-          aria: {
-            label: t('arclight.hierarchy.view_all'),
-            expanded: show_expanded?
-          },
-          data: {
-            bs_toggle: 'collapse',
-            toggle: 'collapse'
-          }
-        )
-      %>
-    <% end %>
+    <%= render(Arclight::HierarchyToggleComponent.new(document: document, expanded: show_expanded?)) %>
     <div class="index_title document-title-heading" data-turbo="false">
       <% if current_target? %>
         <%= document.normalized_title %>

app/components/arclight/expand_hierarchy_button_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Arclight
-  # Component for rendering an expand button in the hierarchy view
+  # Component for rendering an expand button inside the hierarchy view
   class ExpandHierarchyButtonComponent < Blacklight::Component
     def initialize(path:, classes: 'btn btn-secondary btn-sm')
       super

app/components/arclight/hierarchy_toggle_component.html.erb

@@ -0,0 +1,17 @@
+<%= link_to(
+      "#collapsible-hierarchy-#{document.id}",
+      class: "al-toggle-view-children#{' collapsed' unless expanded }",
+      aria: {
+        label: t('arclight.hierarchy.view_all'),
+        expanded: expanded
+      },
+      data: {
+        bs_toggle: 'collapse',
+        toggle: 'collapse'
+      }
+    ) do %>
+        <span class="al-toggle-view-icon" aria-hidden="true">
+          <%= render Blacklight::Icons::PlusComponent.new(classes: 'icon-plus') %>
+          <%= render Blacklight::Icons::MinusComponent.new(classes: 'icon-minus') %>
+        </span>
+<% end %>

app/components/arclight/hierarchy_toggle_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Arclight
+  # Component for rendering the plus/minus icons at each level of expandable hierarchy components
+  class HierarchyToggleComponent < ViewComponent::Base
+    attr_reader :document, :expanded
+
+    def initialize(document:, expanded:)
+      @document = document
+      @expanded = expanded
+      super
+    end
+
+    delegate :blacklight_icon, to: :helpers
+
+    def render?
+      @document.children?
+    end
+  end
+end

app/components/blacklight/icons/minus_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Blacklight
+  module Icons
+    # The minus icon
+    class MinusComponent < Blacklight::Icons::IconComponent
+      self.svg = <<~SVG
+        <svg xmlns='http://www.w3.org/2000/svg' fill="currentColor" viewBox='0 0 475 512'><path stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' stroke='rgb(0, 0, 0)' d='M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm88 200H296c13.3 0 24 10.7 24 24s-10.7 24-24 24H152c-13.3 0-24-10.7-24-24s10.7-24 24-24z'/></svg>
+      SVG
+    end
+  end
+end

app/components/blacklight/icons/plus_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Blacklight
+  module Icons
+    # The plus icon
+    class PlusComponent < Blacklight::Icons::IconComponent
+      self.svg = <<~SVG
+        <svg xmlns='http://www.w3.org/2000/svg' fill="currentColor" viewBox='0 0 475 512'><path stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' stroke='rgb(0, 0, 0)' d='M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM200 344V280H136c-13.3 0-24-10.7-24-24s10.7-24 24-24h64V168c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24H248v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/></svg>
+      SVG
+    end
+  end
+end

spec/components/arclight/hierarchy_toggle_component_spec.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe Arclight::HierarchyToggleComponent, type: :component do
+  let(:document) do
+    instance_double(SolrDocument, id: 'abc123', children?: has_children)
+  end
+
+  let(:rendered) do
+    render_inline(described_class.new(document: document, expanded: expanded))
+  end
+
+  context 'when the document has children' do
+    let(:has_children) { true }
+
+    context 'when expanded is true' do
+      let(:expanded) { true }
+
+      it 'does not include the .collapsed class' do
+        expect(rendered.to_html).to include('class="al-toggle-view-children"')
+        expect(rendered.to_html).not_to include('collapsed')
+      end
+
+      it 'renders the link with aria-expanded=true' do
+        expect(rendered.to_html).to include('aria-expanded="true"')
+      end
+    end
+
+    context 'when expanded is false' do
+      let(:expanded) { false }
+
+      it 'includes the .collapsed class' do
+        expect(rendered.to_html).to include('class="al-toggle-view-children collapsed"')
+      end
+
+      it 'renders the link with aria-expanded=false' do
+        expect(rendered.to_html).to include('aria-expanded="false"')
+      end
+    end
+  end
+
+  context 'when the document has no children' do
+    let(:has_children) { false }
+    let(:expanded) { false }
+
+    it 'does not render the component' do
+      expect(rendered.to_html).to be_empty
+    end
+  end
+end