@defra/forms-model 3.0.567 → 3.0.569

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
 }

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

@@ -30,6 +30,11 @@ export interface FormEditor {
    */
   dateSub: string
 
+  /**
+   * The sub-type of location
+   */
+  locationSub: string
+
   /**
    * The sub-type of lists
    */
@@ -60,6 +65,16 @@ export interface FormEditor {
    */
   shortDescription: string
 
+  /**
+   * The value of checkbox to reveal instruction text field
+   */
+  giveInstructions: string
+
+  /**
+   * The instruction text for location components (optional)
+   */
+  instructionText: string
+
   /**
    * The value of checkbox to reveal heading and guidance section
    */
@@ -283,7 +298,12 @@ export interface FormEditor {
 
 export type FormEditorInputPage = Pick<
   FormEditor,
-  'pageType' | 'questionType' | 'writtenAnswerSub' | 'dateSub' | 'listSub'
+  | 'pageType'
+  | 'questionType'
+  | 'writtenAnswerSub'
+  | 'dateSub'
+  | 'locationSub'
+  | 'listSub'
 >
 
 export type FormEditorInputCheckAnswersSettings = Pick<
@@ -328,6 +348,8 @@ export type FormEditorInputQuestion = Pick<
   | 'listItemsData'
   | 'jsEnabled'
   | 'usePostcodeLookup'
+  | 'giveInstructions'
+  | 'instructionText'
 >
 
 export type FormEditorInputPageSettings = Pick<
@@ -522,6 +544,7 @@ export type GovukStringField = Omit<GovukField, 'value'> & { value: string }
 export interface FormEditorGovukField {
   question?: GovukField
   hintText?: GovukField
+  instructionText?: GovukField
   questionOptional?: GovukField
   shortDescription?: GovukField
   fileTypes?: GovukField