Updated checkboxes to uswds

app/templates/components/components/checkboxes/template.njk

@@ -49,7 +49,7 @@
     visuallyHiddenText: params.errorMessage.visuallyHiddenText
   }) | indent(2) | trim }}
 {% endif %}
-  <div class="govuk-checkboxes {%- if params.classes %} {{ params.classes }}{% endif %}"
+  <div class="usa-checkbox-group {%- 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 %}
@@ -60,8 +60,8 @@
     {% set itemHintId = id + "-item-hint" if hasHint else "" %}
     {% set itemDescribedBy = describedBy if not hasFieldset else "" %}
     {% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) | trim %}
-    <div class="govuk-checkboxes__item">
-      <input class="govuk-checkboxes__input" id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ item.value }}"
+    <div class="usa-checkbox">
+      <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 -%}
@@ -70,14 +70,14 @@
       {{ usaLabel({
         html: item.html,
         text: item.text,
-        classes: 'govuk-checkboxes__label' + (' ' + 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',
+        classes: 'usa-checkbox__label-description',
         attributes: item.hint.attributes,
         html: item.hint.html,
         text: item.hint.text
@@ -85,7 +85,7 @@
       {%- endif %}
     </div>
     {% if 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 %}

package-lock.json

@@ -2176,22 +2176,6 @@
         "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
       }
     },
-    "node_modules/@jest/environment": {
-      "version": "30.0.2",
-      "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-30.0.2.tgz",
-      "integrity": "sha512-hRLhZRJNxBiOhxIKSq2UkrlhMt3/zVFQOAi5lvS8T9I03+kxsbflwHJEF+eXEYXCrRGRhHwECT7CDk6DyngsRA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/fake-timers": "30.0.2",
-        "@jest/types": "30.0.1",
-        "@types/node": "*",
-        "jest-mock": "30.0.2"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
     "node_modules/@jest/environment-jsdom-abstract": {
       "version": "30.0.4",
       "resolved": "https://registry.npmjs.org/@jest/environment-jsdom-abstract/-/environment-jsdom-abstract-30.0.4.tgz",
@@ -2276,24 +2260,6 @@
         "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
       }
     },
-    "node_modules/@jest/fake-timers": {
-      "version": "30.0.2",
-      "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-30.0.2.tgz",
-      "integrity": "sha512-jfx0Xg7l0gmphTY9UKm5RtH12BlLYj/2Plj6wXjVW5Era4FZKfXeIvwC67WX+4q8UCFxYS20IgnMcFBcEU0DtA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/types": "30.0.1",
-        "@sinonjs/fake-timers": "^13.0.0",
-        "@types/node": "*",
-        "jest-message-util": "30.0.2",
-        "jest-mock": "30.0.2",
-        "jest-util": "30.0.2"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
     "node_modules/@jest/get-type": {
       "version": "30.0.1",
       "resolved": "https://registry.npmjs.org/@jest/get-type/-/get-type-30.0.1.tgz",

tests/javascripts/collapsibleCheckboxes.test.js

@@ -20,9 +20,9 @@ describe('Collapsible fieldset', () => {
       for (let num = start; num <= end; num++) {
         let id = `folder-permissions-${num}`;
 
-        result += `<li class="govuk-checkboxes__item">
-          <input class="govuk-checkboxes__input" id="${id}" name="folder-permissions" type="checkbox" value="${id}">
-          <label class="usa-radio__label govuk-checkboxes__label" for="${id}">
+        result += `<li class="usa-checkbox">
+          <input class="usa-checkbox__input" id="${id}" name="folder-permissions" type="checkbox" value="${id}">
+          <label class="usa-checkbox__label" for="${id}">
             Folder ${id}
           </label>
         </li>`;
@@ -49,7 +49,7 @@ describe('Collapsible fieldset', () => {
                 <div class="selection-summary" role="region" aria-live="polite"></div>
               </span>
             </legend>
-            <ul class="govuk-checkboxes">
+            <ul class="usa-checkbox-group">
               ${_checkboxes(1, 10)}
             </ul>
           </fieldset>
@@ -59,7 +59,7 @@ describe('Collapsible fieldset', () => {
       wrapper = document.querySelector('.selection-wrapper');
       formGroup = wrapper.querySelector('.usa-form-group');
       fieldset = formGroup.querySelector('fieldset');
-      checkboxesContainer = fieldset.querySelector('.govuk-checkboxes');
+      checkboxesContainer = fieldset.querySelector('.usa-checkbox-group');
       checkboxes = checkboxesContainer.querySelectorAll('input[type=checkbox]');
 
   });
@@ -323,7 +323,7 @@ describe('Collapsible fieldset', () => {
         const nestedCheckboxes = document.createElement('div');
         nestedCheckboxes.className = 'usa-form-group usa-form-group--nested';
         nestedCheckboxes.innerHTML = _checkboxes(11, 20);
-        checkboxesContainer.querySelector('.govuk-checkboxes__item').appendChild(nestedCheckboxes);
+        checkboxesContainer.querySelector('.usa-checkbox').appendChild(nestedCheckboxes);
 
         // start module
         window.GOVUK.modules.start();