diff --git a/CHANGELOG.md b/CHANGELOG.md index 48e3f75cfc..81e28c1b2c 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/govuk/components/button/button.yaml b/src/govuk/components/button/button.yaml index f85f0a1dac..55c359e059 100644 --- a/src/govuk/components/button/button.yaml +++ b/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 diff --git a/src/govuk/components/button/template.njk b/src/govuk/components/button/template.njk index aecc8aafd9..1ef846cfb7 100644 --- a/src/govuk/components/button/template.njk +++ b/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 #} diff --git a/src/govuk/components/button/template.test.js b/src/govuk/components/button/template.test.js index ead27c403c..51c773ba4c 100644 --- a/src/govuk/components/button/template.test.js +++ b/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)