Merge pull request #8400 from alphagov/583-create-subnavigation-compo…

…nent

Created sub-navigation component with design system to whitehall.

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";

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

@@ -0,0 +1,39 @@
+.app-c-sub-navigation {
+  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");
+}

app/views/components/_sub_navigation.html.erb

@@ -0,0 +1,21 @@
+<%
+  items ||= []
+%>
+<%= tag.div class: "govuk-grid-row app-c-sub-navigation" do %>
+  <%= tag.div class: "govuk-grid-column-full" do %>
+    <%= tag.nav 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 %>

app/views/components/docs/sub_navigation.yml

@@ -0,0 +1,32 @@
+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: "#"
+

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--current", text: "Nav item 1"
+  end
+end