hof 19.13.13 → 20.0.0-beta.1

package/frontend/template-partials/views/partials/validation-summary.html

@@ -1,24 +1,25 @@
 {{#errorlist.length}}
-<div class="validation-summary" tabindex="-1">
+<div class="govuk-error-summary" aria-labelledby="error-summary-title" data-module="govuk-error-summary" role="alert" tabindex="-1">
     {{$errorlist-title}}
 
       {{#errorLength.single}}
-        <h2 id="error-summary-title">{{#t}}errorlist.title.single{{/t}}</h2>
+        <h2 class="govuk-error-summary__title" id="error-summary-title">{{#t}}errorlist.title.single{{/t}}</h2>
       {{/errorLength.single}}
       {{#errorLength.multiple}}
-        <h2 id="error-summary-title">{{#t}}errorlist.title.multiple{{/t}}</h2>
+        <h2 class="govuk-error-summary__title" id="error-summary-title">{{#t}}errorlist.title.multiple{{/t}}</h2>
       {{/errorLength.multiple}}
 
     {{/errorlist-title}}
-
-    {{<partials-validation-list}}
-        {{$validation-list}}
-            {{#errorlist}}
-                {{#message}}
-                  <li><a href="#{{key}}">{{ message }}</a></li>
-                {{/message}}
-            {{/errorlist}}
-        {{/validation-list}}
-    {{/partials-validation-list}}
+	<div class="govuk-error-summary__body">
+		{{<partials-validation-list}}
+			{{$validation-list}}
+				{{#errorlist}}
+					{{#message}}
+						<li><a href="#{{errorLinkId}}">{{ message }}</a></li>
+					{{/message}}
+				{{/errorlist}}
+			{{/validation-list}}
+		{{/partials-validation-list}}
+	</div>
 </div>
 {{/errorlist.length}}

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

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

package/frontend/themes/gov-uk/client-js/cookieSettings.js

@@ -35,7 +35,7 @@ function showCookieBannerSubmitted() {
   document.getElementById('cookie-banner-info').style.display = 'none';
   document.getElementById('cookie-banner-actions').style.display = 'none';
   var cookieBannerSubmitted = document.getElementById('cookie-banner-submitted');
-  cookieBannerSubmitted.style.display = 'flex';
+  cookieBannerSubmitted.style.display = 'block';
   cookieBannerSubmitted.focus();
 }
 

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

@@ -0,0 +1,122 @@
+(function () {
+  "use strict"
+  var 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 });
+      } else {
+        return GOVUK.setCookie(name, value, options);
+      }
+    } else {
+      return GOVUK.getCookie(name);
+    }
+  };
+  GOVUK.setCookie = function (name, value, options) {
+    if(typeof options === 'undefined') {
+      options = {};
+    }
+    var cookieString = name + "=" + value + "; path=/";
+    if (options.days) {
+      var 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) {
+    var nameEQ = name + "=";
+    var cookies = document.cookie.split(';');
+    for(var i = 0, len = cookies.length; i < len; i++) {
+      var 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'
+  var root = this
+  if (typeof root.GOVUK === 'undefined') { root.GOVUK = {} }
+
+  GOVUK.addCookieMessage = function () {
+    var message = document.getElementById('global-cookie-message')
+
+    var 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){
+    var els = document.querySelectorAll('.js-header-toggle'),
+        i, _i;
+    for(i=0,_i=els.length; i<_i; i++){
+      els[i].addEventListener('click', function(e){
+        e.preventDefault();
+        var target = document.getElementById(this.getAttribute('href').substr(1)),
+            targetClass = target.getAttribute('class') || '',
+            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

@@ -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,18 @@
+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) {
+      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/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,7 +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
  */
 function bootstrap(options) {
@@ -204,6 +205,9 @@ function bootstrap(options) {
   }));
   app.use(mixins());
   app.use(markdown(config.markdown));
+  
+  // 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(

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hof",
   "description": "A bootstrap for HOF projects",
-  "version": "19.13.13",
+  "version": "20.0.0-beta.1",
   "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",
@@ -72,7 +73,7 @@
     "minimist": "^1.2.0",
     "mixwith": "^0.1.1",
     "mkdirp": "^0.5.1",
-    "moment": "^2.29.2",
+    "moment": "^2.24.0",
     "morgan": "^1.10.0",
     "mustache": "^2.3.0",
     "nodemailer": "^6.6.3",
@@ -87,7 +88,7 @@
     "serve-static": "^1.14.1",
     "uglify-js": "^3.14.3",
     "underscore": "^1.12.1",
-    "urijs": "^1.19.11",
+    "urijs": "^1.19.10",
     "winston": "^3.3.3"
   },
   "devDependencies": {

package/sandbox/.env

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

package/sandbox/apps/sandbox/fields.js

@@ -11,13 +11,21 @@ module.exports = {
     legend: {
       className: 'visuallyhidden'
     },
+    className: ['govuk-radios--inline'],
     options: ['basic-form', 'complex-form', 'build-your-own-form']
   },
   name: {
     validate: ['required', 'notUrl', { type: 'maxlength', arguments: 200 }],
+    labelClassName: ['govuk-label--l'],
+    // noHeading: 'true'
   },
-  dateOfBirth: dateComponent('dateOfBirth', {
-    validate: ['required', 'before', { type: 'after', arguments: ['1900'] }]
+  'dateOfBirth': dateComponent('dateOfBirth', {
+    controlType: 'date-input',
+    validate: [
+      'required',
+      'date',
+      { type: 'after', arguments: ['1900'] }
+    ]
   }),
   building: {
     validate: ['required', 'notUrl', { type: 'maxlength', arguments: 100 }]
@@ -81,14 +89,14 @@ module.exports = {
   },
   complaintDetails: {
     mixin: 'textarea',
-    labelClassName: 'visuallyhidden',
     // we want to ignore default formatters as we want
     // to preserve white space
     '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: 100 }],
     attributes: [{
       attribute: 'rows',
       value: 8
@@ -96,7 +104,6 @@ module.exports = {
   },
   appealStages: {
     mixin: 'select',
-    labelClassName: 'visuallyhidden',
     validate: ['required'],
     options: [{
       value: '',

package/sandbox/apps/sandbox/index.js

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

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

@@ -0,0 +1,212 @@
+{
+  "fields": {
+    "landing-page-radio": {
+      "legend": "Which form would you like to explore?",
+      "options": {
+        "basic-form": {
+          "label": "Basic form"
+        },
+        "complex-form": {
+          "label": "Complex form"
+        },
+        "build-your-own-form": {
+          "label": "Build your own form"
+        }
+      }
+    },
+    "name": {
+      "label": "What is your full name?"
+    },
+    "dateOfBirth": {
+      "legend": "What is your date of birth?",
+      "hint": "For example, 31 10 1990"
+    },
+    "building": {
+      "label": "Building and street"
+    },
+    "street": {
+      "label": "Address line 2"
+    },
+    "townOrCity": {
+      "label": "Town or city"
+    },
+    "postcode": {
+      "label": "Postcode"
+    },
+    "incomeTypes": {
+      "label": "Sources of income",
+      "legend": "Select the options where you receive income from",
+      "hint": "Select all options that apply to you.",
+      "options": {
+        "salary": {
+          "label": "Salary"
+        },
+        "universal_credit": {
+          "label": "Universal Credit"
+        },
+        "child_benefit": {
+          "label": "Child Benefit"
+        },
+        "housing_benefit": {
+          "label": "Housing Benefit"
+        },
+        "other": {
+          "label": "Other"
+        }
+      }
+    },
+    "countryOfHearing": {
+      "label": "Country of hearing",
+      "options": {
+        "englandAndWales": {
+          "label": "England and Wales"
+        },
+        "scotland": {
+          "label": "Scotland"
+        },
+        "northernIreland": {
+          "label": "Northern Ireland"
+        }
+      }
+    },
+    "email": {
+      "label": "Email address"
+    },
+    "phone": {
+      "label": "Phone number",
+      "hint": "International phone numbers require the international dialling code, for example +33235066182"
+    },
+    "int-phone-number": {
+      "legend": "International phone number"
+    },
+    "complaintDetails": {
+      "label": "Complaint details",
+      "hint": "Briefly summarise your complaint. Include anything that can help our investigation."
+    },
+    "countrySelect": {
+      "label": "Which country are you based in?",
+      "hint": "Start to type the country name and options will appear"
+    },
+    "appealStages": {
+      "label": "Appeal stage",
+      "hint": "Choose an appeal stage from the drop down menu",
+      "options": {
+        "null": "Select..."
+      }
+    }
+  },
+  "journey": {
+    "header": "HOF Bootstrap Sandbox Form",
+    "confirmation": {
+      "details": "Your reference number <br><strong>HDJ2123F</strong>"
+    }
+  },
+  "pages": {
+    "landing-page": {
+      "header": "Landing page",
+      "intro": "Choose one of the options below and press continue."
+    },
+    "build-your-own-form": {
+      "title": "Build your own form",
+      "subheader": "Access the build your own form guidance link"
+    },
+    "address": {
+      "header": "What is your address in the UK?",
+      "intro": "If you have no fixed address, enter an address where we can contact you."
+    },
+    "checkboxes": {
+      "header": "Where does your money come from each month?"
+    },
+    "radio": {
+      "header": "What country was the appeal lodged?"
+    },
+    "email": {
+      "header": "Enter your email address"
+    },
+    "phone-number": {
+      "header": "Enter your phone number"
+    },
+    "confirm": {
+      "header": "Check your answers before submitting your application.",
+      "sections": {
+        "applicantsDetails": {
+          "header": "Applicant's details"
+        },
+        "address": {
+          "header": "Address"
+        },
+        "income": {
+          "header": "Income"
+        },
+        "appealDetails": {
+          "header": "Appeal details"
+        },
+        "countrySelect": {
+          "header": "Country of residence"
+        },
+        "contactDetails": {
+          "header": "Contact details"
+        },
+        "complaintDetails": {
+          "header": "Complaint details"
+        }
+      }
+    },
+    "confirmation": {
+      "title": "Application sent",
+      "alert": "Application sent",
+      "subheader": "What happens next",
+      "content": "We’ll contact you with the decision of your application or if we need more information from you."
+    }
+  },
+  "validation": {
+    "landing-page-radio": {
+      "required": "Select an option below and press continue"
+    },
+    "name": {
+      "default": "Enter your full name"
+    },
+    "dateOfBirth": {
+      "default": "Enter your date of birth in the correct format; for example, 31 10 1990",
+      "after": "Enter a date after 1 1 1900",
+      "before": "Enter a date that is in the past"
+    },
+    "building": {
+      "default": "Enter details of your building and street"
+    },
+    "townOrCity": {
+      "default": "Enter a town or city",
+      "regex": "Enter a town or city without including digits"
+    },
+    "postcode": {
+      "default": "Enter your postcode"
+    },
+    "incomeTypes": {
+      "default": "Select all options that apply to you."
+    },
+    "countryOfHearing": {
+      "default": "Select where the appeal hearing is to be held"
+    },
+    "countrySelect": {
+      "default": "Enter a valid country of residence",
+      "required": "Enter your country of residence"
+    },
+    "email": {
+      "default": "Enter your email address in the correct format"
+    },
+    "phone": {
+      "default": "Enter your phone number"
+    },
+    "int-phone-number": {
+      "required": "Enter an international phone number",
+      "internationalPhoneNumber": "Enter a valid international phone number"
+    },
+    "complaintDetails": {
+      "default": "Enter details about why you are making a complaint",
+      "maxlength": "Keep to the {{maxlength}} character limit"
+    },
+    "appealStages": {
+      "required": "Select an appeal stage from the list"
+    }
+  }
+}

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

@@ -14,10 +14,10 @@
     }
   },
   "name": {
-    "label": "Full name"
+    "label": "What is your full name?"
   },
   "dateOfBirth": {
-    "legend": "Date of birth",
+    "legend": "What is your date of birth?",
     "hint": "For example, 31 10 1990"
   },
   "building": {
@@ -79,14 +79,16 @@
     "legend": "International phone number"
   },
   "complaintDetails": {
-    "label": "Complaint details"
+    "label": "Complaint details",
+    "hint": "Briefly summarise your complaint. Include anything that can help our investigation."
   },
   "countrySelect": {
-    "label": "Select a country",
+    "label": "Which country are you based in?",
     "hint": "Start to type the country name and options will appear"
   },
   "appealStages": {
     "label": "Appeal stage",
+    "hint": "Choose an appeal stage from the drop down menu",
     "options": {
       "null": "Select..."
     }

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

@@ -1,3 +1,6 @@
 {
-  "header": "HOF Bootstrap Sandbox Form"
+  "header": "HOF Bootstrap Sandbox Form",
+  "confirmation": {
+    "details": "Your reference number <br><strong>HDJ2123F</strong>"
+  }
 }