Update design of secondary navigation component (#3102)

- Aligns with updated navigation design in the NHS header (no padding
either side)
- Uses same method of highlighting current item, using `<strong>`
element as a fallback
- Items appear linearised on smaller screens

app/assets/stylesheets/_secondary-navigation.scss

@@ -1,88 +1,68 @@
-// Adapted from https://github.com/x-govuk/govuk-prototype-components/blob/main/x-govuk/components/secondary-navigation/_secondary-navigation.scss
 .app-secondary-navigation {
-  @include govuk-font(19);
-}
-
-.app-secondary-navigation--sticky {
-  background-color: $color_nhsuk-grey-5;
-  position: sticky;
-  top: 0;
-  z-index: 99;
-}
+  @include nhsuk-font(19);
+  @include nhsuk-responsive-margin(5, "bottom");
 
-.app-secondary-navigation__link {
-  @include govuk-link-common;
-  @include govuk-link-style-no-visited-state;
-  @include govuk-link-style-no-underline;
+  margin-left: #{$nhsuk-gutter-half * -1};
+  margin-right: #{$nhsuk-gutter-half * -1};
 
-  // Extend the touch area of the link to the list
-  &::after {
-    bottom: 0;
-    content: "";
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
+  @include mq($from: tablet) {
+    margin-left: auto;
+    margin-right: auto;
   }
 }
 
-.app-secondary-navigation__list {
-  @include govuk-clearfix;
-
-  // The list uses box-shadow rather than a border to set a 1px
-  // grey line at the bottom, so that border from the current
-  // item appears on top of the grey line.
-  box-shadow: inset 0 -1px 0 $govuk-border-colour;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  width: 100%;
-}
+.app-secondary-navigation__link {
+  @include nhsuk-link-style-default;
+  @include nhsuk-link-style-no-visited-state;
 
-.app-secondary-navigation__list-item {
-  box-sizing: border-box;
   display: block;
-  float: left;
-  margin-right: govuk-spacing(4);
-  padding-bottom: govuk-spacing(2);
-  padding-top: govuk-spacing(2);
-  position: relative;
+  padding: nhsuk-spacing(2) $nhsuk-gutter-half;
+  text-decoration: none;
 
-  // More generous padding beneath items on wider screens
-  @include govuk-media-query($from: tablet) {
-    padding-bottom: govuk-spacing(3);
+  @include mq($from: tablet) {
+    padding: nhsuk-spacing(3) 2px;
   }
-}
 
-// The last item of the list doesn’t need any spacing to its right.
-// Removing this prevents the item from wrapping to the next line
-// unnecessarily.
-.app-secondary-navigation__list-item:last-child {
-  margin-right: 0;
-}
+  &[aria-current] {
+    box-shadow: inset $nhsuk-border-width 0 $color_nhsuk-blue;
+    color: $nhsuk-text-color;
+    text-decoration: none;
+
+    @include mq($from: tablet) {
+      box-shadow: inset 0 ($nhsuk-border-width * -1) $color_nhsuk-blue;
+    }
+  }
 
-.app-secondary-navigation__list-item--current {
-  border-bottom: $govuk-border-width solid $govuk-brand-colour;
-  padding-bottom: govuk-spacing(1);
+  &:focus {
+    box-shadow: inset $nhsuk-focus-width 0 $nhsuk-focus-text-color;
 
-  // More generous padding beneath items on wider screens
-  @include govuk-media-query($from: tablet) {
-    padding-bottom: govuk-spacing(2);
+    @include mq($from: tablet) {
+      box-shadow: inset 0 ($nhsuk-focus-width * -1) $nhsuk-focus-text-color;
+    }
   }
 }
 
-.app-secondary-navigation__list-item--current
-  .app-secondary-navigation__link:link,
-.app-secondary-navigation__list-item--current
-  .app-secondary-navigation__link:visited {
-  color: $govuk-text-colour;
+.app-secondary-navigation__current {
+  font-weight: inherit;
 }
 
-.app-secondary-navigation__list-item {
+.app-secondary-navigation__list {
+  // The list uses box-shadow rather than a border to set a 1px grey line at the
+  // bottom, so that the current item appears on top of the grey line.
+  box-shadow: inset 0 -1px 0 $nhsuk-border-color;
+  display: flex;
+  flex-flow: column;
+  list-style: none;
   margin: 0;
+  padding: 0;
+  width: 100%;
+
+  @include mq($from: tablet) {
+    flex-flow: row wrap;
+    gap: nhsuk-spacing(2) nhsuk-spacing(4);
+  }
 }
 
-.app-secondary-navigation__link {
-  padding-left: nhsuk-spacing(3);
-  padding-right: nhsuk-spacing(3);
+.app-secondary-navigation__list-item {
+  margin-bottom: 0;
 }

app/components/app_secondary_navigation_component.html.erb

@@ -1,12 +1,22 @@
 <nav <%= tag.attributes @attributes %>>
   <ul class="app-secondary-navigation__list">
     <% items.each do |item| %>
-      <li class="app-secondary-navigation__list-item
-        <%= "app-secondary-navigation__list-item--current" if item.selected %>">
-        <%= link_to item.href,
-                    class: "app-secondary-navigation__link",
-                    data: { turbo: true, turbo_action: "replace" } do %>
-          <%= item %>
+      <li class="app-secondary-navigation__list-item">
+        <% if item.selected %>
+          <%= link_to item.href,
+                      class: "app-secondary-navigation__link",
+                      aria: { current: true },
+                      data: { turbo: true, turbo_action: "replace" } do %>
+            <strong class="app-secondary-navigation__current">
+              <%= item %>
+            </strong>
+          <% end %>
+        <% else %>
+          <%= link_to item.href,
+                      class: "app-secondary-navigation__link",
+                      data: { turbo: true, turbo_action: "replace" } do %>
+            <%= item %>
+          <% end %>
         <% end %>
       </li>
     <% end %>

spec/components/app_secondary_navigation_component_spec.rb

@@ -18,7 +18,7 @@
 
   it { should have_css("ul.app-secondary-navigation__list") }
   it { should have_css("li.app-secondary-navigation__list-item") }
-  it { should have_css("li.app-secondary-navigation__list-item--current") }
+  it { should have_css("strong.app-secondary-navigation__current") }
 
   it { should have_link("Example 1", href: "https://example.com") }
   it { should have_link("Example 2", href: "https://example.com") }