Merge pull request #1043 from alphagov/allow-form-group-classes-on-ra…

…dios-and-checkboxes

Allow form group classes on radios and checkboxes

CHANGELOG.md

@@ -27,11 +27,11 @@
 
   ([PR #1045](https://github.com/alphagov/govuk-frontend/pull/1045))
 
-- Pull Request Title goes here
+- Allow form group classes on radios and checkboxes
 
-  Description goes here (optional)
+  We now provide a way to add classes to the radio and checkbox form-group wrapper
 
-  ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N))
+  ([PR #1043](https://github.com/alphagov/govuk-frontend/pull/1043))
 
 🔧 Fixes:
 

src/components/checkboxes/checkboxes.yaml

@@ -14,6 +14,15 @@ params:
   required: false
   description: Options for the errorMessage component (e.g. text).
   isComponent: true
+- name: formGroup
+  type: object
+  required: false
+  description: Options for the form-group wrapper
+  params:
+  - name: classes
+    type: string
+    required: false
+    description: Optional classes to add to the form group (e.g. to show error state for the whole group)
 - name: idPrefix
   type: string
   required: false
@@ -343,3 +352,34 @@ examples:
         html: |
           <label class="govuk-label" for="contact-text-message">Mobile phone number</label>
           <input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="text" id="contact-text-message">
+  
+- name: with optional form-group classes showing group error
+  readme: false
+  data:
+    idPrefix: how-contacted-checked
+    formGroup:
+      classes: 'govuk-form-group--error'
+    fieldset:
+      legend:
+        text: How do you want to be contacted?
+    items:
+    - value: email
+      text: Email
+      conditional:
+        html: |
+          <label class="govuk-label" for="context-email">Mobile phone number</label>
+          <input class="govuk-input govuk-!-width-one-third" name="context-email" type="text" id="context-email">
+    - value: phone
+      text: Phone
+      checked: true
+      conditional:
+        html: |
+          <label class="govuk-label" for="contact-phone">Phone number</label>
+          <span id="contact-phone-error" class="govuk-error-message">Problem with input</span>
+          <input class="govuk-input govuk-input--error govuk-!-width-one-third" name="contact-phone" type="text" id="contact-phone" aria-describedby="contact-phone-error">
+    - value: text
+      text: Text message
+      conditional:
+        html: |
+          <label class="govuk-label" for="contact-text-message">Mobile phone number</label>
+          <input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="text" id="contact-text-message">

src/components/checkboxes/template.njk

@@ -83,7 +83,7 @@
   </div>
 {% endset -%}
 
-<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %}">
+<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
 {% if params.fieldset %}
   {% call govukFieldset({
     describedBy: describedBy,

src/components/checkboxes/template.test.js

@@ -100,6 +100,28 @@ describe('Checkboxes', () => {
     expect($formGroup.length).toBeTruthy()
   })
 
+  it('render a custom class on the form group', () => {
+    const $ = render('checkboxes', {
+      name: 'example-name',
+      items: [
+        {
+          value: '1',
+          text: 'Option 1'
+        },
+        {
+          value: '2',
+          text: 'Option 2'
+        }
+      ],
+      formGroup: {
+        classes: 'custom-group-class'
+      }
+    })
+
+    const $formGroup = $('.govuk-form-group')
+    expect($formGroup.hasClass('custom-group-class')).toBeTruthy()
+  })
+
   describe('items', () => {
     it('render a matching label and input using name by default', () => {
       const $ = render('checkboxes', {

src/components/radios/radios.yaml

@@ -14,6 +14,15 @@ params:
   required: false
   description: Options for the errorMessage component (e.g. text).
   isComponent: true
+- name: formGroup
+  type: object
+  required: false
+  description: Options for the form-group wrapper
+  params:
+  - name: classes
+    type: string
+    required: false
+    description: Optional classes to add to the form group (e.g. to show error state for the whole group)
 - name: idPrefix
   type: string
   required: false
@@ -384,3 +393,35 @@ examples:
         html: |
           <label class="govuk-label" for="contact-text-message">Mobile phone number</label>
           <input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="text" id="contact-text-message">
+
+- name: with optional form-group classes showing group error
+  readme: false
+  data:
+    idPrefix: 'how-contacted-2'
+    name: 'how-contacted-2'
+    formGroup:
+      classes: 'govuk-form-group--error'
+    fieldset:
+      legend:
+        text: How do you want to be contacted?
+    items:
+    - value: email
+      text: Email
+      conditional:
+        html: |
+          <label class="govuk-label" for="context-email">Mobile phone number</label>
+          <input class="govuk-input govuk-!-width-one-third" name="context-email" type="text" id="context-email">
+    - value: phone
+      text: Phone
+      checked: true
+      conditional:
+        html: |
+          <label class="govuk-label" for="contact-phone">Phone number</label>
+          <span id="contact-phone-error" class="govuk-error-message">Problem with input</span>
+          <input class="govuk-input govuk-input--error govuk-!-width-one-third" name="contact-phone" type="text" id="contact-phone" aria-describedby="contact-phone-error">
+    - value: text
+      text: Text message
+      conditional:
+        html: |
+          <label class="govuk-label" for="contact-text-message">Mobile phone number</label>
+          <input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="text" id="contact-text-message">

src/components/radios/template.njk

@@ -86,7 +86,7 @@
   </div>
 {% endset -%}
 
-<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %}">
+<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
 {% if params.fieldset %}
   {% call govukFieldset({
     describedBy: describedBy,

src/components/radios/template.test.js

@@ -93,6 +93,28 @@ describe('Radios', () => {
     expect($component.attr('data-second-attribute')).toEqual('second-value')
   })
 
+  it('render a custom class on the form group', () => {
+    const $ = render('radios', {
+      name: 'example-name',
+      items: [
+        {
+          value: 'yes',
+          text: 'Yes'
+        },
+        {
+          value: 'no',
+          text: 'No'
+        }
+      ],
+      formGroup: {
+        classes: 'custom-group-class'
+      }
+    })
+
+    const $formGroup = $('.govuk-form-group')
+    expect($formGroup.hasClass('custom-group-class')).toBeTruthy()
+  })
+
   describe('items', () => {
     it('render a matching label and input using name by default', () => {
       const $ = render('radios', {