Add SecondaryNavigationComponent

Also add initial usage to `claims/support/schools#show`, `claims/support/claims#index`, and `claims/support/users#index`.

app/assets/stylesheets/components/_all.scss

@@ -1,3 +1,4 @@
 @import "header";
 @import "page_banner";
 @import "primary_navigation";
+@import "secondary_navigation";

app/assets/stylesheets/components/_secondary_navigation.scss

@@ -0,0 +1,98 @@
+.app-secondary-navigation {
+  margin-bottom: govuk-spacing(7);
+}
+
+.app-secondary-navigation__list {
+  font-size: 0; // Removes white space when using inline-block on child element.
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  @include govuk-media-query($from: tablet) {
+    box-shadow: inset 0 -1px 0 $govuk-border-colour;
+    width: 100%;
+  }
+}
+
+.app-secondary-navigation__item {
+  @include govuk-font(19);
+  box-shadow: inset 0 -1px 0 $govuk-border-colour;
+  display: block;
+  margin-top: -1px;
+
+  &:last-child {
+    box-shadow: none;
+  }
+
+  @include govuk-media-query($from: tablet) {
+    box-shadow: none;
+    display: inline-block;
+    margin-right: govuk-spacing(4);
+    margin-top: 0;
+  }
+}
+
+.app-secondary-navigation__link {
+  @include govuk-link-common;
+  @include govuk-link-style-default;
+  display: block;
+  padding-top: 12px;
+  padding-bottom: 17px;
+  padding-left: govuk-spacing(3);
+  text-decoration: none;
+  position: relative;
+  font-weight: bold;
+
+  @include govuk-media-query($from: tablet) {
+    padding-left: 0;
+  }
+
+  &:link,
+  &:visited {
+    color: govuk-colour("blue");
+  }
+
+  &:focus {
+    color: govuk-colour("black"); // Focus colour on yellow should really be black.
+    position: relative; // Ensure focus sits above everything else.
+    box-shadow: none;
+  }
+
+  &:focus:before {
+    background-color: govuk-colour("black");
+    content: "";
+    display: block;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 5px;
+  }
+}
+
+.app-secondary-navigation__link[aria-current="page"] {
+  color: govuk-colour("black");
+  position: relative;
+  text-decoration: none;
+
+  &:before {
+    background-color: govuk-colour("blue");
+    content: "";
+    display: block;
+    height: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 5px;
+
+    @include govuk-media-query($from: tablet) {
+      height: 5px;
+      width: 100%;
+    }
+  }
+
+  &:focus:before {
+    background-color: govuk-colour("black");
+  }
+}

app/components/secondary_navigation_component.html.erb

@@ -0,0 +1,7 @@
+<div class="app-secondary-navigation">
+  <ul class="app-secondary-navigation__list">
+    <% navigation_items.each do |navigation_item| %>
+      <%= navigation_item %>
+    <% end %>
+  </ul>
+</div>

app/components/secondary_navigation_component.rb

@@ -0,0 +1,20 @@
+class SecondaryNavigationComponent < ApplicationComponent
+  renders_many :navigation_items, "NavigationItemComponent"
+
+  class NavigationItemComponent < ApplicationComponent
+    attr_reader :name, :url
+
+    def initialize(name, url, classes: [], html_attributes: {})
+      @name = name
+      @url = url
+
+      super(classes:, html_attributes:)
+    end
+
+    def call
+      content_tag(:li, class: "app-secondary-navigation__item") do
+        link_to name, url, class: "app-secondary-navigation__link", aria: { current: current_page?(url) && "page" }
+      end
+    end
+  end
+end

app/helpers/components_helper.rb

@@ -4,4 +4,10 @@ def primary_navigation(*args, **kwargs, &block)
       block.call(component) if block.present?
     end
   end
+
+  def secondary_navigation(*args, **kwargs, &block)
+    render SecondaryNavigationComponent.new(*args, **kwargs) do |component|
+      block.call(component) if block.present?
+    end
+  end
 end

app/views/claims/support/schools/show.html.erb

@@ -1,6 +1,14 @@
 <div class="govuk-width-container">
   <h1 class="govuk-heading-l"><%= @school.name %></h1>
 
+  <%= secondary_navigation do |component| %>
+    <% component.with_navigation_item t(".details"), claims_support_school_path(@school.id) %>
+    <% component.with_navigation_item t(".users"), claims_support_school_users_path(@school.id) %>
+    <% component.with_navigation_item t(".mentors"), "#" %>
+    <% component.with_navigation_item t(".providers"), "#" %>
+    <% component.with_navigation_item t(".claims"), claims_support_school_claims_path(@school.id) %>
+  <% end %>
+
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
       <%= govuk_summary_list do |summary_list|

app/views/claims/support/users/index.html.erb

@@ -1,6 +1,14 @@
 <div class="govuk-width-container">
   <h1 class="govuk-heading-l"><%= @school.name %></h1>
 
+  <%= secondary_navigation do |component| %>
+    <% component.with_navigation_item t(".details"), claims_support_school_path(@school.id) %>
+    <% component.with_navigation_item t(".users"), claims_support_school_users_path(@school.id) %>
+    <% component.with_navigation_item t(".mentors"), "#" %>
+    <% component.with_navigation_item t(".providers"), "#" %>
+    <% component.with_navigation_item t(".claims"), claims_support_school_claims_path(@school.id) %>
+  <% end %>
+
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
       <h2 class="govuk-heading-m"><%= t(".heading") %></h2>