Extract a FacetCollapseToggleButton component

projectblacklight · Nov 4, 2024 · bb3b574 · bb3b574
1 parent 769f2de
commit bb3b574
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 16 deletions.
diff --git a/app/components/blacklight/response/facet_group_component.html.erb b/app/components/blacklight/response/facet_group_component.html.erb
@@ -3,22 +3,7 @@
   <div class="facets-header">
     <%= content_tag :h2, @title, class: 'facets-heading h4' if @title %>
 
-    <%= content_tag :button,
-      class:'navbar-toggler d-block d-lg-none',
-      type: 'button',
-      data: {
-        toggle: 'collapse',
-        target: "##{@panel_id}",
-        'bs-toggle': 'collapse',
-        'bs-target': "##{@panel_id}"
-      },
-      aria: {
-        controls: @panel_id,
-        expanded: 'false',
-      } do %>
-      <span data-show-label><%= t('blacklight.search.facets.group.open') %></span>
-      <span data-hide-label><%= t('blacklight.search.facets.group.close') %></span>
-    <% end %>
+    <%= collapse_toggle_button(@panel_id) %>
   </div>
 
   <div id="<%= @panel_id %>" class="facets-collapse d-lg-block collapse accordion">

diff --git a/app/components/blacklight/response/facet_group_component.rb b/app/components/blacklight/response/facet_group_component.rb
@@ -15,6 +15,14 @@ def initialize(id:, title: nil)
         @panel_id = id ? "facet-panel-#{id}-collapse" : 'facet-panel-collapse'
       end
 
+      def collapse_toggle_button(panel_id)
+        render button_component.new(panel_id: panel_id)
+      end
+
+      def button_component
+        Blacklight::Response::FacetToggleButtonComponent
+      end
+
       def render?
         body.present?
       end

diff --git a/app/components/blacklight/response/facet_toggle_button_component.html.erb b/app/components/blacklight/response/facet_toggle_button_component.html.erb
@@ -0,0 +1,16 @@
+<%= content_tag :button,
+  class: @classes,
+  type: 'button',
+  data: {
+    toggle: 'collapse',
+    target: "##{@panel_id}",
+    'bs-toggle': 'collapse',
+    'bs-target': "##{@panel_id}"
+  },
+  aria: {
+    controls: @panel_id,
+    expanded: 'false',
+  } do %>
+  <span data-show-label><%= t('blacklight.search.facets.group.open') %></span>
+  <span data-hide-label><%= t('blacklight.search.facets.group.close') %></span>
+<% end %>
diff --git a/app/components/blacklight/response/facet_toggle_button_component.rb b/app/components/blacklight/response/facet_toggle_button_component.rb
@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Blacklight
+  module Response
+    # Render the button that shows or collapses the facets on a narrow viewport
+    class FacetToggleButtonComponent < Blacklight::Component
+      # @param [String] panel_id
+      def initialize(panel_id:, classes: 'navbar-toggler d-block d-lg-none')
+        @panel_id = panel_id
+        @classes = classes
+      end
+    end
+  end
+end