Migrate checkbox template from GOV.UK to USWDS patterns

- Replace usaRadioLabel with usaLabel for checkbox labels
- Update hint classes from govuk-checkboxes__hint to usa-checkbox__label-description
- Change conditional reveal classes from govuk-specific to USWDS display-none utility
- Update template comments to reflect USWDS migration
- Add checkbox-specific routes to BackstopJS configuration for testing

This establishes a baseline for checkbox component migration with expected
spacing differences between GOV.UK and USWDS implementations.
This commit is contained in:
alexjanousekGSA
2025-07-09 18:48:15 -03:00
parent d1c423a112
commit 51dcdca047
2 changed files with 26 additions and 13 deletions

View File

@@ -1,16 +1,16 @@
{% 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 %}
{% from "components/components/label/macro.njk" import usaLabel %}
{#- 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) -#}
{#- Updated from GOV.UK components to USWDS patterns
Changed from original GOV.UK template:
- Uses USWDS checkbox classes (usa-checkbox, usa-checkbox__input, usa-checkbox__label)
- Conditional content uses display-none utility class instead of govuk-specific classes
- Label uses usaLabel macro instead of radio label
- Hint text uses usa-checkbox__label-description class
- Maintains all original functionality including conditional reveals and nested checkboxes -#}
{#- 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 %}
@@ -92,17 +92,17 @@
{%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%}
{%- if itemDescribedBy %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
{{ usaRadioLabel({
{{ usaLabel({
html: item.html,
text: item.text,
classes: (' ' + item.label.classes if item.label.classes),
classes: 'usa-checkbox__label' + (' ' + 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),
classes: 'usa-checkbox__label-description' + (' ' + item.hint.classes if item.hint.classes),
attributes: item.hint.attributes,
html: item.hint.html,
text: item.hint.text
@@ -112,14 +112,14 @@
{{ 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 }}">
<div class="usa-checkbox__conditional{% if not item.checked %} display-none{% 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 }}">
<div class="usa-checkbox__conditional{% if not item.checked %} display-none{% endif %}" id="{{ conditionalId }}">
{{ item.conditional.html | safe }}
</div>
{% endif %}

13
urls.js
View File

@@ -58,6 +58,19 @@ const routes = {
label: 'Team Members',
path: '/services/e6de050d-bd56-4f49-b44b-cb789c4f79fd/users',
},
{
label: 'Invite User',
path: '/services/e6de050d-bd56-4f49-b44b-cb789c4f79fd/users/invite',
},
// Platform admin pages with checkboxes
{
label: 'Platform Admin Live Services',
path: '/platform-admin/live-services',
},
{
label: 'Platform Admin Trial Services',
path: '/platform-admin/trial-services',
},
],
// Using Notify section