mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-05-21 17:23:06 -04:00
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:
@@ -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
13
urls.js
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user