Allow for optional hint on each radio item

alphagov · Jun 29, 2018 · 8a81d6c · 8a81d6c
1 parent 8f062c0
commit 8a81d6c
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 1 deletion.
diff --git a/src/components/radios/_radios.scss b/src/components/radios/_radios.scss
@@ -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);
@@ -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;

diff --git a/src/components/radios/radios.yaml b/src/components/radios/radios.yaml
@@ -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

diff --git a/src/components/radios/template.njk b/src/components/radios/template.njk
@@ -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 }}">