Merge pull request #1553 from LBHELewis/feature/include-form-group-on…

…-character-count-component

Include formGroup on character count and pass through to textarea to …

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+### New features
+
+#### Add formGroup parameter to character count component
+
+- [Pull request #1553: Include formGroup on character count and pass through to textarea to allow class to be added to character count form group](https://github.com/alphagov/govuk-frontend/pull/1553)
+
 ### Fixes
 
 - [Pull request #1548: Fix fieldset legend text clipping when using a custom or fallback font](https://github.com/alphagov/govuk-frontend/pull/1548).

src/govuk/components/character-count/character-count.yaml

@@ -42,6 +42,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: Classes to add to the form group (e.g. to show error state for the whole group)
 - name: classes
   type: string
   required: false
@@ -51,6 +60,7 @@ params:
   required: false
   description: HTML attributes (for example data attributes) to add to the textarea.
 
+
 examples:
   - name: default
     data:

src/govuk/components/character-count/template.njk

@@ -10,6 +10,7 @@
     describedBy: params.id + '-info',
     rows: params.rows,
     value: params.value,
+    formGroup: params.formGroup,
     classes: 'govuk-js-character-count ' + (' govuk-textarea--error' if params.errorMessage) + (params.classes if params.classes),
     label: {
       html: params.label.html,

src/govuk/components/character-count/template.test.js

@@ -82,6 +82,17 @@ describe('Character count', () => {
       const $component = $('.govuk-js-character-count')
       expect($component.attr('data-attribute')).toEqual('my data value')
     })
+
+    it('renders with formGroup', () => {
+      const $ = render('character-count', {
+        formGroup: {
+          classes: 'app-character-count--custom-modifier'
+        }
+      })
+
+      const $component = $('.govuk-form-group')
+      expect($component.hasClass('app-character-count--custom-modifier')).toBeTruthy()
+    })
   })
 
   describe('when it includes a hint', () => {