Merge pull request #4385 from alphagov/layout-header-component-wrapper

Add component wrapper helper to the header

CHANGELOG.md

@@ -10,6 +10,7 @@
 ## Unreleased
 
 * Enhance Youtube without cookies ([PR #4388](https://github.com/alphagov/govuk_publishing_components/pull/4388))
+* Add component wrapper helper to the header ([PR #4385](https://github.com/alphagov/govuk_publishing_components/pull/4385))
 * Add component wrapper helper to the footer ([PR #4380](https://github.com/alphagov/govuk_publishing_components/pull/4380))
 * Add component wrapper to the inset text component ([PR #4387](https://github.com/alphagov/govuk_publishing_components/pull/4387))
 * Rename gem-print-link and gem-print-links-within ([PR #4375](https://github.com/alphagov/govuk_publishing_components/pull/4375))

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

@@ -11,12 +11,16 @@
   width_class = full_width ? "govuk-header__container--full-width" : "govuk-width-container"
   logo_link ||= "/"
 
-  header_classes = %w[gem-c-layout-header govuk-header]
-  header_classes << "gem-c-layout-header--#{environment}" if environment
-  header_classes << "gem-c-layout-header--no-bottom-border" if remove_bottom_border
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-layout-header govuk-header")
+  component_helper.add_class("gem-c-layout-header--#{environment}") if environment
+  component_helper.add_class("gem-c-layout-header--no-bottom-border") if remove_bottom_border
+  component_helper.add_role("banner")
+  component_helper.add_data_attribute({ module: "govuk-header" })
+
 %>
 
-<header class="<%= header_classes.join(' ') %>"  role="banner" data-module="govuk-header">
+<%= tag.header(**component_helper.all_attributes) do %>
   <div class="govuk-header__container <%= width_class %>">
     <div class="govuk-grid-row">
       <div class="gem-c-layout-header__logo govuk-grid-column-one-half">
@@ -38,4 +42,4 @@
       <% end %>
     </div>
   </div>
-</header>
+<% end %>

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

@@ -5,6 +5,7 @@ body: |
   staging or production).
 govuk_frontend_components:
   - header
+uses_component_wrapper_helper: true
 accessibility_excluded_rules:
   - landmark-banner-is-top-level # The header element can not be top level in the examples
   - duplicate-id # IDs will be duplicated in component examples list