@defra/forms-model 3.0.491 → 3.0.493

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

@@ -26,6 +26,7 @@ export class PagePreviewElements {
    * @private
    */
   _page
+
   /**
    * @param {Page} page
    */
@@ -48,6 +49,10 @@ export class PagePreviewElements {
       ? possibleGuidanceComponent.content
       : ''
   }
+
+  get addHeading() {
+    return this._page.title.length > 0
+  }
 }
 
 /**
@@ -95,6 +100,11 @@ export class PreviewPageController {
    * @protected
    */
   _guidanceComponent
+  /**
+   * @type {boolean}
+   * @private
+   */
+  _showTitle = true
   /**
    * @param {ComponentDef[]} components
    * @param {PageOverviewElements} elements
@@ -103,11 +113,7 @@ export class PreviewPageController {
    */
   constructor(components, elements, definition, renderer) {
     const questions = components.map(
-      mapComponentToPreviewQuestion(
-        questionRenderer,
-        definition,
-        elements.heading.length > 0
-      )
+      mapComponentToPreviewQuestion(questionRenderer, definition)
     )
     const firstQuestion = /** @type { Markdown | undefined | Question }  */ (
       questions.shift()
@@ -117,6 +123,7 @@ export class PreviewPageController {
       PreviewPageController.getOrCreateGuidanceComponent(firstQuestion)
     this._guidanceText = elements.guidance
     this._components = this.#constructComponents(firstQuestion, questions)
+    this._showTitle = elements.addHeading
 
     this.#pageRenderer = renderer
     this.#title = elements.heading
@@ -156,10 +163,67 @@ export class PreviewPageController {
       ...this._components
     ])
 
-    return componentsWithGuidance.map((component) => ({
-      model: component.renderInput,
-      questionType: component.componentType
-    }))
+    return componentsWithGuidance.map((component) => {
+      return {
+        model: this._overrideComponentHeading(component),
+        questionType: component.componentType
+      }
+    })
+  }
+
+  /**
+   * @returns {boolean}
+   */
+  get showLargeTitle() {
+    const componentsLength =
+      this._components.length + this._guidanceComponents.length
+
+    if (componentsLength > 1 || this._highlighted === 'title') {
+      return false
+    }
+    // |_ one component and title not highlighted
+    if (this.#title.trim() === this._components[0].question.trim()) {
+      return true
+    }
+    // titles not the same
+
+    return !this._showTitle // add page heading deselected?
+  }
+
+  /**
+   * @param {PreviewComponent} component
+   * @returns {QuestionBaseModel}
+   */
+  _overrideComponentHeading(component) {
+    const largeTitle = this.showLargeTitle
+
+    const fieldset = component.renderInput.fieldset
+      ? {
+          fieldset: {
+            legend: {
+              ...component.renderInput.fieldset.legend,
+              classes: largeTitle
+                ? 'govuk-fieldset__legend--l'
+                : 'govuk-fieldset__legend--m'
+            }
+          }
+        }
+      : {}
+
+    const label = component.renderInput.label
+      ? {
+          label: {
+            ...component.renderInput.label,
+            classes: largeTitle ? 'govuk-label--l' : 'govuk-label--m'
+          }
+        }
+      : {}
+
+    return {
+      ...component.renderInput,
+      ...fieldset,
+      ...label
+    }
   }
 
   set guidanceText(text) {
@@ -169,9 +233,25 @@ export class PreviewPageController {
   }
 
   get guidanceText() {
+    if (!this._showTitle) {
+      return ''
+    }
     return this._guidanceText
   }
 
+  /**
+   *
+   * @param {boolean} showTitle
+   */
+  set showTitle(showTitle) {
+    this._showTitle = showTitle
+    this.render()
+  }
+
+  get showTitle() {
+    return this._showTitle
+  }
+
   get guidance() {
     return {
       text: this.guidanceText,
@@ -193,11 +273,29 @@ export class PreviewPageController {
     this.#pageRenderer.render(this._pageTemplate, this)
   }
 
+  /**
+   * @returns {boolean}
+   */
+  get titleAndFirstTitleSame() {
+    return (
+      this._components.length > 0 &&
+      this.#title.trim() === this._components[0].question.trim() &&
+      this.components.length === 1 &&
+      this._highlighted !== 'title'
+    )
+  }
+
   /**
    * @returns {string}
    */
   get title() {
-    return this.#title
+    if (!this._showTitle || this.titleAndFirstTitleSame) {
+      return ''
+    }
+    if (this.#title.length) {
+      return this.#title
+    }
+    return 'Page heading'
   }
 
   /**
@@ -269,6 +367,7 @@ export class PreviewPageController {
 /**
  * @import { PageRenderer, PageOverviewElements, QuestionRenderer, QuestionBaseModel } 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 { 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/helpers.js

@@ -5,7 +5,10 @@ import { ComponentElements } from '~/src/form/form-editor/preview/component-elem
 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 {
+  ListQuestion,
+  SelectComponentElements
+} 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'
@@ -55,14 +58,9 @@ const InputFieldComponentDictionary = {
 /**
  * @param {QuestionRenderer} questionRenderer
  * @param {FormDefinition} definition
- * @param {boolean} hasTitle
  * @returns {(component: ComponentDef) => Question}
  */
-export function mapComponentToPreviewQuestion(
-  questionRenderer,
-  definition,
-  hasTitle
-) {
+export function mapComponentToPreviewQuestion(questionRenderer, definition) {
   return /** @type {(component: ComponentDef) => Question} */ (
     (component) => {
       /**
@@ -70,18 +68,24 @@ export function mapComponentToPreviewQuestion(
        */
       let questionElements
 
-      if (hasSelectionFields(component) && hasListField(component)) {
+      if (
+        component.type === ComponentType.AutocompleteField ||
+        component.type === ComponentType.SelectField
+      ) {
+        const list = findDefinitionListFromComponent(component, definition)
+        questionElements = new SelectComponentElements(component, list)
+      } else if (hasSelectionFields(component) && hasListField(component)) {
         const list = findDefinitionListFromComponent(component, definition)
-        questionElements = new ListComponentElements(component, list, !hasTitle)
+        questionElements = new ListComponentElements(component, list)
       } else if (
         hasInputField(component) ||
         component.type === ComponentType.YesNoField
       ) {
-        questionElements = new QuestionComponentElements(component, !hasTitle)
+        questionElements = new QuestionComponentElements(component)
       } else if (hasContentField(component)) {
-        questionElements = new ContentElements(component, !hasTitle)
+        questionElements = new ContentElements(component)
       } else {
-        questionElements = new ComponentElements(component, !hasTitle)
+        questionElements = new ComponentElements(component)
       }
 
       const QuestionConstructor = InputFieldComponentDictionary[component.type]

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

@@ -61,10 +61,9 @@ export class ListComponentElements extends QuestionComponentElements {
   /**
    * @param {SelectionComponentsDef} component
    * @param {List} list
-   * @param {boolean} largeTitle
    */
-  constructor(component, list, largeTitle = true) {
-    super(component, largeTitle)
+  constructor(component, list) {
+    super(component)
     this._list = list
   }
 
@@ -80,6 +79,31 @@ export class ListComponentElements extends QuestionComponentElements {
   }
 }
 
+/**
+ * @implements {QuestionElements}
+ */
+export class SelectComponentElements extends ListComponentElements {
+  /**
+   * @returns {BaseSettings}
+   * @protected
+   */
+  _getValues() {
+    const emptyItem = /** @type {ListElement} */ ({
+      id: 'da310b6e-2513-4d14-a7a1-63a93231891d',
+      text: '',
+      value: ''
+    })
+    const items = /** @type {ListElement[]} */ ([
+      emptyItem,
+      ...super._getValues().items
+    ])
+    return {
+      ...super._getValues(),
+      items
+    }
+  }
+}
+
 export class ListQuestion extends Question {
   /**
    * @type {ComponentType}
@@ -114,8 +138,9 @@ export class ListQuestion extends Question {
   }
 
   /**
+   * @protected
    * @returns {{
-   *  formGroup?: {afterInputs: {html: string}};
+   *  formGroup?: FormGroupAfterInput;
    *  hint: DefaultComponent;
    *  name: string;
    *  fieldset?: GovukFieldset;
@@ -123,19 +148,18 @@ export class ListQuestion extends Question {
    *  items: ListItemReadonly[]
    * }}
    */
-  get renderInput() {
-    const afterInputs =
-      /** @type {{ formGroup?: { afterInputs: { html: string } } }} */ (
-        this.list.length
-          ? {}
-          : {
-              formGroup: {
-                afterInputs: {
-                  html: this._listElements.afterInputsHTML
-                }
+  _renderInput() {
+    const afterInputs = /** @type {{ formGroup?: FormGroupAfterInput }} */ (
+      this.list.length
+        ? {}
+        : {
+            formGroup: {
+              afterInputs: {
+                html: this._listElements.afterInputsHTML
               }
             }
-      )
+          }
+    )
 
     return {
       id: this.listRenderId,
@@ -147,6 +171,20 @@ export class ListQuestion extends Question {
     }
   }
 
+  /**
+   * @returns {{
+   *  formGroup?: FormGroupAfterInput;
+   *  hint: DefaultComponent;
+   *  name: string;
+   *  fieldset?: GovukFieldset;
+   *  id: string;
+   *  items: ListItemReadonly[]
+   * }}
+   */
+  get renderInput() {
+    return this._renderInput()
+  }
+
   /**
    *
    * @param {ListElement} listElement
@@ -174,9 +212,10 @@ export class ListQuestion extends Question {
   }
 
   /**
+   * @protected
    * @returns {ListItemReadonly[]}
    */
-  get list() {
+  _getList() {
     const iterator = /** @type {MapIterator<ListElement>} */ (
       this._list.values()
     )
@@ -195,7 +234,7 @@ export class ListQuestion extends Question {
           : undefined
       }
 
-      const text = listItem.text.length ? listItem.text : 'Item text'
+      const text = listItem.text
 
       return {
         ...listItem,
@@ -209,6 +248,22 @@ export class ListQuestion extends Question {
     })
   }
 
+  /**
+   * @returns {ListItemReadonly[]}
+   */
+  get list() {
+    const list = this._getList()
+
+    return list.map((listItem) => {
+      const text = listItem.text.length ? listItem.text : 'Item text'
+
+      return {
+        ...listItem,
+        text
+      }
+    })
+  }
+
   /**
    *
    * @param {string | undefined} id
@@ -267,5 +322,6 @@ export class ListQuestion extends Question {
  * @import { ListElement, ListItemReadonly } from '~/src/form/form-editor/types.js'
  * @import { SelectionComponentsDef, ListComponentsDef } from '~/src/components/types.js'
  * @import { List, Item } from '~/src/form/form-definition/types.js'
+ * @import { FormGroupAfterInput }  from '~/src/form/form-editor/macros/types.js'
  * @import { ListElements, QuestionRenderer, DefaultComponent, GovukFieldset, BaseSettings, QuestionElements } from '~/src/form/form-editor/preview/types.js'
  */

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

@@ -48,14 +48,13 @@ export class PreviewComponent {
    * @type {boolean}
    * @protected
    */
-  _largeTitle = true
 
   /**
    * @param {QuestionElements} htmlElements
    * @param {QuestionRenderer} questionRenderer
    */
   constructor(htmlElements, questionRenderer) {
-    const { question, optional, largeTitle } = htmlElements.values
+    const { question, optional } = htmlElements.values
 
     /**
      * @type {QuestionElements}
@@ -78,7 +77,6 @@ export class PreviewComponent {
      * @protected
      */
     this._questionRenderer = questionRenderer
-    this._largeTitle = largeTitle
   }
 
   /**
@@ -100,11 +98,9 @@ export class PreviewComponent {
    * @type {DefaultComponent}
    */
   get label() {
-    const titleClass = this._largeTitle ? 'govuk-label--l' : 'govuk-label--m'
-
     return {
       text: this.titleText,
-      classes: titleClass + this.getHighlight('question')
+      classes: 'govuk-label--l' + this.getHighlight('question')
     }
   }
 
@@ -113,14 +109,10 @@ export class PreviewComponent {
    * @type {GovukFieldset}
    */
   get fieldSet() {
-    const titleClass = this._largeTitle
-      ? 'govuk-fieldset__legend--l'
-      : 'govuk-fieldset__legend--m'
-
     return {
       legend: {
         text: this.titleText,
-        classes: titleClass + this.getHighlight('question')
+        classes: 'govuk-fieldset__legend--l' + this.getHighlight('question')
       }
     }
   }

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

@@ -14,8 +14,8 @@ export class QuestionComponentElements extends ComponentElements {
   /**
    * @param {FormComponentsDef} component
    */
-  constructor(component, largeTitle = true) {
-    super(component, largeTitle)
+  constructor(component) {
+    super(component)
     this._component = component
   }
 

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

@@ -18,7 +18,7 @@ export class SelectSortableQuestion extends ListSortableQuestion {
 
   get renderInput() {
     const afterInput =
-      /** @type {{ formGroup?: { afterInputs: { html: string } } }} */ (
+      /** @type {{ formGroup?: { afterInput: { html: string }} }} */ (
         this.list.length
           ? {}
           : {
@@ -41,3 +41,7 @@ export class SelectSortableQuestion extends ListSortableQuestion {
     }
   }
 }
+
+/**
+ * @import { FormGroupAfterInput }  from '~/src/form/form-editor/macros/types.js'
+ */

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

@@ -4,8 +4,46 @@ import { PreviewComponent } from '~/src/form/form-editor/preview/preview.js'
 
 export class SelectQuestion extends ListQuestion {
   _questionTemplate = PreviewComponent.PATH + 'selectfield.njk'
+  _fieldName = 'selectInput'
   /**
    * @type {ComponentType}
    */
   componentType = ComponentType.SelectField
+
+  /**
+   * @returns {ListItemReadonly[]}
+   */
+  get list() {
+    return this._getList()
+  }
+
+  get renderInput() {
+    const afterInput =
+      /** @type {{ formGroup?: { afterInput: { 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.list,
+      classes: this.list.length ? '' : 'govuk-visually-hidden',
+      ...afterInput
+    }
+  }
 }
+
+/**
+ * @import { ListItemReadonly } from '~/src/form/form-editor/types.js'
+ * @import { FormGroupAfterInput }  from '~/src/form/form-editor/macros/types.js'
+ */

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

@@ -16,13 +16,13 @@ import { type UkAddressQuestion } from '~/src/form/form-editor/preview/uk-addres
 import { type ListElement } from '~/src/form/form-editor/types.js'
 export { type QuestionBaseModel } from '~/src/form/form-editor/macros/types.js'
 export interface BaseSettings {
-  largeTitle: boolean
   question: string
   hintText: string
   optional: boolean
   shortDesc: string
   items: ListElement[]
   content: string
+  attributes?: Record<string, string>
 }
 
 export interface DefaultComponent {
@@ -41,19 +41,35 @@ export type ListenerRow = [
   keyof HTMLElementEventMap
 ]
 
-export interface QuestionElements {
-  readonly values: BaseSettings
+export interface DomElementsBase {
+  readonly values?: BaseSettings
+  autocompleteOptions?: string
   setPreviewHTML(value: string): void
   setPreviewDOM(element: HTMLElement): void
 }
+
+export interface QuestionElements extends DomElementsBase {
+  readonly values: BaseSettings
+}
+
 export interface AutocompleteElements extends QuestionElements {
   autocompleteOptions: string
 }
 
-export interface RenderContext {
+export interface RenderBase {
+  render(questionTemplate: string, renderContext: RenderContext): void
+}
+
+export interface QuestionRenderContext {
   model: QuestionBaseModel
 }
 
+export interface PageRenderContext {
+  params: PagePreviewPanelMacro
+}
+
+export type RenderContext = QuestionRenderContext | PageRenderContext
+
 export interface HTMLBuilder {
   buildHTML(questionTemplate: string, renderContext: RenderContext): string
 }
@@ -66,6 +82,8 @@ export interface PageRenderer {
   render(pageTemplate: string, pagePreview: PagePreviewPanelMacro): void
 }
 
+export type Renderer = QuestionRenderer | PageRenderer
+
 export interface ListElements extends QuestionElements {
   afterInputsHTML: string
 }
@@ -73,6 +91,7 @@ export interface ListElements extends QuestionElements {
 export interface PageOverviewElements {
   heading: string
   guidance: string
+  addHeading: boolean
 }
 
 export type PreviewQuestion =

package/src/stubs.ts

@@ -11,3 +11,6 @@ export { buildFileUploadPage } from '~/src/__stubs__/pages.js'
 export { buildSummaryPage } from '~/src/__stubs__/pages.js'
 export { buildQuestionPage } from '~/src/__stubs__/pages.js'
 export { buildMarkdownComponent } from '~/src/__stubs__/components.js'
+export { QuestionRendererStub } from '~/src/form/form-editor/__stubs__/preview.js'
+export { PageRendererStub } from '~/src/form/form-editor/__stubs__/preview.js'
+export { QuestionPreviewElements } from '~/src/form/form-editor/__stubs__/preview.js'