hof 19.13.6 → 19.13.9

package/.eslintignore

@@ -1 +1 @@
-example/public/*
+sandbox/public/*

package/README.md

@@ -1629,13 +1629,11 @@ if a nonce value is provided by the version of HOF.
 
 ## Example
 
-There is an example implmentation in '/example'. To run:
+There is an example implementation in [demo application](https://github.com/UKHomeOffice/home-office-forms-demo).
 
-```
-cd example
-npm install
-npm start
-```
+## Sandbox
+
+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

package/build/lib/spawn.js

@@ -4,7 +4,7 @@
 const cp = require('child_process');
 
 module.exports = (cmd, args) => new Promise((resolve, reject) => {
-  if (process.env.HOF_EXAMPLE_APP === 'true') {
+  if (process.env.HOF_SANDBOX === 'true') {
     cmd = cmd.replace('node_modules/hof', '..');
   }
 

package/build/tasks/watch/index.js

@@ -114,7 +114,7 @@ module.exports = config => {
         ignored.push(/(^|[\/\\])\../);
       }
 
-      if (process.env.HOF_EXAMPLE_APP === 'true') {
+      if (process.env.HOF_SANDBOX === 'true') {
         const rootDir = require('path').resolve(__dirname, '../../../');
         ignored.push(`${rootDir}/frontend/govuk-template/govuk_template.html`);
         watchLocation = [rootDir, '.'];

package/components/date/index.js

@@ -60,6 +60,35 @@ module.exports = (key, opts) => {
     dayOptional = true;
   }
 
+  // take the 3 date parts, padding or defaulting
+  // to '01' if applic, then create a date value in the
+  // format YYYY-MM-DD. Save to req.body for processing
+  const preProcess = (req, res, next) => {
+    const parts = getParts(req.body, fields, key);
+    if (_.some(parts, part => part !== '')) {
+      if (dayOptional && parts.day === '') {
+        parts.day = '01';
+      } else {
+        parts.day = pad(parts.day);
+      }
+      if (monthOptional && parts.month === '') {
+        parts.month = '01';
+      } else {
+        parts.month = pad(parts.month);
+      }
+      req.body[key] = `${parts.year}-${parts.month}-${parts.day}`;
+    }
+    next();
+  };
+
+  // defaultFormatters on the base controller replace '--' with '-' on the process step.
+  // This ensures having the correct number of hyphens,
+  //  so values do not jump from year to month when the page reloads.
+  const postProcess = (req, res, next) => {
+    req.form.values[key] = req.body[key];
+    next();
+  };
+
   // if date field is included in errorValues, extend
   // errorValues with the individual components
   const preGetErrors = (req, res, next) => {
@@ -125,35 +154,15 @@ module.exports = (key, opts) => {
     });
   };
 
-  // take the 3 date parts, padding or defaulting
-  // to '01' if applic, then create a date value in the
-  // format YYYY-MM-DD. Save to req.body for processing
-  const preProcess = (req, res, next) => {
-    const parts = getParts(req.body, fields, key);
-    if (_.some(parts, part => part !== '')) {
-      if (dayOptional && parts.day === '') {
-        parts.day = '01';
-      } else {
-        parts.day = pad(parts.day);
-      }
-      if (monthOptional && parts.month === '') {
-        parts.month = '01';
-      } else {
-        parts.month = pad(parts.month);
-      }
-      req.body[key] = `${parts.year}-${parts.month}-${parts.day}`;
-    }
-    next();
-  };
-
   // return config extended with hooks
   return Object.assign({}, options, {
     hooks: {
+      'pre-process': preProcess,
+      'post-process': postProcess,
       'pre-getErrors': preGetErrors,
       'post-getErrors': postGetErrors,
       'post-getValues': postGetValues,
-      'pre-render': preRender,
-      'pre-process': preProcess
+      'pre-render': preRender
     }
   });
 };

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

@@ -46,12 +46,12 @@
         {{#intro-cookie-table}}
           {{> partials-table}}
         {{/intro-cookie-table}}
-        <div class="js-enabled">
           <h2>{{session-cookies}}</h2>
           <p>{{session-cookies-content}}</p>
           {{#session-cookies-table}}
             {{> partials-session-cookies-table}}
           {{/session-cookies-table}}
+        <div class="js-enabled">
           <form>
             <div class="form-group">
               <fieldset>
@@ -77,14 +77,6 @@
             {{> partials-cookie-settings-button}}
           </form>
         </div>
-        <div class="js-disabled">
-          <h2>Cookie settings</h2>
-          <p>We use JavaScript to set most of our cookies. Unfortunately JavaScript is not running on your browser, so you cannot change your settings. You can try:</p>
-          <ul class="list-bullet">
-            <li>reloading the page</li>
-            <li>turning on JavaScript in your browser</li>
-          </ul>
-        </div>
       </div>
     {{/gaTagId}}
 

package/index.js

@@ -112,7 +112,7 @@ const getContentSecurityPolicy = (config, res) => {
  * @param options {object} Configuration options for the HOF application
  * @param options.behaviours {object | Array<object>} The HOF behaviour(s) to invoke for all sub-applications
  * @param options.translations {string} The translations path for the application
- * @param options.routes {Array<object>} The sub-applications for this app: for example; require('./apps/example-app')
+ * @param options.routes {Array<object>} The sub-applications for this app: for sandbox; require('./apps/sandbox')
  * @param options.views {Array<string>} The view template paths for the application
  * @param options.middleware {Array<function>} An array of Express middleware functions to use
  * @param options.theme {string} Optional HOF theme - defaults to govuk

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hof",
   "description": "A bootstrap for HOF projects",
-  "version": "19.13.6",
+  "version": "19.13.9",
   "license": "MIT",
   "main": "index.js",
   "author": "HomeOffice",
@@ -22,7 +22,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\" \"example/test/**/*.spec.js\"",
+    "unit": "LOG_LEVEL=error nyc _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",
@@ -30,7 +30,7 @@
     "test:cookie-banner": "jest test/frontend/jest",
     "test:acceptance": "TAGS=\"${TAGS:=@feature}\" yarn run test:cucumber",
     "test:acceptance_browser": "ACCEPTANCE_WITH_BROWSER=true TAGS=\"${TAGS:=@feature}\" yarn run test:cucumber",
-    "test:cucumber": "cucumber-js -f @cucumber/pretty-formatter \"example/test/_features/**/*.feature\" --require example/test/_features/test.setup.js --require \"example/test/_features/step_definitions/**/*.js\" --tags $TAGS",
+    "test:cucumber": "cucumber-js -f @cucumber/pretty-formatter \"sandbox/test/_features/**/*.feature\" --require sandbox/test/_features/test.setup.js --require \"sandbox/test/_features/step_definitions/**/*.js\" --tags $TAGS",
     "ci": "travis-conditions",
     "postversion": "git push && git push --tags"
   },

package/sandbox/README.md

@@ -0,0 +1,66 @@
+# HOF Sandbox App
+
+The Home Office Forms (HOF) Sandbox app is used by developers to test out different components in the framework. 
+
+#### How to run the app locally 
+
+Install [Homebrew](https://brew.sh/), if it is not installed 
+
+Once Homebrew is installed run 
+
+```bash
+brew install nvm
+```
+```bash
+source ~/.bash_profile
+```
+
+Install the correct version of node
+
+```bash
+nvm install 14.15.0
+```
+
+Set the node version
+
+```bash
+nvm use 14.15.0
+```
+
+Clone the service locally
+
+```bash
+git clone ... 
+```
+
+Install yarn 
+
+```bash
+npm i yarn -g 
+```
+
+Install the dependencies 
+
+```bash
+yarn
+```
+
+Move into the example folder 
+
+```bash
+cd example
+```
+
+Install any example app specific dependencies 
+
+```bash
+yarn
+```
+
+Run in development mode 
+
+```bash
+yarn start:dev
+```
+
+go to http://localhost:8080/

package/sandbox/apps/sandbox/behaviours/clear-session.js

@@ -0,0 +1,8 @@
+'use strict';
+
+module.exports = SuperClass => class extends SuperClass {
+  getValues(req, res, next) {
+    req.sessionModel.reset();
+    this.successHandler(req, res, next);
+  }
+};

package/sandbox/apps/sandbox/behaviours/country-select.js

@@ -0,0 +1,10 @@
+module.exports = superclass => class extends superclass {
+  configure(req, res, next) {
+    const homeOfficeCountries = [''].concat(require('homeoffice-countries').allCountries);
+    req.form.options.fields.countrySelect.options = homeOfficeCountries.map(country => {
+      const labelString = country !== '' ? country : 'Please select a country';
+      return { label: labelString, value: country };
+    });
+    next();
+  }
+};

package/sandbox/apps/sandbox/behaviours/international-number.js

@@ -0,0 +1,22 @@
+'use strict';
+
+const validators = require('../../../../controller').validators;
+
+module.exports = SuperClass => class extends SuperClass {
+  validateField(key, req) {
+    const code = req.sessionModel.get('countryCode');
+    const number = req.form.values['int-phone-number'];
+
+    const isValid = validators.internationalPhoneNumber(number, code);
+
+    if (!isValid) {
+      return new this.ValidationError('int-phone-number', {
+        key: 'int-phone-number',
+        type: 'internationalPhoneNumber',
+        redirect: undefined
+      });
+    }
+
+    return super.validateField(key, req);
+  }
+};

package/sandbox/apps/sandbox/fields.js

@@ -0,0 +1,106 @@
+/* eslint-disable */
+'use strict';
+
+const dateComponent = require('../../../').components.date;
+const staticAppealStages = require('./lib/staticAppealStages');
+
+module.exports = {
+  'landing-page-radio': {
+    mixin: 'radio-group',
+    validate: ['required'],
+    legend: {
+      className: 'visuallyhidden'
+    },
+    options: ['basic-form', 'complex-form', 'build-your-own-form']
+  },
+  name: {
+    validate: ['required', 'notUrl', { type: 'maxlength', arguments: 200 }],
+  },
+  dateOfBirth: dateComponent('dateOfBirth', {
+    validate: ['required', 'before', { type: 'after', arguments: ['1900'] }]
+  }),
+  building: {
+    validate: ['required', 'notUrl', { type: 'maxlength', arguments: 100 }]
+  },
+  street: {
+    validate: ['notUrl', { type: 'maxlength', arguments: 50 }],
+    labelClassName: 'visuallyhidden'
+  },
+  townOrCity: {
+    validate: ['required', 'notUrl',
+      { type: 'regex', arguments: /^([^0-9]*)$/ },
+      { type: 'maxlength', arguments: 100 }
+    ]
+  },
+  postcode: {
+    validate: ['required', 'postcode'],
+    formatter: ['removespaces', 'uppercase']
+  },
+  incomeTypes: {
+    mixin: 'checkbox-group',
+    labelClassName: 'visuallyhidden',
+    validate: ['required'],
+    options: [
+      'salary',
+      'universal_credit',
+      'child_benefit',
+      'housing_benefit',
+      'other'
+    ]
+  },
+  countryOfHearing: {
+    mixin: 'radio-group',
+    validate: ['required'],
+    legend: {
+      className: 'visuallyhidden'
+    },
+    options: [
+      'englandAndWales',
+      'scotland',
+      'northernIreland'
+    ]
+  },
+  email: {
+    validate: ['required', 'email']
+  },
+  phone: {
+    validate: ['required', 'internationalPhoneNumber']
+  },
+  'int-phone-number': {
+    validate: ['required'],
+    labelClassName: 'visuallyhidden'
+  },
+  countrySelect: {
+    mixin: 'select',
+    className: ['typeahead'],
+    options:[''].concat(require('homeoffice-countries').allCountries),
+    legend: {
+      className: 'visuallyhidden'
+    },
+    validate: ['required']
+  },
+  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'],
+    // attributes here are passed to the field element
+    validate: ['required', { type: 'maxlength', arguments: 5000 }],
+    attributes: [{
+      attribute: 'rows',
+      value: 8
+    }]
+  },
+  appealStages: {
+    mixin: 'select',
+    labelClassName: 'visuallyhidden',
+    validate: ['required'],
+    options: [{
+      value: '',
+      label: 'fields.appealStages.options.null'
+    }].concat(staticAppealStages.getstaticAppealStages())
+  }
+}

package/sandbox/apps/sandbox/index.js

@@ -0,0 +1,91 @@
+/* eslint-disable */
+'use strict';
+
+const CountrySelect = require('./behaviours/country-select')
+const SummaryPageBehaviour = require('../../../').components.summary;
+const InternationalPhoneNumber = require('./behaviours/international-number');
+
+module.exports = {
+  name: 'sandbox',
+  steps: {
+    '/landing-page': {
+      fields: [
+        'landing-page-radio'
+      ],
+      next: '/name',
+      forks: [{
+        target: '/build-your-own-form',
+        condition: {
+          field: 'landing-page-radio',
+          value: 'build-your-own-form'
+        }
+      }],
+    },
+    '/build-your-own-form': {
+      template: 'form-guidance-link'
+    },
+    '/name': {
+      fields: ['name'],
+      next: '/dob'
+    },
+    '/dob': {
+      fields: ['dateOfBirth'],
+      next: '/address'
+    },
+    '/address': {
+      fields: ['building', 'street', 'townOrCity', 'postcode'],
+      next: '/checkboxes'
+    },
+    '/checkboxes': {
+      fields: ['incomeTypes'],
+      next: '/radio'
+    },
+    '/radio':{
+      fields: ['countryOfHearing'],
+      forks: [{
+        target: '/country-select',
+        condition: {
+          field: 'landing-page-radio',
+          value: 'complex-form'
+        }
+      }],
+      next: '/email'
+    },
+    '/email': {
+      fields: ['email'],
+      next: '/phone-number'
+    },
+    '/phone-number': {
+      fields: ['phone'],
+      next: '/confirm'
+    },
+    '/country-select': {
+      behaviours: CountrySelect,
+      fields: ['countrySelect'],
+      next: '/text-input-area'
+    },
+    '/text-input-area': {
+      fields: ['complaintDetails'],
+      next: '/select'
+    },
+    '/select':{ 
+      fields: ['appealStages'], 
+      next: '/confirm'
+    },
+    '/confirm': {
+      behaviours: [SummaryPageBehaviour, 'complete'],
+      sections: require('./sections/summary-data-sections'),
+      next: '/confirmation'
+    },
+    '/confirmation': {
+      backLink: false
+    },
+    '/international-phone-number': {
+      behaviours: InternationalPhoneNumber,
+      fields: [
+        'int-phone-number'
+      ],
+      next: '/confirm'
+    },
+  }
+};

package/sandbox/apps/sandbox/lib/staticAppealStages.js

@@ -0,0 +1,189 @@
+/* eslint max-len: 0 */
+
+'use strict';
+
+module.exports = {
+  getstaticAppealStages: function () {
+    return [
+      { value: 'FT_IC',
+        label: '01. First Tier IAC Appeal - In Country Appeals',
+        timeLimit: {value: 14, type: 'calendar days'},
+        startDateLabel: 'Date refusal letter sent by HO',
+        rules: 'The Tribunal Procedure (First-tier tribunal) (Immigration and Asylum Chamber) Rules 2014',
+        ruleNumber: '19(2)',
+        adminAllowance: {value: 1, type: 'working day'},
+        country: 'All',
+        trigger: 'Refusal Notice',
+        sortCode: 10
+      },
+
+      { value: 'FT_OOC_1',
+        label: '02. First Tier IAC Appeal - Out of Country Appeals where the appellant must leave the UK before appealing',
+        timeLimit: {value: 28, type: 'calendar days'},
+        startDateLabel: 'Appellant\'s date of departure',
+        rules: 'The Tribunal Procedure (First-tier tribunal) (Immigration and Asylum Chamber) Rules 2014',
+        ruleNumber: '19(3)(a)',
+        adminAllowance: {value: 0, type: 'working days'},
+        country: 'All',
+        trigger: 'Refusal Notice',
+        sortCode: 20
+      },
+
+      { value: 'FT_OOC_2',
+        label: '03. First Tier IAC Appeal - Other out of Country Appeals (e.g Voluntary Departure)',
+        timeLimit: {value: 28, type: 'calendar days'},
+        startDateLabel: 'Date of receipt of the refusal letter',
+        rules: 'The Tribunal Procedure (First-tier tribunal) (Immigration and Asylum Chamber) Rules 2014',
+        ruleNumber: '19(3)(b)',
+        adminAllowance: {value: 1, type: 'working days'},
+        country: 'All',
+        trigger: 'Refusal Notice',
+        sortCode: 30
+      },
+
+      { value: 'FT_IC_FAST',
+        label: '04. First Tier IAC Appeal - In Country Detained Fast Track',
+        timeLimit: {value: 2, type: 'working days'},
+        startDateLabel: 'Date when appellant was provided notice of decision',
+        rules: 'The Tribunal Procedure (First-tier tribunal) (Immigration and Asylum Chamber) Rules 2014 Schedule The Fast Track Rules',
+        ruleNumber: '5(1)',
+        adminAllowance: {value: 1, type: 'working day'},
+        country: 'All',
+        trigger: 'Refusal Notice',
+        sortCode: 40
+      },
+
+      { value: 'FT_UT_IC',
+        label: '05. First Tier IAC PTA to the UT - In Country',
+        timeLimit: {value: 14, type: 'calendar days'},
+        startDateLabel: 'Date written reasons for the decision sent',
+        rules: 'The Tribunal Procedure (First-tier tribunal) (Immigration and Asylum Chamber) Rules 2014',
+        ruleNumber: '33(2)',
+        adminAllowance: {value: 1, type: 'working day'},
+        country: 'All',
+        trigger: 'IA60 first tier dismissed',
+        sortCode: 50
+      },
+
+      { value: 'FT_UT_OOC',
+        label: '06. First Tier IAC PTA to the UT - Out of Country',
+        timeLimit: {value: 28, type: 'calendar days'},
+        startDateLabel: 'Date written reasons for the decision sent',
+        rules: 'The Tribunal Procedure (First-tier tribunal) (Immigration and Asylum Chamber) Rules 2014',
+        ruleNumber: '33(3)',
+        adminAllowance: {value: 1, type: 'working day'},
+        country: 'All',
+        trigger: 'IA60 first tier dismissed',
+        sortCode: 60
+      },
+
+      { value: 'FT_UT_FAST',
+        label: '07. First Tier IAC PTA to the UT - Detained Fast Track',
+        timeLimit: {value: 3, type: 'working days'},
+        startDateLabel: 'Date when appellant was provided notice of decision',
+        rules: 'The Tribunal Procedure (First-tier tribunal) (Immigration and Asylum Chamber) Rules 2014 Schedule The Fast Track Rules',
+        ruleNumber: '11',
+        adminAllowance: {value: 1, type: 'working day'},
+        country: 'All',
+        trigger: 'IA60 first tier dismissed',
+        sortCode: 70
+      },
+
+      { value: 'UT_IC',
+        label: '08. Upper Tribunal IAC PTA - In Country',
+        timeLimit: {value: 14, type: 'calendar days'},
+        startDateLabel: 'Date when the FtT refused FTPA',
+        rules: 'The Tribunal Procedure (Upper Tribunal) Rules 2008',
+        ruleNumber: '21(3)(a)(aa)(i)',
+        adminAllowance: {value: 1, type: 'working day'},
+        country: 'All',
+        trigger: 'IA67 first tier permission to appeal refused',
+        sortCode: 80
+      },
+
+      { value: 'UT_OOC',
+        label: '09. Upper Tribunal IAC PTA - Out of Country',
+        timeLimit: {value: 1, type: 'calendar month'},
+        startDateLabel: 'Date when the FtT refused FTPA',
+        rules: 'The Tribunal Procedure (Upper Tribunal) Rules 2008',
+        ruleNumber: '21(3)(b)',
+        adminAllowance: {value: 1, type: 'working day'},
+        country: 'All',
+        trigger: 'IA67 first tier permission to appeal refused',
+        sortCode: 90
+      },
+
+      { value: 'UT_IAC_JR',
+        label: '10. Upper Tribunal IAC - Judicial Review',
+        timeLimit: {value: 3, type: 'calendar months'},
+        startDateLabel: 'Date of decision of the First Tier Tribunal or Home Office',
+        rules: 'The Tribunal Procedure (Upper Tribunal) Rules 2008',
+        ruleNumber: '28(2)',
+        adminAllowance: {value: 0, type: 'working days'},
+        country: 'All',
+        trigger: 'n/a',
+        sortCode: 100
+      },
+
+      { value: 'UT_IAC_IC',
+        label: '11. Upper Tribunal IAC - In Country PTA to review UT determination',
+        timeLimit: {value: 12, type: 'calendar days'},
+        startDateLabel: 'Date when appellant was sent notice of decision',
+        rules: 'The Tribunal Procedure (Upper Tribunal) Rules 2008',
+        ruleNumber: '44(3B)(a)(i)',
+        adminAllowance: {value: 1, type: 'working day'},
+        country: 'All',
+        trigger: 'IA150 - Upper Tier determination (dismissed)',
+        sortCode: 110
+      },
+
+      { value: 'UT_IAC_OOC',
+        label: '12. Upper Tribunal IAC - Out of Country PTA to review UT determination',
+        timeLimit: {value: 38, type: 'calendar days'},
+        startDateLabel: 'Date when appellant was sent notice of decision',
+        rules: 'The Tribunal Procedure (Upper Tribunal) Rules 2008',
+        ruleNumber: '44(3B)(b)',
+        adminAllowance: {value: 1, type: 'working day'},
+        country: 'All',
+        trigger: 'IA150 - Upper Tier determination (dismissed)',
+        sortCode: 120
+      },
+
+      { value: 'COA_IAC',
+        label: '13. Court of Appeal via IAC',
+        timeLimit: {value: 28 + 2, type: 'calendar days'},
+        startDateLabel: 'Date when appellant was sent notice of decision',
+        rules: 'Civil Procedure Rules',
+        ruleNumber: '52.4',
+        adminAllowance: {value: 1, type: 'working days'},
+        country: ['England & Wales'],
+        trigger: 'IA157 PTA to the CoA refused',
+        sortCode: 130
+      },
+
+      { value: 'COS_IAC',
+        label: '14. Court of Sessions via IAC',
+        timeLimit: {value: 42 + 1, type: 'calendar days'},
+        startDateLabel: 'Date when appellant was sent notice of decision',
+        rules: 'Civil Procedure Rules',
+        ruleNumber: 'Rule 41.20',
+        adminAllowance: {value: 1, type: 'working days'},
+        country: ['Scotland', 'Northern Ireland'],
+        trigger: 'IA157 PTA to the CoA refused',
+        sortCode: 140
+      },
+
+      { value: 'COA_DIRECT',
+        label: '15. Court of Appeal Direct',
+        timeLimit: {value: 7 + 2, type: 'calendar days'},
+        startDateLabel: 'Date when appellant was sent notice of decision',
+        rules: 'Civil Procedure Rules',
+        ruleNumber: '52.3',
+        adminAllowance: {value: 1, type: 'working days'},
+        country: 'All',
+        trigger: 'IA157 PTA to the CoA refused',
+        sortCode: 150
+      }
+    ];
+  }
+};

package/sandbox/apps/sandbox/sections/summary-data-sections.js

@@ -0,0 +1,40 @@
+const moment = require('moment');
+const PRETTY_DATE_FORMAT = 'Do MMMM YYYY';
+const APPEAL_STAGES = require('../lib/staticAppealStages').getstaticAppealStages();
+const _ = require('lodash');
+
+module.exports = {
+  applicantsDetails: [
+    'name',
+    {
+      field: 'dateOfBirth',
+      parse: d => d && moment(d).format(PRETTY_DATE_FORMAT)
+    }
+  ],
+  address: [
+    'building',
+    'street',
+    'townOrCity',
+    'postcode'
+  ],
+  income: [
+    'incomeTypes'
+  ],
+  appealDetails: [
+    'countryOfHearing',
+    {
+      field: 'appealStages',
+      parse: v => _.get(_.find(APPEAL_STAGES, stage => stage.value === v), 'label', '')
+    }
+  ],
+  contactDetails: [
+    'email',
+    'phone'
+  ],
+  countrySelect: [
+    'countrySelect'
+  ],
+  complaintDetails: [
+    'complaintDetails'
+  ]
+};

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

@@ -0,0 +1,94 @@
+{
+  "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": "Full name"
+  },
+  "dateOfBirth": {
+    "legend": "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"
+  },
+  "countrySelect": {
+    "label": "Select a country",
+    "hint": "Start to type the country name and options will appear"
+  },
+  "appealStages": {
+    "label": "Appeal stage",
+    "options": {
+      "null": "Select..."
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+{
+  "header": "HOF Bootstrap Sandbox Form"
+}

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

@@ -0,0 +1,75 @@
+{
+  "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"
+  },
+  "name": {
+    "header": "What is your full name?"
+  },
+  "dob": {
+    "header": "What is your date of birth?"
+  },
+  "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?"
+  },
+  "country-select": {
+    "header": "What country is your address located?"
+  },
+  "email": {
+    "header": "Enter your email address"
+  },
+  "phone-number": {
+    "header": "Enter your phone number"
+  },
+  "text-input-area": {
+    "header": "What are the details of your complaint?",
+    "intro": "Briefly summarise your complaint. Include anything that can help our investigation."
+  },
+  "select":{
+    "header": "What is the appeal stage?",
+    "intro": "Choose an appeal stage from the drop down menu"
+  },
+  "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."
+  }
+}

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

@@ -0,0 +1,50 @@
+{
+  "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 5000 character limit"
+  },
+  "appealStages": {
+    "required": "Select an appeal stage from the list"
+  }
+}

package/sandbox/apps/sandbox/views/confirmation.html

@@ -0,0 +1,15 @@
+<title>{{#t}}pages.confirmation.title{{/t}} – GOV.UK</title>
+
+{{<partials-page}}
+  {{$page-content}}
+    <div class="alert-complete" role="alert">
+      <span class="icon icon-complete" role="presentation"></span>
+      <div class="alert-message">
+        <h1>{{#t}}pages.confirmation.alert{{/t}}</h1>
+      </div>
+    </div>
+    <h2>{{#t}}pages.confirmation.subheader{{/t}}</h2>
+    <p>{{#t}}pages.confirmation.content{{/t}}</p>
+    <a href="/landing-page" class="button" role="button">{{#t}}buttons.start-again{{/t}}</a>
+  {{/page-content}}
+{{/partials-page}}

package/sandbox/apps/sandbox/views/form-guidance-link.html

@@ -0,0 +1,8 @@
+<title>{{#t}}pages.build-your-own-form.title{{/t}} – GOV.UK</title>
+
+{{<partials-page}}
+  {{$page-content}}
+  <h2>{{#t}}pages.build-your-own-form.subheader{{/t}}</h2>
+  <a href="https://ukhomeofficeforms.github.io/hof-guide/documentation/#building-your-first-hof-form">Link to HOF form guidance</a>
+  {{/page-content}}
+{{/partials-page}}

package/sandbox/assets/js/index.js

@@ -0,0 +1,70 @@
+/* eslint-disable */
+'use strict'
+
+require('../../../frontend/themes/gov-uk/client-js');
+
+var $ = require('jquery');
+var typeahead = require('typeahead-aria');
+var Bloodhound = require('typeahead-aria').Bloodhound;
+
+typeahead.loadjQueryPlugin();
+
+$('.typeahead').each(function applyTypeahead() {
+  var $el = $(this);
+  var $parent = $el.parent();
+  var attributes = $el.prop('attributes');
+  var $input = $('<input/>');
+  var selectedValue = $el.val();
+  var typeaheadList = $el.find('option').map(function mapOptions() {
+    if (this.value === '') {
+      return undefined;
+    }
+    return this.value;
+  }).get();
+
+  // remove the selectbox
+  $el.remove();
+
+  $.each(attributes, function applyAttributes() {
+    $input.attr(this.name, this.value);
+  });
+
+  $input.removeClass('js-hidden');
+  $input.addClass('form-control');
+  $input.val(selectedValue);
+
+  $parent.append($input);
+
+  $input.typeahead({
+    hint: false
+  }, {
+    source: new Bloodhound({
+      datumTokenizer: Bloodhound.tokenizers.whitespace,
+      queryTokenizer: Bloodhound.tokenizers.whitespace,
+      local: typeaheadList,
+      sorter: function sorter(a, b) {
+        var input = $input.val();
+        var startsWithInput = function startsWithInput(x) {
+          return x.toLowerCase().substr(0, input.length) === input.toLowerCase() ? -1 : 1;
+        };
+
+        var compareAlpha = function compareAlpha(x, y) {
+          var less = x < y ? -1 : 1;
+          return x === y ? 0 : less;
+        };
+
+        var compareStartsWithInput = function compareStartsWithInput(x, y) {
+          var startsWithFirst = startsWithInput(x);
+          var startsWithSecond = startsWithInput(y);
+
+          return startsWithFirst === startsWithSecond ? 0 : startsWithFirst;
+        };
+
+        var first = compareStartsWithInput(a, b);
+
+        return first === 0 ? compareAlpha(a, b) : first;
+      }
+    }),
+    limit: 100
+  });
+});

package/sandbox/assets/scss/app.scss

@@ -0,0 +1,27 @@
+
+@import "../../../frontend/themes/gov-uk/styles/govuk";
+
+//autocomplete styling
+.tt-menu {
+    background-color: #fff;
+    border: 1px solid #ccc;
+    width: 65%;
+  }
+  
+  .tt-suggestion {
+    padding: 0.5em;
+  
+    &:hover,
+    &.tt-cursor {
+      color: #fff;
+      background-color: #0097cf;
+    }
+  
+    &:hover {
+      cursor: pointer;
+    }
+  }
+  
+  .twitter-typeahead {
+    width: 100%;
+  }

package/sandbox/codecept.conf.js

@@ -0,0 +1,15 @@
+'use strict';
+
+const path = require('path');
+
+const pagesPath = page => path.resolve(__dirname,
+  `./apps/sandbox/acceptance/pages/${page}`);
+
+module.exports = {
+  name: 'sandbox',
+  include: {
+    firstPage: pagesPath('first-step.js'),
+    secondPage: pagesPath('second-step.js'),
+    thirdPage: pagesPath('third-step.js')
+  }
+};

package/sandbox/config.js

@@ -0,0 +1,17 @@
+'use strict';
+
+/* eslint no-process-env: 0 */
+module.exports = {
+  email: {
+    caseworker: process.env.CASEWORKER_EMAIL || '',
+    from: process.env.FROM_ADDRESS || '',
+    replyTo: process.env.REPLY_TO || '',
+    accessKeyId: process.env.AWS_USER || '',
+    secretAccessKey: process.env.AWS_PASSWORD || '',
+    transportType: 'ses',
+    region: process.env.EMAIL_REGION || ''
+  },
+  hosts: {
+    acceptanceTests: process.env.ACCEPTANCE_HOST_NAME || `http://localhost:${process.env.PORT || 8080}`
+  }
+};

package/sandbox/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "hof-bootstrap-example-app",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "engines": {
+    "node": ">=10.22.1"
+  },
+  "scripts": {
+    "start": "node server.js",
+    "start:dev": "HOF_SANDBOX=true ../bin/hof-build watch",
+    "build": "HOF_SANDBOX=true ../bin/hof-build",
+    "postinstall": "yarn run build"
+  },
+  "author": "",
+  "dependencies": {
+    "jquery": "^3.6.0",
+    "typeahead-aria": "^1.0.4"
+  },
+  "devDependencies": {}
+}

package/sandbox/server.js

@@ -0,0 +1,12 @@
+/* eslint-disable */
+'use strict';
+
+const bootstrap = require('../');
+
+bootstrap({
+  translations: './apps/sandbox/translations',
+  routes: [
+    require('./apps/sandbox')
+  ],
+  getAccessibility: true
+});

package/sandbox/yarn.lock

@@ -0,0 +1,15 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+jquery@>=1.11, jquery@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.0.tgz#c72a09f15c1bdce142f49dbf1170bdf8adac2470"
+  integrity sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==
+
+typeahead-aria@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/typeahead-aria/-/typeahead-aria-1.0.4.tgz#d2829cc01c0226a367627f3098a468c4e0343f00"
+  integrity sha1-0oKcwBwCJqNnYn8wmKRoxOA0PwA=
+  dependencies:
+    jquery ">=1.11"