Added sub-navigation component to whitehall

alphagov · Oct 23, 2023 · de8a10e · de8a10e
1 parent 84126ef
commit de8a10e
Show file tree

Hide file tree

Showing 5 changed files with 173 additions and 0 deletions.
diff --git 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
@@ -0,0 +1,86 @@
+.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;
+  margin-right: govuk-spacing(4);
+  margin-top: 0;
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+.app-c-sub-navigation__list-item--current {
+  color: $govuk-link-colour;
+  position: relative;
+  text-decoration: none;
+  font-weight: bold;
+
+  &::before {
+    background-color: $govuk-link-colour;
+    content: "";
+    display: block;
+    height: 5px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+  }
+
+  &:focus {
+    color: govuk-colour("black"); // Focus colour on yellow should really be black.
+    position: relative; // Ensure focus sits above everything else.
+    border: none;
+
+    &::before {
+      background-color: govuk-colour("black");
+    }
+  }
+}
+
+.app-c-sub-navigation__list-item-link {
+  @include govuk-link-common;
+  @include govuk-link-style-default;
+  display: block;
+  padding-bottom: 15px;
+  padding-top: 15px;
+  text-decoration: none;
+  font-weight: bold;
+
+  &:link,
+  &:visited {
+    color: $govuk-link-colour;
+  }
+
+  &:hover {
+    color: govuk-tint($govuk-link-colour, 25);
+  }
+
+  &:focus {
+    color: govuk-colour("black"); // Focus colour on yellow should really be black.
+    position: relative; // Ensure focus sits above everything else.
+    z-index: 1;
+    box-shadow: none;
+  }
+
+  &:focus::before {
+    background-color: govuk-colour("black");
+    content: "";
+    display: block;
+    height: 5px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+  }
+}
diff --git a/app/views/components/_sub_navigation.html.erb 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 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
@@ -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
@@ -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