mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-23 15:57:23 -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/error-message/macro.njk" import usaErrorMessage -%}
|
||||||
{% from "components/components/fieldset/macro.njk" import govukFieldset %}
|
{% from "components/components/fieldset/macro.njk" import govukFieldset %}
|
||||||
{% from "components/components/hint/macro.njk" import usaHint %}
|
{% 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
|
{#- Updated from GOV.UK components to USWDS patterns
|
||||||
Changes:
|
Changed from original GOV.UK template:
|
||||||
- `formGroup` option to control whether or not the checkboxes are wrapped with a `usa-form-group` class
|
- Uses USWDS checkbox classes (usa-checkbox, usa-checkbox__input, usa-checkbox__label)
|
||||||
- `classes` option added to `item` allow custom classes on the `.govuk-checkboxes__item` element
|
- Conditional content uses display-none utility class instead of govuk-specific classes
|
||||||
- `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)
|
- Label uses usaLabel macro instead of radio label
|
||||||
- `asList` option added the root `params` object to allow setting of the `.govuk-checkboxes` and `.govuk-checkboxes__item` element types
|
- Hint text uses usa-checkbox__label-description class
|
||||||
- `children` option added to `item` allowing the sending in of prerendered child checkboxes (allowing the creation of tree structures through recursion) -#}
|
- Maintains all original functionality including conditional reveals and nested checkboxes -#}
|
||||||
{#- If an id 'prefix' is not passed, fall back to using the name attribute
|
{#- 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 -#}
|
instead. We need this for error messages and hints as well -#}
|
||||||
{% set idPrefix = params.idPrefix if params.idPrefix else params.name %}
|
{% set idPrefix = params.idPrefix if params.idPrefix else params.name %}
|
||||||
@@ -92,17 +92,17 @@
|
|||||||
{%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%}
|
{%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%}
|
||||||
{%- if itemDescribedBy %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
|
{%- if itemDescribedBy %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
|
||||||
{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
|
{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
|
||||||
{{ usaRadioLabel({
|
{{ usaLabel({
|
||||||
html: item.html,
|
html: item.html,
|
||||||
text: item.text,
|
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,
|
attributes: item.label.attributes,
|
||||||
for: id
|
for: id
|
||||||
}) | indent(6) | trim }}
|
}) | indent(6) | trim }}
|
||||||
{%- if hasHint %}
|
{%- if hasHint %}
|
||||||
{{ usaHint({
|
{{ usaHint({
|
||||||
id: itemHintId,
|
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,
|
attributes: item.hint.attributes,
|
||||||
html: item.hint.html,
|
html: item.hint.html,
|
||||||
text: item.hint.text
|
text: item.hint.text
|
||||||
@@ -112,14 +112,14 @@
|
|||||||
{{ item.children | safe }}
|
{{ item.children | safe }}
|
||||||
{%- endif %}
|
{%- endif %}
|
||||||
{% if params.asList and item.conditional %}
|
{% 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 }}
|
{{ item.conditional.html | safe }}
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{%- if item.after %}{{ item.after }}{% endif -%}
|
{%- if item.after %}{{ item.after }}{% endif -%}
|
||||||
</{{ groupItemElement }}>
|
</{{ groupItemElement }}>
|
||||||
{% if not params.asList and item.conditional %}
|
{% 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 }}
|
{{ item.conditional.html | safe }}
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|||||||
13
urls.js
13
urls.js
@@ -58,6 +58,19 @@ const routes = {
|
|||||||
label: 'Team Members',
|
label: 'Team Members',
|
||||||
path: '/services/e6de050d-bd56-4f49-b44b-cb789c4f79fd/users',
|
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
|
// Using Notify section
|
||||||
|
|||||||
Reference in New Issue
Block a user