@planning-inspectorate/dynamic-forms 3.16.0 → 3.18.0

package/test/questions.js

@@ -195,6 +195,54 @@ export const questionProps = {
 		question: 'Travel Companion Email',
 		fieldName: 'travelCompanionEmail',
 		url: 'travel-companion-email'
+	},
+	// Test questions for conditional reveal functionality
+	favouriteActivityReason: {
+		type: COMPONENT_TYPES.RADIO,
+		title: 'Favourite Activity Reason',
+		question: 'Why do you want to do your favourite activity?',
+		fieldName: 'favouriteActivityReason',
+		url: 'favourite-activity-reason',
+		label: 'Select a reason',
+		options: [
+			{
+				value: 'relaxation',
+				text: 'Relaxation',
+				conditional: {
+					question: 'How do you like to relax?',
+					type: 'text',
+					fieldName: 'relaxationDetails',
+					label: 'Details:'
+				}
+			},
+			{ value: 'adventure', text: 'Adventure' },
+			{ value: 'culture', text: 'Culture' }
+		]
+	},
+	travelRequirements: {
+		type: COMPONENT_TYPES.CHECKBOX,
+		title: 'Travel Requirements',
+		question: 'What special requirements do you have?',
+		fieldName: 'travelRequirements',
+		url: 'travel-requirements',
+		label: 'Select all that apply',
+		options: [
+			{
+				value: 'dietary',
+				text: 'Dietary requirements',
+				conditional: {
+					question: 'Please describe your dietary requirements',
+					type: 'text',
+					fieldName: 'dietaryDetails',
+					label: 'Dietary details:'
+				}
+			},
+			{
+				value: 'mobility',
+				text: 'Mobility assistance'
+			},
+			{ value: 'medical', text: 'Medical needs' }
+		]
 	}
 };
 
@@ -216,6 +264,8 @@ export const questionsInOrder = [
 	questionProps.hotelAddress,
 	questionProps.luggageWeight,
 	questionProps.contactEmail,
+	questionProps.favouriteActivityReason,
+	questionProps.travelRequirements,
 	questionProps.travelCompanions
 ];
 

package/test/snapshots/check-your-answers-not-started.html

@@ -196,6 +196,28 @@
       <a class="govuk-link" href="questions/contact-email">Answer<span class="govuk-visually-hidden"> What is your email address for booking confirmations?</span></a>
     </dd>
   </div>
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Favourite Activity Reason
+    </dt>
+    <dd class="govuk-summary-list__value">
+      Not started
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/favourite-activity-reason">Answer<span class="govuk-visually-hidden"> Why do you want to do your favourite activity?</span></a>
+    </dd>
+  </div>
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Travel Requirements
+    </dt>
+    <dd class="govuk-summary-list__value">
+      Not started
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/travel-requirements">Answer<span class="govuk-visually-hidden"> What special requirements do you have?</span></a>
+    </dd>
+  </div>
   <div class="govuk-summary-list__row">
     <dt class="govuk-summary-list__key">
       Travel Companions

package/test/snapshots/check-your-answers-with-answers.html

@@ -146,7 +146,7 @@
       Travel Companions
     </dt>
     <dd class="govuk-summary-list__value">
-      test<br>1<br>
+      test<br>1
     </dd>
     <dd class="govuk-summary-list__actions">
       <a class="govuk-link" href="questions/companions">Change<span class="govuk-visually-hidden"> Enter the names and ages of your travel companions.</span></a>
@@ -196,6 +196,28 @@
       <a class="govuk-link" href="questions/contact-email">Change<span class="govuk-visually-hidden"> What is your email address for booking confirmations?</span></a>
     </dd>
   </div>
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Favourite Activity Reason
+    </dt>
+    <dd class="govuk-summary-list__value">
+      Relaxation<br>Details: test conditional answer
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/favourite-activity-reason">Change<span class="govuk-visually-hidden"> Why do you want to do your favourite activity?</span></a>
+    </dd>
+  </div>
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Travel Requirements
+    </dt>
+    <dd class="govuk-summary-list__value">
+      Dietary requirements<br>Dietary details: test conditional answer
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/travel-requirements">Change<span class="govuk-visually-hidden"> What special requirements do you have?</span></a>
+    </dd>
+  </div>
   <div class="govuk-summary-list__row">
     <dt class="govuk-summary-list__key">
       Travel Companions

package/test/snapshots/favourite-activity-reason.html

@@ -0,0 +1,54 @@
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+            <form action="" method="post" novalidate>
+
+
+<fieldset class="govuk-fieldset">
+  <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
+    <h1 class="govuk-fieldset__heading">
+      Why do you want to do your favourite activity?
+    </h1>
+  </legend>
+
+                        <div class="govuk-form-group">
+  <div class="govuk-radios govuk-radios" data-module="govuk-radios">
+    <div class="govuk-radios__item">
+      <input class="govuk-radios__input" id="favouriteActivityReason" name="favouriteActivityReason" type="radio" value="relaxation" data-aria-controls="conditional-favouriteActivityReason" data-cy="answer-relaxation">
+      <label class="govuk-label govuk-radios__label" for="favouriteActivityReason">
+        Relaxation
+      </label>
+    </div>
+    <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-favouriteActivityReason">
+      <div class="govuk-form-group">
+  <label class="govuk-label" for="favouriteActivityReason_relaxationDetails">
+    How do you like to relax?
+  </label>
+  <input class="govuk-input" id="favouriteActivityReason_relaxationDetails" name="favouriteActivityReason_relaxationDetails" type="text" value="">
+</div>
+    </div>
+    <div class="govuk-radios__item">
+      <input class="govuk-radios__input" id="favouriteActivityReason-2" name="favouriteActivityReason" type="radio" value="adventure" data-cy="answer-adventure">
+      <label class="govuk-label govuk-radios__label" for="favouriteActivityReason-2">
+        Adventure
+      </label>
+    </div>
+    <div class="govuk-radios__item">
+      <input class="govuk-radios__input" id="favouriteActivityReason-3" name="favouriteActivityReason" type="radio" value="culture" data-cy="answer-culture">
+      <label class="govuk-label govuk-radios__label" for="favouriteActivityReason-3">
+        Culture
+      </label>
+    </div>
+  </div>
+</div>
+
+
+
+</fieldset>
+
+<button type="submit" class="govuk-button" data-module="govuk-button" data-cy="button-save-and-continue">
+  Continue
+</button>
+
+            </form>
+        </div>
+    </div>

package/test/snapshots/travel-requirements.html

@@ -0,0 +1,48 @@
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+            <form action="" method="post" novalidate>
+                <div class="govuk-form-group">
+  <fieldset class="govuk-fieldset">
+  <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
+    <h1 class="govuk-fieldset__heading">
+      What special requirements do you have?
+    </h1>
+  </legend>
+  <div class="govuk-checkboxes govuk-checkboxes" data-module="govuk-checkboxes">
+    <div class="govuk-checkboxes__item">
+      <input class="govuk-checkboxes__input" id="travelRequirements" name="travelRequirements" type="checkbox" value="dietary" data-aria-controls="conditional-travelRequirements" data-cy="answer-dietary">
+      <label class="govuk-label govuk-checkboxes__label" for="travelRequirements">
+        Dietary requirements
+      </label>
+    </div>
+    <div class="govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" id="conditional-travelRequirements">
+      <div class="govuk-form-group">
+  <label class="govuk-label" for="travelRequirements_dietaryDetails">
+    Please describe your dietary requirements
+  </label>
+  <input class="govuk-input" id="travelRequirements_dietaryDetails" name="travelRequirements_dietaryDetails" type="text" value="">
+</div>
+    </div>
+    <div class="govuk-checkboxes__item">
+      <input class="govuk-checkboxes__input" id="travelRequirements-2" name="travelRequirements" type="checkbox" value="mobility" data-cy="answer-mobility">
+      <label class="govuk-label govuk-checkboxes__label" for="travelRequirements-2">
+        Mobility assistance
+      </label>
+    </div>
+    <div class="govuk-checkboxes__item">
+      <input class="govuk-checkboxes__input" id="travelRequirements-3" name="travelRequirements" type="checkbox" value="medical" data-cy="answer-medical">
+      <label class="govuk-label govuk-checkboxes__label" for="travelRequirements-3">
+        Medical needs
+      </label>
+    </div>
+  </div>
+</fieldset>
+</div>
+
+<button type="submit" class="govuk-button" data-module="govuk-button" data-cy="button-save-and-continue">
+  Continue
+</button>
+
+            </form>
+        </div>
+    </div>

package/test/utils/question-test-utils.js

@@ -101,9 +101,24 @@ export function mockAnswerBody(q) {
 	switch (q.type) {
 		case COMPONENT_TYPES.BOOLEAN:
 			return { [q.fieldName]: BOOLEAN_OPTIONS.YES };
-		case COMPONENT_TYPES.CHECKBOX:
-			return { [q.fieldName]: [q.options[0].value] };
-		case COMPONENT_TYPES.RADIO:
+		case COMPONENT_TYPES.CHECKBOX: {
+			const result = { [q.fieldName]: [q.options[0].value] };
+			// Include conditional field if present on the first option
+			if (q.options[0].conditional?.fieldName) {
+				const conditionalFieldName = `${q.fieldName}_${q.options[0].conditional.fieldName}`;
+				result[conditionalFieldName] = 'test conditional answer';
+			}
+			return result;
+		}
+		case COMPONENT_TYPES.RADIO: {
+			const result = { [q.fieldName]: q.options[0].value };
+			// Include conditional field if present on the first option
+			if (q.options[0].conditional?.fieldName) {
+				const conditionalFieldName = `${q.fieldName}_${q.options[0].conditional.fieldName}`;
+				result[conditionalFieldName] = 'test conditional answer';
+			}
+			return result;
+		}
 		case COMPONENT_TYPES.SELECT:
 			return { [q.fieldName]: q.options[0].value };
 		case COMPONENT_TYPES.NUMBER:
@@ -181,9 +196,24 @@ export function mockAnswer(q) {
 	switch (q.type) {
 		case COMPONENT_TYPES.BOOLEAN:
 			return BOOLEAN_OPTIONS.YES;
-		case COMPONENT_TYPES.CHECKBOX:
-			return q.options[0].text;
-		case COMPONENT_TYPES.RADIO:
+		case COMPONENT_TYPES.CHECKBOX: {
+			const optionText = q.options[0].text;
+			// Include conditional value if present on the first option
+			if (q.options[0].conditional?.fieldName) {
+				const label = q.options[0].conditional.label ? `${q.options[0].conditional.label} ` : '';
+				return `${optionText}<br>${label}test conditional answer`;
+			}
+			return optionText;
+		}
+		case COMPONENT_TYPES.RADIO: {
+			const optionText = q.options[0].text;
+			// Include conditional value if present on the first option
+			if (q.options[0].conditional?.fieldName) {
+				const label = q.options[0].conditional.label ? `${q.options[0].conditional.label} ` : '';
+				return `${optionText}<br>${label}test conditional answer`;
+			}
+			return optionText;
+		}
 		case COMPONENT_TYPES.SELECT:
 			return q.options[0].text;
 		case COMPONENT_TYPES.NUMBER:
@@ -205,7 +235,8 @@ export function mockAnswer(q) {
 				for (const field of q.inputFields) {
 					res += mockInputFieldValue(field) + '<br>';
 				}
-				return res;
+				// Remove trailing <br>
+				return res.slice(0, -4);
 			}
 			break;
 		case COMPONENT_TYPES.ADDRESS: {

package/typedefs/question-props.d.ts

@@ -1,4 +1,27 @@
 import type { QuestionParameters } from './question-types.d.ts';
+import type { Question } from '../src/questions/question.js';
+import type { Journey } from '../src/journey/journey.js';
+
+/**
+ * Context passed to the custom summary formatter
+ */
+export interface SummaryFormatterContext<TAnswer = unknown> {
+	/** The raw answer value */
+	answer: TAnswer;
+	/** The default display value */
+	formattedAnswer: string;
+	/** The question instance */
+	question: Question;
+	/** The journey instance */
+	journey: Journey;
+	/** The section segment */
+	sectionSegment: string;
+}
+
+/**
+ * Custom function to format the summary display value
+ */
+export type SummaryValueFormatter<TAnswer = unknown> = (context: SummaryFormatterContext<TAnswer>) => string;
 
 export type QuestionTypes =
 	| 'boolean'
@@ -74,6 +97,7 @@ interface InputField {
 	formatJoinString?: string; // used by formatAnswerForSummary (e.g. task list display), effective default to line break
 	formatPrefix?: string; // used by formatAnswerForSummary (e.g. task list display), to prefix answer
 	formatTextFunction?: (text: string) => string; // used to format the answer for display and value in question
+	formatSummaryValue?: (context: InputFieldSummaryContext) => string; // used to format the answer for summary display only (not escaped)
 	attributes?: Record<string, string>; // used to add HTML attributes to the field
 	suffix?: Affix; // used to add a suffix to the field
 	prefix?: Affix; // used to add a prefix to the field
@@ -83,6 +107,15 @@ interface InputField {
 	pattern?: string; // Used for backwards-compatibility for older iOS devices in numeric input fields
 }
 
+/**
+ * Context passed to InputField.formatSummaryValue
+ * Extends the base SummaryFormatterContext with field-specific properties
+ */
+interface InputFieldSummaryContext extends SummaryFormatterContext {
+	/** The input field configuration */
+	field: InputField;
+}
+
 /*
  * UnitOptions are the options displayed in the radio format - in this case the value
  * represents the unit.

package/typedefs/question-types.d.ts

@@ -21,6 +21,10 @@ export interface QuestionParameters {
 	editable?: boolean;
 	// override the action link for this question
 	actionLink?: ActionLink;
+	// custom function to format the summary display value
+	formatSummaryValue?: SummaryValueFormatter;
+	// whether to capitalise the first letter of the answer in summary (defaults to true)
+	capitaliseAnswer?: boolean;
 	// static view data for this question
 	viewData?: {
 		/**