hof 22.12.0-unit-of-measure-beta.1 → 22.13.0-frontend-v4-beta.1

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

@@ -14,8 +14,6 @@ const PARTIALS = [
   'partials/forms/input-text-group',
   'partials/forms/input-text-date',
   'partials/forms/input-submit',
-  'partials/forms/grouped-inputs-select',
-  'partials/forms/grouped-inputs-text',
   'partials/forms/select',
   'partials/forms/checkbox',
   'partials/forms/textarea-group',
@@ -216,7 +214,6 @@ module.exports = function (options) {
         labelClassName: labelClassName ? `govuk-label ${labelClassName}` : 'govuk-label',
         formGroupClassName: classNames(field, 'formGroupClassName') || extension.formGroupClassName || 'govuk-form-group',
         hint: hint,
-        amountWithUnitSelectItemClassName: 'grouped-inputs__item',
         hintId: extension.hintId || (hint ? key + '-hint' : null),
         error: this.errors && this.errors[key],
         maxlengthAttribute: field.maxlengthAttribute === true,
@@ -225,7 +222,6 @@ module.exports = function (options) {
         required: required,
         pattern: extension.pattern,
         date: extension.date,
-        amountWithUnitSelect: extension.amountWithUnitSelect,
         autocomplete: autocomplete,
         child: field.child,
         isPageHeading: field.isPageHeading,
@@ -236,7 +232,7 @@ module.exports = function (options) {
       });
     }
 
-    function optionGroup(key, opts, pKey = key) {
+    function optionGroup(key, opts) {
       opts = opts || {};
       const field = Object.assign({}, this.options.fields[key] || options.fields[key]);
       const legend = field.legend;
@@ -252,7 +248,6 @@ module.exports = function (options) {
           legendValue = legend.value;
         }
       }
-
       return {
         key: key,
         error: this.errors && this.errors[key],
@@ -275,16 +270,15 @@ module.exports = function (options) {
 
           if (typeof obj === 'string') {
             value = obj;
-            // pKey - optional param that demotes parent key for group components - set to key param val by default
-            label = 'fields.' + pKey + '.options.' + obj + '.label';
-            optionHint = 'fields.' + pKey + '.options.' + obj + '.hint';
+            label = 'fields.' + key + '.options.' + obj + '.label';
+            optionHint = 'fields.' + key + '.options.' + obj + '.hint';
           } else {
             value = obj.value;
-            label = obj.label || 'fields.' + pKey + '.options.' + obj.value + '.label';
+            label = obj.label || 'fields.' + key + '.options.' + obj.value + '.label';
             toggle = obj.toggle;
             child = obj.child;
             useHintText = obj.useHintText;
-            optionHint = obj.hint || 'fields.' + pKey + '.options.' + obj.value + '.hint';
+            optionHint = obj.hint || 'fields.' + key + '.options.' + obj.value + '.hint';
           }
 
           if (this.values && this.values[key] !== undefined) {
@@ -364,7 +358,8 @@ module.exports = function (options) {
         path: 'partials/forms/input-text-group',
         renderWith: inputText,
         options: {
-          maxlength: 18
+          maxlength: 18,
+          className: 'govuk-input govuk-input--extra-letter-spacing'
         }
       },
       'input-file': {
@@ -465,60 +460,16 @@ module.exports = function (options) {
             const parts = [];
 
             if (isExact) {
-              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 }));
+              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 }));
               parts.push(dayPart);
             }
 
-            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 }));
+            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 }));
 
             return parts.concat(monthPart, yearPart).join('\n');
           };
         }
-      },
-      'input-amount-with-unit-select': {
-        handler: function () {
-          return function (key) {
-            key = (key === '{{key}}' || key === '' || key === undefined) ? hoganRender(key, this) : key;
-            const field = Object.assign({}, this.options.fields[key] || options.fields[key]);
-
-            let autocomplete = field.autocomplete || 'off';
-            if (autocomplete === 'off') {
-              autocomplete = { amount: 'off'};
-            } else if (typeof autocomplete === 'string') {
-              autocomplete = { amount: autocomplete + '-amount' };
-            }
-
-            const formGroupClassName = (field.formGroup && field.formGroup.className) ? field.formGroup.className : '';
-            const classNameAmount = (field.controlsClass && field.controlsClass.amount) ? field.controlsClass.amount : 'govuk-input--width-3';
-            const classNameUnit = (field.controlsClass && field.controlsClass.unit) ? field.controlsClass.unit : 'govuk-input--width-5';
-
-            const parts = [];
-
-            // basically does the '_.each(mixins, function (mixin, name)' part manually (which renders the HTML
-            // for both child components and looks for a 'renderWith' and optional 'Options' method to use)
-            const amountPart = compiled['partials/forms/grouped-inputs-text']
-              .render(inputText.call(this,
-                key + '-amount', {
-                  formGroupClassName,
-                  autocomplete: autocomplete.amount,
-                  className: classNameAmount,
-                  amountWithUnitSelect: true }
-              ));
-
-            const unitPart = compiled['partials/forms/grouped-inputs-select']
-              .render(inputText.call(this, key + '-unit',
-                optionGroup.call(this,
-                  key + '-unit', {
-                    formGroupClassName,
-                    className: classNameUnit,
-                    amountWithUnitSelect: true },
-                  key
-                )));
-
-            return parts.concat(amountPart, unitPart).join('\n');
-          };
-        }
       }
     };
 

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

@@ -1,5 +1,9 @@
 <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">{{error.message}}</p>{{/error}}
+    {{#error}}
+    <p class="govuk-error-message" aria-hidden="true">
+        <span class="govuk-visually-hidden">Error:</span> {{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}}<span {{$hintId}}id="{{hintId}}" {{/hintId}}class="govuk-hint">{{{hint}}}</span>{{/hint}}
+      {{#hint}}<div {{$hintId}}id="{{hintId}}" {{/hintId}}class="govuk-hint">{{{hint}}}</div>{{/hint}}
       {{#renderChild}}{{/renderChild}}
           {{#attributes}}
               {{#prefix}}
@@ -21,6 +21,7 @@
               {{#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}}<span {{$hintId}}id="{{hintId}}" {{/hintId}}class="govuk-hint">{{{hint}}}</span>{{/hint}}
+    {{#hint}}<div {{$hintId}}id="{{hintId}}" {{/hintId}}class="govuk-hint">{{{hint}}}</div>{{/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" aria-live="polite">You have {{#maxlength}}{{maxlength}} characters{{/maxlength}}{{#maxword}}{{maxword}}
+        <div id="{{id}}-info" class=" govuk-hint govuk-character-count__message">You have {{#maxlength}}{{maxlength}} characters{{/maxlength}}{{#maxword}}{{maxword}}
             words{{/maxword}} remaining
         </div>
         {{/isMaxlengthOrMaxword}}

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" id="skip-to-main">Skip to main content</a>
+    <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>
   {{/bodyStart}}
   {{$headerClass}}govuk-header{{/headerClass}}
   {{$insideHeader}}{{/insideHeader}}

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

@@ -1,33 +1,51 @@
-<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 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>

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

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

@@ -27,7 +27,6 @@ $path: "/public/images/" !default;
 @import "check_your_answers";
 @import "pdf";
 @import "session-timeout-dialog";
-@import "grouped-input";
 
 // Modules
 @import "modules/validation";

package/frontend/toolkit/assets/javascript/form-focus.js

@@ -85,10 +85,6 @@ function formFocus() {
     document.getElementById(getElementFromSummaryLink + '-day').focus();
   }
 
-  if (document.getElementById(getElementFromSummaryLink + '-amount') && forms.length === 1 && editMode) {
-    document.getElementById(getElementFromSummaryLink + '-amount').focus();
-  }
-
   if (forms.length > 0) {
     labels = document.getElementsByTagName('label');
     if (labels) {

package/frontend/toolkit/assets/rebrand/images/govuk-logo.svg

@@ -0,0 +1,25 @@
+                <svg
+                  focusable="false"
+                  role="img"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 324 60"
+                  height="30"
+                  width="162"
+                  fill="white"
+                  class="govuk-header__logotype"
+                  aria-label="GOV.UK">
+                  <title>GOV.UK</title>
+                  <g>
+                    <circle cx="20" cy="17.6" r="3.7"></circle>
+                    <circle cx="10.2" cy="23.5" r="3.7"></circle>
+                    <circle cx="3.7" cy="33.2" r="3.7"></circle>
+                    <circle cx="31.7" cy="30.6" r="3.7"></circle>
+                    <circle cx="43.3" cy="17.6" r="3.7"></circle>
+                    <circle cx="53.2" cy="23.5" r="3.7"></circle>
+                    <circle cx="59.7" cy="33.2" r="3.7"></circle>
+                    <circle cx="31.7" cy="30.6" r="3.7"></circle>
+                    <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"></path>
+                  </g>
+                  <circle class="govuk-logo-dot" cx="226" cy="36" r="7.3" fill="#00ffe0"></circle>
+                  <path d="M93.94 41.25c.4 1.81 1.2 3.21 2.21 4.62 1 1.4 2.21 2.41 3.61 3.21s3.21 1.2 5.22 1.2 3.61-.4 4.82-1c1.4-.6 2.41-1.4 3.21-2.41.8-1 1.4-2.01 1.61-3.01s.4-2.01.4-3.01v.14h-10.86v-7.02h20.07v24.08h-8.03v-5.56c-.6.8-1.38 1.61-2.19 2.41-.8.8-1.81 1.2-2.81 1.81-1 .4-2.21.8-3.41 1.2s-2.41.4-3.81.4a18.56 18.56 0 0 1-14.65-6.63c-1.6-2.01-3.01-4.41-3.81-7.02s-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83a20.45 20.45 0 0 1 19.46-13.65c3.21 0 4.01.2 5.82.8 1.81.4 3.61 1.2 5.02 2.01 1.61.8 2.81 2.01 4.01 3.21s2.21 2.61 2.81 4.21l-7.63 4.41c-.4-1-1-1.81-1.61-2.61-.6-.8-1.4-1.4-2.21-2.01-.8-.6-1.81-1-2.81-1.4-1-.4-2.21-.4-3.61-.4-2.01 0-3.81.4-5.22 1.2-1.4.8-2.61 1.81-3.61 3.21s-1.61 2.81-2.21 4.62c-.4 1.81-.6 3.71-.6 5.42s.8 5.22.8 5.22Zm57.8-27.9c3.21 0 6.22.6 8.63 1.81 2.41 1.2 4.82 2.81 6.62 4.82S170.2 24.39 171 27s1.4 5.62 1.4 8.83-.4 6.02-1.4 8.83-2.41 5.02-4.01 7.02-4.01 3.61-6.62 4.82-5.42 1.81-8.63 1.81-6.22-.6-8.63-1.81-4.82-2.81-6.42-4.82-3.21-4.41-4.01-7.02-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83 2.41-5.02 4.01-7.02 4.01-3.61 6.42-4.82 5.42-1.81 8.63-1.81Zm0 36.73c1.81 0 3.61-.4 5.02-1s2.61-1.81 3.61-3.01 1.81-2.81 2.21-4.41c.4-1.81.8-3.61.8-5.62 0-2.21-.2-4.21-.8-6.02s-1.2-3.21-2.21-4.62c-1-1.2-2.21-2.21-3.61-3.01s-3.21-1-5.02-1-3.61.4-5.02 1c-1.4.8-2.61 1.81-3.61 3.01s-1.81 2.81-2.21 4.62c-.4 1.81-.8 3.61-.8 5.62 0 2.41.2 4.21.8 6.02.4 1.81 1.2 3.21 2.21 4.41s2.21 2.21 3.61 3.01c1.4.8 3.21 1 5.02 1Zm36.32 7.96-12.24-44.15h9.83l8.43 32.77h.4l8.23-32.77h9.83L200.3 58.04h-12.24Zm74.14-7.96c2.18 0 3.51-.6 3.51-.6 1.2-.6 2.01-1 2.81-1.81s1.4-1.81 1.81-2.81a13 13 0 0 0 .8-4.01V13.9h8.63v28.15c0 2.41-.4 4.62-1.4 6.62-.8 2.01-2.21 3.61-3.61 5.02s-3.41 2.41-5.62 3.21-4.62 1.2-7.02 1.2-5.02-.4-7.02-1.2c-2.21-.8-4.01-1.81-5.62-3.21s-2.81-3.01-3.61-5.02-1.4-4.21-1.4-6.62V13.9h8.63v26.95c0 1.61.2 3.01.8 4.01.4 1.2 1.2 2.21 2.01 2.81.8.8 1.81 1.4 2.81 1.81 0 0 1.34.6 3.51.6Zm34.22-36.18v18.92l15.65-18.92h10.82l-15.03 17.32 16.03 26.83h-10.21l-11.44-20.21-5.62 6.22v13.99h-8.83V13.9"></path>
+                </svg>

package/index.js

@@ -77,7 +77,8 @@ const getContentSecurityPolicy = (config, res) => {
     imgSrc: ["'self'"],
     fontSrc: ["'self'", 'data:', 'https://design-system.service.gov.uk'],
     scriptSrc: ["'self'", `'nonce-${res.locals.nonce}'`],
-    'frame-ancestors': ["'none'"]
+    'frame-ancestors': ["'none'"],
+    manifestSrc: ["'self'"]
   };
   /* eslint-enable quotes */
 
@@ -95,7 +96,8 @@ const getContentSecurityPolicy = (config, res) => {
       'https://www.google-analytics.com',
       'https://region1.google-analytics.com',
       'https://region1.analytics.google.com'
-    ]
+    ],
+    manifestSrc: ["'self'"]
   };
 
   if (config.gaTagId) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hof",
   "description": "A bootstrap for HOF projects",
-  "version": "22.12.0-unit-of-measure-beta.1",
+  "version": "22.13.0-frontend-v4-beta.1",
   "license": "MIT",
   "main": "index.js",
   "author": "HomeOffice",
@@ -59,7 +59,7 @@
     "findup": "^0.1.5",
     "glob": "^7.2.3",
     "govuk-elements-sass": "^3.1.3",
-    "govuk-frontend": "3.15.0",
+    "govuk-frontend": "4.10",
     "govuk_template_mustache": "^0.26.0",
     "helmet": "^3.23.3",
     "hogan-express-strict": "^0.5.4",

package/sandbox/apps/sandbox/fields.js

@@ -3,7 +3,6 @@
 
 const dateComponent = require('../../../').components.date;
 const staticAppealStages = require('./lib/staticAppealStages');
-const amountWithUnitSelectComponent = require('../../../').components.amountWithUnitSelect;
 
 module.exports = {
   'landing-page-radio': {
@@ -125,21 +124,5 @@ module.exports = {
       value: '',
       label: 'fields.appealStages.options.null'
     }].concat(staticAppealStages.getstaticAppealStages())
-  },
-  'amountWithUnitSelect' : amountWithUnitSelectComponent('amountWithUnitSelect', {
-    mixin: 'input-amount-with-unit-select',
-    amountLabel: "Amount-",
-    unitLabel: "Unit-",
-    options: [
-      { "null": "Select" },
-      { "label": "non trans option 1", "value": "1" },
-      { "label": "non trans option 2", "value": "2" }
-    ],
-    hint: "E.G: 5 Kilogram",
-    legend: 'Enter An Amount',
-    isPageHeading: 'true',
-    unitOptional: 'false',
-    amountOptional: 'true',
-    validate: ['alphanum']
-  })
+  }
 }

package/sandbox/apps/sandbox/index.js

@@ -31,10 +31,6 @@ module.exports = {
     '/dob': {
       fields: ['dateOfBirth'],
       locals: { showSaveAndExit: true },
-      next: '/amount-unit'
-    },
-    '/amount-unit':{ 
-      fields: ['amountWithUnitSelect'], 
       next: '/address'
     },
     '/address': {

package/sandbox/apps/sandbox/sections/summary-data-sections.js

@@ -39,11 +39,5 @@ module.exports = {
   ],
   whatHappened: [
     'whatHappened'
-  ],
-  amountWithUnitSelect:
-  [{
-    field: 'amountWithUnitSelect',
-    parse: val => val ?
-      (val.substring(0, val.lastIndexOf('-')) || '0') + ' ' +  val.substring(val.lastIndexOf('-') + 1) : ''
-  }]
+  ]
 };

package/sandbox/apps/sandbox/translations/en/default.json

@@ -107,24 +107,6 @@
       "options": {
         "null": "Select..."
       }
-    },
-    "amountWithUnitSelect": {
-      "label": "Amount",
-      "amountLabel": "Amount:",
-      "unitLabel": "Unit:",
-      "options": [
-        {
-          "null": "Select..."
-        },
-        {
-          "label": "Litres",
-          "value": "L"
-        },
-        {
-          "label": "Kilograms",
-          "value": "KG"
-        }
-      ]
     }
   },
   "journey": {
@@ -181,9 +163,6 @@
         },
         "whatHappened": {
           "header": "What happened"
-        },
-        "amountWithUnitSelect": {
-          "header": "Entered amount"
         }
       }
     },
@@ -261,18 +240,6 @@
     },
     "appealStages": {
       "required": "Select an appeal stage from the list"
-    },
-    "amountWithUnitSelect": {
-      "default": "Enter the amount in the correct format; for example, 10 Litres",
-      "alphanum": "The amount must not contain any special characters",
-      "required": "Enter an amount and a unit value"
-    },
-    "amountWithUnitSelect-unit": {
-      "default": "A valid value must be selected as the amount unit",
-      "required": "A unit must be selected for the amount"
-    },
-    "amountWithUnitSelect-amount": {
-      "required": "An amount must be selected with the unit"
     }
   }
 }