Merge pull request #4229 from alphagov/Create-new-component_secondary…

…-navigation

Add files for secondary navigation:

CHANGELOG.md

@@ -15,6 +15,7 @@
 * Stop redacting dates in GA4 tracking on GOVUK search pages ([PR #4223](https://github.com/alphagov/govuk_publishing_components/pull/4223))
 * Remove 100 character limit on search results ([PR #4230](https://github.com/alphagov/govuk_publishing_components/pull/4230))
 * Add GA4 redaction to GWF and GB EORI numbers ([PR #4227](https://github.com/alphagov/govuk_publishing_components/pull/4227))
+* Add files for secondary navigation: ([PR #4229](https://github.com/alphagov/govuk_publishing_components/pull/4229))
 
 ## 43.1.1
 

app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -67,6 +67,7 @@
 @import "components/related-navigation";
 @import "components/reorderable-list";
 @import "components/search";
+@import "components/secondary-navigation";
 @import "components/select";
 @import "components/share-links";
 @import "components/signup-link";

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

@@ -0,0 +1,94 @@
+@import "govuk_publishing_components/individual_component_support";
+
+.gem-c-secondary-navigation {
+  @include govuk-font(19);
+  @include govuk-responsive-margin(6, "bottom");
+
+  @include govuk-media-query($from: tablet) {
+    box-shadow: inset 0 -1px 0 $govuk-border-colour;
+    display: flex;
+  }
+}
+
+.gem-c-secondary-navigation__list {
+  list-style: none;
+  margin-bottom: govuk-spacing(4);
+  padding: 0;
+
+  @include govuk-media-query($from: tablet) {
+    box-shadow: none;
+    display: flex;
+    margin: 0;
+    white-space: nowrap;
+  }
+}
+
+.gem-c-secondary-navigation__list-item {
+  box-shadow: inset 0 -1px 0 $govuk-border-colour;
+
+  @include govuk-media-query($from: tablet) {
+    display: flex;
+    margin-right: 20px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  &:last-child {
+    box-shadow: none;
+  }
+
+  .gem-c-secondary-navigation__list-item-link,
+  .gem-c-secondary-navigation__list-item-link:link,
+  .gem-c-secondary-navigation__list-item-link:visited {
+    background-color: inherit;
+    border-left: 4px solid transparent;
+    color: govuk-colour("blue");
+    display: block;
+    padding: govuk-spacing(2);
+    text-decoration: none;
+
+    @include govuk-media-query($from: tablet) {
+      border-bottom: 4px solid transparent;
+      border-left: 0;
+      padding: govuk-spacing(2) 0;
+      padding-bottom: govuk-spacing(2) - 4px; // Compensate for 4px border
+    }
+  }
+
+  .gem-c-secondary-navigation__list-item-link:hover {
+    color: $govuk-link-hover-colour;
+  }
+
+  .gem-c-secondary-navigation__list-item-link:focus {
+    @include govuk-focused-text;
+
+    border-color: $govuk-focus-text-colour;
+    border-left-color: transparent;
+    position: relative;
+
+    @include govuk-media-query($from: tablet) {
+      box-shadow: none;
+    }
+  }
+}
+
+.gem-c-secondary-navigation__list-item--current {
+  .gem-c-secondary-navigation__list-item-link:link,
+  .gem-c-secondary-navigation__list-item-link:visited {
+    border-color: govuk-colour("blue");
+    color: $govuk-text-colour;
+  }
+
+  .gem-c-secondary-navigation__list-item-link:focus {
+    @include govuk-focused-text;
+
+    border-color: $govuk-focus-text-colour;
+    border-left-color: transparent;
+
+    @include govuk-media-query($from: tablet) {
+      box-shadow: none;
+    }
+  }
+}

app/views/govuk_publishing_components/components/_secondary_navigation.html.erb

@@ -0,0 +1,29 @@
+<%
+  add_gem_component_stylesheet("secondary-navigation")
+
+  id ||= nil
+  items ||= []
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_aria_attribute({label: aria_label})
+  component_helper.add_class('gem-c-secondary-navigation')
+  component_helper.set_id(id)
+  component_helper.add_role("navigation")
+%>
+
+<% if items.any? %>
+  <%= tag.nav(**component_helper.all_attributes) do %>
+    <%= tag.ul class: "gem-c-secondary-navigation__list" do %>
+      <% items.each do |item| %>
+        <%
+          item_classes = %w( gem-c-secondary-navigation__list-item )
+          item_classes << "gem-c-secondary-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 gem-c-secondary-navigation__list-item-link", data: item[:data_attributes], aria: item_aria_attributes %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

app/views/govuk_publishing_components/components/docs/secondary_navigation.yml

@@ -0,0 +1,28 @@
+name: Secondary navigation
+description: Displays a secondary 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
+uses_component_wrapper_helper: true
+examples:
+  default:
+    data:
+      id: "nav_1234"
+      aria_label: Document navigation
+      items:
+        - label: Tab 1
+          href: "#1"
+          current: true
+          data_attributes:
+            gtm: tab
+        - label: Tab 2
+          href: "#2"
+          data_attributes:
+            gtm: tab
+        - label: Tab 3
+          href: "#3"
+          data_attributes:
+            gtm: tab

spec/components/secondary_navigation_spec.rb

@@ -0,0 +1,36 @@
+require "rails_helper"
+
+describe "Secondary navigation", type: :view do
+  def component_name
+    "secondary_navigation"
+  end
+
+  it "renders the component with current page" do
+    render_component({
+      aria_label: "Document navigation",
+      id: "nav_1234",
+      items: [
+        {
+          label: "Nav item 1",
+          href: "#",
+          current: true,
+        },
+        {
+          label: "Nav item 2",
+          href: "#",
+        },
+        {
+          label: "Nav item 3",
+          href: "#",
+        },
+      ],
+    })
+
+    assert_select ".gem-c-secondary-navigation", count: 1
+    assert_select ".gem-c-secondary-navigation__list-item", count: 3
+    assert_select ".gem-c-secondary-navigation__list-item--current", count: 1
+    assert_select ".gem-c-secondary-navigation__list-item--current", text: "Nav item 1"
+    assert_select ".gem-c-secondary-navigation__list-item--current a[aria-current='page']"
+    assert_select ".gem-c-secondary-navigation[id='nav_1234']"
+  end
+end

spec/lib/govuk_publishing_components/app_helpers/asset_helper_spec.rb

@@ -19,7 +19,7 @@ def request
     end
 
     it "detect the total number of stylesheet paths" do
-      expect(get_component_css_paths.count).to eql(77)
+      expect(get_component_css_paths.count).to eql(78)
     end
 
     it "initialize empty asset helper" do