Allow additional label classes in radios and checkboxes macros

CHANGELOG.md

@@ -40,6 +40,12 @@
   and checkbox item to display the hint
   ([PR #846](https://github.com/alphagov/govuk-frontend/pull/846))
 
+- Allow additional classes to be added to the radio and checkbox items
+
+  You can now provide `label: { classes: 'extra-class' }` to each item.
+
+  ([PR #880](https://github.com/alphagov/govuk-frontend/pull/880))
+
 🔧 Fixes:
 
 - Replace conflicting `js-hidden` class used within the tabs component with a new modifier class.

src/components/checkboxes/README.md

@@ -845,7 +845,7 @@ If you are using Nunjucks,then macros take the following arguments
 
 <td class="govuk-table__cell ">No</td>
 
-<td class="govuk-table__cell ">Provide additional attributes to each checkbox item label. See [label](../label/README.md#component-arguments) component for more details.</td>
+<td class="govuk-table__cell ">Provide additional attributes and classes to each checkbox item label. See [label](../label/README.md#component-arguments) component for more details.</td>
 
 </tr>
 

src/components/checkboxes/README.njk

@@ -182,7 +182,7 @@
         text: 'No'
       },
       {
-        html: 'Provide additional attributes to each checkbox item label. See <a href="../label/README.md#component-arguments">label</a> component for more details.'
+        html: 'Provide additional attributes and classes to each checkbox item label. See <a href="../label/README.md#component-arguments">label</a> component for more details.'
       }
     ],
     [

src/components/checkboxes/template.njk

@@ -59,7 +59,7 @@
       {{ govukLabel({
         html: item.html,
         text: item.text,
-        classes: 'govuk-checkboxes__label',
+        classes: 'govuk-checkboxes__label' + (' ' + item.label.classes if item.label.classes),
         attributes: item.label.attributes,
         for: id
       }) | indent(6) | trim }}

src/components/checkboxes/template.test.js

@@ -387,6 +387,25 @@ describe('Checkboxes', () => {
     })
   })
 
+  it('render additional label classes', () => {
+    const $ = render('radios', {
+      name: 'example-label-classes',
+      items: [
+        {
+          value: 'yes',
+          text: 'Yes',
+          label: {
+            classes: 'bold'
+          }
+        }
+      ]
+    })
+
+    const $component = $('.govuk-radios')
+    const $label = $component.find('.govuk-radios__item label')
+    expect($label.hasClass('bold')).toBeTruthy()
+  })
+
   describe('when they include an error message', () => {
     it('renders the error message', () => {
       const $ = render('checkboxes', examples['with all fieldset attributes'])

src/components/radios/README.md

@@ -805,7 +805,7 @@ If you are using Nunjucks,then macros take the following arguments
 
 <td class="govuk-table__cell ">No</td>
 
-<td class="govuk-table__cell ">Provide additional attributes to each radio item label. See [label](../label/README.md#component-arguments) component for more details.</td>
+<td class="govuk-table__cell ">Provide additional attributes and classes to each radio item label. See [label](../label/README.md#component-arguments) component for more details.</td>
 
 </tr>
 

src/components/radios/README.njk

@@ -181,7 +181,7 @@ Let users select a single option from a list.
         text: 'No'
       },
       {
-        html: 'Provide additional attributes to each radio item label. See <a href="../label/README.md#component-arguments">label</a> component for more details.'
+        html: 'Provide additional attributes and classes to each radio item label. See <a href="../label/README.md#component-arguments">label</a> component for more details.'
       }
     ],
     [

src/components/radios/template.njk

@@ -61,7 +61,7 @@
       {{ govukLabel({
         html: item.html,
         text: item.text,
-        classes: 'govuk-radios__label',
+        classes: 'govuk-radios__label' + (' ' + item.label.classes if item.label.classes),
         attributes: item.label.attributes,
         for: id
       }) | indent(6) | trim }}

src/components/radios/template.test.js

@@ -353,6 +353,25 @@ describe('Radios', () => {
       const $divider = $component.find('.govuk-radios__divider')
       expect($divider.text()).toBe('or')
     })
+
+    it('render additional label classes', () => {
+      const $ = render('radios', {
+        name: 'example-label-classes',
+        items: [
+          {
+            value: 'yes',
+            text: 'Yes',
+            label: {
+              classes: 'bold'
+            }
+          }
+        ]
+      })
+
+      const $component = $('.govuk-radios')
+      const $label = $component.find('.govuk-radios__item label')
+      expect($label.hasClass('bold')).toBeTruthy()
+    })
   })
 
   describe('when they include a hint', () => {