hof 20.0.0-beta.8 → 20.0.0-redis-beta.32-redis-beta

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/hof-defaults.js

@@ -27,7 +27,8 @@ const defaults = {
   ignoreMiddlewareLogs: ['/healthz'],
   redis: {
     port: process.env.REDIS_PORT || '6379',
-    host: process.env.REDIS_HOST || '127.0.0.1'
+    host: process.env.REDIS_HOST || '127.0.0.1',
+    legacyMode: true
   },
   session: {
     ttl: process.env.SESSION_TTL || 1800,

package/controller/controller.js

@@ -115,6 +115,7 @@ module.exports = class Controller extends BaseController {
       title: this.getTitle(route, lookup, req.form.options.fields, res.locals),
       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),
@@ -143,6 +144,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 +171,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>
+      {{#footerSupportLinks}}
+        <li class="govuk-footer__inline-list-item"><a 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/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/themes/gov-uk/client-js/index.js

@@ -1,4 +1,4 @@
-/* eslint-disable no-var */
+/* eslint-disable no-var, vars-on-top, no-unused-vars */
 'use strict';
 
 var toolkit = require('../../../toolkit');
@@ -9,13 +9,11 @@ var characterCount = toolkit.characterCount;
 var validation = toolkit.validation;
 
 var GOVUK = require('govuk-frontend');
-// eslint-disable-next-line no-unused-vars
+GOVUK.initAll();
+window.GOVUK = GOVUK;
 var skipToMain = require('./skip-to-main');
-// eslint-disable-next-line no-unused-vars
 var cookie = require('./govuk-cookies');
 var cookieSettings = require('./cookieSettings');
-GOVUK.initAll();
-window.GOVUK = GOVUK;
 
 toolkit.detailsSummary();
 

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/lib/health.js

@@ -15,7 +15,7 @@ module.exports = redis => {
 
   router.get('/readiness', healthCheck({
     test: () => {
-      if (!redis.connected && !redis.ready) {
+      if (!redis.isOpen && !redis.isReady) {
         return new Error('Session store unhealthy');
       }
       return 0;

package/lib/sessions.js

@@ -50,7 +50,7 @@ module.exports = (app, config) => {
       logger.error(e);
     });
   }
-
+  client.connect();
   const store = new RedisStore({
     client: client,
     ttl: config.session.ttl,

package/middleware/rate-limiter.js

@@ -25,9 +25,11 @@ module.exports = (options, rateLimitType) => {
     }
 
     const closeConnection = async err => {
-      await redisClient.quit();
+      await redisClient.v4.QUIT();
       return next(err);
     };
+    redisClient.on('error', err => logger.log('error', err));
+    await redisClient.connect();
 
     try {
       // fetch records of current user using IP address, returns null when no record is found

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hof",
   "description": "A bootstrap for HOF projects",
-  "version": "20.0.0-beta.8",
+  "version": "20.0.0-redis-beta.32-redis-beta",
   "license": "MIT",
   "main": "index.js",
   "author": "HomeOffice",
@@ -42,7 +42,7 @@
     "callsite": "^1.0.0",
     "chalk": "^2.0.0",
     "chokidar": "^3.4.0",
-    "connect-redis": "^5.2.0",
+    "connect-redis": "^6.1.3",
     "cookie-parser": "^1.4.6",
     "cp": "^0.2.0",
     "csrf": "^3.0.2",
@@ -79,7 +79,8 @@
     "nodemailer-ses-transport": "^1.5.0",
     "nodemailer-smtp-transport": "^2.7.4",
     "nodemailer-stub-transport": "^1.1.0",
-    "redis": "^3.1.2",
+    "notifications-node-client": "^5.1.1",
+    "redis": "^4.3.1",
     "reqres": "^3.0.1",
     "request": "^2.79.0",
     "rimraf": "^3.0.2",

package/sandbox/apps/sandbox/fields.js

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

package/sandbox/apps/sandbox/index.js

@@ -30,11 +30,7 @@ module.exports = {
     },
     '/dob': {
       fields: ['dateOfBirth'],
-      next: '/address',
-      locals: {
-        step: 'dob',
-        labelClassName: 'govuk-input'
-      }
+      next: '/address'
     },
     '/address': {
       fields: ['building', 'street', 'townOrCity', 'postcode'],