@planning-inspectorate/dynamic-forms 2.1.0 → 2.2.0

package/README.md

@@ -199,7 +199,88 @@ These conditions combine with individual conditions and section conditions. In t
 | q6       | q1 = 'yes'        | q5 = 90          | N/A                 |
 | q7       | q1 = 'yes'        | q5 = 90          | N/A                 |
 
+### Email Validation
 
+Email validation is provided through the `EmailValidator` class and `EmailQuestion` component. The validator uses express-validator's robust email validation with configurable options.
+
+#### Basic Usage
+
+```javascript
+import { COMPONENT_TYPES } from '@planning-inspectorate/dynamic-forms/src/index.js';
+import { createQuestions } from '@planning-inspectorate/dynamic-forms/src/questions/create-questions.js';
+import { questionClasses } from '@planning-inspectorate/dynamic-forms/src/questions/questions.js';
+import EmailValidator from '@planning-inspectorate/dynamic-forms/src/validator/email-validator.js';
+
+// Define question configuration
+const questionProps = {
+    contactEmail: {
+        type: COMPONENT_TYPES.EMAIL,
+        title: 'Contact Information',
+        question: 'What is your email address?',
+        fieldName: 'contactEmail',
+        url: 'contact-email',
+        label: 'Email address',
+        validators: [
+            new EmailValidator({
+                errorMessage: 'Enter an email address in the correct format, like name@example.com'
+            })
+        ]
+    }
+};
+
+// Create questions using the factory function
+const questions = createQuestions(questionProps, questionClasses, {});
+const emailQuestion = questions.contactEmail;
+```
+
+The EmailQuestion uses the following default input attributes:
+
+- `type="email"`
+- `spellcheck="false"`
+- `autocomplete="email"`
+
+#### Advanced Validation Options
+
+For stricter email validation requirements:
+
+```javascript
+const businessEmailValidator = new EmailValidator({
+    options: {
+        allowDisplayName: false,        // Reject "Name <email@domain.com>" format
+        requireTld: true,              // Require top-level domain (default: true)
+        allowUtf8LocalPart: false,     // Only ASCII characters in local part
+        allowIpDomain: false           // Don't allow IP addresses as domain
+    },
+    errorMessage: 'Enter a valid business email address'
+});
+```
+
+#### Alternative: Single Line Input with Email Attributes
+
+You can also configure a single line input with email-specific attributes:
+
+```javascript
+import { COMPONENT_TYPES } from '@planning-inspectorate/dynamic-forms/src/index.js';
+import { createQuestions } from '@planning-inspectorate/dynamic-forms/src/questions/create-questions.js';
+import { questionClasses } from '@planning-inspectorate/dynamic-forms/src/questions/questions.js';
+import EmailValidator from '@planning-inspectorate/dynamic-forms/src/validator/email-validator.js';
+
+const questionProps = {
+    contactEmail: {
+        type: COMPONENT_TYPES.SINGLE_LINE_INPUT,
+        title: 'Contact Information',
+        question: 'What is your email address?',
+        fieldName: 'contactEmail',
+        url: 'contact-email',
+        label: 'Email address',
+        inputAttributes: { type: 'email', spellcheck: 'false' },
+        autocomplete: 'email',
+        validators: [new EmailValidator()]
+    }
+};
+
+const questions = createQuestions(questionProps, questionClasses, {});
+```
 
 ## Contributing
 

package/package.json

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

package/src/components/email/question.js

@@ -0,0 +1,55 @@
+import SingleLineInputQuestion from '../single-line-input/question.js';
+
+/**
+ * @typedef {import('../../questions/question.js').QuestionViewModel} QuestionViewModel
+ * @typedef {import('../../journey/journey.js').Journey} Journey
+ * @typedef {import('../../journey/journey-response.js').JourneyResponse} JourneyResponse
+ * @typedef {import('../../section').Section} Section
+ * @typedef {import('../../validator/base-validator')} BaseValidator
+ */
+
+/**
+ * Email input question that extends SingleLineInputQuestion
+ * Automatically sets the input type to "email" and adds appropriate attributes
+ * @class
+ */
+export default class EmailQuestion extends SingleLineInputQuestion {
+	/**
+	 * @param {import('#question-types').QuestionParameters} params
+	 * @param {string|undefined} [params.label] if defined this show as a label for the input and the question will just be a standard h1
+	 * @param {Record<string, string>} [params.inputAttributes] html attributes to add to the input (will be merged with email defaults)
+	 * @param {string} [params.classes] html classes to add to the input
+	 * @param {string} [params.autocomplete] autocomplete attribute value (defaults to 'email')
+	 */
+	constructor(params) {
+		// Set default input attributes for email
+		const emailInputAttributes = {
+			type: 'email',
+			spellcheck: 'false',
+			...params.inputAttributes
+		};
+
+		// Set default autocomplete for email if not provided
+		const autocomplete = params.autocomplete || 'email';
+
+		super({
+			...params,
+			viewFolder: 'single-line-input', // Reuse single-line-input template
+			inputAttributes: emailInputAttributes,
+			autocomplete: autocomplete
+		});
+	}
+
+	/**
+	 * Override formatAnswerForSummary to prevent capitalization of email addresses
+	 * Email addresses should remain in their original case (typically lowercase)
+	 * @param {string} sectionSegment
+	 * @param {import('../../journey/journey.js').Journey} journey
+	 * @param {string} answer
+	 * @returns {Array}
+	 */
+	formatAnswerForSummary(sectionSegment, journey, answer) {
+		// Call parent method with capitals=false to prevent email capitalization
+		return super.formatAnswerForSummary(sectionSegment, journey, answer, false);
+	}
+}

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

@@ -0,0 +1,146 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert';
+import EmailQuestion from './question.js';
+
+describe('src/dynamic-forms/components/email/question.js', () => {
+	it('should create an email question with default attributes', () => {
+		const emailQuestion = new EmailQuestion({
+			title: 'Email Address',
+			question: 'What is your email address?',
+			fieldName: 'email'
+		});
+
+		assert.strictEqual(emailQuestion.viewFolder, 'single-line-input');
+		assert.strictEqual(emailQuestion.inputAttributes.type, 'email');
+		assert.strictEqual(emailQuestion.inputAttributes.spellcheck, 'false');
+		assert.strictEqual(emailQuestion.autocomplete, 'email');
+	});
+
+	it('should allow custom input attributes while preserving email defaults', () => {
+		const customAttributes = {
+			placeholder: 'Enter your email',
+			'data-testid': 'email-input'
+		};
+
+		const emailQuestion = new EmailQuestion({
+			title: 'Email Address',
+			question: 'What is your email address?',
+			fieldName: 'email',
+			inputAttributes: customAttributes
+		});
+
+		// Should preserve email-specific attributes
+		assert.strictEqual(emailQuestion.inputAttributes.type, 'email');
+		assert.strictEqual(emailQuestion.inputAttributes.spellcheck, 'false');
+
+		// Should include custom attributes
+		assert.strictEqual(emailQuestion.inputAttributes.placeholder, 'Enter your email');
+		assert.strictEqual(emailQuestion.inputAttributes['data-testid'], 'email-input');
+	});
+
+	it('should allow overriding default attributes', () => {
+		const overrideAttributes = {
+			type: 'text', // Override the default email type
+			spellcheck: 'true' // Override the default spellcheck
+		};
+
+		const emailQuestion = new EmailQuestion({
+			title: 'Email Address',
+			question: 'What is your email address?',
+			fieldName: 'email',
+			inputAttributes: overrideAttributes
+		});
+
+		// Should use overridden values
+		assert.strictEqual(emailQuestion.inputAttributes.type, 'text');
+		assert.strictEqual(emailQuestion.inputAttributes.spellcheck, 'true');
+	});
+
+	it('should set custom autocomplete attribute', () => {
+		const emailQuestion = new EmailQuestion({
+			title: 'Work Email',
+			question: 'What is your work email address?',
+			fieldName: 'workEmail',
+			autocomplete: 'work email'
+		});
+
+		assert.strictEqual(emailQuestion.autocomplete, 'work email');
+	});
+
+	it('should include label when provided', () => {
+		const emailQuestion = new EmailQuestion({
+			title: 'Contact Email',
+			question: 'Provide your contact information',
+			fieldName: 'contactEmail',
+			label: 'Email Address'
+		});
+
+		assert.strictEqual(emailQuestion.label, 'Email Address');
+	});
+
+	it('should include custom classes when provided', () => {
+		const emailQuestion = new EmailQuestion({
+			title: 'Email Address',
+			question: 'What is your email address?',
+			fieldName: 'email',
+			classes: 'govuk-input--width-20'
+		});
+
+		assert.strictEqual(emailQuestion.classes, 'govuk-input--width-20');
+	});
+
+	it('should prepare question for rendering correctly', () => {
+		const emailQuestion = new EmailQuestion({
+			title: 'Email Address',
+			question: 'What is your email address?',
+			fieldName: 'email',
+			label: 'Your Email',
+			hint: 'We will use this to contact you'
+		});
+
+		// Mock section and journey objects with proper structure
+		const mockSection = {
+			name: 'contact',
+			segment: 'contact-section'
+		};
+		const mockJourney = {
+			response: {
+				answers: {
+					email: 'existing@example.com'
+				}
+			},
+			getBackLink: () => '/back'
+		};
+		const mockCustomViewData = {};
+		const mockPayload = { email: 'test@example.com' };
+
+		const viewModel = emailQuestion.prepQuestionForRendering(mockSection, mockJourney, mockCustomViewData, mockPayload);
+
+		assert.strictEqual(viewModel.question.fieldName, 'email');
+		assert.strictEqual(viewModel.question.label, 'Your Email');
+		assert.strictEqual(viewModel.question.value, 'test@example.com');
+		assert.strictEqual(viewModel.question.type, 'email');
+		assert.strictEqual(viewModel.question.attributes.spellcheck, 'false');
+	});
+
+	it('should not capitalize email addresses in summary', () => {
+		const emailQuestion = new EmailQuestion({
+			title: 'Email Address',
+			question: 'What is your email address?',
+			fieldName: 'email'
+		});
+
+		const mockSection = { segment: 'contact' };
+		const mockJourney = {
+			getCurrentQuestionUrl: () => '/questions/email'
+		};
+		const emailAddress = 'test@example.com';
+
+		const summary = emailQuestion.formatAnswerForSummary(mockSection.segment, mockJourney, emailAddress);
+
+		// Should preserve the original case of the email address
+		assert.strictEqual(summary.length, 1);
+		assert.match(summary[0].value, /test@example\.com/);
+		assert.doesNotMatch(summary[0].value, /Test@example\.com/);
+	});
+});

package/src/components/single-line-input/index.njk

@@ -40,7 +40,7 @@
                         },
                         classes: question.classes,
                         attributes: question.attributes,
-                        type: question.attributes.type,
+                        type: question.type,
                         autocomplete: question.autocomplete
                     }) }}
                 {% else %}
@@ -64,7 +64,7 @@
                         },
                         classes: question.classes,
                         attributes: question.attributes,
-                        type: question.attributes.type,
+                        type: question.type,
                         autocomplete: question.autocomplete
                     }) }}
 

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

@@ -36,7 +36,12 @@ export default class SingleLineInputQuestion extends Question {
 		let viewModel = super.prepQuestionForRendering(section, journey, customViewData);
 		viewModel.question.label = this.label;
 		viewModel.question.value = payload ? payload[viewModel.question.fieldName] : viewModel.question.value;
-		viewModel.question.attributes = this.inputAttributes;
+
+		// Extract type from attributes to pass separately to avoid duplication
+		const { type, ...otherAttributes } = this.inputAttributes;
+		viewModel.question.attributes = otherAttributes;
+		viewModel.question.type = type;
+
 		viewModel.question.classes = this.classes;
 		return viewModel;
 	}

package/src/index.js

@@ -3,7 +3,7 @@
  */
 
 /**
- * @type {Readonly<{CHECKBOX: QuestionTypes, BOOLEAN: QuestionTypes, RADIO: QuestionTypes, DATE: QuestionTypes, DATE_PERIOD: QuestionTypes, TEXT_ENTRY: QuestionTypes, TEXT_ENTRY_REDACT: QuestionTypes, SELECT: QuestionTypes, SINGLE_LINE_INPUT: QuestionTypes, MULTI_FIELD_INPUT: QuestionTypes, NUMBER: QuestionTypes, ADDRESS: QuestionTypes, UNIT_OPTION: QuestionTypes}>}
+ * @type {Readonly<{CHECKBOX: QuestionTypes, BOOLEAN: QuestionTypes, RADIO: QuestionTypes, DATE: QuestionTypes, DATE_PERIOD: QuestionTypes, TEXT_ENTRY: QuestionTypes, TEXT_ENTRY_REDACT: QuestionTypes, SELECT: QuestionTypes, SINGLE_LINE_INPUT: QuestionTypes, MULTI_FIELD_INPUT: QuestionTypes, NUMBER: QuestionTypes, ADDRESS: QuestionTypes, UNIT_OPTION: QuestionTypes, EMAIL: QuestionTypes}>}
  */
 export const COMPONENT_TYPES = Object.freeze({
 	CHECKBOX: 'checkbox',
@@ -19,5 +19,6 @@ export const COMPONENT_TYPES = Object.freeze({
 	MULTI_FIELD_INPUT: 'multi-field-input',
 	NUMBER: 'number',
 	ADDRESS: 'site-address',
-	UNIT_OPTION: 'unit-option'
+	UNIT_OPTION: 'unit-option',
+	EMAIL: 'email'
 });

package/src/questions/questions.js

@@ -10,6 +10,7 @@ import SingleLineInputQuestion from '../components/single-line-input/question.js
 import MultiFieldInputQuestion from '../components/multi-field-input/question.js';
 import NumberEntryQuestion from '../components/number-entry/question.js';
 import UnitOptionEntryQuestion from '../components/unit-option-entry/question.js';
+import EmailQuestion from '../components/email/question.js';
 
 import { COMPONENT_TYPES } from '../index.js';
 import TextEntryRedactQuestion from '../components/text-entry-redact/question.js';
@@ -33,5 +34,6 @@ export const questionClasses = Object.freeze({
 	[COMPONENT_TYPES.SINGLE_LINE_INPUT]: SingleLineInputQuestion,
 	[COMPONENT_TYPES.MULTI_FIELD_INPUT]: MultiFieldInputQuestion,
 	[COMPONENT_TYPES.NUMBER]: NumberEntryQuestion,
-	[COMPONENT_TYPES.UNIT_OPTION]: UnitOptionEntryQuestion
+	[COMPONENT_TYPES.UNIT_OPTION]: UnitOptionEntryQuestion,
+	[COMPONENT_TYPES.EMAIL]: EmailQuestion
 });

package/src/validator/email-validator.js

@@ -0,0 +1,41 @@
+import { body } from 'express-validator';
+
+import BaseValidator from './base-validator.js';
+
+/**
+ * @typedef {Object} EmailValidationOptions
+ * @property {boolean} [allowDisplayName] - Allow display names (e.g., "John Doe <john@example.com>")
+ * @property {boolean} [requireTld] - Require top-level domain
+ * @property {boolean} [allowUtf8LocalPart] - Allow UTF8 characters in local part
+ * @property {boolean} [allowIpDomain] - Allow IP addresses as domain
+ * @property {string} [errorMessage] - Custom error message
+ */
+
+export default class EmailValidator extends BaseValidator {
+	/**
+	 * @param {Object} params
+	 * @param {EmailValidationOptions} [params.options] - Email validation options
+	 * @param {string} [params.errorMessage] - Custom error message
+	 * @param {string} [params.fieldName] - Field name to validate
+	 */
+	constructor({ options = {}, errorMessage, fieldName } = {}) {
+		super();
+
+		this.options = {
+			allow_display_name: options.allowDisplayName || false,
+			require_tld: options.requireTld !== false, // Default to true
+			allow_utf8_local_part: options.allowUtf8LocalPart !== undefined ? options.allowUtf8LocalPart : true,
+			allow_ip_domain: options.allowIpDomain || false,
+			...options
+		};
+
+		this.errorMessage = errorMessage || 'Enter an email address in the correct format, like name@example.com';
+		this.fieldName = fieldName;
+	}
+
+	validate(questionObj) {
+		const fieldName = this.fieldName || questionObj.fieldName;
+
+		return body(fieldName).isEmail(this.options).withMessage(this.errorMessage);
+	}
+}

package/src/validator/email-validator.test.js

@@ -0,0 +1,166 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert';
+import EmailValidator from './email-validator.js';
+
+describe('src/dynamic-forms/validator/email-validator.js', () => {
+	// Helper function to create validation test
+	const createValidationTest = async (email, fieldName = 'email') => {
+		const req = {
+			body: {
+				[fieldName]: email
+			}
+		};
+		const question = {
+			fieldName
+		};
+		return await new EmailValidator().validate(question).run(req);
+	};
+
+	// Valid email addresses
+	const validEmails = [
+		'test@example.com',
+		'test+tag@example.com',
+		'first.last@example.com',
+		'user@mail.example.com',
+		'test@example.org',
+		'verylongusernamethatisusuallynotrecommended@verylongdomainnamethatisalsounusual.com'
+	];
+
+	validEmails.forEach((email) => {
+		it(`should validate "${email}" as a correct email address`, async () => {
+			const validationResult = await createValidationTest(email);
+			assert.strictEqual(validationResult.errors.length, 0);
+		});
+	});
+
+	// Invalid email addresses
+	const invalidEmails = ['invalid-email', 'test@', 'testexample.com', '', 'test @example.com'];
+
+	invalidEmails.forEach((email) => {
+		it(`should invalidate "${email}" as an incorrect email format`, async () => {
+			const validationResult = await createValidationTest(email);
+			assert.strictEqual(validationResult.errors.length, 1);
+			assert.strictEqual(
+				validationResult.errors[0].msg,
+				'Enter an email address in the correct format, like name@example.com'
+			);
+		});
+	});
+
+	it('should handle undefined email field as invalid', async () => {
+		const req = {
+			body: {}
+		};
+		const question = {
+			fieldName: 'email'
+		};
+		const validationResult = await new EmailValidator().validate(question).run(req);
+		assert.strictEqual(validationResult.errors.length, 1);
+	});
+
+	it('should use custom error message when provided', async () => {
+		const req = {
+			body: {
+				email: 'invalid-email'
+			}
+		};
+		const question = {
+			fieldName: 'email'
+		};
+		const customMessage = 'Please provide a valid email address';
+		const validationResult = await new EmailValidator({ errorMessage: customMessage }).validate(question).run(req);
+		assert.strictEqual(validationResult.errors.length, 1);
+		assert.strictEqual(validationResult.errors[0].msg, customMessage);
+	});
+
+	it('should handle display names when option is enabled', async () => {
+		const req = {
+			body: {
+				email: 'John Doe <john@example.com>'
+			}
+		};
+		const question = {
+			fieldName: 'email'
+		};
+		const validationResult = await new EmailValidator({
+			options: { allowDisplayName: true }
+		})
+			.validate(question)
+			.run(req);
+		assert.strictEqual(validationResult.errors.length, 0);
+	});
+
+	it('should reject display names when option is disabled', async () => {
+		const req = {
+			body: {
+				email: 'John Doe <john@example.com>'
+			}
+		};
+		const question = {
+			fieldName: 'email'
+		};
+		const validationResult = await new EmailValidator({
+			options: { allowDisplayName: false }
+		})
+			.validate(question)
+			.run(req);
+		assert.strictEqual(validationResult.errors.length, 1);
+	});
+
+	it('should validate email with custom fieldName', async () => {
+		const req = {
+			body: {
+				contactEmail: 'test@example.com'
+			}
+		};
+		const question = {
+			fieldName: 'someOtherField'
+		};
+		const validationResult = await new EmailValidator({
+			fieldName: 'contactEmail'
+		})
+			.validate(question)
+			.run(req);
+		assert.strictEqual(validationResult.errors.length, 0);
+	});
+
+	it('should reject UTF8 characters when allowUtf8LocalPart is false', async () => {
+		const req = {
+			body: {
+				email: 'tëst@example.com'
+			}
+		};
+		const question = {
+			fieldName: 'email'
+		};
+		const validationResult = await new EmailValidator({
+			options: { allowUtf8LocalPart: false }
+		})
+			.validate(question)
+			.run(req);
+
+		assert.strictEqual(validationResult.errors.length, 1);
+		assert.strictEqual(
+			validationResult.errors[0].msg,
+			'Enter an email address in the correct format, like name@example.com'
+		);
+	});
+
+	it('should accept UTF8 characters when allowUtf8LocalPart is true (default)', async () => {
+		const req = {
+			body: {
+				email: 'tëst@example.com'
+			}
+		};
+		const question = {
+			fieldName: 'email'
+		};
+		const validationResult = await new EmailValidator({
+			options: { allowUtf8LocalPart: true }
+		})
+			.validate(question)
+			.run(req);
+
+		assert.strictEqual(validationResult.errors.length, 0);
+	});
+});

package/test/journey.js

@@ -28,6 +28,7 @@ export function createJourney(questions, response) {
 				.addQuestion(questions.nights)
 				.addQuestion(questions.hotelAddress)
 				.addQuestion(questions.luggageWeight)
+				.addQuestion(questions.contactEmail)
 		],
 		taskListUrl: 'check-your-answers',
 		journeyTemplate: 'views/layout-journey.njk',

package/test/questions.js

@@ -1,6 +1,7 @@
 import { COMPONENT_TYPES } from '../src/index.js';
 import { createQuestions } from '../src/questions/create-questions.js';
 import { questionClasses } from '../src/questions/questions.js';
+import EmailValidator from '../src/validator/email-validator.js';
 
 /**
  * @typedef {import('../src/questions/question-props.js').QuestionProps} Props
@@ -164,6 +165,15 @@ export const questionProps = {
 				conditional: { label: 'Weight in pounds', fieldName: 'luggageWeightValue_lbs', suffix: 'lbs' }
 			}
 		]
+	},
+	contactEmail: {
+		type: COMPONENT_TYPES.EMAIL,
+		title: 'Contact Email',
+		question: 'What is your email address for booking confirmations?',
+		fieldName: 'contactEmail',
+		url: 'contact-email',
+		label: 'Email address',
+		validators: [new EmailValidator()]
 	}
 };
 
@@ -183,7 +193,8 @@ export const questionsInOrder = [
 	questionProps.companions,
 	questionProps.nights,
 	questionProps.hotelAddress,
-	questionProps.luggageWeight
+	questionProps.luggageWeight,
+	questionProps.contactEmail
 ];
 
 export const getQuestions = () => createQuestions(questionProps, questionClasses, {});

package/test/questions.test.js

@@ -193,6 +193,8 @@ export function mockAnswerBody(q) {
 				[q.fieldName]: 'kg',
 				[q.options[0].conditional.fieldName]: 10
 			};
+		case COMPONENT_TYPES.EMAIL:
+			return { [q.fieldName]: 'test@example.com' };
 		default:
 			return { [q.fieldName]: 'test' };
 	}
@@ -240,6 +242,8 @@ export function mockAnswer(q) {
 		}
 		case COMPONENT_TYPES.UNIT_OPTION:
 			return '10 kg';
+		case COMPONENT_TYPES.EMAIL:
+			return 'test@example.com';
 		default:
 			return 'test';
 	}

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

@@ -185,6 +185,17 @@
       <a class="govuk-link" href="questions/luggage-weight-units">Answer<span class="govuk-visually-hidden"> Select your luggage weight and unit.</span></a>
     </dd>
   </div>
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Contact Email
+    </dt>
+    <dd class="govuk-summary-list__value">
+      Not started
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <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>
 </dl>
 
         <form action method="post">

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

@@ -185,6 +185,17 @@
       <a class="govuk-link" href="questions/luggage-weight-units">Change<span class="govuk-visually-hidden"> Select your luggage weight and unit.</span></a>
     </dd>
   </div>
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Contact Email
+    </dt>
+    <dd class="govuk-summary-list__value">
+      test@example.com
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <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>
 </dl>
 
         <form action method="post">

package/test/snapshots/contact-email.html

@@ -0,0 +1,23 @@
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+            <form action="" method="post" novalidate>
+                    <h1 class="govuk-heading-l">
+                        What is your email address for booking confirmations?
+                    </h1>
+
+
+
+                    <div class="govuk-form-group">
+  <label class="govuk-label govuk-label" for="contactEmail">
+    Email address
+  </label>
+  <input class="govuk-input" id="contactEmail" name="contactEmail" type="email" value="" autocomplete="email" spellcheck="false">
+</div>
+
+
+                <button type="submit" class="govuk-button" data-module="govuk-button" data-cy="button-save-and-continue">
+  Continue
+</button>
+            </form>
+        </div>
+    </div>