@defra/forms-model 3.0.501 → 3.0.503

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

@@ -1,9 +1,7 @@
-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 { PreviewPageControllerBase } from '~/src/form/form-editor/preview/controller/page-controller-base.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}
  */
@@ -17,94 +15,14 @@ const questionRenderer = {
   }
 }
 
-/**
- * @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
-      : ''
-  }
-
-  get addHeading() {
-    return this._page.title.length > 0
-  }
-}
-
-/**
- * @implements {PagePreviewPanelMacro}
- */
-export class PreviewPageController {
-  static PATH = 'preview-controllers/'
-  /**
-   * @type {string}
-   * @protected
-   */
-  _pageTemplate = PreviewPageController.PATH + 'page-controller.njk'
+export class PreviewPageController extends PreviewPageControllerBase {
+  static PATH = PreviewPageControllerBase.PATH
   /**
    * @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
-   */
-  _showTitle = true
+
   /**
    * @param {ComponentDef[]} components
    * @param {PageOverviewElements} elements
@@ -112,23 +30,27 @@ export class PreviewPageController {
    * @param {PageRenderer} renderer
    */
   constructor(components, elements, definition, renderer) {
+    super(elements, 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._showTitle = elements.addHeading
-
-    this.#pageRenderer = renderer
-    this.#title = elements.heading
+    this._sectionTitle = elements.repeatQuestion ?? ''
+    this._isRepeater = elements.hasRepeater
   }
 
+  /**
+   * @type {typeof PreviewPageControllerBase.HighlightClass}
+   */
+  static HighlightClass = PreviewPageControllerBase.HighlightClass
+
   /**
    * @param { Question | Markdown | undefined} firstQuestion
    * @param {Question[]} questions
@@ -140,20 +62,6 @@ export class PreviewPageController {
       : [firstQuestion, ...questions]
   }
 
-  /**
-   * @returns {Markdown[]}
-   * @private
-   */
-  get _guidanceComponents() {
-    if (this._guidanceText.length) {
-      return [this._guidanceComponent]
-    }
-    if (this._highlighted === 'guidance') {
-      return [this._emptyGuidance]
-    }
-    return []
-  }
-
   /**
    * @returns {PagePreviewComponent[]}
    */
@@ -182,7 +90,7 @@ export class PreviewPageController {
       return false
     }
     // |_ one component and title not highlighted
-    if (this.#title.trim() === this._components[0].question.trim()) {
+    if (this._title.trim() === this._components[0]?.question.trim()) {
       return true
     }
     // titles not the same
@@ -226,60 +134,13 @@ export class PreviewPageController {
     }
   }
 
-  set guidanceText(text) {
-    this._guidanceText = text
-    this._guidanceComponent.content = text
-    this.render()
-  }
-
-  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,
-      classes: this._highlighted === 'guidance' ? 'highlight' : ''
-    }
-  }
-
-  /**
-   * @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 {boolean}
    */
   get titleAndFirstTitleSame() {
     return (
       this._components.length > 0 &&
-      this.#title.trim() === this._components[0].question.trim() &&
+      this._title.trim() === this._components[0]?.question.trim() &&
       this.components.length === 1 &&
       this._highlighted !== 'title'
     )
@@ -287,47 +148,72 @@ export class PreviewPageController {
 
   /**
    * @returns {string}
+   * @protected
    */
-  get title() {
+  _getTitle() {
     if (!this._showTitle || this.titleAndFirstTitleSame) {
       return ''
     }
-    if (this.#title.length) {
-      return this.#title
-    }
-    return 'Page heading'
+    return super._getTitle()
   }
 
   /**
-   * @param {string} value
+   * @returns {string}
+   * @protected
    */
-  set title(value) {
-    this.#title = value
-    this.render()
+  _getGuidanceText() {
+    if (!this._showTitle) {
+      return ''
+    }
+    return super._getGuidanceText()
   }
 
-  highlightTitle() {
-    this.setHighLighted('title')
+  get repeaterText() {
+    if (!this._isRepeater) {
+      return undefined
+    }
+    if (!this._sectionTitle.length) {
+      return 'Question set name'
+    }
+    return this._sectionTitle + ' 1'
   }
 
   /**
-   * Creates a dummy component for when guidance is highlighted
-   * but no guidance text exists
-   * @returns {Markdown}
+   * @returns {string|undefined}
+   * @protected
    */
-  static createGuidanceComponent() {
-    const guidanceElement = new ContentElements({
-      type: ComponentType.Markdown,
-      title: 'Guidance component',
-      name: 'guidanceComponent',
-      content: 'Guidance text',
-      options: {}
-    })
-    const guidanceComponent = new Markdown(guidanceElement, questionRenderer)
+  _getSectionTitleText() {
+    if (this._isRepeater) {
+      return this.repeaterText
+    }
+    return undefined
+  }
 
-    // the dummy component should always be highlighted
-    guidanceComponent.highlightContent()
-    return guidanceComponent
+  get repeaterButton() {
+    if (this.repeaterButtonText === undefined) {
+      return undefined
+    }
+    return {
+      classes: this._isHighlighted(
+        PreviewPageControllerBase.HighlightClass.REPEATER
+      ),
+      text: this.repeaterButtonText
+    }
+  }
+
+  get repeaterButtonText() {
+    if (!this._isRepeater) {
+      return undefined
+    }
+
+    if (this._sectionTitle === '') {
+      return '[question set name]'
+    }
+
+    const [firstToken, ...rest] = this._sectionTitle
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    const restOfStr = rest ? rest.join('') : ''
+    return firstToken.toLowerCase() + restOfStr
   }
 
   /**
@@ -340,27 +226,7 @@ export class PreviewPageController {
     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()
+    return PreviewPageControllerBase.createGuidanceComponent()
   }
 }
 

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

@@ -21,3 +21,5 @@ 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'
+export * from '~/src/form/form-editor/preview/controller/guidance-page-controller.js'
+export * from '~/src/form/form-editor/preview/controller/page-controller-base.js'

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

@@ -88,10 +88,15 @@ export interface ListElements extends QuestionElements {
   afterInputsHTML: string
 }
 
-export interface PageOverviewElements {
+export interface PagePreviewBaseElements {
   heading: string
   guidance: string
+}
+
+export interface PageOverviewElements extends PagePreviewBaseElements {
   addHeading: boolean
+  repeatQuestion: string | undefined
+  hasRepeater: boolean
 }
 
 export type PreviewQuestion =

package/src/pages/helpers.ts

@@ -1,3 +1,5 @@
+import { ComponentType } from '~/src/components/enums.js'
+import { hasFormField } from '~/src/components/helpers.js'
 import { type ComponentDef } from '~/src/components/types.js'
 import {
   type Link,
@@ -6,7 +8,6 @@ import {
   type PageQuestion,
   type PageRepeat
 } from '~/src/form/form-definition/types.js'
-import { ComponentType, hasFormField } from '~/src/index.js'
 import {
   ControllerNames,
   ControllerTypes