Merge pull request #3473 from alphagov/ui-tweaks

Assorted new search UI tweaks
alphagov · Sep 24, 2024 · 4a49c0f · 4a49c0f
2 parents 905720d + 989e743
commit 4a49c0f
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 26 deletions.
diff --git a/app/assets/stylesheets/components/_filter-section.scss b/app/assets/stylesheets/components/_filter-section.scss
@@ -53,7 +53,3 @@
   text-align: right;
   @include govuk-font(16, $weight: regular);
 }
-
-.app-c-filter-section__content {
-  padding: govuk-spacing(2) 0;
-}
diff --git a/app/assets/stylesheets/components/_filter-summary.scss b/app/assets/stylesheets/components/_filter-summary.scss
@@ -22,9 +22,10 @@
 .app-c-filter-summary__remove-filter {
   border: 1px solid $govuk-border-colour;
   border-radius: govuk-em(5, 16px);
-  padding: govuk-spacing(2);
+  padding: govuk-spacing(1) govuk-spacing(2);
   text-decoration: none;
   display: flex;
+  align-items: center;
   color: $govuk-text-colour;
   background-color: govuk-colour("light-grey");
   @include govuk-font(16);
@@ -43,14 +44,9 @@
   }
 
   &::before {
+    margin-top: 1px;
     content: "\00d7";
     padding-right: govuk-spacing(1);
-    vertical-align: top;
-    line-height: 1;
     font-size: 22px;
   }
 }
-
-.app-c-filter-summary__remove-filter-text {
-  vertical-align: middle;
-}
diff --git a/app/views/components/_filter_summary.html.erb b/app/views/components/_filter_summary.html.erb
@@ -21,24 +21,24 @@
         <% heading_text %>
       <% end %>
     <% end %>
+
     <ul class="app-c-filter-summary__remove-filters">
-    <% filters.each do |filter| %>
-      <li>
-        <%= content_tag("a", class: "app-c-filter-summary__remove-filter", href: "#{filter[:remove_href]}") do %>
-          <span class="app-c-filter-summary__remove-filter-text">
-            <span class="govuk-visually-hidden"><%= filter[:visually_hidden_prefix] %></span>
-            <%= filter[:label] %>: <%= filter[:value] %>
-          </span>
-        <% end %>
-      </li>
-    <% end %>
+      <% filters.each do |filter| %>
+        <li>
+          <%= link_to filter[:remove_href], class: "app-c-filter-summary__remove-filter" do %>
+            <span class="app-c-filter-summary__remove-filter-text">
+              <span class="govuk-visually-hidden"><%= filter[:visually_hidden_prefix] %></span>
+              <%= filter[:label] %>: <%= filter[:value] %>
+            </span>
+          <% end %>
+        </li>
+      <% end %>
     </ul>
+
     <% if clear_all_text.present? && clear_all_href.present? %>
-      <%= tag.div do %>
-        <%= content_tag("a", class: "app-c-filter-summary__clear-filters govuk-link", href: "#{clear_all_href}") do %>
-          <%= clear_all_text %>
-        <% end %>
-      <% end %>
+      <div>
+        <%= link_to clear_all_text, clear_all_href, class: "app-c-filter-summary__clear-filters govuk-link govuk-link--no-visited-state" %>
+      </div>
     <% end %>
   <% end %>
 <% end %>