@planning-inspectorate/dynamic-forms 3.15.6 → 3.17.0

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:

package/tsconfig.json

@@ -1,6 +1,14 @@
 {
 	"include": ["**/*.ts", "**/*.js"],
-	"exclude": ["node_modules", "packages/database/src/client/**", "**/*.test.ts", "**/*.test.js", "test/**"],
+	"exclude": [
+		"node_modules",
+		"packages/database/src/client/**",
+		"**/*.test.ts",
+		"**/*.test.js",
+		"test/**",
+		"*.config.js",
+		"typedefs/**"
+	],
 	"compilerOptions": {
 		"allowImportingTsExtensions": true,
 		"allowJs": true,
@@ -14,13 +22,12 @@
 		"esModuleInterop": true,
 		"module": "NodeNext",
 		"moduleResolution": "nodenext",
-		"outDir": "types",
-		"rootDir": ".",
 		"strict": true,
 		"target": "esnext",
 		"skipLibCheck": true,
 		"paths": {
-			"#question-types": ["./src/questions/question-types.d.ts"],
+			"#question-types": ["./typedefs/question-types.d.ts"],
+			"#typedefs/*": ["./typedefs/*"],
 			"#src/*": ["./src/*"],
 			"#test/*": ["./test/*"],
 			"#question": ["./src/questions/question.js"],

package/{types/src/questions → typedefs}/question-props.d.ts

@@ -1,6 +1,6 @@
-import type { QuestionParameters } from '#src/questions/question-types.d.ts';
+import type { QuestionParameters } from './question-types.d.ts';
 
-type QuestionTypes =
+export type QuestionTypes =
 	| 'boolean'
 	| 'checkbox'
 	| 'date'
@@ -26,7 +26,7 @@ export type CommonQuestionParams = Omit<QuestionParameters, 'viewFolder'>;
 /**
  * Full props including type for routing/factory layer
  */
-type CommonQuestionProps = CommonQuestionParams & {
+export type CommonQuestionProps = CommonQuestionParams & {
 	type: QuestionTypes;
 };
 
@@ -37,29 +37,31 @@ export type BaseQuestionProps = CommonQuestionParams & {
 	type: string;
 };
 
-type Option =
-	| {
-			text: string;
-			value: string;
-			hint?: object;
-			checked?: boolean | undefined;
-			attributes?: Record<string, string>;
-			behaviour?: 'exclusive';
-			conditional?: {
-				question: string;
-				type: string;
-				fieldName: string;
-				inputClasses?: string;
-				html?: string;
-				value?: unknown;
-				label?: string;
-				hint?: string;
-			};
-			conditionalText?: {
-				html: string;
-			};
-	  }
-	| { divider?: string };
+export type SelectableOption = {
+	text: string;
+	value: string;
+	hint?: object;
+	checked?: boolean | undefined;
+	attributes?: Record<string, string>;
+	behaviour?: 'exclusive';
+	conditional?: {
+		question: string;
+		type: string;
+		fieldName: string;
+		inputClasses?: string;
+		html?: string;
+		value?: unknown;
+		label?: string;
+		hint?: string;
+	};
+	conditionalText?: {
+		html: string;
+	};
+};
+
+export type DividerOption = { divider?: string };
+
+export type Option = SelectableOption | DividerOption;
 
 type Affix = {
 	text: string;

package/typedefs/question-types.d.ts

@@ -0,0 +1,141 @@
+import type { RouteParams } from './journey-types.d.ts';
+import type ManageListQuestion from '#src/components/manage-list/question.js';
+import type BaseValidator from '#src/validator/base-validator.js';
+import type { JourneyResponse } from '#src/journey/journey-response.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: import('./question.js').Question;
+	/** The journey instance */
+	journey: import('../journey/journey.js').Journey;
+	/** The section segment */
+	sectionSegment: string;
+	/** The selected option objects (for options-based questions) */
+	selectedOptions?: import('./options-question.js').Option[];
+}
+
+/**
+ * Custom function to format the summary display value
+ */
+export type SummaryValueFormatter<TAnswer = unknown> = (context: SummaryFormatterContext<TAnswer>) => string;
+
+export interface QuestionParameters {
+	title: string;
+	question: string;
+	viewFolder: string;
+	fieldName: string;
+	url?: string;
+	pageTitle?: string;
+	description?: string;
+	validators?: BaseValidator[];
+	html?: string;
+	hint?: string;
+	interfaceType?: string;
+	shouldDisplay?: (response: JourneyResponse) => boolean;
+	autocomplete?: string;
+	// is this question editable? defaults to true
+	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?: {
+		/**
+		 * @deprecated replaced by secondaryActions
+		 */
+		extraActionButtons?: SecondaryAction[];
+		/**
+		 * Secondary action buttons
+		 */
+		secondaryActions?: SecondaryAction[];
+		[key: string]: any;
+	};
+}
+
+export interface ActionLink {
+	text: string;
+	href: string;
+}
+
+export type SecondaryAction = SecondaryActionButton | SecondaryActionLink;
+
+export interface SecondaryActionButton {
+	text: string;
+	type?: string;
+	formaction?: string;
+	classes?: string;
+}
+
+export interface SecondaryActionLink {
+	text: string;
+	href: string;
+	classes?: string;
+}
+
+interface BaseQuestionViewData {
+	value: unknown;
+	question: string;
+	fieldName: string;
+	pageTitle: string;
+	description?: string;
+	html?: string;
+	hint?: string;
+	interfaceType?: string;
+	autocomplete?: string;
+}
+
+export interface QuestionViewModel<TQuestionViewData extends BaseQuestionViewData = BaseQuestionViewData> {
+	question: TQuestionViewData;
+	answer: unknown;
+	layoutTemplate: string;
+	pageCaption?: string;
+	continueButtonText: string;
+	backLink?: string;
+	showBackToListLink: boolean;
+	listLink: string;
+	journeyTitle: string;
+	payload?: unknown;
+	util: {
+		trimTrailingSlash: (str: string) => string;
+	};
+	[key: string]: unknown;
+}
+
+export interface PrepQuestionForRenderingOptions {
+	params: RouteParams;
+	manageListQuestion?: ManageListQuestion;
+}
+
+/**
+ * Define a question class type so that projects downstream can extend the
+ * Question class and still pass them to the createQuestions function.
+ */
+export type QuestionClass<TQuestion extends Question = Question> = new (...args: never[]) => TQuestion;
+
+/**
+ * Action link displayed in summary lists
+ */
+export interface ActionView {
+	href: string;
+	text: string;
+	visuallyHiddenText?: string;
+}
+
+/**
+ * A row in a summary list, returned by formatAnswerForSummary
+ */
+export interface SummaryRow {
+	key: string;
+	value: string;
+	action?: ActionView | ActionView[];
+}

package/{src → typedefs}/section-types.d.ts

@@ -1,7 +1,7 @@
 import { JourneyResponse } from '#src/journey/journey-response.js';
 import ManageListQuestion from '#src/components/manage-list/question.js';
 import { Question } from '#src/questions/question.js';
-import { RouteParams } from '#src/journey/journey-types.d.ts';
+import { RouteParams } from './journey-types.d.ts';
 
 export interface GetNextQuestionParams {
 	questionFieldName: string;

package/typedefs/section-types.js

@@ -0,0 +1 @@
+// empty source file to go with .d.ts file

package/move-types.js

@@ -1,12 +0,0 @@
-import { copyFile } from 'node:fs/promises';
-import path from 'path';
-
-const filesToCopy = ['questions/question-props.d.ts', 'questions/question-types.d.ts', 'journey/journey-types.d.ts'];
-
-// copy some of the type definition files to the types output that are not automatically included
-for (const file of filesToCopy) {
-	const src = path.join(import.meta.dirname, 'src', file);
-	const dest = path.join(import.meta.dirname, 'types', 'src', file);
-	await copyFile(src, dest);
-	console.log(`Copied ${src} to ${dest}`);
-}