From 7b1ab8500171a517615f0bbea2e4e3c98efd4997 Mon Sep 17 00:00:00 2001
From: Kimberly Grey <kimberly.grey@digital.cabinet-office.gov.uk>
Date: Mon, 30 May 2022 14:12:07 +0100
Subject: [PATCH] Add parameter to localise mobile menu toggle button

Adds the `menuButton` parameter to customise the text of the menu toggle button that appears on narrow screens.
---
 src/govuk/components/header/header.yaml  | 19 +++++++++++++++++++
 src/govuk/components/header/template.njk |  2 +-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/govuk/components/header/header.yaml b/src/govuk/components/header/header.yaml
index 0058649cbcc..59fce95bc3b 100644
--- a/src/govuk/components/header/header.yaml
+++ b/src/govuk/components/header/header.yaml
@@ -56,6 +56,10 @@ params:
   type: string
   required: false
   description: Text for the `aria-label` attribute of the button that toggles the navigation. Defaults to 'Show or hide menu'.
+- name: menuButton
+  type: string
+  required: false
+  description: Text for the button that toggles the navigation. Defaults to 'Menu'.
 - name: containerClasses
   type: string
   required: false
@@ -131,6 +135,21 @@ examples:
         text: Navigation item 3
       - href: '#4'
         text: Navigation item 4
+        
+- name: with custom menu button text
+  description: Button translated into Welsh
+  data:
+    menuButton: Dewislen
+    navigation:
+      - href: '#1'
+        text: Eitem llywio 1
+        active: true
+      - href: '#2'
+        text: Eitem llywio 2
+      - href: '#3'
+        text: Eitem llywio 3
+      - href: '#4'
+        text: Eitem llywio 4
 
 - name: with custom menu button label
   data:
diff --git a/src/govuk/components/header/template.njk b/src/govuk/components/header/template.njk
index 915bcbbff4d..f4cfe198f9a 100644
--- a/src/govuk/components/header/template.njk
+++ b/src/govuk/components/header/template.njk
@@ -61,7 +61,7 @@
     {% endif %}
     {% if params.navigation %}
     <nav aria-label="{{ params.navigationLabel | default('Menu') }}" class="govuk-header__navigation {{ params.navigationClasses if params.navigationClasses }}">
-      <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="{{ params.menuButtonLabel | default('Show or hide menu') }}">Menu</button>
+      <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="{{ params.menuButtonLabel | default('Show or hide menu') }}">{{ params.menuButton | default('Menu') }}</button>
 
       <ul id="navigation" class="govuk-header__navigation-list">
         {% for item in params.navigation %}