hof 22.1.0-timeout-warning-sign-in-beta.3 → 22.2.0-time-mixin-beta

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

@@ -13,6 +13,7 @@ const PANELMIXIN = 'partials/mixins/panel';
 const PARTIALS = [
   'partials/forms/input-text-group',
   'partials/forms/input-text-date',
+  'partials/forms/input-text-time',
   'partials/forms/input-submit',
   'partials/forms/select',
   'partials/forms/checkbox',
@@ -213,6 +214,7 @@ module.exports = function (options) {
         label: t(lKey),
         labelClassName: labelClassName ? `govuk-label ${labelClassName}` : 'govuk-label',
         formGroupClassName: classNames(field, 'formGroupClassName') || extension.formGroupClassName || 'govuk-form-group',
+        timeInputItemClassName: 'time-input__item',
         hint: hint,
         hintId: extension.hintId || (hint ? key + '-hint' : null),
         error: this.errors && this.errors[key],
@@ -221,11 +223,12 @@ module.exports = function (options) {
         required: required,
         pattern: extension.pattern,
         date: extension.date,
+        time: extension.time,
         autocomplete: autocomplete,
         child: field.child,
         isPageHeading: field.isPageHeading,
         attributes: field.attributes,
-        isPrefixOrSuffix: _.map(field.attributes, item => {if (item.prefix || item.suffix !== undefined) return true;}),
+        isPrefixOrSuffix: _.map(field.attributes, item => { if (item.prefix || item.suffix !== undefined) return true; }),
         isMaxlengthOrMaxword: maxlength(field) || extension.maxlength || maxword(field) || extension.maxword,
         renderChild: renderChild.bind(this)
       });
@@ -468,6 +471,47 @@ module.exports = function (options) {
             return parts.concat(monthPart, yearPart).join('\n');
           };
         }
+      },
+      'input-time': {
+        handler: function () {
+          /**
+          * props: '[value] [id]'
+          */
+          return function (key) {
+            const field = Object.assign({}, this.options.fields[key] || options.fields[key]);
+            key = hoganRender(key, this);
+            // Exact unless there is a inexact property against the fields key.
+            const isExact = field.inexact !== true;
+
+            let autocomplete = field.autocomplete || {};
+            if (autocomplete === 'off') {
+              autocomplete = {
+                hour: 'off',
+                minute: 'off'
+              };
+            } else if (typeof autocomplete === 'string') {
+              autocomplete = {
+                hour: autocomplete + '-hour',
+                minute: autocomplete + '-minute'
+              };
+            }
+            const isThisRequired = field.validate ? field.validate.indexOf('required') > -1 : false;
+            const formGroupClassName = (field.formGroup && field.formGroup.className) ? field.formGroup.className : '';
+            const classNameHour = (field.controlsClass && field.controlsClass.hour) ? field.controlsClass.hour : 'govuk-input--width-2';
+            const classNameMinute = (field.controlsClass && field.controlsClass.minute) ? field.controlsClass.minute : 'govuk-input--width-2';
+
+            const parts = [];
+
+            if (isExact) {
+              const hourPart = compiled['partials/forms/input-text-time'].render(inputText.call(this, key + '-hour', { pattern: '[0-9]*', min: 1, max: 24, maxlength: 2, hintId: key + '-hint', time: true, autocomplete: autocomplete.hour, formGroupClassName, className: classNameHour, isThisRequired }));
+              parts.push(hourPart);
+            }
+
+            const minutePart = compiled['partials/forms/input-text-time'].render(inputText.call(this, key + '-minute', { pattern: '[0-9]*', min: 0, max: 59, maxlength: 2, hintId: key + '-hint', time: true, autocomplete: autocomplete.minute, formGroupClassName, className: classNameMinute, isThisRequired }));
+
+            return parts.concat(minutePart).join('\n');
+          };
+        }
       }
     };
 

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

@@ -0,0 +1,37 @@
+<div class="{{timeInputItemClassName}}">
+  <div id="{{id}}-group" class="{{#formGroupClassName}} {{formGroupClassName}}{{/formGroupClassName}}">
+    <label for="{{id}}" class="{{labelClassName}}">
+        <span class="label-text">{{{label}}}</span>
+    </label>
+    {{#hint}}<span {{$hintId}}id="{{hintId}}" {{/hintId}}class="govuk-hint">{{hint}}</span>{{/hint}}
+    {{#renderChild}}{{/renderChild}}
+        {{#attributes}}
+            {{#prefix}}
+                <div class="govuk-input__prefix" aria-hidden="true">{{prefix}}</div>
+            {{/prefix}}
+        {{/attributes}}
+        <input
+            type="{{type}}"
+            name="{{id}}"
+            id="{{id}}"
+            class="govuk-input{{#className}} {{className}}{{/className}}{{#error}} govuk-input--error{{/error}}"
+            aria-required="{{required}}"
+            {{#value}} value="{{value}}"{{/value}}
+            {{#min}} min="{{min}}"{{/min}}
+            {{#max}} max="{{max}}"{{/max}}
+            {{#maxlength}} maxlength="{{maxlength}}"{{/maxlength}}
+            {{#pattern}} pattern="{{pattern}}"{{/pattern}}
+            {{#hintId}} aria-describedby="{{hintId}}"{{/hintId}}
+            {{#error}} aria-invalid="true"{{/error}}
+            {{#autocomplete}} autocomplete="{{autocomplete}}"{{/autocomplete}}
+            {{#attributes}}
+                {{attribute}}="{{value}}"
+            {{/attributes}}
+        >
+        {{#attributes}}
+            {{#suffix}}
+                <div class="govuk-input__prefix" aria-hidden="true">{{suffix}}</div>
+            {{/suffix}}
+        {{/attributes}}
+  </div>
+</div>

package/frontend/template-partials/translations/src/en/save-and-exit.json

@@ -0,0 +1,4 @@
+{
+  "header": "You have been signed out",
+  "message": "Any answers you saved have not been affected. You can sign back in to your application by returning to the <a href='/' class='govuk-link'>start page</a>."
+}

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

@@ -21,8 +21,11 @@
 {{/cookiesAccepted}}
 {{/gtmTagId}}
 
+{{#deIndex}}
+  <meta name="robots" content="noindex">
+{{/deIndex}}
 <meta name="format-detection" content="telephone=no">
 <noscript>
-  <meta http-equiv="refresh" content="{{sessionTimeOut}};url='/session-timeout'"/>
+  <meta http-equiv="refresh" content="{{sessionTimeOut}};url='{{baseUrl}}/session-timeout'"/>
 </noscript>
 <link rel="stylesheet" href="{{assetPath}}/css/app.css">

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

@@ -8,7 +8,7 @@
 data-url-redirect="/session-timeout" class="modal-dialog dialog" role="dialog"
   aria-live="polite" aria-labelledby="dialog-title" aria-describedby="at-timer">
   <div class="modal-dialog__inner">
-    {{^showSaveAndExit}}
+  {{^showSaveAndExit}}
     <h2 id="dialog-title" class="govuk-heading-l">
       {{#dialogTitle}}{{#t}}pages.session-timeout-warning.dialog-title{{/t}}{{/dialogTitle}}{{^dialogTitle}}Your page will time out soon{{/dialogTitle}}
     </h2>
@@ -19,9 +19,9 @@ data-url-redirect="/session-timeout" class="modal-dialog dialog" role="dialog"
       <p class="dialog-text visually-hidden">{{#dialogText}}{{#t}}pages.session-timeout-warning.dialog-text{{/t}}{{/dialogText}}{{^dialogText}}If that happens, your progress will not be saved.{{/dialogText}}</p>
     </div>
       <button class="govuk-button dialog-button js-dialog-close" id="timeout-continue-button" data-module="govuk-button">{{#timeoutContinueButton}}{{#t}}pages.session-timeout-warning.timeout-continue-button{{/t}}{{/timeoutContinueButton}}{{^timeoutContinueButton}}Stay on this page{{/timeoutContinueButton}}</button>
-      <a href="/exit" class="govuk-link dialog-exit-link" role="button">{{#dialogExitLink}}{{#t}}pages.session-timeout-warning.dialog-exit-link{{/t}}{{/dialogExitLink}}{{^dialogExitLink}}Exit this form{{/dialogExitLink}}</a>
-    {{/showSaveAndExit}}
-    {{#showSaveAndExit}}
+      <a href="{{baseUrl}}{{exitStep}}" class="govuk-link dialog-exit-link" role="button">{{#dialogExitLink}}{{#t}}pages.session-timeout-warning.dialog-exit-link{{/t}}{{/dialogExitLink}}{{^dialogExitLink}}Exit this form{{/dialogExitLink}}</a>
+  {{/showSaveAndExit}}
+  {{#showSaveAndExit}}
     <h2 id="dialog-title" class="govuk-heading-l">
       {{#dialogTitle}}{{#t}}pages.session-timeout-warning.dialog-title{{/t}}{{/dialogTitle}}{{^dialogTitle}}You will be signed out soon{{/dialogTitle}}
     </h2>
@@ -29,9 +29,10 @@ data-url-redirect="/session-timeout" class="modal-dialog dialog" role="dialog"
       <div id="timer" class="timer" aria-hidden="true" aria-relevant="additions"></div>
       <div id="at-timer" class="at-timer govuk-visually-hidden" role="status"></div>
       <p class="dialog-text-prefix visually-hidden">To protect your information, you will be signed out in </p>
+      <p class="dialog-text visually-hidden">{{#dialogText}}{{#t}}pages.session-timeout-warning.dialog-text{{/t}}{{/dialogText}}{{^dialogText}}Any answers you have saved will not be affected, but your progress on this page will not be saved.{{/dialogText}}</p>
     </div>
       <button class="govuk-button dialog-button js-dialog-close" id="timeout-continue-button" data-module="govuk-button">{{#timeoutContinueButton}}{{#t}}pages.session-timeout-warning.timeout-continue-button{{/t}}{{/timeoutContinueButton}}{{^timeoutContinueButton}}Stay signed in{{/timeoutContinueButton}}</button>
-      <a href="{{baseUrl}}/save-and-exit" class="govuk-link dialog-exit-link" role="button">{{#dialogExitLink}}{{#t}}pages.session-timeout-warning.dialog-exit-link{{/t}}{{/dialogExitLink}}{{^dialogExitLink}}Sign out{{/dialogExitLink}}</a>
-    {{/showSaveAndExit}}
+      <a href="{{baseUrl}}{{saveAndExitStep}}" class="govuk-link dialog-exit-link" role="button">{{#dialogExitLink}}{{#t}}pages.session-timeout-warning.dialog-exit-link{{/t}}{{/dialogExitLink}}{{^dialogExitLink}}Sign out{{/dialogExitLink}}</a>
+  {{/showSaveAndExit}}
   </div>
 </dialog>

package/frontend/template-partials/views/save-and-exit.html

@@ -12,8 +12,6 @@
   {{/header}}
 
   {{$content}}
-    <p>{{#t}}pages.save-and-exit.paragraph-1{{/t}}</p>
-    <p>{{#t}}pages.save-and-exit.paragraph-2{{/t}}</p>
-    <p>{{#t}}pages.save-and-exit.paragraph-3{{/t}} <a href="/" class="govuk-link">start page.</a></p>
+   <p>{{#saveExitFormContent}}{{#t}}pages.save-and-exit.message{{/t}}{{/saveExitFormContent}}{{^saveExitFormContent}}{{{message}}}{{/saveExitFormContent}}</p>
   {{/content}}
 {{/layout}}

package/frontend/themes/gov-uk/styles/_time-input.scss

@@ -0,0 +1,5 @@
+.time-input__item {
+  display: inline-block;
+  margin-right: 20px;
+  margin-bottom: 0;
+}

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

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

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

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

package/index.js

@@ -14,6 +14,7 @@ const router = require('./lib/router');
 const health = require('./lib/health');
 const serveStatic = require('./lib/serve-static');
 const gaTagSetup = require('./lib/ga-tag');
+const deIndexer = require('./lib/deindex');
 const sessionStore = require('./lib/sessions');
 const settings = require('./lib/settings');
 const defaults = require('./config/hof-defaults');
@@ -153,6 +154,7 @@ function bootstrap(options) {
     res.locals.sessionTimeOutWarning = config.sessionTimeOutWarning;
     res.locals.sessionTimeoutWarningContent = config.sessionTimeoutWarningContent;
     res.locals.exitFormContent = config.exitFormContent;
+    res.locals.saveExitFormContent = config.saveExitFormContent;
     next();
   });
 
@@ -204,6 +206,7 @@ function bootstrap(options) {
   serveStatic(app, config);
   settings(app, config);
   gaTagSetup(app, config);
+  deIndexer(app, config);
 
   const sessions = sessionStore(app, config);
   app.use('/healthz', health(sessions));

package/lib/deindex.js

@@ -0,0 +1,18 @@
+'use strict';
+
+module.exports = (app, config) => {
+  // Ensure the value of deIndex is evaluated as a boolean regardless of if single quotes are used
+  // to have the expected conditional behaviour in the Mustache template
+  const deIndex = (config.deIndexForm === 'true' || config.deIndexForm === true);
+
+  app.use((req, res, next) => {
+    // Preparing common res.locals properties
+    const properties = {
+      deIndex: deIndex
+    };
+    res.locals = Object.assign(res.locals, properties);
+    next();
+  });
+
+  return app;
+};

package/lib/router.js

@@ -30,6 +30,8 @@ function getWizardConfig(config) {
   // whitelist properties from the route's config that should be passed into the form wizard
   const props = [
     'confirmStep',
+    'exitStep',
+    'saveAndExitStep',
     'params'
   ];
   Object.assign(wizardConfig, _.pick(config.route, props));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hof",
   "description": "A bootstrap for HOF projects",
-  "version": "22.1.0-timeout-warning-sign-in-beta.3",
+  "version": "22.2.0-time-mixin-beta",
   "license": "MIT",
   "main": "index.js",
   "author": "HomeOffice",
@@ -79,7 +79,6 @@
     "mustache": "^4.2.0",
     "nodemailer": "^6.6.3",
     "nodemailer-ses-transport": "^1.5.1",
-    "nodemailer-smtp-transport": "^2.7.4",
     "nodemailer-stub-transport": "^1.1.0",
     "notifications-node-client": "^8.2.0",
     "redis": "^3.1.2",

package/{pull-request-template.md → pull_request_template.md}

@@ -12,5 +12,5 @@
 - [ ] I have created a JIRA number for my commit
 - [ ] I have followed the chris beams method for my commit https://cbea.ms/git-commit/
 here is an [example commit](https://github.com/UKHomeOfficeForms/hof/commit/810959f391187c7c4af6db262bcd143b50093a6e)
-- [ ] Ensure drone builds are green especially tests
+- [ ] Ensure workflow jobs are passing especially tests
 - [ ] I will squash the commits before merging

package/sandbox/.env

@@ -1,3 +1,3 @@
-SESSION_TTL=65
-SESSION_TIMEOUT_WARNING=60
+# SESSION_TTL=10
+# SESSION_TIMEOUT_WARNING=5
 NODE_ENV = 'local

package/sandbox/apps/sandbox/fields.js

@@ -3,6 +3,7 @@
 
 const dateComponent = require('../../../').components.date;
 const staticAppealStages = require('./lib/staticAppealStages');
+const timeComponent = require('../../../').components.time;
 
 module.exports = {
   'landing-page-radio': {
@@ -26,6 +27,14 @@ module.exports = {
       { type: 'after', arguments: ['1900'] }
     ]
   }),
+  time: timeComponent('time', {
+    mixin: 'input-time',
+    isPageHeading: 'true',
+    validate: [
+      'required',
+      'time'
+    ]
+  }),
   building: {
     validate: ['required', 'notUrl', { type: 'maxlength', arguments: 100 }]
   },

package/sandbox/apps/sandbox/index.js

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

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

@@ -1,5 +1,6 @@
 const moment = require('moment');
 const PRETTY_DATE_FORMAT = 'Do MMMM YYYY';
+const PRETTY_TIME_FORMAT = 'k:mma';
 const APPEAL_STAGES = require('../lib/staticAppealStages').getstaticAppealStages();
 const _ = require('lodash');
 
@@ -11,6 +12,12 @@ module.exports = {
       parse: d => d && moment(d).format(PRETTY_DATE_FORMAT)
     }
   ],
+  time: [
+    {
+      field: 'time',
+      parse: t => t && moment(t, 'kk:mm').format(PRETTY_TIME_FORMAT)
+    }
+  ],
   address: [
     'building',
     'street',

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

@@ -26,6 +26,10 @@
       "legend": "What is your date of birth?",
       "hint": "For example, 31 10 1990"
     },
+    "time": {
+      "legend": "What is the current time?",
+      "hint": "For example, 12 40 "
+    },
     "building": {
       "label": "Building and street"
     },
@@ -137,6 +141,9 @@
         "applicantsDetails": {
           "header": "Applicant's details"
         },
+        "time": {
+          "header": "Time"
+        },
         "address": {
           "header": "Address"
         },
@@ -177,9 +184,9 @@
     },
     "save-and-exit": {
       "header": "You have been signed out",
-      "paragraph-1": "Your form doesn’t appear to have been worked on for 30 minutes so we closed it for security.",
+      "paragraph-1": "Your form doesn't appear to have been worked on for 30 minutes so we closed it for security.",
       "paragraph-2": "Any answers you saved have not been affected.",
-      "paragraph-3": "You can sign back in to your application at any time by returning to the"
+      "paragraph-3": "You can sign back in to your application at any time by returning to the <a href='/' class='govuk-link'>start page</a>."
     }
   },
   "validation": {
@@ -194,6 +201,9 @@
       "after": "Enter a date after 1 1 1900",
       "before": "Enter a date that is in the past"
     },
+    "time": {
+      "default": "Enter a time in the correct format; for example, 12 40"
+    },
     "building": {
       "default": "Enter details of your building and street"
     },

package/sandbox/apps/sandbox/translations/src/en/fields.json

@@ -21,6 +21,10 @@
     "legend": "What is your date of birth?",
     "hint": "For example, 31 10 1990"
   },
+  "time": {
+    "legend": "What is the current time?",
+    "hint": "For example, 12 40 "
+  },
   "building": {
     "label": "Building and street"
   },

package/sandbox/apps/sandbox/translations/src/en/pages.json

@@ -25,6 +25,9 @@
       "applicantsDetails": {
         "header": "Applicant's details"
       },
+      "time": {
+        "header": "Time"
+      },
       "address": {
         "header": "Address"
       },
@@ -65,8 +68,8 @@
   },
   "save-and-exit": {
     "header": "You have been signed out",
-    "paragraph-1": "Your form doesn’t appear to have been worked on for 30 minutes so we closed it for security.",
+    "paragraph-1": "Your form doesn't appear to have been worked on for 30 minutes so we closed it for security.",
     "paragraph-2": "Any answers you saved have not been affected.",
-    "paragraph-3": "You can sign back in to your application at any time by returning to the"
+    "paragraph-3": "You can sign back in to your application at any time by returning to the <a href='/' class='govuk-link'>start page</a>."
   }
 }

package/sandbox/apps/sandbox/translations/src/en/validation.json

@@ -10,6 +10,9 @@
     "after": "Enter a date after 1 1 1900",
     "before": "Enter a date that is in the past"
   },
+  "time": {
+    "default": "Enter a time in the correct format; for example, 12 40"
+  },
   "building": {
     "default": "Enter details of your building and street"
   },

package/sandbox/apps/sandbox/views/save-and-exit.html

@@ -0,0 +1,19 @@
+{{<layout}}
+  {{$journeyHeader}}
+  {{#t}}journey.header{{/t}}
+  {{/journeyHeader}}
+
+  {{$propositionHeader}}
+  {{> partials-navigation}}
+  {{/propositionHeader}}
+
+  {{$header}}
+    {{header}}
+  {{/header}}
+
+  {{$content}}
+   <p>{{#t}}pages.save-and-exit.paragraph-1{{/t}}</p>
+   <p>{{#t}}pages.save-and-exit.paragraph-2{{/t}}</p>
+   <p>{{#t}}pages.save-and-exit.paragraph-3{{/t}}</p>
+  {{/content}}
+{{/layout}}

package/sandbox/public/css/app.css

@@ -797,9 +797,9 @@ hr {
   outline: 1px solid transparent;
   outline-offset: -1px;
   -webkit-appearance: none;
-  -webkit-box-shadow: 0 2px 0 #003618;
-  -moz-box-shadow: 0 2px 0 #003618;
-  box-shadow: 0 2px 0 #003618;
+  -webkit-box-shadow: 0 2px 0 rgb(0, 53.5, 24.2807692308);
+  -moz-box-shadow: 0 2px 0 rgb(0, 53.5, 24.2807692308);
+  box-shadow: 0 2px 0 rgb(0, 53.5, 24.2807692308);
   font-size: 1em;
   line-height: 1.25;
   text-decoration: none;
@@ -815,7 +815,7 @@ hr {
   background-color: #00823b;
 }
 .button:hover, .button:focus {
-  background-color: #00692f;
+  background-color: rgb(0, 104.5, 47.4269230769);
 }
 .button:active {
   top: 2px;
@@ -834,9 +834,9 @@ hr {
 }
 .button.disabled:active, .button[disabled=disabled]:active, .button[disabled]:active {
   top: 0;
-  -webkit-box-shadow: 0 2px 0 #003618;
-  -moz-box-shadow: 0 2px 0 #003618;
-  box-shadow: 0 2px 0 #003618;
+  -webkit-box-shadow: 0 2px 0 rgb(0, 53.5, 24.2807692308);
+  -moz-box-shadow: 0 2px 0 rgb(0, 53.5, 24.2807692308);
+  box-shadow: 0 2px 0 rgb(0, 53.5, 24.2807692308);
 }
 .button:link, .button:link:focus, .button:hover, .button:focus, .button:visited {
   color: #fff;
@@ -3630,7 +3630,7 @@ input[type=number] {
   border-radius: 0;
   color: #ffffff;
   background-color: #00703c;
-  box-shadow: 0 2px 0 #002d18;
+  box-shadow: 0 2px 0 rgb(0, 44.8, 24);
   text-align: center;
   vertical-align: top;
   cursor: pointer;
@@ -3673,7 +3673,7 @@ input[type=number] {
   border: 0;
 }
 .govuk-button:hover {
-  background-color: #005a30;
+  background-color: rgb(0, 89.6, 48);
 }
 .govuk-button:active {
   top: 2px;
@@ -3718,18 +3718,18 @@ input[type=number] {
 .govuk-button[disabled=disabled]:active,
 .govuk-button[disabled]:active {
   top: 0;
-  box-shadow: 0 2px 0 #002d18;
+  box-shadow: 0 2px 0 rgb(0, 44.8, 24);
 }
 
 .govuk-button--secondary {
   background-color: #f3f2f1;
-  box-shadow: 0 2px 0 #929191;
+  box-shadow: 0 2px 0 rgb(145.8, 145.2, 144.6);
 }
 .govuk-button--secondary, .govuk-button--secondary:link, .govuk-button--secondary:visited, .govuk-button--secondary:active, .govuk-button--secondary:hover {
   color: #0b0c0c;
 }
 .govuk-button--secondary:hover {
-  background-color: #dbdad9;
+  background-color: rgb(218.7, 217.8, 216.9);
 }
 .govuk-button--secondary:hover[disabled] {
   background-color: #f3f2f1;
@@ -3737,13 +3737,13 @@ input[type=number] {
 
 .govuk-button--warning {
   background-color: #d4351c;
-  box-shadow: 0 2px 0 #55150b;
+  box-shadow: 0 2px 0 rgb(84.8, 21.2, 11.2);
 }
 .govuk-button--warning, .govuk-button--warning:link, .govuk-button--warning:visited, .govuk-button--warning:active, .govuk-button--warning:hover {
   color: #ffffff;
 }
 .govuk-button--warning:hover {
-  background-color: #aa2a16;
+  background-color: rgb(169.6, 42.4, 22.4);
 }
 .govuk-button--warning:hover[disabled] {
   background-color: #d4351c;
@@ -5221,7 +5221,7 @@ input[type=number] {
   color: #d4351c;
 }
 .govuk-error-summary__list a:hover {
-  color: #942514;
+  color: rgb(148.4, 37.1, 19.6);
 }
 .govuk-error-summary__list a:active {
   color: #d4351c;
@@ -6218,7 +6218,7 @@ input[type=number] {
   color: #00703c;
 }
 .govuk-notification-banner--success .govuk-notification-banner__link:hover {
-  color: #004e2a;
+  color: rgb(0, 78.4, 42);
 }
 .govuk-notification-banner--success .govuk-notification-banner__link:active {
   color: #00703c;
@@ -6386,48 +6386,48 @@ input[type=number] {
 }
 
 .govuk-tag--grey {
-  color: #383f43;
-  background: #eeefef;
+  color: rgb(56, 63, 66.5);
+  background: rgb(237.5, 238.5, 239);
 }
 
 .govuk-tag--purple {
-  color: #3d2375;
-  background: #dbd5e9;
+  color: rgb(60.8, 35.2, 116.8);
+  background: rgb(219.2, 212.8, 233.2);
 }
 
 .govuk-tag--turquoise {
-  color: #10403c;
-  background: #bfe3e0;
+  color: rgb(16, 64.4, 60.4);
+  background: rgb(190.5, 226.8, 223.8);
 }
 
 .govuk-tag--blue {
-  color: #144e81;
-  background: #d2e2f1;
+  color: rgb(20.3, 78.4, 128.8);
+  background: rgb(209.8, 226.4, 240.8);
 }
 
 .govuk-tag--yellow {
-  color: #594d00;
-  background: #fff7bf;
+  color: rgb(89.25, 77.35, 0);
+  background: rgb(255, 246.5, 191.25);
 }
 
 .govuk-tag--orange {
-  color: #6e3619;
-  background: #fcd6c3;
+  color: rgb(109.8, 53.55, 25.2);
+  background: rgb(251.7, 214.2, 195.3);
 }
 
 .govuk-tag--red {
-  color: #942514;
-  background: #f6d7d2;
+  color: rgb(148.4, 37.1, 19.6);
+  background: rgb(246.4, 214.6, 209.6);
 }
 
 .govuk-tag--pink {
-  color: #80224d;
-  background: #f7d7e6;
+  color: rgb(127.8, 33.6, 76.8);
+  background: rgb(246.6, 215.2, 229.6);
 }
 
 .govuk-tag--green {
-  color: #005a30;
-  background: #cce2d8;
+  color: rgb(0, 89.6, 48);
+  background: rgb(204, 226.4, 216);
 }
 
 .govuk-phase-banner {
@@ -9334,6 +9334,12 @@ dialog[open] + .backdrop, dialog[open]::backdrop {
   }
 }
 
+.time-input__item {
+  display: inline-block;
+  margin-right: 20px;
+  margin-bottom: 0;
+}
+
 .validation-summary {
   padding-left: 11px;
   padding-right: 15px;

package/sandbox/public/js/bundle.js

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