hof 20.0.0-beta.8 → 21.0.0-instrumentation-beta.0

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

@@ -1,3 +1,3 @@
-<ul class="govuk-list govuk-error-summary__list">
-    {{$validation-list}}{{/validation-list}}
+<ul>
+{{$validation-list}}{{/validation-list}}
 </ul>

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

@@ -1,25 +1,24 @@
 {{#errorlist.length}}
-<div class="govuk-error-summary" aria-labelledby="error-summary-title" data-module="govuk-error-summary" role="alert" tabindex="-1">
+<div class="validation-summary" tabindex="-1">
     {{$errorlist-title}}
 
       {{#errorLength.single}}
-        <h2 class="govuk-error-summary__title" id="error-summary-title">{{#t}}errorlist.title.single{{/t}}</h2>
+        <h2 id="error-summary-title">{{#t}}errorlist.title.single{{/t}}</h2>
       {{/errorLength.single}}
       {{#errorLength.multiple}}
-        <h2 class="govuk-error-summary__title" id="error-summary-title">{{#t}}errorlist.title.multiple{{/t}}</h2>
+        <h2 id="error-summary-title">{{#t}}errorlist.title.multiple{{/t}}</h2>
       {{/errorLength.multiple}}
 
     {{/errorlist-title}}
-	<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>
+
+    {{<partials-validation-list}}
+        {{$validation-list}}
+            {{#errorlist}}
+                {{#message}}
+                  <li><a href="#{{key}}">{{ message }}</a></li>
+                {{/message}}
+            {{/errorlist}}
+        {{/validation-list}}
+    {{/partials-validation-list}}
 </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="govuk-button" role="button">{{#t}}buttons.start-again{{/t}}</a>
+    <a href="{{startLink}}" class="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 = 'block';
+  cookieBannerSubmitted.style.display = 'flex';
   cookieBannerSubmitted.focus();
 }
 

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

@@ -8,14 +8,7 @@ var formFocus = toolkit.formFocus;
 var characterCount = toolkit.characterCount;
 var validation = toolkit.validation;
 
-var GOVUK = require('govuk-frontend');
-// eslint-disable-next-line no-unused-vars
-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/_cookie-banner.scss

@@ -10,6 +10,7 @@
 }
 
 #cookie-banner {
+  max-width: 960px;
   margin: 0 15px;
   p {
     margin: 0;
@@ -61,54 +62,3 @@
     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/modules/_validation.scss

@@ -22,7 +22,7 @@
     }
 }
 
-.govuk-form-group--error {
+.validation-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 @@
     }
 }
 
-.govuk-error-message {
+.error-message {
     display: block;
     @include media(tablet) {
         margin-bottom: 0.5em;
@@ -46,6 +46,6 @@
 }
 
 .invalid-input,
-.govuk-form-group--error .date-input {
+.validation-error .date-input {
     border: $validation-bdr-size solid $error-colour;
 }

package/frontend/themes/gov-uk/views/partials/form.html

@@ -0,0 +1,9 @@
+<form action="" method="POST" {{$encoding}}{{/encoding}} autocomplete="off" novalidate="true" spellcheck="false">
+  {{$intro}}
+    {{#intro}}<p>{{intro}}</p>{{/intro}}
+  {{/intro}}
+  {{$form}}{{/form}}
+  {{#csrf-token}}
+    <input type="hidden" name="x-csrf-token" value="{{csrf-token}}" />
+  {{/csrf-token}}
+</form>

package/frontend/themes/gov-uk/views/partials/forms/option-group.html

@@ -0,0 +1,28 @@
+<div id="{{key}}-group" class="form-group{{#className}} {{className}} {{/className}}{{#formGroupClassName}} {{formGroupClassName}}{{/formGroupClassName}}{{#error}} validation-error{{/error}}">
+    <fieldset role="{{role}}"{{#ariaRequired}} aria-required="true"{{/ariaRequired}}{{#hint}} aria-describedby="{{key}}-hint"{{/hint}}>
+        <legend>
+            <span{{#legendClassName}} class="{{legendClassName}}"{{/legendClassName}}>{{legend}}</span>
+            {{#hint}}<span id="{{key}}-hint" class="form-hint">{{hint}}</span>{{/hint}}
+            {{#error}}<span id="{{key}}-error" class="error-message">{{error.message}}</span>{{/error}}
+        </legend>
+        {{#options}}
+        <div class="multiple-choice">
+            <input
+                type="{{type}}"
+                name="{{key}}"
+                id="{{key}}-{{value}}"
+                value="{{value}}"                
+                {{#toggle}} data-toggle="{{toggle}}"{{/toggle}}
+                {{#selected}} checked="checked"{{/selected}}
+                {{^error}}{{#optionHint}} aria-describedby="{{key}}-{{value}}-hint"{{/optionHint}}{{^optionHint}}{{#hint}} aria-describedby="{{key}}-hint"{{/hint}}{{/optionHint}}{{/error}}
+                {{#error}} aria-describedby="{{key}}-error" aria-invalid="true"{{/error}}
+            >
+            <label class="block-label" for="{{key}}-{{value}}">
+                {{{label}}}
+                {{#optionHint}}<span id="{{key}}-{{value}}-hint" class="form-hint">{{optionHint}}</span>{{/optionHint}}
+            </label>
+        </div>
+        {{#renderChild}}{{/renderChild}}
+        {{/options}}
+    </fieldset>
+</div>

package/frontend/themes/gov-uk/views/partials/mixins/panel.html

@@ -0,0 +1,3 @@
+<div id="{{toggle}}-panel" class="reveal js-hidden panel panel-border-narrow">
+  {{#renderMixin}}{{/renderMixin}}
+</div>

package/frontend/themes/gov-uk/views/partials/validation-summary.html

@@ -0,0 +1,24 @@
+{{#errorlist.length}}
+<div class="validation-summary error-summary" tabindex="-1">
+    {{$errorlist-title}}
+
+      {{#errorLength.single}}
+        <h2>{{#t}}errorlist.title.single{{/t}}</h2>
+      {{/errorLength.single}}
+      {{#errorLength.multiple}}
+        <h2>{{#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>
+{{/errorlist.length}}

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, 'govuk-hint');
-    helpers.addClass(this.$maxlengthHint, 'govuk-error-message');
+    helpers.removeClass(this.$maxlengthHint, 'form-hint');
+    helpers.addClass(this.$maxlengthHint, 'error-message');
     helpers.addClass(this.$textarea, 'textarea-error');
   } else {
-    helpers.addClass(this.$maxlengthHint, 'govuk-hint');
-    helpers.removeClass(this.$maxlengthHint, 'govuk-error-message');
+    helpers.addClass(this.$maxlengthHint, 'form-hint');
+    helpers.removeClass(this.$maxlengthHint, 'error-message');
     helpers.removeClass(this.$textarea, 'textarea-error');
   }
 };

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/frontend/toolkit/assets/stylesheets/modules/_validation.scss

@@ -22,7 +22,7 @@
     }
 }
 
-.govuk-form-group--error {
+.validation-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 @@
     }
 }
 
-.govuk-error-message {
+.error-message {
     display: block;
     @include media(tablet) {
         margin-bottom: 0.5em;
@@ -46,6 +46,6 @@
 }
 
 .invalid-input,
-.govuk-form-group--error .date-input {
+.validation-error .date-input {
     border: $validation-bdr-size solid $error-colour;
 }

package/index.js

@@ -79,7 +79,7 @@ const getContentSecurityPolicy = (config, res) => {
     fontSrc: ['fonts.gstatic.com '],
     scriptSrc: ['www.google-analytics.com', 'ssl.google-analytics.com'],
     imgSrc: ['www.google-analytics.com', 'ssl.gstatic.com'],
-    connectSrc: ['www.google-analytics.com']
+    connectSrc: ['https://www.google-analytics.com', 'https://region1.google-analytics.com']
   };
 
   if (config.gaTagId) {
@@ -120,8 +120,6 @@ 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
  */
@@ -211,9 +209,6 @@ 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,22 +7,7 @@ const hoganExpressStrict = require('hogan-express-strict');
 const expressPartialTemplates = require('express-partial-templates');
 const bodyParser = require('body-parser');
 
-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) => {
+module.exports = (app, config) => {
   const viewEngine = config.viewEngine || 'html';
 
   app.use((req, res, next) => {
@@ -32,8 +17,7 @@ module.exports = async (app, config) => {
 
   app.use(config.theme());
 
-  const filteredViews = filterEmptyViews(config.theme.views);
-  const viewPaths = [].concat(filteredViews);
+  const viewPaths = [].concat(config.theme.views);
   app.set('view engine', viewEngine);
   app.enable('view cache');
 

package/middleware/errors.js

@@ -2,6 +2,7 @@
 'use strict';
 
 const rateLimitsConfig = require('../config/rate-limits');
+const monitor = require('./monitor');
 
 const errorTitle = code => `${code}_ERROR`;
 const errorMsg = code => `There is a ${code}_ERROR`;
@@ -89,6 +90,8 @@ module.exports = options => {
       baseUrl: returnBaseUrl(req.path)
     };
 
+    monitor(req, res, err.status);
+
     if (logger && logger.error) {
       logger.error(err.message || err.error, err);
     }

package/middleware/monitor.js

@@ -0,0 +1,20 @@
+'use strict';
+const Prometheus = require('prom-client');
+
+let responseTimeInMs = 0;
+
+const httpRequestDurationMicroseconds = new Prometheus.Histogram({
+  name: 'http_request_duration_ms',
+  help: 'Duration of HTTP requests in ms',
+  labelNames: ['method', 'route', 'code'],
+  buckets: [0.10, 5, 15, 50, 100, 200, 300, 400, 500]  // buckets for response time from 0.1ms to 500ms
+});
+
+module.exports =  function (req, res, status) {
+  const startTime = Date.now();
+  httpRequestDurationMicroseconds
+    .labels(req.method, req.url, status)
+    .observe(responseTimeInMs);
+  const endTime = Date.now();
+  responseTimeInMs = endTime - startTime;
+};

package/middleware/not-found.js

@@ -1,4 +1,5 @@
 'use strict';
+const monitor = require('./monitor');
 
 const getTranslations = translate => {
   const translations = {
@@ -26,6 +27,8 @@ module.exports = options => {
       logger.warn(`Cannot find: ${req.url}`);
     }
 
+    monitor(req, res, '404');
+
     res.status(404).render('404', {
       title: translations.title,
       description: translations.description,

package/middleware/rate-limiter.js

@@ -4,7 +4,6 @@ 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": "20.0.0-beta.8",
+  "version": "21.0.0-instrumentation-beta.0",
   "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 \"test/**/*.spec.js\" \"sandbox/test/**/*.spec.js\"",
+    "unit:nocov": "LOG_LEVEL=error mocha",
     "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,7 +57,6 @@
     "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,13 +71,15 @@
     "minimatch": "^3.0.3",
     "minimist": "^1.2.6",
     "mixwith": "^0.1.1",
-    "moment": "^2.29.2",
+    "moment": "^2.29.4",
     "morgan": "^1.10.0",
     "mustache": "^2.3.0",
     "nodemailer": "^6.6.3",
     "nodemailer-ses-transport": "^1.5.0",
     "nodemailer-smtp-transport": "^2.7.4",
     "nodemailer-stub-transport": "^1.1.0",
+    "notifications-node-client": "^5.1.1",
+    "prom-client": "^14.0.1",
     "redis": "^3.1.2",
     "reqres": "^3.0.1",
     "request": "^2.79.0",

package/sandbox/apps/sandbox/fields.js

@@ -8,25 +8,16 @@ module.exports = {
   'landing-page-radio': {
     mixin: 'radio-group',
     validate: ['required'],
-    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'],
+    legend: {
+      className: 'visuallyhidden'
+    },
     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', {
-    isPageHeading: 'true',
-    validate: [
-      'required',
-      'date',
-      { type: 'after', arguments: ['1900'] }
-    ]
+  dateOfBirth: dateComponent('dateOfBirth', {
+    validate: ['required', 'before', { type: 'after', arguments: ['1900'] }]
   }),
   building: {
     validate: ['required', 'notUrl', { type: 'maxlength', arguments: 100 }]
@@ -46,7 +37,6 @@ module.exports = {
     formatter: ['removespaces', 'uppercase']
   },
   incomeTypes: {
-    isPageHeading: 'true',
     mixin: 'checkbox-group',
     labelClassName: 'visuallyhidden',
     validate: ['required'],
@@ -59,9 +49,11 @@ module.exports = {
     ]
   },
   countryOfHearing: {
-    isPageHeading: 'true',
     mixin: 'radio-group',
     validate: ['required'],
+    legend: {
+      className: 'visuallyhidden'
+    },
     options: [
       'englandAndWales',
       'scotland',
@@ -69,8 +61,6 @@ module.exports = {
     ]
   },
   email: {
-    isPageHeading: 'true',
-    labelClassName: ['govuk-label--l'],
     validate: ['required', 'email']
   },
   phone: {
@@ -82,7 +72,6 @@ module.exports = {
   },
   countrySelect: {
     mixin: 'select',
-    isPageHeading: 'true',
     className: ['typeahead'],
     options:[''].concat(require('homeoffice-countries').allCountries),
     legend: {
@@ -92,15 +81,14 @@ 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: 10 }],
+    validate: ['required', { type: 'maxlength', arguments: 5000 }],
     attributes: [{
       attribute: 'rows',
       value: 8
@@ -108,7 +96,7 @@ module.exports = {
   },
   appealStages: {
     mixin: 'select',
-    isPageHeading: 'true',
+    labelClassName: 'visuallyhidden',
     validate: ['required'],
     options: [{
       value: '',

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/apps/sandbox/translations/src/en/fields.json

@@ -1,7 +1,6 @@
 {
   "landing-page-radio": {
     "legend": "Which form would you like to explore?",
-    "hint": "Choose one of the options below and press continue.",
     "options": {
       "basic-form": {
         "label": "Basic form"
@@ -15,10 +14,10 @@
     }
   },
   "name": {
-    "label": "What is your full name?"
+    "label": "Full name"
   },
   "dateOfBirth": {
-    "legend": "What is your date of birth?",
+    "legend": "Date of birth",
     "hint": "For example, 31 10 1990"
   },
   "building": {
@@ -56,7 +55,7 @@
     }
   },
   "countryOfHearing": {
-    "legend": "What country was the appeal lodged?",
+    "label": "Country of hearing",
     "options": {
       "englandAndWales": {
         "label": "England and Wales"
@@ -70,7 +69,7 @@
     } 
   },
   "email" : {
-    "label": "Enter your email address"
+    "label": "Email address"
   },
   "phone": {
     "label": "Phone number",
@@ -80,16 +79,14 @@
     "legend": "International phone number"
   },
   "complaintDetails": {
-    "label": "Complaint details",
-    "hint": "Briefly summarise your complaint. Include anything that can help our investigation."
+    "label": "Complaint details"
   },
   "countrySelect": {
-    "label": "Which country are you based in?",
+    "label": "Select a country",
     "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..."
     }