hof 19.14.9 → 20.0.0-beta.11

package/frontend/themes/gov-uk/client-js/govuk-cookies.js

@@ -0,0 +1,121 @@
+/* eslint-disable no-undef, no-param-reassign, no-unused-vars */
+(function () {
+  'use strict';
+  const root = this;
+  if(typeof root.GOVUK === 'undefined') { root.GOVUK = {}; }
+
+  /*
+    Cookie methods
+    ==============
+
+    Usage:
+
+      Setting a cookie:
+      GOVUK.cookie('hobnob', 'tasty', { days: 30 });
+
+      Reading a cookie:
+      GOVUK.cookie('hobnob');
+
+      Deleting a cookie:
+      GOVUK.cookie('hobnob', null);
+  */
+  GOVUK.cookie = function (name, value, options) {
+    if(typeof value !== 'undefined') {
+      if(value === false || value === null) {
+        return GOVUK.setCookie(name, '', { days: -1 });
+      }
+      return GOVUK.setCookie(name, value, options);
+    }
+    return GOVUK.getCookie(name);
+  };
+  GOVUK.setCookie = function (name, value, options) {
+    if(typeof options === 'undefined') {
+      options = {};
+    }
+    let cookieString = name + '=' + value + '; path=/';
+    if (options.days) {
+      const date = new Date();
+      date.setTime(date.getTime() + (options.days * 24 * 60 * 60 * 1000));
+      cookieString = cookieString + '; expires=' + date.toGMTString();
+    }
+    if (document.location.protocol === 'https:') {
+      cookieString = cookieString + '; Secure';
+    }
+    document.cookie = cookieString;
+  };
+  GOVUK.getCookie = function (name) {
+    const nameEQ = name + '=';
+    const cookies = document.cookie.split(';');
+    for(let i = 0, len = cookies.length; i < len; i++) {
+      let cookie = cookies[i];
+      while (cookie.charAt(0) === ' ') {
+        cookie = cookie.substring(1, cookie.length);
+      }
+      if (cookie.indexOf(nameEQ) === 0) {
+        return decodeURIComponent(cookie.substring(nameEQ.length));
+      }
+    }
+    return null;
+  };
+}).call(this);
+(function () {
+  'use strict';
+  const root = this;
+  if (typeof root.GOVUK === 'undefined') { root.GOVUK = {}; }
+
+  GOVUK.addCookieMessage = function () {
+    const message = document.getElementById('global-cookie-message');
+
+    const hasCookieMessage = (message && GOVUK.cookie('seen_cookie_message') === null);
+
+    if (hasCookieMessage) {
+      message.style.display = 'block';
+      GOVUK.cookie('seen_cookie_message', 'yes', { days: 28 });
+
+      document.addEventListener('DOMContentLoaded', function (event) {
+        if (GOVUK.analytics && typeof GOVUK.analytics.trackEvent === 'function') {
+          GOVUK.analytics.trackEvent('cookieBanner', 'Cookie banner shown', {
+            value: 1,
+            nonInteraction: true
+          });
+        }
+      });
+    }
+  };
+}).call(this)
+;
+(function () {
+  'use strict';
+
+  // add cookie message
+  if (window.GOVUK && GOVUK.addCookieMessage) {
+    GOVUK.addCookieMessage();
+  }
+
+  // header navigation toggle
+  if (document.querySelectorAll && document.addEventListener) {
+    const els = document.querySelectorAll('.js-header-toggle');
+    let i; let _i;
+    for(i = 0, _i = els.length; i < _i; i++) {
+      els[i].addEventListener('click', function (e) {
+        e.preventDefault();
+        const target = document.getElementById(this.getAttribute('href').substr(1));
+        const targetClass = target.getAttribute('class') || '';
+        const sourceClass = this.getAttribute('class') || '';
+
+        if(targetClass.indexOf('js-visible') !== -1) {
+          target.setAttribute('class', targetClass.replace(/(^|\s)js-visible(\s|$)/, ''));
+        } else {
+          target.setAttribute('class', targetClass + ' js-visible');
+        }
+        if(sourceClass.indexOf('js-visible') !== -1) {
+          this.setAttribute('class', sourceClass.replace(/(^|\s)js-visible(\s|$)/, ''));
+        } else {
+          this.setAttribute('class', sourceClass + ' js-visible');
+        }
+        this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') !== 'true');
+        target.setAttribute('aria-hidden', target.getAttribute('aria-hidden') === 'false');
+      });
+    }
+  }
+}).call(this);

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');
@@ -8,6 +8,11 @@ var formFocus = toolkit.formFocus;
 var characterCount = toolkit.characterCount;
 var validation = toolkit.validation;
 
+var GOVUK = require('govuk-frontend');
+GOVUK.initAll();
+window.GOVUK = GOVUK;
+var skipToMain = require('./skip-to-main');
+var cookie = require('./govuk-cookies');
 var cookieSettings = require('./cookieSettings');
 
 toolkit.detailsSummary();

package/frontend/themes/gov-uk/client-js/skip-to-main.js

@@ -0,0 +1,19 @@
+const skipToMain = function () {
+  const skipToMainLink = document.getElementById('skip-to-main');
+  const firstControlId = skipToMainLink.hash.split('#')[1] ? skipToMainLink.hash.split('#')[1] : 'main-content';
+  if(firstControlId === 'main-content') {
+    skipToMainLink.setAttribute('href', '#main-content');
+  }
+  if(firstControlId) {
+    // eslint-disable-next-line no-unused-vars
+    skipToMainLink.onclick = function (e) {
+      // here timeout added just to make this functionality asynchronous
+      // to focus on form as well as non form contents
+      setTimeout(() => {
+        const firstControl = document.getElementById(firstControlId);
+        firstControl.focus();
+      }, 10);
+    };
+  }
+};
+skipToMain();

package/frontend/themes/gov-uk/styles/_cookie-banner.scss

@@ -10,7 +10,6 @@
 }
 
 #cookie-banner {
-  max-width: 960px;
   margin: 0 15px;
   p {
     margin: 0;
@@ -62,3 +61,54 @@
     height: fit-content;
   }
 }
+
+// the following are additional hof specific 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/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 "node_modules/govuk-frontend/govuk/all";
+
 // Custom
 @import "base";
 @import "layout";

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

@@ -22,7 +22,7 @@
     }
 }
 
-.validation-error {
+.govuk-form-group--error {
     box-sizing: border-box;
     padding-left: $gutter-half - $validation-bdr-size;
     border-left: $validation-bdr-size-lg solid $error-colour;
@@ -36,7 +36,7 @@
     }
 }
 
-.error-message {
+.govuk-error-message {
     display: block;
     @include media(tablet) {
         margin-bottom: 0.5em;
@@ -46,6 +46,6 @@
 }
 
 .invalid-input,
-.validation-error .date-input {
+.govuk-form-group--error .date-input {
     border: $validation-bdr-size solid $error-colour;
 }

package/frontend/toolkit/assets/javascript/character-count.js

@@ -30,12 +30,12 @@ CharacterCount.prototype.updateCount = function () {
   this.$maxlengthHint.innerHTML = 'You have ' + number + characterNoun + remainderSuffix;
 
   if (currentLength >= this.maxLength + 1) {
-    helpers.removeClass(this.$maxlengthHint, 'form-hint');
-    helpers.addClass(this.$maxlengthHint, 'error-message');
+    helpers.removeClass(this.$maxlengthHint, 'govuk-hint');
+    helpers.addClass(this.$maxlengthHint, 'govuk-error-message');
     helpers.addClass(this.$textarea, 'textarea-error');
   } else {
-    helpers.addClass(this.$maxlengthHint, 'form-hint');
-    helpers.removeClass(this.$maxlengthHint, 'error-message');
+    helpers.addClass(this.$maxlengthHint, 'govuk-hint');
+    helpers.removeClass(this.$maxlengthHint, 'govuk-error-message');
     helpers.removeClass(this.$textarea, 'textarea-error');
   }
 };

package/frontend/toolkit/assets/stylesheets/modules/_validation.scss

@@ -22,7 +22,7 @@
     }
 }
 
-.validation-error {
+.govuk-form-group--error {
     box-sizing: border-box;
     padding-left: $gutter-half - $validation-bdr-size;
     border-left: $validation-bdr-size-lg solid $error-colour;
@@ -36,7 +36,7 @@
     }
 }
 
-.error-message {
+.govuk-error-message {
     display: block;
     @include media(tablet) {
         margin-bottom: 0.5em;
@@ -46,6 +46,6 @@
 }
 
 .invalid-input,
-.validation-error .date-input {
+.govuk-form-group--error .date-input {
     border: $validation-bdr-size solid $error-colour;
 }

package/index.js

@@ -120,6 +120,8 @@ const getContentSecurityPolicy = (config, res) => {
  * @param options.getTerms {boolean} Optional boolean - whether to mount the /terms endpoint
  * @param options.getCookies {boolean} Optional boolean - whether to mount the /cookies endpoint
  * @param options.noCache {boolean} Optional boolean - whether to disable caching
+ * @param options.getAccessibilityStatement {boolean} Optional boolean - whether to mount the
+ * /accessibility-statement endpoint
  *
  * @returns {object} A new HOF application using the configuration supplied in options
  */
@@ -209,6 +211,9 @@ function bootstrap(options) {
     app.use(hofMiddleware.rateLimiter(config, 'requests'));
   }
 
+  // Set up routing so <YOUR-SITE-URL>/assets are served from /node_modules/govuk-frontend/govuk/assets
+  app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/govuk/assets')));
+
   if (config.getAccessibility === true) {
     deprecate(
       '`getAccessibility` option is deprecated and may be removed in future versions.',

package/lib/settings.js

@@ -7,7 +7,22 @@ const hoganExpressStrict = require('hogan-express-strict');
 const expressPartialTemplates = require('express-partial-templates');
 const bodyParser = require('body-parser');
 
-module.exports = (app, config) => {
+const dirExists = dir => {
+  try {
+    if (fs.existsSync(dir)) {
+      return true;
+    }
+    return false;
+  } catch(err) {
+    throw new Error(`${err}: Cannot check if the directory path exists`);
+  }
+};
+
+const filterEmptyViews = views => {
+  return views.filter(view => dirExists(view));
+};
+
+module.exports = async (app, config) => {
   const viewEngine = config.viewEngine || 'html';
 
   app.use((req, res, next) => {
@@ -17,7 +32,8 @@ module.exports = (app, config) => {
 
   app.use(config.theme());
 
-  const viewPaths = [].concat(config.theme.views);
+  const filteredViews = filterEmptyViews(config.theme.views);
+  const viewPaths = [].concat(filteredViews);
   app.set('view engine', viewEngine);
   app.enable('view cache');
 

package/middleware/rate-limiter.js

@@ -4,6 +4,7 @@ const redis = require('redis');
 const config = require('./../config/hof-defaults');
 
 module.exports = (options, rateLimitType) => {
+  // eslint-disable-next-line no-console
   const logger = options.logger || { log: (func, msg) => console[func](msg) };
   const rateLimits = options.rateLimits[rateLimitType];
   const timestampName = `${rateLimitType}TimeStamp`;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hof",
   "description": "A bootstrap for HOF projects",
-  "version": "19.14.9",
+  "version": "20.0.0-beta.11",
   "license": "MIT",
   "main": "index.js",
   "author": "HomeOffice",
@@ -23,7 +23,7 @@
   "scripts": {
     "test": "yarn run unit && yarn run test:cookie-banner && yarn run test:functional && yarn run test:client && yarn run test:lint",
     "unit": "LOG_LEVEL=error nyc _mocha \"test/**/*.spec.js\" \"sandbox/test/**/*.spec.js\"",
-    "unit:nocov": "LOG_LEVEL=error mocha",
+    "unit:nocov": "LOG_LEVEL=error mocha \"test/**/*.spec.js\" \"sandbox/test/**/*.spec.js\"",
     "test:lint": "eslint . --config ./node_modules/eslint-config-hof/default.js",
     "test:functional": "funkie mocha ./test/functional-tests --exit",
     "test:client": "karma start test/frontend/toolkit/karma.conf.js",
@@ -57,6 +57,7 @@
     "findup": "^0.1.5",
     "glob": "^7.2.0",
     "govuk-elements-sass": "^3.1.3",
+    "govuk-frontend": "3.14",
     "govuk_template_mustache": "^0.26.0",
     "helmet": "^3.22.0",
     "hogan-express-strict": "^0.5.4",

package/sandbox/.env

@@ -0,0 +1 @@
+// GA_TAG=UA-215558609-1

package/sandbox/apps/sandbox/fields.js

@@ -8,16 +8,25 @@ module.exports = {
   'landing-page-radio': {
     mixin: 'radio-group',
     validate: ['required'],
-    legend: {
-      className: 'visuallyhidden'
-    },
+    isPageHeading: true,
+    // Design system says to avoid in-line unless it's two options,
+    // so just added as an example below but by default it isn't
+    className: ['govuk-radios--inline'],
     options: ['basic-form', 'complex-form', 'build-your-own-form']
   },
   name: {
     validate: ['required', 'notUrl', { type: 'maxlength', arguments: 200 }],
+    // need to remove this for the heading to go
+    labelClassName: ['govuk-label--l'],
+    isPageHeading: 'true'
   },
-  dateOfBirth: dateComponent('dateOfBirth', {
-    validate: ['required', 'before', { type: 'after', arguments: ['1900'] }]
+  'dateOfBirth': dateComponent('dateOfBirth', {
+    isPageHeading: 'true',
+    validate: [
+      'required',
+      'date',
+      { type: 'after', arguments: ['1900'] }
+    ]
   }),
   building: {
     validate: ['required', 'notUrl', { type: 'maxlength', arguments: 100 }]
@@ -37,6 +46,7 @@ module.exports = {
     formatter: ['removespaces', 'uppercase']
   },
   incomeTypes: {
+    isPageHeading: 'true',
     mixin: 'checkbox-group',
     labelClassName: 'visuallyhidden',
     validate: ['required'],
@@ -49,11 +59,9 @@ module.exports = {
     ]
   },
   countryOfHearing: {
+    isPageHeading: 'true',
     mixin: 'radio-group',
     validate: ['required'],
-    legend: {
-      className: 'visuallyhidden'
-    },
     options: [
       'englandAndWales',
       'scotland',
@@ -61,6 +69,8 @@ module.exports = {
     ]
   },
   email: {
+    isPageHeading: 'true',
+    labelClassName: ['govuk-label--l'],
     validate: ['required', 'email']
   },
   phone: {
@@ -72,6 +82,7 @@ module.exports = {
   },
   countrySelect: {
     mixin: 'select',
+    isPageHeading: 'true',
     className: ['typeahead'],
     options:[''].concat(require('homeoffice-countries').allCountries),
     legend: {
@@ -81,14 +92,15 @@ module.exports = {
   },
   complaintDetails: {
     mixin: 'textarea',
-    labelClassName: 'visuallyhidden',
     // we want to ignore default formatters as we want
     // to preserve white space
+    isPageHeading: 'true',
     'ignore-defaults': true,
     // apply the other default formatters
     formatter: ['trim', 'hyphens'],
+    labelClassName: ['govuk-label--l'],
     // attributes here are passed to the field element
-    validate: ['required', { type: 'maxlength', arguments: 5000 }],
+    validate: ['required', { type: 'maxlength', arguments: 10 }],
     attributes: [{
       attribute: 'rows',
       value: 8
@@ -96,7 +108,7 @@ module.exports = {
   },
   appealStages: {
     mixin: 'select',
-    labelClassName: 'visuallyhidden',
+    isPageHeading: 'true',
     validate: ['required'],
     options: [{
       value: '',