@planning-inspectorate/dynamic-forms 3.15.3 → 3.15.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planning-inspectorate/dynamic-forms",
-  "version": "3.15.3",
+  "version": "3.15.4",
   "description": "This package is for building GDS forms using a configuration-based approach.",
   "main": "./src/index.js",
   "type": "module",

package/src/components/multi-field-input/index.njk

@@ -56,6 +56,8 @@
                                 text: inputField.hint
                             },
                             classes: inputField.classes or "govuk-input-!-width-three-quarters",
+                            inputmode: inputField.inputmode,
+                            pattern: inputField.pattern,
                             attributes: inputField.attributes
                         }) }}
                     {% endfor %}

package/src/questions/question-props.d.ts

@@ -77,6 +77,8 @@ interface InputField {
 	prefix?: Affix; // used to add a prefix to the field
 	hint?: string;
 	classes?: string;
+	inputmode?: 'decimal' | 'numeric';
+	pattern?: string; // Used for backwards-compatibility for older iOS devices in numeric input fields
 }
 
 /*

package/test/questions.js

@@ -125,8 +125,8 @@ export const questionProps = {
 		url: 'companions',
 		label: 'Companions',
 		inputFields: [
-			{ fieldName: 'name', label: 'Name', type: COMPONENT_TYPES.TEXT_ENTRY },
-			{ fieldName: 'age', label: 'Age', type: COMPONENT_TYPES.NUMBER }
+			{ fieldName: 'name', label: 'Name' },
+			{ fieldName: 'age', label: 'Age', inputmode: 'numeric', pattern: '[0-9]*' }
 		]
 	},
 	nights: {

package/test/snapshots/companions.html

@@ -22,7 +22,7 @@
   <label class="govuk-label govuk-label" for="age">
     Age
   </label>
-  <input class="govuk-input govuk-input-!-width-three-quarters" id="age" name="age" type="text">
+  <input class="govuk-input govuk-input-!-width-three-quarters" id="age" name="age" type="text" pattern="[0-9]*" inputmode="numeric">
 </div>
 
 

package/test/utils/question-test-utils.js

@@ -80,6 +80,18 @@ export async function createAppWithQuestions(ctx, options) {
 	return server;
 }
 
+/**
+ * Returns a mock value for an input field based on its properties.
+ * @param {Object} field - An input field descriptor (not a full question)
+ * @returns {string|number}
+ */
+function mockInputFieldValue(field) {
+	if (field.inputmode === 'numeric' || field.pattern === '[0-9]*') {
+		return 1;
+	}
+	return 'test';
+}
+
 /**
  * Build a valid payload for a question.
  * @param {import('../src/questions/question-props.js').QuestionProps} q
@@ -128,7 +140,7 @@ export function mockAnswerBody(q) {
 		case COMPONENT_TYPES.MULTI_FIELD_INPUT: {
 			const res = {};
 			for (const field of q.inputFields) {
-				res[field.fieldName] = mockAnswer(field);
+				res[field.fieldName] = mockInputFieldValue(field);
 			}
 			return res;
 		}
@@ -191,7 +203,7 @@ export function mockAnswer(q) {
 			if (q.inputFields) {
 				let res = '';
 				for (const field of q.inputFields) {
-					res += mockAnswer(field) + '<br>';
+					res += mockInputFieldValue(field) + '<br>';
 				}
 				return res;
 			}

package/types/src/components/multi-field-input/question.d.ts

@@ -26,6 +26,8 @@ export class MultiFieldInputQuestion extends Question {
         prefix?: import("../../questions/question-props.d.ts").Affix;
         hint?: string;
         classes?: string;
+        inputmode?: "decimal" | "numeric";
+        pattern?: string;
     }[];
     /**
      * returns the formatted answers values to be used to build task list elements

package/types/src/components/multi-field-input/question.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["../../../../src/components/multi-field-input/question.js"],"names":[],"mappings":"AAIA;;;;;;GAMG;AAEH;;GAEG;AACH;IACC;;OAEG;IACH,8CAFW,OAAO,qCAAqC,EAAE,6BAA6B,EAarF;IAJC,wEAA8B;IAchC;;;;;;;;;;;;QAOC;IAsBD;;;;;;;;;;;;;OAaG;IACH,wDAZW,OAAO,GAEL,KAAK,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QACvB,MAAM,EAAE;YACN,IAAI,EAAE,MAAM,CAAC;YACb,IAAI,EAAE,MAAM,CAAC;YACb,kBAAkB,EAAE,MAAM,CAAC;SAC5B,CAAC;KACH,CAAC,CAkBJ;;CAyBD;;gCAvHY,OAAO,WAAW,EAAE,iBAAiB;sBACrC,OAAO,UAAU,EAAE,OAAO;8BAC1B,OAAO,mBAAmB,EAAE,eAAe;;;yBAP/B,WAAW"}
+{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["../../../../src/components/multi-field-input/question.js"],"names":[],"mappings":"AAIA;;;;;;GAMG;AAEH;;GAEG;AACH;IACC;;OAEG;IACH,8CAFW,OAAO,qCAAqC,EAAE,6BAA6B,EAarF;IAJC,wEAA8B;IAchC;;;;;;;;;;;;;;QAOC;IAsBD;;;;;;;;;;;;;OAaG;IACH,wDAZW,OAAO,GAEL,KAAK,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QACvB,MAAM,EAAE;YACN,IAAI,EAAE,MAAM,CAAC;YACb,IAAI,EAAE,MAAM,CAAC;YACb,kBAAkB,EAAE,MAAM,CAAC;SAC5B,CAAC;KACH,CAAC,CAkBJ;;CAyBD;;gCAvHY,OAAO,WAAW,EAAE,iBAAiB;sBACrC,OAAO,UAAU,EAAE,OAAO;8BAC1B,OAAO,mBAAmB,EAAE,eAAe;;;yBAP/B,WAAW"}

package/types/src/questions/question-props.d.ts

@@ -77,6 +77,8 @@ interface InputField {
 	prefix?: Affix; // used to add a prefix to the field
 	hint?: string;
 	classes?: string;
+	inputmode?: 'decimal' | 'numeric';
+	pattern?: string; // Used for backwards-compatibility for older iOS devices in numeric input fields
 }
 
 /*