diff --git a/CHANGELOG.md b/CHANGELOG.md index aab5653e01..52a3a95d7e 100644 --- a/CHANGELOG.md +++ b/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). diff --git a/src/govuk/components/character-count/character-count.yaml b/src/govuk/components/character-count/character-count.yaml index 934b5fe5a0..6a1511e9ef 100644 --- a/src/govuk/components/character-count/character-count.yaml +++ b/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: diff --git a/src/govuk/components/character-count/template.njk b/src/govuk/components/character-count/template.njk index a9a438875d..950bcaf203 100644 --- a/src/govuk/components/character-count/template.njk +++ b/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, diff --git a/src/govuk/components/character-count/template.test.js b/src/govuk/components/character-count/template.test.js index 22a7a8e3ce..d7480400db 100644 --- a/src/govuk/components/character-count/template.test.js +++ b/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', () => {