hof 20.0.0-beta.9 → 20.0.0

package/README.md

@@ -1,4 +1,5 @@
 # HOF (Home Office Forms)
+
 [![NPM_Publish Actions Status](https://github.com/UKHomeOfficeForms/hof/workflows/Automate_Publish/badge.svg)](https://github.com/UKHomeOfficeForms/hof/actions)
 [![npm version](https://badge.fury.io/js/hof.svg)](https://badge.fury.io/js/hof)
 [![Known Vulnerabilities](https://snyk.io/test/npm/hof/badge.svg)](https://snyk.io/test/npm/hof)
@@ -6,6 +7,7 @@
 HOF (Home Office Forms) is a framework designed to assist developers in creating form-based workflows in a rapid, repeatable and secure way. It aims to reduce simple applications as much as possible to being configuration-only.
 
 ## Server Settings
+
 In your `hof.settings.json` file you can add `getTerms: false` and `getCookies: false` to turn off the default cookies, and terms and conditions information provided by the HOF framework. This is if you want to provide more specific material at the service level in regards to these subject matter otherwise the defaults should suffice.
 
 Also you can set `getAccessibility: true` to get the default accessibility document for this framework if one is not provided at the service level. It is assumed there should have been an accessibility audit carried out for a service already hence why the default setting for this is set to `false`. But if a generic placeholder is needed to ensure the service is legally compliant then this can be set to `true` to provide the default one presented within the framework.
@@ -17,9 +19,11 @@ Also you can set `getAccessibility: true` to get the default accessibility docum
 [https://ukhomeofficeforms.github.io/hof-guide/](https://ukhomeofficeforms.github.io/hof-guide/)
 
 ## Content Security Policy
+
 ### Inline JavaScript from 18.0.0
+
 From version 18.0.0, unsafe-inline has been removed from the content security policy by default. This means scripts
-must either be referenced using the src attribute, ```<script src='...'></script>``` or with a nonce value attribute. A nonce
+must either be referenced using the src attribute, `<script src='...'></script>` or with a nonce value attribute. A nonce
 value is generated for every request. You can add this to your own templates' inline scripts as needed:
 
 ```
@@ -29,15 +33,17 @@ value is generated for every request. You can add this to your own templates' in
 ```
 
 ### Built with HOF
- * https://github.com/UKHomeOffice/gro
- * https://github.com/UKHomeOffice/end-tenancy
- * [Firearms Licensing (Home Office)](https://github.com/UKHomeOffice/firearms)
- * [Contact UK Trade & Investment (UK Trade & Investment)](https://github.com/UKTradeInvestment/contact-ukti)
- * [Biometric Residence Permit (Home Office)](https://github.com/UKHomeOffice/brp_app)
- * [Report terrorist material (Home Office)](https://github.com/UKHomeOffice/rotm)
- * [UKVI Complaints (Home Office)](https://github.com/UKHomeOffice/Complaints)
+
+- https://github.com/UKHomeOffice/gro
+- https://github.com/UKHomeOffice/end-tenancy
+- [Firearms Licensing (Home Office)](https://github.com/UKHomeOffice/firearms)
+- [Contact UK Trade & Investment (UK Trade & Investment)](https://github.com/UKTradeInvestment/contact-ukti)
+- [Biometric Residence Permit (Home Office)](https://github.com/UKHomeOffice/brp_app)
+- [Report terrorist material (Home Office)](https://github.com/UKHomeOffice/rotm)
+- [UKVI Complaints (Home Office)](https://github.com/UKHomeOffice/Complaints)
 
 ## HOF BUILD
+
 Performs build workflow for hof apps in prod and development
 
 ## Usage
@@ -54,10 +60,10 @@ It is recommended to alias `hof-build` to an npm script in your package.json.
 
 ## Tasks
 
-* `browserify` - compiles client-side js with browserify
-* `sass` - compiles sass
-* `images` - copies images from ./assets/images directory to ./public/images
-* `translate` - compiles translation files
+- `browserify` - compiles client-side js with browserify
+- `sass` - compiles sass
+- `images` - copies images from ./assets/images directory to ./public/images
+- `translate` - compiles translation files
 
 ## Watch
 
@@ -98,7 +104,7 @@ Any task can be disabled by setting its configuration to `false` (or any falsy v
 
 ```js
 module.exports = {
-  browserify: false
+  browserify: false,
 };
 ```
 
@@ -106,15 +112,15 @@ module.exports = {
 
 Each task has a common configuration format with the following options:
 
-* `src` - defines the input file or files for the build task
-* `out` - defines the output location of the built code where relevant
-* `match` - defines the pattern for files to watch to trigger a rebuild of this task
-* `restart` - defines if this task should result in a server restart
+- `src` - defines the input file or files for the build task
+- `out` - defines the output location of the built code where relevant
+- `match` - defines the pattern for files to watch to trigger a rebuild of this task
+- `restart` - defines if this task should result in a server restart
 
 Additionally the server instance created by `watch` can be configured by setting `server` config. Available options are:
 
-* `cmd` - defines the command used to start the server
-* `extensions` - defines the file extensions which will be watched to trigger a restart
+- `cmd` - defines the command used to start the server
+- `extensions` - defines the file extensions which will be watched to trigger a restart
 
 ### Shared Translations
 
@@ -123,6 +129,7 @@ By default translations put in the commons directory in a HOF project, i.e. `app
 To override this behaviour you can add the following to your `hof.settings.json` file or to the settings possible to hof on your server.js file
 
 Hof.settings.json example
+
 ```
 "build": {
   "translate": {
@@ -132,6 +139,7 @@ Hof.settings.json example
 ```
 
 server.js example
+
 ```
 const hof = require('hof');
 const settings = { ...behaviours, ...routes };
@@ -155,9 +163,10 @@ hof-transpiler [source dir|glob] {OPTIONS}
 
 ## Example
 
-Lets say you have a directory such as: ```translations/src/en```
+Lets say you have a directory such as: `translations/src/en`
 
 Which contains:
+
 ```
 buttons.json
 emails.json
@@ -165,9 +174,9 @@ errors.json
 validation.json
 ```
 
-If you run hof-transpiler against the directory ```hof-transpiler ./translations/src```
+If you run hof-transpiler against the directory `hof-transpiler ./translations/src`
 
-It will iterate through src and for each directory it will create a new directory at the root level with a built default.json file ```translations/en/default.json```
+It will iterate through src and for each directory it will create a new directory at the root level with a built default.json file `translations/en/default.json`
 
 Which will look something like
 
@@ -192,26 +201,30 @@ This is used further down the hof stack for application translations.
 
 ## Advanced example - duplicate keys between source folder and shared folder
 
-Lets say you have a directory such as: ```translations/src/en```
+Lets say you have a directory such as: `translations/src/en`
 
 Which contains:
 buttons.json containing:
+
 ```json
 {
   "unusual-button": "Moo"
 }
 ```
+
 emails.json containing:
+
 ```json
 {
   "customer-email": "Hi how are you?"
 }
 ```
 
-And you also have a directory of shared translations such as: ```shared-translations/src/en```
+And you also have a directory of shared translations such as: `shared-translations/src/en`
 
 Which contains:
 buttons.json containing:
+
 ```json
 {
   "common-button": "Click me"
@@ -219,11 +232,13 @@ buttons.json containing:
 ```
 
 If you then run:
+
 ```bash
 hof-transpiler translations/src --shared shared-translations/src
 ```
 
 Then transpiled translations should appear in translations/en/default.json as follows:
+
 ```json
 {
   "buttons": {
@@ -245,6 +260,7 @@ hof-transpiler supports multiple shared sources, extending them from left to rig
 If you have the following sources:
 
 node_modules/hof-template-partials/translations/src/en/buttons.json
+
 ```json
 {
   "continue": "Continue",
@@ -255,6 +271,7 @@ node_modules/hof-template-partials/translations/src/en/buttons.json
 ```
 
 common/translations/src/en/buttons.json
+
 ```json
 {
   "skip": "Skip this step",
@@ -263,6 +280,7 @@ common/translations/src/en/buttons.json
 ```
 
 my-application/translations/src/en/buttons.json
+
 ```json
 {
   "continue": "Go Forth!"
@@ -270,11 +288,13 @@ my-application/translations/src/en/buttons.json
 ```
 
 If you then run:
+
 ```bash
 hof-transpiler my-application/translations/src --shared node_modules/hof-template-partials/translations/src --shared common/translations/src
 ```
 
 my-application/translations/en/default.json
+
 ```json
 {
   "buttons": {
@@ -286,6 +306,7 @@ my-application/translations/en/default.json
   }
 }
 ```
+
 #HOF Controller
 
 Implements a request pipeline for GET and POST of forms, with input cleaning/formatting and validation.
@@ -295,18 +316,18 @@ Implements a request pipeline for GET and POST of forms, with input cleaning/for
 Basic usage:
 
 ```javascript
-var Form = require('./controller');
+var Form = require("./controller");
 
 var form = new Form({
-    template: 'form',
-    fields: {
-        name: {
-            validate: 'required'
-        }
-    }
+  template: "form",
+  fields: {
+    name: {
+      validate: "required",
+    },
+  },
 });
 
-app.use('/', form.requestHandler());
+app.use("/", form.requestHandler());
 ```
 
 This won't really be very useful though, since all it will do is render the "form" template on `/` and respond to GET and POST requests.
@@ -328,16 +349,16 @@ module.exports = MyForm;
 
 The Form class allows for a number of insertion points for extended functionality:
 
-* `configure`   Allows for dynamic overwriting of particular points of form configuration based on user session
-* `process`     Allows for custom formatting and processing of input prior to validation
-* `validate`    Allows for custom input validation
-* `getValues`   To define what values the fields are populated with on GET
-* `saveValues`  To define what is done with successful form submissions
+- `configure` Allows for dynamic overwriting of particular points of form configuration based on user session
+- `process` Allows for custom formatting and processing of input prior to validation
+- `validate` Allows for custom input validation
+- `getValues` To define what values the fields are populated with on GET
+- `saveValues` To define what is done with successful form submissions
 
 All of these methods take three arguments of the request, the response and a callback. In all cases the callback should be called with a first argument representing an error.
 
-* `getErrors/setErrors` Define how errors are persisted between the POST and subsequent GET of a form step.
-* `locals` Define what additional variables a controller exposes to its template
+- `getErrors/setErrors` Define how errors are persisted between the POST and subsequent GET of a form step.
+- `locals` Define what additional variables a controller exposes to its template
 
 These methods are synchronous and take only the request and response obejct as arguments.
 
@@ -352,6 +373,7 @@ By default the application of a validator is optional on empty strings. If you n
 Custom validator functions can be passed in field config. These must be named functions and the name is used as the error.type for looking up validation error messages.
 
 fields.js
+
 ```js
 {
     'field-1': {
@@ -435,9 +457,10 @@ For example, for a dynamic address selection component:
 
 ```js
 MyForm.prototype.configure = function configure(req, res, next) {
-    req.form.options.fields['address-select'].options = req.sessionModel.get('addresses');
-    next();
-}
+  req.form.options.fields["address-select"].options =
+    req.sessionModel.get("addresses");
+  next();
+};
 ```
 
 ### The FormError class
@@ -445,15 +468,14 @@ MyForm.prototype.configure = function configure(req, res, next) {
 FormError can be used as a façade to normalise different types of error one may receive / trigger, and to be subsequently returned from a controller.
 Its constructor takes a series of options. `title` and `message` have both getters and public methods to define default values.
 
-
 ```js
-
 let error = new ErrorClass(this.missingDoB, {
-    key: this.missingDob,
-    type: 'required',
-    redirect: '/missingData',
-    title: 'Something went wrong',
-    message: 'Please supply a valid date of birth'});
+  key: this.missingDob,
+  type: "required",
+  redirect: "/missingData",
+  title: "Something went wrong",
+  message: "Please supply a valid date of birth",
+});
 ```
 
 ##hof-behaviour-session
@@ -473,6 +495,7 @@ class MyController extends mix(BaseController).with(Session) {
   ...
 }
 ```
+
 `MyController` now extends `hof-form-controller` and has `hof-behaviour-session` functionality mixed in.
 
 ##Functionality
@@ -481,14 +504,13 @@ This mixin extends `hof-form-controller` by persisting the form data to the `ses
 
 The following form controller methods are used:
 
-* `getValues(req, res, cb)` - calls callback with `null` and a map of all items in the `sessionModel`, extended with `errorValues` - to persist entered values on current step if validation fails
-* `saveValues(req, res, cb)` - Called on success. Sets all step fields in `req.form.values` to the sessionModel, unsets `errorValues`.
-* `getErrors(req)` - returns all errors for fields on the current step (`req.form.options.fields`), excluding redirects. Set to `req.form.errors` in `hof-form-controller`.
-* `setErrors(err, req)` - called on validation error(s). Sets the current step field values as `errorValues` in sessionModel to be used in `getValues`. Sets `errors` to sessionModel - a map of `field-name: error` to be used in `getErrors`.
-* `locals(req, res)` - Extends the result of `super.locals` with `baseUrl` (`req.baseUrl`) and `nextPage` (the result of `this.getNextStep(req, res)`).
-* `missingPrereqHandler(req, res)` - Error handler called when a `MISSING_PREREQ` error is thrown from the [check-progress](https://github.com/UKHomeOfficeForms/hof-form-wizard/blob/master/lib/middleware/check-progress.js) middleware. This occurs if a step is visited out of sequence. This error handler causes the user to be redirected to the last completed step, or the first step if none have been completed.
-* `errorHandler(err, req, res, next)` - checks if `err.code` is `MISSING_PREREQ`, if so calls `missingPrereqHandler`, if not calls `super` to hand over to parent error handler.
-
+- `getValues(req, res, cb)` - calls callback with `null` and a map of all items in the `sessionModel`, extended with `errorValues` - to persist entered values on current step if validation fails
+- `saveValues(req, res, cb)` - Called on success. Sets all step fields in `req.form.values` to the sessionModel, unsets `errorValues`.
+- `getErrors(req)` - returns all errors for fields on the current step (`req.form.options.fields`), excluding redirects. Set to `req.form.errors` in `hof-form-controller`.
+- `setErrors(err, req)` - called on validation error(s). Sets the current step field values as `errorValues` in sessionModel to be used in `getValues`. Sets `errors` to sessionModel - a map of `field-name: error` to be used in `getErrors`.
+- `locals(req, res)` - Extends the result of `super.locals` with `baseUrl` (`req.baseUrl`) and `nextPage` (the result of `this.getNextStep(req, res)`).
+- `missingPrereqHandler(req, res)` - Error handler called when a `MISSING_PREREQ` error is thrown from the [check-progress](https://github.com/UKHomeOfficeForms/hof-form-wizard/blob/master/lib/middleware/check-progress.js) middleware. This occurs if a step is visited out of sequence. This error handler causes the user to be redirected to the last completed step, or the first step if none have been completed.
+- `errorHandler(err, req, res, next)` - checks if `err.code` is `MISSING_PREREQ`, if so calls `missingPrereqHandler`, if not calls `super` to hand over to parent error handler.
 
 ##behaviour-hooks
 
@@ -507,6 +529,7 @@ class MyController extends mix(BaseController).with(Hooks) {
   ...
 }
 ```
+
 `MyController` now extends `hof-form-controller` and has `hof-behaviour-hooks` functionality mixed in.
 
 ##Functionality
@@ -514,46 +537,52 @@ class MyController extends mix(BaseController).with(Hooks) {
 The following hooks are currently supported, the methods are GET/POST pipeline methods from `hof-form-controller`:
 
 ####GET
-* `_getErrors` - `'pre-getErrors', 'post-getErrors'`
-* `_getValues` - `'pre-getValues', 'post-getValues'`
-* `_locals` - `'pre-locals', 'post-locals'`
-* `render` - `'pre-render', 'post-render'`
+
+- `_getErrors` - `'pre-getErrors', 'post-getErrors'`
+- `_getValues` - `'pre-getValues', 'post-getValues'`
+- `_locals` - `'pre-locals', 'post-locals'`
+- `render` - `'pre-render', 'post-render'`
 
 ####POST
-* `_process` - `'pre-process', 'post-process'`
-* `_validate` - `'pre-validate', 'post-validate'`
-* `saveValues` - `'pre-saveValues', 'post-saveValues'`
-* `successHandler` - `'pre-successHandler', 'post-successHandler'`
+
+- `_process` - `'pre-process', 'post-process'`
+- `_validate` - `'pre-validate', 'post-validate'`
+- `saveValues` - `'pre-saveValues', 'post-saveValues'`
+- `successHandler` - `'pre-successHandler', 'post-successHandler'`
 
 ###In field config
 
 fields.js
+
 ```js
 module.exports = {
-  'field-1': {
+  "field-1": {
     hooks: {
-      'post-locals': (req, res, next) => {
+      "post-locals": (req, res, next) => {
         Object.assign(res.locals, {
-          foo: 'bar'
+          foo: "bar",
         });
         next();
       },
-      'pre-process': (req, res, next) => {
-        req.body['field-1'] = req.body['field-1'].toUpperCase();
+      "pre-process": (req, res, next) => {
+        req.body["field-1"] = req.body["field-1"].toUpperCase();
         next();
-      }
-    }
-  }
-}
+      },
+    },
+  },
+};
 ```
 
 # HOF Model
+
 Simple model for interacting with http/rest apis.
 
 ## Usage
+
 ```javascript
-const Model = require('./model');
+const Model = require("./model");
 ```
+
 ## Data Storage
 
 Models can be used as basic data storage with set/get and change events.
@@ -566,10 +595,10 @@ Save a property to a model. Properties can be passed as a separate key/value arg
 
 ```javascript
 const model = new Model();
-model.set('key', 'value');
+model.set("key", "value");
 model.set({
-  firstname: 'John',
-  lastname: 'Smith'
+  firstname: "John",
+  lastname: "Smith",
 });
 ```
 
@@ -578,7 +607,7 @@ model.set({
 Retrieve a property from a model:
 
 ```javascript
-const val = model.get('key');
+const val = model.get("key");
 // val = 'value'
 ```
 
@@ -597,7 +626,7 @@ const json = model.toJSON();
 
 ```javascript
 const model = new Model();
-model.on('change', (changedFields) => {
+model.on("change", (changedFields) => {
   // changedFields contains a map of the key/value pairs which have changed
   console.log(changedFields);
 });
@@ -607,10 +636,10 @@ model.on('change', (changedFields) => {
 
 ```javascript
 const model = new Model();
-model.on('change:name', (newValue, oldValue) => {
+model.on("change:name", (newValue, oldValue) => {
   // handler is passed the new value and the old value as arguents
 });
-model.set('name', 'John Smith');
+model.set("name", "John Smith");
 ```
 
 ### Referenced Fields
@@ -619,12 +648,12 @@ A field can be set to a reference to another field by setting it a value of `$re
 
 ```javascript
 const model = new Model();
-model.set('home-address', '1 Main Street');
-model.set('contact-address', '$ref:home-address');
+model.set("home-address", "1 Main Street");
+model.set("contact-address", "$ref:home-address");
 
-model.get('contact-address'); // => '1 Main Street';
-model.set('home-address', '2 Main Street');
-model.get('contact-address'); // => '2 Main Street';
+model.get("contact-address"); // => '1 Main Street';
+model.set("home-address", "2 Main Street");
+model.get("contact-address"); // => '2 Main Street';
 
 model.toJSON(); // => { home-address: '2 Main Street', 'contact-address': '2 Main Street' }
 ```
@@ -633,26 +662,26 @@ Change events will be fired on the referenced field if the underlying value chan
 
 ```javascript
 const model = new Model();
-model.set('home-address', '1 Main Street');
-model.set('contact-address', '$ref:home-address');
-model.on('change:contact-address', (value, oldValue) => {
+model.set("home-address", "1 Main Street");
+model.set("contact-address", "$ref:home-address");
+model.on("change:contact-address", (value, oldValue) => {
   // this is fired when home-address property changes
 });
 
-model.set('home-address', '2 Main Street');
+model.set("home-address", "2 Main Street");
 ```
 
 A field can be unreferenced by setting its value to any other value.
 
 ```javascript
 const model = new Model();
-model.set('home-address', '1 Main Street');
+model.set("home-address", "1 Main Street");
 
 // reference the field
-model.set('contact-address', '$ref:home-address');
+model.set("contact-address", "$ref:home-address");
 
 // unreference the field
-model.set('contact-address', '1 Other Road');
+model.set("contact-address", "1 Other Road");
 ```
 
 ## API Client
@@ -669,7 +698,7 @@ There are three methods for API interaction corresponding to GET, POST, and DELE
 
 ```javascript
 const model = new Model();
-model.fetch().then(data => {
+model.fetch().then((data) => {
   console.log(data);
 });
 ```
@@ -679,9 +708,9 @@ model.fetch().then(data => {
 ```javascript
 const model = new Model();
 model.set({
-  property: 'properties are sent as JSON request body by default'
+  property: "properties are sent as JSON request body by default",
 });
-model.save().then(data => {
+model.save().then((data) => {
   console.log(data);
 });
 ```
@@ -691,9 +720,9 @@ The method can also be overwritten by passing options
 ```javascript
 const model = new Model();
 model.set({
-  property: 'this will be sent as a PUT request'
+  property: "this will be sent as a PUT request",
 });
-model.save({ method: 'PUT' }).then(data => {
+model.save({ method: "PUT" }).then((data) => {
   console.log(data);
 });
 ```
@@ -702,7 +731,7 @@ model.save({ method: 'PUT' }).then(data => {
 
 ```javascript
 const model = new Model();
-model.delete().then(data => {
+model.delete().then((data) => {
   console.log(data);
 });
 ```
@@ -715,14 +744,16 @@ If no `url` method is defined then the model will use the options parameter and
 const model = new Model();
 
 // make a GET request to http://example.com:3000/foo/bar
-model.fetch({
-  protocol: 'http',
-  hostname: 'example.com',
-  port: 3000,
-  path: '/foo/bar'
-}).then(data => {
-  console.log(data);
-});
+model
+  .fetch({
+    protocol: "http",
+    hostname: "example.com",
+    port: 3000,
+    path: "/foo/bar",
+  })
+  .then((data) => {
+    console.log(data);
+  });
 ```
 
 ### Events
@@ -730,29 +761,36 @@ model.fetch({
 API requests will emit events as part of their lifecycle.
 
 `sync` is emitted when an API request is sent
+
 ```javascript
-model.on('sync', function (settings) { });
+model.on("sync", function (settings) {});
 ```
 
 `success` is emitted when an API request successfully completes
+
 ```javascript
-model.on('success', function (data, settings, statusCode, responseTime) { });
+model.on("success", function (data, settings, statusCode, responseTime) {});
 ```
 
 `fail` is emitted when an API request fails
+
 ```javascript
-model.on('fail', function (err, data, settings, statusCode, responseTime) { });
+model.on("fail", function (err, data, settings, statusCode, responseTime) {});
 ```
 
 ### HOF Model APIs
+
 - `Html-To-Pdf Converter`: This extends the HOF model to interact with the html-to-pdf converter API https://github.com/UKHomeOffice/html-pdf-converter. The environmental variable `PDF_CONVERTER_URL` needs to be set to its local url when running in the same kube namespace to the service that wants to use it. This is then followed by the default port `10443` and then the URI for which part of the service you want to consume. For example:`https://html-pdf-converter:10443/convert` when the container is named `html-pdf-converter` in your kube deployment file. This has to be set to `https` for communication between services to work on ACP. However, `settings.rejectUnauthorized = false;` is set in the model to circumvent expired certificates due to this. This is preferable to using:
+
 ```
 name: NODE_TLS_REJECT_UNAUTHORIZED
 value: "0"
 ```
+
 which should NOT be used as it sets ignoring TLS at a global level which could present a MITM (Man-In-The-Middle) attack.
 
 Usage: Example below, as per the converter docs (link above) it accepts html and responds with Buffered data in pdf format which can then be either written to a file or attached to a Gov Notify message:
+
 ```
 const PDFModel = require('hof').apis.pdfConverter;
 
@@ -762,6 +800,7 @@ const pdfData = await pdfModel.save();
 ```
 
 # HOF Middleware
+
 A collection of commonly used HOF middleware, exports `cookies`, `notFound`, and `errors` on `middleware`
 
 ## Arranging the middleware in your app
@@ -772,16 +811,20 @@ The Not Found middleware should be placed after all routes and before the Error
 ## Cookies
 
 ### Usage
+
 ```js
-app.use(require('hof').middleware.cookies({
-  'cookie-name': 'my-application-cookie',
-  'param-name': 'my-query-param'
-}));
+app.use(
+  require("hof").middleware.cookies({
+    "cookie-name": "my-application-cookie",
+    "param-name": "my-query-param",
+  })
+);
 ```
 
 This middleware must be declared before your other routes.
 
 ### Options
+
 The `cookie-name` can be the same as your session cookie. (The
 middleware will not overwrite it.) Defaults to `hof-cookie-check`.
 
@@ -802,16 +845,22 @@ Kubernetes healthcheck URLs are provided as defaults if no overrides are supplie
 Expects there to be a view called 404 in your configured `/views` directory
 
 ### Usage
+
 ```js
-app.use(require('hof').middleware.notFound({
-  logger: require('/logger'),
-  translate: require('hof').i18n({path: path_to_translations/__lng__/__ns__.json}).translate
-}));
+app.use(
+  require("hof").middleware.notFound({
+    logger: require("/logger"),
+    translate: require("hof").i18n({
+      path: path_to_translations / __lng__ / __ns__.json,
+    }).translate,
+  })
+);
 ```
 
-This middleware should be declared *after* your other routes but *before* your errorhandler.
+This middleware should be declared _after_ your other routes but _before_ your errorhandler.
 
 ### Options
+
 `logger` can be any object with a warn method.
 
 `translate` can be the HOF i18n translate function
@@ -819,42 +868,51 @@ This middleware should be declared *after* your other routes but *before* your e
 ## Errors
 
 ### Usage
+
 ```js
-app.use(require('hof').middleware.errors({
-  logger: require('/logger'),
-  translate: require('hof').i18n({path: path_to_translations/__lng__/__ns__.json}).translate,
-  debug: true
-}));
+app.use(
+  require("hof").middleware.errors({
+    logger: require("/logger"),
+    translate: require("hof").i18n({
+      path: path_to_translations / __lng__ / __ns__.json,
+    }).translate,
+    debug: true,
+  })
+);
 ```
 
-This middleware must be declared *after* your other routes.
+This middleware must be declared _after_ your other routes.
 
 ### Options
+
 `logger` can be any object with an error method.
 
 `translate` can be the HOF i18n translate function
 
 `debug` set to true will present the stack trace in the form and return the err as the content of the template.
 
-__Note__ If `debug === true` translations will not be served, but the error handler default messages
-=======
+# **Note** If `debug === true` translations will not be served, but the error handler default messages
+
 ## Deep translate
 
-deepTranslate middleware supports nested conditional translations in order to show different content in different scenarios. The middleware adds a `translate` function to `req` which is used in various points throughout the architecture.  This middleware must be applied before any other middleware which rely on the `req.translate` function. Also when initializing the form wizard, or template mixins, if a `translate` function is provided, this will be used rather than the deepTranslate middleware.
+deepTranslate middleware supports nested conditional translations in order to show different content in different scenarios. The middleware adds a `translate` function to `req` which is used in various points throughout the architecture. This middleware must be applied before any other middleware which rely on the `req.translate` function. Also when initializing the form wizard, or template mixins, if a `translate` function is provided, this will be used rather than the deepTranslate middleware.
 
 ### Usage
 
 ```js
-const i18nFuture = require('hof').i18n;
+const i18nFuture = require("hof").i18n;
 const i18n = i18nFuture({
-  path: path.resolve(__dirname, './path/to/translations')
-})
-app.use(require('hof').middleware.deepTranslate({
-  translate: i18n.translate.bind(i18n)
-}));
+  path: path.resolve(__dirname, "./path/to/translations"),
+});
+app.use(
+  require("hof").middleware.deepTranslate({
+    translate: i18n.translate.bind(i18n),
+  })
+);
 ```
 
 locales
+
 ```json
 "fields": {
     "field-name": {
@@ -876,10 +934,10 @@ locales
 
 Using the translation key `fields.field-name.label` will return different values in different situations depending on the values of named fields. In the above example the following are true:
 
-* If both `dependent-field` and `dependent-field-2` have the value `"value-1"`, the label returned will be `"Label 1"`.
-* If the value of `dependent-field` is `"value-1"` and the value of `dependent-field-2` is `"value-2"`, the label returned will be `"Label 2"`.
-* If the value of `dependent-field` is `"value-2"` the label returned will be `"Label 3"` regardless of the value of `dependent-field-2`
-* The default label `"Fallback label"` will be used if value of `dependent-field` is neither of the given options, or it is `undefined`. It will also be used if the value of `dependent-field` is `"value-1"` and the value of `dependent-field-2` is neither of the given options or it is undefined.
+- If both `dependent-field` and `dependent-field-2` have the value `"value-1"`, the label returned will be `"Label 1"`.
+- If the value of `dependent-field` is `"value-1"` and the value of `dependent-field-2` is `"value-2"`, the label returned will be `"Label 2"`.
+- If the value of `dependent-field` is `"value-2"` the label returned will be `"Label 3"` regardless of the value of `dependent-field-2`
+- The default label `"Fallback label"` will be used if value of `dependent-field` is neither of the given options, or it is `undefined`. It will also be used if the value of `dependent-field` is `"value-1"` and the value of `dependent-field-2` is neither of the given options or it is undefined.
 
 # HOF Components
 
@@ -890,14 +948,15 @@ A component for handling the rendering and processing of 3-input date fields use
 ## Usage
 
 In your fields config:
+
 ```js
-const dateComponent = require('hof').components.date;
+const dateComponent = require("hof").components.date;
 
 module.exports = {
-  'date-field': dateComponent('date-field', {
-    validate: ['required', 'before']
-  })
-}
+  "date-field": dateComponent("date-field", {
+    validate: ["required", "before"],
+  }),
+};
 ```
 
 The above example will create a new date component with the key `'date-field'` and will apply the validators `required` and `before` (before today).
@@ -906,16 +965,17 @@ The above example will create a new date component with the key `'date-field'` a
 
 The following optional configuration options are supported:
 
-* `validate {String|Array}` - validators to use on the processed date field
-* `template` - an absolute path to an alternate template.
-* `dayOptional {Boolean}` - day defaults to `01` if omitted. Defaults to `false`
-* `monthOptional {Boolean}` - month defaults to `01` if omitted. If true then also forces `dayOptional` to be true. Defaults to `false`
+- `validate {String|Array}` - validators to use on the processed date field
+- `template` - an absolute path to an alternate template.
+- `dayOptional {Boolean}` - day defaults to `01` if omitted. Defaults to `false`
+- `monthOptional {Boolean}` - month defaults to `01` if omitted. If true then also forces `dayOptional` to be true. Defaults to `false`
 
 ## Labels
 
 The three intermedate fields have fallback labels of Day, Month and Year, however custom labels can be used by including the translation at the following path:
 
 fields.json
+
 ```json
 {
   "field-name": {
@@ -951,7 +1011,6 @@ If no sections config is passed, then the mixin will create a section for each s
 }
 ```
 
-
 Alternatively, sections can be defined manually as follows:
 
 ```js
@@ -990,9 +1049,9 @@ Fields can be defined as simple strings of the field key, in which case all defa
 
 Alternatively, a field can be passed as an object with a `field` property defining the field key, and any additional properties as follows:
 
-* `step` - `String` defines the step which the user is returned to to edit the field value. By default this is the first step in the form's steps configuration which contains the field.
-* `parse` - `Function` can parse the value for the field from the session into a value for display.
-* `derivation` - `Object` allows for a new derived field based on a combination of other fields in the form. Note that
+- `step` - `String` defines the step which the user is returned to to edit the field value. By default this is the first step in the form's steps configuration which contains the field.
+- `parse` - `Function` can parse the value for the field from the session into a value for display.
+- `derivation` - `Object` allows for a new derived field based on a combination of other fields in the form. Note that
   if both `derivation` and `parse` are specified then parse will be applied to the result of derivation. E.G.
   ```javascript
      derivation: {
@@ -1000,10 +1059,11 @@ Alternatively, a field can be passed as an object with a `field` property defini
        combiner: (values) => values.map(it => Number(it)).reduce((a, b) => a + b, 0)
      }
   ```
-* `useOriginalValue` - `Object` uses original value of radio button or checkbox label rather than trying to find a translation in the `fields.json` file. This could be due to options that are generated by user input that can not be predicted in advance, which are subsequently used to populate a value in the summary page. One good example is using one of many addresses inputted by a user that is additionally a contact address. See example below:
-![Firearms Use Original Value Summary Page Example](docs/images/firearms_use_original_value_summary.png)
+- `useOriginalValue` - `Object` uses original value of radio button or checkbox label rather than trying to find a translation in the `fields.json` file. This could be due to options that are generated by user input that can not be predicted in advance, which are subsequently used to populate a value in the summary page. One good example is using one of many addresses inputted by a user that is additionally a contact address. See example below:
+  ![Firearms Use Original Value Summary Page Example](docs/images/firearms_use_original_value_summary.png)
+
+- `multipleRowsFromAggregate` - `Object` if this object exists on a field, it uses the `labelCategory`, `valueCategory` and `valueTranslation` values to populate the row's label and value name but also iterates over multiple rows that have been aggregated under one field name. There is one good reference of this in Firearms where the following example is used:
 
-* `multipleRowsFromAggregate` - `Object` if this object exists on a field, it uses the `labelCategory`, `valueCategory` and `valueTranslation` values to populate the row's label and value name but also iterates over multiple rows that have been aggregated under one field name. There is one good reference of this in Firearms where the following example is used:
 ```javascript
 {
   field: 'location-addresses',
@@ -1016,6 +1076,7 @@ Alternatively, a field can be passed as an object with a `field` property defini
   }
 }
 ```
+
 The `location-addresses` field is one that the application has setup to aggregate and store all addresses labelled with the `address` field. Each address is a storage location for firearms, and so there is a sub-category which lists what firearms type is listed under each address (i.e. Full-bore, small-bore, muzzle-loading), and these are stored under the `address-category` field. Along with translations to them in the `fields.json` file living under the `location-address-category` translation header. By utilising these three values one can achieve the following output on the summary page.
 
 ![Firearms Summary Page Example](docs/images/firearms_summary_page_example.png)
@@ -1030,18 +1091,19 @@ The content for section headings and field labels will be loaded from translatio
 
 Translations for section headings are looked for in the following order:
 
-* `pages.confirm.sections.${key}.header`
-* `pages.${key}.header`
+- `pages.confirm.sections.${key}.header`
+- `pages.${key}.header`
 
 ### Field labels
 
 Translations for field labels are looked for in the following order:
 
-* `pages.confirm.fields.${key}.label`
-* `fields.${key}.label`
-* `fields.${key}.legend`
+- `pages.confirm.fields.${key}.label`
+- `fields.${key}.label`
+- `fields.${key}.legend`
 
 # Emailer Component
+
 HOF behaviour to send emails
 
 ## Usage
@@ -1078,10 +1140,10 @@ steps: {
 
 In addition to the options passed to `hof-emailer`, the following options can be used:
 
-* `recipient` - _Required_ - defines the address to which email will be sent. This can be set either as a key to retrieve an email address from the session, or explicitly to an email address.
-* `template` - _Required_ - defines the mustache template used to render the email content.
-* `subject` - defines the subject line of the email.
-* `parse` - parses the session model into an object used to populate the template.
+- `recipient` - _Required_ - defines the address to which email will be sent. This can be set either as a key to retrieve an email address from the session, or explicitly to an email address.
+- `template` - _Required_ - defines the mustache template used to render the email content.
+- `subject` - defines the subject line of the email.
+- `parse` - parses the session model into an object used to populate the template.
 
 `recipient` and `subject` options can also be defined as functions, which will be passed a copy of the session model and a translation function as arguments, and should return a string value.
 
@@ -1089,7 +1151,7 @@ In addition to the options passed to `hof-emailer`, the following options can be
 // use a translated value for the email subject line
 const emailer = EmailBehaviour({
   // ...
-  subject: (model, translate) => translate('email.success.subject')
+  subject: (model, translate) => translate("email.success.subject"),
 });
 ```
 
@@ -1107,24 +1169,23 @@ $ npm install hof-emailer --save
 
 ```js
 // first create an emailer instance
-const Emailer = require('hof').components.email.emailer;
+const Emailer = require("hof").components.email.emailer;
 const emailer = new Emailer({
-  from: 'sender@example.com',
-  transport: 'smtp',
+  from: "sender@example.com",
+  transport: "smtp",
   transportOptions: {
-    host: 'my.smtp.host',
-    port: 25
-  }
+    host: "my.smtp.host",
+    port: 25,
+  },
 });
 
 // then you can use your emailer to send emails
-const to = 'recipient@example.com';
-const body = 'This is the email body';
-const subject = 'Important email!'
-emailer.send(to, body, subject)
-  .then(() => {
-    console.log(`Email sent to ${to}!`);
-  });
+const to = "recipient@example.com";
+const body = "This is the email body";
+const subject = "Important email!";
+emailer.send(to, body, subject).then(() => {
+  console.log(`Email sent to ${to}!`);
+});
 ```
 
 ## Options
@@ -1152,6 +1213,7 @@ The following transport options are available:
 - `auth.pass` <String>: Mailserver authorisation password.
 
 ### `ses`
+
 [nodemailer-ses-transport](https://github.com/andris9/nodemailer-ses-transport)
 
 #### Options
@@ -1184,6 +1246,7 @@ transportOptions: {
   open: true
 }
 ```
+
 ### `stub`
 
 Disables sending email. No options are required.
@@ -1191,6 +1254,7 @@ Disables sending email. No options are required.
 # UTILITIES
 
 # Autofill Utility
+
 A webdriverio plugin to automate filling a form
 
 ## Usage
@@ -1198,10 +1262,10 @@ A webdriverio plugin to automate filling a form
 First, add the command to your webdriverio client:
 
 ```js
-const webdriver = require('webdriverio');
+const webdriver = require("webdriverio");
 const client = webdriver.remote(options);
 
-client.addCommand('goto', require('hof-util-autofill')(client));
+client.addCommand("goto", require("hof-util-autofill")(client));
 ```
 
 The command can be given any name you like, here we've called it `goto`.
@@ -1209,32 +1273,36 @@ The command can be given any name you like, here we've called it `goto`.
 Then you can use the command as normal as part of your webdriver command chain.
 
 ```js
-it('completes a form to a certain step automatically', () => {
-  return browser.goto('/confirm')
+it("completes a form to a certain step automatically", () => {
+  return browser
+    .goto("/confirm")
     .getUrl()
     .then((url) => {
-      assert.ok(url.indexOf('/confirm') > -1);
+      assert.ok(url.indexOf("/confirm") > -1);
     });
 });
 
-it('uses any data passed as a second argument to fill out the form', () => {
-  const inputs = { 'first-name': 'David', 'last-name': 'Hasselhoff' };
-  return browser.goto('/confirm', inputs)
-    .$('span.full-name')
+it("uses any data passed as a second argument to fill out the form", () => {
+  const inputs = { "first-name": "David", "last-name": "Hasselhoff" };
+  return browser
+    .goto("/confirm", inputs)
+    .$("span.full-name")
     .getText()
-    .then(name => {
-      assert.equal(name, 'David HasselHoff');
+    .then((name) => {
+      assert.equal(name, "David HasselHoff");
     });
 });
 
-it('saves screenshots of errors to specified screenshot location', () => {
+it("saves screenshots of errors to specified screenshot location", () => {
   const inputs = {};
-  return browser.goto('/confirm', inputs, { screenshots: '/path/to/output/dir' });
+  return browser.goto("/confirm", inputs, {
+    screenshots: "/path/to/output/dir",
+  });
 });
 
-it('tries a pre-specified number of times to get past stuck loops', () => {
+it("tries a pre-specified number of times to get past stuck loops", () => {
   const inputs = {};
-  return browser.goto('/confirm', inputs, { maxLoops: 1 });
+  return browser.goto("/confirm", inputs, { maxLoops: 1 });
 });
 ```
 
@@ -1242,10 +1310,11 @@ it('tries a pre-specified number of times to get past stuck loops', () => {
 
 Options are passed as a third argument to the exposed method. The following options are available:
 
-* `maxLoops` - determines how many times a step will retry if it resolves back to itself on submission before failing. Default: `3`
-* `screenshots` - specifies a location to save screenshots of the page when it gets stuck. If not specified then no screenshots are saved.
+- `maxLoops` - determines how many times a step will retry if it resolves back to itself on submission before failing. Default: `3`
+- `screenshots` - specifies a location to save screenshots of the page when it gets stuck. If not specified then no screenshots are saved.
 
 # Test-Data Utility
+
 Generator for test fixtures
 
 ## Usage
@@ -1255,7 +1324,7 @@ The library contains a number of generators for values of certain types. Values
 ### Example:
 
 ```js
-const TestData = require('hof').utils.testData;
+const TestData = require("hof").utils.testData;
 
 console.log(TestData.name);
 // "David Fletcher"
@@ -1266,22 +1335,22 @@ console.log(TestData.name);
 
 ## Available generators
 
-* `firstname`
-* `lastname`
-* `name`
-* `email`
-* `phone`
-* `streetname`
-* `streetsuffix`
-* `address` - `${number(1,100)} ${streetname} ${streetsuffix}`
-* `postcode`
-* `country` - a random country from [homeoffice-countries](npmjs.com/homeoffice-countries)
+- `firstname`
+- `lastname`
+- `name`
+- `email`
+- `phone`
+- `streetname`
+- `streetsuffix`
+- `address` - `${number(1,100)} ${streetname} ${streetsuffix}`
+- `postcode`
+- `country` - a random country from [homeoffice-countries](npmjs.com/homeoffice-countries)
 
 ## Functions
 
-* `number(min, max)` - returns an integer between `min` and `max`
-* `number(max)` - returns an integer between 0 and `max`
-* `number()` - returns an integer between 0 and 100
+- `number(min, max)` - returns an integer between `min` and `max`
+- `number(max)` - returns an integer between 0 and `max`
+- `number()` - returns an integer between 0 and 100
 
 # Countries Utility
 
@@ -1307,23 +1376,24 @@ In field configuration:
 
 If needed, the following options can be passed into the countries function:
 
-* `filter` - `Function` - applies a filter to the list of country names before mapping them
-* `parse` - `Function` - applies a transform to the country name before setting the label
+- `filter` - `Function` - applies a filter to the list of country names before mapping them
+- `parse` - `Function` - applies a transform to the country name before setting the label
 
 ## i18n
 
 If you wish to translate the countries into outher languages, you may want the labels to be in the form of translation keys. In this case you can use a `parse` option to convert the country names into a translation key:
 
 ```js
-const countries = require('hof').utils.countries;
+const countries = require("hof").utils.countries;
 const options = countries({
-  parse: country => `countries.${country.toLowerCase().split(' ').join('-')}`
+  parse: (country) => `countries.${country.toLowerCase().split(" ").join("-")}`,
 });
 ```
 
 You can then define a single translation for country names to be used for all country list instances.
 
 # FRONTEND
+
 ## Template Mixins
 
 A middleware that exposes a series of Mustache mixins on `res.locals` to ease usage of forms, translations, and some other things.
@@ -1337,20 +1407,20 @@ npm install [--save] hof-template-mixins;
 ## Usage
 
 ```javascript
-var express = require('express');
+var express = require("express");
 
-var i18n = require('i18n-future');
-var mixins = require('hof').frontend.mixins;
+var i18n = require("i18n-future");
+var mixins = require("hof").frontend.mixins;
 
-app.set('view engine', 'html');
-app.set('views', path.join(__dirname, '/views'));
+app.set("view engine", "html");
+app.set("views", path.join(__dirname, "/views"));
 
 app.use(i18n.middleware());
 app.use(mixins());
 
 app.use(function (req, res) {
-    // NOTE: res.locals.partials has been set.
-    res.render('example-template');
+  // NOTE: res.locals.partials has been set.
+  res.render("example-template");
 });
 ```
 
@@ -1414,6 +1484,7 @@ renderField
 ```
 
 ### qs
+
 This mixin takes a `key=value` query string and returns a query string with the extra params appended. If the key is already present in the query string, the value passed to the mixin is used
 
 ```html
@@ -1425,34 +1496,29 @@ This mixin takes a `key=value` query string and returns a query string with the
 The renderField mixin can be called in your template to render all fields. This will lookup the field.mixin in res.locals and call it passing the field key.
 
 ```html
-{{#fields}}
-  {{#renderField}}{{/renderField}}
-{{/fields}}
+{{#fields}} {{#renderField}}{{/renderField}} {{/fields}}
 ```
 
 fields.js
+
 ```js
 module.exports = {
-    'my-field': {
-        mixin: 'input-text'
-    }
-}
+  "my-field": {
+    mixin: "input-text",
+  },
+};
 ```
 
 If mixin is omitted `input-text` will be used
 
 To disable auto-rendering of a field, set `disableRender: true` in the field config. This is required when using the `child` element rendering functionality to prevent the field being rendered multiple times.
 
-
-### Render a single field ###
+### Render a single field
 
 To render a specific fields in your templates use the mixin name (matching those above) and field name like so...
 
 ```html
-{{#input-text}}myTextField{{/input-text}}
-
-{{#select}}mySelectMenu{{/select}}
-
+{{#input-text}}myTextField{{/input-text}} {{#select}}mySelectMenu{{/select}}
 {{#radio-group}}myRadioGroup{{/radio-group}}
 ```
 
@@ -1471,11 +1537,12 @@ To render a specific fields in your templates use the mixin name (matching those
 - `toggle`: Can be used to toggle the display of the HTML element with a matching `id`. See [hof-frontend-toolkit](https://github.com/UKHomeOfficeForms/hof-frontend-toolkit/blob/master/assets/javascript/progressive-reveal.js) for details.
 - `attributes`: A hash of key/value pairs applicable to a HTML `textarea` field. Each key/value is assigned as an attribute of the `textarea`. For example `spellcheck="true"`.
 - `child`: Render a child partial beneath each option in an `optionGroup`. Accepts a custom mustache template string, a custom partial in the format `partials/{your-partial-name}`, `'html'` which is used to specify the html for the field has already been prerendered, such as in [hof-component-date](https://github.com/UKHomeOfficeForms/hof-component-date) or a template mixin key which will be rendered within a panel element partial.
-
+- `isPageHeading`: Applicable to `checkbox` and `radio`, `text input` and `textarea` controls. Sets the legend as the page heading on single page questions.
+- `isWarning`: Applicable to `checkbox` and `radio` controls. Allows warning text to be placed after page headings on single page questions if required.
 
 # HOF-template-partials
 
-Home Office Forms template partials is a collection of mustache partials commonly used in HOF applications.  It also contains a collection of i18n translations used within the template partials. All contents are designed to be extended in your individual applications.
+Home Office Forms template partials is a collection of mustache partials commonly used in HOF applications. It also contains a collection of i18n translations used within the template partials. All contents are designed to be extended in your individual applications.
 
 ## Usage
 
@@ -1486,14 +1553,14 @@ Home Office Forms template partials is a collection of mustache partials commonl
 Template partials can be used by adding the route to the views directory to your express application views setting. You will need to be using the HTML view engine with Hogan and Mustache.
 
 ```js
-var app = require('express')();
+var app = require("express")();
 
-app.set('view engine', 'html');
-app.set('views', [
+app.set("view engine", "html");
+app.set("views", [
   // your application shared views
-  path.resolve(__dirname, './path/to/views'),
+  path.resolve(__dirname, "./path/to/views"),
   // the module exports paths to views and translations directories
-  require('hof').frontend.partials.views
+  require("hof").frontend.partials.views,
 ]);
 ```
 
@@ -1504,14 +1571,14 @@ The views are now available when calling `res.render('view-name')` from express.
 When used in a hof application in conjunction with [express-partial-templates](https://github.com/UKHomeOffice/express-partial-templates) the contents of the views directory are added to `res.locals.partials`. These are added right to left so conflicting views are resolved from the left-most directory.
 
 ```js
-var app = require('express')();
+var app = require("express")();
 
-app.set('view engine', 'html');
-app.set('views', [
-  path.resolve(__dirname, './path/to/views'),
-  require('hof').frontend.partials.views
+app.set("view engine", "html");
+app.set("views", [
+  path.resolve(__dirname, "./path/to/views"),
+  require("hof").frontend.partials.views,
 ]);
-app.use(require('express-partial-templates')(app));
+app.use(require("express-partial-templates")(app));
 
 app.use(function (req, res, next) {
   // res.locals.partials contains all views from the views dir in this repo
@@ -1527,8 +1594,8 @@ The provided translations are designed to be used in conjunction with a translat
 The exported `resources` method will return a compiled object containing the translations, which can be passed to an `i18n` instance as a pre-compiled resource.
 
 ```js
-const translate = require('i18n-future').middleware({
-  resources: require('hof').frontend.partials.resources()
+const translate = require("i18n-future").middleware({
+  resources: require("hof").frontend.partials.resources(),
 });
 app.use(translate);
 ```
@@ -1536,19 +1603,19 @@ app.use(translate);
 By default the namespace for this translation is `default`. A custom namespace can be specified by passing it as an argument to the `resources` function.
 
 ```js
-const translate = require('i18n-future').middleware({
-  resources: require('hof').frontend.partials.resources('hof-common'),
-  fallbackNamespace: 'hof-common'
+const translate = require("i18n-future").middleware({
+  resources: require("hof").frontend.partials.resources("hof-common"),
+  fallbackNamespace: "hof-common",
 });
 app.use(translate);
 ```
+
 ### Cookie Banner
 
 The cookie banner has a placeholder named serviceName that you can set within the locals of your hof application so that the appropriate value is displayed.
 
 Set `appName` if your hof settings being passed to hof to take advantage of this.
 
-
 # HOF FRONTEND THEME
 
 ## Usage
@@ -1600,11 +1667,13 @@ When used as part of an express app, a middleware is returned which will add a s
 It will also add the template as a mustache partial with a name of "govuk-template".
 
 ### To configure express middleware
+
 ```
 app.use(require('hof').frontend.govUKTemplate([options]);
 ```
 
 ### To use the mustache partial
+
 ```
 {{< govuk-template}}
     {{$pageTitle}}An example page{{/pageTitle}}
@@ -1618,11 +1687,12 @@ app.use(require('hof').frontend.govUKTemplate([options]);
 
 A number of options can be passed with the app into the setup method:
 
-* `path` - Sets the base path for the location of static assets - Default: `/govuk-assets`
+- `path` - Sets the base path for the location of static assets - Default: `/govuk-assets`
 
 Other options are passed onto the [serve-static](https://www.npmjs.com/package/serve-static) configuration, and more details can be found in [the serve-static documentation](https://www.npmjs.com/package/serve-static)
 
 # Nonce values
+
 Version 18.0.0 and above of HOF provides and requires a nonce value for all inline javascript, as unsafe-inline is disabled.
 Older versions (pre 18.0.0) will work with the hof-govuk-template templates as expected as the nonce value fields will only be added
 if a nonce value is provided by the version of HOF.
@@ -1636,16 +1706,25 @@ There is an example implementation in [demo application](https://github.com/UKHo
 There is a sandbox application for developers to test components directly in hof called [sandbox](/sandbox)
 
 # HOF FRONTEND TOOLKIT
+
 Set of common UI patterns/styles for HOF projects
 
 ## Images
+
 Copy `assets/images/hmpo` to your image directory. Images are loaded by using the `file-url` function provided by [GOV.UK frontend toolkit](https://github.com/alphagov/govuk_frontend_toolkit). The `file-url` function uses the `$path` variable which is set before the toolkit's modules are loaded.
 
 ## Vendor JavaScript
+
 Additional vendor JavaScript files are included. These are:
 
-* details.polyfill.js
-* indexof.polyfill.js
-* safari-cachebuster.js
+- details.polyfill.js
+- indexof.polyfill.js
+- safari-cachebuster.js
 
 Copy `assets/javascript/vendor` into your javascript directory (ie `hmpo/vendor`) and compile them with your JavaScript.
+
+## Journey Header Navigation.html page
+
+- Navigation.html contains a journeyHeaderURL, which is set in the controller. 
+- getJourneyHeaderURL within the controller translates an empty baseURL to '/'.
+- The above helps fix broken journey header URLs in the GRO and UKVIC services which both have a baseURL's set to '/'.