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

@@ -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: menuButtonText
+  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:
+    menuButtonText: 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:

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.menuButtonText | default('Menu') }}</button>
 
       <ul id="navigation" class="govuk-header__navigation-list">
         {% for item in params.navigation %}

src/govuk/components/header/template.test.js

@@ -210,6 +210,20 @@ describe('header', () => {
 
         expect($button.attr('aria-label')).toEqual('Custom button label')
       })
+      it('renders default text correctly', () => {
+        const $ = render('header', examples['with navigation'])
+
+        const $button = $('.govuk-header__menu-button')
+
+        expect($button.text()).toEqual('Menu')
+      })
+      it('allows text to be customised', () => {
+        const $ = render('header', examples['with custom menu button text'])
+
+        const $button = $('.govuk-header__menu-button')
+
+        expect($button.text()).toEqual('Dewislen')
+      })
     })
   })