Add reverse secondary navigation styles

This will be used on the new sessions page header.

Jira-Issue: MAV-2645

Author: thomasleese

app/assets/stylesheets/components/_secondary-navigation.scss

@@ -87,3 +87,31 @@
 .app-secondary-navigation__list-item {
   margin-bottom: 0;
 }
+
+.app-secondary-navigation--reverse {
+  color: $nhsuk-reverse-text-colour;
+
+  .app-secondary-navigation__link {
+    @include nhsuk-link-style-white;
+
+    &[aria-current] {
+      box-shadow: inset $nhsuk-border-width 0 $nhsuk-reverse-text-colour;
+
+      // stylelint-disable-next-line max-nesting-depth
+      @include nhsuk-media-query($from: tablet) {
+        box-shadow: inset 0 ($nhsuk-border-width * -1)
+          $nhsuk-reverse-text-colour;
+      }
+    }
+
+    &:link,
+    &:visited,
+    &:hover,
+    &:visited:hover,
+    &:active {
+      .nhsuk-icon--alert {
+        fill: nhsuk-colour("yellow");
+      }
+    }
+  }
+}

app/components/app_secondary_navigation_component.html.erb

@@ -1,5 +1,4 @@
-<nav class="app-secondary-navigation" aria-label="Secondary menu"
-  <%= tag.attributes @attributes %>>
+<nav aria-label="Secondary menu" <%= tag.attributes(@attributes) %>>
   <ul class="app-secondary-navigation__list">
     <% items.each do |item| %>
       <li class="app-secondary-navigation__list-item">
@@ -28,4 +27,4 @@
 
 <h2 class="nhsuk-u-visually-hidden">
   <%= selected_item_text %>
-</h2>
+</h2>

app/components/app_secondary_navigation_component.rb

@@ -3,10 +3,14 @@
 class AppSecondaryNavigationComponent < ViewComponent::Base
   renders_many :items, "Item"
 
-  def initialize(classes: nil, attributes: {})
-    classes = classes.join(" ") if classes.is_a? Array
-    @classes =
-      "app-secondary-navigation nhsuk-u-margin-bottom-4#{classes.present? ? " #{classes}" : ""}"
+  def initialize(reverse: false, classes: nil, attributes: {})
+    @classes = [
+      "app-secondary-navigation",
+      reverse ? "app-secondary-navigation--reverse" : nil,
+      "nhsuk-u-margin-bottom-4",
+      *Array(classes)
+    ].compact.join(" ")
+
     @attributes =
       attributes.merge(class: @classes, "aria-label": "Secondary menu")
   end

spec/components/app_secondary_navigation_component_spec.rb

@@ -3,16 +3,22 @@
 describe AppSecondaryNavigationComponent do
   subject(:rendered) { render_inline(component) }
 
+  let(:reverse) { false }
+
   let(:component) do
-    described_class.new.tap do |nav|
-      nav.with_item(selected: true, href: "https://example.com") { "Example 1" }
-      nav.with_item(
-        selected: false,
-        text: "Example 2",
-        href: "https://example.com",
-        ticked: true
-      )
-    end
+    described_class
+      .new(reverse:)
+      .tap do |nav|
+        nav.with_item(selected: true, href: "https://example.com") do
+          "Example 1"
+        end
+        nav.with_item(
+          selected: false,
+          text: "Example 2",
+          href: "https://example.com",
+          ticked: true
+        )
+      end
   end
 
   it { should have_css("nav.app-secondary-navigation") }
@@ -25,4 +31,14 @@
 
   it { should have_link("Example 1", href: "https://example.com") }
   it { should have_link("Example 2", href: "https://example.com") }
+
+  context "with reverse styles" do
+    let(:reverse) { true }
+
+    it do
+      should have_css(
+               "nav.app-secondary-navigation.app-secondary-navigation--reverse"
+             )
+    end
+  end
 end