Upgrade node to version 20

.github/workflows/pull-request.yml

@@ -10,6 +10,11 @@ jobs:
     steps:
     - uses: actions/checkout@v2
 
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 20
+        cache: 'npm'
+
     - name: Install dependencies
       run: npm install
 

.github/workflows/release.yml

@@ -15,9 +15,9 @@ jobs:
         with:
           persist-credentials: false
 
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 20
           registry-url: https://registry.npmjs.org/
 
       - name: Install dependencies

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.nvmrc

@@ -1 +1 @@
-16
+20

package.json

@@ -2,6 +2,9 @@
   "name": "nhsuk-frontend",
   "version": "8.2.0",
   "description": "NHS.UK frontend contains the code you need to start building user interfaces for NHS websites and services.",
+  "engines": {
+    "node": ">=20.0.0"
+  },
   "scripts": {
     "prepare": "gulp bundle",
     "build": "gulp build",
@@ -28,19 +31,19 @@
     "jest:ci": "jest"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.6",
-    "@babel/eslint-parser": "^7.18.9",
-    "@babel/preset-env": "^7.18.6",
-    "babel-loader": "^8.2.5",
-    "backstopjs": "^6.1.0",
-    "concurrently": "^7.2.2",
+    "@babel/core": "^7.24.7",
+    "@babel/eslint-parser": "^7.24.7",
+    "@babel/preset-env": "^7.24.7",
+    "babel-loader": "^9.1.3",
+    "backstopjs": "^6.3.23",
+    "concurrently": "^8.2.2",
     "eslint": "^8.19.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-postcss": "^4.0.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "follow-redirects": "^1.15.6",
-    "gulp": "^4.0.2",
+    "gulp": "^5.0.0",
     "gulp-clean": "^0.4.0",
     "gulp-clean-css": "^4.3.0",
     "gulp-connect": "^5.7.0",
@@ -50,21 +53,21 @@
     "gulp-uglify": "^3.0.2",
     "gulp-zip": "^5.1.0",
     "htmlhint": "^1.1.4",
-    "husky": "^8.0.1",
-    "jest": "^28.1.3",
-    "jest-environment-jsdom": "^28.1.3",
-    "jest-environment-puppeteer": "^7.0.0",
-    "minimist": "^1.2.6",
-    "nunjucks": "^3.2.3",
-    "prettier": "^2.7.1",
-    "puppeteer": "^18.1.0",
-    "sass": "^1.53.0",
-    "start-server-and-test": "^1.14.0",
+    "husky": "^9.0.11",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-environment-puppeteer": "^10.0.1",
+    "minimist": "^1.2.8",
+    "nunjucks": "^3.2.4",
+    "prettier": "^3.3.2",
+    "puppeteer": "^22.12.1",
+    "sass": "^1.77.6",
+    "start-server-and-test": "^2.0.4",
     "stylelint": "^13.13.1",
-    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-prettier": "^9.0.5",
     "stylelint-order": "^4.1.0",
-    "stylelint-scss": "^3.19.0",
-    "wait-on": "^6.0.1",
+    "stylelint-scss": "^3.21.0",
+    "wait-on": "^7.2.0",
     "webpack-stream": "^7.0.0"
   },
   "publishConfig": {

packages/components/footer/README.md

@@ -353,7 +353,7 @@ The footer Nunjucks macro takes the following arguments:
 | **linksColumn3**          | array  | No       | Array of third column of navigation items for use in the footer.                              |
 | **linksColumn3.[].url**   | string | No       | The href of a navigation item in the third column of the footer.                              |
 | **linksColumn3.[].label** | string | No       | The label of a navigation item in the third column of the footer.                             |
-| **copyright**             | string | No       | Optional text for the copyright notice in the footer. Defaults to '© NHS England'             |
+| **copyright**             | string | No       | Optional text for the copyright notice in the footer. Defaults to '© NHS England'            |
 | **classes**               | string | No       | Optional additional classes to add to the footer container. Separate each class with a space. |
 | **attributes**            | object | No       | Any extra HTML attributes (for example data attributes) to add to the footer container.       |
 | **copyright**             | string | No       | The label for the copyright notice in the footer.                                             |

packages/components/header/_header-organisation.scss

@@ -19,7 +19,8 @@
 
     &:focus {
       background: $nhsuk-focus-color;
-      box-shadow: 0 0 0 $nhsuk-focus-width $nhsuk-focus-color,
+      box-shadow:
+        0 0 0 $nhsuk-focus-width $nhsuk-focus-color,
         0 $nhsuk-focus-width 0 $nhsuk-focus-width $nhsuk-focus-text-color;
 
       .nhsuk-organisation-name,

packages/components/header/_header-service.scss

@@ -26,7 +26,8 @@
 
   &:focus {
     background: $nhsuk-focus-color;
-    box-shadow: 0 0 0 $nhsuk-focus-width $nhsuk-focus-color,
+    box-shadow:
+      0 0 0 $nhsuk-focus-width $nhsuk-focus-color,
       0 $nhsuk-focus-width 0 $nhsuk-focus-width $nhsuk-focus-text-color;
 
     .nhsuk-header__service-name {

packages/components/header/_header.scss

@@ -91,7 +91,8 @@
     box-shadow: none;
 
     .nhsuk-logo {
-      box-shadow: 0 0 0 $nhsuk-focus-width $nhsuk-focus-color,
+      box-shadow:
+        0 0 0 $nhsuk-focus-width $nhsuk-focus-color,
         0 $nhsuk-focus-width 0 $nhsuk-focus-width $nhsuk-focus-text-color;
     }
   }
@@ -278,7 +279,9 @@
 
     &:focus {
       background-color: $nhsuk-focus-color;
-      box-shadow: 0 -4px $nhsuk-focus-color, 0 $nhsuk-focus-width $nhsuk-focus-text-color;
+      box-shadow:
+        0 -4px $nhsuk-focus-color,
+        0 $nhsuk-focus-width $nhsuk-focus-text-color;
       outline: $nhsuk-focus-width solid transparent;
       outline-offset: $nhsuk-focus-width;
 
@@ -319,7 +322,9 @@
 
     &:focus {
       @include nhsuk-focused-button();
-      box-shadow: 0 -2px $nhsuk-focus-color, 0 $nhsuk-focus-width $nhsuk-focus-text-color;
+      box-shadow:
+        0 -2px $nhsuk-focus-color,
+        0 $nhsuk-focus-width $nhsuk-focus-text-color;
     }
 
     &:active {

packages/core/generic/_font-face.scss

@@ -21,7 +21,8 @@
       font-style: normal;
       font-weight: 400;
       src: nhsuk-font-url("FrutigerLTW01-55Roman.eot?#iefix");
-      src: nhsuk-font-url("FrutigerLTW01-55Roman.eot?#iefix") format("eot"),
+      src:
+        nhsuk-font-url("FrutigerLTW01-55Roman.eot?#iefix") format("eot"),
         nhsuk-font-url("FrutigerLTW01-55Roman.woff2") format("woff2"),
         nhsuk-font-url("FrutigerLTW01-55Roman.woff") format("woff"),
         nhsuk-font-url("FrutigerLTW01-55Roman.ttf") format("truetype"),
@@ -34,7 +35,8 @@
       font-style: normal;
       font-weight: $nhsuk-font-bold;
       src: nhsuk-font-url("FrutigerLTW01-65Bold.eot?#iefix");
-      src: nhsuk-font-url("FrutigerLTW01-65Bold.eot?#iefix") format("eot"),
+      src:
+        nhsuk-font-url("FrutigerLTW01-65Bold.eot?#iefix") format("eot"),
         nhsuk-font-url("FrutigerLTW01-65Bold.woff2") format("woff2"),
         nhsuk-font-url("FrutigerLTW01-65Bold.woff") format("woff"),
         nhsuk-font-url("FrutigerLTW01-65Bold.ttf") format("truetype"),

packages/core/tools/_focused.scss

@@ -11,7 +11,9 @@
 
 @mixin nhsuk-focused-text {
   background-color: $nhsuk-focus-color;
-  box-shadow: 0 -2px $nhsuk-focus-color, 0 $nhsuk-focus-width $nhsuk-focus-text-color;
+  box-shadow:
+    0 -2px $nhsuk-focus-color,
+    0 $nhsuk-focus-width $nhsuk-focus-text-color;
   color: $nhsuk-focus-text-color;
   // When colours are overridden, for example when users have a dark mode,
   // backgrounds and box-shadows disappear, so we need to ensure there's a

tests/backstop/backstop.js

@@ -7,7 +7,7 @@ module.exports = {
   debug: false,
   debugWindow: false,
   dockerCommandTemplate: 'docker run --rm --network=host --mount type=bind,source="{cwd}",target=/src backstopjs/backstopjs:{version} {backstopCommand} {args}',
-  engine: 'puppeteer',
+  engine: 'playwright',
   engineOptions: {
     args: ['--no-sandbox'],
   },

tests/backstop/engine_scripts/puppet/clickAndHoverHelper.js

@@ -6,24 +6,24 @@ module.exports = async (page, scenario) => {
 
   if (hoverSelector) {
     for (const hoverSelectorIndex of [].concat(hoverSelector)) {
-      await page.waitFor(hoverSelectorIndex);
+      await page.waitForSelector(hoverSelectorIndex);
       await page.hover(hoverSelectorIndex);
     }
   }
 
   if (clickSelector) {
     for (const clickSelectorIndex of [].concat(clickSelector)) {
-      await page.waitFor(clickSelectorIndex);
+      await page.waitForSelector(clickSelectorIndex);
       await page.click(clickSelectorIndex);
     }
   }
 
   if (postInteractionWait) {
-    await page.waitFor(postInteractionWait);
+    await page.waitForSelector(postInteractionWait);
   }
 
   if (scrollToSelector) {
-    await page.waitFor(scrollToSelector);
+    await page.waitForSelector(scrollToSelector);
     await page.evaluate(scrollToSelector => {
       document.querySelector(scrollToSelector).scrollIntoView();
     }, scrollToSelector);

tests/integration/puppeteer/tabs.test.js

@@ -1,5 +1,5 @@
-import puppeteer from 'puppeteer'
-const iPhone = puppeteer.devices['iPhone 6']
+import puppeteer, { KnownDevices } from 'puppeteer'
+const iPhone = KnownDevices['iPhone 6']
 
 describe('Tabs', () => {
   let page