diff --git a/CHANGELOG.md b/CHANGELOG.md index ad2d6bcadf..34c7732ee6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -34,6 +34,12 @@ colours in their browser, rather than it appearing underlined all the time ([PR #926](https://github.com/alphagov/govuk-frontend/pull/926)) +- Allow for optional hint for each radio and checkbox item + + You can now pass a hint object (or add in html) to each radio + and checkbox item to display the hint + ([PR #846](https://github.com/alphagov/govuk-frontend/pull/846)) + 🔧 Fixes: - Replace conflicting `js-hidden` class used within the tabs component with a new modifier class. diff --git a/src/components/checkboxes/README.md b/src/components/checkboxes/README.md index 88c78dac2b..90dc9a5121 100644 --- a/src/components/checkboxes/README.md +++ b/src/components/checkboxes/README.md @@ -155,6 +155,82 @@ Find out when to use the checkboxes component in your service in the [GOV.UK Des ] }) }} +### Checkboxes with hints on items + +[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-hints-on-items/preview) + +#### Markup + +
+ +
+ + +

+ How do you want to sign in? +

+ + +
+ +
+ + + + You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before. + +
+ +
+ + + + You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity. + +
+ +
+
+ +
+ +#### Macro + + {% from "checkboxes/macro.njk" import govukCheckboxes %} + + {{ govukCheckboxes({ + "fieldset": { + "legend": { + "text": "How do you want to sign in?", + "isPageHeading": true + } + }, + "items": [ + { + "name": "gateway", + "id": "government-gateway", + "value": "gov-gateway", + "text": "Sign in with Government Gateway", + "hint": { + "text": "You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before." + } + }, + { + "name": "verify", + "id": "govuk-verify", + "value": "gov-verify", + "text": "Sign in with GOV.UK Verify", + "hint": { + "text": "You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity." + } + } + ] + }) }} + ### Checkboxes with disabled item [Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-disabled-item/preview) @@ -775,6 +851,18 @@ If you are using Nunjucks,then macros take the following arguments +items.{}.hint + +object + +No + +Provide optional hint to each checkbox item. See `hint` component for more details. + + + + + items.{}.checked boolean diff --git a/src/components/checkboxes/README.njk b/src/components/checkboxes/README.njk index 49a7365db1..8c1bdaed11 100644 --- a/src/components/checkboxes/README.njk +++ b/src/components/checkboxes/README.njk @@ -185,6 +185,20 @@ html: 'Provide additional attributes to each checkbox item label. See label component for more details.' } ], + [ + { + text: 'items.{}.hint' + }, + { + text: 'object' + }, + { + text: 'No' + }, + { + html: 'Provide optional hint to each checkbox item. See `hint` component for more details.' + } + ], [ { text: 'items.{}.checked' diff --git a/src/components/checkboxes/_checkboxes.scss b/src/components/checkboxes/_checkboxes.scss index 085be86335..22e19391a6 100644 --- a/src/components/checkboxes/_checkboxes.scss +++ b/src/components/checkboxes/_checkboxes.scss @@ -66,6 +66,12 @@ touch-action: manipulation; } + .govuk-checkboxes__hint { + display: block; + padding-right: $govuk-checkboxes-label-padding-left-right; + padding-left: $govuk-checkboxes-label-padding-left-right; + } + .govuk-checkboxes__input + .govuk-checkboxes__label::before { content: ""; box-sizing: border-box; diff --git a/src/components/checkboxes/checkboxes.yaml b/src/components/checkboxes/checkboxes.yaml index c128702936..9db81dfa6b 100644 --- a/src/components/checkboxes/checkboxes.yaml +++ b/src/components/checkboxes/checkboxes.yaml @@ -43,6 +43,26 @@ examples: value: irish text: Irish +- name: with hints on items + data: + fieldset: + legend: + text: How do you want to sign in? + isPageHeading: true + items: + - name: gateway + id: government-gateway + value: gov-gateway + text: Sign in with Government Gateway + hint: + text: You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before. + - name: verify + id: govuk-verify + value: gov-verify + text: Sign in with GOV.UK Verify + hint: + text: You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity. + - name: with disabled item data: name: colours diff --git a/src/components/checkboxes/template.njk b/src/components/checkboxes/template.njk index 4f57f66968..678634836e 100644 --- a/src/components/checkboxes/template.njk +++ b/src/components/checkboxes/template.njk @@ -48,11 +48,14 @@ {% set id = item.id if item.id else idPrefix + "-" + loop.index %} {% set name = item.name if item.name else params.name %} {% set conditionalId = "conditional-" + id %} + {% set hasHint = true if item.hint.text or item.hint.html %} + {% set itemHintId = id + '-item-hint' %}
+ {%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%} + {%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}> {{ govukLabel({ html: item.html, text: item.text, @@ -60,6 +63,15 @@ attributes: item.label.attributes, for: id }) | indent(6) | trim }} + {%- if hasHint %} + {{ govukHint({ + id: itemHintId, + classes: 'govuk-checkboxes__hint', + attributes: item.hint.attributes, + html: item.hint.html, + text: item.hint.text + }) | indent(6) | trim }} + {%- endif %}
{% if item.conditional %}
diff --git a/src/components/checkboxes/template.test.js b/src/components/checkboxes/template.test.js index 74abf6f53e..d9014ca222 100644 --- a/src/components/checkboxes/template.test.js +++ b/src/components/checkboxes/template.test.js @@ -255,6 +255,60 @@ describe('Checkboxes', () => { }) }) + describe('when they include a hint', () => { + it('it renders the hint text', () => { + const $ = render('checkboxes', { + name: 'gov', + items: [ + { + value: 'value', + text: 'This is text', + hint: { + text: 'This is a hint' + } + } + ] + }) + expect($('.govuk-checkboxes__hint').text()).toContain('This is a hint') + }) + + it('it renders the correct id attribute for the hint', () => { + const $ = render('checkboxes', { + name: 'gov', + items: [ + { + value: 'value', + text: 'This is text', + id: 'item-id', + hint: { + text: 'This is a hint' + } + } + ] + }) + + expect($('.govuk-checkboxes__hint').attr('id')).toBe('item-id-item-hint') + }) + + it('the input describedBy attribute matches the item hint id', () => { + const $ = render('checkboxes', { + name: 'gov', + items: [ + { + value: 'value', + text: 'This is text', + id: 'item-id', + hint: { + text: 'This is a hint' + } + } + ] + }) + + expect($('.govuk-checkboxes__input').attr('aria-describedby')).toBe('item-id-item-hint') + }) + }) + describe('render conditionals', () => { it('hidden by default when not checked', () => { const $ = render('checkboxes', { diff --git a/src/components/radios/README.md b/src/components/radios/README.md index 95479318b5..f57f1ba7d6 100644 --- a/src/components/radios/README.md +++ b/src/components/radios/README.md @@ -425,6 +425,80 @@ Find out when to use the radios component in your service in the [GOV.UK Design ] }) }} +### Radios with hints on items + +[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/radios/with-hints-on-items/preview) + +#### Markup + +
+ +
+ + +

+ How do you want to sign in? +

+ + +
+ +
+ + + + You'll have a user ID if you've registered for Self Assessment or filed a tax return online before. + +
+ +
+ + + + You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity. + +
+ +
+
+ +
+ +#### Macro + + {% from "radios/macro.njk" import govukRadios %} + + {{ govukRadios({ + "idPrefix": "gov", + "name": "gov", + "fieldset": { + "legend": { + "text": "How do you want to sign in?", + "isPageHeading": true + } + }, + "items": [ + { + "value": "gateway", + "text": "Sign in with Government Gateway", + "hint": { + "text": "You'll have a user ID if you've registered for Self Assessment or filed a tax return online before." + } + }, + { + "value": "verify", + "text": "Sign in with GOV.UK Verify", + "hint": { + "text": "You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity." + } + } + ] + }) }} + ### Radios without fieldset [Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/radios/without-fieldset/preview) @@ -737,6 +811,18 @@ If you are using Nunjucks,then macros take the following arguments +items.{}.hint + +object + +No + +Provide optional hint to each radio item. See `hint` component for more details. + + + + + items.{}.divider string diff --git a/src/components/radios/README.njk b/src/components/radios/README.njk index 0eb21c47f9..2d29105e65 100644 --- a/src/components/radios/README.njk +++ b/src/components/radios/README.njk @@ -184,6 +184,20 @@ Let users select a single option from a list. html: 'Provide additional attributes to each radio item label. See label component for more details.' } ], + [ + { + text: 'items.{}.hint' + }, + { + text: 'object' + }, + { + text: 'No' + }, + { + text: 'Provide optional hint to each radio item. See `hint` component for more details.' + } + ], [ { text: 'items.{}.divider' diff --git a/src/components/radios/_radios.scss b/src/components/radios/_radios.scss index 33787826a6..9693db325b 100644 --- a/src/components/radios/_radios.scss +++ b/src/components/radios/_radios.scss @@ -70,6 +70,12 @@ touch-action: manipulation; } + .govuk-radios__hint { + display: block; + padding-right: $govuk-radios-label-padding-left-right; + padding-left: $govuk-radios-label-padding-left-right; + } + .govuk-radios__input + .govuk-radios__label::before { content: ""; box-sizing: border-box; diff --git a/src/components/radios/radios.yaml b/src/components/radios/radios.yaml index 276f73113c..301fa58f54 100644 --- a/src/components/radios/radios.yaml +++ b/src/components/radios/radios.yaml @@ -116,6 +116,24 @@ examples: - value: create-account text: Create an account +- name: with hints on items + data: + idPrefix: gov + name: gov + fieldset: + legend: + text: How do you want to sign in? + isPageHeading: true + items: + - value: gateway + text: Sign in with Government Gateway + hint: + text: You'll have a user ID if you've registered for Self Assessment or filed a tax return online before. + - value: verify + text: Sign in with GOV.UK Verify + hint: + text: You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity. + - name: without fieldset data: name: colours diff --git a/src/components/radios/template.njk b/src/components/radios/template.njk index c608566d76..42617a1a02 100644 --- a/src/components/radios/template.njk +++ b/src/components/radios/template.njk @@ -50,11 +50,14 @@ {%- if item.divider %}
{{ item.divider }}
{%- else %} + {% set hasHint = true if item.hint.text or item.hint.html %} + {% set itemHintId = id + '-item-hint' %}
+ {%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%} + {%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}> {{ govukLabel({ html: item.html, text: item.text, @@ -62,6 +65,15 @@ attributes: item.label.attributes, for: id }) | indent(6) | trim }} + {%- if hasHint %} + {{ govukHint({ + id: itemHintId, + classes: 'govuk-radios__hint', + attributes: item.hint.attributes, + html: item.hint.html, + text: item.hint.text + }) | indent(6) | trim }} + {%- endif %}
{% if item.conditional %}
diff --git a/src/components/radios/template.test.js b/src/components/radios/template.test.js index 50f938d860..79d033c2a1 100644 --- a/src/components/radios/template.test.js +++ b/src/components/radios/template.test.js @@ -198,6 +198,57 @@ describe('Radios', () => { expect($lastInput.attr('checked')).toEqual('checked') }) + describe('when they include a hint', () => { + it('it renders the hint text', () => { + const $ = render('radios', { + items: [ + { + value: 'value', + text: 'This is text', + hint: { + text: 'This is a hint' + } + } + ] + }) + expect($('.govuk-radios__hint').text()).toContain('This is a hint') + }) + + it('it renders the correct id attribute for the hint', () => { + const $ = render('radios', { + items: [ + { + value: 'value', + text: 'This is text', + id: 'item-id', + hint: { + text: 'This is a hint' + } + } + ] + }) + + expect($('.govuk-radios__hint').attr('id')).toBe('item-id-item-hint') + }) + + it('the input describedBy attribute matches the item hint id', () => { + const $ = render('radios', { + items: [ + { + value: 'value', + text: 'This is text', + id: 'item-id', + hint: { + text: 'This is a hint' + } + } + ] + }) + + expect($('.govuk-radios__input').attr('aria-describedby')).toBe('item-id-item-hint') + }) + }) + describe('render conditionals', () => { it('hidden by default when not checked', () => { const $ = render('radios', {