Update checkboxes and radio buttons to include item hint classes on i…

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)

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.
 </span>
+<span id="example-item-hint"
+      class="govuk-hint govuk-checkboxes__hint"
+>
+  Hint for british option here
+</span>
+<span id="example-3-item-hint"
+      class="govuk-hint govuk-checkboxes__hint app-checkboxes__hint-other"
+      data-test-attribute="true"
+>
+  Hint for other option here
+</span>
 `;
 
 exports[`Checkboxes when they include an error message renders the error message 1`] = `

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

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

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

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.
 </span>
+<span id="example-item-hint"
+      class="govuk-hint govuk-radios__hint"
+>
+  Hint for yes option here
+</span>
+<span id="example-2-item-hint"
+      class="govuk-hint govuk-radios__hint app-radios__hint-no"
+      data-test-attribute="true"
+>
+  Hint for no option here
+</span>
 `;
 
 exports[`Radios when they include an error message renders the error message 1`] = `

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

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