@defra/forms-model 3.0.481 → 3.0.483

package/schemas/form-metadata-schema.json

@@ -108,9 +108,8 @@
     },
     "notificationEmail": {
       "type": "string",
-      "description": "Email address to receive form submission notifications, must be a .gov.uk or .org.uk address",
+      "description": "Email address to receive form submission notifications",
       "format": "email",
-      "pattern": "\\.gov\\.uk$|\\.org\\.uk$",
       "title": "Notification Email"
     },
     "id": {

package/schemas/question-type-full-schema.json

@@ -14,7 +14,8 @@
     "YesNoField",
     "CheckboxesField",
     "RadiosField",
-    "AutocompleteField"
+    "AutocompleteField",
+    "SelectField"
   ],
   "$schema": "http://json-schema.org/draft-07/schema#",
   "title": "Question Type Full Schema",

package/src/conditions/condition-operators.ts

@@ -73,7 +73,10 @@ export const customOperators = {
     ...relativeDateOperators
   },
   [ComponentType.TextField]: withDefaults(textFieldOperators),
-  [ComponentType.MultilineTextField]: withDefaults(textFieldOperators),
+  [ComponentType.MultilineTextField]: {
+    [OperatorName.IsLongerThan]: lengthIs(Operator.IsMoreThan),
+    [OperatorName.IsShorterThan]: lengthIs(Operator.IsLessThan)
+  },
   [ComponentType.EmailAddressField]: withDefaults(textFieldOperators),
   [ComponentType.TelephoneNumberField]: defaultOperators,
   [ComponentType.SelectField]: defaultOperators,

package/src/form/form-definition/index.ts

@@ -180,11 +180,6 @@ const relativeDateValueDataSchemaV2 = Joi.object<RelativeDateValueDataV2>()
 const relativeDateValueDataSchema = Joi.object<RelativeDateValueData>()
   .description('Relative date specification for date-based conditions')
   .keys({
-    type: Joi.string()
-      .trim()
-      .valid('RelativeDate')
-      .required()
-      .description('Type of the condition value, should be "RelativeDate"'),
     period: Joi.string()
       .trim()
       .required()

package/src/form/form-editor/__stubs__/preview.js

@@ -1,3 +1,5 @@
+import { Question } from '~/src/form/form-editor/preview/question.js'
+
 /**
  * @implements {QuestionRenderer}
  */
@@ -32,6 +34,40 @@ export class QuestionRendererStub {
   }
 }
 
+/**
+ * @implements {PageRenderer}
+ */
+export class PageRendererStub {
+  /**
+   * @type {jest.Mock<void, [string, PagePreviewPanelMacro]>}
+   */
+  renderMock
+
+  /**
+   * @param {jest.Mock<void, [string, PagePreviewPanelMacro]>} renderMock
+   */
+  constructor(renderMock) {
+    this.renderMock = renderMock
+  }
+
+  /**
+   * @param {string} pageTemplate
+   * @param {PagePreviewPanelMacro} pagePreviewPanelMacro
+   */
+  render(pageTemplate, pagePreviewPanelMacro) {
+    this.renderMock(pageTemplate, pagePreviewPanelMacro)
+  }
+
+  /**
+   * @returns {string}
+   * @param {string} _questionTemplate
+   * @param {RenderContext} _renderContext
+   */
+  static buildHTML(_questionTemplate, _renderContext) {
+    return '**** BUILT HTML ****'
+  }
+}
+
 /**
  * @implements {ListElements}
  */
@@ -49,6 +85,11 @@ export class QuestionPreviewElements {
    * @protected
    */
   _shortDesc = ''
+  /**
+   * @type {string}
+   * @protected
+   */
+  _content = ''
   /**
    *
    * @type {ListElement[]}
@@ -61,21 +102,26 @@ export class QuestionPreviewElements {
   /**
    * @param {BaseSettings} baseSettings
    */
-  constructor({ question, hintText, optional, shortDesc, items }) {
+  constructor({ question, hintText, optional, shortDesc, items, content }) {
     this._question = question
     this._hintText = hintText
     this._optional = optional
     this._shortDesc = shortDesc
     this._items = items
+    this._content = content
   }
 
+  /**
+   * @returns {BaseSettings}
+   */
   get values() {
     return {
       question: this._question,
       hintText: this._hintText,
       optional: this._optional,
       shortDesc: this._shortDesc,
-      items: this._items
+      items: this._items,
+      content: this._content
     }
   }
 
@@ -107,12 +153,30 @@ export class AutocompletePreviewElements extends QuestionPreviewElements {
   }
 }
 
+/**
+ * @implements {PageOverviewElements}
+ */
+export class PagePreviewElements {
+  guidance
+  heading
+
+  /**
+   * @param {string} heading
+   * @param {string} guidance
+   */
+  constructor(heading, guidance = '') {
+    this.heading = heading
+    this.guidance = guidance
+  }
+}
+
 export const baseElements = /** @type {BaseSettings} */ ({
   items: [],
   optional: false,
   question: 'Which quest would you like to pick?',
   hintText: 'Choose one adventure that best suits you.',
-  shortDesc: ''
+  shortDesc: '',
+  content: ''
 })
 
 const list1Id = '414d82a3-4cab-416a-bd54-6b86fbd51120'
@@ -158,7 +222,23 @@ export const listElementsStub = {
   baseElements: listElementsBase
 }
 
+/**
+ * @param {Partial<BaseSettings>} partialBaseElements
+ * @param {jest.Mock<void, [string, QuestionBaseModel]>} renderMock
+ * @returns {Question}
+ */
+export function buildPreviewShortAnswer(partialBaseElements, renderMock) {
+  return new Question(
+    new QuestionPreviewElements({
+      ...baseElements,
+      ...partialBaseElements
+    }),
+    new QuestionRendererStub(renderMock)
+  )
+}
+
 /**
  * @import { ListElement } from  '~/src/form/form-editor/types.js'
- * @import { BaseSettings, ListElements, RenderContext, QuestionBaseModel, QuestionElements, QuestionRenderer, AutocompleteElements } from  '~/src/form/form-editor/preview/types.js'
+ * @import { PagePreviewPanelMacro } from '~/src/form/form-editor/macros/types.js'
+ * @import { BaseSettings, ListElements, RenderContext, QuestionBaseModel, QuestionElements, QuestionRenderer, AutocompleteElements, PageOverviewElements, PageRenderer } from  '~/src/form/form-editor/preview/types.js'
  */

package/src/form/form-editor/index.ts

@@ -54,7 +54,8 @@ export const questionTypeFullSchema = Joi.string()
     ComponentType.YesNoField,
     ComponentType.CheckboxesField,
     ComponentType.RadiosField,
-    ComponentType.AutocompleteField
+    ComponentType.AutocompleteField,
+    ComponentType.SelectField
   )
   .description('The specific component type to use for this question')
 
@@ -76,7 +77,8 @@ export const listSubSchema = Joi.string()
     ComponentType.YesNoField,
     ComponentType.CheckboxesField,
     ComponentType.RadiosField,
-    ComponentType.AutocompleteField
+    ComponentType.AutocompleteField,
+    ComponentType.SelectField
   )
   .description('Subtype for date-related questions')
 

package/src/form/form-editor/macros/types.ts

@@ -0,0 +1,65 @@
+import { type ComponentType } from '~/src/components/enums.js'
+import {
+  type DateItem,
+  type GovukField,
+  type ListItemReadonly
+} from '~/src/form/form-editor/types.js'
+import { type DefaultComponent, type GovukFieldset } from '~/src/index.js'
+
+export interface AppPreviewErrorPanelMacroErrorTemplate {
+  advancedSettingsErrors: []
+  baseErrors: { template: unknown; type: string }[]
+}
+
+export interface AppPreviewErrorPanelMacro {
+  errorTemplates: AppPreviewErrorPanelMacroErrorTemplate
+  fieldDetails: {
+    extraFields: GovukField[]
+    basePageFields: GovukField[]
+  }
+  questionType: ComponentType
+}
+
+export interface AppPreviewPanelTabsMacro {
+  questionType: ComponentType
+  previewPageUrl: string
+  previewErrorsUrl: string
+  errorTemplates: AppPreviewErrorPanelMacroErrorTemplate
+  extraFields: GovukField[]
+  basePageFields: GovukField[]
+}
+
+export interface QuestionBaseModel {
+  id?: string
+  name?: string
+  content?: string
+  label?: DefaultComponent
+  hint?: DefaultComponent
+  fieldset?: GovukFieldset
+  readonly items?: ListItemReadonly[] | DateItem[]
+  text?: string
+  formGroup?: { afterInputs: { html: string } }
+  type?: 'text' | 'number' | 'boolean'
+  classes?: string
+}
+
+export interface AppPreviewPanelMacro extends AppPreviewPanelTabsMacro {
+  model: QuestionBaseModel
+}
+
+export interface PagePreviewComponent {
+  model: QuestionBaseModel
+  questionType: ComponentType
+}
+
+export interface PagePreviewPanelMacro {
+  readonly pageTitle: {
+    text: string
+    classes: string
+  }
+  readonly guidance: {
+    text: string
+    classes: string
+  }
+  readonly components: PagePreviewComponent[]
+}

package/src/form/form-editor/preview/autocomplete.js

@@ -1,19 +1,36 @@
+import { ComponentType } from '~/src/components/enums.js'
 import { autoCompleteOptionsSchema } from '~/src/form/form-editor/index.js'
+import { PreviewComponent } from '~/src/form/form-editor/preview/preview.js'
 import { Question } from '~/src/form/form-editor/preview/question.js'
 
-export class AutocompleteQuestion extends Question {
-  _questionTemplate = Question.PATH + 'autocompletefield.njk'
+export class AutocompleteListQuestion extends Question {
+  /**
+   * @type {ComponentType}
+   */
+  componentType = ComponentType.AutocompleteField
+  _questionTemplate = PreviewComponent.PATH + 'autocompletefield.njk'
   /**
    * @type {string}
    * @protected
    */
   _fieldName = 'autoCompleteField'
+
+  /**
+   * @returns {Partial<QuestionBaseModel>}
+   */
+  get customRenderFields() {
+    return {
+      items: this._htmlElements.values.items
+    }
+  }
+}
+
+export class AutocompleteQuestion extends AutocompleteListQuestion {
   /**
    * @type {ListElement[]}
    * @private
    */
   _autocompleteList = []
-
   /**
    * @param {AutocompleteElements} autocompleteElements
    * @param {QuestionRenderer} questionRenderer
@@ -63,5 +80,5 @@ export class AutocompleteQuestion extends Question {
 /**
  * @import { ValidationResult } from 'joi'
  * @import { ListElement } from '~/src/form/form-editor/types.js'
- * @import { AutocompleteElements, QuestionRenderer } from '~/src/form/form-editor/preview/types.js'
+ * @import { AutocompleteElements, QuestionRenderer, QuestionBaseModel } from '~/src/form/form-editor/preview/types.js'
  */

package/src/form/form-editor/preview/checkbox-sortable.js

@@ -1,12 +1,17 @@
+import { ComponentType } from '~/src/components/enums.js'
 import { ListSortableQuestion } from '~/src/form/form-editor/preview/list-sortable.js'
-import { Question } from '~/src/form/form-editor/preview/question.js'
+import { PreviewComponent } from '~/src/form/form-editor/preview/preview.js'
 
 export class CheckboxSortableQuestion extends ListSortableQuestion {
+  /**
+   * @type {ComponentType}
+   */
+  componentType = ComponentType.CheckboxesField
   /**
    * @type {string}
    * @protected
    */
-  _questionTemplate = Question.PATH + 'checkboxesfield.njk'
+  _questionTemplate = PreviewComponent.PATH + 'checkboxesfield.njk'
   listRenderId = 'checkboxField'
   listRenderName = 'checkboxField'
 }

package/src/form/form-editor/preview/checkbox.js

@@ -0,0 +1,17 @@
+import { ComponentType } from '~/src/components/enums.js'
+import { ListQuestion } from '~/src/form/form-editor/preview/list.js'
+import { PreviewComponent } from '~/src/form/form-editor/preview/preview.js'
+
+export class CheckboxQuestion extends ListQuestion {
+  /**
+   * @type {ComponentType}
+   */
+  componentType = ComponentType.CheckboxesField
+  /**
+   * @type {string}
+   * @protected
+   */
+  _questionTemplate = PreviewComponent.PATH + 'checkboxesfield.njk'
+  listRenderId = 'checkboxField'
+  listRenderName = 'checkboxField'
+}

package/src/form/form-editor/preview/component-elements.js

@@ -0,0 +1,61 @@
+/**
+ * @implements {QuestionElements}
+ */
+export class ComponentElements {
+  /**
+   * @type {ComponentDef}
+   * @protected
+   */
+  _component
+  /**
+   * @param {ComponentDef} component
+   */
+  constructor(component) {
+    this._component = component
+  }
+
+  /**
+   * @protected
+   * @returns {BaseSettings}
+   */
+  _getValues() {
+    const required = this._component.options?.required ?? true
+
+    return {
+      question: this._component.title,
+      hintText: '',
+      optional: !required,
+      shortDesc: '',
+      items: [],
+      content: ''
+    }
+  }
+
+  /**
+   * @returns {BaseSettings}
+   */
+  get values() {
+    const values = this._getValues()
+    return values
+  }
+
+  /**
+   * @param {HTMLElement} _element
+   */
+  setPreviewDOM(_element) {
+    throw new Error('Not implemented')
+  }
+
+  /**
+   * @param {string} _value
+   */
+  setPreviewHTML(_value) {
+    throw new Error('Not implemented')
+  }
+}
+
+/**
+ * @import { ListenerRow, BaseSettings, QuestionElements, QuestionBaseModel, GovukFieldset, DefaultComponent, QuestionRenderer } from '~/src/form/form-editor/preview/types.js'
+ * @import { FormComponentsDef, ContentComponentsDef, ComponentDef } from '~/src/components/types.js'
+ * @import { ListElement, ListItemReadonly } from '~/src/form/form-editor/types.js'
+ */

package/src/form/form-editor/preview/constants.js

@@ -0,0 +1 @@
+export const HIGHLIGHT_CLASS = 'highlight'

package/src/form/form-editor/preview/content.js

@@ -0,0 +1,93 @@
+import { ComponentElements } from '~/src/form/form-editor/preview/component-elements.js'
+import { PreviewComponent } from '~/src/form/form-editor/preview/preview.js'
+
+/**
+ * @implements {QuestionElements}
+ */
+export class ContentElements extends ComponentElements {
+  /**
+   * @type {Exclude<ContentComponentsDef, ListComponent>}
+   * @protected
+   */
+  _component
+  /**
+   * @param {Exclude<ContentComponentsDef, ListComponent>} component
+   */
+  constructor(component) {
+    super(component)
+    this._component = component
+  }
+
+  /**
+   * @protected
+   * @returns {BaseSettings}
+   */
+  _getValues() {
+    return {
+      ...super._getValues(),
+      content: this._component.content
+    }
+  }
+}
+
+/**
+ * @abstract
+ * @class Content
+ * @classdesc
+ * Base of Content preview classes
+ */
+export class Content extends PreviewComponent {
+  /**
+   * @type {string}
+   * @protected
+   */
+  _content
+
+  /**
+   * @param {QuestionElements} htmlElements
+   * @param {QuestionRenderer} questionRenderer
+   */
+  constructor(htmlElements, questionRenderer) {
+    super(htmlElements, questionRenderer)
+    const { content } = htmlElements.values
+
+    this._content = content
+  }
+
+  /**
+   * @returns {QuestionBaseModel}
+   * @protected
+   */
+  _renderInput() {
+    return {
+      ...super._renderInput(),
+      content: this.content
+    }
+  }
+
+  /**
+   * @param {string} value
+   * @protected
+   */
+  _setContent(value) {
+    this._content = value
+  }
+
+  /**
+   * @returns {string}
+   */
+  get content() {
+    return this._content
+  }
+
+  set content(value) {
+    this._setContent(value)
+    this.render()
+  }
+}
+
+/**
+ * @import { ListenerRow, BaseSettings, QuestionElements, QuestionBaseModel, GovukFieldset, DefaultComponent, QuestionRenderer } from '~/src/form/form-editor/preview/types.js'
+ * @import { FormComponentsDef, ListComponent, ContentComponentsDef, ComponentDef } from '~/src/components/types.js'
+ * @import { ListElement, ListItemReadonly } from '~/src/form/form-editor/types.js'
+ */