hof 20.0.0-beta.9 → 20.0.0

package/components/index.js

@@ -5,5 +5,6 @@ module.exports = {
   clearSession: require('./clear-session'),
   date: require('./date'),
   emailer: require('./emailer'),
-  summary: require('./summary')
+  summary: require('./summary'),
+  notify: require('./notify')
 };

package/components/notify/index.js

@@ -0,0 +1,60 @@
+'use strict';
+
+const Notify = require('./notify');
+const Hogan = require('hogan.js');
+const fs = require('fs');
+
+module.exports = config => {
+  const notify = new Notify(config);
+  config.parse = config.parse || (data => data);
+
+  if (!config.recipient) {
+    throw new Error('Email recipient must be defined');
+  }
+  if (typeof config.template !== 'string') {
+    throw new Error('Email template must be defined');
+  }
+
+  return superclass => class NotifyBehaviour extends superclass {
+    successHandler(req, res, next) {
+      Promise.resolve()
+        .then(() => {
+          return new Promise((resolve, reject) => {
+            fs.readFile(config.template, (err, template) => err ? reject(err) : resolve(template.toString('utf8')));
+          });
+        })
+        .then(template => {
+          const data = config.parse(req.sessionModel.toJSON(), req.translate);
+          return Hogan.compile(template).render(data);
+        })
+        .then(body => {
+          const settings = { body };
+
+          if (typeof config.recipient === 'function') {
+            settings.recipient = config.recipient(req.sessionModel.toJSON());
+          } else {
+            settings.recipient = req.sessionModel.get(config.recipient) || config.recipient;
+          }
+          if (typeof settings.recipient !== 'string' || !settings.recipient.includes('@')) {
+            throw new Error('hof-behaviour-emailer: invalid recipient');
+          }
+
+          if (typeof config.subject === 'function') {
+            settings.subject = config.subject(req.sessionModel.toJSON(), req.translate);
+          } else {
+            settings.subject = config.subject;
+          }
+
+          return settings;
+        })
+        .then(settings => {
+          return notify.send(settings);
+        })
+        .then(() => {
+          super.successHandler(req, res, next);
+        }, next);
+    }
+  };
+};
+
+module.exports.Notify = Notify;

package/components/notify/notify.js

@@ -0,0 +1,25 @@
+'use strict';
+const NotifyClient = require('notifications-node-client').NotifyClient;
+const { v4: uuidv4 } = require('uuid');
+
+module.exports = class Notify {
+  constructor(opts) {
+    const options = opts || {};
+    this.options = options;
+    this.notifyClient =  new NotifyClient(options.notifyApiKey);
+    this.notifyTemplate = options.notifyTemplate;
+  }
+
+  send(email) {
+    const reference = uuidv4();
+
+    return this.notifyClient.sendEmail(this.notifyTemplate, email.recipient, {
+      personalisation: {
+        'email-subject': email.subject,
+        'email-body': email.body
+      },
+      reference });
+  }
+};
+
+module.exports.NotifyClient = NotifyClient;

package/config/sanitisation-rules.js

@@ -3,27 +3,30 @@
 
 const sanitisationBlacklistArray = {
   // Input will be sanitised using the below rules
+  // Each one is an array which will run sequentially
+  // Some have multiple steps which allow us to remove dups then append the suffix
+  // Useful for ensuring we're not re-sanitising the same input multiple times (and appending extra hypens each time)
   // The key is what we're sanitising out
   // The regex is the rule we used to find them (note some dictate repeating characters)
   // And the replace is what we're replacing that pattern with. Usually nothing sometimes a
   // single character or sometimes a single character followed by a "-"
-  '/*': { regex: '\/\\*', replace: '-' },
-  '*/': { regex: '\\*\\/', replace: '-' },
-  '|': { regex: '\\|', replace: '-' },
-  '&&': { regex: '&&+', replace: '&' },
-  '@@': { regex: '@@+', replace: '@' },
-  '/..;/': { regex: '/\\.\\.;/', replace: '-' }, // Purposely input before ".." as they conflict
-  // '..': { regex: '\\.\\.+', replace: '.' }, // Agreed to disable this rule for now unless its specifically required
-  '/etc/passwd': { regex: '\/etc\/passwd', replace: '-' },
-  'c:\\': { regex: 'c:\\\\', replace: '-' },
-  'cmd.exe': { regex: 'cmd\\.exe', replace: '-' },
-  '<': { regex: '<', replace: '<-' },
-  '>': { regex: '>', replace: '>-' },
-  '[': { regex: '\\[+', replace: '[-' },
-  ']': { regex: '\\]+', replace: ']-' },
-  '~': { regex: '~', replace: '~-' },
-  '&#': { regex: '&#', replace: '-' },
-  '%U': { regex: '%U', replace: '-' }
+  '/*': [{ regex: '\/\\*', replace: '-' }],
+  '*/': [{ regex: '\\*\\/', replace: '-' }],
+  '|': [{ regex: '\\|', replace: '-' }],
+  '&&': [{ regex: '&&+', replace: '&' }],
+  '@@': [{ regex: '@@+', replace: '@' }],
+  '/..;/': [{ regex: '/\\.\\.;/', replace: '-' }], // Purposely input before ".." as they conflict
+  // '..': [{ regex: '\\.\\.+', replace: '.' }], // Agreed to disable this rule for now unless its specifically required
+  '/etc/passwd': [{ regex: '\/etc\/passwd', replace: '-' }],
+  'c:\\': [{ regex: 'c:\\\\', replace: '-' }],
+  'cmd.exe': [{ regex: 'cmd\\.exe', replace: '-' }],
+  '<': [{ regex: '<+', replace: '<' }, { regex: '<(?!-)', replace: '<-' }],
+  '>': [{ regex: '>+', replace: '>' }, { regex: '>(?!-)', replace: '>-' }],
+  '[': [{ regex: '\\[+', replace: '[' }, { regex: '\\[(?!-)', replace: '[-' }],
+  ']': [{ regex: '\\]+', replace: ']-' }, { regex: '\\](?!-)', replace: ']-' }],
+  '~': [{ regex: '~+', replace: '~' }, { regex: '~(?!-)', replace: '~-' }],
+  '&#': [{ regex: '&#', replace: '-' }],
+  '%U': [{ regex: '%U', replace: '-' }]
 };
 
 module.exports = sanitisationBlacklistArray;

package/controller/base-controller.js

@@ -177,9 +177,11 @@ module.exports = class BaseController extends EventEmitter {
           // For each property in our form data
           Object.keys(sanitisationBlacklistArray).forEach(function (blacklisted, blacklistedIndex) {
             const blacklistedDetail = sanitisationBlacklistArray[blacklisted];
-            const regexQuery = new RegExp(blacklistedDetail.regex, 'gi');
-            // Will perform the required replace based on our passed in regex and the replace string
-            req.form.values[property] = req.form.values[property].replace(regexQuery, blacklistedDetail.replace);
+            blacklistedDetail.forEach(step => {
+              const regexQuery = new RegExp(step.regex, 'gi');
+              // Will perform the required replace based on our passed in regex and the replace string
+              req.form.values[property] = req.form.values[property].replace(regexQuery, step.replace);
+            });
           });
         }
       });

package/controller/controller.js

@@ -113,8 +113,10 @@ module.exports = class Controller extends BaseController {
       baseUrl: req.baseUrl,
       skipToMain: this.getFirstFormItem(req.form.options.fields),
       title: this.getTitle(route, lookup, req.form.options.fields, res.locals),
+      journeyHeaderURL: this.getJourneyHeaderURL(req.baseUrl),
       header: this.getHeader(route, lookup, res.locals),
       captionHeading: this.getCaptionHeading(route, lookup, res.locals),
+      warning: this.getWarning(route, lookup, res.locals),
       subHeading: this.getSubHeading(route, lookup, res.locals),
       intro: this.getIntro(route, lookup, res.locals),
       backLink: this.getBackLink(req, res),
@@ -123,6 +125,10 @@ module.exports = class Controller extends BaseController {
     }, stepLocals);
   }
 
+  getJourneyHeaderURL(url) {
+    return url === '' ? '/' : url;
+  }
+
   getFirstFormItem(fields) {
     let firstFieldKey;
     if (_.size(fields)) {
@@ -143,6 +149,10 @@ module.exports = class Controller extends BaseController {
     return lookup(`pages.${route}.subHeading`, locals);
   }
 
+  getWarning(route, lookup, locals) {
+    return lookup(`pages.${route}.warning`, locals);
+  }
+
   getTitle(route, lookup, fields, locals) {
     let fieldName = '';
     if (_.size(fields)) {
@@ -166,13 +176,18 @@ module.exports = class Controller extends BaseController {
       Object.keys(req.form.errors).forEach(key => {
         if (req.form && req.form.options && req.form.options.fields) {
           const field = req.form.options.fields[key];
-          // get first option for radios
-          if (field.mixin === 'radio-group') {
-            req.form.errors[key].errorLinkId = key + '-' + field.options[0];
+          // get first option for radios and checkbox
+          if (field.mixin === 'radio-group' || field.mixin === 'checkbox-group') {
+            // get first option for radios and checkbox where there is a toggle
+            if(typeof field.options[0] === 'object') {
+              req.form.errors[key].errorLinkId = key + '-' + field.options[0].value;
+            } else {
+              req.form.errors[key].errorLinkId = key + '-' + field.options[0];
+            }
           // eslint-disable-next-line brace-style
           }
           // get first field for date input control
-          else if (field && field.controlType === 'date-input') {
+          else if (field && field.mixin === 'input-date') {
             req.form.errors[key].errorLinkId = key + '-day';
           } else {
             req.form.errors[key].errorLinkId = key;

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

@@ -215,6 +215,7 @@ module.exports = function (options) {
         child: field.child,
         isPageHeading: field.isPageHeading,
         attributes: field.attributes,
+        isPrefixOrSuffix: _.map(field.attributes, item => {if (item.prefix || item.suffix !== undefined) return true;}),
         renderChild: renderChild.bind(this)
       });
     }
@@ -224,6 +225,7 @@ module.exports = function (options) {
       const field = Object.assign({}, this.options.fields[key] || options.fields[key]);
       const legend = field.legend;
       const detail = field.detail;
+      const warningValue = 'fields.' + key + '.warning';
       let legendClassName;
       let legendValue = 'fields.' + key + '.legend';
       if (legend) {
@@ -241,6 +243,8 @@ module.exports = function (options) {
         legendClassName: legendClassName,
         role: opts.type === 'radio' ? 'radiogroup' : 'group',
         isPageHeading: field.isPageHeading,
+        isWarning: field.isWarning,
+        warning: t(warningValue),
         detail: detail ? detail : '',
         hint: conditionalTranslate(getTranslationKey(field, key, 'hint')),
         options: _.map(field.options, function (obj) {
@@ -303,7 +307,7 @@ module.exports = function (options) {
         invalid: this.errors && this.errors[key] && opts.required,
         label: t(fieldLabel || 'fields.' + key + '.label'),
         selected: selected,
-        className: classNames(field) || 'block-label',
+        className: classNames(field) || 'govuk-label govuk-checkboxes__label',
         child: field.child,
         renderChild: renderChild.bind(this)
       });
@@ -444,8 +448,8 @@ module.exports = function (options) {
               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, isRequired }));
-            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, isRequired }));
+            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-group.html

@@ -5,6 +5,15 @@
                 {{legend}}
             {{#isPageHeading}}</h1>{{/isPageHeading}}
         </legend>
+        {{#isWarning}}
+        <div class="govuk-warning-text">
+            <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
+            <strong class="govuk-warning-text__text">
+              <span class="govuk-warning-text__assistive">Warning</span>
+             {{warning}}
+            </strong>
+          </div>
+        {{/isWarning}}
         {{#hint}}<div id="{{key}}-hint" class="govuk-hint">{{hint}}</div>{{/hint}}
         {{#error}}
         <p id="{{key}}-error" class="govuk-error-message">
@@ -28,7 +37,7 @@
             >
             <label class="govuk-label govuk-checkboxes__label" for="{{key}}-{{value}}">
                 {{{label}}}
-                {{#optionHint}}<div id="{{key}}-{{value}}-item-hint" class="govuk-hint govuk-radios__hint">{{optionHint}}</div>{{/optionHint}}
+                {{#optionHint}}<div id="{{key}}-{{value}}-item-hint" class="govuk-hint">{{optionHint}}</div>{{/optionHint}}
             </label>
         </div>
         {{#renderChild}}{{/renderChild}}

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

@@ -14,7 +14,7 @@
               type="{{type}}"
               name="{{id}}"
               id="{{id}}"
-              class="govuk-input{{#className}} {{className}}{{/className}}{{#error}} invalid-input{{/error}}"
+              class="govuk-input{{#className}} {{className}}{{/className}}{{#error}} govuk-input--error{{/error}}"
               aria-required="{{required}}"
               {{#value}} value="{{value}}"{{/value}}
               {{#min}} min="{{min}}"{{/min}}

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

@@ -1,5 +1,5 @@
 <div id="{{id}}-group" class="{{#compound}} form-group-compound{{/compound}}{{#formGroupClassName}}{{formGroupClassName}}{{/formGroupClassName}}{{#error}} govuk-form-group--error{{/error}}">
-    {{#isPageHeading}}<h1 class="govuk-label-wrapper">{{/isPageHeading}}<label for="{{id}}" class="{{labelClassName}}">
+    {{#isPageHeading}}<h1 class="govuk-label-wrapper">{{/isPageHeading}}<label for="{{id}}" class="{{labelClassName}}{{#isPageHeading}}govuk-label--l{{/isPageHeading}}">
         {{{label}}}
       </label>
     {{#isPageHeading}}</h1>{{/isPageHeading}}
@@ -10,6 +10,7 @@
       </p>
     {{/error}}
     {{#renderChild}}{{/renderChild}}
+    {{#isPrefixOrSuffix}}<div class="govuk-input__wrapper">{{/isPrefixOrSuffix}}
         {{#attributes}}
             {{#prefix}}
                 <div class="govuk-input__prefix" aria-hidden="true">{{prefix}}</div>
@@ -19,7 +20,7 @@
             type="{{type}}"
             name="{{id}}"
             id="{{id}}"
-            class="{{^className}}govuk-input{{/className}}{{#className}}{{className}}{{/className}}{{#error}} invalid-input{{/error}}"
+            class="{{^className}}govuk-input{{/className}}{{#className}}{{className}}{{/className}}{{#error}} govuk-input--error{{/error}}"
             aria-required="{{required}}"
             {{#value}} value="{{value}}"{{/value}}
             {{#min}} min="{{min}}"{{/min}}
@@ -35,7 +36,8 @@
         >
         {{#attributes}}
             {{#suffix}}
-                <div class="govuk-input__prefix" aria-hidden="true">{{suffix}}</div>
+                <div class="govuk-input__suffix" aria-hidden="true">{{suffix}}</div>
             {{/suffix}}
         {{/attributes}}
+    {{#isPrefixOrSuffix}}</div>{{/isPrefixOrSuffix}}
 </div>

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

@@ -5,6 +5,15 @@
               {{legend}}
           {{#isPageHeading}}</h1>{{/isPageHeading}}
       </legend>
+      {{#isWarning}}
+        <div class="govuk-warning-text">
+            <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
+            <strong class="govuk-warning-text__text">
+              <span class="govuk-warning-text__assistive">Warning</span>
+             {{warning}}
+            </strong>
+          </div>
+        {{/isWarning}}
       {{#hint}}<div id="{{key}}-hint" class="govuk-hint">{{hint}}</div>{{/hint}}
       {{#error}}<p id="{{key}}-error" class="govuk-error-message"><span class="govuk-visually-hidden">Error:</span> {{error.message}}</p>{{/error}}
       {{{detail}}}

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

@@ -9,7 +9,7 @@
         {{/error}}
     </label>
     {{#isPageHeading}}</h1>{{/isPageHeading}}
-    <select id="{{id}}" class="govuk-select{{#className}} {{className}}{{/className}}{{#error}} invalid-input{{/error}}" name="{{id}}" aria-required="{{required}}">
+    <select id="{{id}}" class="govuk-select{{#className}} {{className}}{{/className}}{{#error}} govuk-select--error{{/error}}" name="{{id}}" aria-required="{{required}}">
     {{#options}}
         <option value="{{value}}" {{#selected}}selected{{/selected}}>{{label}}</option>
     {{/options}}

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

@@ -2,7 +2,7 @@
 <div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="{{maxlength}}">
 {{/maxlength}}
 <div id="{{id}}-group" class="{{#compound}}form-group-compound {{/compound}}{{#formGroupClassName}}{{formGroupClassName}}{{/formGroupClassName}}{{#error}} govuk-form-group--error{{/error}}">
-    {{#isPageHeading}}<h1 class="govuk-label-wrapper">{{/isPageHeading}}<label for="{{id}}" class="{{labelClassName}}">
+    {{#isPageHeading}}<h1 class="govuk-label-wrapper">{{/isPageHeading}}<label for="{{id}}" class="{{labelClassName}}{{#isPageHeading}}govuk-label--l{{/isPageHeading}}">
         {{{label}}}
         {{#error}} 
         <p id="{{id}}-error" class="govuk-error-message">
@@ -16,7 +16,7 @@
     <textarea
         name="{{id}}"
         id="{{id}}"
-        class="govuk-textarea{{#className}} {{className}}{{/className}} {{#maxlength}}maxlength{{/maxlength}}{{#error}} invalid-input{{/error}}"
+        class="govuk-textarea{{#className}} {{className}}{{/className}} {{#maxlength}}maxlength{{/maxlength}}{{#error}} govuk-input--error{{/error}}"
         aria-required="{{required}}"
         {{#maxlength}} maxlength="{{maxlength}}"{{/maxlength}}
         {{#attributes}}

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

@@ -44,9 +44,16 @@
     {{/gaTagId}}
   {{/cookieMessage}}
   {{$footerSupportLinks}}
-    <li class="govuk-footer__inline-list-item"><a class="govuk-footer__link" href="/cookies">{{#t}}base.cookies{{/t}}</a></li>
-    <li class="govuk-footer__inline-list-item"><a  class="govuk-footer__link" href="/accessibility">{{#t}}base.accessibility{{/t}}</a></li>
-    <li class="govuk-footer__inline-list-item"><a  class="govuk-footer__link" href="/terms-and-conditions">{{#t}}base.terms{{/t}}</a></li>
+    <ul class="govuk-footer__inline-list">
+      {{#footerSupportLinks}}
+        <li class="govuk-footer__inline-list-item"><a class="govuk-footer__link" href="{{path}}">{{#t}}{{property}}{{/t}}</a></li>
+      {{/footerSupportLinks}}
+      {{^footerSupportLinks}}
+        <li class="govuk-footer__inline-list-item"><a class="govuk-footer__link" href="/cookies">{{#t}}base.cookies{{/t}}</a></li>
+        <li class="govuk-footer__inline-list-item"><a  class="govuk-footer__link" href="/accessibility">{{#t}}base.accessibility{{/t}}</a></li>
+        <li class="govuk-footer__inline-list-item"><a  class="govuk-footer__link" href="/terms-and-conditions">{{#t}}base.terms{{/t}}</a></li>
+      {{/footerSupportLinks}}
+    </ul>
   {{/footerSupportLinks}}
   {{$bodyEnd}}
     {{> partials-gatag}}

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

@@ -20,7 +20,7 @@
 	</div>
 	<div class="gem-c-cookie-banner__confirmation govuk-width-container" tabindex="0" 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="/student-help/cookies">change your cookie settings</a> at any time.
+      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>

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

@@ -1,7 +1,8 @@
 <form action="" method="POST" {{$encoding}}{{/encoding}} autocomplete="off" novalidate="true" spellcheck="false">
   {{$intro}}
-    {{#intro}}<span class="govuk-hint" >{{intro}}</span>{{/intro}}
+    {{#intro}}<p>{{intro}}</p>{{/intro}}
   {{/intro}}
+
   {{$form}}{{/form}}
   {{#csrf-token}}
     <input type="hidden" name="x-csrf-token" value="{{csrf-token}}" />

package/frontend/template-partials/views/partials/maincontent-left.html

@@ -3,8 +3,8 @@
   <div class="govuk-grid-column-two-thirds">
     {{$validationSummary}}{{/validationSummary}}
     {{#captionHeading}}<span class="govuk-caption-l">{{captionHeading}}</span>{{/captionHeading}}
-    {{#header}}<h1 class="govuk-heading-xl">{{header}}</h1>{{/header}}
-    {{#subHeading}}<div id="page-header" class="govuk-heading-l">{{subHeading}}</div>{{/subHeading}}
+    {{#header}}<h1 class="govuk-heading-l">{{header}}</h1>{{/header}}
+    {{#subHeading}}<div id="page-header"><h2 class="govuk-heading-m">{{subHeading}}</h2></div>{{/subHeading}}
     {{$content}}{{/content}}
   </div>
 {{/content-outer}}

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__link--service-name" id="proposition-name">{{$journeyHeader}}{{/journeyHeader}}</a>
   {{/startPageRedirectUrl}}
   {{^startPageRedirectUrl}}
-    <a href="{{baseUrl}}" class="govuk-header__link govuk-header__link--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/template-partials/views/partials/summary-table-row.html

@@ -5,10 +5,10 @@
         <dt class="confirm-label">{{label}}</dt>
         <dd class="confirm-value" data-value="{{value}}">{{value}}</dd>
     {{#changeLink}}
-        <dd><span class="link"><a href="{{changeLink}}" id="{{field}}-change-{{index}}">{{#t}}buttons.change{{/t}} <span class="visuallyhidden">{{changeLinkDescription}} from {{value}}</span></a></span></dd>
+        <dd><span><a class="govuk-link" href="{{changeLink}}" id="{{field}}-change-{{index}}">{{#t}}buttons.change{{/t}} <span class="visuallyhidden">{{changeLinkDescription}} from {{value}}</span></a></span></dd>
     {{/changeLink}}
     {{^changeLink}}
-        <dd><span class="link"><a href="{{baseUrl}}{{step}}/edit#{{field}}" id="{{field}}-change">{{#t}}buttons.change{{/t}} <span class="visuallyhidden">{{changeLinkDescription}} from {{value}}</span></a></span></dd>
+        <dd><span><a class="govuk-link" href="{{baseUrl}}{{step}}/edit#{{field}}" id="{{field}}-change">{{#t}}buttons.change{{/t}} <span class="visuallyhidden">{{changeLinkDescription}} from {{value}}</span></a></span></dd>
     {{/changeLink}}
     {{/isSeparator}}
 </div>

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

@@ -0,0 +1,7 @@
+<div class="govuk-warning-text">
+    <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
+    <strong class="govuk-warning-text__text">
+    <span class="govuk-warning-text__assistive">Warning</span>
+        {{warning}}
+    </strong>
+</div>

package/frontend/template-partials/views/session-timeout.html

@@ -1,6 +1,7 @@
 {{<error}}
   {{$content}}
-    <p>{{{content.message}}}</p>
+    <h1 class="govuk-heading-l">{{{content.title}}}</h1>
+    <h2 class="govuk-heading-m">{{{content.message}}}</h2>
     <a href="{{startLink}}" class="govuk-button" role="button">{{#t}}buttons.start-again{{/t}}</a>
   {{/content}}
 {{/error}}

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

@@ -12,6 +12,10 @@ $path: "/public/images/" !default;
 // https://github.com/alphagov/govuk_elements/blob/master/packages/govuk-elements-sass/public/sass/_elements.scss
 @import "govuk-elements-sass/public/sass/elements";
 
+// Govuk frontend
+// https://github.com/alphagov/govuk-frontend-docs
+@import "govuk-frontend";
+
 // Custom
 @import "base";
 @import "layout";

package/frontend/themes/gov-uk/styles/modules/_validation.scss

@@ -25,7 +25,7 @@
 .govuk-form-group--error {
     box-sizing: border-box;
     padding-left: $gutter-half - $validation-bdr-size;
-    border-left: $validation-bdr-size-lg solid $error-colour;
+    //border-left: $validation-bdr-size-lg solid $error-colour;
 
     &:focus {
         outline: $focus-outline;
@@ -42,7 +42,7 @@
         margin-bottom: 0.5em;
     }
     @include bold-19;
-    color: $error-colour;
+    //color: $error-colour;
 }
 
 .invalid-input,

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

@@ -71,11 +71,20 @@ function formFocus() {
   var labels;
   var summaries;
 
-  if (getElementFromSummaryLink && getEditPath === 'edit') {
+  var editMode = getElementFromSummaryLink && getEditPath === 'edit';
+
+  if (getElementFromSummaryLink && document.getElementById(getElementFromSummaryLink) && editMode) {
     document.getElementById(getElementFromSummaryLink).focus();
+  }
+
+  if (getElementFromSummaryLink && document.getElementById(getElementFromSummaryLink + '-group') && editMode) {
     document.getElementById(getElementFromSummaryLink + '-group').scrollIntoView();
   }
 
+  if (document.getElementById(getElementFromSummaryLink + '-day') && forms.length === 1 && editMode) {
+    document.getElementById(getElementFromSummaryLink + '-day').focus();
+  }
+
   if (forms.length > 0) {
     labels = document.getElementsByTagName('label');
     if (labels) {

package/frontend/toolkit/assets/javascript/progressive-reveal.js

@@ -7,12 +7,14 @@ var groupBy = require('lodash').groupBy;
 var helpers = require('./helpers');
 var inputs; var groups;
 var toggleAttr = 'data-toggle';
-var hiddenClass = 'js-hidden';
+var checkboxHiddenClass = 'govuk-checkboxes__conditional--hidden';
+var radioHiddenClass = 'govuk-radios__conditional--hidden';
 
 function inputClicked(e, target) {
   target = target || helpers.target(e);
   var shown;
   each(groups[target.name], function (input) {
+    var hiddenClass = (input.type.match(/checkbox/)) ? checkboxHiddenClass : radioHiddenClass;
     var id = input.getAttribute('aria-controls');
     var toggle = document.getElementById(id);
     if (toggle) {

package/frontend/toolkit/assets/javascript/validation.js

@@ -24,7 +24,12 @@ function clicked(e) {
     }
 
     if (inputs) {
-      inputs[0].focus();
+      if (inputs[0].getAttribute('type') === 'hidden') {
+        var getVisibleElements = group.querySelectorAll('input[type=text]');
+        getVisibleElements[0].focus();
+      } else {
+        inputs[0].focus();
+      }
     }
   }
 }

package/index.js

@@ -79,7 +79,7 @@ const getContentSecurityPolicy = (config, res) => {
     fontSrc: ['fonts.gstatic.com '],
     scriptSrc: ['www.google-analytics.com', 'ssl.google-analytics.com'],
     imgSrc: ['www.google-analytics.com', 'ssl.gstatic.com'],
-    connectSrc: ['www.google-analytics.com']
+    connectSrc: ['https://www.google-analytics.com', 'https://region1.google-analytics.com']
   };
 
   if (config.gaTagId) {

package/middleware/errors.js

@@ -12,6 +12,8 @@ const getContent = (err, translate) => {
   if (err.code === 'SESSION_TIMEOUT') {
     err.status = 401;
     err.template = 'session-timeout';
+    err.title = (translate && translate('errors.session.title'));
+    err.message = (translate && translate('errors.session.message'));
     content.title = (translate && translate('errors.session.title'));
     content.message = (translate && translate('errors.session.message'));
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hof",
   "description": "A bootstrap for HOF projects",
-  "version": "20.0.0-beta.9",
+  "version": "20.0.0",
   "license": "MIT",
   "main": "index.js",
   "author": "HomeOffice",
@@ -72,13 +72,14 @@
     "minimatch": "^3.0.3",
     "minimist": "^1.2.6",
     "mixwith": "^0.1.1",
-    "moment": "^2.29.2",
+    "moment": "^2.29.4",
     "morgan": "^1.10.0",
     "mustache": "^2.3.0",
     "nodemailer": "^6.6.3",
     "nodemailer-ses-transport": "^1.5.0",
     "nodemailer-smtp-transport": "^2.7.4",
     "nodemailer-stub-transport": "^1.1.0",
+    "notifications-node-client": "^5.1.1",
     "redis": "^3.1.2",
     "reqres": "^3.0.1",
     "request": "^2.79.0",
@@ -88,6 +89,7 @@
     "uglify-js": "^3.14.3",
     "underscore": "^1.12.1",
     "urijs": "^1.19.11",
+    "uuid": "^8.3.2",
     "winston": "^3.7.2"
   },
   "devDependencies": {

package/sandbox/apps/sandbox/fields.js

@@ -21,6 +21,7 @@ module.exports = {
     isPageHeading: 'true'
   },
   'dateOfBirth': dateComponent('dateOfBirth', {
+    mixin: 'input-date',
     isPageHeading: 'true',
     validate: [
       'required',