Merge pull request #354 from NHSDigital/update-nhsuk-frontend

[DTOSS-10748] Update nhsuk frontend to v10.0.0

Author: MatMoore

jest.setup.js

@@ -1,4 +1,5 @@
 import '@testing-library/jest-dom'
+import { outdent } from 'outdent'
 
 /**
  * Mock fetch() function for jsdom
@@ -8,3 +9,22 @@ Object.defineProperty(window, 'fetch', {
   writable: true,
   value: jest.fn().mockResolvedValue(undefined)
 })
+
+beforeEach(() => {
+  const stylesheet = document.createElement('style')
+
+  stylesheet.innerHTML = outdent`
+    :root {
+      --nhsuk-breakpoint-mobile: 20rem;
+      --nhsuk-breakpoint-tablet: 40.0625rem;
+      --nhsuk-breakpoint-desktop: 48.0625rem;
+      --nhsuk-breakpoint-large-desktop: 61.875rem;
+    }
+  `
+
+  // Add styles for NHS.UK frontend checks
+  document.head.appendChild(stylesheet)
+
+  // Flag NHS.UK frontend as supported
+  document.body.classList.add('nhsuk-frontend-supported')
+})

manage_breast_screening/assets/js/check-in.js

@@ -1,28 +1,31 @@
+import { Component, ElementError } from 'nhsuk-frontend'
+
 import setSubmit from './set-submit.js'
 
 /**
  * Enhance an HTML form to intercept submit events and instead fetch the form action URL.
  * If successful, show child elements with data-show-on-submit, and hide those with data-hide-on-submit.
  * If unsuccessful, or the fetch times out, force a page refresh.
  */
-class CheckIn {
+export class CheckIn extends Component {
   /**
-   * @param {Element | null} [$root] - HTML element to use for component
+   * @param {Element | null} $root - HTML element to use for component
    */
   constructor($root) {
-    if (!$root || !($root instanceof HTMLElement)) {
-      throw new Error('CheckIn initialised without a root element')
-    }
+    super($root)
 
-    const $form = $root.querySelector('form')
+    const $form = this.$root.querySelector('form')
     if (!$form) {
-      throw new Error('CheckIn initialised without a form element')
+      throw new ElementError({
+        element: $root,
+        component: CheckIn,
+        identifier: 'Form element (`$form`)'
+      })
     }
 
-    this.$root = $root
     this.$form = $form
-    this.$showOnSubmit = $root.querySelectorAll('[data-show-on-submit]')
-    this.$hideOnSubmit = $root.querySelectorAll('[data-hide-on-submit]')
+    this.$showOnSubmit = this.$root.querySelectorAll('[data-show-on-submit]')
+    this.$hideOnSubmit = this.$root.querySelectorAll('[data-hide-on-submit]')
 
     const showResult = this.showResult.bind(this)
 
@@ -44,19 +47,9 @@ class CheckIn {
     this.$hideOnSubmit.forEach(($elem) => $elem.setAttribute('hidden', ''))
     this.$showOnSubmit.forEach(($elem) => $elem.removeAttribute('hidden'))
   }
-}
-
-/**
- * Initialise check in component
- *
- * @param {object} [options]
- * @param {Element | Document | null} [options.scope] - Scope of the document to search within
- */
-export function initCheckIn(options = {}) {
-  const $scope = options.scope || document
-  const $elements = $scope.querySelectorAll('[data-module="app-check-in"]')
 
-  $elements.forEach(($root) => {
-    new CheckIn($root)
-  })
+  /**
+   * Name for the component used when initialising using data-module attributes
+   */
+  static moduleName = 'app-check-in'
 }

manage_breast_screening/assets/js/check-in.test.js

@@ -1,7 +1,8 @@
 import { getByRole } from '@testing-library/dom'
 import { userEvent } from '@testing-library/user-event'
+import { createAll } from 'nhsuk-frontend'
 
-import { initCheckIn } from './check-in.js'
+import { CheckIn } from './check-in.js'
 
 describe('Check in', () => {
   const user = userEvent.setup()
@@ -20,7 +21,7 @@ describe('Check in', () => {
 
   beforeEach(() => {
     document.body.innerHTML = `
-      <div data-module="app-check-in">
+      <div data-module="${CheckIn.moduleName}">
         <div data-hide-on-submit>Not submitted</div>
         <div data-show-on-submit hidden>Submitted</div>
         <form method="post" action="/example" novalidate>
@@ -47,7 +48,7 @@ describe('Check in', () => {
       })
     )
 
-    initCheckIn()
+    createAll(CheckIn)
 
     await user.click(button)
 
@@ -65,7 +66,7 @@ describe('Check in', () => {
       })
     )
 
-    initCheckIn()
+    createAll(CheckIn)
 
     await user.click(button)
 

manage_breast_screening/assets/js/index.js

@@ -1,7 +1,11 @@
-import 'nhsuk-frontend/packages/nhsuk.js'
+import { createAll, initAll } from 'nhsuk-frontend'
 
-import { initCheckIn } from './check-in.js'
+import { CheckIn } from './check-in.js'
 
 document.addEventListener('DOMContentLoaded', () => {
-  initCheckIn()
+  // Initialise NHS.UK frontend components
+  initAll()
+
+  // Initialise application components
+  createAll(CheckIn)
 })

manage_breast_screening/assets/js/index.test.js

@@ -1,18 +1,27 @@
 import { waitFor } from '@testing-library/dom'
+import { outdent } from 'outdent'
 
-import { initCheckIn } from './check-in.js'
-
-jest.mock('./check-in.js')
+import { CheckIn } from './check-in.js'
 
 describe('Automatic initialisation', () => {
+  beforeEach(() => {
+    jest.spyOn(CheckIn, 'checkSupport')
+
+    document.body.innerHTML = outdent`
+      <div data-module="${CheckIn.moduleName}">
+        <form method="post" action="/example" novalidate></form>
+      </div>
+    `
+  })
+
   it('should init components on DOMContentLoaded', async () => {
     await import('./index.js')
 
     // Should not initialise on import
-    expect(initCheckIn).not.toHaveBeenCalled()
+    expect(CheckIn.checkSupport).not.toHaveBeenCalled()
 
     // Should initialise on DOMContentLoaded
     window.document.dispatchEvent(new Event('DOMContentLoaded'))
-    await waitFor(() => expect(initCheckIn).toHaveBeenCalled())
+    await waitFor(() => expect(CheckIn.checkSupport).toHaveBeenCalled())
   })
 })

manage_breast_screening/assets/js/set-submit.js

@@ -1,3 +1,5 @@
+import { ElementError } from 'nhsuk-frontend'
+
 const TIMEOUT = 2000
 
 /**
@@ -13,14 +15,20 @@ const TIMEOUT = 2000
  */
 export default ($form, options = {}) => {
   if (!$form || !($form instanceof HTMLFormElement)) {
-    throw new Error('setSubmit must be called with an HTMLFormElement')
+    throw new ElementError({
+      element: $form,
+      identifier: 'setSubmit: Form element (`$form`)',
+      expectedType: 'HTMLFormElement'
+    })
   }
 
   const method = $form.method
   const action = $form.action
 
   if (!method || !action) {
-    throw new Error('Form method and action must be defined')
+    throw new ElementError({
+      identifier: 'setSubmit: Form method or action'
+    })
   }
 
   function doSubmit() {

manage_breast_screening/assets/sass/components/_button.scss

@@ -1,3 +1,5 @@
+@use "../vendor/nhsuk-frontend/base" as *;
+
 .app-button--link {
   @include nhsuk-link-style-default;
 

manage_breast_screening/assets/sass/components/_count.scss

@@ -1,3 +1,5 @@
+@use "../vendor/nhsuk-frontend/base" as *;
+
 .app-count {
   @include nhsuk-font-size(16);
 

manage_breast_screening/assets/sass/components/_secondary-navigation.scss

@@ -1,3 +1,5 @@
+@use "../vendor/nhsuk-frontend/base" as *;
+
 /* FIXME: taken from prototype */
 $govuk-spacing1: 5px;
 $govuk-spacing2: 10px;

manage_breast_screening/assets/sass/components/_special-appointment-banner.scss

@@ -1,14 +1,6 @@
+@use "../vendor/nhsuk-frontend/base" as *;
+
 .app-special-appointment-banner__action {
   text-align: right;
   @include nhsuk-font-size(19);
 }
-
-.app-special-appointment-banner__tag--no-details {
-  color: $nhsuk-secondary-text-color;
-}
-
-.app-special-appointment-banner__tag--temporary {
-  @extend .nhsuk-tag;
-  @extend .nhsuk-tag--white;
-  margin-top: nhsuk-spacing(2);
-}