mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-22 03:15:07 -05:00
9e8df33832
During the move to GOV.UK Frontend checkboxes our template list has started to be wrapped in a `<div>` with the `govuk-form-group` class. This adds extra spacing, like you’d want in a regular transaction service which might have multiple sets of form controls on a single page. It isn’t appropriate on our templates page, because there should be a consistent rhythm where the space between each checkboxes is the same as the space between the search box and the first checkbox, to the last checkbox and the buttons. Not having this space is also consistent with other pages with sticky grey buttons, eg the team members page. This commit also fixes a typo in the name of one of the classes used to control spacing between the checkboxes and search bar.
144 lines
6.2 KiB
Plaintext
144 lines
6.2 KiB
Plaintext
{% from "components/error-message/macro.njk" import govukErrorMessage -%}
|
||
{% from "components/fieldset/macro.njk" import govukFieldset %}
|
||
{% from "components/hint/macro.njk" import govukHint %}
|
||
{% from "components/label/macro.njk" import govukLabel %}
|
||
|
||
|
||
{#- Copied from https://github.com/alphagov/govuk-frontend/blob/v2.13.0/src/components/checkboxes/template.njk
|
||
Changes:
|
||
- `formGroup` option to control whether or not the checkboxes are wrapped with a `govuk-form-group` class
|
||
- `classes` option added to `item` allow custom classes on the `.govuk-checkboxes__item` element
|
||
- `classes` option added to `item.hint` allow custom classes on the `.govuk-hint` element (added to GOVUK Frontend in v3.5.0 - remove when we update)
|
||
- `asList` option added the root `params` object to allow setting of the `.govuk-checkboxes` and `.govuk-checkboxes__item` element types
|
||
- `children` option added to `item` allowing the sending in of prerendered child checkboxes (allowing the creation of tree structures through recursion) -#}
|
||
{#- If an id 'prefix' is not passed, fall back to using the name attribute
|
||
instead. We need this for error messages and hints as well -#}
|
||
{% set idPrefix = params.idPrefix if params.idPrefix else params.name %}
|
||
|
||
{% if 'formGroup' not in params %}
|
||
{% set formGroup = True %}
|
||
{% else %}
|
||
{% set formGroup = params.formGroup %}
|
||
{% endif %}
|
||
|
||
{#- 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 "" %}
|
||
{% if params.fieldset.describedBy %}
|
||
{% set describedBy = params.fieldset.describedBy %}
|
||
{% endif %}
|
||
|
||
{#- set the types of element used for the checkboxes and their group based on
|
||
whether asList is set -#}
|
||
{% if params.asList %}
|
||
{% set groupElement = 'ul' %}
|
||
{% set groupItemElement = 'li' %}
|
||
{% else %}
|
||
{% set groupElement = 'div' %}
|
||
{% set groupItemElement = 'div' %}
|
||
{% endif %}
|
||
|
||
{% set isConditional = false %}
|
||
{% for item in params.items %}
|
||
{% if item.conditional %}
|
||
{% set isConditional = true %}
|
||
{% endif %}
|
||
{% endfor %}
|
||
|
||
{#- fieldset is false by default -#}
|
||
{% 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 %}
|
||
<{{ groupElement }} class="govuk-checkboxes {%- if params.classes %} {{ params.classes }}{% endif %}"
|
||
{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
|
||
{%- if isConditional %} data-module="checkboxes"{% endif -%}>
|
||
{% for item in params.items %}
|
||
{% 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 hasHint else "" %}
|
||
{% set itemDescribedBy = describedBy if not hasFieldset else "" %}
|
||
{% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) | trim %}
|
||
<{{ groupItemElement }} class="govuk-checkboxes__item {%- if item.classes %} {{ item.classes }}{% endif %}">
|
||
{%- if item.before %}{{ item.before }}{% endif -%}
|
||
<input class="govuk-checkboxes__input" id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ item.value }}"
|
||
{{-" checked" if item.checked }}
|
||
{{-" disabled" if item.disabled }}
|
||
{%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%}
|
||
{%- if itemDescribedBy %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
|
||
{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
|
||
{{ govukLabel({
|
||
html: item.html,
|
||
text: item.text,
|
||
classes: 'govuk-checkboxes__label' + (' ' + item.label.classes if item.label.classes),
|
||
attributes: item.label.attributes,
|
||
for: id
|
||
}) | indent(6) | trim }}
|
||
{%- 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
|
||
}) | indent(6) | trim }}
|
||
{%- endif %}
|
||
{%- if item.children %}
|
||
{{ item.children | safe }}
|
||
{%- endif %}
|
||
{% if params.asList and item.conditional %}
|
||
<div class="govuk-checkboxes__conditional{% if not item.checked %} govuk-checkboxes__conditional--hidden{% endif %}" id="{{ conditionalId }}">
|
||
{{ item.conditional.html | safe }}
|
||
</div>
|
||
{% endif %}
|
||
{%- if item.after %}{{ item.after }}{% endif -%}
|
||
</{{ groupItemElement }}>
|
||
{% if not params.asList and item.conditional %}
|
||
<div class="govuk-checkboxes__conditional{% if not item.checked %} govuk-checkboxes__conditional--hidden{% endif %}" id="{{ conditionalId }}">
|
||
{{ item.conditional.html | safe }}
|
||
</div>
|
||
{% endif %}
|
||
{% endfor %}
|
||
</{{ groupElement }}>
|
||
{% endset -%}
|
||
|
||
<div class="{% if formGroup %}govuk-form-group{% endif %} {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
|
||
{% 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 %}
|
||
</div>
|