From 51dcdca047608d062a9145f1cf9c27b68d003d06 Mon Sep 17 00:00:00 2001
From: alexjanousekGSA <alex.janousek@gsa.gov>
Date: Wed, 9 Jul 2025 18:48:15 -0300
Subject: [PATCH] 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.
---
 .../forms/fields/checkboxes/template.njk      | 26 +++++++++----------
 urls.js                                       | 13 ++++++++++
 2 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/app/templates/forms/fields/checkboxes/template.njk b/app/templates/forms/fields/checkboxes/template.njk
index c1d006310..74d346346 100644
--- a/app/templates/forms/fields/checkboxes/template.njk
+++ b/app/templates/forms/fields/checkboxes/template.njk
@@ -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 %}
diff --git a/urls.js b/urls.js
index e47d8931a..7fe584d8a 100644
--- a/urls.js
+++ b/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