Update layout header component

CHANGELOG.md

@@ -12,6 +12,7 @@
 * Fix bugs on the feedback component ([PR #1900](https://github.com/alphagov/govuk_publishing_components/pull/1900))
 * Add data attributes to layout footer component ([PR #1904](https://github.com/alphagov/govuk_publishing_components/pull/1904))
 * Add option to remove border from document list items ([PR #1907](https://github.com/alphagov/govuk_publishing_components/pull/1907))
+* Update layout header component ([PR #1902](https://github.com/alphagov/govuk_publishing_components/pull/1902))
 
 ## 23.14.0
 

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

@@ -81,6 +81,17 @@ examples:
       - text: News and communications
         href: "item-6"
         active: true
+  with_navigation_link_data_attributes:
+    description: Supports adding data attributes i.e for tracking
+    data:
+      navigation_items:
+      - text: Departments
+        href: "item-1"
+        data:
+          module: "a custom attribute"
+          something_else: "some other custom attribute"
+      - text: Worldwide
+        href: "item-2"
   full_width:
     description: |
       This is difficult to preview because the preview windows are constrained, but the header will stretch to the size of its container.

app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb

@@ -1,16 +1,21 @@
 <% if navigation_items.any? %>
   <button role="button" class="govuk-header__menu-button gem-c-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
-  <%= tag.nav(class: "gem-c-header__nav", 'aria-label': navigation_aria_label ? navigation_aria_label : nil ) do %>
+  <%= tag.nav class: "gem-c-header__nav", aria: { label: navigation_aria_label } do %>
     <ul id="navigation" class="govuk-header__navigation govuk-header__navigation--end">
       <% navigation_items.each_with_index do |item, index| %>
-        <li class="govuk-header__navigation-item <%= "govuk-header__navigation-item--active" if item[:active] %>
-          <%= "govuk-header__navigation-item--collapsed-menu-only" if item[:show_only_in_collapsed_menu] %>">
+        <%
+          li_classes = %w(govuk-header__navigation-item)
+          li_classes << "govuk-header__navigation-item--active" if item[:active]
+          li_classes << "govuk-header__navigation-item--collapsed-menu-only" if item[:show_only_in_collapsed_menu]
+        %>
+        <%= tag.li class: li_classes do %>
           <%= link_to(
             item[:text],
             item[:href],
             class: 'govuk-header__link',
+            data: item[:data],
           ) %>
-        </li>
+        <% end %>
       <% end %>
     </ul>
   <% end %>

spec/components/layout_header_spec.rb

@@ -76,6 +76,30 @@ def component_name
     assert_select ".gem-c-header__nav[aria-label='My fancy label']"
   end
 
+  it "renders the navigation links with data attributes when specified" do
+    navigation_items = [
+      {
+        text: "Foo",
+        href: "/foo",
+        data: {
+          hello: "world",
+        },
+      },
+      {
+        text: "Bar",
+        href: "/bar",
+        data: {
+          more_than_one_word: "test",
+        },
+      },
+    ]
+
+    render_component(navigation_items: navigation_items)
+
+    assert_select ".gem-c-header__nav .govuk-header__link[data-hello='world']", text: "Foo"
+    assert_select ".gem-c-header__nav .govuk-header__link[data-more-than-one-word='test']", text: "Bar"
+  end
+
   it "renders the header without the bottom border" do
     render_component(remove_bottom_border: true, environment: "public")