@defra/forms-model 3.0.481 → 3.0.482

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

@@ -0,0 +1,284 @@
+import { ComponentType } from '~/src/components/enums.js'
+import { HIGHLIGHT_CLASS } from '~/src/form/form-editor/preview/constants.js'
+import { ContentElements } from '~/src/form/form-editor/preview/content.js'
+import { mapComponentToPreviewQuestion } from '~/src/form/form-editor/preview/helpers.js'
+import { Markdown } from '~/src/form/form-editor/preview/markdown.js'
+import { hasComponents } from '~/src/pages/helpers.js'
+/**
+ * @type {QuestionRenderer}
+ */
+const questionRenderer = {
+  /**
+   * @param {string} _questionTemplate
+   * @param {QuestionBaseModel} _questionBaseModel
+   */
+  render(_questionTemplate, _questionBaseModel) {
+    //
+  }
+}
+
+/**
+ * @implements {PageOverviewElements}
+ */
+export class PagePreviewElements {
+  /**
+   * @type {Page}
+   * @private
+   */
+  _page
+  /**
+   * @param {Page} page
+   */
+  constructor(page) {
+    this._page = page
+  }
+
+  get heading() {
+    return this._page.title
+  }
+
+  get guidance() {
+    if (!hasComponents(this._page) || !this._page.components.length) {
+      return ''
+    }
+
+    const [possibleGuidanceComponent] = this._page.components
+
+    return possibleGuidanceComponent.type === ComponentType.Markdown
+      ? possibleGuidanceComponent.content
+      : ''
+  }
+}
+
+/**
+ * @implements {PagePreviewPanelMacro}
+ */
+export class PreviewPageController {
+  static PATH = 'preview-controllers/'
+  /**
+   * @type {string}
+   * @protected
+   */
+  _pageTemplate = PreviewPageController.PATH + 'page-controller.njk'
+  /**
+   * @protected
+   * @type {Question[]}
+   */
+  _components = []
+  /**
+   * @type {string}
+   */
+  #title = ''
+  /**
+   *
+   * @type {PageRenderer}
+   */
+  #pageRenderer
+  /**
+   * @type { undefined | 'title' | 'guidance'}
+   * @protected
+   */
+  _highlighted = undefined
+  /**
+   * @type {string}
+   * @private
+   */
+  _guidanceText = ''
+  /**
+   * @type {Markdown}
+   * @private
+   */
+  _emptyGuidance = PreviewPageController.createGuidanceComponent()
+  /**
+   *
+   * @type {Markdown}
+   * @protected
+   */
+  _guidanceComponent
+
+  /**
+   * @type {boolean}
+   * @private
+   */
+  _showGuidance = false
+  /**
+   * @param {ComponentDef[]} components
+   * @param {PageOverviewElements} elements
+   * @param {FormDefinition} definition
+   * @param {PageRenderer} renderer
+   */
+  constructor(components, elements, definition, renderer) {
+    const questions = components.map(
+      mapComponentToPreviewQuestion(questionRenderer, definition)
+    )
+    const firstQuestion = /** @type { Markdown | undefined | Question }  */ (
+      questions.shift()
+    )
+
+    this._guidanceComponent =
+      PreviewPageController.getOrCreateGuidanceComponent(firstQuestion)
+    this._guidanceText = elements.guidance
+    this._components = this.#constructComponents(firstQuestion, questions)
+    this.#title = elements.heading
+    this.#pageRenderer = renderer
+  }
+
+  /**
+   * @param { Question | Markdown | undefined} firstQuestion
+   * @param {Question[]} questions
+   * @returns {Question[]}
+   */
+  #constructComponents(firstQuestion, questions) {
+    return firstQuestion instanceof Markdown || firstQuestion === undefined
+      ? questions
+      : [firstQuestion, ...questions]
+  }
+
+  /**
+   * @returns {Markdown[]}
+   * @private
+   */
+  get _guidanceComponents() {
+    if (this._guidanceText.length) {
+      return [this._guidanceComponent]
+    }
+    if (this._highlighted === 'guidance') {
+      return [this._emptyGuidance]
+    }
+    return []
+  }
+
+  /**
+   * @returns {PagePreviewComponent[]}
+   */
+  get components() {
+    const componentsWithGuidance = /** @type {Question[]} */ ([
+      ...this._guidanceComponents,
+      ...this._components
+    ])
+
+    return componentsWithGuidance.map((component) => ({
+      model: component.renderInput,
+      questionType: component.componentType
+    }))
+  }
+
+  set guidanceText(text) {
+    this._guidanceText = text
+    this._guidanceComponent.content = text
+    this.render()
+  }
+
+  get guidanceText() {
+    return this._guidanceText
+  }
+
+  get guidance() {
+    return {
+      text: this.guidanceText,
+      classes: this._highlighted === 'guidance' ? 'highlight' : ''
+    }
+  }
+
+  /**
+   * @private
+   * @returns {string}
+   */
+  _fallBackTitle() {
+    return this._components[0]?.question ?? ''
+  }
+
+  /**
+   * @returns {{ text: string, classes: string }}
+   */
+  get pageTitle() {
+    return {
+      text: this.title,
+      classes: this._highlighted === 'title' ? HIGHLIGHT_CLASS : ''
+    }
+  }
+
+  render() {
+    this.#pageRenderer.render(this._pageTemplate, this)
+  }
+
+  /**
+   * @returns {string}
+   */
+  get title() {
+    return this.#title.length ? this.#title : this._fallBackTitle()
+  }
+
+  /**
+   * @param {string} value
+   */
+  set title(value) {
+    this.#title = value
+    this.render()
+  }
+
+  highlightTitle() {
+    this.setHighLighted('title')
+  }
+
+  /**
+   * Creates a dummy component for when guidance is highlighted
+   * but no guidance text exists
+   * @returns {Markdown}
+   */
+  static createGuidanceComponent() {
+    const guidanceElement = new ContentElements({
+      type: ComponentType.Markdown,
+      title: 'Guidance component',
+      name: 'guidanceComponent',
+      content: 'Guidance text',
+      options: {}
+    })
+    const guidanceComponent = new Markdown(guidanceElement, questionRenderer)
+
+    // the dummy component should always be highlighted
+    guidanceComponent.highlightContent()
+    return guidanceComponent
+  }
+
+  /**
+   * Helper method to return the guidance or a new one
+   * @param { Markdown | Question | undefined } guidanceComponent
+   * @returns {Markdown}
+   * @private
+   */
+  static getOrCreateGuidanceComponent(guidanceComponent) {
+    if (guidanceComponent instanceof Markdown) {
+      return guidanceComponent
+    }
+    return PreviewPageController.createGuidanceComponent()
+  }
+
+  highlightGuidance() {
+    this._guidanceComponent.highlightContent()
+    this.setHighLighted('guidance')
+  }
+
+  /**
+   * @param {'title'|'guidance'} highlightSection
+   */
+  setHighLighted(highlightSection) {
+    this._highlighted = highlightSection
+    this.render()
+  }
+
+  clearHighlight() {
+    this._highlighted = undefined
+
+    this._guidanceComponent.unHighlightContent()
+    this.render()
+  }
+}
+
+/**
+ * @import { PageRenderer, PageOverviewElements, QuestionRenderer, QuestionBaseModel } from '~/src/form/form-editor/preview/types.js'
+ * @import { Question } from '~/src/form/form-editor/preview/question.js'
+ * @import { FormDefinition, Page } from '~/src/form/form-definition/types.js'
+ * @import { ComponentDef, MarkdownComponent } from '~/src/components/types.js'
+ * @import { PagePreviewComponent, PagePreviewPanelMacro } from '~/src/form/form-editor/macros/types.js'
+ */

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

@@ -1,10 +1,16 @@
+import { ComponentType } from '~/src/components/enums.js'
 import { FieldsetQuestion } from '~/src/form/form-editor/preview/fieldset-question.js'
-import { Question } from '~/src/form/form-editor/preview/question.js'
+import { PreviewComponent } from '~/src/form/form-editor/preview/preview.js'
+
 export class DateInputQuestion extends FieldsetQuestion {
+  /**
+   * @type {ComponentType}
+   */
+  componentType = ComponentType.DatePartsField
   /**
    * @type {string}
    * @protected
    */
-  _questionTemplate = Question.PATH + 'date-input.njk'
+  _questionTemplate = PreviewComponent.PATH + 'date-input.njk'
   _fieldName = 'dateInput'
 }

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

@@ -1,6 +1,12 @@
+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 EmailAddressQuestion extends Question {
-  _questionTemplate = Question.PATH + 'emailaddressfield.njk'
+  /**
+   * @type {ComponentType}
+   */
+  componentType = ComponentType.EmailAddressField
+  _questionTemplate = PreviewComponent.PATH + 'emailaddressfield.njk'
   _fieldName = 'emailAddressField'
 }

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

@@ -1,3 +1,4 @@
+import { ComponentType } from '~/src/components/enums.js'
 import { Question } from '~/src/form/form-editor/preview/question.js'
 
 /**
@@ -5,6 +6,11 @@ import { Question } from '~/src/form/form-editor/preview/question.js'
  * @abstract
  */
 export class FieldsetQuestion extends Question {
+  /**
+   * @type {ComponentType}
+   */
+  componentType = ComponentType.TextField
+
   get renderInput() {
     return {
       id: this._fieldName,

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

@@ -0,0 +1,95 @@
+import { ComponentType } from '~/src/components/enums.js'
+import { AutocompleteListQuestion } from '~/src/form/form-editor/preview/autocomplete.js'
+import { CheckboxQuestion } from '~/src/form/form-editor/preview/checkbox.js'
+import { ComponentElements } from '~/src/form/form-editor/preview/component-elements.js'
+import { ContentElements } from '~/src/form/form-editor/preview/content.js'
+import { DateInputQuestion } from '~/src/form/form-editor/preview/date-input.js'
+import { EmailAddressQuestion } from '~/src/form/form-editor/preview/email-address.js'
+import { ListQuestion } from '~/src/form/form-editor/preview/list.js'
+import { LongAnswerQuestion } from '~/src/form/form-editor/preview/long-answer.js'
+import { Markdown } from '~/src/form/form-editor/preview/markdown.js'
+import { MonthYearQuestion } from '~/src/form/form-editor/preview/month-year.js'
+import { NumberOnlyQuestion } from '~/src/form/form-editor/preview/number-only.js'
+import { PhoneNumberQuestion } from '~/src/form/form-editor/preview/phone-number.js'
+import { RadioQuestion } from '~/src/form/form-editor/preview/radio.js'
+import { SelectQuestion } from '~/src/form/form-editor/preview/select.js'
+import { ShortAnswerQuestion } from '~/src/form/form-editor/preview/short-answer.js'
+import { SupportingEvidenceQuestion } from '~/src/form/form-editor/preview/supporting-evidence.js'
+import { UkAddressQuestion } from '~/src/form/form-editor/preview/uk-address.js'
+import { YesNoQuestion } from '~/src/form/form-editor/preview/yes-no.js'
+import { findDefinitionListFromComponent } from '~/src/form/utils/list.js'
+import {
+  ListComponentElements,
+  QuestionComponentElements,
+  hasContentField,
+  hasInputField,
+  hasListField,
+  hasSelectionFields
+} from '~/src/index.js'
+
+/**
+ * @type {Record<ComponentType, typeof PreviewComponent>}
+ */
+const InputFieldComponentDictionary = {
+  [ComponentType.TextField]: ShortAnswerQuestion,
+  [ComponentType.Details]: ShortAnswerQuestion,
+  [ComponentType.InsetText]: ShortAnswerQuestion,
+  [ComponentType.Html]: ShortAnswerQuestion,
+  [ComponentType.Markdown]: Markdown,
+  [ComponentType.List]: ListQuestion,
+  [ComponentType.EmailAddressField]: EmailAddressQuestion,
+  [ComponentType.NumberField]: NumberOnlyQuestion,
+  [ComponentType.MultilineTextField]: LongAnswerQuestion,
+  [ComponentType.TelephoneNumberField]: PhoneNumberQuestion,
+  [ComponentType.MonthYearField]: MonthYearQuestion,
+  [ComponentType.DatePartsField]: DateInputQuestion,
+  [ComponentType.UkAddressField]: UkAddressQuestion,
+  [ComponentType.AutocompleteField]: AutocompleteListQuestion,
+  [ComponentType.RadiosField]: RadioQuestion,
+  [ComponentType.CheckboxesField]: CheckboxQuestion,
+  [ComponentType.SelectField]: SelectQuestion,
+  [ComponentType.YesNoField]: YesNoQuestion,
+  [ComponentType.FileUploadField]: SupportingEvidenceQuestion
+}
+
+/**
+ * @param {QuestionRenderer} questionRenderer
+ * @param {FormDefinition} definition
+ * @returns {(component: ComponentDef) => Question}
+ */
+export function mapComponentToPreviewQuestion(questionRenderer, definition) {
+  return /** @type {(component: ComponentDef) => Question} */ (
+    (component) => {
+      /**
+       * @type {QuestionElements}
+       */
+      let questionElements
+
+      if (hasSelectionFields(component) && hasListField(component)) {
+        const list = findDefinitionListFromComponent(component, definition)
+        questionElements = new ListComponentElements(component, list)
+      } else if (
+        hasInputField(component) ||
+        component.type === ComponentType.YesNoField
+      ) {
+        questionElements = new QuestionComponentElements(component)
+      } else if (hasContentField(component)) {
+        questionElements = new ContentElements(component)
+      } else {
+        questionElements = new ComponentElements(component)
+      }
+
+      const QuestionConstructor = InputFieldComponentDictionary[component.type]
+
+      return new QuestionConstructor(questionElements, questionRenderer)
+    }
+  )
+}
+
+/**
+ * @import { QuestionElements, QuestionRenderer } from '~/src/form/form-editor/preview/types.js'
+ * @import { Question } from '~/src/form/form-editor/preview/question.js'
+ * @import { PreviewComponent } from '~/src/form/form-editor/preview/preview.js'
+ * @import { Item, FormDefinition } from '~/src/form/form-definition/types.js'
+ * @import { FormComponentsDef, ComponentDef } from '~/src/components/types.js'
+ */

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

@@ -1,17 +1,23 @@
 export * from '~/src/form/form-editor/preview/autocomplete.js'
+export * from '~/src/form/form-editor/preview/checkbox.js'
 export * from '~/src/form/form-editor/preview/checkbox-sortable.js'
 export * from '~/src/form/form-editor/preview/date-input.js'
 export * from '~/src/form/form-editor/preview/email-address.js'
 export * from '~/src/form/form-editor/preview/list.js'
 export * from '~/src/form/form-editor/preview/list-sortable.js'
+export * from '~/src/form/form-editor/preview/markdown.js'
 export * from '~/src/form/form-editor/preview/month-year.js'
 export * from '~/src/form/form-editor/preview/number-only.js'
 export * from '~/src/form/form-editor/preview/phone-number.js'
 export * from '~/src/form/form-editor/preview/question.js'
 export * from '~/src/form/form-editor/preview/radio.js'
 export * from '~/src/form/form-editor/preview/radio-sortable.js'
+export * from '~/src/form/form-editor/preview/select-sortable.js'
 export * from '~/src/form/form-editor/preview/short-answer.js'
+export * from '~/src/form/form-editor/preview/select.js'
+export * from '~/src/form/form-editor/preview/select-sortable.js'
 export * from '~/src/form/form-editor/preview/supporting-evidence.js'
 export * from '~/src/form/form-editor/preview/long-answer.js'
 export * from '~/src/form/form-editor/preview/uk-address.js'
 export * from '~/src/form/form-editor/preview/yes-no.js'
+export * from '~/src/form/form-editor/preview/controller/page-controller.js'

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

@@ -1,9 +1,14 @@
-import { Question } from '~/src/form/form-editor/preview/question.js'
+import { ComponentType } from '~/src/components/enums.js'
+import { PreviewComponent } from '~/src/form/form-editor/preview/preview.js'
+import {
+  Question,
+  QuestionComponentElements
+} from '~/src/form/form-editor/preview/question.js'
 
 const DefaultListConst = {
   TextElementId: 'radioText',
   HintElementId: 'radioHint',
-  Template: Question.PATH + 'radios.njk',
+  Template: PreviewComponent.PATH + 'radios.njk',
   Input: 'listInput',
   RenderName: 'listInputField'
 }
@@ -26,7 +31,59 @@ export function listsElementToMap(listElements) {
   return new Map(entries)
 }
 
+/**
+ * @param {Item} item
+ * @returns {ListElement}
+ */
+export function listItemToListElement(item) {
+  return {
+    text: item.text,
+    label: {
+      text: item.text,
+      classes: ''
+    },
+    value: item.value,
+    id: item.id ?? '',
+    hint: item.hint
+  }
+}
+
+/**
+ * @implements {QuestionElements}
+ */
+export class ListComponentElements extends QuestionComponentElements {
+  /**
+   * @type {List}
+   * @protected
+   */
+  _list
+
+  /**
+   * @param {SelectionComponentsDef} component
+   * @param {List} list
+   */
+  constructor(component, list) {
+    super(component)
+    this._list = list
+  }
+
+  /**
+   * @returns {BaseSettings}
+   * @protected
+   */
+  _getValues() {
+    return {
+      ...super._getValues(),
+      items: this._list.items.map(listItemToListElement)
+    }
+  }
+}
+
 export class ListQuestion extends Question {
+  /**
+   * @type {ComponentType}
+   */
+  componentType = ComponentType.List
   /**
    * @type {string}
    * @protected
@@ -207,5 +264,7 @@ export class ListQuestion extends Question {
 
 /**
  * @import { ListElement, ListItemReadonly } from '~/src/form/form-editor/types.js'
- * @import { ListElements, QuestionRenderer, DefaultComponent, GovukFieldset } from '~/src/form/form-editor/preview/types.js'
+ * @import { SelectionComponentsDef, ListComponentsDef } from '~/src/components/types.js'
+ * @import { List, Item } from '~/src/form/form-definition/types.js'
+ * @import { ListElements, QuestionRenderer, DefaultComponent, GovukFieldset, BaseSettings, QuestionElements } from '~/src/form/form-editor/preview/types.js'
  */

package/src/form/form-editor/preview/long-answer.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 LongAnswerQuestion extends Question {
+  /**
+   * @type {ComponentType}
+   */
+  componentType = ComponentType.MultilineTextField
   /**
    * @type {string}
    * @protected
    */
-  _questionTemplate = Question.PATH + 'textarea.njk'
+  _questionTemplate = PreviewComponent.PATH + 'textarea.njk'
   /**
    * @type {string}
    * @protected

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

@@ -0,0 +1,50 @@
+import { ComponentType } from '~/src/components/enums.js'
+import { Content } from '~/src/form/form-editor/preview/content.js'
+import { PreviewComponent } from '~/src/form/form-editor/preview/preview.js'
+import { markdownToHtml } from '~/src/utils/markdown.js'
+
+/**
+ * @class Markdown
+ * @classdesc
+ * Base of Content preview classes
+ */
+export class Markdown extends Content {
+  /**
+   * @type {string}
+   * @protected
+   */
+  _fieldName = 'markdown'
+  /**
+   * @type {ComponentType}
+   */
+  componentType = ComponentType.Markdown
+
+  /**
+   * @type {string}
+   * @protected
+   */
+  _questionTemplate = PreviewComponent.PATH + 'markdown.njk'
+  /**
+   * @param {QuestionElements} htmlElements
+   * @param {QuestionRenderer} questionRenderer
+   */
+  constructor(htmlElements, questionRenderer) {
+    super(htmlElements, questionRenderer)
+    const { content } = htmlElements.values
+    this._content = markdownToHtml(content)
+  }
+
+  /**
+   * @param {string} value
+   * @protected
+   */
+  _setContent(value) {
+    super._setContent(markdownToHtml(value))
+  }
+}
+
+/**
+ * @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/month-year.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 MonthYearQuestion extends FieldsetQuestion {
+  /**
+   * @type {ComponentType}
+   */
+  componentType = ComponentType.MonthYearField
   /**
    * @type {string}
    * @protected
    */
-  _questionTemplate = Question.PATH + 'monthyearfield.njk'
+  _questionTemplate = PreviewComponent.PATH + 'monthyearfield.njk'
   _fieldName = 'monthYear'
 
   /**

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

@@ -1,6 +1,11 @@
+import { ComponentType } from '~/src/components/enums.js'
 import { Question } from '~/src/form/form-editor/preview/question.js'
 
 export class NumberOnlyQuestion extends Question {
+  /**
+   * @type {ComponentType}
+   */
+  componentType = ComponentType.NumberField
   /**
    * @returns {Partial<QuestionBaseModel>}
    */

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

@@ -1,7 +1,13 @@
+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 PhoneNumberQuestion extends Question {
-  _questionTemplate = Question.PATH + 'telephonenumberfield.njk'
+  /**
+   * @type {ComponentType}
+   */
+  componentType = ComponentType.TelephoneNumberField
+  _questionTemplate = PreviewComponent.PATH + 'telephonenumberfield.njk'
   _fieldName = 'phoneNumberField'
 }