From 8415670f225445480c31455b24d3344890e45200 Mon Sep 17 00:00:00 2001 From: Tom Billington Date: Tue, 28 Feb 2023 00:15:05 +0000 Subject: [PATCH 1/3] Added id attribute to button --- src/govuk/components/button/button.yaml | 10 ++++++++++ src/govuk/components/button/template.njk | 2 +- src/govuk/components/button/template.test.js | 7 +++++++ 3 files changed, 18 insertions(+), 1 deletion(-) 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) From c1072d39092446ae71e79a8515d0b9ea6d6af660 Mon Sep 17 00:00:00 2001 From: Tom Billington <8750472+TomBillingtonUK@users.noreply.github.com> Date: Thu, 2 Mar 2023 00:28:27 +0000 Subject: [PATCH 2/3] Update CHANGELOG.md --- CHANGELOG.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 48e3f75cfc..105e3b8a8d 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 button + +The nunjucks macro for button has been updated to include an optional parameter ID. + +```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). + ### Deprecated features #### Stop using the `govuk-button--disabled` class on buttons From bb1c206c33652e235b123e86818bcdfb1050c933 Mon Sep 17 00:00:00 2001 From: beeps Date: Thu, 2 Mar 2023 16:02:41 +0000 Subject: [PATCH 3/3] Tidy up changelog --- CHANGELOG.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 105e3b8a8d..81e28c1b2c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -41,18 +41,18 @@ 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 button +#### Added `id` parameter to Buttons -The nunjucks macro for button has been updated to include an optional parameter ID. +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" - }) }} +{{ 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). +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