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

package/frontend/template-partials/views/layout.html

@@ -6,7 +6,7 @@
     {{#errorlist.length}}{{#t}}errorlist.prefix{{/t}}{{/errorlist.length}}{{#title}}{{title}}{{/title}}{{^title}}{{$header}}{{/header}}{{/title}}{{#serviceName}} – {{serviceName}}{{/serviceName}} – GOV.UK
   {{/pageTitle}}
   {{$bodyStart}}
-    <a href="#{{#skipToMain}}{{skipToMain}}{{/skipToMain}}{{^skipToMain}}main-content{{/skipToMain}}" class="govuk-skip-link" data-module="govuk-skip-link" id="skip-to-main">Skip to main content</a>
+    <a href="#{{#skipToMain}}{{skipToMain}}{{/skipToMain}}{{^skipToMain}}main-content{{/skipToMain}}" class="govuk-skip-link" id="skip-to-main">Skip to main content</a>
   {{/bodyStart}}
   {{$headerClass}}govuk-header{{/headerClass}}
   {{$insideHeader}}{{/insideHeader}}

package/frontend/template-partials/views/partials/confirmation-alert.html

@@ -1,6 +1,4 @@
 <div class="govuk-panel govuk-panel--confirmation" role="alert">
   <h1 govuk-panel__title>{{#t}}journey.confirmation.message{{/t}}</h1>
-  <div class="govuk-panel__body">
-    {{#t}}journey.confirmation.details{{/t}}
-  </div>
+  <div class="govuk-panel__body">{{#t}}journey.confirmation.details{{/t}}</div>
 </div>

package/frontend/template-partials/views/partials/cookie-banner.html

@@ -1,51 +1,33 @@
-<div id="cookie-banner"  class="govuk-cookie-banner" data-nosnippet="" role="region" aria-label="Cookies on {{#appName}}{{appName}}{{/appName}}{{^appName}}this service{{/appName}}">
-  <div class="govuk-cookie-banner__message govuk-width-container">
-    <div id="cookie-banner-info" class="govuk-grid-row">
-      <div class="govuk-grid-column-two-thirds">
-        <h2 class="govuk-cookie-banner__heading govuk-heading-m">Cookies on {{#appName}}{{appName}}{{/appName}}{{^appName}}this service{{/appName}}</h2>
-        <div class="govuk-cookie-banner__content">
-          <p class="govuk-body">{{#t}}cookies.banner.message{{/t}}</p>
-          {{#hasGoogleAnalytics}}
-          <p class="govuk-body">We'd like to set additional cookies to understand how you use GOV.UK, remember your settings and improve government services.</p>
-          <p class="govuk-body">We also use cookies set by other sites to help us deliver content from their services.</p>
-          {{/hasGoogleAnalytics}}
-        </div>
-      </div>
-    </div>
-    <div id="cookie-banner-actions" class="govuk-button-group">
-      {{#hasGoogleAnalytics}}
-        <button id="accept-cookies-button" value="yes" type="submit" name="cookies[additional]" class="govuk-button" data-module="govuk-button" data-accept-cookies="true" data-track-category="cookieBanner" data-track-action="Cookie banner accepted" data-cookie-types="all">Accept additional cookies</button>
-        <button id="reject-cookies-button" value="no" type="submit" name="cookies[additional]" class="govuk-button" data-module="govuk-button" data-reject-cookies="true" data-track-category="cookieBanner" data-track-action="Cookie banner rejected">Reject additional cookies</button>
-      {{/hasGoogleAnalytics}}
-        <a class="govuk-link" href="/cookies">{{#t}}cookies.banner.link{{/t}}</a>
-    </div>
-  </div>
-  <div id="cookie-banner-submitted-accepted" data-accept-cookies="true" class="govuk-cookie-banner__message govuk-width-container" role="alert" hidden >
-    <div class="govuk-grid-row">
-      <div class="govuk-grid-column-two-thirds">
-        <div class="govuk-cookie-banner__content">
-          <p class="govuk-body">You've accepted additional cookies. You can <a class="govuk-link" href="/cookies">change your cookie settings</a> at any time.</p>
-        </div>
-      </div>
-    </div>
-    <div class="govuk-button-group">
-      <button id="hide-accept-cookie-banner" value="yes" type="submit" name="cookies[hide]" class="govuk-button" data-module="govuk-button">
-        Hide cookie message
-      </button>
-    </div>
-  </div>
-  <div id="cookie-banner-submitted-rejected" class="govuk-cookie-banner__message govuk-width-container" role="alert" hidden>
-    <div class="govuk-grid-row">
-      <div class="govuk-grid-column-two-thirds">
-        <div class="govuk-cookie-banner__content">
-          <p class="govuk-body">You've rejected additional cookies. You can <a class="govuk-link" href="/cookies">change your cookie settings</a> at any time.</p>
-        </div>
-      </div>
-    </div>
-    <div class="govuk-button-group">
-      <button id="hide-reject-cookie-banner" value="yes" type="submit" name="cookies[hide]" class="govuk-button" data-module="govuk-button">
-        Hide cookie message
-      </button>
-    </div>
-  </div>
+<div id="cookie-banner"  class="govuk-cookie-banner gem-c-cookie-banner govuk-clearfix">
+	<div class="gem-c-cookie-banner__message govuk-cookie-banner__message govuk-width-container">
+		<div id="cookie-banner-info" class="govuk-grid-row">
+			<div class="govuk-grid-column-two-thirds">
+				<h2 class="govuk-cookie-banner__heading govuk-heading-m">Cookies on {{#appName}}{{appName}}{{/appName}}{{^appName}}this service{{/appName}}</h2>
+				<div class="govuk-cookie-banner__content">
+					<p class="govuk-body">{{#t}}cookies.banner.message{{/t}}</p>
+					{{#hasGoogleAnalytics}}
+						<p class="govuk-body">We'd like to set additional cookies to understand how you use GOV.UK, remember your settings and improve government services.</p>
+						<p class="govuk-body">We also use cookies set by other sites to help us deliver content from their services.</p>
+					{{/hasGoogleAnalytics}}
+				</div>
+			</div>
+		</div>
+		<div id="cookie-banner-actions" class="govuk-button-group">         
+			{{#hasGoogleAnalytics}}
+				<button id="accept-cookies-button" class="gem-c-button govuk-button" type="submit" data-module="gem-track-click" data-accept-cookies="true" data-track-category="cookieBanner" data-track-action="Cookie banner accepted" data-cookie-types="all">Accept additional cookies</button>
+	
+				<button id="reject-cookies-button" class="gem-c-button govuk-button" type="submit" data-module="gem-track-click" data-reject-cookies="true" data-track-category="cookieBanner" data-track-action="Cookie banner rejected">Reject additional cookies</button>
+			{{/hasGoogleAnalytics}}
+			<a class="govuk-link" href="/cookies">{{#t}}cookies.banner.link{{/t}}</a>
+		</div>
+	</div>
+	
+	<div class="gem-c-cookie-banner__confirmation govuk-width-container" hidden=""  id="cookie-banner-submitted" >
+		<p class="gem-c-cookie-banner__confirmation-message" role="alert">
+			Your cookie preferences have been saved. You can <a class="govuk-link" data-module="gem-track-click" data-track-category="cookieBanner" data-track-action="Cookie banner settings clicked from confirmation" href="/cookies">change your cookie settings</a> at any time.
+		</p>
+		<div class="govuk-button-group">
+			<button   class="gem-c-cookie-banner__hide-button govuk-button"  id="hide-cookie-banner">Hide this message</button>
+		</div>
+	</div>
 </div>

package/frontend/template-partials/views/partials/navigation.html

@@ -1,8 +1,8 @@
 <div class="govuk-header__content">
   {{#startPageRedirectUrl}}
-    <a href="{{startPageRedirectUrl}}" class="govuk-header__link govuk-header__service-name" id="proposition-name">{{$journeyHeader}}{{/journeyHeader}}</a>
+    <a href="{{startPageRedirectUrl}}" class="govuk-header__link govuk-header__link--service-name" id="proposition-name">{{$journeyHeader}}{{/journeyHeader}}</a>
   {{/startPageRedirectUrl}}
   {{^startPageRedirectUrl}}
-    <a href="{{journeyHeaderURL}}" class="govuk-header__link govuk-header__service-name" id="proposition-name">{{$journeyHeader}}{{/journeyHeader}}</a>
+    <a href="{{journeyHeaderURL}}" class="govuk-header__link govuk-header__link--service-name" id="proposition-name">{{$journeyHeader}}{{/journeyHeader}}</a>
   {{/startPageRedirectUrl}}
 </div>

package/frontend/themes/gov-uk/client-js/cookieSettings.js

@@ -1,22 +1,22 @@
-/* eslint-disable no-undef */
+/* eslint-disable max-len, no-var, vars-on-top, no-undef */
 'use strict';
 
 // TODO: update package.json(s)
 
 function hideFallbackContent(containerId) {
-  const container = document.getElementById(containerId);
+  var container = document.getElementById(containerId);
   if (container === null) return;
-  const fallbackContent = container.getElementsByClassName('js-disabled');
-  for (let i = 0; i < fallbackContent.length; i++) {
+  var fallbackContent = container.getElementsByClassName('js-disabled');
+  for (var i = 0; i < fallbackContent.length; i++) {
     fallbackContent[i].style.display = 'none';
   }
 }
 
 function showInteractiveContent(containerId) {
-  const container = document.getElementById(containerId);
+  var container = document.getElementById(containerId);
   if (container === null) return;
-  const interactiveContent = container.getElementsByClassName('js-enabled');
-  for (let i = 0; i < interactiveContent.length; i++) {
+  var interactiveContent = container.getElementsByClassName('js-enabled');
+  for (var i = 0; i < interactiveContent.length; i++) {
     interactiveContent[i].style.display = 'block';
   }
 }
@@ -34,23 +34,12 @@ function setCookiePreferences(preferences) {
 function showCookieBannerSubmitted() {
   document.getElementById('cookie-banner-info').style.display = 'none';
   document.getElementById('cookie-banner-actions').style.display = 'none';
-  let cookieBannerSubmitted;
-  const cookieBannerDiv = document.getElementById('cookie-banner-submitted-accepted');
-  if (cookieBannerDiv.dataset.acceptCookies === 'true') {
-    cookieBannerSubmitted = document.getElementById('cookie-banner-submitted-accepted');
-  } else {
-    cookieBannerSubmitted = document.getElementById('cookie-banner-submitted-rejected');
-  }
+  var cookieBannerSubmitted = document.getElementById('cookie-banner-submitted');
   cookieBannerSubmitted.style.display = 'block';
   cookieBannerSubmitted.focus();
 }
 
-function hideCookieBanner() {
-  document.getElementById('cookie-banner').style.display = 'none';
-}
-
 function initialiseBannerButtons() {
-  const acceptedCookieBannerDiv = document.getElementById('cookie-banner-submitted-accepted');
   document.getElementById('accept-cookies-button').addEventListener('click', function () {
     setCookiePreferences({essential: true, usage: true});
     showCookieBannerSubmitted();
@@ -59,28 +48,27 @@ function initialiseBannerButtons() {
   });
 
   document.getElementById('reject-cookies-button').addEventListener('click', function () {
-    setCookiePreferences({ essential: true, usage: false });
-    acceptedCookieBannerDiv.dataset.acceptCookies = 'false';
+    setCookiePreferences({essential: true, usage: false});
     showCookieBannerSubmitted();
   });
 
-  document.getElementById('hide-accept-cookie-banner').addEventListener('click', hideCookieBanner);
-
-  document.getElementById('hide-reject-cookie-banner').addEventListener('click', hideCookieBanner);
+  document.getElementById('hide-cookie-banner').addEventListener('click', function () {
+    document.getElementById('cookie-banner').style.display = 'none';
+  });
 }
 
 function initialiseCookieBanner() {
-  const preferences = GOVUK.cookie('cookie_preferences');
+  var preferences = GOVUK.cookie('cookie_preferences');
 
   if (preferences !== null) {
     return;
   }
 
   // the default cookie message container from hof-govuk-template
-  const bannerContainer = document.getElementById('global-cookie-message');
+  var bannerContainer = document.getElementById('global-cookie-message');
 
   // the cookie banner that will replace the container's default content if using google analytics
-  const cookieBanner = document.getElementById('cookie-banner');
+  var cookieBanner = document.getElementById('cookie-banner');
 
   if (bannerContainer !== null && cookieBanner !== null) {
     hideFallbackContent('global-cookie-message');
@@ -94,8 +82,8 @@ function handleSaveSettings(e) {
   e.preventDefault();
   setCookiePreferences({ essential: true, usage: document.getElementById('radio-1').checked });
 
-  const cookieNotification = document.getElementById('cookie-notification');
-  const cookieBanner = document.getElementById('cookie-banner');
+  var cookieNotification = document.getElementById('cookie-notification');
+  var cookieBanner = document.getElementById('cookie-banner');
 
   if (cookieBanner !== null) {
     cookieBanner.style.display = 'none';
@@ -108,8 +96,8 @@ function handleSaveSettings(e) {
 }
 
 function initialiseFormControls() {
-  const preferences = JSON.parse(GOVUK.cookie('cookie_preferences'));
-  let usage;
+  var preferences = JSON.parse(GOVUK.cookie('cookie_preferences'));
+  var usage;
 
   if (preferences !== null && preferences.usage !== undefined && typeof preferences.usage === 'boolean') {
     usage = preferences.usage;
@@ -123,7 +111,7 @@ function initialiseFormControls() {
 }
 
 function initialiseCookiePage() {
-  const shouldDisplayCookieControls = document.getElementById('cookie-settings') !== null;
+  var shouldDisplayCookieControls = document.getElementById('cookie-settings') !== null;
 
   if (shouldDisplayCookieControls) {
     hideFallbackContent('cookie-settings');
@@ -134,12 +122,12 @@ function initialiseCookiePage() {
 
 function onLoad() {
   window.onload = function () {
-    const reloading = sessionStorage.getItem('reloading');
+    var reloading = sessionStorage.getItem('reloading');
     if (reloading) {
       sessionStorage.removeItem('reloading');
 
-      const bannerContainer = document.getElementById('global-cookie-message');
-      const cookieBanner = document.getElementById('cookie-banner');
+      var bannerContainer = document.getElementById('global-cookie-message');
+      var cookieBanner = document.getElementById('cookie-banner');
 
       if (bannerContainer !== null && cookieBanner !== null) {
         bannerContainer.style.display = 'block';

package/frontend/themes/gov-uk/styles/govuk.scss

@@ -1,7 +1,7 @@
 // App styles
 
 // set the default image directory
-$path: "/public/images/" !default;
+$path: "/images/" !default;
 
 // GOV.UK front end toolkit
 // Sass variables, mixins and functions

package/frontend/toolkit/index.js

@@ -1,10 +1,10 @@
 module.exports = {
-  helpers: require('./assets/rebrand/javascript/helpers'),
-  formFocus: require('./assets/rebrand/javascript/form-focus'),
-  progressiveReveal: require('./assets/rebrand/javascript/progressive-reveal'),
-  validation: require('./assets/rebrand/javascript/validation'),
+  helpers: require('./assets/javascript/helpers'),
+  formFocus: require('./assets/javascript/form-focus'),
+  progressiveReveal: require('./assets/javascript/progressive-reveal'),
+  validation: require('./assets/javascript/validation'),
   detailsSummary: function () {
-    require('./assets/rebrand/javascript/vendor/details.polyfill');
+    require('./assets/javascript/vendor/details.polyfill');
   },
-  characterCount: require('./assets/rebrand/javascript/character-count')
+  characterCount: require('./assets/javascript/character-count')
 };

package/index.js

@@ -77,8 +77,7 @@ const getContentSecurityPolicy = (config, res) => {
     imgSrc: ["'self'"],
     fontSrc: ["'self'", 'data:', 'https://design-system.service.gov.uk'],
     scriptSrc: ["'self'", `'nonce-${res.locals.nonce}'`],
-    'frame-ancestors': ["'none'"],
-    manifestSrc: ["'self'"]
+    'frame-ancestors': ["'none'"]
   };
   /* eslint-enable quotes */
 
@@ -96,8 +95,7 @@ const getContentSecurityPolicy = (config, res) => {
       'https://www.google-analytics.com',
       'https://region1.google-analytics.com',
       'https://region1.analytics.google.com'
-    ],
-    manifestSrc: ["'self'"]
+    ]
   };
 
   if (config.gaTagId) {
@@ -238,8 +236,8 @@ function bootstrap(options) {
     app.use(hofMiddleware.rateLimiter(config, 'requests'));
   }
 
-  // Set up routing so <YOUR-SITE-URL>/assets are served from /node_modules/govuk-frontend/govuk/assets/rebrand
-  app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/govuk/assets/rebrand')));
+  // Set up routing so <YOUR-SITE-URL>/assets are served from /node_modules/govuk-frontend/govuk/assets
+  app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/govuk/assets')));
   // Check if service has been paused and redirect accordingly
   const bypassPaths = ['/assets', '/healthcheck', '/service-unavailable'];
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hof",
   "description": "A bootstrap for HOF projects",
-  "version": "23.0.0-frontend-v4-beta.14",
+  "version": "24.0.0-vite-beta.2",
   "license": "MIT",
   "main": "index.js",
   "author": "HomeOffice",
@@ -32,14 +32,16 @@
     "test:acceptance_browser": "ACCEPTANCE_WITH_BROWSER=true TAGS=\"${TAGS:=@feature}\" yarn run test:cucumber",
     "test:cucumber": "cucumber-js -f @cucumber/pretty-formatter \"sandbox/test/_features/**/*.feature\" --require sandbox/test/_features/test.setup.js --require \"sandbox/test/_features/step_definitions/**/*.js\" --tags $TAGS",
     "ci": "travis-conditions",
-    "postversion": "git push && git push --tags"
+    "postversion": "git push && git push --tags",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
   },
   "dependencies": {
     "aliasify": "^2.1.0",
     "axios": "^1.12.2",
     "bluebird": "^3.7.2",
     "body-parser": "^1.20.3",
-    "browserify": "^17.0.1",
     "callsite": "^1.0.0",
     "chalk": "^2.4.2",
     "chokidar": "^3.6.0",
@@ -60,7 +62,7 @@
     "findup": "^0.1.5",
     "glob": "^7.2.3",
     "govuk-elements-sass": "^3.1.3",
-    "govuk-frontend": "4.10",
+    "govuk-frontend": "3.15.0",
     "govuk_template_mustache": "^0.26.0",
     "helmet": "^3.23.3",
     "hogan-express-strict": "^0.5.4",
@@ -92,6 +94,7 @@
     "underscore": "^1.13.7",
     "urijs": "^1.19.11",
     "uuid": "^8.3.2",
+    "vite": "^7.1.12",
     "winston": "^3.18.3"
   },
   "devDependencies": {

package/sandbox/assets/{rebrand/js → js}/index.js

@@ -1,7 +1,7 @@
 /* eslint-disable */
 'use strict'
 
-require('../../../../frontend/themes/gov-uk/client-js');
+require('../../../frontend/themes/gov-uk/client-js');
 
 var $ = require('jquery');
 var typeahead = require('typeahead-aria');

package/sandbox/assets/{rebrand/scss → scss}/app.scss

@@ -1,5 +1,5 @@
 
-@import "../../../../frontend/themes/gov-uk/styles/govuk";
+@import "../../../frontend/themes/gov-uk/styles/govuk";
 
 //autocomplete styling
 .tt-menu {

package/sandbox/package.json

@@ -8,14 +8,14 @@
   },
   "scripts": {
     "start": "node server.js",
-    "start:dev": "HOF_SANDBOX=true ../bin/hof-build watch --env",
+    "start:dev": "HOF_SANDBOX=true ../bin/hof-build watch",
     "dev": "yarn && GA_TAG=test nodemon server",
     "build": "HOF_SANDBOX=true ../bin/hof-build",
     "postinstall": "yarn run build"
   },
   "author": "",
   "dependencies": {
-    "govuk-frontend": "4.10",
+    "govuk-frontend": "3.14",
     "jquery": "^3.7.1",
     "sass": "^1.53.0",
     "typeahead-aria": "^1.0.4"