hof 23.0.0-frontend-v4-beta.14 → 24.0.0-vite-beta.2

package/CHANGELOG.md

@@ -1,17 +1,3 @@
-## 2025-10-25, Version 23.0.0 (Stable), @Rhodine-orleans-lindsay
-### Changed
-- Updated cookie banner view to follow GOV.UK design system. Updated cookieSettings.js to allow for different confirmation text based on whether cookies were accepted or rejected
-- Added inputmode='numeric' to date component
-- Added span for checkbox error messages
-- Updated imported javascript
-- Added data-module attribute for govuk-skip-link for screen readers
-- Removed aria-polite=live for character-count and removed pattern attribute for date input
-- Replaced deprecated govuk-header__link--service-name with govuk-header__service-name
-- Added a modifier for phone text input styles that accept sequences of digits
-- Added govuk-template--rebranded class to govuk template html to enable govuk rebrand styles:
-  - Updated header and footer to follow GOV.UK design system as part of rebrand
-  * ⛓️‍💥 **BREAKING CHANGE** : files and folders in a project's `assets` folder will need to be moved to a `assets/rebrand` folder. Add a `rebrand` folder to the `assets` folder. e.g. `assets/images` will need to be moved to `assets/rebrand/images`. 
-
 ## 2025-10-10, Version 22.10.4 (Stable), @dk4g
 ### Security
 - Upgraded axios version to address a security vulnerability

package/build/tasks/images/index.js

@@ -10,27 +10,12 @@ module.exports = config => {
   if (!config.images) {
     return Promise.resolve();
   }
-  const imagesOutput = config.images.out;
 
-  // Due to govuk rebrand logo, images are copied from multiple sources & mapping can cause 'File exists' error.
-  // Remove if exists as a file
-  if (fs.existsSync(imagesOutput) && !fs.lstatSync(imagesOutput).isDirectory()) {
-    fs.unlinkSync(imagesOutput);
-  }
-  // Ensure directory exists
-  if (!fs.existsSync(imagesOutput)) {
-    fs.mkdirSync(imagesOutput, { recursive: true });
-  }
-  const srcs = Array.isArray(config.images.src) ? config.images.src : [config.images.src];
-
-  return Promise.all(srcs.map(src => {
-    if (!fs.existsSync(src)) {
-      console.log(`${chalk.yellow('warning')}: Skipping missing images folder: ${src}`);
-      return Promise.resolve();
-    }
-    return mkdir(imagesOutput)
-      .then(() => spawn('cp', ['-r', `${src}/.`, imagesOutput]));
-  }))
+  return new Promise((resolve, reject) => {
+    fs.stat(config.images.src, err => err ? reject(err) : resolve());
+  })
+    .then(() => mkdir(config.images.out))
+    .then(() => spawn('cp', ['-r', config.images.src, config.images.out]))
     .catch(e => {
       if (e.code !== 'ENOENT') {
         throw e;

package/build/tasks/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
 module.exports = {
-  browserify: require('./browserify'),
+  vite: require('./vite'),
   sass: require('./sass'),
   translate: require('./translate'),
   images: require('./images')

package/build/tasks/vite/index.js

@@ -0,0 +1,40 @@
+/* eslint-disable no-console */
+'use strict';
+
+const vite = require('vite');
+const path = require('path');
+const viteConfig = path.resolve(__dirname, './vite.config.js');
+const hofDefaults = require('../../../config/hof-defaults');
+module.exports = config => {
+// The config.production’s value is set up with a command flag
+//  in the package.json’s script. process.env.NODE_ENV);
+  console.log('Vite build - production:', config.production, 'env: ',config.env);
+  console.log('hofDefaults:', hofDefaults);
+  
+  // if (config.production === true) {
+  //   return vite.build({
+  //     configFile: viteConfig
+  //   });
+  // }
+  // process.env.NODE_ENV = 'development'; // TO DO make this dynamic to Ensure
+  // // the environment is set to development for non-production build
+  // return vite.build({
+  //   configFile: viteConfig,
+  //   mode: 'development'
+  // });
+  process.env.NODE_ENV = hofDefaults.env;
+ 
+if(!config.production){
+  console.log('Vite build - expecting development/local:', process.env.NODE_ENV);
+  return vite.build({
+  configFile: viteConfig,
+  mode: 'development'
+  });
+} else{
+  console.log('Vite build - expecting production:', process.env.NODE_ENV);
+  return vite.build({
+  configFile: viteConfig
+  });
+ }
+}
+module.exports.task = 'vite';

package/build/tasks/vite/vite.config.js

@@ -0,0 +1,53 @@
+/* eslint-disable no-console */
+'use strict';
+
+import { defineConfig } from 'vite';
+import {resolve} from 'path';
+const __dirname = import.meta.dirname;
+
+export default defineConfig({
+  root: '../../../frontend',
+  build: {
+    outDir: '../public/assets',
+    emptyOutDir: true,
+    rollupOptions: {
+      input: {
+        index: resolve(__dirname, '../../../../hof/frontend/themes/gov-uk/client-js/index.js'),
+        styles: resolve(__dirname, '../../../../hof/frontend/themes/gov-uk/styles/govuk.scss')
+      }
+    },
+    css: {
+      preprocessorOptions: {
+        scss: {
+          includes: ['node_modules']
+        }
+      }
+    }
+  },
+  // Custom plugin to suppress specific resolve warnings.
+  // Vite does not process and optimise static images and assets files, it uses a src/ folder.
+  // the images and assets folders are therefore loaded at runtime from the public/ folder.
+  // This should be resolved with the v5/nunjucks work so we can ignore these warnings for now.
+  // TO DO: Remove this when v5/nunjucks is implemented.
+  plugins: [
+    {
+      name: 'suppress-resolve-warnings',
+      apply: 'build',
+      configResolved() {
+        // Intercept all console warnings printed during build
+        const originalWarning = console.warn;
+        console.warn = (...args) => {
+          if (
+            args.some(arg =>
+              typeof arg === 'string' &&
+              arg.includes("didn't resolve at build time")
+            )
+          ) {
+            return; // skip this specific warning
+          }
+          originalWarning(...args);
+        };
+      }
+    }
+  ]
+});

package/build/tasks/watch/index.js

@@ -32,14 +32,7 @@ module.exports = config => {
   }, {});
 
   function triggersTask(file) {
-    return Object.keys(matchers).filter(key => {
-      const pattern = matchers[key];
-      // Only call minimatch if pattern is a non-empty string or array of strings
-      if (Array.isArray(pattern)) {
-        return pattern.some(p => typeof p === 'string' && p.length > 0 && match(file, p));
-      }
-      return typeof pattern === 'string' && pattern.length > 0 && match(file, pattern);
-    });
+    return Object.keys(matchers).filter(key => match(file, matchers[key]));
   }
 
   function restart() {
@@ -101,7 +94,7 @@ module.exports = config => {
     process.stdin.setEncoding('utf8');
     process.stdin.on('data', data => {
       const dataType = (data + '').trim().toLowerCase();
-      if (dataType === config.watch.restart) {
+      if (dataType  === config.watch.restart) {
         restart();
       }
     });

package/components/date/templates/date.html

@@ -6,7 +6,7 @@
     {{#isPageHeading}}</h1>{{/isPageHeading}}
   </legend>
     {{#hint}}
-      <div id="{{key}}-hint" class="govuk-hint">{{{hint}}}</div>
+      <span id="{{key}}-hint" class="govuk-hint">{{{hint}}}</span>
     {{/hint}}
     {{#error}}
       <p id="{{key}}-error" class="govuk-error-message">

package/components/emailer/emailer.js

@@ -34,17 +34,17 @@ module.exports = class Emailer {
         html: body,
         attachments: [{
           filename: 'govuk_logotype_email.png',
-          path: path.resolve(__dirname, './assets/rebrand/images/govuk_logotype_email.png'),
+          path: path.resolve(__dirname, './assets/images/govuk_logotype_email.png'),
           cid: 'govuk_logotype_email'
         },
         {
           filename: 'ho_crest_27px.png',
-          path: path.resolve(__dirname, './assets/rebrand/images/ho_crest_27px.png'),
+          path: path.resolve(__dirname, './assets/images/ho_crest_27px.png'),
           cid: 'ho_crest_27px'
         },
         {
           filename: 'spacer.gif',
-          path: path.resolve(__dirname, './assets/rebrand/images/spacer.gif'),
+          path: path.resolve(__dirname, './assets/images/spacer.gif'),
           cid: 'spacer_image'
         }]
       }, (err, result) => err ? reject(err) : resolve(result));

package/config/builder-defaults.js

@@ -1,22 +1,10 @@
 'use strict';
-const toolkitImages =
-  process.env.HOF_SANDBOX === 'true'
-    ? '../frontend/toolkit/assets/rebrand/images'
-    : 'node_modules/hof/frontend/toolkit/assets/rebrand/images';
 
 module.exports = {
-  browserify: {
-    src: 'assets/rebrand/js/index.js',
-    out: 'public/js/bundle.js',
-    match: 'assets/rebrand/js/**/*.js',
-    restart: false,
-    compress: false,
-    debug: false
-  },
   sass: {
-    src: 'assets/rebrand/scss/app.scss',
+    src: 'assets/scss/app.scss',
     out: 'public/css/app.css',
-    match: 'assets/rebrand/scss/**/*.scss',
+    match: 'assets/scss/**/*.scss',
     restart: false,
     quietDeps: false,
     outputStyle: 'expanded',
@@ -28,9 +16,9 @@ module.exports = {
     shared: 'apps/common/translations/src'
   },
   images: {
-    src: ['assets/rebrand/images', toolkitImages],
-    out: 'public/images',
-    match: ['assets/rebrand/images/**/*', `${toolkitImages}/**/*`],
+    src: 'assets/images',
+    out: 'public',
+    match: 'assets/images/**/*',
     restart: false
   },
   server: {

package/frontend/govuk-template/build/config.js

@@ -3,7 +3,6 @@
 module.exports = {
   htmlLang: '{{htmlLang}}',
   assetPath: '{{govukAssetPath}}',
-  assetRebrandPath: '{{govukAssetPath}}rebrand/',
   afterHeader: '{{$afterHeader}}{{/afterHeader}}',
   bodyClasses: '{{$bodyClasses}}{{/bodyClasses}}',
   bodyStart: '{{$bodyStart}}{{/bodyStart}}',

package/frontend/govuk-template/build/govuk_template.html

@@ -1,24 +1,31 @@
 
 <!DOCTYPE html>
 <!--[if lt IE 9]><html class="lte-ie8" lang="{{ htmlLang }}"><![endif]-->
-<!--[if gt IE 8]><!--><html lang="{{ htmlLang }}" class="govuk-template--rebranded"><!--<![endif]-->
+<!--[if gt IE 8]><!--><html lang="{{ htmlLang }}" class="govuk-template"><!--<![endif]-->
   <head>
     <meta charset="utf-8" />
     <title>{{ pageTitle }}</title>
     {{{ head }}}
 
-<meta name="theme-color" content="#1d70b8">
-<meta http-equiv="X-UA-Compatible" content="IE=edge">
-<link rel="icon" sizes="48x48" href="{{assetRebrandPath}}images/favicon.ico">
-<link rel="icon" sizes="any" href="{{assetRebrandPath}}images/favicon.svg" type="image/svg+xml">
-<link rel="mask-icon" href="{{assetRebrandPath}}images/govuk-icon-mask.svg" color="#1d70b8">
-<link rel="apple-touch-icon" href="{{assetRebrandPath}}images/govuk-icon-180.png">
-<link rel="manifest" href="{{assetRebrandPath}}manifest.json">
-<meta property="og:image" content="{{assetRebrandPath}}images/govuk-opengraph-image.png">
+    <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{{assetPath}}images/favicon.ico" type="image/x-icon">
+      <link rel="mask-icon" href="{{assetPath}}images/govuk-mask-icon.svg" color="#0b0c0c">
+      <link rel="apple-touch-icon" sizes="180x180" href="{{assetPath}}images/govuk-apple-touch-icon-180x180.png">
+      <link rel="apple-touch-icon" sizes="167x167" href="{{assetPath}}images/govuk-apple-touch-icon-167x167.png">
+      <link rel="apple-touch-icon" sizes="152x152" href="{{assetPath}}images/govuk-apple-touch-icon-152x152.png">
+      <link rel="apple-touch-icon" href="{{assetPath}}images/govuk-apple-touch-icon.png">
+
+
+    <meta name="theme-color" content="#0b0c0c" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+
+    <meta property="og:image" content="{{assetPath}}images/opengraph-image.png">
   </head>
 
   <body class="{{ bodyClasses }} govuk-template__body  js-enabled" >
-    <script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
+    <script>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
+
 
 
     <div id="global-cookie-message" class="gem-c-cookie-banner govuk-clearfix" data-module="cookie-banner" role="region" aria-label="cookie banner" data-nosnippet="">
@@ -32,13 +39,19 @@
 
           <div class="govuk-header__logo">
             <a href="{{{ homepageUrl }}}" title="{{ logoLinkTitle }}" id="logo" class="govuk-header__link govuk-header__link--homepage" target="_blank" data-module="track-click" data-track-category="homeLinkClicked" data-track-action="homeHeader">
-                <!--[if gt IE 8]><!-->
-                <div id="govuk-header__logo"></div>
-                <img src="/public/images/govuk-logo.svg" id="govuk-header__logo" alt="Logo" loading="lazy" />
-                  <!--<![endif]-->
-                  <!--[if IE 8]>
-                  <img src="{{ assetRebrandPath }}images/govuk-logotype-tudor-crown.png" class="govuk-header__logotype-crown-fallback-image" width="32" height="30" alt="">
-                  <![endif]-->
+			<span class="govuk-header__logotype">
+				<!--[if gt IE 8]><!-->
+          <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg\" viewBox="0 0 32 30" height="30" width="32">
+            <path fill="currentColor" fill-rule="evenodd"    d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8"></path>
+          </svg>
+          <!--<![endif]-->
+          <!--[if IE 8]>
+          <img src="{{ assetPath }}images/govuk-logotype-tudor-crown.png" class="govuk-header__logotype-crown-fallback-image" width="32" height="30" alt="">
+          <![endif]-->
+			</span>
+				<span class="govuk-header__logotype-text">
+				  {{{ globalHeaderText }}}
+				</span>
             </a>
           </div>
           {{{ insideHeader }}}
@@ -53,54 +66,25 @@
 
     {{{ content }}}
 
-    <footer class="govuk-footer">
+    <footer class="govuk-footer" id="footer" role="contentinfo">
+
       <div class="govuk-width-container">
-        <svg
-          focusable="false"
-          role="presentation"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 64 60"
-          height="30"
-          width="32"
-          fill="currentcolor" class="govuk-footer__crown">
-          <g>
-            <circle cx="20" cy="17.6" r="3.7" />
-            <circle cx="10.2" cy="23.5" r="3.7" />
-            <circle cx="3.7" cy="33.2" r="3.7" />
-            <circle cx="31.7" cy="30.6" r="3.7" />
-            <circle cx="43.3" cy="17.6" r="3.7" />
-            <circle cx="53.2" cy="23.5" r="3.7" />
-            <circle cx="59.7" cy="33.2" r="3.7" />
-            <circle cx="31.7" cy="30.6" r="3.7" />
-            <path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z" />
-          </g>
-        </svg>
+        {{{ footerTop }}}
+
         <div class="govuk-footer__meta">
           <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
-            <h2 class="govuk-visually-hidden">Support links</h2>
+		        <h2 class="govuk-visually-hidden">Support links</h2>
             {{{ footerSupportLinks }}}
-            <svg
-              aria-hidden="true"
-              focusable="false"
-              class="govuk-footer__licence-logo"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 483.2 195.7"
-              height="17"
-              width="41">
-              <path
-                fill="currentColor"
-                d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" />
+
+			      <svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 483.2 195.7" height="17" width="41">
+                <path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"></path>
             </svg>
-            <span class="govuk-footer__licence-description">
-                {{{ licenceMessage }}}
-            </span>
+
+			      <span class="govuk-footer__licence-description">{{{ licenceMessage }}}</span>
           </div>
+
           <div class="govuk-footer__meta-item">
-            <a
-              class="govuk-footer__link govuk-footer__copyright-logo"
-              href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">
-              {{{ crownCopyrightMessage }}}
-            </a>
+            <a class="govuk-footer__link govuk-footer__copyright-logo" id="copyright-logo" target="_blank" href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">{{{ crownCopyrightMessage }}}</a>
           </div>
         </div>
       </div>

package/frontend/govuk-template/govuk_template_generated.html

@@ -1,24 +1,31 @@
 
 <!DOCTYPE html>
 <!--[if lt IE 9]><html class="lte-ie8" lang="{{htmlLang}}"><![endif]-->
-<!--[if gt IE 8]><!--><html lang="{{htmlLang}}" class="govuk-template--rebranded"><!--<![endif]-->
+<!--[if gt IE 8]><!--><html lang="{{htmlLang}}" class="govuk-template"><!--<![endif]-->
   <head>
     <meta charset="utf-8" />
     <title>{{$pageTitle}}{{/pageTitle}}</title>
     {{$head}}{{/head}}
 
-<meta name="theme-color" content="#1d70b8">
-<meta http-equiv="X-UA-Compatible" content="IE=edge">
-<link rel="icon" sizes="48x48" href="{{govukAssetPath}}rebrand/images/favicon.ico">
-<link rel="icon" sizes="any" href="{{govukAssetPath}}rebrand/images/favicon.svg" type="image/svg+xml">
-<link rel="mask-icon" href="{{govukAssetPath}}rebrand/images/govuk-icon-mask.svg" color="#1d70b8">
-<link rel="apple-touch-icon" href="{{govukAssetPath}}rebrand/images/govuk-icon-180.png">
-<link rel="manifest" href="{{govukAssetPath}}rebrand/manifest.json">
-<meta property="og:image" content="{{govukAssetPath}}rebrand/images/govuk-opengraph-image.png">
+    <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{{govukAssetPath}}images/favicon.ico" type="image/x-icon">
+      <link rel="mask-icon" href="{{govukAssetPath}}images/govuk-mask-icon.svg" color="#0b0c0c">
+      <link rel="apple-touch-icon" sizes="180x180" href="{{govukAssetPath}}images/govuk-apple-touch-icon-180x180.png">
+      <link rel="apple-touch-icon" sizes="167x167" href="{{govukAssetPath}}images/govuk-apple-touch-icon-167x167.png">
+      <link rel="apple-touch-icon" sizes="152x152" href="{{govukAssetPath}}images/govuk-apple-touch-icon-152x152.png">
+      <link rel="apple-touch-icon" href="{{govukAssetPath}}images/govuk-apple-touch-icon.png">
+
+
+    <meta name="theme-color" content="#0b0c0c" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+
+    <meta property="og:image" content="{{govukAssetPath}}images/opengraph-image.png">
   </head>
 
   <body class="{{$bodyClasses}}{{/bodyClasses}} govuk-template__body  js-enabled" >
-    <script {{#nonce}}nonce="{{nonce}}"{{/nonce}}>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
+    <script {{#nonce}}nonce="{{nonce}}"{{/nonce}}>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
+
 
 
     <div id="global-cookie-message" class="gem-c-cookie-banner govuk-clearfix" data-module="cookie-banner" role="region" aria-label="cookie banner" data-nosnippet="">
@@ -32,13 +39,19 @@
 
           <div class="govuk-header__logo">
             <a href="{{$homepageUrl}}https://www.gov.uk{{/homepageUrl}}" title="{{$logoLinkTitle}}Go to the GOV.UK homepage{{/logoLinkTitle}}" id="logo" class="govuk-header__link govuk-header__link--homepage" target="_blank" data-module="track-click" data-track-category="homeLinkClicked" data-track-action="homeHeader">
-                <!--[if gt IE 8]><!-->
-                <div id="govuk-header__logo"></div>
-                <img src="/public/images/govuk-logo.svg" id="govuk-header__logo" alt="Logo" loading="lazy" />
-                  <!--<![endif]-->
-                  <!--[if IE 8]>
-                  <img src="{{govukAssetPath}}rebrand/images/govuk-logotype-tudor-crown.png" class="govuk-header__logotype-crown-fallback-image" width="32" height="30" alt="">
-                  <![endif]-->
+			<span class="govuk-header__logotype">
+				<!--[if gt IE 8]><!-->
+          <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg\" viewBox="0 0 32 30" height="30" width="32">
+            <path fill="currentColor" fill-rule="evenodd"    d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8"></path>
+          </svg>
+          <!--<![endif]-->
+          <!--[if IE 8]>
+          <img src="{{govukAssetPath}}images/govuk-logotype-tudor-crown.png" class="govuk-header__logotype-crown-fallback-image" width="32" height="30" alt="">
+          <![endif]-->
+			</span>
+				<span class="govuk-header__logotype-text">
+				  {{$globalHeaderText}}GOV.UK{{/globalHeaderText}}
+				</span>
             </a>
           </div>
           {{$insideHeader}}{{/insideHeader}}
@@ -53,54 +66,25 @@
 
     {{$main}}{{/main}}
 
-    <footer class="govuk-footer">
+    <footer class="govuk-footer" id="footer" role="contentinfo">
+
       <div class="govuk-width-container">
-        <svg
-          focusable="false"
-          role="presentation"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 64 60"
-          height="30"
-          width="32"
-          fill="currentcolor" class="govuk-footer__crown">
-          <g>
-            <circle cx="20" cy="17.6" r="3.7" />
-            <circle cx="10.2" cy="23.5" r="3.7" />
-            <circle cx="3.7" cy="33.2" r="3.7" />
-            <circle cx="31.7" cy="30.6" r="3.7" />
-            <circle cx="43.3" cy="17.6" r="3.7" />
-            <circle cx="53.2" cy="23.5" r="3.7" />
-            <circle cx="59.7" cy="33.2" r="3.7" />
-            <circle cx="31.7" cy="30.6" r="3.7" />
-            <path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z" />
-          </g>
-        </svg>
+        {{$footerTop}}{{/footerTop}}
+
         <div class="govuk-footer__meta">
           <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
-            <h2 class="govuk-visually-hidden">Support links</h2>
+		        <h2 class="govuk-visually-hidden">Support links</h2>
             {{$footerSupportLinks}}{{/footerSupportLinks}}
-            <svg
-              aria-hidden="true"
-              focusable="false"
-              class="govuk-footer__licence-logo"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 483.2 195.7"
-              height="17"
-              width="41">
-              <path
-                fill="currentColor"
-                d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" />
+
+			      <svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 483.2 195.7" height="17" width="41">
+                <path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"></path>
             </svg>
-            <span class="govuk-footer__licence-description">
-                {{$licenceMessage}}All content is available under the <a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" id="open-government-licence" class="govuk-footer__link" target="_blank" rel="license">Open Government Licence v3.0</a>, except where otherwise stated{{/licenceMessage}}
-            </span>
+
+			      <span class="govuk-footer__licence-description">{{$licenceMessage}}All content is available under the <a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" id="open-government-licence" class="govuk-footer__link" target="_blank" rel="license">Open Government Licence v3.0</a>, except where otherwise stated{{/licenceMessage}}</span>
           </div>
+
           <div class="govuk-footer__meta-item">
-            <a
-              class="govuk-footer__link govuk-footer__copyright-logo"
-              href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">
-              {{$crownCopyrightMessage}}© Crown copyright{{/crownCopyrightMessage}}
-            </a>
+            <a class="govuk-footer__link govuk-footer__copyright-logo" id="copyright-logo" target="_blank" href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">{{$crownCopyrightMessage}}© Crown copyright{{/crownCopyrightMessage}}</a>
           </div>
         </div>
       </div>

package/frontend/template-mixins/mixins/template-mixins.js

@@ -358,8 +358,7 @@ module.exports = function (options) {
         path: 'partials/forms/input-text-group',
         renderWith: inputText,
         options: {
-          maxlength: 18,
-          className: 'govuk-input govuk-input--extra-letter-spacing'
+          maxlength: 18
         }
       },
       'input-file': {
@@ -460,12 +459,12 @@ module.exports = function (options) {
             const parts = [];
 
             if (isExact) {
-              const dayPart = compiled['partials/forms/input-text-date'].render(inputText.call(this, key + '-day', { inputmode: 'numeric', min: 1, max: 31, maxlength: 2, hintId: key + '-hint', date: true, autocomplete: autocomplete.day, formGroupClassName, className: classNameDay, isThisRequired }));
+              const dayPart = compiled['partials/forms/input-text-date'].render(inputText.call(this, key + '-day', { pattern: '[0-9]*', min: 1, max: 31, maxlength: 2, hintId: key + '-hint', date: true, autocomplete: autocomplete.day, formGroupClassName, className: classNameDay, isThisRequired }));
               parts.push(dayPart);
             }
 
-            const monthPart = compiled['partials/forms/input-text-date'].render(inputText.call(this, key + '-month', { inputmode: 'numeric', min: 1, max: 12, maxlength: 2, hintId: key + '-hint', date: true, autocomplete: autocomplete.month, formGroupClassName, className: classNameMonth, isThisRequired }));
-            const yearPart = compiled['partials/forms/input-text-date'].render(inputText.call(this, key + '-year', { inputmode: 'numeric', maxlength: 4, hintId: key + '-hint', date: true, autocomplete: autocomplete.year, formGroupClassName, className: classNameYear, isThisRequired }));
+            const monthPart = compiled['partials/forms/input-text-date'].render(inputText.call(this, key + '-month', { pattern: '[0-9]*', min: 1, max: 12, maxlength: 2, hintId: key + '-hint', date: true, autocomplete: autocomplete.month, formGroupClassName, className: classNameMonth, isThisRequired }));
+            const yearPart = compiled['partials/forms/input-text-date'].render(inputText.call(this, key + '-year', { pattern: '[0-9]*', maxlength: 4, hintId: key + '-hint', date: true, autocomplete: autocomplete.year, formGroupClassName, className: classNameYear, isThisRequired }));
 
             return parts.concat(monthPart, yearPart).join('\n');
           };

package/frontend/template-mixins/partials/forms/checkbox.html

@@ -1,9 +1,5 @@
 <div id="{{key}}-group" class="govuk-form-group {{#compound}} form-group-compound{{/compound}}{{#formGroupClassName}} {{formGroupClassName}}{{/formGroupClassName}}{{#error}} govuk-form-group--error{{/error}}">
-    {{#error}}
-    <p class="govuk-error-message" aria-hidden="true">
-        <span class="govuk-visually-hidden">Error:</span> {{error.message}}
-    </p>
-    {{/error}}
+    {{#error}}<p class="govuk-error-message" aria-hidden="true">{{error.message}}</p>{{/error}}
     <div class="govuk-checkboxes__item">
         <input class="govuk-checkboxes__input" type="checkbox" id="{{key}}" name="{{key}}" value="true" aria-required="{{required}}"{{#error}} aria-invalid="true"{{/error}}{{^error}}{{#toggle}} data-toggle="{{toggle}}"{{/toggle}}{{#selected}} checked="checked"{{/selected}}{{/error}}>
         <label for="{{key}}" class="{{#className}}{{className}} {{/className}}{{#invalid}}invalid-input{{/invalid}}">

package/frontend/template-mixins/partials/forms/input-text-date.html

@@ -3,7 +3,7 @@
       <label for="{{id}}" class="{{labelClassName}}">
           <span class="label-text">{{{label}}}</span>
       </label>
-      {{#hint}}<div {{$hintId}}id="{{hintId}}" {{/hintId}}class="govuk-hint">{{{hint}}}</div>{{/hint}}
+      {{#hint}}<span {{$hintId}}id="{{hintId}}" {{/hintId}}class="govuk-hint">{{{hint}}}</span>{{/hint}}
       {{#renderChild}}{{/renderChild}}
           {{#attributes}}
               {{#prefix}}
@@ -21,7 +21,6 @@
               {{#max}} max="{{max}}"{{/max}}
               {{#maxlength}} maxlength="{{maxlength}}"{{/maxlength}}
               {{#pattern}} pattern="{{pattern}}"{{/pattern}}
-              {{#inputmode}}inputmode="{{inputmode}}"{{/inputmode}}
               {{#hintId}} aria-describedby="{{hintId}}"{{/hintId}}
               {{#error}} aria-invalid="true"{{/error}}
               {{#autocomplete}} autocomplete="{{autocomplete}}"{{/autocomplete}}

package/frontend/template-mixins/partials/forms/input-text-group.html

@@ -3,7 +3,7 @@
         {{{label}}}
       </label>
     {{#isPageHeading}}</h1>{{/isPageHeading}}
-    {{#hint}}<div {{$hintId}}id="{{hintId}}" {{/hintId}}class="govuk-hint">{{{hint}}}</div>{{/hint}}
+    {{#hint}}<span {{$hintId}}id="{{hintId}}" {{/hintId}}class="govuk-hint">{{{hint}}}</span>{{/hint}}
     {{#error}}
       <p class="govuk-error-message">
         <span class="govuk-visually-hidden">Error:</span> {{error.message}}

package/frontend/template-mixins/partials/forms/textarea-group.html

@@ -29,7 +29,7 @@
             {{#error}} aria-invalid="true" aria-describedby="{{id}}-error" {{/error}}
             >{{value}}</textarea>
         {{#isMaxlengthOrMaxword}}
-        <div id="{{id}}-info" class=" govuk-hint govuk-character-count__message">You have {{#maxlength}}{{maxlength}} characters{{/maxlength}}{{#maxword}}{{maxword}}
+        <div id="{{id}}-info" class=" govuk-hint govuk-character-count__message" aria-live="polite">You have {{#maxlength}}{{maxlength}} characters{{/maxlength}}{{#maxword}}{{maxword}}
             words{{/maxword}} remaining
         </div>
         {{/isMaxlengthOrMaxword}}