PLATUI-2900: Added menuButtonText and menuButtonLabel params to heade… (

#356)

PLATUI-2900: Added menuButtonText and menuButtonLabel params to header component in line with the govuk-frontend header, updated styles and tests

CHANGELOG.md

@@ -7,6 +7,16 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 
+## [6.8.0] - 2024-03-21
+
+### Changed
+
+- Added `menuButtonText` and `menuButtonLabel` params to `header` component in line with the `govuk-frontend` header
+- Removed `hmrc-header__service-name` and `hmrc-header__service-name--linked` from `header` component, to use only styles
+  from `govuk-frontend`
+- Updated `hmrc-header__service-name` and `hmrc-header__service-name--linked` (for services adding manually to other 
+  components)
+
 ## [6.7.0] - 2024-03-19
 
 ### Changed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hmrc-frontend",
-  "version": "6.7.0",
+  "version": "6.8.0",
   "description": "Design patterns for HMRC frontends",
   "scripts": {
     "start": "gulp dev",

src/components/header/_header.scss

@@ -57,11 +57,11 @@ $govuk-header-link-underline-thickness: 3px;
   display: inline-block;
   margin-bottom: govuk-spacing(2);
 
-  @include govuk-font($size: 24, $weight: bold);
+  @include govuk-font-size($size: 24);
+  @include govuk-typography-weight-bold;
 }
 
 .hmrc-header__service-name--linked {
-  @include govuk-typography-common;
   @include govuk-link-style-inverse;
 
   text-decoration: none;
@@ -70,7 +70,7 @@ $govuk-header-link-underline-thickness: 3px;
     text-decoration: underline;
     text-decoration-thickness: $govuk-header-link-underline-thickness;
 
-    @if ($govuk-link-underline-offset) {
+    @if $govuk-link-underline-offset {
       text-underline-offset: $govuk-link-underline-offset;
     }
   }

src/components/header/header.yaml

@@ -48,6 +48,14 @@ params:
   type: string
   required: false
   description: Classes for the navigation section of the header.
+- name: menuButtonLabel
+  type: string
+  required: false
+  description: Text for the `aria-label` attribute of the button that opens the mobile navigation, if there is a mobile navigation menu.
+- name: menuButtonText
+  type: string
+  required: false
+  description: Text of the button that opens the mobile navigation menu, if there is a mobile navigation menu. There is no enforced character limit, but there is a limited display space so keep text as short as possible. By default, this is set to 'Menu'.
 - name: containerClasses
   type: string
   required: false
@@ -450,3 +458,19 @@ examples:
         text: Navigation item 4
     attributes:
       data-test-attribute-3: value-3
+
+- name: with custom menu button text and label
+  description: With the menuButtonText and menuButtonLabel parameters set
+  data:
+    navigation:
+      - href: '#1'
+        text: Navigation item 1
+        active: true
+      - href: '#2'
+        text: Navigation item 2
+      - href: '#3'
+        text: Navigation item 3
+      - href: '#4'
+        text: Navigation item 4
+    menuButtonText: 'Some custom button text'
+    menuButtonLabel: 'Some custom button aria label'

src/components/header/template.njk

@@ -5,7 +5,7 @@
 
 {% from "govuk/macros/attributes.njk" import govukAttributes %}
 
-{%- set menuButtonText = 'Dewislen' if language == 'cy' else 'Menu' -%}
+{%- set menuButtonText = params.menuButtonText if params.menuButtonText else ('Dewislen' if language == 'cy' else 'Menu') -%}
 
 {%- set _stEdwardsCrown %}
 <svg
@@ -63,11 +63,11 @@
     <div class="govuk-header__content">
     {% if params.serviceName %}
       {% if params.serviceUrl %}
-      <a href="{{ params.serviceUrl }}" class="govuk-header__link govuk-header__service-name hmrc-header__service-name hmrc-header__service-name--linked">
+      <a href="{{ params.serviceUrl }}" class="govuk-header__link govuk-header__service-name">
         {{ params.serviceName }}
       </a>
       {% else %}
-      <span class="govuk-header__service-name hmrc-header__service-name">
+      <span class="govuk-header__service-name">
         {{ params.serviceName }}
       </span>
       {% endif %}