Skip to content

Commit

Permalink
Allow for optional hint on each radio item
Browse files Browse the repository at this point in the history
  • Loading branch information
igloosi committed Jun 29, 2018
1 parent 01d7121 commit a94f25f
Show file tree
Hide file tree
Showing 6 changed files with 93 additions and 1 deletion.
12 changes: 12 additions & 0 deletions src/components/radios/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -186,6 +186,18 @@ If you are using Nunjucks,then macros take the following arguments

<tr class="govuk-table__row">

<th class="govuk-table__header" scope="row">items.{}.hint</th>

<td class="govuk-table__cell ">object</td>

<td class="govuk-table__cell ">No</td>

<td class="govuk-table__cell ">Provide optional hint to each radio item. See `hint` component for more details.</td>

</tr>

<tr class="govuk-table__row">

<th class="govuk-table__header" scope="row">items.{}.checked</th>

<td class="govuk-table__cell ">boolean</td>
Expand Down
7 changes: 7 additions & 0 deletions src/components/radios/_radios.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
@include govuk-exports("govuk/component/radios") {
$govuk-radios-size: govuk-spacing(7);
$govuk-radios-label-padding-left-right: govuk-spacing(3);
$govuk-radios-hint-padding-left-right: $govuk-radios-label-padding-left-right;

.govuk-radios__item {
@include govuk-font($size: 19);
Expand Down Expand Up @@ -66,6 +67,12 @@
touch-action: manipulation;
}

.govuk-radios__hint {
display: block;
padding-right: $govuk-radios-hint-padding-left-right;
padding-left: $govuk-radios-hint-padding-left-right;
}

.govuk-radios__input + .govuk-radios__label::before {
content: "";
box-sizing: border-box;
Expand Down
14 changes: 14 additions & 0 deletions src/components/radios/index.njk
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,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'
},
{
html: 'Provide optional hint to each radio item. See `hint` component for more details.'
}
],
[
{
text: 'items.{}.checked'
Expand Down
18 changes: 18 additions & 0 deletions src/components/radios/radios.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,24 @@ examples:
<span class="govuk-heading-s govuk-!-margin-bottom-1">Part 3 of the Housing Act 2004</span>
For properties that are within a geographical area defined by a local council

- 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
html: <b>Sign in with Government Gateway</b>
hint:
text: You'll have a user ID if you've registered for Self Assessment or filed a tax return online before.
- value: verify
html: <b>Sign in with GOV.UK Verify</b>
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
Expand Down
14 changes: 13 additions & 1 deletion src/components/radios/template.njk
Original file line number Diff line number Diff line change
Expand Up @@ -47,18 +47,30 @@
{% for item in params.items %}
{% set id = item.id if item.id else idPrefix + "-" + loop.index %}
{% set conditionalId = "conditional-" + id %}
{% set isItemHint = true if item.hint.text or item.hint.html %}
{% set itemHintId = id + '-item-hint' %}
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="{{ id }}" name="{{ params.name }}" type="radio" value="{{ item.value }}"
{{-" checked" if item.checked }}
{{-" disabled" if item.disabled }}
{%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%}>
{%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%}
{%- if isItemHint %} aria-describedby="{{ itemHintId }}"{% endif -%}>
{{ govukLabel({
html: item.html,
text: item.text,
classes: 'govuk-radios__label',
attributes: item.label.attributes,
for: id
}) | indent(6) | trim }}
{% if isItemHint %}
{{ govukHint({
id: itemHintId,
classes: 'govuk-radios__hint',
attributes: item.hint.attributes,
html: item.hint.html,
text: item.hint.text
}) | indent(6) | trim }}
{% endif %}
</div>
{% if item.conditional %}
<div class="govuk-radios__conditional" id="{{ conditionalId }}">
Expand Down
29 changes: 29 additions & 0 deletions src/components/radios/template.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -198,6 +198,35 @@ describe('Radios', () => {
expect($lastInput.attr('checked')).toEqual('checked')
})

it('render hint text', () => {
const $ = render('radios', {
idPrefix: 'gov',
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.'
}
}
]
})

const $component = $('.govuk-radios')
const $lastInput = $component.find('.govuk-radios__input').last()
expect($lastInput.attr('aria-describedby')).toBe('gov-2-item-hint')
const $lastItemHint = $component.find('.govuk-radios__hint').last()
expect($lastItemHint.attr('id')).toBe('gov-2-item-hint')
expect($lastItemHint.text()).toContain('You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.')
})

it('render conditional', () => {
const $ = render('radios', {
name: 'example-conditional',
Expand Down

0 comments on commit a94f25f

Please sign in to comment.