hof 20.0.0-beta.9 → 20.0.0-timeout-1

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/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/head.html

@@ -1,2 +1,5 @@
 <meta name="format-detection" content="telephone=no">
 <link rel="stylesheet" href="{{assetPath}}/css/app.css">
+<noscript>
+  <meta http-equiv="refresh" content="{{sessionTimeOut}};url='/session-timeout'"/>
+</noscript>

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

@@ -16,6 +16,7 @@
     {{<partials-form}}
       {{$form}}
         {{$page-content}}{{/page-content}}
+        {{>partials-session-timeout-popup}}
       {{/form}}
     {{/partials-form}}
   {{/content}}

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

@@ -0,0 +1,18 @@
+<dialog id="js-modal-dialog" data-session-timeout="{{sessionTimeOut}}" data-session-timeout-warning="{{sessionTimeOutWarning}}"
+  data-session-timeout-final-warning="{{finalSessionTimeOutWarning}}" 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">
+    <h1 id="dialog-title" class="govuk-heading-l">
+      Your application will time out soon
+    </h1>
+    <div class="modal-dialog__inner__text">
+      <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>
+    </div>
+    <div class="modal-dialog__inner__block">
+      <button class="govuk-button dialog-button modal-dialog__inner__button js-dialog-close" id="timeout-continue-button">Continue application</button>
+    </div>
+  </div>
+</dialog>
+
+

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/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/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hof",
   "description": "A bootstrap for HOF projects",
-  "version": "20.0.0-beta.9",
+  "version": "20.0.0-timeout-1",
   "license": "MIT",
   "main": "index.js",
   "author": "HomeOffice",
@@ -79,6 +79,7 @@
     "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",

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'],

package/sandbox/assets/scss/app.scss

@@ -1,6 +1,5 @@
 
 @import "../../../frontend/themes/gov-uk/styles/govuk";
-@import "../../../node_modules/govuk-frontend/govuk/all";
 
 //autocomplete styling
 .tt-menu {
@@ -26,54 +25,3 @@
 .twitter-typeahead {
   width: 100%;
 }
-
-// govuk cookie banner styling
-.govuk-banner--success {
-  border-color: #00703c;
-  color: #00703c;
-}
-
-.govuk-banner {
-  border: 5px solid #1d70b8;
-  font-size: 0;
-  margin-bottom: 30px;
-  padding: 10px;
-}
-
-.govuk-banner__icon{
-  display: inline-block;
-}
-
-.govuk-banner__message {
-  font-family: "GDS Transport", Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  font-weight: 400;
-  font-size: 1rem;
-  line-height: 1.25;
-  color: #0b0c0c;
-  display: block;
-  overflow: hidden;
-  display: inline-block;
-  margin-left: 10px;
-}
-
-.govuk-banner__assistive {
-  position: absolute !important;
-  width: 1px !important;
-  height: 1px !important;
-  margin: 0 !important;
-  padding: 0 !important;
-  overflow: hidden !important;
-  clip: rect(0 0 0 0) !important;
-  clip-path: inset(50%) !important;
-  border: 0 !important;
-  white-space: nowrap !important;
-  }
-
-.cookie-table-holder > table > tbody > tr > td:first-child{
-  font-weight:bold;
-}
-
-.js-enabled #global-cookie-message {
-  display: none;
-}

package/sandbox/package.json

@@ -15,7 +15,9 @@
   },
   "author": "",
   "dependencies": {
+    "govuk-frontend": "3.14",
     "jquery": "^3.6.0",
+    "sass": "^1.53.0",
     "typeahead-aria": "^1.0.4"
   },
   "devDependencies": {

package/sandbox/server.js

@@ -13,5 +13,6 @@ bootstrap({
       active: true
     }
   },
-  getAccessibility: true
+  getAccessibility: true,
+  "port": 8082
 });