darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-18 13:39:41 -04:00
Code Issues Packages Projects Releases Wiki Activity

Reworking checkboxes to adhere to USWDS styling

Browse Source
This commit is contained in:
Jonathan Bobel
2023-08-14 10:35:11 -04:00
parent fc9667d25b
commit 1be305d045
24 changed files with 295 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/templates/forms/fields/checkboxes/template.njk
View File

@@ -1,7 +1,7 @@
{% from "components/us_components/error-message/macro.njk" import govukErrorMessage -%}
{% from "components/us_components/fieldset/macro.njk" import govukFieldset %}
{% from "components/us_components/hint/macro.njk" import govukHint %}
{% from "components/us_components/label/macro.njk" import govukLabel %}
{% from "components/us_components/radio-label/macro.njk" import usaRadioLabel %}
{#- Copied from https://github.com/alphagov/govuk-frontend/blob/v2.13.0/src/components/checkboxes/template.njk
@@ -73,7 +73,7 @@
visuallyHiddenText: params.errorMessage.visuallyHiddenText
}) | indent(2) | trim }}
{% endif %}
<{{ groupElement }} class="govuk-checkboxes {%- if params.classes %} {{ params.classes }}{% 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 %}
@@ -84,18 +84,18 @@
{% 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 %}">
<{{ groupItemElement }} class="usa-checkbox {%- 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 }}"
<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 -%}>
{{ govukLabel({
{{ usaRadioLabel({
html: item.html,
text: item.text,
classes: 'govuk-checkboxes__label' + (' ' + item.label.classes if item.label.classes),
classes: (' ' + item.label.classes if item.label.classes),
attributes: item.label.attributes,
for: id
}) | indent(6) | trim }}