@planning-inspectorate/dynamic-forms 3.22.0 → 3.23.0

package/package.json

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

package/src/components/number-entry/index.njk

@@ -23,9 +23,8 @@
                     id: question.fieldName,
                     name: question.fieldName,
                     value: question.value,
-                    suffix: {
-                        text: question.suffix
-                    },
+                    prefix: question.prefix,
+                    suffix: question.suffix,
                     errorMessage: errors[question.fieldName] and {
                         text: errors[question.fieldName].msg
                     },

package/src/components/number-entry/question.d.ts

@@ -2,8 +2,9 @@ export class NumberEntryQuestion extends Question {
     /**
      * @param {import('#typedefs/question-props.d.ts').NumberEntryQuestionParams} params
      */
-    constructor({ label, suffix, ...parentParams }: import("#typedefs/question-props.d.ts").NumberEntryQuestionParams);
-    suffix: string | undefined;
+    constructor({ label, prefix, suffix, ...parentParams }: import("#typedefs/question-props.d.ts").NumberEntryQuestionParams);
+    prefix: import("#typedefs/question-props.d.ts").Affix | undefined;
+    suffix: import("#typedefs/question-props.d.ts").Affix | undefined;
     label: string | undefined;
     answerForViewModel(answers: any): string | number;
 }

package/src/components/number-entry/question.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AAGA;IACC;;OAEG;IACH,gDAFW,OAAO,+BAA+B,EAAE,yBAAyB,EAY3E;IAFA,2BAAoB;IACpB,0BAAkB;IAGnB,kDAEC;CASD;;yBA9BwB,WAAW"}
+{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AAwBA;IACC;;OAEG;IACH,wDAFW,OAAO,+BAA+B,EAAE,yBAAyB,EAa3E;IAHA,kEAAoB;IACpB,kEAAuC;IACvC,0BAAkB;IAGnB,kDAEC;CAUD;;yBArDwB,WAAW"}

package/src/components/number-entry/question.js

@@ -1,11 +1,32 @@
 import { Question } from '#question';
 import { getPersistedNumberAnswer } from '../utils/persisted-number-answer.js';
 
+/**
+ * Normalises a suffix param into the govuk-frontend Affix shape.
+ * Supports the legacy plain-string format for backwards compatibility,
+ * emitting a deprecation warning when used.
+ *
+ * @param {string | import('#typedefs/question-props.d.ts').Affix | undefined} value
+ * @returns {import('#typedefs/question-props.d.ts').Affix | undefined}
+ */
+function toAffix(value) {
+	if (value === undefined) {
+		return undefined;
+	}
+	if (typeof value === 'string') {
+		console.warn(
+			`NumberEntryQuestion: passing a string to 'suffix' is deprecated, use a govuk affix object ({ text, classes? }) instead`
+		);
+		return { text: value };
+	}
+	return value;
+}
+
 export class NumberEntryQuestion extends Question {
 	/**
 	 * @param {import('#typedefs/question-props.d.ts').NumberEntryQuestionParams} params
 	 */
-	constructor({ label, suffix, ...parentParams }) {
+	constructor({ label, prefix, suffix, ...parentParams }) {
 		super({
 			// default but allow overrides
 			capitaliseAnswer: false,
@@ -13,7 +34,8 @@ export class NumberEntryQuestion extends Question {
 			viewFolder: 'number-entry'
 		});
 
-		this.suffix = suffix;
+		this.prefix = prefix;
+		this.suffix = toAffix(suffix, 'suffix');
 		this.label = label;
 	}
 
@@ -26,6 +48,7 @@ export class NumberEntryQuestion extends Question {
 	 */
 	addCustomDataToViewModel(viewModel) {
 		viewModel.question.label = this.label;
+		viewModel.question.prefix = this.prefix;
 		viewModel.question.suffix = this.suffix;
 	}
 }

package/src/components/number-entry/question.test.js

@@ -14,4 +14,69 @@ describe('number-entry', () => {
 
 		assert.strictEqual(question.capitaliseAnswer, true);
 	});
+
+	it('should accept Affix objects for prefix and suffix', () => {
+		const PREFIX = { text: '£', classes: 'govuk-!-font-weight-bold' };
+		const SUFFIX = { text: 'kg' };
+
+		const question = new NumberEntryQuestion({
+			title: 'Question',
+			question: 'Question',
+			fieldName: 'question',
+			url: 'Question',
+			prefix: PREFIX,
+			suffix: SUFFIX
+		});
+
+		assert.strictEqual(question.prefix, PREFIX);
+		assert.strictEqual(question.suffix, SUFFIX);
+	});
+
+	it('should convert string suffix to Affix object and warn about deprecation', (t) => {
+		const warnMock = t.mock.method(console, 'warn', () => {});
+
+		const question = new NumberEntryQuestion({
+			title: 'Question',
+			question: 'Question',
+			fieldName: 'question',
+			url: 'Question',
+			suffix: 'kg'
+		});
+
+		assert.deepStrictEqual(question.suffix, { text: 'kg' });
+		assert.strictEqual(warnMock.mock.calls.length, 1);
+		assert.match(warnMock.mock.calls[0].arguments[0], /suffix.*deprecated/);
+	});
+
+	it('should leave prefix and suffix undefined when not provided', () => {
+		const question = new NumberEntryQuestion({
+			title: 'Question',
+			question: 'Question',
+			fieldName: 'question',
+			url: 'Question'
+		});
+
+		assert.strictEqual(question.prefix, undefined);
+		assert.strictEqual(question.suffix, undefined);
+	});
+
+	it('should add prefix and suffix to the view model', () => {
+		const PREFIX = { text: '£' };
+		const SUFFIX = { text: 'kg' };
+
+		const question = new NumberEntryQuestion({
+			title: 'Question',
+			question: 'Question',
+			fieldName: 'question',
+			url: 'Question',
+			prefix: PREFIX,
+			suffix: SUFFIX
+		});
+
+		const viewModel = { question: {} };
+		question.addCustomDataToViewModel(viewModel);
+
+		assert.strictEqual(viewModel.question.prefix, PREFIX);
+		assert.strictEqual(viewModel.question.suffix, SUFFIX);
+	});
 });

package/typedefs/question-props.d.ts

@@ -86,7 +86,7 @@ export type DividerOption = { divider?: string };
 
 export type Option = SelectableOption | DividerOption;
 
-type Affix = {
+export type Affix = {
 	text: string;
 	classes?: string;
 };
@@ -228,7 +228,8 @@ export type MultiFieldInputQuestionProps = MultiFieldInputQuestionParams & {
 };
 
 export type NumberEntryQuestionParams = CommonQuestionParams & {
-	suffix?: string;
+	prefix?: Affix;
+	suffix?: string | Affix;
 	label?: string;
 };