notifications-admin/app/templates/forms/fields/checkboxes/template.njk

{% from "components/components/error-message/macro.njk" import usaErrorMessage -%}
{% from "components/components/fieldset/macro.njk" import govukFieldset %}
{% from "components/components/hint/macro.njk" import usaHint %}
{% from "components/components/radio-label/macro.njk" import usaRadioLabel %}


{#- 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 `usa-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 `.usa-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 %}
  {{ usaHint({
    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 %}
  {{ usaErrorMessage({
    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="{%- 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="usa-checkbox {%- if item.classes %} {{ item.classes }}{% endif %}">
      {%- if item.before %}{{ item.before }}{% endif -%}
      <input class="usa-checkbox__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 -%}>
      {{ usaRadioLabel({
        html: item.html,
        text: item.text,
        classes: (' ' + item.label.classes if item.label.classes),
        attributes: item.label.attributes,
        for: id
      }) | indent(6) | trim }}
      {%- if hasHint %}
      {{ usaHint({
        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 %}usa-form-group{% endif %} {%- if params.errorMessage %} usa-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>