@planning-inspectorate/dynamic-forms 3.16.0 → 3.18.0

package/src/components/radio/question.js

@@ -1,41 +1,14 @@
+import escape from 'escape-html';
 import OptionsQuestion from '../../questions/options-question.js';
 
 export class RadioQuestion extends OptionsQuestion {
 	/**
 	 * @param {import('#typedefs/question-props.d.ts').RadioQuestionParams} params
 	 */
-	constructor({
-		title,
-		question,
-		fieldName,
-		viewFolder,
-		url,
-		hint,
-		pageTitle,
-		description,
-		label,
-		html,
-		legend,
-		options,
-		validators,
-		actionLink,
-		editable,
-		viewData
-	}) {
+	constructor({ label, html, legend, viewFolder, ...parentParams }) {
 		super({
-			title,
-			question,
-			viewFolder: !viewFolder ? 'radio' : viewFolder,
-			fieldName,
-			url,
-			hint,
-			pageTitle,
-			description,
-			options,
-			validators,
-			actionLink,
-			editable,
-			viewData
+			...parentParams,
+			viewFolder: viewFolder || 'radio'
 		});
 
 		this.html = html;
@@ -44,7 +17,7 @@ export class RadioQuestion extends OptionsQuestion {
 	}
 
 	/**
-	 * @param {import('#question').QuestionViewModel} viewModel
+	 * @param {import('#typedefs/question-types.d.ts').QuestionViewModel} viewModel
 	 */
 	addCustomDataToViewModel(viewModel) {
 		viewModel.question.label = this.label;
@@ -52,22 +25,32 @@ export class RadioQuestion extends OptionsQuestion {
 	}
 
 	/**
-	 * returns the formatted answers values to be used to build task list elements
+	 * Formats an answer value for display in the summary.
+	 * Handles object answers with conditional fields (e.g. { value: 'yes', conditional: { yes: 'details' } })
+	 *
+	 * @param {unknown} answer - the raw answer value
+	 * @returns {string} the formatted answer for display
 	 */
-	formatAnswerForSummary(sectionSegment, journey, answer) {
-		if (answer?.conditional) {
-			const selectedOption = this.options.find((option) => option.value === answer.value);
-			const conditionalAnswerText = selectedOption.conditional?.label
-				? `${selectedOption.conditional.label} ${answer.conditional}`
-				: answer.conditional;
-			const formattedAnswer = [selectedOption.text, conditionalAnswerText].join('\n');
-			return super.formatAnswerForSummary(sectionSegment, journey, formattedAnswer, false);
-		} else if (answer) {
-			const selectedOption = this.options.find((option) => option.value === answer);
-			const selectedText = selectedOption?.text || '';
-			return super.formatAnswerForSummary(sectionSegment, journey, selectedText, false);
+	formatAnswer(answer) {
+		if (answer === null || answer === undefined || answer === '') {
+			return this.notStartedText;
 		}
-		return super.formatAnswerForSummary(sectionSegment, journey, answer);
+
+		// Handle simple string answers
+		if (typeof answer !== 'object' || answer.value === undefined) {
+			return super.formatAnswer(answer);
+		}
+
+		// Handle object answers with conditional fields
+		const option = this.options.find((opt) => opt.value === answer.value);
+		const optionText = escape(option ? option.text : answer.value);
+
+		const conditionalValue = answer.conditional?.[answer.value];
+		if (conditionalValue) {
+			const label = option?.conditional?.label ? `${escape(option.conditional.label)} ` : '';
+			return `${optionText}<br>${label}${escape(conditionalValue)}`;
+		}
+		return optionText;
 	}
 }
 

package/src/components/radio/question.test.js

@@ -96,78 +96,157 @@ describe('./src/dynamic-forms/components/radio/question.js', () => {
 		assert.strictEqual(preppedQuestion.question.label, LABEL);
 	});
 
-	it('should customise answer for summary when question has a conditional field filled in', () => {
-		const radioQuestion = new RadioQuestion({
-			title: TITLE,
-			question: QUESTION,
-			description: DESCRIPTION,
-			fieldName: FIELDNAME,
-			viewFolder: VIEWFOLDER,
-			html: HTML,
-			label: LABEL,
-			options: OPTIONS
+	describe('formatAnswer', () => {
+		it('should delegate simple string answers to parent class', () => {
+			const radioQuestion = new RadioQuestion({
+				title: TITLE,
+				question: QUESTION,
+				description: DESCRIPTION,
+				fieldName: FIELDNAME,
+				options: [
+					{ text: 'Option 1', value: 'op-1' },
+					{ text: 'Option 2', value: 'op-2' }
+				]
+			});
+
+			const result = radioQuestion.formatAnswer('op-1');
+			assert.strictEqual(result, 'Option 1');
 		});
 
-		const rowParams = radioQuestion.formatAnswerForSummary(SECTION, JOURNEY, {
-			value: 'yes',
-			conditional: 'test'
+		it('should format object answer with value only (no conditional)', () => {
+			const radioQuestion = new RadioQuestion({
+				title: TITLE,
+				question: QUESTION,
+				description: DESCRIPTION,
+				fieldName: FIELDNAME,
+				options: OPTIONS
+			});
+
+			const result = radioQuestion.formatAnswer({ value: 'no' });
+			assert.strictEqual(result, 'No');
 		});
-		assert.strictEqual(rowParams[0].value, 'Yes<br>test');
-	});
 
-	it('should use option text (not value) for display', () => {
-		const radioQuestion = new RadioQuestion({
-			title: TITLE,
-			question: QUESTION,
-			description: DESCRIPTION,
-			fieldName: FIELDNAME,
-			viewFolder: VIEWFOLDER,
-			html: HTML,
-			label: LABEL,
-			options: [
-				{ text: 'Option 1', value: 'op-1' },
-				{ text: 'Option 2', value: 'op-2' }
-			]
+		it('should format object answer with conditional', () => {
+			const radioQuestion = new RadioQuestion({
+				title: TITLE,
+				question: QUESTION,
+				description: DESCRIPTION,
+				fieldName: FIELDNAME,
+				options: OPTIONS
+			});
+
+			const result = radioQuestion.formatAnswer({
+				value: 'yes',
+				conditional: { yes: 'test details' }
+			});
+			assert.strictEqual(result, 'Yes<br>test details');
 		});
 
-		const rowParams = radioQuestion.formatAnswerForSummary(SECTION, JOURNEY, 'op-1');
-		assert.strictEqual(rowParams[0].value, 'Option 1');
-	});
+		it('should format object answer with conditional and label', () => {
+			const optionsWithLabel = [...OPTIONS];
+			optionsWithLabel[0] = {
+				...optionsWithLabel[0],
+				conditional: {
+					...optionsWithLabel[0].conditional,
+					label: 'label:'
+				}
+			};
+			const radioQuestion = new RadioQuestion({
+				title: TITLE,
+				question: QUESTION,
+				description: DESCRIPTION,
+				fieldName: FIELDNAME,
+				options: optionsWithLabel
+			});
+
+			const result = radioQuestion.formatAnswer({
+				value: 'yes',
+				conditional: { yes: 'test details' }
+			});
+			assert.strictEqual(result, 'Yes<br>label: test details');
+		});
 
-	it('should customise answer for summary and add label when question has a conditional field filled in and conditional field has a label', () => {
-		const optionsWithLabel = [...OPTIONS];
-		optionsWithLabel[0].conditional.label = 'label:';
-		const radioQuestion = new RadioQuestion({
-			title: TITLE,
-			question: QUESTION,
-			description: DESCRIPTION,
-			fieldName: FIELDNAME,
-			viewFolder: VIEWFOLDER,
-			html: HTML,
-			label: LABEL,
-			options: optionsWithLabel
+		it('should fall back to value when option not found in object answer', () => {
+			const radioQuestion = new RadioQuestion({
+				title: TITLE,
+				question: QUESTION,
+				description: DESCRIPTION,
+				fieldName: FIELDNAME,
+				options: OPTIONS
+			});
+
+			const result = radioQuestion.formatAnswer({ value: 'unknown' });
+			assert.strictEqual(result, 'unknown');
 		});
 
-		const rowParams = radioQuestion.formatAnswerForSummary(SECTION, JOURNEY, {
-			value: 'yes',
-			conditional: 'test'
+		it('should escape HTML in option text', () => {
+			const radioQuestion = new RadioQuestion({
+				title: TITLE,
+				question: QUESTION,
+				description: DESCRIPTION,
+				fieldName: FIELDNAME,
+				options: [{ text: '<script>alert("xss")</script>', value: 'xss' }]
+			});
+
+			const result = radioQuestion.formatAnswer('xss');
+			assert.strictEqual(result, '&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;');
 		});
-		assert.strictEqual(rowParams[0].value, 'Yes<br>label: test');
-	});
 
-	it('should not customise answer for summary when question does not have a conditional field filled in', () => {
-		const radioQuestion = new RadioQuestion({
-			title: TITLE,
-			question: QUESTION,
-			description: DESCRIPTION,
-			fieldName: FIELDNAME,
-			viewFolder: VIEWFOLDER,
-			html: HTML,
-			label: LABEL,
-			options: OPTIONS
+		it('should escape HTML in conditional value', () => {
+			const radioQuestion = new RadioQuestion({
+				title: TITLE,
+				question: QUESTION,
+				description: DESCRIPTION,
+				fieldName: FIELDNAME,
+				options: [
+					{
+						text: 'Yes',
+						value: 'yes',
+						conditional: { fieldName: 'details', type: 'text' }
+					}
+				]
+			});
+
+			const result = radioQuestion.formatAnswer({
+				value: 'yes',
+				conditional: { yes: '<img src=x onerror=alert(1)>' }
+			});
+			assert.strictEqual(result, 'Yes<br>&lt;img src=x onerror=alert(1)&gt;');
 		});
 
-		const rowParams = radioQuestion.formatAnswerForSummary(SECTION, JOURNEY, 'no');
-		assert.strictEqual(rowParams[0].value, 'No');
+		it('should escape HTML in conditional label', () => {
+			const radioQuestion = new RadioQuestion({
+				title: TITLE,
+				question: QUESTION,
+				description: DESCRIPTION,
+				fieldName: FIELDNAME,
+				options: [
+					{
+						text: 'Yes',
+						value: 'yes',
+						conditional: { fieldName: 'details', type: 'text', label: '<b>Label</b>' }
+					}
+				]
+			});
+
+			const result = radioQuestion.formatAnswer({
+				value: 'yes',
+				conditional: { yes: 'safe value' }
+			});
+			assert.strictEqual(result, 'Yes<br>&lt;b&gt;Label&lt;/b&gt; safe value');
+		});
+
+		it('should escape HTML in fallback value when option not found', () => {
+			const radioQuestion = new RadioQuestion({
+				title: TITLE,
+				question: QUESTION,
+				description: DESCRIPTION,
+				fieldName: FIELDNAME,
+				options: OPTIONS
+			});
+
+			const result = radioQuestion.formatAnswer({ value: '<script>xss</script>' });
+			assert.strictEqual(result, '&lt;script&gt;xss&lt;/script&gt;');
+		});
 	});
 });

package/src/components/select/question.d.ts

@@ -2,23 +2,9 @@ export class SelectQuestion extends OptionsQuestion {
     /**
      * @param {import('#typedefs/question-props.d.ts').SelectQuestionParams} params
      */
-    constructor({ title, question, fieldName, viewFolder, url, hint, pageTitle, description, label, html, legend, disableAccessibleAutocomplete, options, validators, viewData }: import("#typedefs/question-props.d.ts").SelectQuestionParams);
+    constructor({ label, html, legend, disableAccessibleAutocomplete, viewFolder, ...parentParams }: import("#typedefs/question-props.d.ts").SelectQuestionParams);
     label: string | undefined;
     legend: string | undefined;
-    /**
-     * @param {import('#question').QuestionViewModel} viewModel
-     */
-    addCustomDataToViewModel(viewModel: import("#question").QuestionViewModel): void;
-    /**
-     * returns the formatted answers values to be used to build task list elements
-     * note: only supports a single answer
-     *
-     * @param {unknown} answer
-     * @param {Journey} journey
-     * @param {string} sectionSegment
-     * @returns {Array.<Object>}
-     */
-    formatAnswerForSummary(sectionSegment: string, journey: Journey, answer: unknown): Array<Object>;
     #private;
 }
 export default SelectQuestion;

package/src/components/select/question.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AAEA;IAEC;;OAEG;IACH,8KAFW,OAAO,+BAA+B,EAAE,oBAAoB,EAqCtE;IAHA,0BAAkB;IAClB,2BAAoB;IAIrB;;OAEG;IACH,oCAFW,OAAO,WAAW,EAAE,iBAAiB,QAM/C;IAED;;;;;;;;OAQG;IACH,uCAHW,MAAM,WADN,OAAO,UADP,OAAO,GAGL,KAAK,CAAE,MAAM,CAAC,CAS1B;;CACD;;4BAtE2B,qCAAqC"}
+{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AAEA;IAEC;;OAEG;IACH,iGAFW,OAAO,+BAA+B,EAAE,oBAAoB,EAYtE;IAHA,0BAAkB;IAClB,2BAAoB;;CAYrB;;4BA3B2B,qCAAqC"}

package/src/components/select/question.js

@@ -5,35 +5,10 @@ export class SelectQuestion extends OptionsQuestion {
 	/**
 	 * @param {import('#typedefs/question-props.d.ts').SelectQuestionParams} params
 	 */
-	constructor({
-		title,
-		question,
-		fieldName,
-		viewFolder,
-		url,
-		hint,
-		pageTitle,
-		description,
-		label,
-		html,
-		legend,
-		disableAccessibleAutocomplete,
-		options,
-		validators,
-		viewData
-	}) {
+	constructor({ label, html, legend, disableAccessibleAutocomplete, viewFolder, ...parentParams }) {
 		super({
-			title,
-			question,
-			viewFolder: !viewFolder ? 'select' : viewFolder,
-			fieldName,
-			url,
-			hint,
-			pageTitle,
-			description,
-			options,
-			validators,
-			viewData
+			...parentParams,
+			viewFolder: viewFolder || 'select'
 		});
 
 		this.html = html;
@@ -43,31 +18,13 @@ export class SelectQuestion extends OptionsQuestion {
 	}
 
 	/**
-	 * @param {import('#question').QuestionViewModel} viewModel
+	 * @param {import('#typedefs/question-types.d.ts').QuestionViewModel} viewModel
 	 */
 	addCustomDataToViewModel(viewModel) {
 		viewModel.question.label = this.label;
 		viewModel.question.legend = this.legend;
 		viewModel.question.disableAccessibleAutocomplete = this.#disableAccessibleAutocomplete;
 	}
-
-	/**
-	 * returns the formatted answers values to be used to build task list elements
-	 * note: only supports a single answer
-	 *
-	 * @param {unknown} answer
-	 * @param {Journey} journey
-	 * @param {string} sectionSegment
-	 * @returns {Array.<Object>}
-	 */
-	formatAnswerForSummary(sectionSegment, journey, answer) {
-		if (answer) {
-			const selectedOption = this.options.find((option) => option.value === answer);
-			const selectedText = selectedOption?.text || '';
-			return super.formatAnswerForSummary(sectionSegment, journey, selectedText, false);
-		}
-		return super.formatAnswerForSummary(sectionSegment, journey, answer);
-	}
 }
 
 export default SelectQuestion;

package/src/components/single-line-input/question.d.ts

@@ -10,10 +10,6 @@ export class SingleLineInputQuestion extends Question {
     inputAttributes: Record<string, string>;
     label: string | undefined;
     classes: string;
-    /**
-     * @param {import('#question').QuestionViewModel} viewModel
-     */
-    addCustomDataToViewModel(viewModel: import("#question").QuestionViewModel): void;
 }
 export default SingleLineInputQuestion;
 import { Question } from '#question';

package/src/components/single-line-input/question.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AAEA;;GAEG;AACH;IAIC;;OAEG;IACH,oBAFW,OAAO,+BAA+B,EAAE,6BAA6B,EAW/E;IAfD,qCAAqC;IACrC,iBADW,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CACjB;IAWf,0BAAyB;IAEzB,gBAAmC;IAGpC;;OAEG;IACH,oCAFW,OAAO,WAAW,EAAE,iBAAiB,QAU/C;CACD;;yBAnCwB,WAAW"}
+{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AAEA;;GAEG;AACH;IAIC;;OAEG;IACH,oBAFW,OAAO,+BAA+B,EAAE,6BAA6B,EAW/E;IAfD,qCAAqC;IACrC,iBADW,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CACjB;IAWf,0BAAyB;IAEzB,gBAAmC;CAepC;;yBAnCwB,WAAW"}

package/src/components/single-line-input/question.js

@@ -22,7 +22,7 @@ export class SingleLineInputQuestion extends Question {
 	}
 
 	/**
-	 * @param {import('#question').QuestionViewModel} viewModel
+	 * @param {import('#typedefs/question-types.d.ts').QuestionViewModel} viewModel
 	 */
 	addCustomDataToViewModel(viewModel) {
 		viewModel.question.label = this.label;

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

@@ -21,10 +21,6 @@ export class TextEntryQuestion extends Question {
     constructor({ textEntryCheckbox, label, ...parentParams }: import("#typedefs/question-props.d.ts").TextEntryQuestionParams);
     textEntryCheckbox: import("#typedefs/question-props.d.ts").TextEntryCheckbox | undefined;
     label: string | undefined;
-    /**
-     * @param {import('#question').QuestionViewModel} viewModel
-     */
-    addCustomDataToViewModel(viewModel: import("#question").QuestionViewModel): void;
 }
 export default TextEntryQuestion;
 export type TextEntryCheckbox = {

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

@@ -1 +1 @@
-{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AACA;;;;;GAKG;AAEH;;;;;;GAMG;AAEH;;GAEG;AACH;IACC;;OAEG;IACH,2DAFW,OAAO,+BAA+B,EAAE,uBAAuB,EAUzE;IAFA,yFAA0C;IAC1C,0BAAkB;IAGnB;;OAEG;IACH,oCAFW,OAAO,WAAW,EAAE,iBAAiB,QAK/C;CACD;;;YA9Ba,MAAM;UACN,MAAM;UACN,MAAM;;;yBAZK,WAAW"}
+{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AACA;;;;;GAKG;AAEH;;;;;;GAMG;AAEH;;GAEG;AACH;IACC;;OAEG;IACH,2DAFW,OAAO,+BAA+B,EAAE,uBAAuB,EAUzE;IAFA,yFAA0C;IAC1C,0BAAkB;CAUnB;;;YA9Ba,MAAM;UACN,MAAM;UACN,MAAM;;;yBAZK,WAAW"}

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

@@ -32,7 +32,7 @@ export class TextEntryQuestion extends Question {
 	}
 
 	/**
-	 * @param {import('#question').QuestionViewModel} viewModel
+	 * @param {import('#typedefs/question-types.d.ts').QuestionViewModel} viewModel
 	 */
 	addCustomDataToViewModel(viewModel) {
 		viewModel.question.label = this.label;

package/src/components/text-entry-redact/question.d.ts

@@ -15,16 +15,12 @@ export class TextEntryRedactQuestion extends Question {
     showSuggestionsUi: boolean | undefined;
     summaryText: string | undefined;
     shouldTruncateSummary: boolean | undefined;
-    prepQuestionForRendering(section: any, journey: any, customViewData: any, payload: any, options: any): import("../../index.js").QuestionViewModel<import("../../index.js").BaseQuestionViewData>;
+    prepQuestionForRendering(section: any, journey: any, customViewData: any, payload: any, options: any): import("#typedefs/question-types.d.ts").QuestionViewModel<import("#typedefs/question-types.d.ts").BaseQuestionViewData>;
     answerForViewModel(answers: any): string;
-    /**
-     * @param {import('#question').QuestionViewModel} viewModel
-     */
-    addCustomDataToViewModel(viewModel: import("#question").QuestionViewModel): void;
     /**
      * returns the formatted answers values to be used to build task list elements
      */
-    formatAnswerForSummary(sectionSegment: any, journey: any, answer: any, capitals?: boolean): import("../../index.js").SummaryRow[];
+    formatAnswerForSummary(sectionSegment: any, journey: any, answer: any, capitals?: boolean): import("#typedefs/question-types.d.ts").SummaryRow[];
 }
 export default TextEntryRedactQuestion;
 import { Question } from '#question';

package/src/components/text-entry-redact/question.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AAGA,+BAAgC,QAAG,CAAC;AACpC,mCAAoC,GAAG,CAAC;AAExC;;GAEG;AACH;IACC;;OAEG;IACH,gLAFW,OAAO,+BAA+B,EAAE,6BAA6B,EAwB/E;IAPA,yFAA0C;IAC1C,0BAAkB;IAClB,qDAAsE;IACtE,iDAA8D;IAC9D,uCAA0C;IAC1C,gCAA8B;IAC9B,2CAAkD;IAkBnD,iMAOC;IAED,yCAEC;IAED;;OAEG;IACH,oCAFW,OAAO,WAAW,EAAE,iBAAiB,QAO/C;IAED;;OAEG;IACH,kIAuBC;CACD;;yBAtGwB,WAAW"}
+{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AAGA,+BAAgC,QAAG,CAAC;AACpC,mCAAoC,GAAG,CAAC;AAExC;;GAEG;AACH;IACC;;OAEG;IACH,gLAFW,OAAO,+BAA+B,EAAE,6BAA6B,EAwB/E;IAPA,yFAA0C;IAC1C,0BAAkB;IAClB,qDAAsE;IACtE,iDAA8D;IAC9D,uCAA0C;IAC1C,gCAA8B;IAC9B,2CAAkD;IAkBnD,+NAOC;IAED,yCAEC;IAYD;;OAEG;IACH,iJAuBC;CACD;;yBAtGwB,WAAW"}

package/src/components/text-entry-redact/question.js

@@ -64,7 +64,7 @@ export class TextEntryRedactQuestion extends Question {
 	}
 
 	/**
-	 * @param {import('#question').QuestionViewModel} viewModel
+	 * @param {import('#typedefs/question-types.d.ts').QuestionViewModel} viewModel
 	 */
 	addCustomDataToViewModel(viewModel) {
 		viewModel.question.label = this.label;

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/components/utils/question-has-answer.js

@@ -41,7 +41,7 @@ export const questionHasAnswer = (response, question, expectedValue) => {
 	if (Array.isArray(answerField)) {
 		return answerField.includes(expectedValue);
 	} else if (question.optionJoinString && typeof answerField === 'string') {
-		// todo: answers from options questions sometimes are array sometimes string, why?
+		// todo: DF-51 answers from options questions sometimes are array sometimes string, why?
 		if (!answerField) return false;
 		const answers = answerField.split(question.optionJoinString);
 		return answers.includes(expectedValue);

package/src/components/utils/question-utils.d.ts

@@ -1,5 +1,23 @@
 export function getConditionalFieldName(parentField: any, conditionalField: any): string;
-export function getConditionalAnswer(answers: any, question: any, answer: any): any;
+/**
+ * Get conditional answer(s) for a question.
+ * Returns an object keyed by option value with conditional answers, or null if no conditionals exist.
+ *
+ * @param {Record<string, unknown>} answers - all answers
+ * @param {{options?: Array<{value: string, conditional?: {fieldName: string}}>, fieldName: string, optionJoinString?: string}} question - question with options
+ * @param {string} answer - the answer value (may be separated by optionJoinString for checkboxes)
+ * @returns {Record<string, string> | null} conditional answer(s) keyed by option value
+ */
+export function getConditionalAnswer(answers: Record<string, unknown>, question: {
+    options?: Array<{
+        value: string;
+        conditional?: {
+            fieldName: string;
+        };
+    }>;
+    fieldName: string;
+    optionJoinString?: string;
+}, answer: string): Record<string, string> | null;
 /**
  * @param {unknown} conditional
  * @returns {conditional is {html: string}}

package/src/components/utils/question-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"question-utils.d.ts","sourceRoot":"","sources":["question-utils.js"],"names":[],"mappings":"AAAA,yFAEC;AAED,oFAGC;AAED;;;GAGG;AACH,mDAHW,OAAO,GACL,WAAW,IAAI;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,CAIzC"}
+{"version":3,"file":"question-utils.d.ts","sourceRoot":"","sources":["question-utils.js"],"names":[],"mappings":"AAAA,yFAEC;AAED;;;;;;;;GAQG;AACH,8CALW,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,YACvB;IAAC,OAAO,CAAC,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE;YAAC,SAAS,EAAE,MAAM,CAAA;SAAC,CAAA;KAAC,CAAC,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAAC,UACnH,MAAM,GACJ,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAyBzC;AAED;;;GAGG;AACH,mDAHW,OAAO,GACL,WAAW,IAAI;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,CAIzC"}

package/src/components/utils/question-utils.js

@@ -2,9 +2,38 @@ export function getConditionalFieldName(parentField, conditionalField) {
 	return `${parentField}_${conditionalField}`;
 }
 
+/**
+ * Get conditional answer(s) for a question.
+ * Returns an object keyed by option value with conditional answers, or null if no conditionals exist.
+ *
+ * @param {Record<string, unknown>} answers - all answers
+ * @param {{options?: Array<{value: string, conditional?: {fieldName: string}}>, fieldName: string, optionJoinString?: string}} question - question with options
+ * @param {string} answer - the answer value (may be separated by optionJoinString for checkboxes)
+ * @returns {Record<string, string> | null} conditional answer(s) keyed by option value
+ */
 export function getConditionalAnswer(answers, question, answer) {
-	const conditionalFieldName = question.options?.find((option) => option.value === answer)?.conditional?.fieldName;
-	return conditionalFieldName ? answers[getConditionalFieldName(question.fieldName, conditionalFieldName)] : null;
+	if (!answer || !question.options) {
+		return null;
+	}
+
+	// TODO DF-51 treat as an array
+	const joinString = question.optionJoinString || ',';
+	const answerValues = String(answer)
+		.split(joinString)
+		.map((v) => v.trim());
+
+	const conditionals = {};
+	for (const value of answerValues) {
+		const option = question.options.find((opt) => opt.value === value);
+		if (!option?.conditional?.fieldName) {
+			continue;
+		}
+		const conditionalValue = answers[getConditionalFieldName(question.fieldName, option.conditional.fieldName)];
+		if (conditionalValue) {
+			conditionals[value] = conditionalValue;
+		}
+	}
+	return Object.keys(conditionals).length > 0 ? conditionals : null;
 }
 
 /**