Merge pull request #3495 from alphagov/visual-tweaks

New "all content" finder UI tweaks

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

@@ -2,7 +2,7 @@
 @import "mixins/chevron";
 
 .app-c-filter-panel {
-  padding-bottom: govuk-spacing(2);
+  padding: govuk-spacing(3) 0;
   margin-bottom: govuk-spacing(1);
   border-bottom: 1px solid $govuk-border-colour;
 }
@@ -11,6 +11,7 @@
   background-color:  govuk-colour("light-grey");
   padding: 0 govuk-spacing(3);
   margin-top: govuk-spacing(2);
+  margin-bottom: govuk-spacing(1);
 
   // GOV.UK Frontend radio and checkboxes are rendered with a transparent background, which makes
   // them look wrong on this component's grey background. This is intentional in GOV.UK Frontend and
@@ -26,7 +27,7 @@
   display: flex;
   flex-wrap: wrap;
   place-content: space-between;
-  align-items: center;
+  align-items: baseline;
   gap: govuk-spacing(2);
 }
 
@@ -51,8 +52,13 @@
   }
 
   &:hover {
-    @include govuk-link-decoration;
-    @include govuk-link-hover-decoration;
+    // Webkit does not respect `text-decoration-thickness` on <button> elements, so we add an inner
+    // span to apply the underline to.
+    // Possibly related to https://bugs.webkit.org/show_bug.cgi?id=257992
+    .app-c-filter-panel__button-inner {
+      @include govuk-link-decoration;
+      @include govuk-link-hover-decoration;
+    }
   }
 
   &:focus,
@@ -61,6 +67,10 @@
     background-color: $govuk-focus-colour;
     @include govuk-link-hover-decoration;
     @include govuk-focused-text;
+
+    .app-c-filter-panel__button-inner {
+      text-decoration: none;
+    }
   }
 
   &::before {
@@ -72,8 +82,8 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: govuk-spacing(2);
-  padding: govuk-spacing(3) 0;
+  gap: govuk-spacing(3);
+  padding: govuk-spacing(4) 0;
 }
 
 .app-c-filter-panel__action--submit {

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

@@ -25,8 +25,17 @@
   width: 100%;
   cursor: pointer;
   color: $govuk-text-colour;
+  list-style: none;
+  padding: govuk-spacing(1) 0;
   @include chevron;
 
+  // Ensure default disclosure triangle does not get shown in browsers that aren't spec-conformant
+  // around `list-style: none` (current Webkit and some older other browsers)
+  &::marker,
+  &::-webkit-details-marker {
+    display: none;
+  }
+
   &:hover .app-c-filter-section__summary-heading {
     @include govuk-link-decoration;
     @include govuk-link-hover-decoration;

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

@@ -1,21 +1,21 @@
 @import "govuk_publishing_components/individual_component_support";
 
 .app-c-filter-summary {
-  padding-bottom: govuk-spacing(3);
-  border-bottom: 1px solid $govuk-border-colour;
+  padding-bottom: govuk-spacing(1);
 }
 
 .app-c-filter-summary__heading {
   margin-bottom: govuk-spacing(2);
-  @include govuk-font(16);
+  @include govuk-font(19);
 }
 
 .app-c-filter-summary__remove-filters {
   list-style-type: none;
+  margin-block-start: 0;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
-  gap: govuk-spacing(1);
+  gap: govuk-spacing(2);
 }
 
 .app-c-filter-summary__remove-filter {
@@ -27,7 +27,7 @@
   align-items: center;
   color: $govuk-text-colour;
   background-color: govuk-colour("light-grey");
-  @include govuk-font(16);
+  @include govuk-font(19);
 
   &:focus {
     background-color: $govuk-focus-colour;
@@ -49,3 +49,7 @@
     font-size: 22px;
   }
 }
+
+.app-c-filter-summary__clear-filters {
+  @include govuk-font(19);
+}

app/assets/stylesheets/finder_frontend.scss

@@ -373,3 +373,14 @@ mark {
   overflow: hidden;
   padding-top: govuk-spacing(3);
 }
+
+.app-all-content-finder {
+  @include govuk-media-query($from: tablet) {
+    margin-top: govuk-spacing(4);
+  }
+}
+
+.app-all-content-finder__spelling-suggestions {
+  margin-top: -(govuk-spacing(2));
+  margin-bottom: govuk-spacing(5);
+}

app/views/components/_filter_panel.html.erb

@@ -34,7 +34,11 @@
         index_section: 0,
         index_section_count: section_count
       }.to_json
-    ) { button_text } %>
+    ) do %>
+      <span class="app-c-filter-panel__button-inner">
+        <%= button_text %>
+      </span>
+    <% end %>
 
     <% if result_text.present? %>
       <%= content_tag("h2", class: "app-c-filter-panel__count") do %>
@@ -55,6 +59,7 @@
     <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",
+        name: nil,
         "data-ga4-event" => {
           event_name: "select_content",
           type: "finder",

app/views/finders/show_all_content_finder.html.erb

@@ -10,41 +10,66 @@
   <% if result_set_presenter.discovery_engine_attribution_token %>
     <meta name="govuk:discovery-engine-attribution-token" content="<%= result_set_presenter.discovery_engine_attribution_token %>">
   <% end %>
+  <meta name="govuk:spelling-suggestion" content="<%= @spelling_suggestion_presenter.suggestions.first&.fetch(:keywords, "") %>">
 <% end %>
 <% content_for :meta_title, content_item.title %>
 
-<form method="get" action="<%= content_item.base_path %>" data-ga4-change-category="clear-all-filters" id="all-content-finder-form">
-  <%= hidden_field_tag :parent, @parent if @parent.present? %>
-  <%= hidden_field_tag :enable_new_all_content_finder_ui, params[:enable_new_all_content_finder_ui] if params[:enable_new_all_content_finder_ui].present? %>
+<%= render 'govuk_publishing_components/components/contextual_breadcrumbs', content_item: content_item.as_hash %>
 
-  <div class="govuk-width-container">
-    <%= render 'govuk_publishing_components/components/contextual_breadcrumbs', content_item: content_item.as_hash %>
-  </div>
+<div class="app-all-content-finder">
+  <%= tag.form(
+    method: "get",
+    action: content_item.base_path,
+    id: "all-content-finder-form",
+    class: "js-all-content-finder-form",
+    data: {
+      ga4_change_category: "clear-all-filters",
+    }
+  ) do %>
+    <%= hidden_field_tag :parent, @parent if @parent.present? %>
+    <%= hidden_field_tag :enable_new_all_content_finder_ui, params[:enable_new_all_content_finder_ui] if params[:enable_new_all_content_finder_ui].present? %>
 
-  <div class="govuk-width-container">
     <div class="govuk-grid-row">
-      <div class="govuk-grid-column-two-thirds">
-        <%= render "govuk_publishing_components/components/heading", {
-          text: sanitize("Search <span class='govuk-visually-hidden'>all content on</span> GOV.UK"),
-          heading_level: 1,
-          font_size: "xl",
-          margin_bottom: 4,
-        } %>
-
+      <div class="govuk-grid-column-two-thirds-from-desktop">
         <div id="keywords" role="search" aria-label="Sitewide" data-ga4-change-category="update-keyword text">
           <%= render "govuk_publishing_components/components/search", {
             id: "finder-keyword-search",
             name: "keywords",
             type: 'search',
             value: result_set_presenter.user_supplied_keywords,
             disable_corrections: true,
-            margin_bottom: 4,
+            label_size: "xl",
+            label_text: safe_join([
+              "Search ",
+              tag.span("all content on", class: "govuk-visually-hidden"),
+              " GOV.UK",
+            ]),
+            wrap_label_in_a_heading: true,
+            heading_level: 1,
+            margin_bottom: 0,
           } %>
         </div>
 
-        <div class="spelling-suggestions">
-          <%= render 'spelling_suggestion' %>
-        </div>
+        <% if @spelling_suggestion_presenter.suggestions.any? %>
+          <% suggestion = @spelling_suggestion_presenter.suggestions.first %>
+
+            <div class="app-all-content-finder__spelling-suggestions">
+              Did you mean <%= link_to(
+                sanitize(suggestion[:highlighted], tags: %w[mark], attributes: []),
+                suggestion[:link],
+                class: "govuk-link",
+                data: {
+                  module: "ga4-link-tracker",
+                  ga4_link: {
+                    event_name: "navigation",
+                    type: "spelling suggestion",
+                    section: "Search",
+                    text: suggestion[:keywords],
+                  }
+                }
+              ) %>?
+            </div>
+          <% end %>
 
         <%= render "components/filter_panel", {
           button_text: "Filter and sort",
@@ -68,14 +93,16 @@
             clear_all_href: filters_presenter.reset_url,
             clear_all_text: "Clear all filters",
             heading_level: 3,
-            heading_text: "Selected filters",
+            heading_text: "Active filters",
             filters: filters_presenter.summary_items,
           } %>
         <% end %>
 
         <% if result_set_presenter.total_count.positive? %>
           <%= render "govuk_publishing_components/components/document_list", {
-            remove_top_border_from_first_child: true,
+            margin_top: 0,
+            margin_bottom: 5,
+            equal_item_spacing: true,
             disable_ga4: true,
             items: result_set_presenter.search_results_content[:document_list_component_data],
           } %>
@@ -95,5 +122,5 @@
         <%= render "govuk_publishing_components/components/previous_and_next_navigation", @pagination.next_and_prev_links %>
       </div>
     </div>
-  </div>
+  <% end %>
 </div>

spec/components/filter_panel_spec.rb

@@ -65,6 +65,12 @@ def render_component(locals, &block)
     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 "doesn't render any buttons with a name attribute" do
+    render_component(button_text: "Filter")
+
+    assert_select ".app-c-filter-panel input[name]", false
+  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")