diff --git a/CHANGELOG.md b/CHANGELOG.md index cc195fd77c..466d59c5d0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ ### Fixes - [Pull request #1655: Ensure components use public `govuk-media-query` mixin](https://github.com/alphagov/govuk-frontend/pull/1655). +- [Pull request #1648: Update checkboxes and radio buttons to include item hint classes on item hint](https://github.com/alphagov/govuk-frontend/pull/1648) - [Pull request #1638: Check component item arrays are not empty before outputting markup](https://github.com/alphagov/govuk-frontend/pull/1638). ## 3.4.0 (Feature release) diff --git a/src/govuk/components/checkboxes/__snapshots__/template.test.js.snap b/src/govuk/components/checkboxes/__snapshots__/template.test.js.snap index 05d968c651..335be1d806 100644 --- a/src/govuk/components/checkboxes/__snapshots__/template.test.js.snap +++ b/src/govuk/components/checkboxes/__snapshots__/template.test.js.snap @@ -47,6 +47,17 @@ exports[`Checkboxes when they include a hint renders the hint 1`] = ` > If you have dual nationality, select all options that are relevant to you. + + Hint for british option here + + + Hint for other option here + `; exports[`Checkboxes when they include an error message renders the error message 1`] = ` diff --git a/src/govuk/components/checkboxes/checkboxes.yaml b/src/govuk/components/checkboxes/checkboxes.yaml index aff1facee9..dd3bfe3b99 100644 --- a/src/govuk/components/checkboxes/checkboxes.yaml +++ b/src/govuk/components/checkboxes/checkboxes.yaml @@ -261,29 +261,6 @@ examples: - value: other text: Citizen of another country -- name: with all fieldset attributes - data: - idPrefix: example - name: example - fieldset: - classes: app-fieldset--custom-modifier - attributes: - data-attribute: value - data-second-attribute: second-value - legend: - text: What is your nationality? - hint: - text: If you have dual nationality, select all options that are relevant to you. - errorMessage: - text: Please select an option - items: - - value: british - text: British - - value: irish - text: Irish - - value: other - text: Citizen of another country - - name: with error message data: name: waste diff --git a/src/govuk/components/checkboxes/template.njk b/src/govuk/components/checkboxes/template.njk index 57df1cd760..6337207509 100644 --- a/src/govuk/components/checkboxes/template.njk +++ b/src/govuk/components/checkboxes/template.njk @@ -88,7 +88,7 @@ {% if hasHint %} {{ govukHint({ id: itemHintId, - classes: 'govuk-checkboxes__hint', + classes: 'govuk-checkboxes__hint' + (' ' + item.hint.classes if item.hint.classes), attributes: item.hint.attributes, html: item.hint.html, text: item.hint.text diff --git a/src/govuk/components/checkboxes/template.test.js b/src/govuk/components/checkboxes/template.test.js index 43e9155d86..b273908cee 100644 --- a/src/govuk/components/checkboxes/template.test.js +++ b/src/govuk/components/checkboxes/template.test.js @@ -560,7 +560,12 @@ describe('Checkboxes', () => { describe('when they include an error message', () => { it('renders the error message', () => { - const $ = render('checkboxes', examples['with all fieldset attributes']) + const $ = render('checkboxes', { + name: 'example', + errorMessage: { + text: 'Please select an option' + } + }) expect(htmlWithClassName($, '.govuk-error-message')).toMatchSnapshot() }) @@ -667,13 +672,50 @@ describe('Checkboxes', () => { describe('when they include a hint', () => { it('renders the hint', () => { - const $ = render('checkboxes', examples['with all fieldset attributes']) + const $ = render('checkboxes', { + name: 'example', + hint: { + text: 'If you have dual nationality, select all options that are relevant to you.' + }, + items: [ + { + value: 'british', + text: 'British', + hint: { + text: 'Hint for british option here' + } + }, + { + value: 'irish', + text: 'Irish' + }, + { + hint: { + text: 'Hint for other option here', + classes: 'app-checkboxes__hint-other', + attributes: { + 'data-test-attribute': true + } + } + } + ] + }) expect(htmlWithClassName($, '.govuk-hint')).toMatchSnapshot() }) it('associates the fieldset as "described by" the hint', () => { - const $ = render('checkboxes', examples['with all fieldset attributes']) + const $ = render('checkboxes', { + name: 'example', + fieldset: { + legend: { + text: 'What is your nationality?' + } + }, + hint: { + text: 'If you have dual nationality, select all options that are relevant to you.' + } + }) const $fieldset = $('.govuk-fieldset') const $hint = $('.govuk-hint') @@ -687,11 +729,19 @@ describe('Checkboxes', () => { it('associates the fieldset as "described by" the hint and parent fieldset', () => { const describedById = 'some-id' - const params = examples['with all fieldset attributes'] - params.fieldset.describedBy = describedById - - const $ = render('checkboxes', params) + const $ = render('checkboxes', { + name: 'example', + fieldset: { + describedBy: describedById, + legend: { + text: 'What is your nationality?' + } + }, + hint: { + text: 'If you have dual nationality, select all options that are relevant to you.' + } + }) const $fieldset = $('.govuk-fieldset') const $hint = $('.govuk-hint') @@ -700,13 +750,25 @@ describe('Checkboxes', () => { ) expect($fieldset.attr('aria-describedby')).toMatch(hintId) - delete params.fieldset.describedBy }) }) describe('when they include both a hint and an error message', () => { it('associates the fieldset as described by both the hint and the error message', () => { - const $ = render('checkboxes', examples['with all fieldset attributes']) + const $ = render('checkboxes', { + name: 'example', + errorMessage: { + text: 'Please select an option' + }, + fieldset: { + legend: { + text: 'What is your nationality?' + } + }, + hint: { + text: 'If you have dual nationality, select all options that are relevant to you.' + } + }) const $fieldset = $('.govuk-fieldset') const errorMessageId = $('.govuk-error-message').attr('id') @@ -722,11 +784,22 @@ describe('Checkboxes', () => { it('associates the fieldset as described by the hint, error message and parent fieldset', () => { const describedById = 'some-id' - const params = examples['with all fieldset attributes'] - params.fieldset.describedBy = describedById - - const $ = render('checkboxes', params) + const $ = render('checkboxes', { + name: 'example', + errorMessage: { + text: 'Please select an option' + }, + fieldset: { + describedBy: describedById, + legend: { + text: 'What is your nationality?' + } + }, + hint: { + text: 'If you have dual nationality, select all options that are relevant to you.' + } + }) const $fieldset = $('.govuk-fieldset') const errorMessageId = $('.govuk-error-message').attr('id') @@ -738,14 +811,18 @@ describe('Checkboxes', () => { expect($fieldset.attr('aria-describedby')) .toMatch(combinedIds) - - delete params.fieldset.describedBy }) }) describe('nested dependant components', () => { it('have correct nesting order', () => { - const $ = render('checkboxes', examples['with all fieldset attributes']) + const $ = render('checkboxes', { + fieldset: { + legend: { + text: 'What is your nationality?' + } + } + }) const $component = $('.govuk-form-group > .govuk-fieldset > .govuk-checkboxes') expect($component.length).toBeTruthy() @@ -777,7 +854,25 @@ describe('Checkboxes', () => { }) it('passes through fieldset params without breaking', () => { - const $ = render('checkboxes', examples['with all fieldset attributes']) + const $ = render('checkboxes', { + name: 'example', + errorMessage: { + text: 'Please select an option' + }, + fieldset: { + classes: 'app-fieldset--custom-modifier', + attributes: { + 'data-attribute': 'value', + 'data-second-attribute': 'second-value' + }, + legend: { + text: 'What is your nationality?' + } + }, + hint: { + text: 'If you have dual nationality, select all options that are relevant to you.' + } + }) expect(htmlWithClassName($, '.govuk-fieldset')).toMatchSnapshot() }) diff --git a/src/govuk/components/radios/__snapshots__/template.test.js.snap b/src/govuk/components/radios/__snapshots__/template.test.js.snap index 1de2bf559d..95579c11f4 100644 --- a/src/govuk/components/radios/__snapshots__/template.test.js.snap +++ b/src/govuk/components/radios/__snapshots__/template.test.js.snap @@ -47,6 +47,17 @@ exports[`Radios when they include a hint renders the hint 1`] = ` > This includes changing your last name or spelling your name differently. + + Hint for yes option here + + + Hint for no option here + `; exports[`Radios when they include an error message renders the error message 1`] = ` diff --git a/src/govuk/components/radios/radios.yaml b/src/govuk/components/radios/radios.yaml index 79a768a999..cb20166992 100644 --- a/src/govuk/components/radios/radios.yaml +++ b/src/govuk/components/radios/radios.yaml @@ -258,28 +258,6 @@ examples: text: No checked: true -- name: with all fieldset attributes - data: - idPrefix: example - name: example - errorMessage: - text: Please select an option - fieldset: - classes: app-fieldset--custom-modifier - attributes: - data-attribute: value - data-second-attribute: second-value - legend: - text: Have you changed your name? - hint: - text: This includes changing your last name or spelling your name differently. - items: - - value: yes - text: Yes - - value: no - text: No - checked: true - - name: with very long option text data: name: waste diff --git a/src/govuk/components/radios/template.njk b/src/govuk/components/radios/template.njk index da392c9cda..280ad806a5 100644 --- a/src/govuk/components/radios/template.njk +++ b/src/govuk/components/radios/template.njk @@ -82,7 +82,7 @@ {% if hasHint %} {{ govukHint({ id: itemHintId, - classes: 'govuk-radios__hint', + classes: 'govuk-radios__hint' + (' ' + item.hint.classes if item.hint.classes), attributes: item.hint.attributes, html: item.hint.html, text: item.hint.text diff --git a/src/govuk/components/radios/template.test.js b/src/govuk/components/radios/template.test.js index 31abdac333..5e58a051d1 100644 --- a/src/govuk/components/radios/template.test.js +++ b/src/govuk/components/radios/template.test.js @@ -535,13 +535,44 @@ describe('Radios', () => { describe('when they include a hint', () => { it('renders the hint', () => { - const $ = render('radios', examples['with all fieldset attributes']) + const $ = render('radios', { + name: 'example', + hint: { + text: 'This includes changing your last name or spelling your name differently.' + }, + items: [ + { + hint: { + text: 'Hint for yes option here' + } + }, + { + hint: { + classes: 'app-radios__hint-no', + text: 'Hint for no option here', + attributes: { + 'data-test-attribute': true + } + } + } + ] + }) expect(htmlWithClassName($, '.govuk-hint')).toMatchSnapshot() }) it('associates the fieldset as "described by" the hint', () => { - const $ = render('radios', examples['with all fieldset attributes']) + const $ = render('radios', { + name: 'example', + fieldset: { + legend: { + text: 'Have you changed your name?' + } + }, + hint: { + text: 'This includes changing your last name or spelling your name differently.' + } + }) const $fieldset = $('.govuk-fieldset') const $hint = $('.govuk-hint') @@ -555,11 +586,19 @@ describe('Radios', () => { it('associates the fieldset as "described by" the hint and parent fieldset', () => { const describedById = 'some-id' - const params = examples['with all fieldset attributes'] - - params.fieldset.describedBy = describedById - const $ = render('radios', params) + const $ = render('radios', { + name: 'example', + fieldset: { + describedBy: describedById, + legend: { + text: 'Have you changed your name?' + } + }, + hint: { + text: 'This includes changing your last name or spelling your name differently.' + } + }) const $fieldset = $('.govuk-fieldset') const $hint = $('.govuk-hint') @@ -568,13 +607,17 @@ describe('Radios', () => { ) expect($fieldset.attr('aria-describedby')).toMatch(hintId) - delete params.fieldset.describedBy }) }) describe('when they include an error message', () => { it('renders the error message', () => { - const $ = render('radios', examples['with all fieldset attributes']) + const $ = render('radios', { + name: 'example', + errorMessage: { + text: 'Please select an option' + } + }) expect(htmlWithClassName($, '.govuk-error-message')).toMatchSnapshot() }) @@ -666,7 +709,19 @@ describe('Radios', () => { describe('when they include both a hint and an error message', () => { it('associates the fieldset as described by both the hint and the error message', () => { - const $ = render('radios', examples['with all fieldset attributes']) + const $ = render('radios', { + errorMessage: { + text: 'Please select an option' + }, + fieldset: { + legend: { + text: 'Have you changed your name?' + } + }, + hint: { + text: 'This includes changing your last name or spelling your name differently.' + } + }) const $fieldset = $('.govuk-fieldset') const errorMessageId = $('.govuk-error-message').attr('id') @@ -682,11 +737,21 @@ describe('Radios', () => { it('associates the fieldset as described by the hint, error message and parent fieldset', () => { const describedById = 'some-id' - const params = examples['with all fieldset attributes'] - params.fieldset.describedBy = describedById - - const $ = render('radios', params) + const $ = render('radios', { + errorMessage: { + text: 'Please select an option' + }, + fieldset: { + describedBy: describedById, + legend: { + text: 'Have you changed your name?' + } + }, + hint: { + text: 'This includes changing your last name or spelling your name differently.' + } + }) const $fieldset = $('.govuk-fieldset') const errorMessageId = $('.govuk-error-message').attr('id') @@ -698,14 +763,18 @@ describe('Radios', () => { expect($fieldset.attr('aria-describedby')) .toMatch(combinedIds) - - delete params.fieldset.describedBy }) }) describe('nested dependant components', () => { it('have correct nesting order', () => { - const $ = render('radios', examples['with all fieldset attributes']) + const $ = render('radios', { + fieldset: { + legend: { + text: 'Have you changed your name?' + } + } + }) const $component = $('.govuk-form-group > .govuk-fieldset > .govuk-radios') expect($component.length).toBeTruthy() @@ -737,7 +806,25 @@ describe('Radios', () => { }) it('passes through fieldset params without breaking', () => { - const $ = render('radios', examples['with all fieldset attributes']) + const $ = render('radios', { + name: 'example', + errorMessage: { + text: 'Please select an option' + }, + fieldset: { + classes: 'app-fieldset--custom-modifier', + attributes: { + 'data-attribute': 'value', + 'data-second-attribute': 'second-value' + }, + legend: { + text: 'Have you changed your name?' + } + }, + hint: { + text: 'This includes changing your last name or spelling your name differently.' + } + }) expect(htmlWithClassName($, '.govuk-fieldset')).toMatchSnapshot() })