Replace govuk_formbuilder classes with nhsuk ones

app/assets/stylesheets/application.sass.scss

@@ -32,3 +32,7 @@ $color_app-pale-blue: #ccdff1;
     }
   }
 }
+
+.nhsuk-visually-hidden {
+  @extend .nhsuk-u-visually-hidden;
+}

app/javascript/controllers/index.js

@@ -31,11 +31,11 @@ application.register(
   GovukNotificationBannerController,
 );
 
-import GovukRadiosController from "./govuk_radios_controller";
-application.register("govuk-radios", GovukRadiosController);
-
 import GovukSkipLinkController from "./govuk_skip_link_controller";
 application.register("govuk-skip-link", GovukSkipLinkController);
 
 import GovukTabsController from "./govuk_tabs_controller";
 application.register("govuk-tabs", GovukTabsController);
+
+import NhsukRadiosController from "./nhsuk_radios_controller";
+application.register("nhsuk-radios", NhsukRadiosController);

app/javascript/controllers/nhsuk_radios_controller.spec.ts

@@ -0,0 +1,38 @@
+import { application } from "./application";
+import NhsukRadiosController from "./nhsuk_radios_controller";
+import NhsukRadios from "nhsuk-frontend/packages/components/radios/radios";
+
+jest.mock("nhsuk-frontend/packages/components/radios/radios");
+
+// Creating HTML body structure
+document.body.innerHTML = `
+  <div data-module="nhsuk-radios">
+    <input type="radio" data-aria-controls="target-id" />
+    <div id="target-id" class="nhsuk-radios__conditional"></div>
+  </div>
+  <div data-module="nhsuk-radios">
+    <input type="radio" />
+  </div>
+`;
+
+describe("NhsukRadiosController", () => {
+  beforeEach(() => {
+    application.register("nhsuk-radios", NhsukRadiosController);
+  });
+
+  test("should call NhsukRadios", () => {
+    expect(NhsukRadios).toHaveBeenCalledTimes(2);
+  });
+
+  test("should add 'nhsuk-radios--conditional' class", () => {
+    const elements = document.querySelectorAll('[data-module="nhsuk-radios"]');
+    expect(elements[0].classList).toContain("nhsuk-radios--conditional");
+    expect(elements[1].classList).not.toContain("nhsuk-radios--conditional");
+  });
+
+  test("should promote 'data-aria-controls' to 'aria-controls'", () => {
+    const radioInput = document.querySelector('input[type="radio"]');
+    expect(radioInput.getAttribute("aria-controls")).toEqual("target-id");
+    expect(radioInput.getAttribute("data-aria-controls")).toBeNull();
+  });
+});

app/javascript/controllers/nhsuk_radios_controller.ts

@@ -0,0 +1,43 @@
+import { Controller } from "@hotwired/stimulus";
+import NhsukRadios from "nhsuk-frontend/packages/components/radios/radios";
+
+// Connects to data-module="nhsuk-radios"
+export default class extends Controller {
+  connect() {
+    this.addConditionalClassIfNeeded();
+    this.promoteAriaControlsAttribute();
+
+    NhsukRadios();
+  }
+
+  // We use govuk-frontend radio button HTML, which doesn't use a --conditional
+  // modifier on the root element. NHSUK Radios require this in order to set up
+  // and initialise.
+  addConditionalClassIfNeeded() {
+    if (!this.element.querySelectorAll(".nhsuk-radios__conditional").length)
+      return;
+
+    this.element.classList.add("nhsuk-radios--conditional");
+  }
+
+  // Promote data-aria-controls attribute to a aria-controls attribute as per
+  // https://github.com/alphagov/govuk-frontend/blob/88fea750b5eb9c9d9f661405e68bfb59e59754b2/packages/govuk-frontend/src/govuk/components/radios/radios.mjs#L33-L34
+  promoteAriaControlsAttribute() {
+    const $inputs = this.element.querySelectorAll('input[type="radio"]');
+
+    $inputs.forEach(($input) => {
+      const targetId = $input.getAttribute("data-aria-controls");
+
+      // Skip radios without data-aria-controls attributes, or where the
+      // target element does not exist.
+      if (!targetId || !document.getElementById(targetId)) {
+        return;
+      }
+
+      // Promote the data-aria-controls attribute to a aria-controls attribute
+      // so that the relationship is exposed in the AOM
+      $input.setAttribute("aria-controls", targetId);
+      $input.removeAttribute("data-aria-controls");
+    });
+  }
+}

app/views/vaccinations/_patient.html.erb

@@ -108,8 +108,8 @@
         <% content_for(:before_content) { f.govuk_error_summary } %>
 
         <%= f.govuk_radio_buttons_fieldset(:administered,
-          legend: { size: 'm', text: 'Did they get the vaccine?' }) do %>
-          <p>They need their 1st dose.</p>
+          legend: { size: 'm', text: 'Did they get the vaccine?' },
+          hint: { text: 'They need their 1st dose.' }) do %>
 
           <%= f.govuk_radio_button :administered, true,
             label: { text: 'Yes, they got the HPV vaccine' },
@@ -121,10 +121,10 @@
               :description,
               inline: true,
               legend: {
-                size: 'm',
                 text: 'Where did they get it?',
                 hidden: true
-              } %>
+              },
+              bold_labels: false %>
           <% end %>
           <%= f.govuk_radio_button :administered, false,
             label: { text: 'No, they did not get it' } %>

config/initializers/govuk_formbuilder.rb

@@ -3,8 +3,8 @@
   #
   # https://www.rubydoc.info/gems/govuk_design_system_formbuilder/GOVUKDesignSystemFormBuilder
 
-  # config.brand: 'govuk'
-  #
+  config.brand = "nhsuk"
+
   # config.default_legend_size: 'm'
   # config.default_legend_tag: nil
   # config.default_caption_size: 'm'

jest.setup.js

@@ -0,0 +1 @@
+import "mutationobserver-shim";

package.json

@@ -27,12 +27,17 @@
     "jest": "^29.6.1",
     "jest-environment-jsdom": "^29.6.1",
     "jest-fetch-mock": "^3.0.3",
+    "mutationobserver-shim": "^0.3.7",
     "prettier": "^3.0.0"
   },
   "packageManager": "[email protected]",
   "jest": {
     "collectCoverage": true,
+    "setupFilesAfterEnv": [
+      "<rootDir>/jest.setup.js"
+    ],
     "testPathIgnorePatterns": [
+      "app/assets/builds/",
       "node_modules/",
       "tests"
     ],

yarn.lock

@@ -4063,6 +4063,11 @@ [email protected]:
   resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
+mutationobserver-shim@^0.3.7:
+  version "0.3.7"
+  resolved "https://registry.yarnpkg.com/mutationobserver-shim/-/mutationobserver-shim-0.3.7.tgz#8bf633b0c0b0291a1107255ed32c13088a8c5bf3"
+  integrity sha512-oRIDTyZQU96nAiz2AQyngwx1e89iApl2hN5AOYwyxLUB47UYsU3Wv9lJWqH5y/QdiYkc5HQLi23ZNB3fELdHcQ==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"