Merge pull request #3344 from TomBillingtonUK/add-id-attribute-to-button

Adding optional id attribute to button component

CHANGELOG.md

@@ -41,6 +41,19 @@ If you're not using the Nunjucks macro, you can disable it using the `data-remem
 
 This was added in [pull request #3342: Add option to disable sessionState in Accordion](https://github.com/alphagov/govuk-frontend/pull/3342).
 
+#### Added `id` parameter to Buttons
+
+The [Button](https://design-system.service.gov.uk/components/button/) Nunjucks macro has been updated to include an optional `id` parameter.
+
+```nunjucks
+{{ govukButton({
+  text: "Save and continue",
+  id: "continue-button"
+}) }}
+```
+
+This was added in [pull request #3344: Adding optional id attribute to button component](https://github.com/alphagov/govuk-frontend/pull/3344). Thanks to [Tom Billington](https://github.com/TomBillingtonUK) for this contribution.
+
 ### Deprecated features
 
 #### Stop using the `govuk-button--disabled` class on buttons

src/govuk/components/button/button.yaml

@@ -47,6 +47,10 @@ params:
     type: boolean
     required: false
     description: Use for the main call to action on your service's start page.
+  - name: id
+    type: string
+    required: false
+    description: The ID of the button.
 
 examples:
   - name: default
@@ -242,3 +246,9 @@ examples:
     data:
       text: Submit
       preventDoubleClick: false
+  - name: id
+    hidden: true
+    data:
+      text: Submit
+      element: input
+      id: submit

src/govuk/components/button/template.njk

@@ -33,7 +33,7 @@ treat it as an interactive element - without this it will be
 
 {#- Define common attributes that we can use across all element types #}
 
-{%- set commonAttributes %} class="{{ classNames }}" data-module="govuk-button"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endset %}
+{%- set commonAttributes %} class="{{ classNames }}" data-module="govuk-button"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% if params.id %} id="{{ params.id }}"{% endif %}{% endset %}
 
 {#- Define common attributes we can use for both button and input types #}
 

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

@@ -56,6 +56,13 @@ describe('Button', () => {
       expect($component.attr('name')).toEqual('start-now')
     })
 
+    it('renders with id', () => {
+      const $ = render('button', examples.id)
+
+      const $component = $('.govuk-button')
+      expect($component.attr('id')).toEqual('submit')
+    })
+
     it('renders with value', () => {
       const $ = render('button', examples.value)