Skip to content

Commit

Permalink
Merge pull request #4676 from alphagov/nunjucks-formatting-radios-che…
Browse files Browse the repository at this point in the history
…ckboxes
  • Loading branch information
colinrotherham authored Feb 13, 2024
2 parents 956b821 + 5b5a45e commit 57be38e
Show file tree
Hide file tree
Showing 2 changed files with 94 additions and 101 deletions.
103 changes: 50 additions & 53 deletions src/govuk/components/checkboxes/template.njk
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,53 @@
{#- fieldset is false by default -#}
{% set hasFieldset = true if params.fieldset else false %}

{%- macro _checkboxItem(params, item, index) %}
{#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
{#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
{% set itemId = item.id if item.id else idPrefix + ("-" + index if index > 1 else "") %}
{% set itemName = item.name if item.name else params.name %}
{% set conditionalId = "conditional-" + itemId %}
{%- if item.divider %}
<div class="govuk-checkboxes__divider">{{ item.divider }}</div>
{% else %}
{% set isChecked = item.checked | default((item.value in params.values and item.checked != false) if params.values else false, true) %}
{% set hasHint = true if item.hint.text or item.hint.html %}
{% set itemHintId = itemId + "-item-hint" if hasHint else "" %}
{% set itemDescribedBy = describedBy if not hasFieldset else "" %}
{% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) | trim %}
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="{{ itemId }}" name="{{ itemName }}" type="checkbox" value="{{ item.value }}"
{{-" checked" if isChecked }}
{{-" disabled" if item.disabled }}
{%- if item.conditional.html %} data-aria-controls="{{ conditionalId }}"{% endif -%}
{%- if item.behaviour %} data-behaviour="{{ item.behaviour }}"{% endif -%}
{%- if itemDescribedBy %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
{{- govukAttributes(item.attributes) }}>
{{ govukLabel({
html: item.html,
text: item.text,
classes: 'govuk-checkboxes__label' + (' ' + item.label.classes if item.label.classes),
attributes: item.label.attributes,
for: itemId
}) | trim | indent(6) }}
{% if hasHint %}
{{ govukHint({
id: itemHintId,
classes: 'govuk-checkboxes__hint' + (' ' + item.hint.classes if item.hint.classes),
attributes: item.hint.attributes,
html: item.hint.html,
text: item.hint.text
}) | trim | indent(6) }}
{% endif %}
</div>
{% if item.conditional.html %}
<div class="govuk-checkboxes__conditional {%- if not isChecked %} govuk-checkboxes__conditional--hidden{% endif %}" id="{{ conditionalId }}">
{{ item.conditional.html | safe | trim | indent(6) }}
</div>
{% endif %}
{% endif %}
{% endmacro -%}

{#- Capture the HTML so we can optionally nest it in a fieldset -#}
{% set innerHtml %}
{% if params.hint %}
Expand Down Expand Up @@ -50,58 +97,7 @@
{% endif %}
{% for item in params.items %}
{% if item %}
{#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
{%- if item.id -%}
{%- set id = item.id -%}
{%- else -%}
{#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
{%- if loop.first -%}
{%- set id = idPrefix %}
{% else %}
{%- set id = idPrefix + "-" + loop.index -%}
{%- endif -%}
{%- endif -%}
{% set name = item.name if item.name else params.name %}
{% set conditionalId = "conditional-" + id %}
{%- if item.divider %}
<div class="govuk-checkboxes__divider">{{ item.divider }}</div>
{%- else %}
{% set isChecked = item.checked | default((item.value in params.values and item.checked != false) if params.values else false, true) %}
{% set hasHint = true if item.hint.text or item.hint.html %}
{% set itemHintId = id + "-item-hint" if hasHint else "" %}
{% set itemDescribedBy = describedBy if not hasFieldset else "" %}
{% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) | trim %}
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ item.value }}"
{{-" checked" if isChecked }}
{{-" disabled" if item.disabled }}
{%- if item.conditional.html %} data-aria-controls="{{ conditionalId }}"{% endif -%}
{%- if item.behaviour %} data-behaviour="{{ item.behaviour }}"{% endif -%}
{%- if itemDescribedBy %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
{{- govukAttributes(item.attributes) }}>
{{ govukLabel({
html: item.html,
text: item.text,
classes: 'govuk-checkboxes__label' + (' ' + item.label.classes if item.label.classes),
attributes: item.label.attributes,
for: id
}) | trim | indent(6) }}
{% if hasHint %}
{{ govukHint({
id: itemHintId,
classes: 'govuk-checkboxes__hint' + (' ' + item.hint.classes if item.hint.classes),
attributes: item.hint.attributes,
html: item.hint.html,
text: item.hint.text
}) | trim | indent(6) }}
{% endif %}
</div>
{% if item.conditional.html %}
<div class="govuk-checkboxes__conditional {%- if not isChecked %} govuk-checkboxes__conditional--hidden{% endif %}" id="{{ conditionalId }}">
{{ item.conditional.html | safe }}
</div>
{% endif %}
{% endif %}
{{- _checkboxItem(params, item, loop.index) -}}
{% endif %}
{% endfor %}
{% if params.formGroup.afterInputs %}
Expand All @@ -110,7 +106,8 @@
</div>
{% endset -%}

<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}" {{- govukAttributes(params.formGroup.attributes) }}>
<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}"
{{- govukAttributes(params.formGroup.attributes) }}>
{% if hasFieldset %}
{{ govukFieldset({
describedBy: describedBy,
Expand Down
92 changes: 44 additions & 48 deletions src/govuk/components/radios/template.njk
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,49 @@
{#- fieldset is false by default -#}
{% set hasFieldset = true if params.fieldset else false %}

{%- macro _radioItem(params, item, index) %}
{#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
{#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
{% set itemId = item.id if item.id else idPrefix + ("-" + index if index > 1 else "") %}
{% set conditionalId = "conditional-" + itemId %}
{%- if item.divider %}
<div class="govuk-radios__divider">{{ item.divider }}</div>
{% else %}
{% set isChecked = item.checked | default((item.value == params.value and item.checked != false) if params.value else false, true) %}
{% set hasHint = true if item.hint.text or item.hint.html %}
{% set itemHintId = itemId + '-item-hint' %}
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="{{ itemId }}" name="{{ params.name }}" type="radio" value="{{ item.value }}"
{{-" checked" if isChecked }}
{{-" disabled" if item.disabled }}
{%- if item.conditional.html %} data-aria-controls="{{ conditionalId }}"{% endif -%}
{%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}
{{- govukAttributes(item.attributes) }}>
{{ govukLabel({
html: item.html,
text: item.text,
classes: 'govuk-radios__label' + (' ' + item.label.classes if item.label.classes),
attributes: item.label.attributes,
for: itemId
}) | trim | indent(6) }}
{% if hasHint %}
{{ govukHint({
id: itemHintId,
classes: 'govuk-radios__hint' + (' ' + item.hint.classes if item.hint.classes),
attributes: item.hint.attributes,
html: item.hint.html,
text: item.hint.text
}) | trim | indent(6) }}
{% endif %}
</div>
{% if item.conditional.html %}
<div class="govuk-radios__conditional {%- if not isChecked %} govuk-radios__conditional--hidden{% endif %}" id="{{ conditionalId }}">
{{ item.conditional.html | safe | trim | indent(6) }}
</div>
{% endif %}
{% endif %}
{%- endmacro %}

{#- Capture the HTML so we can optionally nest it in a fieldset -#}
{% set innerHtml %}
{% if params.hint %}
Expand Down Expand Up @@ -47,54 +90,7 @@
{% endif %}
{% for item in params.items %}
{% if item %}
{#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
{%- if item.id -%}
{%- set id = item.id -%}
{%- else -%}
{#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
{%- if loop.first -%}
{%- set id = idPrefix %}
{% else %}
{%- set id = idPrefix + "-" + loop.index -%}
{%- endif -%}
{%- endif -%}
{% set conditionalId = "conditional-" + id %}
{%- if item.divider %}
<div class="govuk-radios__divider">{{ item.divider }}</div>
{%- else %}
{% set isChecked = item.checked | default((item.value == params.value and item.checked != false) if params.value else false, true) %}
{% set hasHint = 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 isChecked }}
{{-" disabled" if item.disabled }}
{%- if item.conditional.html %} data-aria-controls="{{ conditionalId }}"{% endif -%}
{%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}
{{- govukAttributes(item.attributes) }}>
{{ govukLabel({
html: item.html,
text: item.text,
classes: 'govuk-radios__label' + (' ' + item.label.classes if item.label.classes),
attributes: item.label.attributes,
for: id
}) | trim | indent(6) }}
{% if hasHint %}
{{ govukHint({
id: itemHintId,
classes: 'govuk-radios__hint' + (' ' + item.hint.classes if item.hint.classes),
attributes: item.hint.attributes,
html: item.hint.html,
text: item.hint.text
}) | trim | indent(6) }}
{% endif %}
</div>
{% if item.conditional.html %}
<div class="govuk-radios__conditional {%- if not isChecked %} govuk-radios__conditional--hidden{% endif %}" id="{{ conditionalId }}">
{{ item.conditional.html | safe }}
</div>
{% endif %}
{% endif %}
{{- _radioItem(params, item, loop.index) -}}
{% endif %}
{% endfor %}
{% if params.formGroup.afterInputs %}
Expand Down

0 comments on commit 57be38e

Please sign in to comment.