@defra/forms-engine-plugin 0.1.3 → 0.1.5

package/.server/server/plugins/engine/components/UkAddressField.js

@@ -49,6 +49,18 @@ export class UkAddressField extends FormComponent {
         required: isRequired,
         optionalText: !isRequired && (hideOptional || !hideTitle)
       }
+    }, {
+      type: ComponentType.TextField,
+      name: `${name}__county`,
+      title: 'County',
+      schema: {
+        max: 100
+      },
+      options: {
+        autocomplete: 'county',
+        required: false,
+        optionalText: !isRequired && (hideOptional || !hideTitle)
+      }
     }, {
       type: ComponentType.TextField,
       name: `${name}__postcode`,

package/.server/server/plugins/engine/components/UkAddressField.js.map

@@ -1 +1 @@
-{"version":3,"file":"UkAddressField.js","names":["ComponentType","ComponentCollection","FormComponent","isFormState","TextField","UkAddressField","constructor","def","props","name","options","isRequired","required","hideOptional","optionalText","hideTitle","collection","type","title","schema","max","autocomplete","classes","regex","parent","formSchema","stateSchema","getFormValueFromState","state","value","isState","undefined","getDisplayStringFromState","getContextValueFromState","join","Object","values","filter","Boolean","getViewModel","payload","errors","viewModel","components","fieldset","hint","label","legend","text","id","attributes","isUkAddress","isText","addressLine1","town","postcode"],"sources":["../../../../../src/server/plugins/engine/components/UkAddressField.ts"],"sourcesContent":["import { ComponentType, type UkAddressFieldComponent } from '@defra/forms-model'\nimport { type ObjectSchema } from 'joi'\n\nimport { ComponentCollection } from '~/src/server/plugins/engine/components/ComponentCollection.js'\nimport {\n  FormComponent,\n  isFormState\n} from '~/src/server/plugins/engine/components/FormComponent.js'\nimport { TextField } from '~/src/server/plugins/engine/components/TextField.js'\nimport { type QuestionPageController } from '~/src/server/plugins/engine/pageControllers/QuestionPageController.js'\nimport {\n  type FormPayload,\n  type FormState,\n  type FormStateValue,\n  type FormSubmissionError,\n  type FormSubmissionState\n} from '~/src/server/plugins/engine/types.js'\n\nexport class UkAddressField extends FormComponent {\n  declare options: UkAddressFieldComponent['options']\n  declare formSchema: ObjectSchema<FormPayload>\n  declare stateSchema: ObjectSchema<FormState>\n  declare collection: ComponentCollection\n\n  constructor(\n    def: UkAddressFieldComponent,\n    props: ConstructorParameters<typeof FormComponent>[1]\n  ) {\n    super(def, props)\n\n    const { name, options } = def\n\n    const isRequired = options.required !== false\n    const hideOptional = !!options.optionalText\n    const hideTitle = !!options.hideTitle\n\n    this.collection = new ComponentCollection(\n      [\n        {\n          type: ComponentType.TextField,\n          name: `${name}__addressLine1`,\n          title: 'Address line 1',\n          schema: { max: 100 },\n          options: {\n            autocomplete: 'address-line1',\n            required: isRequired,\n            optionalText: !isRequired && (hideOptional || !hideTitle)\n          }\n        },\n        {\n          type: ComponentType.TextField,\n          name: `${name}__addressLine2`,\n          title: 'Address line 2',\n          schema: { max: 100 },\n          options: {\n            autocomplete: 'address-line2',\n            required: false,\n            optionalText: !isRequired && (hideOptional || !hideTitle)\n          }\n        },\n        {\n          type: ComponentType.TextField,\n          name: `${name}__town`,\n          title: 'Town or city',\n          schema: { max: 100 },\n          options: {\n            autocomplete: 'address-level2',\n            classes: 'govuk-!-width-two-thirds',\n            required: isRequired,\n            optionalText: !isRequired && (hideOptional || !hideTitle)\n          }\n        },\n        {\n          type: ComponentType.TextField,\n          name: `${name}__postcode`,\n          title: 'Postcode',\n          schema: {\n            regex: '^[a-zA-Z]{1,2}\\\\d[a-zA-Z\\\\d]?\\\\s?\\\\d[a-zA-Z]{2}$'\n          },\n          options: {\n            autocomplete: 'postal-code',\n            classes: 'govuk-input--width-10',\n            required: isRequired,\n            optionalText: !isRequired && (hideOptional || !hideTitle)\n          }\n        }\n      ],\n      { ...props, parent: this }\n    )\n\n    this.options = options\n    this.formSchema = this.collection.formSchema\n    this.stateSchema = this.collection.stateSchema\n  }\n\n  getFormValueFromState(state: FormSubmissionState) {\n    const value = super.getFormValueFromState(state)\n    return this.isState(value) ? value : undefined\n  }\n\n  getDisplayStringFromState(state: FormSubmissionState) {\n    return this.getContextValueFromState(state)?.join(', ') ?? ''\n  }\n\n  getContextValueFromState(state: FormSubmissionState) {\n    const value = this.getFormValueFromState(state)\n\n    if (!value) {\n      return null\n    }\n\n    return Object.values(value).filter(Boolean)\n  }\n\n  getViewModel(payload: FormPayload, errors?: FormSubmissionError[]) {\n    const { collection, name, options } = this\n\n    const viewModel = super.getViewModel(payload, errors)\n    let { components, fieldset, hint, label } = viewModel\n\n    fieldset ??= {\n      legend: {\n        text: label.text,\n\n        /**\n         * For screen readers, only hide legend visually. This can be overridden\n         * by single component {@link QuestionPageController | `showTitle` handling}\n         */\n        classes: options.hideTitle\n          ? 'govuk-visually-hidden'\n          : 'govuk-fieldset__legend--m'\n      }\n    }\n\n    if (hint) {\n      hint.id ??= `${name}-hint`\n      fieldset.attributes ??= {\n        'aria-describedby': hint.id\n      }\n    }\n\n    components = collection.getViewModel(payload, errors)\n\n    return {\n      ...viewModel,\n      fieldset,\n      components\n    }\n  }\n\n  isState(value?: FormStateValue | FormState): value is UkAddressState {\n    return UkAddressField.isUkAddress(value)\n  }\n\n  static isUkAddress(\n    value?: FormStateValue | FormState\n  ): value is UkAddressState {\n    return (\n      isFormState(value) &&\n      TextField.isText(value.addressLine1) &&\n      TextField.isText(value.town) &&\n      TextField.isText(value.postcode)\n    )\n  }\n}\n\nexport interface UkAddressState extends Record<string, string> {\n  addressLine1: string\n  addressLine2: string\n  town: string\n  postcode: string\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"UkAddressField.js","names":["ComponentType","ComponentCollection","FormComponent","isFormState","TextField","UkAddressField","constructor","def","props","name","options","isRequired","required","hideOptional","optionalText","hideTitle","collection","type","title","schema","max","autocomplete","classes","regex","parent","formSchema","stateSchema","getFormValueFromState","state","value","isState","undefined","getDisplayStringFromState","getContextValueFromState","join","Object","values","filter","Boolean","getViewModel","payload","errors","viewModel","components","fieldset","hint","label","legend","text","id","attributes","isUkAddress","isText","addressLine1","town","postcode"],"sources":["../../../../../src/server/plugins/engine/components/UkAddressField.ts"],"sourcesContent":["import { ComponentType, type UkAddressFieldComponent } from '@defra/forms-model'\nimport { type ObjectSchema } from 'joi'\n\nimport { ComponentCollection } from '~/src/server/plugins/engine/components/ComponentCollection.js'\nimport {\n  FormComponent,\n  isFormState\n} from '~/src/server/plugins/engine/components/FormComponent.js'\nimport { TextField } from '~/src/server/plugins/engine/components/TextField.js'\nimport { type QuestionPageController } from '~/src/server/plugins/engine/pageControllers/QuestionPageController.js'\nimport {\n  type FormPayload,\n  type FormState,\n  type FormStateValue,\n  type FormSubmissionError,\n  type FormSubmissionState\n} from '~/src/server/plugins/engine/types.js'\n\nexport class UkAddressField extends FormComponent {\n  declare options: UkAddressFieldComponent['options']\n  declare formSchema: ObjectSchema<FormPayload>\n  declare stateSchema: ObjectSchema<FormState>\n  declare collection: ComponentCollection\n\n  constructor(\n    def: UkAddressFieldComponent,\n    props: ConstructorParameters<typeof FormComponent>[1]\n  ) {\n    super(def, props)\n\n    const { name, options } = def\n\n    const isRequired = options.required !== false\n    const hideOptional = !!options.optionalText\n    const hideTitle = !!options.hideTitle\n\n    this.collection = new ComponentCollection(\n      [\n        {\n          type: ComponentType.TextField,\n          name: `${name}__addressLine1`,\n          title: 'Address line 1',\n          schema: { max: 100 },\n          options: {\n            autocomplete: 'address-line1',\n            required: isRequired,\n            optionalText: !isRequired && (hideOptional || !hideTitle)\n          }\n        },\n        {\n          type: ComponentType.TextField,\n          name: `${name}__addressLine2`,\n          title: 'Address line 2',\n          schema: { max: 100 },\n          options: {\n            autocomplete: 'address-line2',\n            required: false,\n            optionalText: !isRequired && (hideOptional || !hideTitle)\n          }\n        },\n        {\n          type: ComponentType.TextField,\n          name: `${name}__town`,\n          title: 'Town or city',\n          schema: { max: 100 },\n          options: {\n            autocomplete: 'address-level2',\n            classes: 'govuk-!-width-two-thirds',\n            required: isRequired,\n            optionalText: !isRequired && (hideOptional || !hideTitle)\n          }\n        },\n        {\n          type: ComponentType.TextField,\n          name: `${name}__county`,\n          title: 'County',\n          schema: { max: 100 },\n          options: {\n            autocomplete: 'county',\n            required: false,\n            optionalText: !isRequired && (hideOptional || !hideTitle)\n          }\n        },\n        {\n          type: ComponentType.TextField,\n          name: `${name}__postcode`,\n          title: 'Postcode',\n          schema: {\n            regex: '^[a-zA-Z]{1,2}\\\\d[a-zA-Z\\\\d]?\\\\s?\\\\d[a-zA-Z]{2}$'\n          },\n          options: {\n            autocomplete: 'postal-code',\n            classes: 'govuk-input--width-10',\n            required: isRequired,\n            optionalText: !isRequired && (hideOptional || !hideTitle)\n          }\n        }\n      ],\n      { ...props, parent: this }\n    )\n\n    this.options = options\n    this.formSchema = this.collection.formSchema\n    this.stateSchema = this.collection.stateSchema\n  }\n\n  getFormValueFromState(state: FormSubmissionState) {\n    const value = super.getFormValueFromState(state)\n    return this.isState(value) ? value : undefined\n  }\n\n  getDisplayStringFromState(state: FormSubmissionState) {\n    return this.getContextValueFromState(state)?.join(', ') ?? ''\n  }\n\n  getContextValueFromState(state: FormSubmissionState) {\n    const value = this.getFormValueFromState(state)\n\n    if (!value) {\n      return null\n    }\n\n    return Object.values(value).filter(Boolean)\n  }\n\n  getViewModel(payload: FormPayload, errors?: FormSubmissionError[]) {\n    const { collection, name, options } = this\n\n    const viewModel = super.getViewModel(payload, errors)\n    let { components, fieldset, hint, label } = viewModel\n\n    fieldset ??= {\n      legend: {\n        text: label.text,\n\n        /**\n         * For screen readers, only hide legend visually. This can be overridden\n         * by single component {@link QuestionPageController | `showTitle` handling}\n         */\n        classes: options.hideTitle\n          ? 'govuk-visually-hidden'\n          : 'govuk-fieldset__legend--m'\n      }\n    }\n\n    if (hint) {\n      hint.id ??= `${name}-hint`\n      fieldset.attributes ??= {\n        'aria-describedby': hint.id\n      }\n    }\n\n    components = collection.getViewModel(payload, errors)\n\n    return {\n      ...viewModel,\n      fieldset,\n      components\n    }\n  }\n\n  isState(value?: FormStateValue | FormState): value is UkAddressState {\n    return UkAddressField.isUkAddress(value)\n  }\n\n  static isUkAddress(\n    value?: FormStateValue | FormState\n  ): value is UkAddressState {\n    return (\n      isFormState(value) &&\n      TextField.isText(value.addressLine1) &&\n      TextField.isText(value.town) &&\n      TextField.isText(value.postcode)\n    )\n  }\n}\n\nexport interface UkAddressState extends Record<string, string> {\n  addressLine1: string\n  addressLine2: string\n  town: string\n  county: string\n  postcode: string\n}\n"],"mappings":"AAAA,SAASA,aAAa,QAAsC,oBAAoB;AAGhF,SAASC,mBAAmB;AAC5B,SACEC,aAAa,EACbC,WAAW;AAEb,SAASC,SAAS;AAUlB,OAAO,MAAMC,cAAc,SAASH,aAAa,CAAC;EAMhDI,WAAWA,CACTC,GAA4B,EAC5BC,KAAqD,EACrD;IACA,KAAK,CAACD,GAAG,EAAEC,KAAK,CAAC;IAEjB,MAAM;MAAEC,IAAI;MAAEC;IAAQ,CAAC,GAAGH,GAAG;IAE7B,MAAMI,UAAU,GAAGD,OAAO,CAACE,QAAQ,KAAK,KAAK;IAC7C,MAAMC,YAAY,GAAG,CAAC,CAACH,OAAO,CAACI,YAAY;IAC3C,MAAMC,SAAS,GAAG,CAAC,CAACL,OAAO,CAACK,SAAS;IAErC,IAAI,CAACC,UAAU,GAAG,IAAIf,mBAAmB,CACvC,CACE;MACEgB,IAAI,EAAEjB,aAAa,CAACI,SAAS;MAC7BK,IAAI,EAAE,GAAGA,IAAI,gBAAgB;MAC7BS,KAAK,EAAE,gBAAgB;MACvBC,MAAM,EAAE;QAAEC,GAAG,EAAE;MAAI,CAAC;MACpBV,OAAO,EAAE;QACPW,YAAY,EAAE,eAAe;QAC7BT,QAAQ,EAAED,UAAU;QACpBG,YAAY,EAAE,CAACH,UAAU,KAAKE,YAAY,IAAI,CAACE,SAAS;MAC1D;IACF,CAAC,EACD;MACEE,IAAI,EAAEjB,aAAa,CAACI,SAAS;MAC7BK,IAAI,EAAE,GAAGA,IAAI,gBAAgB;MAC7BS,KAAK,EAAE,gBAAgB;MACvBC,MAAM,EAAE;QAAEC,GAAG,EAAE;MAAI,CAAC;MACpBV,OAAO,EAAE;QACPW,YAAY,EAAE,eAAe;QAC7BT,QAAQ,EAAE,KAAK;QACfE,YAAY,EAAE,CAACH,UAAU,KAAKE,YAAY,IAAI,CAACE,SAAS;MAC1D;IACF,CAAC,EACD;MACEE,IAAI,EAAEjB,aAAa,CAACI,SAAS;MAC7BK,IAAI,EAAE,GAAGA,IAAI,QAAQ;MACrBS,KAAK,EAAE,cAAc;MACrBC,MAAM,EAAE;QAAEC,GAAG,EAAE;MAAI,CAAC;MACpBV,OAAO,EAAE;QACPW,YAAY,EAAE,gBAAgB;QAC9BC,OAAO,EAAE,0BAA0B;QACnCV,QAAQ,EAAED,UAAU;QACpBG,YAAY,EAAE,CAACH,UAAU,KAAKE,YAAY,IAAI,CAACE,SAAS;MAC1D;IACF,CAAC,EACD;MACEE,IAAI,EAAEjB,aAAa,CAACI,SAAS;MAC7BK,IAAI,EAAE,GAAGA,IAAI,UAAU;MACvBS,KAAK,EAAE,QAAQ;MACfC,MAAM,EAAE;QAAEC,GAAG,EAAE;MAAI,CAAC;MACpBV,OAAO,EAAE;QACPW,YAAY,EAAE,QAAQ;QACtBT,QAAQ,EAAE,KAAK;QACfE,YAAY,EAAE,CAACH,UAAU,KAAKE,YAAY,IAAI,CAACE,SAAS;MAC1D;IACF,CAAC,EACD;MACEE,IAAI,EAAEjB,aAAa,CAACI,SAAS;MAC7BK,IAAI,EAAE,GAAGA,IAAI,YAAY;MACzBS,KAAK,EAAE,UAAU;MACjBC,MAAM,EAAE;QACNI,KAAK,EAAE;MACT,CAAC;MACDb,OAAO,EAAE;QACPW,YAAY,EAAE,aAAa;QAC3BC,OAAO,EAAE,uBAAuB;QAChCV,QAAQ,EAAED,UAAU;QACpBG,YAAY,EAAE,CAACH,UAAU,KAAKE,YAAY,IAAI,CAACE,SAAS;MAC1D;IACF,CAAC,CACF,EACD;MAAE,GAAGP,KAAK;MAAEgB,MAAM,EAAE;IAAK,CAC3B,CAAC;IAED,IAAI,CAACd,OAAO,GAAGA,OAAO;IACtB,IAAI,CAACe,UAAU,GAAG,IAAI,CAACT,UAAU,CAACS,UAAU;IAC5C,IAAI,CAACC,WAAW,GAAG,IAAI,CAACV,UAAU,CAACU,WAAW;EAChD;EAEAC,qBAAqBA,CAACC,KAA0B,EAAE;IAChD,MAAMC,KAAK,GAAG,KAAK,CAACF,qBAAqB,CAACC,KAAK,CAAC;IAChD,OAAO,IAAI,CAACE,OAAO,CAACD,KAAK,CAAC,GAAGA,KAAK,GAAGE,SAAS;EAChD;EAEAC,yBAAyBA,CAACJ,KAA0B,EAAE;IACpD,OAAO,IAAI,CAACK,wBAAwB,CAACL,KAAK,CAAC,EAAEM,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;EAC/D;EAEAD,wBAAwBA,CAACL,KAA0B,EAAE;IACnD,MAAMC,KAAK,GAAG,IAAI,CAACF,qBAAqB,CAACC,KAAK,CAAC;IAE/C,IAAI,CAACC,KAAK,EAAE;MACV,OAAO,IAAI;IACb;IAEA,OAAOM,MAAM,CAACC,MAAM,CAACP,KAAK,CAAC,CAACQ,MAAM,CAACC,OAAO,CAAC;EAC7C;EAEAC,YAAYA,CAACC,OAAoB,EAAEC,MAA8B,EAAE;IACjE,MAAM;MAAEzB,UAAU;MAAEP,IAAI;MAAEC;IAAQ,CAAC,GAAG,IAAI;IAE1C,MAAMgC,SAAS,GAAG,KAAK,CAACH,YAAY,CAACC,OAAO,EAAEC,MAAM,CAAC;IACrD,IAAI;MAAEE,UAAU;MAAEC,QAAQ;MAAEC,IAAI;MAAEC;IAAM,CAAC,GAAGJ,SAAS;IAErDE,QAAQ,KAAK;MACXG,MAAM,EAAE;QACNC,IAAI,EAAEF,KAAK,CAACE,IAAI;QAEhB;AACR;AACA;AACA;QACQ1B,OAAO,EAAEZ,OAAO,CAACK,SAAS,GACtB,uBAAuB,GACvB;MACN;IACF,CAAC;IAED,IAAI8B,IAAI,EAAE;MACRA,IAAI,CAACI,EAAE,KAAK,GAAGxC,IAAI,OAAO;MAC1BmC,QAAQ,CAACM,UAAU,KAAK;QACtB,kBAAkB,EAAEL,IAAI,CAACI;MAC3B,CAAC;IACH;IAEAN,UAAU,GAAG3B,UAAU,CAACuB,YAAY,CAACC,OAAO,EAAEC,MAAM,CAAC;IAErD,OAAO;MACL,GAAGC,SAAS;MACZE,QAAQ;MACRD;IACF,CAAC;EACH;EAEAb,OAAOA,CAACD,KAAkC,EAA2B;IACnE,OAAOxB,cAAc,CAAC8C,WAAW,CAACtB,KAAK,CAAC;EAC1C;EAEA,OAAOsB,WAAWA,CAChBtB,KAAkC,EACT;IACzB,OACE1B,WAAW,CAAC0B,KAAK,CAAC,IAClBzB,SAAS,CAACgD,MAAM,CAACvB,KAAK,CAACwB,YAAY,CAAC,IACpCjD,SAAS,CAACgD,MAAM,CAACvB,KAAK,CAACyB,IAAI,CAAC,IAC5BlD,SAAS,CAACgD,MAAM,CAACvB,KAAK,CAAC0B,QAAQ,CAAC;EAEpC;AACF","ignoreList":[]}

package/README.md

@@ -6,24 +6,9 @@ It is designed to be embedded in the frontend of a digital service and provide a
 
 ## Table of Contents
 
+- [Demo of DXT](#demo-of-dxt)
 - [Installation](#installation)
-- [Dependencies](#dependencies)
-- [Setup](#setup)
-  - [Form Config](#form-config)
-  - [Static Assets and Styles](#static-assets-and-styles)
-- [Example](#example)
-- [Environment Variables](#environment-variables)
-- [Options](#options)
-  - [Services](#services)
-  - [Custom Controllers](#custom-controllers)
-  - [Custom Filters](#custom-filters)
-  - [Custom Cache](#custom-cache)
-- [Exemplar](#exemplar)
-- [Templates](#templates)
-  - [Template Data](#template-data)
-  - [Liquid Filters](#liquid-filters)
-  - [Examples](#examples)
-- [Templates and Views: Extending the Default Layout](#templates-and-views-extending-the-default-layout)
+- [Documentation](#documentation)
 - [Publishing the Package](#publishing-the-package)
   - [Semantic Versioning Control](#semantic-versioning-control)
   - [Major-Version Release Branches](#major-version-release-branches)
@@ -31,305 +16,25 @@ It is designed to be embedded in the frontend of a digital service and provide a
   - [Workflow Triggers](#workflow-triggers)
   - [Safety and Consistency](#safety-and-consistency)
 
-## Installation
-
-`npm install @defra/forms-engine-plugin --save`
-
-## Dependencies
-
-The following are [plugin dependencies](<https://hapi.dev/api/?v=21.4.0#server.dependency()>) that are required to be registered with hapi:
-
-`npm install hapi-pino @hapi/crumb @hapi/yar @hapi/vision --save`
-
-- [hapi-pino](https://github.com/hapijs/hapi-pino) - [Pino](https://github.com/pinojs/pino) logger for hapi
-- [@hapi/crumb](https://github.com/hapijs/crumb) - CSRF crumb generation and validation
-- [@hapi/yar](https://github.com/hapijs/yar) - Session manager
-- [@hapi/vision](https://github.com/hapijs/vision) - Template rendering support
-
-Additional npm dependencies that you will need are:
-
-`npm install nunjucks govuk-frontend --save`
-
-- [nunjucks](https://www.npmjs.com/package/nunjucks) - [templating engine](https://mozilla.github.io/nunjucks/) used by GOV.UK design system
-- [govuk-frontend](https://www.npmjs.com/package/govuk-frontend) - [code](https://github.com/alphagov/govuk-frontend) you need to build a user interface for government platforms and services
-
-Optional dependencies
-
-`npm install @hapi/inert --save`
-
-- [@hapi/inert](https://www.npmjs.com/package/@hapi/inert) - static file and directory handlers for serving GOV.UK assets and styles
-
-## Setup
-
-### Form config
-
-The `form-engine-plugin` uses JSON configuration files to serve form journeys.
-These files are called `Form definitions` and are built up of:
-
-- `pages` - includes a `path`, `title`
-- `components` - one or more questions on a page
-- `conditions` - used to conditionally show and hide pages and
-- `lists` - data used to in selection fields like [Select](https://design-system.service.gov.uk/components/select/), [Checkboxes](https://design-system.service.gov.uk/components/checkboxes/) and [Radios](https://design-system.service.gov.uk/components/radios/)
-
-The [types](https://github.com/DEFRA/forms-designer/blob/main/model/src/form/form-definition/types.ts), `joi` [schema](https://github.com/DEFRA/forms-designer/blob/main/model/src/form/form-definition/index.ts) and the [examples](test/form/definitions) folder are a good place to learn about the structure of these files.
-
-TODO - Link to wiki for `Form metadata`
-TODO - Link to wiki for `Form definition`
-
-#### Providing form config to the engine
-
-The engine plugin registers several [routes](https://hapi.dev/tutorials/routing/?lang=en_US) on the hapi server.
-
-They look like this:
-
-```
-GET     /{slug}/{path}
-POST    /{slug}/{path}
-```
-
-A unique `slug` is used to route the user to the correct form, and the `path` used to identify the correct page within the form to show.
-The [plugin registration options](#options) have a `services` setting to provide a `formsService` that is responsible for returning `form definition` data.
-
-WARNING: This below is subject to change
-
-A `formsService` has two methods, one for returning `formMetadata` and another to return `formDefinition`s.
-
-```
-const formsService = {
-  getFormMetadata: async function (slug) {
-    // Returns the metadata for the slug
-  },
-  getFormDefinition: async function (id, state) {
-    // Returns the form definition for the given id
-  }
-}
-```
-
-The reason for the two separate methods is caching.
-`formMetadata` is a lightweight record designed to give top level information about a form.
-This method is invoked for every page request.
-
-Only when the `formMetadata` indicates that the definition has changed is a call to `getFormDefinition` is made.
-The response from this can be quite big as it contains the entire form definition.
-
-See [example](#example) below for more detail
-
-### Static assets and styles
-
-TODO
-
-## Example
-
-```
-import hapi from '@hapi/hapi'
-import yar from '@hapi/yar'
-import crumb from '@hapi/crumb'
-import inert from '@hapi/inert'
-import pino from 'hapi-pino'
-import plugin from '@defra/forms-engine-plugin'
-
-const server = hapi.server({
-  port: 3000
-})
-
-// Register the dependent plugins
-await server.register(pino)
-await server.register(inert)
-await server.register(crumb)
-await server.register({
-  plugin: yar,
-  options: {
-    cookieOptions: {
-      password: 'ENTER_YOUR_SESSION_COOKIE_PASSWORD_HERE' // Must be > 32 chars
-    }
-  }
-})
-
-// Register the `forms-engine-plugin`
-await server.register({
-  plugin
-})
-
-await server.start()
-```
-
-## Environment variables
-
-## Options
-
-The forms plugin is configured with [registration options](https://hapi.dev/api/?v=21.4.0#plugins)
-
-- `services` (optional) - object containing `formsService`, `formSubmissionService` and `outputService`
-  - `formsService` - used to load `formMetadata` and `formDefinition`
-  - `formSubmissionService` - used prepare the form during submission (ignore - subject to change)
-  - `outputService` - used to save the submission
-- `controllers` (optional) - Object map of custom page controllers used to override the default. See [custom controllers](#custom-controllers)
-- `filters` (optional) - A map of custom template filters to include
-- `cacheName` (optional) - The cache name to use. Defaults to hapi's [default server cache]. Recommended for production. See [here]
-  (#custom-cache) for more details
-- `viewPaths` (optional) - Include additional view paths when using custom `page.view`s
-- `pluginPath` (optional) - The location of the plugin (defaults to `node_modules/@defra/forms-engine-plugin`)
-
-### Services
-
-TODO
-
-### Custom controllers
-
-TODO
-
-### Custom filters
-
-Use the `filter` plugin option to provide custom template filters.
-Filters are available in both [nunjucks](https://mozilla.github.io/nunjucks/templating.html#filters) and [liquid](https://liquidjs.com/filters/overview.html) templates.
-
-```
-const formatter = new Intl.NumberFormat('en-GB')
-
-await server.register({
-  plugin,
-  options: {
-    filters: {
-      money: value => formatter.format(value),
-      upper: value => typeof value === 'string' ? value.toUpperCase() : value
-    }
-  }
-})
-```
-
-### Custom cache
-
-The plugin will use the [default server cache](https://hapi.dev/api/?v=21.4.0#-serveroptionscache) to store form answers on the server.
-This is just an in-memory cache which is fine for development.
-
-In production you should create a custom cache one of the available `@hapi/catbox` adapters.
-
-E.g. [Redis](https://github.com/hapijs/catbox-redis)
-
-```
-import { Engine as CatboxRedis } from '@hapi/catbox-redis'
-
-const server = new Hapi.Server({
-  cache : [
-    {
-      name: 'my_cache',
-      provider: {
-        constructor: CatboxRedis,
-        options: {}
-      }
-    }
-  ]
-})
-```
-
-## Exemplar
+## Demo of DXT
 
 TODO: Link to CDP exemplar
 
-## Templates
-
-The following elements support [LiquidJS templates](https://liquidjs.com/):
-
-- Page **title**
-- Form component **title**
-  - Support for fieldset legend text or label text
-  - This includes when the title is used in **error messages**
-- Html (guidance) component **content**
-- Summary component **row** key title (check answers and repeater summary)
-
-### Template Data
-
-The data the templates are evaluated against is the raw answers the user has provided up to the page they're currently on.
-For example, given a YesNoField component called `TKsWbP`, the template `{{ TKsWbP }}` would render "true" or "false" depending on how the user answered the question.
-
-The current FormContext is also available as `context` in the templates. This allows access to the full data including the path the user has taken in their journey and any miscellaneous data returned from `Page event`s in `context.data`.
-
-### Liquid Filters
-
-There are a number of `LiquidJS` filters available to you from within the templates:
-
-- `page` - returns the page definition for the given path
-- `field` - returns the component definition for the given name
-- `href` - returns the page href for the given page path
-- `answer` - returns the user's answer for a given component
-- `evaluate` - evaluates and returns a Liquid template using the current context
-
-### Examples
-
-```json
-"pages": [
-  {
-    "title": "What's your name?",
-    "path": "/full-name",
-    "components": [
-      {
-        "name": "WmHfSb",
-        "title": "What's your full name?",
-        "type": "TextField"
-      }
-    ]
-  },
-  // This example shows how a component can use an answer to a previous question (What's your full name) in it's title
-  {
-    "title": "Are you in England?",
-    "path": "/are-you-in-england",
-    "components": [
-      {
-        "name": "TKsWbP",
-        "title": "Are you in England, {{ WmHfSb }}?",
-        "type": "YesNoField"
-      }
-    ]
-  },
-  // This example shows how a Html (guidance) component can use the available filters to get the form definition and user answers and display them
-  {
-    "title": "Template example for {{ WmHfSb }}?",
-    "path": "/example",
-    "components": [
-      {
-        "title": "Html",
-        "type": "Html",
-        "content": "<p class=\"govuk-body\">
-          // Use Liquid's `assign` to create a variable that holds reference to the \"/are-you-in-england\" page
-          {%- assign inEngland = \"/are-you-in-england\" | page -%}
-
-          // Use the reference to `evaluate` the title
-          {{ inEngland.title | evaluate }}<br>
-
-          // Use the href filter to display the full page path
-          {{ \"/are-you-in-england\" | href }}<br>
-
-          // Use the `answer` filter to render the user provided answer to a question
-          {{ 'TKsWbP' | answer }}
-        </p>\n"
-      }
-    ]
-  }
-]
-```
-
-## Templates and views
-
-### Extending the default layout
-
-TODO
-
-To override the default page template, vision and nunjucks both need to be configured to search in the `forms-engine-plugin` views directory when looking for template files.
+## Installation
 
-For vision this is done through the `path` [plugin option](https://github.com/hapijs/vision/blob/master/API.md#options)
-For nunjucks it is configured through the environment [configure options](https://mozilla.github.io/nunjucks/api.html#configure).
+[See our getting started developer guide](./docs/GETTING_STARTED.md).
 
-The `forms-engine-plugin` path to add can be imported from:
+## Documentation
 
-`import { VIEW_PATH } from '@defra/forms-engine-plugin'`
+DXT has a mix of configuration-driven and code-based features that developers can utilise.
 
-Which can then be appended to the `node_modules` path `node_modules/@defra/forms-engine`.
+[See our documentation folder](./docs/INDEX.md) to learn more about the features of DXT.
 
-The main template layout is `govuk-frontend`'s `template.njk` file, this also needs to be added to the `path`s that nunjucks can look in.
+## Contributing
 
-### Custom page view
+[See our contribution guide](./docs/CONTRIBUTING.md).
 
-## Publishing the Package
+## Publishing the package
 
 Our GitHub Actions workflow (`publish.yml`) is set up to make publishing a breeze, using semantic versioning and a variety of release strategies. Here's how you can make the most of it:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@defra/forms-engine-plugin",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Defra forms engine",
   "type": "module",
   "files": [
@@ -22,6 +22,7 @@
     "./file-upload.min.js.map": "./.public/javascripts/file-upload.min.js.map",
     "./application.min.css": "./.public/stylesheets/application.min.css",
     "./controllers/*": "./.server/server/plugins/engine/pageControllers/*",
+    "./services/*": "./.server/server/plugins/engine/services/*",
     "./package.json": "./package.json"
   },
   "scripts": {

package/src/config/index.ts

@@ -90,13 +90,13 @@ export const config = convict({
     doc: 'The service version, this variable is injected into your docker container in CDP environments',
     format: String,
     nullable: true,
-    default: null,
+    default: '',
     env: 'SERVICE_VERSION'
   } as SchemaObj<string>,
   feedbackLink: {
     doc: 'Used in your phase banner. Can be a URL or more commonly mailto mailto:feedback@department.gov.uk',
     format: String,
-    default: null,
+    default: '',
     env: 'FEEDBACK_LINK'
   } as SchemaObj<string>,
   phaseTag: {
@@ -121,7 +121,7 @@ export const config = convict({
   },
   sessionCookiePassword: {
     format: String,
-    default: null,
+    default: '',
     sensitive: true,
     env: 'SESSION_COOKIE_PASSWORD'
   } as SchemaObj<string>,
@@ -129,26 +129,26 @@ export const config = convict({
     host: {
       doc: 'Redis cache host',
       format: String,
-      default: null,
+      default: '',
       env: 'REDIS_HOST'
     } as SchemaObj<string>,
     username: {
       doc: 'Redis cache username',
       format: String,
-      default: null,
+      default: '',
       env: 'REDIS_USERNAME'
     } as SchemaObj<string>,
     password: {
       doc: 'Redis cache password',
       format: '*',
-      default: null,
+      default: '',
       sensitive: true,
       env: 'REDIS_PASSWORD'
     } as SchemaObj<string>,
     keyPrefix: {
       doc: 'Redis cache key prefix name used to isolate the cached results across multiple clients',
       format: String,
-      default: null,
+      default: '',
       env: 'REDIS_KEY_PREFIX'
     } as SchemaObj<string>
   },
@@ -167,12 +167,12 @@ export const config = convict({
    */
   notifyTemplateId: {
     format: String,
-    default: null,
+    default: '',
     env: 'NOTIFY_TEMPLATE_ID'
   } as SchemaObj<string>,
   notifyAPIKey: {
     format: String,
-    default: null,
+    default: '',
     env: 'NOTIFY_API_KEY'
   } as SchemaObj<string>,
 
@@ -181,25 +181,25 @@ export const config = convict({
    */
   managerUrl: {
     format: String,
-    default: null,
+    default: 'http://localhost:3001',
     env: 'MANAGER_URL'
   } as SchemaObj<string>,
 
   designerUrl: {
     format: String,
-    default: null,
+    default: 'http://localhost:3000',
     env: 'DESIGNER_URL'
   } as SchemaObj<string>,
 
   submissionUrl: {
     format: String,
-    default: null,
+    default: 'http://localhost:3002',
     env: 'SUBMISSION_URL'
   } as SchemaObj<string>,
 
   uploaderUrl: {
     format: String,
-    default: null,
+    default: 'http://localhost:7337',
     env: 'UPLOADER_URL'
   } as SchemaObj<string>,
 

package/src/server/plugins/engine/components/UkAddressField.test.ts

@@ -65,6 +65,13 @@ describe('UkAddressField', () => {
           })
         )
 
+        expect(keys).toHaveProperty(
+          'myComponent__county',
+          expect.objectContaining({
+            flags: expect.objectContaining({ label: 'County' })
+          })
+        )
+
         expect(keys).toHaveProperty(
           `myComponent__postcode`,
           expect.objectContaining({
@@ -82,6 +89,7 @@ describe('UkAddressField', () => {
           'myComponent__addressLine1',
           'myComponent__addressLine2',
           'myComponent__town',
+          'myComponent__county',
           'myComponent__postcode'
         ])
 
@@ -118,6 +126,14 @@ describe('UkAddressField', () => {
           })
         )
 
+        expect(keys).toHaveProperty(
+          'myComponent__county',
+          expect.objectContaining({
+            allow: [''], // Required but empty string is allowed
+            flags: expect.objectContaining({ presence: 'required' })
+          })
+        )
+
         expect(keys).toHaveProperty(
           `myComponent__postcode`,
           expect.objectContaining({
@@ -157,6 +173,11 @@ describe('UkAddressField', () => {
           expect.objectContaining({ allow: [''] })
         )
 
+        expect(keys).toHaveProperty(
+          'myComponent__county',
+          expect.objectContaining({ allow: [''] })
+        )
+
         expect(keys).toHaveProperty(
           `myComponent__postcode`,
           expect.objectContaining({ allow: [''] })
@@ -167,6 +188,7 @@ describe('UkAddressField', () => {
             addressLine1: '',
             addressLine2: '',
             town: '',
+            county: '',
             postcode: ''
           })
         )
@@ -180,6 +202,7 @@ describe('UkAddressField', () => {
             addressLine1: 'Richard Fairclough House',
             addressLine2: 'Knutsford Road',
             town: 'Warrington',
+            county: 'Cheshire',
             postcode: 'WA4 1HT'
           })
         )
@@ -189,6 +212,7 @@ describe('UkAddressField', () => {
             addressLine1: 'Richard Fairclough House',
             addressLine2: '', // Optional field
             town: 'Warrington',
+            county: '', // Optional field
             postcode: 'WA4 1HT'
           })
         )
@@ -203,6 +227,7 @@ describe('UkAddressField', () => {
             addressLine1: '',
             addressLine2: '',
             town: '',
+            county: '',
             postcode: ''
           })
         )
@@ -228,6 +253,7 @@ describe('UkAddressField', () => {
             addressLine1: ['invalid'],
             addressLine2: ['invalid'],
             town: ['invalid'],
+            county: ['invalid'],
             postcode: ['invalid']
           })
         )
@@ -237,6 +263,7 @@ describe('UkAddressField', () => {
             addressLine1: 'invalid',
             addressLine2: 'invalid',
             town: 'invalid',
+            county: 'invalid',
             postcode: 'invalid'
           })
         )
@@ -252,6 +279,7 @@ describe('UkAddressField', () => {
         addressLine1: 'Richard Fairclough House',
         addressLine2: 'Knutsford Road',
         town: 'Warrington',
+        county: 'Cheshire',
         postcode: 'WA4 1HT'
       }
 
@@ -263,7 +291,7 @@ describe('UkAddressField', () => {
         const answer2 = getAnswer(field, state2)
 
         expect(answer1).toBe(
-          'Richard Fairclough House<br>Knutsford Road<br>Warrington<br>WA4 1HT<br>'
+          'Richard Fairclough House<br>Knutsford Road<br>Warrington<br>Cheshire<br>WA4 1HT<br>'
         )
 
         expect(answer2).toBe('')
@@ -302,6 +330,7 @@ describe('UkAddressField', () => {
           'Richard Fairclough House',
           'Knutsford Road',
           'Warrington',
+          'Cheshire',
           'WA4 1HT'
         ])
 
@@ -325,6 +354,7 @@ describe('UkAddressField', () => {
         addressLine1: 'Richard Fairclough House',
         addressLine2: 'Knutsford Road',
         town: 'Warrington',
+        county: 'Cheshire',
         postcode: 'WA4 1HT'
       }
 
@@ -363,6 +393,14 @@ describe('UkAddressField', () => {
                 })
               }),
 
+              expect.objectContaining({
+                model: getViewModel(address, 'county', {
+                  label: { text: 'County (optional)' },
+                  attributes: { autocomplete: 'county' },
+                  value: address.county
+                })
+              }),
+
               expect.objectContaining({
                 model: getViewModel(address, 'postcode', {
                   label: { text: 'Postcode' },
@@ -395,6 +433,7 @@ describe('UkAddressField', () => {
       addressLine1: 'Richard Fairclough House',
       addressLine2: 'Knutsford Road',
       town: 'Warrington',
+      county: 'Cheshire',
       postcode: 'WA4 1HT'
     }
 
@@ -407,6 +446,9 @@ describe('UkAddressField', () => {
     const townInvalid =
       'Town 000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000'
 
+    const countyInvalid =
+      'County 0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000'
+
     const postcodeInvalid = '111 XX2'
 
     describe.each([
@@ -424,6 +466,7 @@ describe('UkAddressField', () => {
               addressLine1: ' Richard Fairclough House',
               addressLine2: ' Knutsford Road',
               town: ' Warrington',
+              county: 'Cheshire',
               postcode: ' WA4 1HT'
             }),
             output: {
@@ -435,6 +478,7 @@ describe('UkAddressField', () => {
               addressLine1: 'Richard Fairclough House ',
               addressLine2: 'Knutsford Road ',
               town: 'Warrington ',
+              county: 'Cheshire ',
               postcode: 'WA4 1HT '
             }),
             output: {
@@ -446,6 +490,7 @@ describe('UkAddressField', () => {
               addressLine1: ' Richard Fairclough House \n\n',
               addressLine2: ' Knutsford Road \n\n',
               town: ' Warrington \n\n',
+              county: ' Cheshire \n\n',
               postcode: ' WA4 1HT \n\n'
             }),
             output: {
@@ -468,6 +513,7 @@ describe('UkAddressField', () => {
               addressLine1: addressLine1Invalid,
               addressLine2: 'Knutsford Road',
               town: 'Warrington',
+              county: 'Cheshire',
               postcode: 'WA4 1HT'
             }),
             output: {
@@ -475,6 +521,7 @@ describe('UkAddressField', () => {
                 addressLine1: addressLine1Invalid,
                 addressLine2: 'Knutsford Road',
                 town: 'Warrington',
+                county: 'Cheshire',
                 postcode: 'WA4 1HT'
               }),
               errors: [
@@ -489,6 +536,7 @@ describe('UkAddressField', () => {
               addressLine1: 'Richard Fairclough House',
               addressLine2: addressLine2Invalid,
               town: 'Warrington',
+              county: 'Cheshire',
               postcode: 'WA4 1HT'
             }),
             output: {
@@ -496,6 +544,7 @@ describe('UkAddressField', () => {
                 addressLine1: 'Richard Fairclough House',
                 addressLine2: addressLine2Invalid,
                 town: 'Warrington',
+                county: 'Cheshire',
                 postcode: 'WA4 1HT'
               }),
               errors: [
@@ -510,6 +559,7 @@ describe('UkAddressField', () => {
               addressLine1: 'Richard Fairclough House',
               addressLine2: 'Knutsford Road',
               town: townInvalid,
+              county: 'Cheshire',
               postcode: 'WA4 1HT'
             }),
             output: {
@@ -517,6 +567,7 @@ describe('UkAddressField', () => {
                 addressLine1: 'Richard Fairclough House',
                 addressLine2: 'Knutsford Road',
                 town: townInvalid,
+                county: 'Cheshire',
                 postcode: 'WA4 1HT'
               }),
               errors: [
@@ -531,6 +582,30 @@ describe('UkAddressField', () => {
               addressLine1: 'Richard Fairclough House',
               addressLine2: 'Knutsford Road',
               town: 'Warrington',
+              county: countyInvalid,
+              postcode: 'WA4 1HT'
+            }),
+            output: {
+              value: getFormData({
+                addressLine1: 'Richard Fairclough House',
+                addressLine2: 'Knutsford Road',
+                town: 'Warrington',
+                county: countyInvalid,
+                postcode: 'WA4 1HT'
+              }),
+              errors: [
+                expect.objectContaining({
+                  text: 'County must be 100 characters or less'
+                })
+              ]
+            }
+          },
+          {
+            input: getFormData({
+              addressLine1: 'Richard Fairclough House',
+              addressLine2: 'Knutsford Road',
+              town: 'Warrington',
+              county: 'Cheshire',
               postcode: postcodeInvalid
             }),
             output: {
@@ -538,6 +613,7 @@ describe('UkAddressField', () => {
                 addressLine1: 'Richard Fairclough House',
                 addressLine2: 'Knutsford Road',
                 town: 'Warrington',
+                county: 'Cheshire',
                 postcode: postcodeInvalid
               }),
               errors: [
@@ -602,6 +678,7 @@ function getFormData(address: FormPayload): FormPayload {
     myComponent__addressLine1: address.addressLine1,
     myComponent__addressLine2: address.addressLine2,
     myComponent__town: address.town,
+    myComponent__county: address.county,
     myComponent__postcode: address.postcode
   }
 }
@@ -610,7 +687,7 @@ function getFormData(address: FormPayload): FormPayload {
  * UK address session state
  */
 function getFormState(address: FormPayload): FormState {
-  const [addressLine1, addressLine2, town, postcode] = Object.values(
+  const [addressLine1, addressLine2, town, county, postcode] = Object.values(
     getFormData(address)
   )
 
@@ -618,6 +695,7 @@ function getFormState(address: FormPayload): FormState {
     myComponent__addressLine1: addressLine1 ?? null,
     myComponent__addressLine2: addressLine2 ?? null,
     myComponent__town: town ?? null,
+    myComponent__county: county ?? null,
     myComponent__postcode: postcode ?? null
   }
 }

package/src/server/plugins/engine/components/UkAddressField.ts

@@ -70,6 +70,17 @@ export class UkAddressField extends FormComponent {
             optionalText: !isRequired && (hideOptional || !hideTitle)
           }
         },
+        {
+          type: ComponentType.TextField,
+          name: `${name}__county`,
+          title: 'County',
+          schema: { max: 100 },
+          options: {
+            autocomplete: 'county',
+            required: false,
+            optionalText: !isRequired && (hideOptional || !hideTitle)
+          }
+        },
         {
           type: ComponentType.TextField,
           name: `${name}__postcode`,
@@ -168,5 +179,6 @@ export interface UkAddressState extends Record<string, string> {
   addressLine1: string
   addressLine2: string
   town: string
+  county: string
   postcode: string
 }

package/src/server/plugins/engine/views/layout.html

@@ -132,7 +132,7 @@
   {% set feedbackLink = feedbackLink or config.feedbackLink -%}
   {% set phaseTag = phaseTag or config.phaseTag -%}
 
-  {% if phaseTag %}
+  {% if phaseTag and feedbackLink %}
     {% set feedbackLinkHtml -%}
       <a href="{{ currentPath if context.isForceAccess else feedbackLink }}" class="govuk-link" {%- if not context.isForceAccess %} target="_blank" rel="noopener noreferrer" {%- endif %}>
         {%- if "mailto:" in feedbackLink -%}