@planning-inspectorate/dynamic-forms 3.16.0 → 3.17.0

package/README.md

@@ -286,6 +286,117 @@ const questionProps = {
 const questions = createQuestions(questionProps, questionClasses, {});
 ```
 
+### Custom Summary Formatting
+
+The `formatSummaryValue` option allows you to customise how answers are displayed on check-your-answers pages without needing to create a custom question class.
+
+#### Basic Usage
+
+Pass a `formatSummaryValue` function when creating a question:
+
+```javascript
+import { RadioQuestion } from '@planning-inspectorate/dynamic-forms';
+
+new RadioQuestion({
+    fieldName: 'status',
+    title: 'Application status',
+    question: 'What is the application status?',
+    options: [
+        { text: 'Approved', value: 'approved' },
+        { text: 'Rejected', value: 'rejected' }
+    ],
+    formatSummaryValue: ({ formattedAnswer }) => `<strong>${formattedAnswer}</strong>`
+});
+```
+
+#### Formatter Context
+
+The formatter function receives a context object with the following properties:
+
+| Property | Type | Description                                    |
+|----------|------|------------------------------------------------|
+| `answer` | `unknown` | The raw answer value                           |
+| `formattedAnswer` | `string` | The default formatted display value            |
+| `question` | `Question` | The question instance                          |
+| `journey` | `Journey` | The journey instance                           |
+| `sectionSegment` | `string` | The current section segment                    |
+| `selectedOptions` | `Option[] \| undefined` | For OptionsQuestions (such as Checkbox or Radio), the matched option object(s) as an array |
+
+#### Answer Formats
+
+Different options-based questions store answers in different formats. The `selectedOptions` array normalises these formats for your formatter:
+
+| Question Type | Answer Format | `selectedOptions` Result |
+|---------------|---------------|--------------------------|
+| **Radio / Select** | Single string value: `"approved"` | `[{ text: 'Approved', value: 'approved' }]` |
+| **Radio / Select** | Conditional object: `{ value: "yes", conditional: "details" }` | `[{ text: 'Yes', value: 'yes', conditional: {...} }]` |
+| **Checkbox** | Comma-separated string: `"option1,option2"` | `[{ text: 'Option 1', value: 'option1' }, { text: 'Option 2', value: 'option2' }]` |
+| **Checkbox** | Single conditional object: `{ value: "other", conditional: "details" }` | `[{ text: 'Other', value: 'other', conditional: {...} }]` |
+
+For single-select questions (Radio, Select), use `selectedOptions[0]` to access the selected option. For multi-select questions (Checkbox), iterate over the array.
+
+#### Examples
+
+**Bold formatting:**
+
+```javascript
+formatSummaryValue: ({ formattedAnswer }) => `<strong>${escapeHtml(formattedAnswer)}</strong>`
+```
+
+**Conditional styling based on answer:**
+
+```javascript
+formatSummaryValue: ({ selectedOptions }) => {
+    const selectedOption = selectedOptions[0];
+    const color = selectedOption?.value === 'approved' ? 'green' : 'red';
+    return `<span style="color: ${color}">${escapeHtml(selectedOption?.text ?? '-')}</span>`;
+}
+```
+
+**Adding a suffix from another answer:**
+
+```javascript
+const suffixes = { solid: ' (tonnes)', liquid: ' (litres)' };
+
+formatSummaryValue: ({ answer, formattedAnswer }) => {
+    const suffix = suffixes[answer] ?? '';
+    return `${formattedAnswer}${suffix}`;
+}
+```
+
+**Accessing other journey answers:**
+
+```javascript
+formatSummaryValue: ({ formattedAnswer, journey }) => {
+    const capacity = journey.response.answers.wasteCapacity;
+    return capacity ? `${formattedAnswer}: ${capacity}` : formattedAnswer;
+}
+```
+
+**Using selectedOptions for single-select questions (Radio/Select):**
+
+```javascript
+formatSummaryValue: ({ selectedOptions }) => {
+    const selectedOption = selectedOptions[0];
+    // Access the full option object including any custom properties
+    const warning = selectedOption?.warning;
+    return warning ? `${escapeHtml(selectedOption?.text ?? '-')} ⚠️` : escapeHtml(selectedOption?.text ?? '-');
+}
+```
+
+**Using selectedOptions for multi-select questions (Checkbox):**
+
+```javascript
+formatSummaryValue: ({ selectedOptions }) => {
+    // Join all selected option texts with custom formatting
+    return selectedOptions
+        .map(opt => `<span class="tag">${escapeHtml(opt.text)}</span>`)
+        .join(' ');
+}
+```
+
+> **Note:** `formattedAnswer` is already escaped by dynamic-forms; you are responsible for escaping any additional user-controlled values you include (for example `answer`, option text from `selectedOptions`, or values read from `journey.response.answers`).
+
 ## Contributing
 
 When contributing to this package, ensure changes are generic and not service-specific. Speak to the R&D devs if you are not sure. Prefer configuration over hardcoding values, and ensure the code is well documented. 
@@ -321,7 +432,7 @@ To update any snapshots with rendering changes (or new questions), run `node --t
 
 When implement a new component, extend the base `Question` class. Common methods to override are:
 
-* `formatAnswerForSummary` - used for check-your-answers display
+* `formatAnswer` - used for check-your-answers display
 * `getDataToSave` - answer data to save
 * `addCustomDataToViewModel` - customise the view model with extra data/configuration
 * `answerForViewModel` - customise the view model answer value

package/package.json

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

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

@@ -22,10 +22,6 @@ export class AddressQuestion extends Question {
      * @returns {*|string}
      */
     answerForViewModel(answers: Record<string, any>): any | string;
-    /**
-     * @param {import('#question').QuestionViewModel} viewModel
-     */
-    addCustomDataToViewModel(viewModel: import("#question").QuestionViewModel): void;
     /**
      * @param {Object<string, any>} answer
      * @returns The formatted address to be presented in the UI
@@ -36,11 +32,7 @@ export class AddressQuestion extends Question {
     /**
      * returns the formatted answers values to be used to build task list elements
      */
-    formatAnswerForSummary(sectionSegment: any, journey: any, answer: any): {
-        key: string;
-        value: string;
-        action: import("../../index.js").ActionView | import("../../index.js").ActionView[] | undefined;
-    }[];
+    formatAnswer(answer: any): string;
     formatLabelFromRequiredFields(fieldName: any): "" | " (optional)";
 }
 export default AddressQuestion;

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

@@ -1 +1 @@
-{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AAOA;IACC;;OAEG;IACH,oBAFW,OAAO,+BAA+B,EAAE,yBAAyB,EAqB3E;IAXE;;;;;;kBAA8C;IAIhD;;;;;;MAMC;IAiBF;;;OAGG;IACH,4BAHW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GACjB,GAAC,GAAC,MAAM,CAqBpB;IAED;;OAEG;IACH,oCAFW,OAAO,WAAW,EAAE,iBAAiB,QAI/C;IA8BD;;;OAGG;IACH;;eAUC;IAED;;OAEG;IACH;;;;QAgBC;IACD,kEAMC;CACD;;yBArJwB,WAAW"}
+{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AAOA;IACC;;OAEG;IACH,oBAFW,OAAO,+BAA+B,EAAE,yBAAyB,EAqB3E;IAXE;;;;;;kBAA8C;IAIhD;;;;;;MAMC;IAiBF;;;OAGG;IACH,4BAHW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GACjB,GAAC,GAAC,MAAM,CAqBpB;IAqCD;;;OAGG;IACH;;eAUC;IAED;;OAEG;IACH,kCAIC;IAED,kEAMC;CACD;;yBA1IwB,WAAW"}

package/src/components/address/question.js

@@ -70,7 +70,7 @@ export class AddressQuestion extends Question {
 	}
 
 	/**
-	 * @param {import('#question').QuestionViewModel} viewModel
+	 * @param {import('#typedefs/question-types.d.ts').QuestionViewModel} viewModel
 	 */
 	addCustomDataToViewModel(viewModel) {
 		viewModel.question.labels = this.addressLabels;
@@ -123,23 +123,12 @@ export class AddressQuestion extends Question {
 	/**
 	 * returns the formatted answers values to be used to build task list elements
 	 */
-	formatAnswerForSummary(sectionSegment, journey, answer) {
-		let formattedAnswer = this.notStartedText;
-
-		if (answer) {
-			formattedAnswer = nl2br(escape(this.format(answer)));
-		} else if (answer === null) {
-			formattedAnswer = '';
-		}
-
-		return [
-			{
-				key: `${this.title}`,
-				value: formattedAnswer,
-				action: this.getAction(sectionSegment, journey, answer)
-			}
-		];
+	formatAnswer(answer) {
+		if (answer === null) return '';
+		if (!answer) return this.notStartedText;
+		return nl2br(escape(this.format(answer)));
 	}
+
 	formatLabelFromRequiredFields(fieldName) {
 		if (this.requiredFields && this.requiredFields[fieldName]) {
 			return '';

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

@@ -1,29 +1,9 @@
-/**
- * @typedef ConditionalAnswerObject
- * @type {object}
- * @property {string} value the checkbox answer
- * @property {string} conditional the conditional text input
- */
 export class CheckboxQuestion extends OptionsQuestion {
     /**
      * @param {import('#typedefs/question-props.d.ts').CheckboxQuestionParams} params
      */
-    constructor({ title, question, fieldName, url, pageTitle, description, options, validators, viewData }: import("#typedefs/question-props.d.ts").CheckboxQuestionParams);
-    /**
-     * returns the formatted answers values to be used to build task list elements
-     */
-    formatAnswerForSummary(sectionSegment: any, journey: any, answer: any): import("../../index.js").SummaryRow[];
+    constructor({ ...parentParams }: import("#typedefs/question-props.d.ts").CheckboxQuestionParams);
 }
 export default CheckboxQuestion;
-export type ConditionalAnswerObject = {
-    /**
-     * the checkbox answer
-     */
-    value: string;
-    /**
-     * the conditional text input
-     */
-    conditional: string;
-};
 import OptionsQuestion from '../../questions/options-question.js';
 //# sourceMappingURL=question.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AAKA;;;;;GAKG;AAEH;IACC;;OAEG;IACH,wGAFW,OAAO,+BAA+B,EAAE,sBAAsB,EAiBxE;IAED;;OAEG;IACH,8GAqCC;CACD;;;;;;WAlEa,MAAM;;;;iBACN,MAAM;;4BATQ,qCAAqC"}
+{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AAKA;IACC;;OAEG;IACH,iCAFW,OAAO,+BAA+B,EAAE,sBAAsB,EAUxE;CA4CD;;4BA5D2B,qCAAqC"}

package/src/components/checkbox/question.js

@@ -1,76 +1,63 @@
+import escape from 'escape-html';
 import OptionsQuestion from '../../questions/options-question.js';
-import questionUtils from '../utils/question-utils.js';
 
 const defaultOptionJoinString = ',';
 
-/**
- * @typedef ConditionalAnswerObject
- * @type {object}
- * @property {string} value the checkbox answer
- * @property {string} conditional the conditional text input
- */
-
 export class CheckboxQuestion extends OptionsQuestion {
 	/**
 	 * @param {import('#typedefs/question-props.d.ts').CheckboxQuestionParams} params
 	 */
-	constructor({ title, question, fieldName, url, pageTitle, description, options, validators, viewData }) {
+	constructor({ ...parentParams }) {
 		super({
-			title,
-			question,
+			...parentParams,
 			viewFolder: 'checkbox',
-			fieldName,
-			url,
-			pageTitle,
-			description,
-			options,
-			validators,
-			viewData
+			capitaliseAnswer: false
 		});
 
 		this.optionJoinString = defaultOptionJoinString;
 	}
 
 	/**
-	 * 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.
+	 * - Single value with conditional: { value: 'yes', conditional: { yes: 'details' } }
+	 * - Multiple values with conditionals: { value: 'yes,no', conditional: { yes: 'details1', no: 'details2' } }
+	 *
+	 * @param {unknown} answer - the raw answer value
+	 * @returns {string} the formatted answer for display
 	 */
-	formatAnswerForSummary(sectionSegment, journey, answer) {
-		if (!answer) {
-			return super.formatAnswerForSummary(sectionSegment, journey, answer, false);
+	formatAnswer(answer) {
+		if (answer === null || answer === undefined || answer === '') {
+			return this.notStartedText;
 		}
 
-		// answer is single ConditionalAnswerObject
-		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 formattedConditionalText = [selectedOption.text, conditionalAnswerText].join('\n');
-
-			return super.formatAnswerForSummary(sectionSegment, journey, formattedConditionalText, false);
+		// Handle simple string answers (e.g. '1,2')
+		if (typeof answer !== 'object' || answer.value === undefined) {
+			return super.formatAnswer(answer);
 		}
 
-		// answer is a string
-		const answerArray = answer.split(this.optionJoinString);
+		// Handle object answers with conditional fields
+		// TODO DF-51 treat as an array
+		const answerValues = String(answer.value)
+			.split(this.optionJoinString)
+			.map((v) => v.trim());
+		const conditionals = answer.conditional || {};
+
+		const formattedParts = answerValues.map((value) => {
+			const option = this.options.find((opt) => opt.value === value);
+			const optionText = escape(option ? option.text : value);
 
-		const formattedAnswer = this.options
-			.filter((option) => answerArray.includes(option.value))
-			.map((option) => {
-				if (option.conditional) {
-					const conditionalAnswer =
-						journey.response.answers[
-							questionUtils.getConditionalFieldName(this.fieldName, option.conditional.fieldName)
-						];
-					return [option.text, conditionalAnswer].join('\n');
-				}
+			// Check if this option has a conditional answer
+			const conditionalValue = conditionals[value];
+			if (conditionalValue) {
+				const label = option?.conditional?.label ? `${escape(option.conditional.label)} ` : '';
+				return `${optionText}<br>${label}${escape(conditionalValue)}`;
+			}
 
-				return option.text;
-			})
-			.join('\n');
+			return optionText;
+		});
 
-		return super.formatAnswerForSummary(sectionSegment, journey, formattedAnswer, false);
+		return formattedParts.join('<br>');
 	}
 }
 

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

@@ -54,35 +54,178 @@ describe('./src/dynamic-forms/components/checkbox/question.js', () => {
 		assert.deepStrictEqual(question.options, OPTIONS);
 	});
 
-	it('should return option label when formatAnswerForSummary is called with one answer', () => {
-		const question = new CheckboxQuestion(CHECKBOX_PARAMS);
-		question.getAction = () => {};
-		const formattedAnswer = question.formatAnswerForSummary({}, JOURNEY, '1');
-		assert.strictEqual(formattedAnswer[0].value, 'a');
-	});
+	describe('formatAnswer', () => {
+		it('should delegate simple string answers to parent class', () => {
+			const question = new CheckboxQuestion(CHECKBOX_PARAMS);
+			// Simple string should use parent's formatAnswer
+			const result = question.formatAnswer('1,2');
+			assert.strictEqual(result, 'a<br>b');
+		});
 
-	it('should return formatted option labels when formatAnswerForSummary is called with a string representing several non-conditional answers', () => {
-		const question = new CheckboxQuestion(CHECKBOX_PARAMS);
-		question.getAction = () => {};
-		const formattedAnswer = question.formatAnswerForSummary({}, JOURNEY, '1,2');
-		assert.strictEqual(formattedAnswer[0].value, 'a<br>b');
-	});
+		it('should format single answer with conditional', () => {
+			const question = new CheckboxQuestion(CHECKBOX_PARAMS);
+			const answer = {
+				value: '3',
+				conditional: {
+					3: 'conditional details'
+				}
+			};
+			const result = question.formatAnswer(answer);
+			assert.strictEqual(result, 'c<br>conditional details');
+		});
 
-	it('should return formatted option labels when formatAnswerForSummary is called with a string representing several answers including a conditional', () => {
-		const question = new CheckboxQuestion(CHECKBOX_PARAMS);
-		question.getAction = () => {};
-		const formattedAnswer = question.formatAnswerForSummary({}, JOURNEY, '1,2,3');
-		assert.strictEqual(formattedAnswer[0].value, `a<br>b<br>c<br>${CONDITIONAL_ANSWER_TEXT}`);
-	});
+		it('should format single answer with conditional and label', () => {
+			const optionsWithLabel = [
+				{ text: 'Option A', value: 'a' },
+				{
+					text: 'Option B',
+					value: 'b',
+					conditional: {
+						fieldName: 'details',
+						label: 'Please provide details:'
+					}
+				}
+			];
+			const question = new CheckboxQuestion({
+				...CHECKBOX_PARAMS,
+				options: optionsWithLabel
+			});
+			const answer = {
+				value: 'b',
+				conditional: {
+					b: 'my details'
+				}
+			};
+			const result = question.formatAnswer(answer);
+			assert.strictEqual(result, 'Option B<br>Please provide details: my details');
+		});
 
-	it('should return a formatted option label when formatAnswerForSummary is called with a single conditional answer', () => {
-		const question = new CheckboxQuestion(CHECKBOX_PARAMS);
-		const conditionalAnswer = {
-			value: '3',
-			conditional: CONDITIONAL_ANSWER_TEXT
-		};
-		question.getAction = () => {};
-		const formattedAnswer = question.formatAnswerForSummary({}, JOURNEY, conditionalAnswer);
-		assert.strictEqual(formattedAnswer[0].value, `c<br>${CONDITIONAL_ANSWER_TEXT}`);
+		it('should format multiple answers where one has conditional', () => {
+			const question = new CheckboxQuestion(CHECKBOX_PARAMS);
+			const answer = {
+				value: '1,3',
+				conditional: {
+					3: 'conditional for c'
+				}
+			};
+			const result = question.formatAnswer(answer);
+			assert.strictEqual(result, 'a<br>c<br>conditional for c');
+		});
+
+		it('should format multiple answers with multiple conditionals', () => {
+			const optionsWithMultipleConditionals = [
+				{
+					text: 'Option A',
+					value: 'a',
+					conditional: { fieldName: 'details-a' }
+				},
+				{ text: 'Option B', value: 'b' },
+				{
+					text: 'Option C',
+					value: 'c',
+					conditional: { fieldName: 'details-c' }
+				}
+			];
+			const question = new CheckboxQuestion({
+				...CHECKBOX_PARAMS,
+				options: optionsWithMultipleConditionals
+			});
+			const answer = {
+				value: 'a,c',
+				conditional: {
+					a: 'details for A',
+					c: 'details for C'
+				}
+			};
+			const result = question.formatAnswer(answer);
+			assert.strictEqual(result, 'Option A<br>details for A<br>Option C<br>details for C');
+		});
+
+		it('should handle object answer with empty conditional', () => {
+			const question = new CheckboxQuestion(CHECKBOX_PARAMS);
+			const answer = {
+				value: '1,2',
+				conditional: {}
+			};
+			const result = question.formatAnswer(answer);
+			assert.strictEqual(result, 'a<br>b');
+		});
+
+		it('should handle object answer with null conditional', () => {
+			const question = new CheckboxQuestion(CHECKBOX_PARAMS);
+			const answer = {
+				value: '1,2',
+				conditional: null
+			};
+			const result = question.formatAnswer(answer);
+			assert.strictEqual(result, 'a<br>b');
+		});
+
+		it('should fall back to value when option not found in object answer', () => {
+			const question = new CheckboxQuestion(CHECKBOX_PARAMS);
+			const answer = {
+				value: 'unknown',
+				conditional: {}
+			};
+			const result = question.formatAnswer(answer);
+			assert.strictEqual(result, 'unknown');
+		});
+
+		it('should escape HTML in option text', () => {
+			const question = new CheckboxQuestion({
+				...CHECKBOX_PARAMS,
+				options: [{ text: '<script>alert("xss")</script>', value: '1' }]
+			});
+			const result = question.formatAnswer('1');
+			assert.strictEqual(result, '&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;');
+		});
+
+		it('should escape HTML in conditional value', () => {
+			const question = new CheckboxQuestion({
+				...CHECKBOX_PARAMS,
+				options: [
+					{
+						text: 'Option',
+						value: '1',
+						conditional: { fieldName: 'details', type: 'text' }
+					}
+				]
+			});
+			const answer = {
+				value: '1',
+				conditional: { 1: '<img src=x onerror=alert(1)>' }
+			};
+			const result = question.formatAnswer(answer);
+			assert.strictEqual(result, 'Option<br>&lt;img src=x onerror=alert(1)&gt;');
+		});
+
+		it('should escape HTML in conditional label', () => {
+			const question = new CheckboxQuestion({
+				...CHECKBOX_PARAMS,
+				options: [
+					{
+						text: 'Option',
+						value: '1',
+						conditional: { fieldName: 'details', type: 'text', label: '<b>Label</b>' }
+					}
+				]
+			});
+			const answer = {
+				value: '1',
+				conditional: { 1: 'safe value' }
+			};
+			const result = question.formatAnswer(answer);
+			assert.strictEqual(result, 'Option<br>&lt;b&gt;Label&lt;/b&gt; safe value');
+		});
+
+		it('should escape HTML in fallback value when option not found', () => {
+			const question = new CheckboxQuestion(CHECKBOX_PARAMS);
+			const answer = {
+				value: '<script>xss</script>',
+				conditional: {}
+			};
+			const result = question.formatAnswer(answer);
+			assert.strictEqual(result, '&lt;script&gt;xss&lt;/script&gt;');
+		});
 	});
 });

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

@@ -16,14 +16,6 @@ export class DateQuestion extends Question {
     answerForViewModel(answers: any, isPayload: any): {
         [x: string]: any;
     };
-    /**
-     * returns the formatted answers values to be used to build task list elements
-     */
-    formatAnswerForSummary(sectionSegment: any, journey: any, answer: any): {
-        key: string;
-        value: string;
-        action: import("../../index.js").ActionView | import("../../index.js").ActionView[] | undefined;
-    }[];
 }
 export default DateQuestion;
 import { Question } from '../../questions/question.js';

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

@@ -1 +1 @@
-{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AAKA;;GAEG;AACH;IACC;;OAEG;IACH,6CAFW,OAAO,+BAA+B,EAAE,kBAAkB,EAQpE;IADA,mBAA4B;IAW7B;;;;;OAKG,CACH,mBAJW,OAAO,SAAS,EAAE,OAAO,mBACzB,OAAO,mBAAmB,EAAE,eAAe,GACzC,OAAO,CAAE,MAAM,CAAC,CAY5B;IAED;;MAwBC;IAED;;OAEG;IACH;;;;QAaC;CACD;;yBAxFwB,6BAA6B"}
+{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AAKA;;GAEG;AACH;IACC;;OAEG;IACH,6CAFW,OAAO,+BAA+B,EAAE,kBAAkB,EAQpE;IADA,mBAA4B;IAW7B;;;;;OAKG,CACH,mBAJW,OAAO,SAAS,EAAE,OAAO,mBACzB,OAAO,mBAAmB,EAAE,eAAe,GACzC,OAAO,CAAE,MAAM,CAAC,CAY5B;IAED;;MAwBC;CAWD;;yBAhFwB,6BAA6B"}

package/src/components/date/question.js

@@ -71,21 +71,13 @@ export class DateQuestion extends Question {
 	}
 
 	/**
-	 * returns the formatted answers values to be used to build task list elements
+	 * Formats a date answer for display in the summary.
+	 * @param {unknown} answer - the date value
+	 * @returns {string} the formatted date
 	 */
-	formatAnswerForSummary(sectionSegment, journey, answer) {
-		let formattedAnswer;
-
-		if (answer) {
-			formattedAnswer = formatDateForDisplay(answer, { format: this.dateFormat });
-		} else {
-			formattedAnswer = this.notStartedText;
-		}
-
-		const action = this.getAction(sectionSegment, journey, answer);
-		const key = this.title ?? this.question;
-
-		return [{ key: key, value: formattedAnswer, action: action }];
+	formatAnswer(answer) {
+		if (!answer) return this.notStartedText;
+		return formatDateForDisplay(answer, { format: this.dateFormat });
 	}
 }
 

package/src/components/date-period/question.d.ts

@@ -25,17 +25,13 @@ export class DatePeriodQuestion extends Question {
     answerForViewModel(answers: any, isPayload: any): {
         [x: string]: any;
     };
-    /**
-     * @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): {
         key: string;
         value: string;
-        action: import("../../index.js").ActionView | import("../../index.js").ActionView[] | undefined;
+        action: import("#typedefs/question-types.d.ts").ActionView | import("#typedefs/question-types.d.ts").ActionView[] | undefined;
     }[];
 }
 export default DatePeriodQuestion;

package/src/components/date-period/question.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AAOA;;;GAGG;AACH;IACC;;OAEG;IACH,mGAFW,OAAO,+BAA+B,EAAE,wBAAwB,EAuB1E;IAPA,mBAA4B;IAC5B;;;MAAsD;IAEtD,8BAA0B;IAC1B,4BAAsB;IACtB,kEAA+D;IAC/D,gEAA2D;IAkB5D;;;;;OAKG,CACH,mBAJW,OAAO,SAAS,EAAE,OAAO,mBACzB,OAAO,mBAAmB,EAAE,eAAe,GACzC,OAAO,CAAE,MAAM,CAAC,CAgC5B;IAED;;MAuCC;IAED;;OAEG;IACH,oCAFW,OAAO,WAAW,EAAE,iBAAiB,QAM/C;IAED;;OAEG;IACH;;;;QAyBC;CACD;;yBAzKwB,WAAW"}
+{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AAOA;;;GAGG;AACH;IACC;;OAEG;IACH,mGAFW,OAAO,+BAA+B,EAAE,wBAAwB,EAuB1E;IAPA,mBAA4B;IAC5B;;;MAAsD;IAEtD,8BAA0B;IAC1B,4BAAsB;IACtB,kEAA+D;IAC/D,gEAA2D;IAkB5D;;;;;OAKG,CACH,mBAJW,OAAO,SAAS,EAAE,OAAO,mBACzB,OAAO,mBAAmB,EAAE,eAAe,GACzC,OAAO,CAAE,MAAM,CAAC,CAgC5B;IAED;;MAuCC;IAWD;;OAEG;IACH;;;;QAyBC;CACD;;yBAzKwB,WAAW"}

package/src/components/date-period/question.js

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

package/src/components/date-time/question.d.ts

@@ -16,14 +16,6 @@ export class DateTimeQuestion extends Question {
     answerForViewModel(answers: any, isPayload: any): {
         [x: string]: any;
     };
-    /**
-     * returns the formatted answers values to be used to build task list elements
-     */
-    formatAnswerForSummary(sectionSegment: any, journey: any, answer: any): {
-        key: string;
-        value: string;
-        action: import("../../index.js").ActionView | import("../../index.js").ActionView[] | undefined;
-    }[];
     #private;
 }
 export default DateTimeQuestion;