@planning-inspectorate/dynamic-forms 3.17.0 → 3.18.1

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

@@ -1,4 +1,4 @@
-import { describe, it } from 'node:test';
+import { describe, it, mock } from 'node:test';
 import assert from 'node:assert';
 import MultiFieldInputQuestion from './question.js';
 import { Journey } from '#journey';
@@ -45,6 +45,11 @@ describe('./src/dynamic-forms/components/multi-field-input/question.js', () => {
 		assert.strictEqual(testQuestion.inputFields, INPUTFIELDS);
 	});
 
+	it('should default capitaliseAnswer to false', () => {
+		const testQuestion = createMultiFieldInputQuestion();
+		assert.strictEqual(testQuestion.capitaliseAnswer, false);
+	});
+
 	it('should throw error if no inputFields parameter is passed to the constructor', () => {
 		assert.throws(() => {
 			createMultiFieldInputQuestion(TITLE, QUESTION, FIELDNAME, VALIDATORS, HTML, HINT, null);
@@ -247,7 +252,7 @@ describe('./src/dynamic-forms/components/multi-field-input/question.js', () => {
 						visuallyHiddenText: 'Question?'
 					},
 					key: 'title',
-					value: 'planning-permission<br>Test User<br>'
+					value: 'planning-permission<br>Test User'
 				}
 			];
 
@@ -344,12 +349,445 @@ describe('./src/dynamic-forms/components/multi-field-input/question.js', () => {
 				sections: []
 			});
 
-			const expectedValue = 'Line 1\nLine &amp; 2\n';
+			const expectedValue = 'Line 1\nLine &amp; 2';
 
 			const result = question.formatAnswerForSummary('questions', journey);
 
 			assert.strictEqual(result[0].value, expectedValue);
 			assert.strictEqual(result[0].value.includes('<br>'), false);
 		});
+		it('should apply formatSummaryValue when provided', () => {
+			const question = new MultiFieldInputQuestion({
+				title: TITLE,
+				question: QUESTION,
+				fieldName: FIELDNAME,
+				inputFields: INPUTFIELDS,
+				formatSummaryValue: ({ formattedAnswer }) => `Custom: ${formattedAnswer}`
+			});
+
+			const journey = new Journey({
+				journeyId: 'TEST',
+				makeBaseUrl: () => 'base',
+				taskListUrl: 'cases/create-a-case/check-your-answers',
+				response: {
+					answers: {
+						testField1: 'Value 1',
+						testField2: 'Value 2'
+					}
+				},
+				journeyTemplate: 'mock template',
+				taskListTemplate: 'mock path',
+				journeyTitle: 'mock title',
+				sections: []
+			});
+
+			const result = question.formatAnswerForSummary('questions', journey);
+
+			assert.strictEqual(result[0].value, 'Custom: Value 1<br>Value 2');
+		});
+		it('should apply formatSummaryValue on input fields with context (not escaped, not in form view)', () => {
+			// formatSummaryValue receives full context and output is not escaped
+			const formatSummaryValue = ({ answer }) => `<strong>${answer}</strong>`;
+			const question = new MultiFieldInputQuestion({
+				title: TITLE,
+				question: QUESTION,
+				fieldName: FIELDNAME,
+				inputFields: [
+					{ fieldName: 'testField1', formatSummaryValue, formatJoinString: '<br>' },
+					{ fieldName: 'testField2', formatSummaryValue, formatJoinString: '<br>' }
+				]
+			});
+
+			const journey = new Journey({
+				journeyId: 'TEST',
+				makeBaseUrl: () => 'base',
+				taskListUrl: 'cases/create-a-case/check-your-answers',
+				response: {
+					answers: {
+						testField1: 'Value 1',
+						testField2: 'Value 2'
+					}
+				},
+				journeyTemplate: 'mock template',
+				taskListTemplate: 'mock path',
+				journeyTitle: 'mock title',
+				sections: []
+			});
+
+			// formatSummaryValue should be applied in summary (with HTML not escaped)
+			const summaryResult = question.formatAnswerForSummary('questions', journey);
+			assert.strictEqual(summaryResult[0].value, '<strong>Value 1</strong><br><strong>Value 2</strong>');
+
+			// formatSummaryValue should NOT be applied in view model (form inputs)
+			const viewResult = question.prepQuestionForRendering({}, journey, {});
+			assert.strictEqual(viewResult.question?.value[0].value, 'Value 1');
+			assert.strictEqual(viewResult.question?.value[1].value, 'Value 2');
+		});
+		it('should pass full context to formatSummaryValue including journey and field', () => {
+			const formatSummaryValue = mock.fn((ctx) => ctx.answer);
+			const question = new MultiFieldInputQuestion({
+				title: TITLE,
+				question: QUESTION,
+				fieldName: FIELDNAME,
+				inputFields: [{ fieldName: 'testField1', formatSummaryValue }]
+			});
+
+			const journey = new Journey({
+				journeyId: 'TEST',
+				makeBaseUrl: () => 'base',
+				taskListUrl: 'cases/create-a-case/check-your-answers',
+				response: {
+					answers: {
+						testField1: 'Test Value'
+					}
+				},
+				journeyTemplate: 'mock template',
+				taskListTemplate: 'mock path',
+				journeyTitle: 'mock title',
+				sections: []
+			});
+
+			question.formatAnswerForSummary('test-section', journey);
+
+			assert.strictEqual(formatSummaryValue.mock.callCount(), 1);
+			const capturedContext = formatSummaryValue.mock.calls[0].arguments[0];
+			assert.strictEqual(capturedContext.answer, 'Test Value');
+			assert.strictEqual(capturedContext.formattedAnswer, 'Test Value');
+			assert.strictEqual(capturedContext.question, question);
+			assert.strictEqual(capturedContext.journey, journey);
+			assert.strictEqual(capturedContext.sectionSegment, 'test-section');
+			assert.strictEqual(capturedContext.field.fieldName, 'testField1');
+		});
+		it('should apply formatPrefix to each field value in summary', () => {
+			const question = new MultiFieldInputQuestion({
+				title: TITLE,
+				question: QUESTION,
+				fieldName: FIELDNAME,
+				inputFields: [
+					{ fieldName: 'testField1', formatPrefix: 'Name: ' },
+					{ fieldName: 'testField2', formatPrefix: 'Email: ' }
+				]
+			});
+
+			const journey = new Journey({
+				journeyId: 'TEST',
+				makeBaseUrl: () => 'base',
+				taskListUrl: 'cases/create-a-case/check-your-answers',
+				response: {
+					answers: {
+						testField1: 'John Doe',
+						testField2: 'john@example.com'
+					}
+				},
+				journeyTemplate: 'mock template',
+				taskListTemplate: 'mock path',
+				journeyTitle: 'mock title',
+				sections: []
+			});
+
+			const result = question.formatAnswerForSummary('questions', journey);
+
+			assert.strictEqual(result[0].value, 'Name: John Doe<br>Email: john@example.com');
+		});
+		it('should only include answered fields in summary (partial answers)', () => {
+			const question = createMultiFieldInputQuestion();
+
+			const journey = new Journey({
+				journeyId: 'TEST',
+				makeBaseUrl: () => 'base',
+				taskListUrl: 'cases/create-a-case/check-your-answers',
+				response: {
+					answers: {
+						testField1: 'Answered value',
+						testField2: null
+					}
+				},
+				journeyTemplate: 'mock template',
+				taskListTemplate: 'mock path',
+				journeyTitle: 'mock title',
+				sections: []
+			});
+
+			const result = question.formatAnswerForSummary('questions', journey);
+
+			// Only the answered field should be included
+			assert.strictEqual(result[0].value, 'Answered value');
+		});
+		it('should include falsy-but-valid answers such as false and 0 in the summary', () => {
+			const question = new MultiFieldInputQuestion({
+				title: TITLE,
+				question: QUESTION,
+				fieldName: FIELDNAME,
+				inputFields: [{ fieldName: 'testField1' }, { fieldName: 'testField2' }]
+			});
+
+			const journey = new Journey({
+				journeyId: 'TEST',
+				makeBaseUrl: () => 'base',
+				taskListUrl: 'cases/create-a-case/check-your-answers',
+				response: {
+					answers: {
+						testField1: false,
+						testField2: 0
+					}
+				},
+				journeyTemplate: 'mock template',
+				taskListTemplate: 'mock path',
+				journeyTitle: 'mock title',
+				sections: []
+			});
+
+			const result = question.formatAnswerForSummary('questions', journey);
+
+			assert.strictEqual(result[0].value, 'false<br>0');
+		});
+		it('should exclude fields with an empty string answer from the summary', () => {
+			const question = createMultiFieldInputQuestion();
+
+			const journey = new Journey({
+				journeyId: 'TEST',
+				makeBaseUrl: () => 'base',
+				taskListUrl: 'cases/create-a-case/check-your-answers',
+				response: {
+					answers: {
+						testField1: 'Answered value',
+						testField2: ''
+					}
+				},
+				journeyTemplate: 'mock template',
+				taskListTemplate: 'mock path',
+				journeyTitle: 'mock title',
+				sections: []
+			});
+
+			const result = question.formatAnswerForSummary('questions', journey);
+
+			// Only the non-empty field should be included, no trailing join string
+			assert.strictEqual(result[0].value, 'Answered value');
+		});
+		it('should escape HTML characters in field values by default', () => {
+			const question = createMultiFieldInputQuestion();
+
+			const journey = new Journey({
+				journeyId: 'TEST',
+				makeBaseUrl: () => 'base',
+				taskListUrl: 'cases/create-a-case/check-your-answers',
+				response: {
+					answers: {
+						testField1: '<script>alert("xss")</script>',
+						testField2: 'Safe & Sound'
+					}
+				},
+				journeyTemplate: 'mock template',
+				taskListTemplate: 'mock path',
+				journeyTitle: 'mock title',
+				sections: []
+			});
+
+			const result = question.formatAnswerForSummary('questions', journey);
+
+			assert.strictEqual(result[0].value, '&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;<br>Safe &amp; Sound');
+		});
+		it('should use default <br> join string when not in ManageListSection', () => {
+			const question = new MultiFieldInputQuestion({
+				title: TITLE,
+				question: QUESTION,
+				fieldName: FIELDNAME,
+				inputFields: [
+					{ fieldName: 'testField1' }, // no formatJoinString specified
+					{ fieldName: 'testField2' }
+				]
+			});
+
+			const journey = new Journey({
+				journeyId: 'TEST',
+				makeBaseUrl: () => 'base',
+				taskListUrl: 'cases/create-a-case/check-your-answers',
+				response: {
+					answers: {
+						testField1: 'Value 1',
+						testField2: 'Value 2'
+					}
+				},
+				journeyTemplate: 'mock template',
+				taskListTemplate: 'mock path',
+				journeyTitle: 'mock title',
+				sections: []
+			});
+
+			const result = question.formatAnswerForSummary('questions', journey);
+
+			// Default join string should be <br> (not \n)
+			assert.ok(result[0].value.includes('<br>'));
+			assert.strictEqual(result[0].value, 'Value 1<br>Value 2');
+		});
+		it('should apply formatTextFunction to field values in summary', () => {
+			const formatTextFunction = (value) => `Formatted: ${value}`;
+			const question = new MultiFieldInputQuestion({
+				title: TITLE,
+				question: QUESTION,
+				fieldName: FIELDNAME,
+				inputFields: [
+					{ fieldName: 'testField1', formatTextFunction },
+					{ fieldName: 'testField2', formatTextFunction }
+				]
+			});
+
+			const journey = new Journey({
+				journeyId: 'TEST',
+				makeBaseUrl: () => 'base',
+				taskListUrl: 'cases/create-a-case/check-your-answers',
+				response: {
+					answers: {
+						testField1: 'Value 1',
+						testField2: 'Value 2'
+					}
+				},
+				journeyTemplate: 'mock template',
+				taskListTemplate: 'mock path',
+				journeyTitle: 'mock title',
+				sections: []
+			});
+
+			const result = question.formatAnswerForSummary('questions', journey);
+
+			assert.strictEqual(result[0].value, 'Formatted: Value 1<br>Formatted: Value 2');
+		});
+		it('should escape output of formatTextFunction in summary', () => {
+			const formatTextFunction = (value) => `<b>${value}</b>`;
+			const question = new MultiFieldInputQuestion({
+				title: TITLE,
+				question: QUESTION,
+				fieldName: FIELDNAME,
+				inputFields: [{ fieldName: 'testField1', formatTextFunction }]
+			});
+
+			const journey = new Journey({
+				journeyId: 'TEST',
+				makeBaseUrl: () => 'base',
+				taskListUrl: 'cases/create-a-case/check-your-answers',
+				response: {
+					answers: {
+						testField1: 'Value 1'
+					}
+				},
+				journeyTemplate: 'mock template',
+				taskListTemplate: 'mock path',
+				journeyTitle: 'mock title',
+				sections: []
+			});
+
+			const result = question.formatAnswerForSummary('questions', journey);
+
+			assert.strictEqual(result[0].value, '&lt;b&gt;Value 1&lt;/b&gt;');
+		});
+		it('should apply formatTextFunction before formatSummaryValue, passing it as formattedAnswer', () => {
+			const formatTextFunction = (value) => value.toUpperCase();
+			const formatSummaryValue = mock.fn(({ answer, formattedAnswer }) => `[${answer}] ${formattedAnswer}`);
+			const question = new MultiFieldInputQuestion({
+				title: TITLE,
+				question: QUESTION,
+				fieldName: FIELDNAME,
+				inputFields: [{ fieldName: 'testField1', formatTextFunction, formatSummaryValue }]
+			});
+
+			const journey = new Journey({
+				journeyId: 'TEST',
+				makeBaseUrl: () => 'base',
+				taskListUrl: 'cases/create-a-case/check-your-answers',
+				response: {
+					answers: {
+						testField1: 'Value 1'
+					}
+				},
+				journeyTemplate: 'mock template',
+				taskListTemplate: 'mock path',
+				journeyTitle: 'mock title',
+				sections: []
+			});
+
+			const result = question.formatAnswerForSummary('questions', journey);
+
+			assert.strictEqual(formatSummaryValue.mock.callCount(), 1);
+			const capturedContext = formatSummaryValue.mock.calls[0].arguments[0];
+			// answer should remain the raw value
+			assert.strictEqual(capturedContext.answer, 'Value 1');
+			// formattedAnswer should reflect formatTextFunction output (escaped)
+			assert.strictEqual(capturedContext.formattedAnswer, 'VALUE 1');
+			assert.strictEqual(result[0].value, '[Value 1] VALUE 1');
+		});
+		it('should use custom formatJoinString when provided', () => {
+			const question = new MultiFieldInputQuestion({
+				title: TITLE,
+				question: QUESTION,
+				fieldName: FIELDNAME,
+				inputFields: [
+					{ fieldName: 'testField1', formatJoinString: ' - ' },
+					{ fieldName: 'testField2', formatJoinString: '' }
+				]
+			});
+
+			const journey = new Journey({
+				journeyId: 'TEST',
+				makeBaseUrl: () => 'base',
+				taskListUrl: 'cases/create-a-case/check-your-answers',
+				response: {
+					answers: {
+						testField1: 'Value 1',
+						testField2: 'Value 2'
+					}
+				},
+				journeyTemplate: 'mock template',
+				taskListTemplate: 'mock path',
+				journeyTitle: 'mock title',
+				sections: []
+			});
+
+			const result = question.formatAnswerForSummary('questions', journey);
+
+			assert.strictEqual(result[0].value, 'Value 1 - Value 2');
+		});
+	});
+	describe('formatAnswer', () => {
+		it('should return notStartedText for null', () => {
+			const question = createMultiFieldInputQuestion();
+			assert.strictEqual(question.formatAnswer(null), 'Not started');
+		});
+		it('should return notStartedText for undefined', () => {
+			const question = createMultiFieldInputQuestion();
+			assert.strictEqual(question.formatAnswer(undefined), 'Not started');
+		});
+		it('should return empty string for empty string', () => {
+			const question = createMultiFieldInputQuestion();
+			assert.strictEqual(question.formatAnswer(''), '');
+		});
+		it('should escape HTML and convert newlines to <br>', () => {
+			const question = createMultiFieldInputQuestion();
+			assert.strictEqual(question.formatAnswer('Line 1\nLine <2>'), 'Line 1<br>Line &lt;2&gt;');
+		});
+		it('should not apply nl2br when isInManageListSection is true', () => {
+			const question = createMultiFieldInputQuestion();
+			question.isInManageListSection = true;
+			assert.strictEqual(question.formatAnswer('Line 1\nLine 2'), 'Line 1\nLine 2');
+		});
+		it('should capitalise answer when capitaliseAnswer is true', () => {
+			const question = new MultiFieldInputQuestion({
+				title: TITLE,
+				question: QUESTION,
+				fieldName: FIELDNAME,
+				inputFields: INPUTFIELDS,
+				capitaliseAnswer: true
+			});
+			assert.strictEqual(question.formatAnswer('hello world'), 'Hello world');
+		});
+		it('should not capitalise answer when capitaliseAnswer is false (default)', () => {
+			const question = createMultiFieldInputQuestion();
+			assert.strictEqual(question.formatAnswer('hello world'), 'hello world');
+		});
+		it('should coerce non-string values to string before formatting', () => {
+			const question = createMultiFieldInputQuestion();
+			assert.strictEqual(question.formatAnswer(123), '123');
+			assert.strictEqual(question.formatAnswer(true), 'true');
+		});
 	});
 });

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,EAW3E;IAFA,2BAAoB;IACpB,0BAAkB;IAGnB,kDAEC;CASD;;yBA7BwB,WAAW"}
+{"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"}

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

@@ -7,9 +7,10 @@ export class NumberEntryQuestion extends Question {
 	 */
 	constructor({ label, suffix, ...parentParams }) {
 		super({
+			// default but allow overrides
+			capitaliseAnswer: false,
 			...parentParams,
-			viewFolder: 'number-entry',
-			capitaliseAnswer: false
+			viewFolder: 'number-entry'
 		});
 
 		this.suffix = suffix;

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

@@ -0,0 +1,17 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert';
+import NumberEntryQuestion from '#src/components/number-entry/question.js';
+
+describe('number-entry', () => {
+	it('should allow capitaliseAnswer override', () => {
+		const question = new NumberEntryQuestion({
+			title: 'Question',
+			question: 'Question',
+			fieldName: 'question',
+			url: 'Question',
+			capitaliseAnswer: true
+		});
+
+		assert.strictEqual(question.capitaliseAnswer, true);
+	});
+});

package/src/components/unit-option-entry/question.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AAOA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH;IAIC;;;OAGG;IACH,uEAHW,OAAO,+BAA+B,EAAE,6BAA6B,oBACrE,MAAM,CAAC,MAAM,WAAW,EAkBlC;IAvBD,gCAAgC;IAChC,SADW,KAAK,CAAC,UAAU,CAAC,CACpB;IAkBP,6BAAgD;IAEhD,0BAAkB;IAClB,yBAA+C;IAGhD;;;;;;;;;;;;OAYG;IACH,kCAXW,OAAO,kBAAkB,EAAE,OAAO,WAClC,OAAO,UAAU,EAAE,OAAO,mBAC1B,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,YACvB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,WACvB,OAAO,+BAA+B,EAAE,+BAA+B,GACrE,OAAO,+BAA+B,EAAE,iBAAiB,GAAG;QACpE,QAAQ,EAAE,OAAO,+BAA+B,EAAE,iBAAiB,CAAC,UAAU,CAAC,GAAG;YAChF,OAAO,EAAC,UAAU,EAAE,CAAA;SACrB,CAAA;KACF,CAmDH;IAED;;;;;OAKG,CACH,mBAJW,OAAO,SAAS,EAAE,OAAO,mBACzB,eAAe,GACb,OAAO,CAAC;QAAE,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KAAE,CAAC,CAgCzD;IAED;;OAEG;IACH,6HAaC;CACD;;;;;;;;;;yBAnKY;IACR,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,WAAW,EAAE;QACX,SAAS,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACnB,KAAK,CAAC,EAAE,OAAO,CAAC;QACZ,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;QAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;KAC3B,CAAA;CACH;yBA5BsB,6BAA6B"}
+{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AAOA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH;IAIC;;;OAGG;IACH,uEAHW,OAAO,+BAA+B,EAAE,6BAA6B,oBACrE,MAAM,CAAC,MAAM,WAAW,EAoBlC;IAzBD,gCAAgC;IAChC,SADW,KAAK,CAAC,UAAU,CAAC,CACpB;IAoBP,6BAAgD;IAEhD,0BAAkB;IAClB,yBAA+C;IAGhD;;;;;;;;;;;;OAYG;IACH,kCAXW,OAAO,kBAAkB,EAAE,OAAO,WAClC,OAAO,UAAU,EAAE,OAAO,mBAC1B,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,YACvB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,WACvB,OAAO,+BAA+B,EAAE,+BAA+B,GACrE,OAAO,+BAA+B,EAAE,iBAAiB,GAAG;QACpE,QAAQ,EAAE,OAAO,+BAA+B,EAAE,iBAAiB,CAAC,UAAU,CAAC,GAAG;YAChF,OAAO,EAAC,UAAU,EAAE,CAAA;SACrB,CAAA;KACF,CAmDH;IAED;;;;;OAKG,CACH,mBAJW,OAAO,SAAS,EAAE,OAAO,mBACzB,eAAe,GACb,OAAO,CAAC;QAAE,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KAAE,CAAC,CAgCzD;IAED;;OAEG;IACH,6HAaC;CACD;;;;;;;;;;yBArKY;IACR,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,WAAW,EAAE;QACX,SAAS,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACnB,KAAK,CAAC,EAAE,OAAO,CAAC;QACZ,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;QAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;KAC3B,CAAA;CACH;yBA5BsB,6BAA6B"}

package/src/components/unit-option-entry/question.js

@@ -41,6 +41,8 @@ export class UnitOptionEntryQuestion extends Question {
 	constructor({ conditionalFieldName, options, label, ...parentParams }, methodOverrides) {
 		super(
 			{
+				// Prevent capitalisation of answers, but allow override
+				capitaliseAnswer: false,
 				...parentParams,
 				viewFolder: 'unit-option-entry'
 			},
@@ -173,7 +175,7 @@ export class UnitOptionEntryQuestion extends Question {
 		if (isNaN(answerQuantity)) throw new Error('Conditional answer had an unexpected type');
 
 		const formattedAnswer = `${answerQuantity} ${answer}`;
-		return super.formatAnswerForSummary(sectionSegment, journey, formattedAnswer, false);
+		return super.formatAnswerForSummary(sectionSegment, journey, formattedAnswer);
 	}
 }
 

package/src/components/unit-option-entry/question.test.js

@@ -53,6 +53,21 @@ describe('./src/dynamic-forms/components/unit-option-entry/question.js', () => {
 		assert.strictEqual(unitOptionEntryQuestion.options, OPTIONS);
 	});
 
+	it('should default capitaliseAnswer to false', () => {
+		assert.strictEqual(unitOptionEntryQuestion.capitaliseAnswer, false);
+	});
+
+	it('should allow capitaliseAnswer to be set via constructor', () => {
+		const customQuestion = new UnitOptionEntryQuestion({
+			title: TITLE,
+			question: QUESTION,
+			fieldName: FIELDNAME,
+			conditionalFieldName: CONDITIONAL_FIELDNAME,
+			options: OPTIONS,
+			capitaliseAnswer: true
+		});
+		assert.strictEqual(customQuestion.capitaliseAnswer, true);
+	});
 	it('should handle decimal string formatting conversion', () => {
 		const journey = {
 			response: {

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

@@ -2,7 +2,7 @@
  * @typedef {{
  *   text: string;
  *   value: string;
- *     hint?: object;
+ *	 hint?: object;
  *   checked?: boolean | undefined;
  *   attributes?: Record<string, string>;
  *   behaviour?: 'exclusive';
@@ -10,14 +10,16 @@
  *     question: string;
  *     type: string;
  *     fieldName: string;
- *         inputClasses?: string;
- *         html?: string;
+ *	   inputClasses?: string;
+ *	   html?: string;
  *     value?: unknown;
- *         label?: string;
- *         hint?: string
+ *	   label?: string;
+ *	   hint?: string
+ *	   prefix?: { text?: string; html?: string; classes?: string };
+ *	   suffix?: { text?: string; html?: string; classes?: string };
  *   };
- *     conditionalText?: {
- *       html: string;
+ *	 conditionalText?: {
+ *	   html: string;
  *   }
  *}} Option
  */
@@ -63,6 +65,16 @@ export type Option = {
         value?: unknown;
         label?: string;
         hint?: string;
+        prefix?: {
+            text?: string;
+            html?: string;
+            classes?: string;
+        };
+        suffix?: {
+            text?: string;
+            html?: string;
+            classes?: string;
+        };
     };
     conditionalText?: {
         html: string;

package/src/questions/options-question.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"options-question.d.ts","sourceRoot":"","sources":["options-question.js"],"names":[],"mappings":"AASA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH;;GAEG;AACH;;GAEG;AAEH;IAIC;;OAEG;IACH,oBAFW,yBAAyB,EAenC;IAnBD,4BAA4B;IAC5B,SADW,KAAK,CAAC,MAAM,CAAC,CAChB;IAiBP,yBAA+C;IAGhD;;;;;;;;OAQG;IACH,kCAPW,OAAO,UAAU,EAAE,OAAO,WAC1B,OAAO,UAAU,EAAE,OAAO,mBAC1B,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,YACvB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,WACvB,OAAO,+BAA+B,EAAE,+BAA+B,GACrE,OAAO,+BAA+B,EAAE,iBAAiB,CAkDrE;CA2DD;;qBAxKY;IACR,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,WAAW,CAAC,EAAE;QACZ,QAAQ,EAAE,MAAM,CAAC;QACjB,IAAI,EAAE,MAAM,CAAC;QACb,SAAS,EAAE,MAAM,CAAC;QACd,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,IAAI,CAAC,EAAE,MAAM,CAAC;QAClB,KAAK,CAAC,EAAE,OAAO,CAAC;QACZ,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAA;KAClB,CAAC;IACA,eAAe,CAAC,EAAE;QAChB,IAAI,EAAE,MAAM,CAAC;KAChB,CAAA;CACH;+BAIU,OAAO,+BAA+B,EAAE,iBAAiB,GAAG;IAAE,QAAQ,EAAE;QAAE,OAAO,EAAE,MAAM,EAAE,CAAA;KAAE,CAAA;CAAE;wCAG/F,OAAO,+BAA+B,EAAE,kBAAkB,GAAG;IAAE,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;CAAE;yBApC3E,eAAe"}
+{"version":3,"file":"options-question.d.ts","sourceRoot":"","sources":["options-question.js"],"names":[],"mappings":"AASA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH;;GAEG;AACH;;GAEG;AAEH;IAIC;;OAEG;IACH,oBAFW,yBAAyB,EAenC;IAnBD,4BAA4B;IAC5B,SADW,KAAK,CAAC,MAAM,CAAC,CAChB;IAiBP,yBAA+C;IAGhD;;;;;;;;OAQG;IACH,kCAPW,OAAO,UAAU,EAAE,OAAO,WAC1B,OAAO,UAAU,EAAE,OAAO,mBAC1B,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,YACvB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,WACvB,OAAO,+BAA+B,EAAE,+BAA+B,GACrE,OAAO,+BAA+B,EAAE,iBAAiB,CAkDrE;CA2DD;;qBA1KY;IACR,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,WAAW,CAAC,EAAE;QACZ,QAAQ,EAAE,MAAM,CAAC;QACjB,IAAI,EAAE,MAAM,CAAC;QACb,SAAS,EAAE,MAAM,CAAC;QACnB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,IAAI,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,OAAO,CAAC;QACjB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,MAAM,CAAC,EAAE;YAAE,IAAI,CAAC,EAAE,MAAM,CAAC;YAAC,IAAI,CAAC,EAAE,MAAM,CAAC;YAAC,OAAO,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;QAC5D,MAAM,CAAC,EAAE;YAAE,IAAI,CAAC,EAAE,MAAM,CAAC;YAAC,IAAI,CAAC,EAAE,MAAM,CAAC;YAAC,OAAO,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;KAC5D,CAAC;IACH,eAAe,CAAC,EAAE;QAChB,IAAI,EAAE,MAAM,CAAC;KACb,CAAA;CACH;+BAIU,OAAO,+BAA+B,EAAE,iBAAiB,GAAG;IAAE,QAAQ,EAAE;QAAE,OAAO,EAAE,MAAM,EAAE,CAAA;KAAE,CAAA;CAAE;wCAG/F,OAAO,+BAA+B,EAAE,kBAAkB,GAAG;IAAE,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;CAAE;yBAtC3E,eAAe"}

package/src/questions/options-question.js

@@ -11,7 +11,7 @@ const defaultOptionJoinString = ',';
  * @typedef {{
  *   text: string;
  *   value: string;
- *     hint?: object;
+ *	 hint?: object;
  *   checked?: boolean | undefined;
  *   attributes?: Record<string, string>;
  *   behaviour?: 'exclusive';
@@ -19,14 +19,16 @@ const defaultOptionJoinString = ',';
  *     question: string;
  *     type: string;
  *     fieldName: string;
- *         inputClasses?: string;
- *         html?: string;
+ *	   inputClasses?: string;
+ *	   html?: string;
  *     value?: unknown;
- *         label?: string;
- *         hint?: string
+ *	   label?: string;
+ *	   hint?: string
+ *	   prefix?: { text?: string; html?: string; classes?: string };
+ *	   suffix?: { text?: string; html?: string; classes?: string };
  *   };
- *     conditionalText?: {
- *       html: string;
+ *	 conditionalText?: {
+ *	   html: string;
  *   }
  *}} Option
  */

package/src/questions/question.d.ts

@@ -48,8 +48,8 @@ export class Question {
     answerActionText: string;
     /** @type {string} text to display for 'add' link */
     addActionText: string;
-    /** @type {import('#typedefs/question-types.d.ts').SummaryValueFormatter|undefined} custom function to format the summary display value */
-    formatSummaryValue: import("#typedefs/question-types.d.ts").SummaryValueFormatter | undefined;
+    /** @type {import('#typedefs/question-props.d.ts').SummaryValueFormatter|undefined} custom function to format the summary display value */
+    formatSummaryValue: import("#typedefs/question-props.d.ts").SummaryValueFormatter | undefined;
     /**
      * @param {import('../journey/journey-response.js').JourneyResponse} [response]
      * @returns {boolean}

package/src/questions/question.js

@@ -49,7 +49,7 @@ export class Question {
 	answerActionText = 'Answer';
 	/** @type {string} text to display for 'add' link */
 	addActionText = 'Add';
-	/** @type {import('#typedefs/question-types.d.ts').SummaryValueFormatter|undefined} custom function to format the summary display value */
+	/** @type {import('#typedefs/question-props.d.ts').SummaryValueFormatter|undefined} custom function to format the summary display value */
 	formatSummaryValue;
 
 	/**
@@ -163,7 +163,7 @@ export class Question {
 
 	/**
 	 * Applies custom summary formatting if a formatSummaryValue function is provided
-	 * @param {import('#typedefs/question-types.d.ts').SummaryFormatterContext} context - the context for formatting
+	 * @param {import('#typedefs/question-props.d.ts').SummaryFormatterContext} context - the context for formatting
 	 * @returns {string}
 	 */
 	#applyCustomSummaryFormatter(context) {