@defra/forms-model 3.0.567 → 3.0.568

package/dist/types/form/form-editor/preview/uk-address.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"uk-address.d.ts","sourceRoot":"","sources":["../../../../../src/form/form-editor/preview/uk-address.js"],"names":[],"mappings":"AAKA;;GAEG;AACH;IACE;;OAEG;IACH,uBAFW,uBAAuB,EAKjC;IADC,wCAA6D;CAahE;AAED;IAOE,4BAA0B;IAe1B;;OAEG;IACH,2BAFW,OAAO,EAKjB;IAVD,yBAKW,OAAO,CAHjB;IAUD;;OAEG;IACH;;;;;;;;;;;;;;MAKC;CACF;sCAGoE,yCAAyC;0CApEpE,4CAA4C;6CAqE1C,2BAA2B;iCAvEtC,qDAAqD"}
+{"version":3,"file":"uk-address.d.ts","sourceRoot":"","sources":["../../../../../src/form/form-editor/preview/uk-address.js"],"names":[],"mappings":"AAKA;;GAEG;AACH;IACE;;OAEG;IACH,uBAFW,uBAAuB,EAKjC;IADC,wCAA6D;CAahE;AAED;IAOE,4BAA0B;IAe1B;;OAEG;IACH,2BAFW,OAAO,EAKjB;IAVD,yBAKW,OAAO,CAHjB;IAUD;;OAEG;IACH;;;;;;;;;;;;;;;;;;;;;MAKC;CACF;sCAGoE,yCAAyC;0CApEpE,4CAA4C;6CAqE1C,2BAA2B;iCAvEtC,qDAAqD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@defra/forms-model",
-  "version": "3.0.567",
+  "version": "3.0.568",
   "description": "A hapi plugin providing the model for Defra forms",
   "homepage": "https://github.com/DEFRA/forms-designer/tree/main/model#readme",
   "types": "dist/types/index.d.ts",

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

@@ -85,6 +85,11 @@ export class QuestionPreviewElements {
    * @protected
    */
   _shortDesc = ''
+  /**
+   * @type {string}
+   * @protected
+   */
+  _userClasses = ''
   /**
    * @type {string}
    * @protected
@@ -111,6 +116,7 @@ export class QuestionPreviewElements {
     hintText,
     optional,
     shortDesc,
+    userClasses,
     usePostcodeLookup,
     items,
     content
@@ -119,6 +125,7 @@ export class QuestionPreviewElements {
     this._hintText = hintText
     this._optional = optional
     this._shortDesc = shortDesc
+    this._userClasses = userClasses
     this._items = items
     this._content = content
     this._usePostcodeLookup = usePostcodeLookup ?? false
@@ -133,6 +140,7 @@ export class QuestionPreviewElements {
       hintText: this._hintText,
       optional: this._optional,
       shortDesc: this._shortDesc,
+      userClasses: this._userClasses,
       usePostcodeLookup: this._usePostcodeLookup,
       items: this._items,
       content: this._content
@@ -204,11 +212,25 @@ export const baseElements = /** @type {BaseSettings} */ ({
   optional: false,
   question: 'Which quest would you like to pick?',
   hintText: 'Choose one adventure that best suits you.',
+  userClasses: '',
   shortDesc: '',
   content: '',
   largeTitle: true
 })
 
+export const numberElements = /** @type {NumberSettings} */ ({
+  items: [],
+  optional: false,
+  question: 'Which quest would you like to pick?',
+  hintText: 'Choose one adventure that best suits you.',
+  userClasses: '',
+  shortDesc: '',
+  content: '',
+  largeTitle: true,
+  prefix: '',
+  suffix: ''
+})
+
 const list1Id = '414d82a3-4cab-416a-bd54-6b86fbd51120'
 const list2Id = '801385a4-81e6-4171-96c3-6c6727d97f22'
 const list3Id = 'e6e3f621-b875-4ca3-a054-cca9149149dd'
@@ -267,8 +289,115 @@ export function buildPreviewShortAnswer(partialBaseElements, renderMock) {
   )
 }
 
+export class NumberPreviewElements {
+  /**
+   * @protected
+   */
+  _question = ''
+  /** @protected */
+  _hintText = ''
+  /** @protected */
+  _optional = false
+  /**
+   * @type {string}
+   * @protected
+   */
+  _shortDesc = ''
+  /**
+   * @type {string}
+   * @protected
+   */
+  _userClasses = ''
+  /**
+   * @type {string}
+   * @protected
+   */
+  _prefix = ''
+  /**
+   * @type {string}
+   * @protected
+   */
+  _suffix = ''
+  /**
+   * @type {string}
+   * @protected
+   */
+  _content = ''
+  /**
+   *
+   * @type {ListElement[]}
+   * @private
+   */
+  _items = []
+  /**
+   * @protected
+   * @type {boolean}
+   */
+  _usePostcodeLookup = false
+  afterInputsHTML = '<div class="govuk-inset-text">No items added yet.</div>'
+
+  /**
+   * @param {NumberSettings} baseSettings
+   */
+  constructor({
+    question,
+    hintText,
+    optional,
+    shortDesc,
+    userClasses,
+    prefix,
+    suffix,
+    usePostcodeLookup,
+    items,
+    content
+  }) {
+    this._question = question
+    this._hintText = hintText
+    this._optional = optional
+    this._shortDesc = shortDesc
+    this._userClasses = userClasses
+    this._prefix = prefix
+    this._suffix = suffix
+    this._items = items
+    this._content = content
+    this._usePostcodeLookup = usePostcodeLookup ?? false
+  }
+
+  /**
+   * @returns {NumberSettings}
+   */
+  get values() {
+    return {
+      question: this._question,
+      hintText: this._hintText,
+      optional: this._optional,
+      shortDesc: this._shortDesc,
+      userClasses: this._userClasses,
+      prefix: this._prefix,
+      suffix: this._suffix,
+      usePostcodeLookup: this._usePostcodeLookup,
+      items: this._items,
+      content: this._content
+    }
+  }
+
+  /**
+   * @param {string} _value
+   */
+  setPreviewHTML(_value) {
+    // Not implemented for server side render
+  }
+
+  /**
+   * @param {HTMLElement} _value
+   */
+  setPreviewDOM(_value) {
+    // Not implemented for server side render
+  }
+}
+
 /**
  * @import { ListElement } from  '~/src/form/form-editor/types.js'
  * @import { PagePreviewPanelMacro } from '~/src/form/form-editor/macros/types.js'
- * @import { BaseSettings, ListElements, RenderContext, QuestionBaseModel, QuestionElements, QuestionRenderer, AutocompleteElements, PageOverviewElements, PageRenderer } from  '~/src/form/form-editor/preview/types.js'
+ * @import { BaseSettings, ListElements, NumberSettings, RenderContext, QuestionBaseModel, QuestionRenderer, AutocompleteElements, PageOverviewElements, PageRenderer } from  '~/src/form/form-editor/preview/types.js'
  */

package/src/form/form-editor/index.ts

@@ -612,7 +612,10 @@ export function govukFieldValueIsString(
     'question',
     'hintText',
     'shortDescription',
-    'autoCompleteOptions'
+    'autoCompleteOptions',
+    'classes',
+    'prefix',
+    'suffix'
   ].includes(`${govukField.name}`)
 }
 

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

@@ -55,6 +55,9 @@ export interface QuestionBaseModel {
   formGroup?: FormGroupAfterInput
   type?: 'text' | 'number' | 'boolean'
   classes?: string
+  previewClasses?: string
+  prefix?: { text: string }
+  suffix?: { text: string }
 }
 
 export interface AppPreviewPanelMacro extends AppPreviewPanelTabsMacro {

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

@@ -26,6 +26,10 @@ export class ComponentElements {
       hintText: '',
       optional: !required,
       shortDesc: '',
+      userClasses:
+        this._component.options && 'classes' in this._component.options
+          ? (this._component.options.classes ?? '')
+          : '',
       items: [],
       content: ''
     }

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

@@ -19,7 +19,10 @@ import {
 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 {
+  NumberComponentPreviewElements,
+  NumberOnlyQuestion
+} from '~/src/form/form-editor/preview/number-only.js'
 import { PhoneNumberQuestion } from '~/src/form/form-editor/preview/phone-number.js'
 import { QuestionComponentElements } from '~/src/form/form-editor/preview/question.js'
 import { RadioQuestion } from '~/src/form/form-editor/preview/radio.js'
@@ -78,6 +81,8 @@ export function mapComponentToPreviewQuestion(questionRenderer, definition) {
         questionElements = new SelectComponentElements(component, list)
       } else if (component.type === ComponentType.UkAddressField) {
         questionElements = new UkAddressComponentPreviewElements(component)
+      } else if (component.type === ComponentType.NumberField) {
+        questionElements = new NumberComponentPreviewElements(component)
       } else if (hasSelectionFields(component) && hasListField(component)) {
         const list = findDefinitionListFromComponent(component, definition)
         questionElements = new ListComponentElements(component, list)

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

@@ -1,5 +1,34 @@
 import { ComponentType } from '~/src/components/enums.js'
-import { Question } from '~/src/form/form-editor/preview/question.js'
+import {
+  Question,
+  QuestionComponentElements
+} from '~/src/form/form-editor/preview/question.js'
+
+/**
+ * @implements {QuestionElements}
+ */
+export class NumberComponentPreviewElements extends QuestionComponentElements {
+  /**
+   * @param {NumberFieldComponent} component
+   */
+  constructor(component) {
+    super(component)
+    this._prefix = component.options.prefix
+    this._suffix = component.options.suffix
+  }
+
+  /**
+   * @protected
+   * @returns {NumberSettings}
+   */
+  _getValues() {
+    return {
+      ...super._getValues(),
+      prefix: this._prefix ?? '',
+      suffix: this._suffix ?? ''
+    }
+  }
+}
 
 export class NumberOnlyQuestion extends Question {
   /**
@@ -8,12 +37,14 @@ export class NumberOnlyQuestion extends Question {
   componentType = ComponentType.NumberField
 
   /**
-   * @param {QuestionElements} htmlElements
+   * @param {NumberElements} htmlElements
    * @param {QuestionRenderer} questionRenderer
    */
   constructor(htmlElements, questionRenderer) {
     super(htmlElements, questionRenderer)
     this._fieldName = 'numberField'
+    this._prefix = htmlElements.values.prefix
+    this._suffix = htmlElements.values.suffix
   }
 
   /**
@@ -24,8 +55,46 @@ export class NumberOnlyQuestion extends Question {
       type: 'number'
     }
   }
+
+  get prefix() {
+    return this._prefix
+  }
+
+  /**
+   * @param {string} val
+   */
+  set prefix(val) {
+    this._prefix = val
+    this.render()
+  }
+
+  get suffix() {
+    return this._suffix
+  }
+
+  /**
+   * @param {string} val
+   */
+  set suffix(val) {
+    this._suffix = val
+    this.render()
+  }
+
+  /**
+   * @protected
+   */
+  _renderInput() {
+    const prefixObj = this.prefix ? { prefix: { text: this.prefix } } : {}
+    const suffixObj = this.suffix ? { suffix: { text: this.suffix } } : {}
+    return {
+      ...super._renderInput(),
+      ...prefixObj,
+      ...suffixObj
+    }
+  }
 }
 
 /**
- * @import { QuestionElements, QuestionBaseModel, QuestionRenderer } from '~/src/form/form-editor/preview/types.js'
+ * @import { NumberSettings, NumberElements, QuestionBaseModel, QuestionElements, QuestionRenderer } from '~/src/form/form-editor/preview/types.js'
+ * @import { NumberFieldComponent } from '~/src/components/types.js'
  */

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

@@ -27,7 +27,8 @@ export class QuestionComponentElements extends ComponentElements {
     return {
       ...super._getValues(),
       hintText: this._component.hint ?? '',
-      shortDesc: this._component.shortDescription ?? ''
+      shortDesc: this._component.shortDescription ?? '',
+      userClasses: this._component.options.classes ?? ''
     }
   }
 }
@@ -65,12 +66,17 @@ export class Question extends PreviewComponent {
    */
   constructor(htmlElements, questionRenderer) {
     super(htmlElements, questionRenderer)
-    const { hintText } = htmlElements.values
+    const { hintText, userClasses } = htmlElements.values
     /**
      * @type {string}
      * @private
      */
     this._hintText = hintText
+    /**
+     * @type {string}
+     * @private
+     */
+    this._userClasses = userClasses
   }
 
   /**
@@ -94,7 +100,16 @@ export class Question extends PreviewComponent {
    * @protected
    */
   _renderInput() {
-    return { ...super._renderInput(), label: this.label, hint: this.hint }
+    const renderValues = {
+      ...super._renderInput(),
+      label: this.label,
+      hint: this.hint
+    }
+    return {
+      ...renderValues,
+      classes: this._userClasses,
+      previewClasses: renderValues.classes ?? ''
+    }
   }
 
   /**
@@ -111,6 +126,21 @@ export class Question extends PreviewComponent {
     this._hintText = value
     this.render()
   }
+
+  /**
+   * @type {string}
+   */
+  get userClasses() {
+    return this._userClasses
+  }
+
+  /**
+   * @param {string} value
+   */
+  set userClasses(value) {
+    this._userClasses = value
+    this.render()
+  }
 }
 
 /**

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

@@ -20,6 +20,7 @@ export interface BaseSettings {
   hintText: string
   optional: boolean
   shortDesc: string
+  userClasses: string
   items: ListElement[]
   content: string
   attributes?: Record<string, string>
@@ -58,6 +59,15 @@ export interface AutocompleteElements extends QuestionElements {
   autocompleteOptions: string
 }
 
+export interface NumberSettings extends BaseSettings {
+  prefix: string
+  suffix: string
+}
+
+export interface NumberElements extends DomElementsBase {
+  readonly values: NumberSettings
+}
+
 export interface RenderBase {
   render(questionTemplate: string, renderContext: RenderContext): void
 }