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.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.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()
})