@planning-inspectorate/dynamic-forms 1.17.0 → 2.0.1

package/src/components/select/index.njk

@@ -1,6 +1,5 @@
 {% extends layoutTemplate %}
 
-{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
 {% from "govuk/components/select/macro.njk" import govukSelect %}
 {% from "govuk/components/button/macro.njk" import govukButton %}
 
@@ -10,23 +9,7 @@
     {{ super() }}
 {% endblock %}
 
-{% block before_content %}
-    <div class="govuk-grid-row">
-        <div class="govuk-grid-column-two-thirds">
-            {% if errorSummary %}
-                {{ govukErrorSummary({
-                    titleText: "There is a problem",
-                    errorList: errorSummary,
-                    attributes: {"data-cy": "error-wrapper"}
-                }) }}
-            {% endif %}
-        </div>
-    </div>
-
-    {{ super() }}
-{% endblock before_content %}
-
-{% block content %}
+{% block dynQuestionContent %}
     <div class="govuk-grid-row">
         <div class="govuk-grid-column-two-thirds">
             <form action="" method="POST" novalidate>
@@ -44,7 +27,7 @@
                         classes: "govuk-label--l",
                         isPageHeading: true
                     },
-                    hint: {
+                    hint: question.hint and {
                         text: question.hint
                     },
                     errorMessage: errors[question.fieldName] and {

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

@@ -1,31 +1,14 @@
 {% extends layoutTemplate %}
 
-{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
 {% from "govuk/components/input/macro.njk" import govukInput %}
 {% from "govuk/components/label/macro.njk" import govukLabel %}
 {% from "govuk/components/button/macro.njk" import govukButton %}
 
-{% block before_content %}
-    <div class="govuk-grid-row">
-        <div class="govuk-grid-column-two-thirds">
-            {% if errorSummary %}
-                {{ govukErrorSummary({
-                    titleText: "There is a problem",
-                    errorList: errorSummary,
-                    attributes: {"data-cy": "error-wrapper"}
-                }) }}
-            {% endif %}
-        </div>
-    </div>
-
-    {{ super() }}
-{% endblock before_content %}
-
-{% block content %}
+{% block dynQuestionContent %}
     <div class="govuk-grid-row">
         <div class="govuk-grid-column-two-thirds">
             <form action="" method="post" novalidate>
-                <input type="hidden" name="_csrf" value="{{ _csrf }}">
+                {% if _csrf %}<input type="hidden" name="_csrf" value="{{ _csrf }}">{% endif %}
                 {% if question.label %}
                     <h1 class="govuk-heading-l">
                         {{ question.question }}
@@ -51,7 +34,7 @@
                         id: question.fieldName,
                         name: question.fieldName,
                         value: question.value,
-                        hint: { text: question.hint },
+                        hint: question.hint and { text: question.hint },
                         errorMessage: errors[question.fieldName] and {
                             text: errors[question.fieldName].msg
                         },
@@ -75,7 +58,7 @@
                         id: question.fieldName,
                         name: question.fieldName,
                         value: question.value,
-                        hint: { text: question.hint },
+                        hint: question.hint and { text: question.hint },
                         errorMessage: errors[question.fieldName] and {
                             text: errors[question.fieldName].msg
                         },

package/src/components/task-list/index.njk

@@ -1,14 +1,12 @@
 {% extends layoutTemplate %}
+
 {% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
 {% from "govuk/components/tag/macro.njk" import govukTag %}
 {% from "govuk/components/button/macro.njk" import govukButton %}
 {% from "./task-list-multi-section.njk" import multiTaskList %}
 {% from "./task-list-single-section.njk" import singleTaskList %}
 
-{% block content %}
-    {% block beforeTaskList %}
-    {% endblock %}
-
+{% block dynTaskList %}
     <style {% if cspNonce %}nonce={{ cspNonce }}{% endif %}>
         .app-task-list {
           padding-left: 0;
@@ -37,8 +35,4 @@
             {% endif %}
         </div>
     </div>
-
-    {% block afterTaskList %}
-    {% endblock %}
-
 {% endblock %}

package/src/components/text-entry/index.njk

@@ -1,32 +1,15 @@
 {% extends layoutTemplate %}
 
-{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
 {% from "govuk/components/textarea/macro.njk" import govukTextarea %}
 {% from "govuk/components/label/macro.njk" import govukLabel %}
 {% from "govuk/components/button/macro.njk" import govukButton %}
 {% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
 
-{% block before_content %}
-    <div class="govuk-grid-row">
-        <div class="govuk-grid-column-two-thirds">
-            {% if errorSummary %}
-                {{ govukErrorSummary({
-                    titleText: "There is a problem",
-                    errorList: errorSummary,
-                    attributes: {"data-cy": "error-wrapper"}
-                }) }}
-            {% endif %}
-        </div>
-    </div>
-
-    {{ super() }}
-{% endblock before_content %}
-
-{% block content %}
+{% block dynQuestionContent %}
     <div class="govuk-grid-row">
         <div class="govuk-grid-column-two-thirds">
             <form action="" method="post" novalidate>
-                <input type="hidden" name="_csrf" value="{{ _csrf }}">
+                {% if _csrf %}<input type="hidden" name="_csrf" value="{{ _csrf }}">{% endif %}
                 {% if question.label %}
                     <h1 class="govuk-heading-l">
                         {{ question.question }}
@@ -43,7 +26,7 @@
                         id: question.fieldName,
                         name: question.fieldName,
                         value: question.value,
-                        hint: { text: question.hint },
+                        hint: question.hint and { text: question.hint },
                         errorMessage: errors[question.fieldName] and {
                             text: errors[question.fieldName].msg
                         },
@@ -65,7 +48,7 @@
                         id: question.fieldName,
                         name: question.fieldName,
                         value: question.value,
-                        hint: { text: question.hint },
+                        hint: question.hint and { text: question.hint },
                         errorMessage: errors[question.fieldName] and {
                             text: errors[question.fieldName].msg
                         },

package/src/components/text-entry-redact/index.njk

@@ -3,32 +3,15 @@
 {% from "govuk/components/button/macro.njk" import govukButton %}
 {% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
 {% from "govuk/components/details/macro.njk" import govukDetails %}
-{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
 {% from "govuk/components/label/macro.njk" import govukLabel %}
 {% from "govuk/components/table/macro.njk" import govukTable %}
 {% from "govuk/components/textarea/macro.njk" import govukTextarea %}
 
-{% block before_content %}
-    <div class="govuk-grid-row">
-        <div class="govuk-grid-column-two-thirds">
-            {% if errorSummary %}
-                {{ govukErrorSummary({
-                    titleText: "There is a problem",
-                    errorList: errorSummary,
-                    attributes: {"data-cy": "error-wrapper"}
-                }) }}
-            {% endif %}
-        </div>
-    </div>
-
-    {{ super() }}
-{% endblock before_content %}
-
-{% block content %}
+{% block dynQuestionContent %}
     <div class="govuk-grid-row">
         <div class="govuk-grid-column-two-thirds">
             <form action="" method="post" novalidate>
-                <input type="hidden" name="_csrf" value="{{ _csrf }}">
+                {% if _csrf %}<input type="hidden" name="_csrf" value="{{ _csrf }}">{% endif %}
 
                 {% if question.label %}
                     {{ govukLabel({

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

@@ -55,7 +55,7 @@ describe('./src/dynamic-forms/components/text-entry-redact/question.js', () => {
 			}
 		};
 		const customViewData = {
-			layoutTemplate: 'views/layout-question.njk',
+			layoutTemplate: 'views/layout-journey.njk',
 			question: {
 				question: 'Redaction Question',
 				fieldName: 'field-name',
@@ -94,7 +94,7 @@ describe('./src/dynamic-forms/components/text-entry-redact/question.js', () => {
 			}
 		};
 		const customViewData = {
-			layoutTemplate: 'views/layout-question.njk',
+			layoutTemplate: 'views/layout-journey.njk',
 			question: {
 				question: 'Redaction Question',
 				fieldName: 'field-name',
@@ -134,7 +134,7 @@ describe('./src/dynamic-forms/components/text-entry-redact/question.js', () => {
 			}
 		};
 		const customViewData = {
-			layoutTemplate: 'views/layout-question.njk',
+			layoutTemplate: 'views/layout-journey.njk',
 			question: {
 				question: 'Redaction Question',
 				fieldName: 'field-name',
@@ -181,7 +181,7 @@ describe('./src/dynamic-forms/components/text-entry-redact/question.js', () => {
 			}
 		};
 		const customViewData = {
-			layoutTemplate: 'views/layout-question.njk',
+			layoutTemplate: 'views/layout-journey.njk',
 			question: {
 				question: 'Redaction Question',
 				fieldName: 'field-name',

package/src/components/unit-option-entry/index.njk

@@ -1,31 +1,14 @@
 {% extends layoutTemplate %}
 
-{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
 {% from "govuk/components/radios/macro.njk" import govukRadios %}
 {% from "govuk/components/button/macro.njk" import govukButton %}
 {% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
 
-{% block before_content %}
-    <div class="govuk-grid-row">
-        <div class="govuk-grid-column-two-thirds">
-            {% if errorSummary %}
-                {{ govukErrorSummary({
-                    titleText: "There is a problem",
-                    errorList: errorSummary,
-                    attributes: {"data-cy": "error-wrapper"}
-                }) }}
-            {% endif %}
-        </div>
-    </div>
-
-    {{ super() }}
-{% endblock before_content %}
-
-{% block content %}
+{% block dynQuestionContent %}
     <div class="govuk-grid-row">
         <div class="govuk-grid-column-two-thirds">
             <form action="" method="post" novalidate>
-                <input type="hidden" name="_csrf" value="{{ _csrf }}">
+                {% if _csrf %}<input type="hidden" name="_csrf" value="{{ _csrf }}">{% endif %}
 
                 {% call govukFieldset({
                     legend: {
@@ -35,7 +18,9 @@
                     }
                 }) %}
 
-                    <p class="govuk-body">{{ question.description }}</p>
+                    {%- if question.description %}
+                        <p class="govuk-body">{{ question.description }}</p>
+                    {%- endif -%}
                     {% if question.html %}
                         {% include question.html ignore missing %}
                     {% endif %}

package/src/controller.js

@@ -124,12 +124,12 @@ export async function list(req, res, pageCaption, viewData) {
 		summaryListData.sections.push(sectionView);
 	}
 
-	return res.render(journey.listingPageViewPath, {
+	return res.render('components/task-list/index', {
 		...viewData,
 		pageCaption,
 		summaryListData,
 		journeyComplete: journey.isComplete(),
-		layoutTemplate: journey.journeyTemplate,
+		layoutTemplate: journey.taskListTemplate,
 		journeyTitle: journey.journeyTitle
 	});
 }

package/src/controller.test.js

@@ -156,7 +156,7 @@ const journeyParams = {
 	taskListUrl: 'task-list',
 	makeBaseUrl: () => `${mockBaseUrl}/${mockRef}`,
 	journeyTemplate: mockTemplateUrl,
-	listingPageViewPath: mockListingPath,
+	taskListTemplate: mockListingPath,
 	journeyTitle: mockJourneyTitle
 };
 
@@ -223,11 +223,11 @@ describe('dynamic-form/controller', () => {
 			const mockFn = res.render.mock;
 			assert.strictEqual(mockFn.callCount(), 1);
 			assert.deepStrictEqual(mockFn.calls[0].arguments, [
-				mockJourney.listingPageViewPath,
+				'components/task-list/index',
 				{
 					appeal,
 					summaryListData: mockSummaryListData,
-					layoutTemplate: mockTemplateUrl,
+					layoutTemplate: mockListingPath,
 					journeyComplete: false,
 					pageCaption: pageCaption,
 					journeyTitle: mockJourneyTitle
@@ -269,11 +269,11 @@ describe('dynamic-form/controller', () => {
 
 			assert.strictEqual(mockFn.callCount(), 1);
 			assert.deepStrictEqual(mockFn.calls[0].arguments, [
-				mockJourney.listingPageViewPath,
+				'components/task-list/index',
 				{
 					appeal,
 					summaryListData: mockSummaryListData,
-					layoutTemplate: mockTemplateUrl,
+					layoutTemplate: mockListingPath,
 					journeyComplete: false,
 					pageCaption: pageCaption,
 					journeyTitle: mockJourneyTitle

package/src/journey/journey.js

@@ -29,8 +29,8 @@ export class Journey {
 	taskListUrl = '';
 	/** @type {string} journeyTemplate - nunjucks template file used for */
 	journeyTemplate = '';
-	/** @type {string} listingPageViewPath - nunjucks template file used for listing page */
-	listingPageViewPath = '';
+	/** @type {string} taskListTemplate - nunjucks template file used for listing page */
+	taskListTemplate = '';
 	/** @type {string} informationPageViewPath - nunjucks template file used for pdf summary information page */
 	informationPageViewPath = '';
 	/** @type {boolean} defines how the next/previous question handles end of sections */
@@ -46,7 +46,7 @@ export class Journey {
 	 * @param {string} [options.taskListUrl] - task list url - added to base url, can be left undefined
 	 * @param {JourneyResponse} options.response - user's response
 	 * @param {string} options.journeyTemplate - template used for all views
-	 * @param {string} options.listingPageViewPath - path to njk view for listing page
+	 * @param {string} options.taskListTemplate - path to njk view for listing page
 	 * @param {string} [options.informationPageViewPath] - path to njk view for pdf summary page
 	 * @param {string} options.journeyTitle - part of the title in the njk view
 	 * @param {boolean} [options.returnToListing] - defines how the next/previous question handles end of sections
@@ -59,7 +59,7 @@ export class Journey {
 		taskListUrl,
 		response,
 		journeyTemplate,
-		listingPageViewPath,
+		taskListTemplate,
 		informationPageViewPath,
 		journeyTitle,
 		returnToListing,
@@ -86,10 +86,10 @@ export class Journey {
 		}
 		this.journeyTemplate = journeyTemplate;
 
-		if (!listingPageViewPath || typeof listingPageViewPath !== 'string') {
-			throw new Error('listingPageViewPath should be a string.');
+		if (!taskListTemplate || typeof taskListTemplate !== 'string') {
+			throw new Error('taskListTemplate should be a string.');
 		}
-		this.listingPageViewPath = listingPageViewPath;
+		this.taskListTemplate = taskListTemplate;
 
 		this.informationPageViewPath = informationPageViewPath || '';
 

package/src/journey/journey.test.js

@@ -53,7 +53,7 @@ describe('Journey class', () => {
 				answers: {}
 			},
 			journeyTemplate: 'mock template',
-			listingPageViewPath: 'mock path',
+			taskListTemplate: 'mock path',
 			journeyTitle: 'mock title'
 		};
 	});
@@ -114,23 +114,23 @@ describe('Journey class', () => {
 			assert.throws(() => new Journey(constructorArgs), new Error('journeyTemplate should be a string.'));
 		});
 
-		it('should set listingPageViewPath', () => {
-			constructorArgs.listingPageViewPath = 'test';
+		it('should set taskListTemplate', () => {
+			constructorArgs.taskListTemplate = 'test';
 			const journey = new Journey(constructorArgs);
 
-			assert.strictEqual(journey.listingPageViewPath, constructorArgs.listingPageViewPath);
+			assert.strictEqual(journey.taskListTemplate, constructorArgs.taskListTemplate);
 		});
 
-		it('should error if listingPageViewPath not provided', () => {
-			constructorArgs.listingPageViewPath = '';
+		it('should error if taskListTemplate not provided', () => {
+			constructorArgs.taskListTemplate = '';
 
-			assert.throws(() => new Journey(constructorArgs), new Error('listingPageViewPath should be a string.'));
+			assert.throws(() => new Journey(constructorArgs), new Error('taskListTemplate should be a string.'));
 		});
 
-		it('should error if listingPageViewPath not a string', () => {
-			constructorArgs.listingPageViewPath = 123;
+		it('should error if taskListTemplate not a string', () => {
+			constructorArgs.taskListTemplate = 123;
 
-			assert.throws(() => new Journey(constructorArgs), new Error('listingPageViewPath should be a string.'));
+			assert.throws(() => new Journey(constructorArgs), new Error('taskListTemplate should be a string.'));
 		});
 
 		it('should set journeyTitle', () => {

package/src/middleware/redirect-to-unanswered-question.test.js

@@ -46,7 +46,7 @@ describe('redirectToUnansweredQuestion Middleware', () => {
 	const params = {
 		journeyId: 'id-1',
 		journeyTemplate: 'statement-template.njk',
-		listingPageViewPath: 'dynamic-components/task-list/statement',
+		taskListTemplate: 'dynamic-components/task-list/statement',
 		journeyTitle: 'Manage your appeals',
 		sections: [
 			new Section('', 'section-1')

package/src/validator/address-validator.js

@@ -143,7 +143,7 @@ export default class AddressValidator extends BaseValidator {
 		return validator
 			.isLength({ min: postcodeMinLength, max: postcodeMaxLength })
 			.bail()
-			.withMessage(`Postcode must be between ${postcodeMinLength} and ${postcodeMaxLength} characters`)
+			.withMessage(`Postcode must be less than ${postcodeMaxLength} characters`)
 			.custom((postcode) => {
 				return validatePostcode(postcode);
 			});

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

@@ -6,7 +6,6 @@ import AddressValidator, {
 	addressLine1MaxLength,
 	addressLine2MaxLength,
 	postcodeMaxLength,
-	postcodeMinLength,
 	townCityMaxLength
 } from './address-validator.js';
 
@@ -108,10 +107,7 @@ describe('AddressValidator', () => {
 			`Address line 2 must be ${addressLine2MaxLength} characters or less`
 		);
 		assert.strictEqual(errors.testField_townCity.msg, `Town or city must be ${townCityMaxLength} characters or less`);
-		assert.strictEqual(
-			errors.testField_postcode.msg,
-			`Postcode must be between ${postcodeMinLength} and ${postcodeMaxLength} characters`
-		);
+		assert.strictEqual(errors.testField_postcode.msg, `Postcode must be less than ${postcodeMaxLength} characters`);
 	});
 });
 

package/test/journey.js

@@ -30,8 +30,8 @@ export function createJourney(questions, response) {
 				.addQuestion(questions.luggageWeight)
 		],
 		taskListUrl: 'check-your-answers',
-		journeyTemplate: 'views/layout-question.njk',
-		listingPageViewPath: 'views/layout-check-your-answers.njk',
+		journeyTemplate: 'views/layout-journey.njk',
+		taskListTemplate: 'views/layout-check-your-answers.njk',
 		journeyTitle: 'Holiday Booking',
 		returnToListing: false,
 		makeBaseUrl: () => '/',

package/test/snapshots/add-insurance.html

@@ -1,23 +1,13 @@
-    <div class="govuk-grid-row">
-        <div class="govuk-grid-column-two-thirds">
-        </div>
-    </div>
-
-    
     <div class="govuk-grid-row">
         <div class="govuk-grid-column-two-thirds">
             <form action="" method="post" novalidate>
-                <input type="hidden" name="_csrf" value="">
                     <div class="govuk-form-group">
-  <fieldset class="govuk-fieldset" aria-describedby="addInsurance-hint">
+  <fieldset class="govuk-fieldset">
     <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
       <h1 class="govuk-fieldset__heading">
         Do you want to add travel insurance to your holiday?
       </h1>
     </legend>
-    <div id="addInsurance-hint" class="govuk-hint">
-      
-    </div>
     <div class="govuk-radios govuk-radios" data-module="govuk-radios">
       <div class="govuk-radios__item">
         <input class="govuk-radios__input" id="addInsurance" name="addInsurance" type="radio" value="yes" data-cy="answer-yes">

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

@@ -1,4 +1,3 @@
-
     <style >
         .app-task-list {
           padding-left: 0;
@@ -197,5 +196,3 @@
 
         </div>
     </div>
-
-

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

@@ -1,4 +1,3 @@
-
     <style >
         .app-task-list {
           padding-left: 0;
@@ -197,5 +196,3 @@
 
         </div>
     </div>
-
-

package/test/snapshots/companions.html

@@ -1,13 +1,6 @@
-    <div class="govuk-grid-row">
-        <div class="govuk-grid-column-two-thirds">
-        </div>
-    </div>
-
-    
     <div class="govuk-grid-row">
         <div class="govuk-grid-column-two-thirds">
             <form action="" method="post" novalidate>
-                <input type="hidden" name="_csrf" value="">
 
 <fieldset class="govuk-fieldset">
   <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
@@ -22,20 +15,14 @@
   <label class="govuk-label govuk-label" for="name">
     Name
   </label>
-  <div id="name-hint" class="govuk-hint">
-    
-  </div>
-  <input class="govuk-input govuk-input-!-width-three-quarters" id="name" name="name" type="text" aria-describedby="name-hint">
+  <input class="govuk-input govuk-input-!-width-three-quarters" id="name" name="name" type="text">
 </div>
 
                         <div class="govuk-form-group">
   <label class="govuk-label govuk-label" for="age">
     Age
   </label>
-  <div id="age-hint" class="govuk-hint">
-    
-  </div>
-  <input class="govuk-input govuk-input-!-width-three-quarters" id="age" name="age" type="text" aria-describedby="age-hint">
+  <input class="govuk-input govuk-input-!-width-three-quarters" id="age" name="age" type="text">
 </div>
 
 

package/test/snapshots/departure-date.html

@@ -1,23 +1,13 @@
-    <div class="govuk-grid-row">
-        <div class="govuk-grid-column-two-thirds">
-        </div>
-    </div>
-
-    
     <div class="govuk-grid-row">
         <div class="govuk-grid-column-two-thirds">
             <form action="" method="post" novalidate>
-                <input type="hidden" name="_csrf" value="">
                 <div class="govuk-form-group">
-  <fieldset class="govuk-fieldset" role="group" aria-describedby="departureDate-hint">
+  <fieldset class="govuk-fieldset" role="group">
     <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
       <h1 class="govuk-fieldset__heading">
         When do you want to start your holiday?
       </h1>
     </legend>
-    <div id="departureDate-hint" class="govuk-hint">
-      
-    </div>
     <div class="govuk-date-input" id="departureDate">
       <div class="govuk-date-input__item">
         <div class="govuk-form-group">

package/test/snapshots/holiday-activities.html

@@ -1,23 +1,13 @@
-    <div class="govuk-grid-row">
-        <div class="govuk-grid-column-two-thirds">
-        </div>
-    </div>
-
-    
     <div class="govuk-grid-row">
         <div class="govuk-grid-column-two-thirds">
             <form action="" method="post" novalidate>
-                <input type="hidden" name="_csrf" value="">
                 <div class="govuk-form-group">
-  <fieldset class="govuk-fieldset" aria-describedby="holidayActivities-hint">
+  <fieldset class="govuk-fieldset">
     <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
       <h1 class="govuk-fieldset__heading">
         Which activities do you want to do on holiday?
       </h1>
     </legend>
-    <div id="holidayActivities-hint" class="govuk-hint">
-      
-    </div>
     <div class="govuk-checkboxes govuk-checkboxes" data-module="govuk-checkboxes">
       <div class="govuk-checkboxes__item">
         <input class="govuk-checkboxes__input" id="holidayActivities" name="holidayActivities" type="checkbox" value="swimming" data-cy="answer-swimming">

package/test/snapshots/holiday-arrival.html

@@ -1,9 +1,3 @@
-    <div class="govuk-grid-row">
-        <div class="govuk-grid-column-two-thirds">
-        </div>
-    </div>
-
-    
     <style >
         .pins-select--width-4 {
             min-width: 4.5em !important;
@@ -14,7 +8,6 @@
     <div class="govuk-grid-row">
         <div class="govuk-grid-column-two-thirds">
             <form action="" method="post" novalidate>
-                <input type="hidden" name="_csrf" value="">
                 <div class="govuk-form-group">
   <fieldset class="govuk-fieldset" role="group">
     <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
@@ -54,8 +47,8 @@
 
                 <div class="govuk-form-group">
                     <fieldset class="govuk-fieldset" role="group">
-                        <div id="holidayArrival-hint" class="govuk-hint">For example, 9:30am or 2:55pm</div>
-                        <div class="govuk-date-input" id=holidayArrival>
+                        <div id="holidayArrival-time-hint" class="govuk-hint">For example, 9:30am or 2:55pm</div>
+                        <div class="govuk-date-input" id="holidayArrival-time">
                             <div class="govuk-date-input__item">
                                 <div class="govuk-form-group">
   <label class="govuk-label" for="holidayArrival_hour">