Trying to change govukFieldset but I keep getting testing errors

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

@@ -1,5 +1,5 @@
 {% from "../error-message/macro.njk" import usaErrorMessage -%}
-{% from "../fieldset/macro.njk" import usaFieldset %}
+{% from "../fieldset/macro.njk" import govukFieldset %}
 {% from "../hint/macro.njk" import usaHint %}
 {% from "../label/macro.njk" import usaLabel %}
 
@@ -95,7 +95,7 @@
 
 <div class="usa-form-group {%- if params.errorMessage %} usa-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
 {% if params.fieldset %}
-  {% call usaFieldset({
+  {% call govukFieldset({
     describedBy: describedBy,
     classes: params.fieldset.classes,
     attributes: params.fieldset.attributes,

app/templates/components/components/hint/_hint.scss

@@ -1,50 +0,0 @@
-@import "../../settings/all";
-@import "../../tools/all";
-@import "../../helpers/all";
-
-@include govuk-exports("govuk/component/hint") {
-  .usa-hint {
-    @include govuk-font($size: 19);
-
-    display: block;
-
-    margin-bottom: govuk-spacing(3);
-
-    color: $govuk-secondary-text-colour;
-  }
-
-  // Reduces margin-bottom of hint when used after the default label (no class)
-  // or govuk-label--s for better vertical alignment.
-
-  // This adjustment will not work when the label is inside the <h1>, however it
-  // is unlikely that the default or govuk-label--s class would be used in this
-  // case.
-
-  // This adjustment will not work in browsers that do not support :not(). 
-  // Users with these browsers will see the default size margin (5px larger).
-
-  .govuk-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl) + .usa-hint {
-    margin-bottom: govuk-spacing(2);
-  }
-
-  // Reduces margin-bottom of hint when used after the default legend (no class)
-  // or govuk-fieldset__legend--s for better vertical alignment.
-
-  // This adjustment will not work when the legend is outside the <h1>, however
-  // it is unlikely that the default or govuk-fieldset__legend--s class would be
-  // used in this case.
-
-  // This adjustment will not work in browsers that do not support :not(). 
-  // Users with these browsers will see the default size margin (5px larger).
-
-  .govuk-fieldset__legend:not(.govuk-fieldset__legend--m):not(.govuk-fieldset__legend--l):not(.govuk-fieldset__legend--xl) + .usa-hint {
-    margin-bottom: govuk-spacing(2);
-  }
-
-  // Reduces visual spacing of legend when there is a hint
-
-  .govuk-fieldset__legend + .usa-hint,
-  .govuk-fieldset__legend + .usa-hint {
-    margin-top: -(govuk-spacing(1));
-  }
-}

app/templates/views/cookies.html

@@ -122,8 +122,8 @@
     <div class="cookie-settings__form-wrapper">
       <form data-module="cookie-settings">
         <div class="usa-form-group">
-          <fieldset class="govuk-fieldset" aria-describedby="changed-name-hint">
-            <legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
+          <fieldset class="usa-fieldset" aria-describedby="changed-name-hint">
+            <legend class="usa-fieldset__legend usa-fieldset__legend--s">
               Do you want to accept analytics cookies?
             </legend>
             <div class="usa-radios usa-radios--inline">

app/templates/views/service-settings/set-inbound-number.html

@@ -28,7 +28,7 @@
         'fieldset': {
           'legend': {
             'isPageHeading': True,
-            'classes': 'govuk-fieldset__legend--l'
+            'classes': 'usa-legend usa-legend--large'
           }
         }
       }) }}

app/templates/views/service-settings/set-service-setting.html

@@ -20,7 +20,7 @@
           "fieldset": {
             "legend": {
               "isPageHeading": True,
-              "classes": "govuk-fieldset__legend--l"
+              "classes": "usa-legend usa-legend--large"
             }
           }
         }) }}

app/templates/views/user-profile/disable-platform-admin-view.html

@@ -23,7 +23,7 @@
           'fieldset': {
             'legend': {
               'isPageHeading': True,
-              'classes': 'govuk-fieldset__legend--l'
+              'classes': 'usa-legend usa-legend--large'
             }
           },
           'hint': {

tests/javascripts/collapsibleCheckboxes.test.js

@@ -42,8 +42,8 @@ describe('Collapsible fieldset', () => {
     document.body.innerHTML =
       `<div class="selection-wrapper" data-module="collapsible-checkboxes" data-field-label="folder">
         <div class="usa-form-group">
-          <fieldset class="govuk-fieldset" id="folder_permissions" aria-describedby="users_with_permission-hint">
-            <legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
+          <fieldset class="usa-fieldset" id="folder_permissions" aria-describedby="users_with_permission-hint">
+            <legend class="usa-fieldset__legend usa-fieldset__legend--s">
               Folders this team member can see
               <span class="usa-hint" id="users_with_permission-hint">
                 <div class="selection-summary" role="region" aria-live="polite"></div>

tests/javascripts/listEntry.test.js

@@ -63,7 +63,7 @@ describe("List entry", () => {
 
     document.body.innerHTML =
       `<fieldset class="usa-form-group" aria-describedby="domains-hint">
-        <legend class="govuk-fieldset__legend">
+        <legend class="usa-fieldset__legend">
           Domain names
           </span>
         </legend>

tests/javascripts/support/helpers/html.js

@@ -25,11 +25,11 @@ function getRadioGroup (data) {
     data.cssClasses.forEach(cssClass => radioGroup.classList.add(cssClass));
   }
   radioGroup.innerHTML = `
-    <fieldset class="govuk-fieldset" id="${data.name}">
-      <legend class="govuk-fieldset__legend${data.hideLegend ? " usa-sr-only" : ""}">
+    <fieldset class="usa-fieldset" id="${data.name}">
+      <legend class="usa-fieldset__legend${data.hideLegend ? " usa-sr-only" : ""}">
         ${data.label}
       </legend>
-      <div class="govuk-radios">
+      <div class="usa-radios">
         ${getRadios(data.fields, data.name)}
       </div>
     </fieldset>`;