@defra/forms-model 3.0.481 → 3.0.483

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

@@ -0,0 +1,211 @@
+import { ComponentType } from '~/src/components/enums.js'
+import { HIGHLIGHT_CLASS } from '~/src/form/form-editor/preview/constants.js'
+
+/**
+ * @abstract
+ */
+export class PreviewComponent {
+  static PATH = 'preview-components/'
+  /**
+   * @abstract
+   * @type {ComponentType}
+   */
+  componentType = ComponentType.Details
+  /**
+   * @abstract
+   * @type {string}
+   * @protected
+   */
+  _questionTemplate = ''
+  /**
+   * @type { string|null }
+   * @protected
+   */
+  _highlight = null
+  /**
+   * @abstract
+   * @type {string}
+   * @protected
+   */
+  _fieldName = ''
+  /**
+   * @type {QuestionRenderer}
+   * @protected
+   */
+  _questionRenderer
+
+  /**
+   * @type {QuestionElements}
+   * @protected
+   */
+  _htmlElements
+  /**
+   * @type {boolean}
+   * @protected
+   */
+  _highlighted = false
+
+  /**
+   * @param {QuestionElements} htmlElements
+   * @param {QuestionRenderer} questionRenderer
+   */
+  constructor(htmlElements, questionRenderer) {
+    const { question, optional } = htmlElements.values
+
+    /**
+     * @type {QuestionElements}
+     * @protected
+     */
+    this._htmlElements = htmlElements
+    /**
+     * @type {string}
+     * @private
+     */
+    this._question = question
+    /**
+     * @type {boolean}
+     * @private
+     */
+    this._optional = optional
+    /**
+     *
+     * @type {QuestionRenderer}
+     * @protected
+     */
+    this._questionRenderer = questionRenderer
+  }
+
+  /**
+   * @param {string} element
+   * @returns {string}
+   * @protected
+   */
+  getHighlight(element) {
+    return this._highlight === element ? ' highlight' : ''
+  }
+
+  get titleText() {
+    const optionalText = this._optional ? ' (optional)' : ''
+    return (!this._question ? 'Question' : this._question) + optionalText
+  }
+
+  /**
+   * @protected
+   * @type {DefaultComponent}
+   */
+  get label() {
+    return {
+      text: this.titleText,
+      classes: 'govuk-label--l' + this.getHighlight('question')
+    }
+  }
+
+  /**
+   * @protected
+   * @type {GovukFieldset}
+   */
+  get fieldSet() {
+    return {
+      legend: {
+        text: this.titleText,
+        classes: 'govuk-fieldset__legend--l' + this.getHighlight('question')
+      }
+    }
+  }
+
+  /**
+   * @returns {Partial<QuestionBaseModel>}
+   */
+  get customRenderFields() {
+    return {}
+  }
+
+  /**
+   *
+   * @returns {QuestionBaseModel}
+   * @protected
+   */
+  _renderInput() {
+    return {
+      id: this._fieldName,
+      name: this._fieldName,
+      classes: this._highlighted ? HIGHLIGHT_CLASS : ''
+    }
+  }
+
+  /**
+   * @type {QuestionBaseModel}
+   */
+  get renderInput() {
+    return {
+      ...this._renderInput(),
+      ...this.customRenderFields
+    }
+  }
+
+  render() {
+    this._questionRenderer.render(this._questionTemplate, this.renderInput)
+  }
+
+  /**
+   * @type {string}
+   */
+  get question() {
+    return this._question
+  }
+
+  /**
+   * @param {string} value
+   */
+  set question(value) {
+    this._question = value
+    this.render()
+  }
+
+  get optional() {
+    return this._optional
+  }
+
+  /**
+   * @param {boolean} value
+   */
+  set optional(value) {
+    this._optional = value
+    this.render()
+  }
+
+  /**
+   * @type {string | null}
+   */
+  get highlight() {
+    return this._highlight
+  }
+
+  /**
+   * @param {string | null} value
+   */
+  set highlight(value) {
+    this._highlight = value
+    this.render()
+  }
+
+  /**
+   * no render
+   */
+  highlightContent() {
+    this._highlighted = true
+  }
+
+  /**
+   * no render
+   */
+  unHighlightContent() {
+    this._highlighted = false
+  }
+}
+
+/**
+ * @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/question.js

@@ -1,3 +1,37 @@
+import { ComponentType } from '~/src/components/enums.js'
+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 QuestionComponentElements extends ComponentElements {
+  /**
+   * @type {FormComponentsDef}
+   * @protected
+   */
+  _component
+  /**
+   * @param {FormComponentsDef} component
+   */
+  constructor(component) {
+    super(component)
+    this._component = component
+  }
+
+  /**
+   * @protected
+   * @returns {BaseSettings}
+   */
+  _getValues() {
+    return {
+      ...super._getValues(),
+      hintText: this._component.hint ?? '',
+      shortDesc: this._component.shortDescription ?? ''
+    }
+  }
+}
+
 /**
  * @class Question
  * @classdesc
@@ -8,107 +42,35 @@
  * the HTML.  Question classes should only be responsible for data and rendering as are reused in the
  * server side.
  */
-export class Question {
-  static PATH = 'preview-components/'
-
+export class Question extends PreviewComponent {
   /**
-   * @type {string}
-   * @protected
+   * @type {ComponentType}
    */
-  _questionTemplate = Question.PATH + 'textfield.njk'
+  componentType = ComponentType.TextField
+
   /**
-   * @type { string|null }
+   * @type {string}
    * @protected
    */
-  _highlight = null
+  _questionTemplate = PreviewComponent.PATH + 'textfield.njk'
   /**
    * @type {string}
    * @protected
    */
   _fieldName = 'inputField'
-  /**
-   * @type {QuestionRenderer}
-   * @protected
-   */
-  _questionRenderer
-
-  /**
-   * @type {QuestionElements}
-   * @private
-   */
-  _htmlElements
 
   /**
    * @param {QuestionElements} htmlElements
    * @param {QuestionRenderer} questionRenderer
    */
   constructor(htmlElements, questionRenderer) {
-    const { question, hintText, optional } = htmlElements.values
-
-    /**
-     * @type {QuestionElements}
-     * @protected
-     */
-    this._htmlElements = htmlElements
-    /**
-     * @type {string}
-     * @private
-     */
-    this._question = question
+    super(htmlElements, questionRenderer)
+    const { hintText } = htmlElements.values
     /**
      * @type {string}
      * @private
      */
     this._hintText = hintText
-    /**
-     * @type {boolean}
-     * @private
-     */
-    this._optional = optional
-    /**
-     *
-     * @type {QuestionRenderer}
-     * @protected
-     */
-    this._questionRenderer = questionRenderer
-  }
-
-  /**
-   * @param {string} element
-   * @returns {string}
-   * @protected
-   */
-  getHighlight(element) {
-    return this._highlight === element ? ' highlight' : ''
-  }
-
-  get titleText() {
-    const optionalText = this._optional ? ' (optional)' : ''
-    return (!this._question ? 'Question' : this._question) + optionalText
-  }
-
-  /**
-   * @protected
-   * @type {DefaultComponent}
-   */
-  get label() {
-    return {
-      text: this.titleText,
-      classes: 'govuk-label--l' + this.getHighlight('question')
-    }
-  }
-
-  /**
-   * @protected
-   * @type {GovukFieldset}
-   */
-  get fieldSet() {
-    return {
-      legend: {
-        text: this.titleText,
-        classes: 'govuk-fieldset__legend--l' + this.getHighlight('question')
-      }
-    }
   }
 
   /**
@@ -128,42 +90,11 @@ export class Question {
   }
 
   /**
-   * @returns {Partial<QuestionBaseModel>}
-   */
-  get customRenderFields() {
-    return {}
-  }
-
-  /**
-   * @type {QuestionBaseModel}
-   */
-  get renderInput() {
-    return {
-      id: this._fieldName,
-      name: this._fieldName,
-      label: this.label,
-      hint: this.hint,
-      ...this.customRenderFields
-    }
-  }
-
-  render() {
-    this._questionRenderer.render(this._questionTemplate, this.renderInput)
-  }
-
-  /**
-   * @type {string}
-   */
-  get question() {
-    return this._question
-  }
-
-  /**
-   * @param {string} value
+   * @returns {QuestionBaseModel}
+   * @protected
    */
-  set question(value) {
-    this._question = value
-    this.render()
+  _renderInput() {
+    return { ...super._renderInput(), label: this.label, hint: this.hint }
   }
 
   /**
@@ -180,36 +111,10 @@ export class Question {
     this._hintText = value
     this.render()
   }
-
-  get optional() {
-    return this._optional
-  }
-
-  /**
-   * @param {boolean} value
-   */
-  set optional(value) {
-    this._optional = value
-    this.render()
-  }
-
-  /**
-   * @type {string | null}
-   */
-  get highlight() {
-    return this._highlight
-  }
-
-  /**
-   * @param {string | null} value
-   */
-  set highlight(value) {
-    this._highlight = value
-    this.render()
-  }
 }
 
 /**
  * @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/radio-sortable.js

@@ -1,6 +1,11 @@
+import { ComponentType } from '~/src/components/enums.js'
 import { ListSortableQuestion } from '~/src/form/form-editor/preview/list-sortable.js'
-import { Question } from '~/src/index.js'
+import { PreviewComponent } from '~/src/form/form-editor/preview/preview.js'
 
 export class RadioSortableQuestion extends ListSortableQuestion {
-  _questionTemplate = Question.PATH + 'radios.njk'
+  _questionTemplate = PreviewComponent.PATH + 'radios.njk'
+  /**
+   * @type {ComponentType}
+   */
+  componentType = ComponentType.RadiosField
 }

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

@@ -1,6 +1,11 @@
+import { ComponentType } from '~/src/components/enums.js'
 import { ListQuestion } from '~/src/form/form-editor/preview/list.js'
-import { Question } from '~/src/index.js'
+import { PreviewComponent } from '~/src/form/form-editor/preview/preview.js'
 
 export class RadioQuestion extends ListQuestion {
-  _questionTemplate = Question.PATH + 'radios.njk'
+  /**
+   * @type {ComponentType}
+   */
+  componentType = ComponentType.RadiosField
+  _questionTemplate = PreviewComponent.PATH + 'radios.njk'
 }

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

@@ -0,0 +1,43 @@
+import { ListSortableQuestion } from '~/src/form/form-editor/preview/list-sortable.js'
+import { PreviewComponent } from '~/src/form/form-editor/preview/preview.js'
+import { ComponentType } from '~/src/index.js'
+
+export class SelectSortableQuestion extends ListSortableQuestion {
+  _questionTemplate = PreviewComponent.PATH + 'selectfield.njk'
+
+  get selectList() {
+    return this.list.length
+      ? [{ id: '', value: '', text: ' ' }, ...this.list]
+      : this.list
+  }
+
+  /**
+   * @type {ComponentType}
+   */
+  componentType = ComponentType.SelectField
+
+  get renderInput() {
+    const afterInput =
+      /** @type {{ formGroup?: { afterInputs: { html: string } } }} */ (
+        this.list.length
+          ? {}
+          : {
+              formGroup: {
+                afterInput: {
+                  html: this._listElements.afterInputsHTML
+                }
+              }
+            }
+      )
+
+    return {
+      id: this._fieldName,
+      name: this._fieldName,
+      hint: this.hint,
+      label: this.label,
+      items: this.selectList,
+      classes: this.list.length ? '' : 'govuk-visually-hidden',
+      ...afterInput
+    }
+  }
+}

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

@@ -0,0 +1,11 @@
+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 SelectQuestion extends ListQuestion {
+  _questionTemplate = PreviewComponent.PATH + 'selectfield.njk'
+  /**
+   * @type {ComponentType}
+   */
+  componentType = ComponentType.SelectField
+}

package/src/form/form-editor/preview/short-answer.js

@@ -1,3 +1,9 @@
+import { ComponentType } from '~/src/components/enums.js'
 import { Question } from '~/src/form/form-editor/preview/question.js'
 
-export class ShortAnswerQuestion extends Question {}
+export class ShortAnswerQuestion extends Question {
+  /**
+   * @type {ComponentType}
+   */
+  componentType = ComponentType.TextField
+}

package/src/form/form-editor/preview/supporting-evidence.js

@@ -1,11 +1,17 @@
+import { ComponentType } from '~/src/components/enums.js'
+import { PreviewComponent } from '~/src/form/form-editor/preview/preview.js'
 import { Question } from '~/src/form/form-editor/preview/question.js'
 
 export class SupportingEvidenceQuestion extends Question {
+  /**
+   * @type {ComponentType}
+   */
+  componentType = ComponentType.FileUploadField
   /**
    * @type {string}
    * @protected
    */
-  _questionTemplate = Question.PATH + 'fileuploadfield.njk'
+  _questionTemplate = PreviewComponent.PATH + 'fileuploadfield.njk'
   /**
    * @type {string}
    * @protected

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

@@ -1,3 +1,7 @@
+import {
+  type PagePreviewPanelMacro,
+  type QuestionBaseModel
+} from '~/src/form/form-editor/macros/types.js'
 import { type AutocompleteQuestion } from '~/src/form/form-editor/preview/autocomplete.js'
 import { type DateInputQuestion } from '~/src/form/form-editor/preview/date-input.js'
 import { type EmailAddressQuestion } from '~/src/form/form-editor/preview/email-address.js'
@@ -6,20 +10,18 @@ import { type LongAnswerQuestion } from '~/src/form/form-editor/preview/long-ans
 import { type PhoneNumberQuestion } from '~/src/form/form-editor/preview/phone-number.js'
 import { type Question } from '~/src/form/form-editor/preview/question.js'
 import { type RadioSortableQuestion } from '~/src/form/form-editor/preview/radio-sortable.js'
+import { type SelectSortableQuestion } from '~/src/form/form-editor/preview/select-sortable.js'
 import { type ShortAnswerQuestion } from '~/src/form/form-editor/preview/short-answer.js'
 import { type UkAddressQuestion } from '~/src/form/form-editor/preview/uk-address.js'
-import {
-  type DateItem,
-  type ListElement,
-  type ListItemReadonly
-} from '~/src/form/form-editor/types.js'
-
+import { type ListElement } from '~/src/form/form-editor/types.js'
+export { type QuestionBaseModel } from '~/src/form/form-editor/macros/types.js'
 export interface BaseSettings {
   question: string
   hintText: string
   optional: boolean
   shortDesc: string
   items: ListElement[]
+  content: string
 }
 
 export interface DefaultComponent {
@@ -32,18 +34,6 @@ export interface GovukFieldset {
   legend: DefaultComponent
 }
 
-export interface QuestionBaseModel {
-  id?: string
-  name?: string
-  label?: DefaultComponent
-  hint?: DefaultComponent
-  fieldset?: GovukFieldset
-  readonly items?: ListItemReadonly[] | DateItem[]
-  text?: string
-  formGroup?: { afterInputs: { html: string } }
-  type?: 'text' | 'number' | 'boolean'
-}
-
 export type ListenerRow = [
   HTMLInputElement | null,
   (target: HTMLInputElement, e: Event) => void,
@@ -71,10 +61,19 @@ export interface QuestionRenderer {
   render(questionTemplate: string, questionBaseModel: QuestionBaseModel): void
 }
 
+export interface PageRenderer {
+  render(pageTemplate: string, pagePreview: PagePreviewPanelMacro): void
+}
+
 export interface ListElements extends QuestionElements {
   afterInputsHTML: string
 }
 
+export interface PageOverviewElements {
+  heading: string
+  guidance: string
+}
+
 export type PreviewQuestion =
   | DateInputQuestion
   | EmailAddressQuestion
@@ -83,6 +82,7 @@ export type PreviewQuestion =
   | PhoneNumberQuestion
   | Question
   | RadioSortableQuestion
+  | SelectSortableQuestion
   | ShortAnswerQuestion
   | UkAddressQuestion
   | AutocompleteQuestion

package/src/form/form-editor/preview/uk-address.js

@@ -1,8 +1,13 @@
+import { ComponentType } from '~/src/components/enums.js'
 import { FieldsetQuestion } from '~/src/form/form-editor/preview/fieldset-question.js'
-import { Question } from '~/src/index.js'
+import { PreviewComponent } from '~/src/form/form-editor/preview/preview.js'
 
 export class UkAddressQuestion extends FieldsetQuestion {
-  _questionTemplate = Question.PATH + 'ukaddressfield.njk'
+  /**
+   * @type {ComponentType}
+   */
+  componentType = ComponentType.UkAddressField
+  _questionTemplate = PreviewComponent.PATH + 'ukaddressfield.njk'
   _fieldName = 'addressField'
 }
 

package/src/form/form-editor/preview/yes-no.js

@@ -1,12 +1,17 @@
+import { ComponentType } from '~/src/components/enums.js'
 import { FieldsetQuestion } from '~/src/form/form-editor/preview/fieldset-question.js'
-import { Question } from '~/src/index.js'
+import { PreviewComponent } from '~/src/form/form-editor/preview/preview.js'
 
 export class YesNoQuestion extends FieldsetQuestion {
+  /**
+   * @type {ComponentType}
+   */
+  componentType = ComponentType.YesNoField
   /**
    * @type {string}
    * @protected
    */
-  _questionTemplate = Question.PATH + 'radios.njk'
+  _questionTemplate = PreviewComponent.PATH + 'radios.njk'
   _fieldName = 'yesNo'
 
   /**