From eeab2d31b76ac54d965bc995853e23e822e41513 Mon Sep 17 00:00:00 2001
From: Guilhem Forey <guilhem.forey@digital.cabinet-office.gov.uk>
Date: Wed, 10 Jan 2024 14:02:52 +0000
Subject: [PATCH 1/4] chore: upgrade govuk frontend to v5.0 and improve public
 assets setup

---
 package-lock.json                          | 14 +++++++-------
 package.json                               |  6 +++---
 scripts/install-accessible-autocomplete.sh | 10 ++++++++++
 scripts/install-govuk-frontend.sh          | 22 ++++++++++++++++++++++
 src/backend/app.ts                         |  2 +-
 src/backend/views/layouts/main.njk         | 13 +++++++------
 src/backend/views/search.njk               |  2 +-
 src/frontend/scss/main.scss                | 22 +++++++++++-----------
 webpack.config.js                          |  4 ++--
 9 files changed, 64 insertions(+), 31 deletions(-)
 create mode 100644 scripts/install-accessible-autocomplete.sh
 create mode 100644 scripts/install-govuk-frontend.sh

diff --git a/package-lock.json b/package-lock.json
index 2adcc862..a42161c5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,7 +26,7 @@
         "express-session": "^1.18.2",
         "google-libphonenumber": "^3.2.33",
         "got": "^12.5.0",
-        "govuk-frontend": "^4.7.0",
+        "govuk-frontend": "^5.0.0",
         "ioredis": "^5.3.2",
         "nunjucks": "^3.2.4",
         "passport": "^0.6.0",
@@ -6372,9 +6372,9 @@
       }
     },
     "node_modules/govuk-frontend": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-4.7.0.tgz",
-      "integrity": "sha512-0OsdCusF5qvLWwKziU8zqxiC0nq6WP0ZQuw51ymZ/1V0tO71oIKMlSLN2S9bm8RcEGSoidPt2A34gKxePrLjvg==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-5.0.0.tgz",
+      "integrity": "sha512-3WSfvQ+3kw/q/m8jrq/t8XnMUA8D2r0uhGyZaDbIh1gWTJBQzJBHbHiKYI9nc9ixIXdCFsc9RozkgEm57a795g==",
       "engines": {
         "node": ">= 4.2.0"
       }
@@ -17062,9 +17062,9 @@
       }
     },
     "govuk-frontend": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-4.7.0.tgz",
-      "integrity": "sha512-0OsdCusF5qvLWwKziU8zqxiC0nq6WP0ZQuw51ymZ/1V0tO71oIKMlSLN2S9bm8RcEGSoidPt2A34gKxePrLjvg=="
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-5.0.0.tgz",
+      "integrity": "sha512-3WSfvQ+3kw/q/m8jrq/t8XnMUA8D2r0uhGyZaDbIh1gWTJBQzJBHbHiKYI9nc9ixIXdCFsc9RozkgEm57a795g=="
     },
     "graceful-fs": {
       "version": "4.2.11",
diff --git a/package.json b/package.json
index 14fb3ac9..eaac53e4 100644
--- a/package.json
+++ b/package.json
@@ -8,11 +8,11 @@
     "dev": "npm run copy-assets && nodemon src/backend/server.ts --ignore src/frontend",
     "local": "env $(cat .env-signon-mock|xargs) npm run start",
     "clean-build": "rm -rf dist public && npm run build",
-    "build": "npm run build-frontend && npm run copy-assets && npm run build-app",
+    "build": "npm run copy-assets && npm run build-frontend && npm run build-app",
     "postbuild": "mv dist/src/* dist/ && cp -r src/backend/views dist/backend/views",
     "build-app": "tsc",
     "build-frontend": "webpack",
-    "copy-assets": "cp -r ./node_modules/govuk-frontend/govuk/assets ./public/assets && cp ./node_modules/govuk-frontend/govuk/all.js ./public/assets/all.js && cp ./node_modules/accessible-autocomplete/dist/accessible-autocomplete.min.js ./public/assets/accessible-autocomplete.min.js && cp ./node_modules/accessible-autocomplete/dist/accessible-autocomplete.min.css ./public/assets/aaccessible-autocomplete.min.css && cp ./node_modules/accessible-autocomplete/dist/accessible-autocomplete.min.js.map ./public/assets/accessible-autocomplete.min.js.map && cp ./node_modules/govuk-frontend/govuk/all.js.map ./public/assets/all.js.map",
+    "copy-assets": "sh scripts/install-govuk-frontend.sh && sh scripts/install-accessible-autocomplete.sh",
     "test": "jest --watchAll --coverage --verbose --detectOpenHandles",
     "test-ci": "jest --coverage --coverageReporters=json --verbose --detectOpenHandles --colors",
     "lint": "eslint './**/*.{ts,tsx}' --fix",
@@ -51,7 +51,7 @@
     "express-session": "^1.18.2",
     "google-libphonenumber": "^3.2.33",
     "got": "^12.5.0",
-    "govuk-frontend": "^4.7.0",
+    "govuk-frontend": "^5.0.0",
     "ioredis": "^5.3.2",
     "nunjucks": "^3.2.4",
     "passport": "^0.6.0",
diff --git a/scripts/install-accessible-autocomplete.sh b/scripts/install-accessible-autocomplete.sh
new file mode 100644
index 00000000..8f4b30ac
--- /dev/null
+++ b/scripts/install-accessible-autocomplete.sh
@@ -0,0 +1,10 @@
+#!/bin/bash
+
+# CSS
+mkdir -p public/stylesheets
+cp ./node_modules/accessible-autocomplete/dist/accessible-autocomplete.min.css ./public/stylesheets/accessible-autocomplete.min.css
+
+# JS
+mkdir -p public/javascripts
+cp ./node_modules/accessible-autocomplete/dist/accessible-autocomplete.min.js ./public/javascripts/accessible-autocomplete.min.js
+cp ./node_modules/accessible-autocomplete/dist/accessible-autocomplete.min.js.map ./public/javascripts/accessible-autocomplete.min.js.map
diff --git a/scripts/install-govuk-frontend.sh b/scripts/install-govuk-frontend.sh
new file mode 100644
index 00000000..7b7e5e4a
--- /dev/null
+++ b/scripts/install-govuk-frontend.sh
@@ -0,0 +1,22 @@
+#!/bin/bash
+
+# CSS
+mkdir -p public/stylesheets
+cp ./node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.css public/stylesheets/govuk-frontend.min.css
+
+# Images
+mkdir -p public/assets
+cp -r ./node_modules/govuk-frontend/dist/govuk/assets/images public/assets/images
+
+# Fonts
+mkdir -p public/assets
+cp -r ./node_modules/govuk-frontend/dist/govuk/assets/fonts public/assets/
+
+# Manifest
+mkdir -p public/assets
+cp ./node_modules/govuk-frontend/dist/govuk/assets/manifest.json public/assets
+
+# JS
+mkdir -p ./public/javascripts
+cp ./node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.js ./public/javascripts/govuk-frontend.min.js
+cp ./node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.js.map ./public/javascripts/govuk-frontend.min.js.map
diff --git a/src/backend/app.ts b/src/backend/app.ts
index afdea322..b0484ced 100644
--- a/src/backend/app.ts
+++ b/src/backend/app.ts
@@ -98,7 +98,7 @@ class App {
 
   private initializeRenderEngine() {
     const views = [
-      path.join(__dirname, '../../node_modules/govuk-frontend'),
+      path.join(__dirname, '../../node_modules/govuk-frontend/dist'),
       path.join(__dirname, './views'),
     ]
 
diff --git a/src/backend/views/layouts/main.njk b/src/backend/views/layouts/main.njk
index 26448a31..01bd77cc 100644
--- a/src/backend/views/layouts/main.njk
+++ b/src/backend/views/layouts/main.njk
@@ -27,8 +27,8 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
 <script src="https://cdn.jsdelivr.net/npm/ag-grid-community@31.3.2/dist/ag-grid-community.min.js" integrity="sha256-ULzU4/8xnTp9F6pbUw2GByUtsteCMTKi2W0+QNGuzwA=" crossorigin="anonymous"></script>
 
 <!--[if !IE 8]><!-->
-<link href="/main.css" rel="stylesheet" />
-<link href="/assets/aaccessible-autocomplete.min.css" rel="stylesheet">
+<link href="/stylesheets/main.css" rel="stylesheet" />
+<link href="/stylesheets/accessible-autocomplete.min.css" rel="stylesheet">
 <!--<![endif]-->
 
 <!--[if IE 8]>
@@ -95,11 +95,12 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
 {% endblock %}
 {% block bodyEnd %}
   {% block scripts %}
-  <script src="/assets/all.js"></script>
-  <script src="/assets/accessible-autocomplete.min.js"></script>
-  <script>
+  <script type="module" src="/javascripts/govuk-frontend.min.js"></script>
+  <script src="/javascripts/accessible-autocomplete.min.js"></script>
+  <script type="module">
+    import { initAll } from '/javascripts/govuk-frontend.min.js'
     window.havePostScriptsRun = false;
-    window.GOVUKFrontend.initAll();
+    initAll()
   </script>
 
     {% block pageScripts %}{% endblock %}
diff --git a/src/backend/views/search.njk b/src/backend/views/search.njk
index 1d223d3c..4fa2548f 100644
--- a/src/backend/views/search.njk
+++ b/src/backend/views/search.njk
@@ -31,5 +31,5 @@
 {% endblock %}
 
 {% block pageScripts %}
-  <script type="module" src="/main.js"></script>
+  <script type="module" src="/javascripts/main.js"></script>
 {% endblock %}
diff --git a/src/frontend/scss/main.scss b/src/frontend/scss/main.scss
index 6b93c712..02cd38d6 100644
--- a/src/frontend/scss/main.scss
+++ b/src/frontend/scss/main.scss
@@ -1,4 +1,4 @@
-@import '../../../node_modules/govuk-frontend/govuk/all';
+@import '~govuk-frontend/dist/govuk/all';
 @import './app-masthead';
 @import './grid.scss';
 
@@ -283,16 +283,16 @@ h2:focus-visible {
     color: $govuk-inverse-button-text-colour;
   }
 
-  // alphagov/govuk_template includes a specific a:link:focus selector
-  // designed to make unvisited links a slightly darker blue when focussed, so
-  // we need to override the text colour for that combination of selectors so
-  // so that unvisited links styled as buttons do not end up with dark blue
-  // text when focussed.
-  @include _govuk-compatibility(govuk_template) {
-    &:link:focus {
-      color: $govuk-inverse-button-text-colour;
-    }
-  }
+  // // alphagov/govuk_template includes a specific a:link:focus selector
+  // // designed to make unvisited links a slightly darker blue when focussed, so
+  // // we need to override the text colour for that combination of selectors so
+  // // so that unvisited links styled as buttons do not end up with dark blue
+  // // text when focussed.
+  // @include _govuk-compatibility(govuk_template) {
+  //   &:link:focus {
+  //     color: $govuk-inverse-button-text-colour;
+  //   }
+  // }
 
   &:hover {
     background-color: $govuk-inverse-button-hover-colour;
diff --git a/webpack.config.js b/webpack.config.js
index bff6d7fd..624dd80d 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -36,14 +36,14 @@ module.exports = (env) => ({
     extensions: ['.tsx', '.ts', '.js'],
   },
   output: {
-    filename: '[name].js',
+    filename: 'javascripts/[name].js',
     path: path.resolve(__dirname, 'public'),
   },
   plugins: [
     env?.enableHMR
       ? new webpack.HotModuleReplacementPlugin()
       : new MiniCssExtractPlugin({
-          filename: '[name].css',
+          filename: 'stylesheets/[name].css',
         }),
     new webpack.DefinePlugin({
       buildConfig: {

From c768a11e954385952193e5d05a5c93780bd68103 Mon Sep 17 00:00:00 2001
From: Guilhem Forey <guilhem.forey@hotmail.fr>
Date: Wed, 24 Jan 2024 10:39:16 +0000
Subject: [PATCH 2/4] fix: remove unnecessary comment

---
 src/frontend/scss/main.scss | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/frontend/scss/main.scss b/src/frontend/scss/main.scss
index 02cd38d6..303d9c2d 100644
--- a/src/frontend/scss/main.scss
+++ b/src/frontend/scss/main.scss
@@ -283,16 +283,16 @@ h2:focus-visible {
     color: $govuk-inverse-button-text-colour;
   }
 
-  // // alphagov/govuk_template includes a specific a:link:focus selector
-  // // designed to make unvisited links a slightly darker blue when focussed, so
-  // // we need to override the text colour for that combination of selectors so
-  // // so that unvisited links styled as buttons do not end up with dark blue
-  // // text when focussed.
-  // @include _govuk-compatibility(govuk_template) {
-  //   &:link:focus {
-  //     color: $govuk-inverse-button-text-colour;
-  //   }
-  // }
+  // alphagov/govuk_template includes a specific a:link:focus selector
+  // designed to make unvisited links a slightly darker blue when focussed, so
+  // we need to override the text colour for that combination of selectors so
+  // so that unvisited links styled as buttons do not end up with dark blue
+  // text when focussed.
+  @include _govuk-compatibility(govuk_template) {
+    &:link:focus {
+      color: $govuk-inverse-button-text-colour;
+    }
+  }
 
   &:hover {
     background-color: $govuk-inverse-button-hover-colour;

From 58f64eae8bc876cdc169ca319630bfb4e0cb9343 Mon Sep 17 00:00:00 2001
From: Guilhem Forey <guilhem.forey@hotmail.fr>
Date: Thu, 25 Jan 2024 11:14:32 +0000
Subject: [PATCH 3/4] fix: remove outdated mixin

---
 src/frontend/scss/main.scss | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/src/frontend/scss/main.scss b/src/frontend/scss/main.scss
index 303d9c2d..0a3ab4a8 100644
--- a/src/frontend/scss/main.scss
+++ b/src/frontend/scss/main.scss
@@ -283,17 +283,6 @@ h2:focus-visible {
     color: $govuk-inverse-button-text-colour;
   }
 
-  // alphagov/govuk_template includes a specific a:link:focus selector
-  // designed to make unvisited links a slightly darker blue when focussed, so
-  // we need to override the text colour for that combination of selectors so
-  // so that unvisited links styled as buttons do not end up with dark blue
-  // text when focussed.
-  @include _govuk-compatibility(govuk_template) {
-    &:link:focus {
-      color: $govuk-inverse-button-text-colour;
-    }
-  }
-
   &:hover {
     background-color: $govuk-inverse-button-hover-colour;
 

From aebe99517d5430ae1312d0dc9766b5ba081529a2 Mon Sep 17 00:00:00 2001
From: Aaron Fowles <aaron.fowles@digital.cabinet-office.gov.uk>
Date: Thu, 22 Jan 2026 12:41:57 +0000
Subject: [PATCH 4/4] chore: upgrade govuk frontend to v5.14

---
 package-lock.json                  | 15 ++++++++-------
 package.json                       |  2 +-
 src/backend/views/layouts/main.njk |  2 +-
 src/frontend/scss/main.scss        |  2 +-
 webpack.config.js                  |  5 +++++
 5 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a42161c5..f59bc815 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,7 +26,7 @@
         "express-session": "^1.18.2",
         "google-libphonenumber": "^3.2.33",
         "got": "^12.5.0",
-        "govuk-frontend": "^5.0.0",
+        "govuk-frontend": "^5.14.0",
         "ioredis": "^5.3.2",
         "nunjucks": "^3.2.4",
         "passport": "^0.6.0",
@@ -6372,9 +6372,10 @@
       }
     },
     "node_modules/govuk-frontend": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-5.0.0.tgz",
-      "integrity": "sha512-3WSfvQ+3kw/q/m8jrq/t8XnMUA8D2r0uhGyZaDbIh1gWTJBQzJBHbHiKYI9nc9ixIXdCFsc9RozkgEm57a795g==",
+      "version": "5.14.0",
+      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-5.14.0.tgz",
+      "integrity": "sha512-MgfaXswIM6KpXS2T5gltEnzgVLgfM3UoE9+rYkhBiR0suaJ8Let31VZXQZqz9QhiPDbv28fW1nRjIyLujfZIBA==",
+      "license": "MIT",
       "engines": {
         "node": ">= 4.2.0"
       }
@@ -17062,9 +17063,9 @@
       }
     },
     "govuk-frontend": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-5.0.0.tgz",
-      "integrity": "sha512-3WSfvQ+3kw/q/m8jrq/t8XnMUA8D2r0uhGyZaDbIh1gWTJBQzJBHbHiKYI9nc9ixIXdCFsc9RozkgEm57a795g=="
+      "version": "5.14.0",
+      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-5.14.0.tgz",
+      "integrity": "sha512-MgfaXswIM6KpXS2T5gltEnzgVLgfM3UoE9+rYkhBiR0suaJ8Let31VZXQZqz9QhiPDbv28fW1nRjIyLujfZIBA=="
     },
     "graceful-fs": {
       "version": "4.2.11",
diff --git a/package.json b/package.json
index eaac53e4..fc3a3cf3 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,7 @@
     "express-session": "^1.18.2",
     "google-libphonenumber": "^3.2.33",
     "got": "^12.5.0",
-    "govuk-frontend": "^5.0.0",
+    "govuk-frontend": "^5.14.0",
     "ioredis": "^5.3.2",
     "nunjucks": "^3.2.4",
     "passport": "^0.6.0",
diff --git a/src/backend/views/layouts/main.njk b/src/backend/views/layouts/main.njk
index 01bd77cc..5a00f7d8 100644
--- a/src/backend/views/layouts/main.njk
+++ b/src/backend/views/layouts/main.njk
@@ -68,7 +68,7 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
 {% block main %}
   <div class="govuk-width-container {{ containerClasses }}">
     {% block beforeContent %}{% endblock %}
-    <main class="govuk-main-wrapper {{ mainClasses }}" role="main"{% if mainLang %} lang="{{ mainLang }}"{% endif %}>
+    <main class="govuk-main-wrapper {{ mainClasses }}" id="main-content" role="main"{% if mainLang %} lang="{{ mainLang }}"{% endif %}>
       {% if hideFeedbackSurvey === true %}
       {% include "../partials/phaseBanner.njk" %}
       {% else %}
diff --git a/src/frontend/scss/main.scss b/src/frontend/scss/main.scss
index 0a3ab4a8..299f5e27 100644
--- a/src/frontend/scss/main.scss
+++ b/src/frontend/scss/main.scss
@@ -1,4 +1,4 @@
-@import '~govuk-frontend/dist/govuk/all';
+@import '~govuk-frontend/dist/govuk/index';
 @import './app-masthead';
 @import './grid.scss';
 
diff --git a/webpack.config.js b/webpack.config.js
index 624dd80d..925b70d9 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -27,6 +27,11 @@ module.exports = (env) => ({
           },
           {
             loader: 'sass-loader',
+            options: {
+              sassOptions: {
+                quietDeps: true,
+              },
+            },
           },
         ],
       },