Merge pull request #3458 from alphagov/filter-panel-submit

Filter panel: Add submit button and reset link

app/assets/stylesheets/components/_filter-panel.scss

@@ -51,3 +51,25 @@
     margin: 0 govuk-spacing(2) govuk-spacing(1) 0;
   }
 }
+
+.app-c-filter-panel__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: govuk-spacing(2);
+  padding: govuk-spacing(3) 0;
+}
+
+.app-c-filter-panel__action--submit {
+  flex: 2 0 60%;
+  margin-bottom: 0;
+}
+
+.app-c-filter-panel__action--reset {
+  flex: 1 0 30%;
+  white-space: nowrap;
+  padding: govuk-spacing(1) 0;
+  text-align: center;
+
+  @include govuk-font(19);
+}

app/views/components/_filter_panel.html.erb

@@ -1,3 +1,4 @@
+<% add_gem_component_stylesheet("button") %>
 <% add_app_component_stylesheet("filter-panel") %>
 <%
   raise ArgumentError, "button_text is required" unless local_assigns[:button_text]
@@ -7,6 +8,9 @@
   button_id = "filter-button-#{id_suffix}"
   result_text ||= ""
 
+  show_reset_link ||= false
+  raise ArgumentError, "reset_link_href is required" if show_reset_link && !local_assigns[:reset_link_href]
+
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   component_helper.add_data_attribute({ module: "filter-panel" })
@@ -38,5 +42,17 @@
     aria: { labelledby: button_id },
   ) do %>
     <%= yield %>
+
+    <div class="app-c-filter-panel__actions">
+      <%= submit_tag "Apply filters", class: "govuk-button app-c-filter-panel__action app-c-filter-panel__action--submit" %>
+
+      <% if show_reset_link %>
+        <%=
+          link_to "Clear all filters",
+            reset_link_href,
+            class: "govuk-link govuk-link--no-visited-state app-c-filter-panel__action app-c-filter-panel__action--reset"
+        %>
+      <% end %>
+    </div>
   <% end %>
 <% end %>

app/views/components/docs/filter_panel.yml

@@ -1,5 +1,7 @@
 name: Filter panel
-description: Displays a result count and a toggleable panel of filters and sort options.
+description: |
+  Displays a result count and a toggleable panel with arbitrary content, a submit input, and an
+  optional reset link.
 uses_component_wrapper_helper: true
 accessibility_criteria: |
   The component must:
@@ -31,6 +33,20 @@ examples:
         <p class="govuk-body">
           I am open by default!
         </p>
+  with_reset_link:
+    description: |
+      Shows a clear link when the filter panel is open, for example if any filters are selected that
+      can be cleared.
+    data:
+      result_text: 42 widgets
+      button_text: Clearable filters
+      open: true
+      show_reset_link: true
+      reset_link_href: "http://example.org"
+      block: |
+        <p class="govuk-body">
+          Some filters
+        </p>
   with_filter_section:
     description: |
       Pass filter section component as a block

spec/components/filter_panel_spec.rb

@@ -17,6 +17,10 @@ def render_component(locals, &block)
     expect { render_component({}) }.to raise_error(/button_text/)
   end
 
+  it "raises an error if show_reset_link option is given without reset_link_href" do
+    expect { render_component(button_text: "Filter", show_reset_link: true) }.to raise_error(/reset_link_href/)
+  end
+
   it "renders the button with the correct text" do
     render_component(button_text: "Filtern und sortieren")
 
@@ -54,4 +58,22 @@ def render_component(locals, &block)
 
     assert_select ".app-c-filter-panel[open=open]"
   end
+
+  it "renders the submit button" do
+    render_component(button_text: "Filter")
+
+    assert_select ".app-c-filter-panel input.govuk-button.app-c-filter-panel__action.app-c-filter-panel__action--submit", value: "Apply filters"
+  end
+
+  it "renders the reset link if the show_reset_link option is given" do
+    render_component(button_text: "Filter", show_reset_link: true, reset_link_href: "/reset")
+
+    assert_select ".app-c-filter-panel a.govuk-link.govuk-link--no-visited-state.app-c-filter-panel__action.app-c-filter-panel__action--reset[href='/reset']", text: "Clear all filters"
+  end
+
+  it "does not render the reset link if the show_reset_link option is not given" do
+    render_component(button_text: "Filter")
+
+    assert_select ".app-c-filter-panel a", false
+  end
 end