@defra/forms-model 3.0.563 → 3.0.565

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

@@ -2,6 +2,7 @@ import { ComponentType } from '~/src/components/enums.js'
 import { autoCompleteOptionsSchema } from '~/src/form/form-editor/index.js'
 import { PreviewComponent } from '~/src/form/form-editor/preview/preview.js'
 import { Question } from '~/src/form/form-editor/preview/question.js'
+import { buildCombinedId } from '~/src/form/form-editor/preview/utils.js'
 
 export class AutocompleteListQuestion extends Question {
   /**
@@ -68,7 +69,7 @@ export class AutocompleteQuestion extends AutocompleteListQuestion {
 
   get renderInput() {
     return {
-      id: this._fieldName,
+      id: buildCombinedId(this._fieldName, this._id),
       name: this._fieldName,
       attributes: { 'data-module': 'govuk-accessible-autocomplete' },
       hint: this.hint,

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

@@ -34,6 +34,7 @@ export class PreviewPageController extends PreviewPageControllerBase {
     const questions = components.map(
       mapComponentToPreviewQuestion(questionRenderer, definition)
     )
+
     const firstQuestion = /** @type { Markdown | undefined | Question }  */ (
       questions.shift()
     )

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

@@ -1,6 +1,7 @@
 import { ComponentType } from '~/src/components/enums.js'
 import { HIGHLIGHT_CLASS } from '~/src/form/form-editor/preview/constants.js'
 import { Question } from '~/src/form/form-editor/preview/question.js'
+import { buildCombinedId } from '~/src/form/form-editor/preview/utils.js'
 
 /**
  * Simple extension of Question that uses fieldset instead of label - not exported
@@ -12,9 +13,13 @@ export class FieldsetQuestion extends Question {
    */
   componentType = ComponentType.TextField
 
-  get renderInput() {
+  /**
+   * @protected
+   * @returns {QuestionBaseModel}
+   */
+  _renderInput() {
     return {
-      id: this._fieldName,
+      id: buildCombinedId(this._fieldName, this._id),
       name: this._fieldName,
       fieldset: this.fieldSet,
       hint: this.hint,
@@ -23,3 +28,7 @@ export class FieldsetQuestion extends Question {
     }
   }
 }
+
+/**
+ * @import { QuestionBaseModel } from '~/src/form/form-editor/macros/types.js'
+ */

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

@@ -26,7 +26,10 @@ import { RadioQuestion } from '~/src/form/form-editor/preview/radio.js'
 import { SelectQuestion } from '~/src/form/form-editor/preview/select.js'
 import { ShortAnswerQuestion } from '~/src/form/form-editor/preview/short-answer.js'
 import { SupportingEvidenceQuestion } from '~/src/form/form-editor/preview/supporting-evidence.js'
-import { UkAddressQuestion } from '~/src/form/form-editor/preview/uk-address.js'
+import {
+  UkAddressComponentPreviewElements,
+  UkAddressQuestion
+} from '~/src/form/form-editor/preview/uk-address.js'
 import { YesNoQuestion } from '~/src/form/form-editor/preview/yes-no.js'
 import { findDefinitionListFromComponent } from '~/src/form/utils/list.js'
 /**
@@ -73,6 +76,8 @@ export function mapComponentToPreviewQuestion(questionRenderer, definition) {
       ) {
         const list = findDefinitionListFromComponent(component, definition)
         questionElements = new SelectComponentElements(component, list)
+      } else if (component.type === ComponentType.UkAddressField) {
+        questionElements = new UkAddressComponentPreviewElements(component)
       } else if (hasSelectionFields(component) && hasListField(component)) {
         const list = findDefinitionListFromComponent(component, definition)
         questionElements = new ListComponentElements(component, list)

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

@@ -1,5 +1,6 @@
 import { ComponentType } from '~/src/components/enums.js'
 import { HIGHLIGHT_CLASS } from '~/src/form/form-editor/preview/constants.js'
+import { buildCombinedId } from '~/src/form/form-editor/preview/utils.js'
 
 /**
  * @abstract
@@ -139,7 +140,7 @@ export class PreviewComponent {
    */
   _renderInput() {
     return {
-      id: this._fieldName,
+      id: buildCombinedId(this._fieldName, this._id),
       name: this._fieldName,
       classes: this._highlighted ? HIGHLIGHT_CLASS : ''
     }

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

@@ -2,6 +2,7 @@ import { ComponentType } from '~/src/components/enums.js'
 import { HIGHLIGHT_CLASS } from '~/src/form/form-editor/preview/constants.js'
 import { ListSortableQuestion } from '~/src/form/form-editor/preview/list-sortable.js'
 import { PreviewComponent } from '~/src/form/form-editor/preview/preview.js'
+import { buildCombinedId } from '~/src/form/form-editor/preview/utils.js'
 
 export class SelectSortableQuestion extends ListSortableQuestion {
   _questionTemplate = PreviewComponent.PATH + 'selectfield.njk'
@@ -34,7 +35,7 @@ export class SelectSortableQuestion extends ListSortableQuestion {
     const highlightedClass = this._highlighted ? HIGHLIGHT_CLASS : ''
 
     return {
-      id: this._fieldName,
+      id: buildCombinedId(this._fieldName, this._id),
       name: this._fieldName,
       hint: this.hint,
       label: this.label,

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

@@ -2,6 +2,7 @@ import { ComponentType } from '~/src/components/enums.js'
 import { HIGHLIGHT_CLASS } from '~/src/form/form-editor/preview/constants.js'
 import { ListQuestion } from '~/src/form/form-editor/preview/list.js'
 import { PreviewComponent } from '~/src/form/form-editor/preview/preview.js'
+import { buildCombinedId } from '~/src/form/form-editor/preview/utils.js'
 
 export class SelectQuestion extends ListQuestion {
   _questionTemplate = PreviewComponent.PATH + 'selectfield.njk'
@@ -35,7 +36,7 @@ export class SelectQuestion extends ListQuestion {
     const highlightedClass = this._highlighted ? HIGHLIGHT_CLASS : ''
 
     return {
-      id: this._fieldName,
+      id: buildCombinedId(this._fieldName, this._id),
       name: this._fieldName,
       hint: this.hint,
       label: this.label,

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

@@ -23,6 +23,7 @@ export interface BaseSettings {
   items: ListElement[]
   content: string
   attributes?: Record<string, string>
+  usePostcodeLookup?: boolean
 }
 
 export interface DefaultComponent {

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

@@ -1,6 +1,31 @@
 import { ComponentType } from '~/src/components/enums.js'
 import { FieldsetQuestion } from '~/src/form/form-editor/preview/fieldset-question.js'
 import { PreviewComponent } from '~/src/form/form-editor/preview/preview.js'
+import { QuestionComponentElements } from '~/src/form/form-editor/preview/question.js'
+
+/**
+ * @implements {QuestionElements}
+ */
+export class UkAddressComponentPreviewElements extends QuestionComponentElements {
+  /**
+   * @param {UkAddressFieldComponent} component
+   */
+  constructor(component) {
+    super(component)
+    this._usePostcodeLookup = component.options.usePostcodeLookup
+  }
+
+  /**
+   * @protected
+   * @returns {BaseSettings}
+   */
+  _getValues() {
+    return {
+      ...super._getValues(),
+      usePostcodeLookup: this._usePostcodeLookup
+    }
+  }
+}
 
 export class UkAddressQuestion extends FieldsetQuestion {
   /**
@@ -9,8 +34,41 @@ export class UkAddressQuestion extends FieldsetQuestion {
   componentType = ComponentType.UkAddressField
   _questionTemplate = PreviewComponent.PATH + 'ukaddressfield.njk'
   _fieldName = 'addressField'
+  _usePostcodeLookup = false
+
+  /**
+   * @param {QuestionElements} htmlElements
+   * @param {QuestionRenderer} questionRenderer
+   */
+  constructor(htmlElements, questionRenderer) {
+    super(htmlElements, questionRenderer)
+    this._usePostcodeLookup = htmlElements.values.usePostcodeLookup ?? false
+  }
+
+  get usePostcodeLookup() {
+    return this._usePostcodeLookup
+  }
+
+  /**
+   * @param {boolean} val
+   */
+  set usePostcodeLookup(val) {
+    this._usePostcodeLookup = val
+    this.render()
+  }
+
+  /**
+   * @protected
+   */
+  _renderInput() {
+    return {
+      ...super._renderInput(),
+      usePostcodeLookup: this.usePostcodeLookup
+    }
+  }
 }
 
 /**
- * @import { QuestionBaseModel } from '~/src/form/form-editor/preview/types.js'
+ * @import { BaseSettings, QuestionElements, QuestionRenderer } from '~/src/form/form-editor/preview/types.js'
+ * @import { UkAddressFieldComponent } from '~/src/components/types.js'
  */

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

@@ -0,0 +1,8 @@
+/**
+ * @param {string} fieldName
+ * @param { string | undefined } id
+ */
+export function buildCombinedId(fieldName, id) {
+  const idSuffix = id ? `-${id}` : ''
+  return `${fieldName}${idSuffix}`
+}

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

@@ -506,6 +506,17 @@ export type GovukFieldQuestionOptional = Omit<GovukField, 'name' | 'items'> & {
   ]
 }
 
+export type GovukFieldUsePostcodeLookup = Omit<GovukField, 'name' | 'items'> & {
+  name: 'usePostcodeLookup'
+  items: [
+    {
+      text?: string
+      value?: string
+      checked: boolean
+    }
+  ]
+}
+
 export type GovukStringField = Omit<GovukField, 'value'> & { value: string }
 
 export interface FormEditorGovukField {