@defra/forms-model 3.0.491 → 3.0.492

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

@@ -12,10 +12,9 @@ export class ContentElements extends ComponentElements {
   _component
   /**
    * @param {Exclude<ContentComponentsDef, ListComponent>} component
-   * @param {boolean} largeTitle
    */
-  constructor(component, largeTitle = true) {
-    super(component, largeTitle)
+  constructor(component) {
+    super(component)
     this._component = component
   }
 

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

@@ -55,14 +55,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) => {
       /**
@@ -72,16 +67,16 @@ export function mapComponentToPreviewQuestion(
 
       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
   }
 

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/types.ts

@@ -16,7 +16,6 @@ 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
@@ -41,19 +40,31 @@ 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 QuestionRenderContext {
   model: QuestionBaseModel
 }
 
+export interface PageRenderContext {
+  params: PagePreviewPanelMacro
+}
+
+export type RenderContext = QuestionRenderContext | PageRenderContext
+
 export interface HTMLBuilder {
   buildHTML(questionTemplate: string, renderContext: RenderContext): string
 }
@@ -66,6 +77,8 @@ export interface PageRenderer {
   render(pageTemplate: string, pagePreview: PagePreviewPanelMacro): void
 }
 
+export type Renderer = QuestionRenderer | PageRenderer
+
 export interface ListElements extends QuestionElements {
   afterInputsHTML: string
 }
@@ -73,6 +86,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'