Merge pull request #3610 from projectblacklight/selected_value

Extract selected facet value component

Author: jcoyne

app/assets/builds/blacklight.css

@@ -338,7 +338,6 @@ main {
 .facet-values .remove {
   color: var(--bl-facet-remove-color);
   font-weight: bold;
-  padding-left: 0.5rem;
   text-decoration: none;
 }
 .facet-values .remove:hover {

app/assets/stylesheets/blacklight/_facets.scss

@@ -99,7 +99,6 @@
   .remove {
     color: var(--bl-facet-remove-color);
     font-weight: bold;
-    padding-left: $spacer * 0.5;
     text-decoration: none;
 
     &:hover {

app/components/blacklight/facets/count_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Blacklight
+  module Facets
+    # Display count of a facet value
+    class CountComponent < Blacklight::Component
+      def initialize(hits:, classes:)
+        @hits = hits
+        @classes = classes
+      end
+
+      attr_reader :hits, :classes
+
+      def render?
+        hits.present?
+      end
+
+      def call
+        tag.span(t('blacklight.search.facets.count', number: number_with_delimiter(hits)), class: classes)
+      end
+    end
+  end
+end

app/components/blacklight/facets/item_component.rb

@@ -51,14 +51,8 @@ def render_facet_value
       #
       # @private
       def render_selected_facet_value
-        tag.span(class: "facet-label") do
-          tag.span(label, class: "selected") +
-            # remove link
-            link_to(href, class: "remove", rel: "nofollow") do
-              render(Blacklight::Icons::RemoveComponent.new(aria_hidden: true)) +
-                tag.span(helpers.t(:'blacklight.search.facets.selected.remove'), class: 'visually-hidden')
-            end
-        end + render_facet_count(classes: ["selected"])
+        concat render(Blacklight::Facets::SelectedValueComponent.new(label: label, href: href))
+        concat render_facet_count(classes: ["selected"])
       end
 
       ##
@@ -70,10 +64,9 @@ def render_selected_facet_value
       # @return [String]
       # @private
       def render_facet_count(options = {})
-        return '' if hits.blank?
-
         classes = (options[:classes] || []) << "facet-count"
-        tag.span(t('blacklight.search.facets.count', number: number_with_delimiter(hits)), class: classes)
+
+        render Blacklight::Facets::CountComponent.new(hits: hits, classes: classes)
       end
     end
   end

app/components/blacklight/facets/selected_value_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Blacklight
+  module Facets
+    # Standard display of a selected facet value (e.g. without a link and with a remove button)
+    class SelectedValueComponent < Blacklight::Component
+      def initialize(label:, href:)
+        @label = label
+        @href = href
+        super
+      end
+
+      attr_reader :label, :href
+
+      def call
+        tag.span(class: "facet-label") do
+          tag.span(label, class: "selected") + remove_link
+        end
+      end
+
+      def remove_link
+        link_to(href, class: "remove ps-2", rel: "nofollow") do
+          render(Blacklight::Icons::RemoveComponent.new(aria_hidden: true)) +
+            tag.span(t(:'blacklight.search.facets.selected.remove'), class: 'visually-hidden')
+        end
+      end
+    end
+  end
+end