diff --git a/CHANGELOG.md b/CHANGELOG.md index 565db047cb..fdeaf063de 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,13 @@ ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N)) +- Allow attributes on checkboxes/radios + + You can now provide attributes on checkbox and radio items + `attributes: { 'data-attribute': 'value' }` + + ([PR #942](https://github.com/alphagov/govuk-frontend/pull/942)) + 🔧 Fixes: - Pull Request Title goes here diff --git a/src/components/checkboxes/README.md b/src/components/checkboxes/README.md index 8bf82d7a72..85ce60b67a 100644 --- a/src/components/checkboxes/README.md +++ b/src/components/checkboxes/README.md @@ -911,6 +911,18 @@ If you are using Nunjucks,then macros take the following arguments +items.{}.attributes + +object + +No + +Any extra HTML attributes (for example data attributes) to add to the checkbox input tag. + + + + + classes string diff --git a/src/components/checkboxes/README.njk b/src/components/checkboxes/README.njk index a726540977..a71339aadd 100644 --- a/src/components/checkboxes/README.njk +++ b/src/components/checkboxes/README.njk @@ -255,6 +255,20 @@ text: 'If true, checkbox will be disabled.' } ], + [ + { + text: 'items.{}.attributes' + }, + { + text: 'object' + }, + { + text: 'No' + }, + { + text: 'Any extra HTML attributes (for example data attributes) to add to the checkbox input tag.' + } + ], [ { text: 'classes' diff --git a/src/components/checkboxes/template.njk b/src/components/checkboxes/template.njk index 184de24762..148f787a1f 100644 --- a/src/components/checkboxes/template.njk +++ b/src/components/checkboxes/template.njk @@ -55,7 +55,8 @@ {{-" checked" if item.checked }} {{-" disabled" if item.disabled }} {%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%} - {%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}> + {%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%} + {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}> {{ govukLabel({ html: item.html, text: item.text, diff --git a/src/components/checkboxes/template.test.js b/src/components/checkboxes/template.test.js index 14533b649a..59b7c094f6 100644 --- a/src/components/checkboxes/template.test.js +++ b/src/components/checkboxes/template.test.js @@ -253,6 +253,42 @@ describe('Checkboxes', () => { expect($secondInput.attr('checked')).toEqual('checked') expect($lastInput.attr('checked')).toEqual('checked') }) + + describe('when they include attributes', () => { + it('it renders the attributes', () => { + const $ = render('checkboxes', { + name: 'example-name', + items: [ + { + value: '1', + text: 'Option 1', + attributes: { + 'data-attribute': 'ABC', + 'data-second-attribute': 'DEF' + } + }, + { + value: '2', + text: 'Option 2', + attributes: { + 'data-attribute': 'GHI', + 'data-second-attribute': 'JKL' + } + } + ] + }) + + const $component = $('.govuk-checkboxes') + + const $firstInput = $component.find('.govuk-checkboxes__item:first-child input') + expect($firstInput.attr('data-attribute')).toEqual('ABC') + expect($firstInput.attr('data-second-attribute')).toEqual('DEF') + + const $lastInput = $component.find('.govuk-checkboxes__item:last-child input') + expect($lastInput.attr('data-attribute')).toEqual('GHI') + expect($lastInput.attr('data-second-attribute')).toEqual('JKL') + }) + }) }) describe('when they include a hint', () => { diff --git a/src/components/radios/README.md b/src/components/radios/README.md index c8e2381a4a..b8b483f7c6 100644 --- a/src/components/radios/README.md +++ b/src/components/radios/README.md @@ -883,6 +883,18 @@ If you are using Nunjucks,then macros take the following arguments +items.{}.attributes + +object + +No + +Any extra HTML attributes (for example data attributes) to add to the radio input tag. + + + + + classes string diff --git a/src/components/radios/README.njk b/src/components/radios/README.njk index 865251f9fa..ea715ea33b 100644 --- a/src/components/radios/README.njk +++ b/src/components/radios/README.njk @@ -268,6 +268,20 @@ Let users select a single option from a list. text: 'If true, radio will be disabled.' } ], + [ + { + text: 'items.{}.attributes' + }, + { + text: 'object' + }, + { + text: 'No' + }, + { + text: 'Any extra HTML attributes (for example data attributes) to add to the radio input tag.' + } + ], [ { text: 'classes' diff --git a/src/components/radios/template.njk b/src/components/radios/template.njk index 639e31d4b2..39f16cecd6 100644 --- a/src/components/radios/template.njk +++ b/src/components/radios/template.njk @@ -57,7 +57,8 @@ {{-" checked" if item.checked }} {{-" disabled" if item.disabled }} {%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%} - {%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}> + {%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%} + {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}> {{ govukLabel({ html: item.html, text: item.text, diff --git a/src/components/radios/template.test.js b/src/components/radios/template.test.js index 84780adc59..fb6681e5bc 100644 --- a/src/components/radios/template.test.js +++ b/src/components/radios/template.test.js @@ -198,6 +198,43 @@ describe('Radios', () => { expect($lastInput.attr('checked')).toEqual('checked') }) + describe('when they include attributes', () => { + it('it renders the attributes', () => { + const $ = render('radios', { + name: 'example-name', + items: [ + { + value: 'yes', + text: 'Yes', + attributes: { + 'data-attribute': 'ABC', + 'data-second-attribute': 'DEF' + } + }, + { + value: 'no', + text: 'No', + checked: true, + attributes: { + 'data-attribute': 'GHI', + 'data-second-attribute': 'JKL' + } + } + ] + }) + + const $component = $('.govuk-radios') + + const $firstInput = $component.find('.govuk-radios__item:first-child input') + expect($firstInput.attr('data-attribute')).toEqual('ABC') + expect($firstInput.attr('data-second-attribute')).toEqual('DEF') + + const $lastInput = $component.find('.govuk-radios__item:last-child input') + expect($lastInput.attr('data-attribute')).toEqual('GHI') + expect($lastInput.attr('data-second-attribute')).toEqual('JKL') + }) + }) + describe('when they include a hint', () => { it('it renders the hint text', () => { const $ = render('radios', {