From 6d0d5061886152ae2cfceda58e718a9f81225c47 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Fri, 29 Mar 2019 23:29:16 +0000 Subject: [PATCH 1/9] Create wrapping govukFormGroup() macro Provides the following: 1. govukLabel() 2. govukHint() 3. govukErrorMessage() With optional nested govukFieldset() via params.fieldset --- src/components/_all.scss | 1 + src/components/form-group/README.md | 15 +++ .../form-group}/_form-group.scss | 8 +- src/components/form-group/form-group.yaml | 66 +++++++++++++ src/components/form-group/macro.njk | 3 + src/components/form-group/template.njk | 62 ++++++++++++ src/components/form-group/template.test.js | 95 +++++++++++++++++++ src/objects/_all.scss | 1 - 8 files changed, 246 insertions(+), 5 deletions(-) create mode 100644 src/components/form-group/README.md rename src/{objects => components/form-group}/_form-group.scss (78%) create mode 100644 src/components/form-group/form-group.yaml create mode 100644 src/components/form-group/macro.njk create mode 100644 src/components/form-group/template.njk create mode 100644 src/components/form-group/template.test.js diff --git a/src/components/_all.scss b/src/components/_all.scss index 8261249513..ee609cf90a 100644 --- a/src/components/_all.scss +++ b/src/components/_all.scss @@ -12,6 +12,7 @@ @import "fieldset/fieldset"; @import "file-upload/file-upload"; @import "footer/footer"; +@import "form-group/form-group"; @import "hint/hint"; @import "header/header"; @import "input/input"; diff --git a/src/components/form-group/README.md b/src/components/form-group/README.md new file mode 100644 index 0000000000..408efa63f1 --- /dev/null +++ b/src/components/form-group/README.md @@ -0,0 +1,15 @@ +# Form group + +## Installation + +See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component. + +## Guidance and Examples + +Find out when to use the form group component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/form-group). + +## Component options + +Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. + +See [options table](https://design-system.service.gov.uk/components/form-group/#options-example-default) for details. diff --git a/src/objects/_form-group.scss b/src/components/form-group/_form-group.scss similarity index 78% rename from src/objects/_form-group.scss rename to src/components/form-group/_form-group.scss index 29e9bf3531..2fe82abf13 100644 --- a/src/objects/_form-group.scss +++ b/src/components/form-group/_form-group.scss @@ -1,8 +1,8 @@ -@import "../settings/all"; -@import "../tools/all"; -@import "../helpers/all"; +@import "../../settings/all"; +@import "../../tools/all"; +@import "../../helpers/all"; -@include govuk-exports("govuk/objects/form-group") { +@include govuk-exports("govuk/component/form-group") { .govuk-form-group { @include govuk-clearfix; diff --git a/src/components/form-group/form-group.yaml b/src/components/form-group/form-group.yaml new file mode 100644 index 0000000000..e0399251dd --- /dev/null +++ b/src/components/form-group/form-group.yaml @@ -0,0 +1,66 @@ +params: +- name: id + type: string + required: true + description: The id of the input +- name: fieldset + type: object + required: false + description: Options for the fieldset component (e.g. legend). + isComponent: true +- name: hint + type: object + required: false + description: Options for the hint component. + isComponent: true +- name: label + type: object + required: false + description: Options for the label component if no fieldset is provided. + isComponent: true +- name: errorMessage + type: object + required: false + description: Options for the errorMessage component. + 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: caller + type: nunjucks-block + required: false + description: Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire form group component in a `call` block. + +examples: +- name: default + data: + id: address + label: + text: What is your address? +- name: with label as page heading + data: + id: address-heading + label: + text: What is your address? + classes: govuk-label--xl + isPageHeading: true +- name: with fieldset legend + data: + id: address-fieldset + fieldset: + legend: + text: What is your address? +- name: with fieldset legend as page heading + data: + id: address-fieldset-heading + fieldset: + legend: + text: What is your address? + classes: govuk-fieldset__legend--xl + isPageHeading: true diff --git a/src/components/form-group/macro.njk b/src/components/form-group/macro.njk new file mode 100644 index 0000000000..9e15cca947 --- /dev/null +++ b/src/components/form-group/macro.njk @@ -0,0 +1,3 @@ +{% macro govukFormGroup(params) %} + {%- include "./template.njk" -%} +{% endmacro %} diff --git a/src/components/form-group/template.njk b/src/components/form-group/template.njk new file mode 100644 index 0000000000..c7079aceec --- /dev/null +++ b/src/components/form-group/template.njk @@ -0,0 +1,62 @@ +{% from "../error-message/macro.njk" import govukErrorMessage -%} +{% from "../fieldset/macro.njk" import govukFieldset %} +{% from "../hint/macro.njk" import govukHint %} +{% from "../label/macro.njk" import govukLabel %} + +{#- a record of other elements that we need to associate with the input using + aria-describedby – for example hints or error messages -#} +{%- set describedBy = params.fieldset.describedBy if params.fieldset.describedBy else "" -%} + +{#- Capture the HTML so we can optionally nest it in a fieldset -#} +{%- set innerHtml %} +{% if params.label and not params.fieldset %} + {{ govukLabel({ + html: params.label.html, + text: params.label.text, + classes: params.label.classes, + isPageHeading: params.label.isPageHeading, + attributes: params.label.attributes, + for: params.id + }) | indent(2) | trim }} +{% endif %} +{% if params.hint %} + {% set hintId = params.id + '-hint' %} + {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %} + {{ govukHint({ + id: hintId, + classes: params.hint.classes, + attributes: params.hint.attributes, + html: params.hint.html, + text: params.hint.text + }) | indent(2) | trim }} +{% endif %} +{% if params.errorMessage %} + {% set errorId = params.id + '-error' %} + {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %} + {{ govukErrorMessage({ + id: errorId, + classes: params.errorMessage.classes, + attributes: params.errorMessage.attributes, + html: params.errorMessage.html, + text: params.errorMessage.text, + visuallyHiddenText: params.errorMessage.visuallyHiddenText + }) | indent(2) | trim }} +{% endif %} +{% endset %} + +
+{% if params.fieldset %} + {% call govukFieldset({ + describedBy: describedBy, + classes: params.fieldset.classes, + attributes: params.fieldset.attributes, + legend: params.fieldset.legend + }) %} + {{ innerHtml | trim | safe }} +{{ caller() if caller }} {#- if statement allows usage of `call` to be optional -#} + {% endcall %} +{% else %} + {{ innerHtml | trim | safe }} +{{ caller() if caller }} {#- if statement allows usage of `call` to be optional -#} +{% endif %} +
diff --git a/src/components/form-group/template.test.js b/src/components/form-group/template.test.js new file mode 100644 index 0000000000..a22b8d9b33 --- /dev/null +++ b/src/components/form-group/template.test.js @@ -0,0 +1,95 @@ +/** + * @jest-environment jsdom + */ +/* eslint-env jest */ + +const axe = require('../../../lib/axe-helper') + +const { render, getExamples } = require('../../../lib/jest-helpers') + +const examples = getExamples('form-group') + +describe('Form group', () => { + it('passes accessibility tests', async () => { + const $ = render('form-group', examples.default) + + const results = await axe($.html()) + expect(results).toHaveNoViolations() + }) + + it('creates a form group', () => { + const $ = render('form-group', { + id: 'sample-question' + }) + + const $component = $('div.govuk-form-group') + expect($component.get(0).tagName).toContain('div') + }) + + it('allows you to set the legend text', () => { + const $ = render('form-group', { + id: 'sample-question', + fieldset: { + legend: { + text: 'What is your address?' + } + } + }) + + const $legend = $('div.govuk-form-group legend') + expect($legend.get(0).tagName).toContain('legend') + }) + + it('allows you to set the hint text', () => { + const $ = render('form-group', { + id: 'sample-question', + hint: { + text: 'Example hint about the address' + } + }) + + const $hint = $('div.govuk-form-group span.govuk-hint') + expect($hint.text().trim()).toEqual('Example hint about the address') + }) + + it('allows you to set the label text', () => { + const $ = render('form-group', { + id: 'sample-question', + label: { + text: 'What is your address?' + } + }) + + const $label = $('div.govuk-form-group label') + expect($label.text().trim()).toEqual('What is your address?') + }) + + it('allows you to set the error message text', () => { + const $ = render('form-group', { + id: 'sample-question', + errorMessage: { + text: 'Something is wrong with this field' + } + }) + + const $error = $('div.govuk-form-group span.govuk-error-message') + expect($error.text().trim()).toEqual('Error: Something is wrong with this field') + }) + + it('renders nested components using `call`', () => { + const $ = render('form-group', {}, '
') + + expect($('.govuk-form-group .app-nested-component').length).toBeTruthy() + }) + + it('can have additional classes on the form group', () => { + const $ = render('form-group', { + formGroup: { + classes: 'my-custom-class' + } + }) + + const $component = $('div.govuk-form-group') + expect($component.hasClass('my-custom-class')).toBeTruthy() + }) +}) diff --git a/src/objects/_all.scss b/src/objects/_all.scss index bd079d1516..95d0db083f 100644 --- a/src/objects/_all.scss +++ b/src/objects/_all.scss @@ -1,4 +1,3 @@ -@import "form-group"; @import "grid"; @import "main-wrapper"; @import "width-container"; From f5cbe0ea1d5176744577616d0abe44c9d5a8702a Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Wed, 15 May 2019 12:13:59 +0100 Subject: [PATCH 2/9] Move textarea into govukFormGroup() wrapper --- src/components/textarea/template.njk | 47 +++++++--------------------- 1 file changed, 11 insertions(+), 36 deletions(-) diff --git a/src/components/textarea/template.njk b/src/components/textarea/template.njk index 56d9cc3333..8f2cb6c61e 100644 --- a/src/components/textarea/template.njk +++ b/src/components/textarea/template.njk @@ -1,44 +1,19 @@ -{% from "../error-message/macro.njk" import govukErrorMessage -%} -{% from "../hint/macro.njk" import govukHint %} -{% from "../label/macro.njk" import govukLabel %} +{% from "../form-group/macro.njk" import govukFormGroup -%} {#- a record of other elements that we need to associate with the input using aria-describedby – for example hints or error messages -#} {% set describedBy = params.describedBy if params.describedBy else "" %} -
- {{ govukLabel({ - html: params.label.html, - text: params.label.text, - classes: params.label.classes, - isPageHeading: params.label.isPageHeading, - attributes: params.label.attributes, - for: params.id - }) | indent(2) | trim }} -{% if params.hint %} - {% set hintId = params.id + '-hint' %} - {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %} - {{ govukHint({ - id: hintId, - classes: params.hint.classes, - attributes: params.hint.attributes, - html: params.hint.html, - text: params.hint.text - }) | indent(2) | trim }} -{% endif %} -{% if params.errorMessage %} - {% set errorId = params.id + '-error' %} - {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %} - {{ govukErrorMessage({ - id: errorId, - classes: params.errorMessage.classes, - attributes: params.errorMessage.attributes, - html: params.errorMessage.html, - text: params.errorMessage.text, - visuallyHiddenText: params.errorMessage.visuallyHiddenText - }) | indent(2) | trim }} -{% endif %} + +{%- if params.hint -%} + {%- set describedBy = (describedBy + ' ' + params.id + "-hint") | trim -%} +{%- endif -%} +{%- if params.errorMessage -%} + {%- set describedBy = (describedBy + ' ' + params.id + "-error") | trim -%} +{%- endif -%} + +{% call govukFormGroup(params) %} -
+{% endcall %} From 1bb78b25dc67e71fb17d989a52fcb2c4f05982d1 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Wed, 15 May 2019 12:14:13 +0100 Subject: [PATCH 3/9] Move select into govukFormGroup() wrapper --- src/components/select/template.njk | 47 +++++++----------------------- 1 file changed, 11 insertions(+), 36 deletions(-) diff --git a/src/components/select/template.njk b/src/components/select/template.njk index 10c919278f..a4b276dec6 100644 --- a/src/components/select/template.njk +++ b/src/components/select/template.njk @@ -1,42 +1,17 @@ -{% from "../error-message/macro.njk" import govukErrorMessage -%} -{% from "../hint/macro.njk" import govukHint %} -{% from "../label/macro.njk" import govukLabel %} +{% from "../form-group/macro.njk" import govukFormGroup -%} {#- a record of other elements that we need to associate with the input using aria-describedby – for example hints or error messages -#} {% set describedBy = params.describedBy if params.describedBy else "" %} -
- {{ govukLabel({ - html: params.label.html, - text: params.label.text, - classes: params.label.classes, - isPageHeading: params.label.isPageHeading, - attributes: params.label.attributes, - for: params.id - }) | indent(2) | trim }} -{% if params.hint %} - {% set hintId = params.id + '-hint' %} - {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %} - {{ govukHint({ - id: hintId, - classes: params.hint.classes, - attributes: params.hint.attributes, - html: params.hint.html, - text: params.hint.text - }) | indent(2) | trim }} -{% endif %} -{% if params.errorMessage %} - {% set errorId = params.id + '-error' %} - {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %} - {{ govukErrorMessage({ - id: errorId, - classes: params.errorMessage.classes, - attributes: params.errorMessage.attributes, - html: params.errorMessage.html, - text: params.errorMessage.text, - visuallyHiddenText: params.errorMessage.visuallyHiddenText - }) | indent(2) | trim }} -{% endif %} + +{%- if params.hint -%} + {%- set describedBy = (describedBy + ' ' + params.id + "-hint") | trim -%} +{%- endif -%} +{%- if params.errorMessage -%} + {%- set describedBy = (describedBy + ' ' + params.id + "-error") | trim -%} +{%- endif -%} + +{% call govukFormGroup(params) %} -
+{% endcall %} From 90b59b97e03fc0f359434416f8fb78504cc78d9a Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Wed, 15 May 2019 12:14:59 +0100 Subject: [PATCH 4/9] Move radios into govukFormGroup() wrapper --- src/components/radios/template.njk | 57 ++++++------------------------ 1 file changed, 10 insertions(+), 47 deletions(-) diff --git a/src/components/radios/template.njk b/src/components/radios/template.njk index 1fb4099256..5d381c9132 100644 --- a/src/components/radios/template.njk +++ b/src/components/radios/template.njk @@ -1,5 +1,4 @@ -{% from "../error-message/macro.njk" import govukErrorMessage -%} -{% from "../fieldset/macro.njk" import govukFieldset %} +{% from "../form-group/macro.njk" import govukFormGroup %} {% from "../hint/macro.njk" import govukHint %} {% from "../label/macro.njk" import govukLabel %} @@ -7,10 +6,6 @@ instead. We need this for error messages and hints as well -#} {% set idPrefix = params.idPrefix if params.idPrefix else params.name %} -{#- a record of other elements that we need to associate with the input using - aria-describedby – for example hints or error messages -#} -{% set describedBy = params.fieldset.describedBy if params.fieldset.describedBy else "" %} - {% set isConditional = false %} {% for item in params.items %} {% if item.conditional %} @@ -18,31 +13,14 @@ {% endif %} {% endfor %} -{#- Capture the HTML so we can optionally nest it in a fieldset -#} -{% set innerHtml %} -{% if params.hint %} - {% set hintId = idPrefix + '-hint' %} - {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %} - {{ govukHint({ - id: hintId, - classes: params.hint.classes, - attributes: params.hint.attributes, - html: params.hint.html, - text: params.hint.text - }) | indent(2) | trim }} -{% endif %} -{% if params.errorMessage %} - {% set errorId = idPrefix + '-error' %} - {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %} - {{ govukErrorMessage({ - id: errorId, - classes: params.errorMessage.classes, - attributes: params.errorMessage.attributes, - html: params.errorMessage.html, - text: params.errorMessage.text, - visuallyHiddenText: params.errorMessage.visuallyHiddenText - }) | indent(2) | trim }} -{% endif %} +{% call govukFormGroup({ + id: idPrefix, + fieldset: params.fieldset, + hint: params.hint, + label: params.label, + errorMessage: params.errorMessage, + formGroup: params.formGroup +}) %}
@@ -96,19 +74,4 @@ {% endif %} {% endfor %}
-{% endset -%} - -
-{% if params.fieldset %} - {% call govukFieldset({ - describedBy: describedBy, - classes: params.fieldset.classes, - attributes: params.fieldset.attributes, - legend: params.fieldset.legend - }) %} - {{ innerHtml | trim | safe }} - {% endcall %} -{% else %} - {{ innerHtml | trim | safe }} -{% endif %} -
+{% endcall %} From e31c3e6e8a13b3d02f685b2ef5af96c3d1234568 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Wed, 15 May 2019 12:15:22 +0100 Subject: [PATCH 5/9] Move input into govukFormGroup() wrapper --- src/components/input/template.njk | 48 ++++++++----------------------- 1 file changed, 12 insertions(+), 36 deletions(-) diff --git a/src/components/input/template.njk b/src/components/input/template.njk index 95cbd9aa87..c11490692b 100644 --- a/src/components/input/template.njk +++ b/src/components/input/template.njk @@ -1,46 +1,22 @@ -{% from "../error-message/macro.njk" import govukErrorMessage -%} -{% from "../hint/macro.njk" import govukHint %} -{% from "../label/macro.njk" import govukLabel %} +{% from "../form-group/macro.njk" import govukFormGroup -%} {#- a record of other elements that we need to associate with the input using aria-describedby – for example hints or error messages -#} {% set describedBy = params.describedBy if params.describedBy else "" %} -
- {{ govukLabel({ - html: params.label.html, - text: params.label.text, - classes: params.label.classes, - isPageHeading: params.label.isPageHeading, - attributes: params.label.attributes, - for: params.id - }) | indent(2) | trim }} -{% if params.hint %} - {% set hintId = params.id + '-hint' %} - {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %} - {{ govukHint({ - id: hintId, - classes: params.hint.classes, - attributes: params.hint.attributes, - html: params.hint.html, - text: params.hint.text - }) | indent(2) | trim }} -{% endif %} -{% if params.errorMessage %} - {% set errorId = params.id + '-error' %} - {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %} - {{ govukErrorMessage({ - id: errorId, - classes: params.errorMessage.classes, - attributes: params.errorMessage.attributes, - html: params.errorMessage.html, - text: params.errorMessage.text, - visuallyHiddenText: params.errorMessage.visuallyHiddenText - }) | indent(2) | trim }} -{% endif %} + +{%- if params.hint -%} + {%- set describedBy = (describedBy + ' ' + params.id + "-hint") | trim -%} +{%- endif -%} +{%- if params.errorMessage -%} + {%- set describedBy = (describedBy + ' ' + params.id + "-error") | trim -%} +{%- endif -%} + +{% call govukFormGroup(params) %} -
+{% endcall %} + From 0548b23249fdd339135c0d3cff3b3800bb0755da Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Wed, 15 May 2019 12:16:16 +0100 Subject: [PATCH 6/9] Move file upload into govukFormGroup() wrapper --- src/components/file-upload/template.njk | 47 ++++++------------------- 1 file changed, 11 insertions(+), 36 deletions(-) diff --git a/src/components/file-upload/template.njk b/src/components/file-upload/template.njk index afc0fa9e12..6613e9b275 100644 --- a/src/components/file-upload/template.njk +++ b/src/components/file-upload/template.njk @@ -1,44 +1,19 @@ -{% from "../error-message/macro.njk" import govukErrorMessage -%} -{% from "../hint/macro.njk" import govukHint %} -{% from "../label/macro.njk" import govukLabel %} +{% from "../form-group/macro.njk" import govukFormGroup -%} {#- a record of other elements that we need to associate with the input using aria-describedby – for example hints or error messages -#} {% set describedBy = params.describedBy if params.describedBy else "" %} -
- {{ govukLabel({ - html: params.label.html, - text: params.label.text, - classes: params.label.classes, - isPageHeading: params.label.isPageHeading, - attributes: params.label.attributes, - for: params.id - }) | indent(2) | trim }} -{% if params.hint %} - {% set hintId = params.id + '-hint' %} - {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %} - {{ govukHint({ - id: hintId, - classes: params.hint.classes, - attributes: params.hint.attributes, - html: params.hint.html, - text: params.hint.text - }) | indent(2) | trim }} -{% endif %} -{% if params.errorMessage %} - {% set errorId = params.id + '-error' %} - {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %} - {{ govukErrorMessage({ - id: errorId, - classes: params.errorMessage.classes, - attributes: params.errorMessage.attributes, - html: params.errorMessage.html, - text: params.errorMessage.text, - visuallyHiddenText: params.errorMessage.visuallyHiddenText - }) | indent(2) | trim }} -{% endif %} + +{%- if params.hint -%} + {%- set describedBy = (describedBy + ' ' + params.id + "-hint") | trim -%} +{%- endif -%} +{%- if params.errorMessage -%} + {%- set describedBy = (describedBy + ' ' + params.id + "-error") | trim -%} +{%- endif -%} + +{% call govukFormGroup(params) %} -
+{% endcall %} From c9b31ef420aabca4a2cd152ded7db42e57ce7d62 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Wed, 15 May 2019 12:17:05 +0100 Subject: [PATCH 7/9] Move date input into govukFormGroup() wrapper --- src/components/date-input/template.njk | 97 ++++++++------------------ 1 file changed, 29 insertions(+), 68 deletions(-) diff --git a/src/components/date-input/template.njk b/src/components/date-input/template.njk index c72b9bce88..4dbb0dff54 100644 --- a/src/components/date-input/template.njk +++ b/src/components/date-input/template.njk @@ -1,11 +1,5 @@ -{% from "../error-message/macro.njk" import govukErrorMessage -%} -{% from "../fieldset/macro.njk" import govukFieldset %} -{% from "../hint/macro.njk" import govukHint %} -{% from "../input/macro.njk" import govukInput %} - -{#- a record of other elements that we need to associate with the input using - aria-describedby – for example hints or error messages -#} -{% set describedBy = params.fieldset.describedBy if params.fieldset.describedBy else "" %} +{% from "../form-group/macro.njk" import govukFormGroup %} +{% from "../label/macro.njk" import govukLabel %} {% if params.items %} {% set dateInputItems = params.items %} @@ -26,72 +20,39 @@ ] %} {% endif %} -{#- Capture the HTML so we can optionally nest it in a fieldset -#} -{% set innerHtml %} -{% if params.hint %} - {% set hintId = params.id + "-hint" %} - {% set describedBy = describedBy + " " + hintId if describedBy else hintId %} - {{ govukHint({ - id: hintId, - classes: params.hint.classes, - attributes: params.hint.attributes, - html: params.hint.html, - text: params.hint.text - }) | indent(2) | trim }} -{% endif %} -{% if params.errorMessage %} - {% set errorId = params.id + "-error" %} - {% set describedBy = describedBy + " " + errorId if describedBy else errorId %} - {{ govukErrorMessage({ - id: errorId, - classes: params.errorMessage.classes, - attributes: params.errorMessage.attributes, - html: params.errorMessage.html, - text: params.errorMessage.text, - visuallyHiddenText: params.errorMessage.visuallyHiddenText - }) | indent(2) | trim }} -{% endif %} -
- {% for item in dateInputItems %} -
- {{ govukInput({ - label: { - text: item.label if item.label else item.name | capitalize, - classes: "govuk-date-input__label" - }, - id: item.id if item.id else (params.id + "-" + item.name), - classes: "govuk-date-input__input " + (item.classes if item.classes), - name: (params.namePrefix + "-" + item.name) if params.namePrefix else item.name, - value: item.value, - type: "number", - autocomplete: item.autocomplete, - pattern: item.pattern if item.pattern else "[0-9]*", - attributes: item.attributes - }) | indent(6) | trim }} -
- {% endfor %} -
-{% endset %} - -
-{% if params.fieldset %} {#- We override the fieldset's role to 'group' because otherwise JAWS does not announce the description for a fieldset comprised of text inputs, but adding the role to the fieldset always makes the output overly verbose for radio buttons or checkboxes. -#} - {% call govukFieldset({ - describedBy: describedBy, +{% call govukFormGroup({ + id: params.id, + fieldset: { + describedBy: params.fieldset.describedBy, classes: params.fieldset.classes, attributes: { role: "group" }, legend: params.fieldset.legend - }) %} - {{ innerHtml | trim | safe }} - {% endcall %} -{% else %} - {{ innerHtml | trim | safe }} -{% endif %} -
+ }, + hint: params.hint, + errorMessage: params.errorMessage, + formGroup: params.formGroup +}) %} +
+ {% for item in dateInputItems %} +
+ {{ govukLabel({ + text: item.label if item.label else item.name | capitalize, + classes: "govuk-date-input__label", + for: item.id if item.id else (params.id + "-" + item.name) + }) | indent(4) | trim }} + +
+ {% endfor %} +
+{% endcall %} From 4f4c0caba349aee621948cd2c3790d04f02afc6a Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Wed, 15 May 2019 12:18:21 +0100 Subject: [PATCH 8/9] Move checkboxes into govukFormGroup() wrapper --- src/components/checkboxes/template.njk | 63 ++++++++------------------ 1 file changed, 18 insertions(+), 45 deletions(-) diff --git a/src/components/checkboxes/template.njk b/src/components/checkboxes/template.njk index d247dc54d5..e3459e6caa 100644 --- a/src/components/checkboxes/template.njk +++ b/src/components/checkboxes/template.njk @@ -1,5 +1,4 @@ -{% from "../error-message/macro.njk" import govukErrorMessage -%} -{% from "../fieldset/macro.njk" import govukFieldset %} +{% from "../form-group/macro.njk" import govukFormGroup %} {% from "../hint/macro.njk" import govukHint %} {% from "../label/macro.njk" import govukLabel %} @@ -11,8 +10,14 @@ aria-describedby – for example hints or error messages -#} {% set describedBy = params.describedBy if params.describedBy else "" %} {% if params.fieldset.describedBy %} - {% set describedBy = params.fieldset.describedBy %} + {% set describedBy = params.fieldset.describedBy %} {% endif %} +{%- if params.hint -%} + {%- set describedBy = (describedBy + ' ' + idPrefix + "-hint") | trim -%} +{%- endif -%} +{%- if params.errorMessage -%} + {%- set describedBy = (describedBy + ' ' + idPrefix + "-error") | trim -%} +{%- endif -%} {% set isConditional = false %} {% for item in params.items %} @@ -22,33 +27,16 @@ {% endfor %} {#- fieldset is false by default -#} -{% set hasFieldset = true if params.fieldset else false %} +{%- set hasFieldset = true if params.fieldset else false -%} -{#- Capture the HTML so we can optionally nest it in a fieldset -#} -{% set innerHtml %} -{% if params.hint %} - {% set hintId = idPrefix + '-hint' %} - {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %} - {{ govukHint({ - id: hintId, - classes: params.hint.classes, - attributes: params.hint.attributes, - html: params.hint.html, - text: params.hint.text - }) | indent(2) | trim }} -{% endif %} -{% if params.errorMessage %} - {% set errorId = idPrefix + '-error' %} - {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %} - {{ govukErrorMessage({ - id: errorId, - classes: params.errorMessage.classes, - attributes: params.errorMessage.attributes, - html: params.errorMessage.html, - text: params.errorMessage.text, - visuallyHiddenText: params.errorMessage.visuallyHiddenText - }) | indent(2) | trim }} -{% endif %} +{% call govukFormGroup({ + id: idPrefix, + fieldset: params.fieldset, + hint: params.hint, + label: params.label, + errorMessage: params.errorMessage, + formGroup: params.formGroup +}) %}
@@ -101,19 +89,4 @@ {% endif %} {% endfor %}
-{% endset -%} - -
-{% if params.fieldset %} - {% call govukFieldset({ - describedBy: describedBy, - classes: params.fieldset.classes, - attributes: params.fieldset.attributes, - legend: params.fieldset.legend - }) %} - {{ innerHtml | trim | safe }} - {% endcall %} -{% else %} - {{ innerHtml | trim | safe }} -{% endif %} -
+{% endcall %} From 37c139a9c87bdec791e6a36dc3e4e4d6156f6d66 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Tue, 23 Apr 2019 13:53:37 +0100 Subject: [PATCH 9/9] Add CHANGELOG entry --- CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index a905335564..32d0e1dee5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -412,6 +412,12 @@ changelog](./docs/contributing/versioning.md#updating-changelog). ([PR #1371](https://github.com/alphagov/govuk-frontend/pull/1371)) +- Remove duplicate form field markup from each macro + + All form fields are now wrapped in `govukFormGroup()` to generate the appropriate hint, error message, fieldset and legend (or label). + + ([PR #1281](https://github.com/alphagov/govuk-frontend/pull/1281)) + 🔧 Fixes: - Removed adjustments that were needed for v1 Transport