From 213505c6180cd5122647cf2d36784ae13bc460d8 Mon Sep 17 00:00:00 2001
From: farahTW <farah.mehmood@digital.cabinet-office.gov.uk>
Date: Mon, 23 Oct 2023 13:36:04 +0100
Subject: [PATCH] Added sub-navigation component to whitehall

---
 app/assets/stylesheets/application.scss       |  1 +
 .../components/_sub-navigation.scss           | 39 +++++++++++++++++++
 app/views/components/_sub_navigation.html.erb | 21 ++++++++++
 app/views/components/docs/sub_navigation.yml  | 31 +++++++++++++++
 test/views/components/sub_navigation_test.rb  | 34 ++++++++++++++++
 5 files changed, 126 insertions(+)
 create mode 100644 app/assets/stylesheets/components/_sub-navigation.scss
 create mode 100644 app/views/components/_sub_navigation.html.erb
 create mode 100644 app/views/components/docs/sub_navigation.yml
 create mode 100644 test/views/components/sub_navigation_test.rb

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 8d3475dfd76..98a55600104 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -11,6 +11,7 @@ $govuk-page-width: 1140px;
 @import "./components/secondary-navigation";
 @import "./components/select-with-search";
 @import "./components/single-image-upload";
+@import "./components/sub-navigation";
 @import "./components/summary-card-component";
 
 @import "./admin/overrides";
diff --git a/app/assets/stylesheets/components/_sub-navigation.scss b/app/assets/stylesheets/components/_sub-navigation.scss
new file mode 100644
index 00000000000..8909aa17b64
--- /dev/null
+++ b/app/assets/stylesheets/components/_sub-navigation.scss
@@ -0,0 +1,39 @@
+.app-c-sub-navigation__container {
+  background-color: govuk-colour("light-grey");
+}
+
+.app-c-sub-navigation__list {
+  font-size: 0; // Removes white space when using inline-block on child element.
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.app-c-sub-navigation__list-item {
+  @include govuk-font($size: 19);
+  display: inline-block;
+  font-weight: bold;
+  margin-top: 0;
+  padding: 0 govuk-spacing(3);
+}
+
+.app-c-sub-navigation__list-item--current {
+  position: relative;
+
+  &::before {
+    background-color: $govuk-link-colour;
+    content: "";
+    display: block;
+    height: 5px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+  }
+}
+
+.app-c-sub-navigation__list-item-link {
+  display: block;
+  @include govuk-responsive-margin(3, "bottom");
+  @include govuk-responsive-margin(3, "top");
+}
diff --git a/app/views/components/_sub_navigation.html.erb b/app/views/components/_sub_navigation.html.erb
new file mode 100644
index 00000000000..d2179380301
--- /dev/null
+++ b/app/views/components/_sub_navigation.html.erb
@@ -0,0 +1,21 @@
+<%
+  items ||= []
+%>
+<%= tag.div class: "govuk-grid-row" do %>
+  <%= tag.div class: "govuk-grid-column-full app-c-sub-navigation__container" do %>
+    <%= tag.nav class: "app-c-sub-navigation", role: "navigation", aria: { label: "Sub Navigation" } do %>
+      <%= tag.ul class: "app-c-sub-navigation__list" do %>
+        <% items.each do |item| %>
+          <%
+            item_classes = %w( app-c-sub-navigation__list-item )
+            item_classes << "app-c-sub-navigation__list-item--current" if item[:current]
+            item_aria_attributes = { current: "page" } if item[:current]
+          %>
+          <%= tag.li class: item_classes do %>
+            <%= link_to item[:label], item[:href], class: "govuk-link govuk-link--no-visited-state govuk-link--no-underline app-c-sub-navigation__list-item-link", data: item[:data_attributes], aria: item_aria_attributes %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
diff --git a/app/views/components/docs/sub_navigation.yml b/app/views/components/docs/sub_navigation.yml
new file mode 100644
index 00000000000..e77319699ba
--- /dev/null
+++ b/app/views/components/docs/sub_navigation.yml
@@ -0,0 +1,31 @@
+name: Sub navigation
+description: Displays a sub navigation with the current page marked accordingly
+accessibility_criteria: |
+  The component must:
+  * indicate that it is navigation landmark
+  * indicate if a navigation item links to the currently-displayed page
+shared_accessibility_criteria:
+  - link
+examples:
+  default:
+    data:
+      items:
+        - label: Nav item 1
+          href: "#"
+          current: true
+
+        - label: Nav item 2
+          href: "#"
+
+        - label: Nav item 3
+          href: "#"
+
+        - label: Nav item 4
+          href: "#"
+
+        - label: Nav item 5
+          href: "#"
+
+        - label: Nav item 6
+          href: "#"
+
diff --git a/test/views/components/sub_navigation_test.rb b/test/views/components/sub_navigation_test.rb
new file mode 100644
index 00000000000..3a9beecceed
--- /dev/null
+++ b/test/views/components/sub_navigation_test.rb
@@ -0,0 +1,34 @@
+require "test_helper"
+
+class SubNavigationTest < ActionView::TestCase
+  test "should render component" do
+    render("components/sub_navigation")
+
+    assert_select ".app-c-sub-navigation", count: 1
+  end
+
+  test "should render component with current page" do
+    render("components/sub_navigation", {
+      items: [
+        {
+          label: "Nav item 1",
+          href: "#",
+          current: true,
+        },
+        {
+          label: "Nav item 2",
+          href: "#",
+        },
+        {
+          label: "Nav item 3",
+          href: "#",
+        },
+      ],
+    })
+
+    assert_select ".app-c-sub-navigation", count: 1
+    assert_select ".app-c-sub-navigation__list-item", count: 3
+    assert_select ".app-c-sub-navigation__list-item--current", count: 1
+    assert_select ".app-c-sub-navigation__list-item", text: "Nav item 1"
+  end
+end