@planning-inspectorate/dynamic-forms 1.7.0 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planning-inspectorate/dynamic-forms",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "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

@@ -60,11 +60,13 @@
                             errorMessage: errors[inputField.fieldName] and {
                                 text: errors[inputField.fieldName].msg
                             },
+                            prefix: inputField.prefix,
+                            suffix: inputField.suffix,
                             value: inputField.value,
                             hint: {
                                 text: inputField.hint
                             },
-                            classes: "govuk-input-!-width-three-quarters",
+                            classes: inputField.classes or "govuk-input-!-width-three-quarters",
                             attributes: inputField.attributes
                         }) }}
                     {% endfor %}

package/src/components/multi-field-input/question.js

@@ -10,6 +10,12 @@ import { nl2br } from '../../lib/utils.js';
  * @typedef {import('../../validator/base-validator')} BaseValidator
  */
 
+/**
+ * @typedef {Object} Suffix
+ * @property {string} text
+ * @property {string} [classes] optional property, used to add classes to the suffix/prefix
+ */
+
 /**
  * @typedef {Object} InputField
  * @property {string} fieldName
@@ -18,6 +24,8 @@ import { nl2br } from '../../lib/utils.js';
  * @property {string} [formatPrefix] optional property, used by formatAnswerForSummary (eg task list display), to prefix answer
  * @property {function} [formatTextFunction] optional property, used to format the answer for display and value in question
  * @property {Record<string, string>} [attributes] optional property, used to add html attributes to the field
+ * @property {Suffix} [suffix] optional property, used to add a suffix to the field
+ * @property {Suffix} [prefix] optional property, used to add a prefix to the field
  */
 
 /**

package/src/validator/date-time-validator.js

@@ -14,9 +14,19 @@ export default class DateTimeValidator extends DateValidator {
 	 * creates an instance of a DateTimeValidator
 	 * @param {string} timeInputLabel - string representing the time fields as displayed on the UI as part of an error message
 	 * @param {string} [dateInputLabel] - string representing the date fields as displayed on the UI as part of an error message
+	 * @param {DateValidationSettings} [dateValidationSettings] - object containing rules to apply
+	 * @param {Object} [dateErrorMessages] - object containing custom date error messages to show on validation failure
 	 */
-	constructor(timeInputLabel, dateInputLabel = timeInputLabel) {
-		super(dateInputLabel);
+	constructor(
+		timeInputLabel,
+		dateInputLabel = timeInputLabel,
+		dateValidationSettings = {
+			ensureFuture: false,
+			ensurePast: false
+		},
+		dateErrorMessages
+	) {
+		super(dateInputLabel, dateValidationSettings, dateErrorMessages);
 		this.timeInputLabel = timeInputLabel;
 	}
 

package/src/validator/date-time-validator.test.js

@@ -253,10 +253,35 @@ describe('./lib/forms/custom-components/date-time/date-time-validator.js', () =>
 		assert.strictEqual(errors[`${question.fieldName}_day`].msg, 'Enter Site visit');
 		assert.strictEqual(errors[`${question.fieldName}_hour`].msg, 'Enter the site visit time');
 	});
+	it('dateErrorMessages overrides errors returned by date validator', async () => {
+		const req = {
+			body: {
+				['date-time-question_day']: undefined,
+				['date-time-question_month']: undefined,
+				['date-time-question_year']: undefined,
+				['date-time-question_hour']: undefined,
+				['date-time-question_minutes']: undefined,
+				['date-time-question_period']: ''
+			}
+		};
+
+		const errors = await _validationMappedErrors(req, question, 'Site visit', 'site visit date', {
+			emptyErrorMessage: 'Site visit date error override'
+		});
+
+		assert.strictEqual(Object.keys(errors).length, 6);
+		assert.strictEqual(errors[`${question.fieldName}_day`].msg, 'Site visit date error override');
+		assert.strictEqual(errors[`${question.fieldName}_hour`].msg, 'Enter the site visit time');
+	});
 });
 
-const _validationMappedErrors = async (req, question, inputLabel, dateInputLabel) => {
-	const dateTimeValidator = new DateTimeValidator(inputLabel, dateInputLabel);
+const _validationMappedErrors = async (req, question, inputLabel, dateInputLabel, dateErrorMessages) => {
+	const dateTimeValidator = new DateTimeValidator(
+		inputLabel,
+		dateInputLabel,
+		{ ensureFuture: false, ensurePast: false },
+		dateErrorMessages
+	);
 
 	const validationRules = dateTimeValidator.validate(question);