@planning-inspectorate/dynamic-forms 2.0.0 → 2.0.2

package/package.json

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

package/src/components/address/index.njk

@@ -14,7 +14,7 @@
     <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: {
                         text: question.question,

package/src/components/boolean/index.njk

@@ -14,7 +14,7 @@
     <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.interfaceType === 'radio' %}
                     {{ govukRadios({
                         classes: "govuk-radios",
@@ -30,7 +30,7 @@
                                 classes: "govuk-fieldset__legend--l"
                             }
                         },
-                        hint: { text: question.hint },
+                        hint: question.hint and { text: question.hint },
                         items: question.options
                     }) }}
 
@@ -42,7 +42,7 @@
                         errorMessage: errors[question.fieldName] and {
                             text: errors[question.fieldName].msg
                         },
-                        hint: {
+                        hint: htmlHint and {
                             html: htmlHint
                         },
                         fieldset: {

package/src/components/checkbox/index.njk

@@ -7,7 +7,7 @@
     <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 %}
                 {{ govukCheckboxes({
                     classes: "govuk-checkboxes",
                     idPrefix: question.fieldName,
@@ -15,7 +15,7 @@
                     errorMessage: errors[question.fieldName] and {
                         text: errors[question.fieldName].msg
                     },
-                    hint: {
+                    hint: question.description and {
                         text: question.description
                     },
                     fieldset: {

package/src/components/conditional/textarea.njk

@@ -4,7 +4,7 @@
     label: {
         text: question
     },
-    hint: {
+    hint: hint and {
         text: hint
     },
     id: fieldName,

package/src/components/conditional/unit.njk

@@ -1,7 +1,7 @@
 {% from "govuk/components/input/macro.njk" import govukInput %}
 
 {{ govukInput({
-    hint: {
+    hint: hint and {
         text: hint
     },
     label: {

package/src/components/date/index.njk

@@ -17,7 +17,7 @@
     <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 %}
                 {{ govukDateInput({
                     id: question.fieldName,
                     fieldset: {
@@ -27,7 +27,7 @@
                             classes: "govuk-fieldset__legend--l"
                         }
                     },
-                    hint: {
+                    hint: question.hint and {
                         text: question.hint
                     },
                     errorMessage: errorSummary and {

package/src/components/date-period/index.njk

@@ -23,7 +23,7 @@
     <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 %}
 
                 {{ govukFieldset({
                     legend: {
@@ -40,7 +40,7 @@
                             text: labels.start
                         }
                     },
-                    hint: {
+                    hint: question.hint and {
                         text: question.hint
                     },
                     errorMessage: errorSummary and {
@@ -78,7 +78,7 @@
                             text: labels.end
                         }
                     },
-                    hint: {
+                    hint: question.hint and {
                         text: question.hint
                     },
                     errorMessage: errorSummary and {

package/src/components/date-time/index.njk

@@ -29,7 +29,7 @@
     <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 %}
                 {{ govukDateInput({
                     id: question.fieldName,
                     fieldset: {
@@ -69,13 +69,13 @@
 
                 <div class="govuk-form-group{% if errors[hour].msg or errors[minutes].msg or errors[period].msg %} govuk-form-group--error{% endif %}">
                     <fieldset class="govuk-fieldset" role="group">
-                        <div id="{{ question.fieldName }}-hint" class="govuk-hint">For example, 9:30am or 2:55pm</div>
+                        <div id="{{ question.fieldName }}-time-hint" class="govuk-hint">For example, 9:30am or 2:55pm</div>
                         {% if errors[hour].msg or errors[minutes].msg or errors[period].msg %}
                             <p id="{{ question.fieldName }}-error" class="govuk-error-message">
                                 <span class="govuk-visually-hidden">Error:</span> {{ errors[hour].msg or errors[minutes].msg or errors[period].msg }}
                             </p>
                         {% endif %}
-                        <div class="govuk-date-input" id={{ question.fieldName }}>
+                        <div class="govuk-date-input" id="{{ question.fieldName }}-time">
                             <div class="govuk-date-input__item">
                                 {{ govukInput({
                                     classes: "govuk-input--width-2 govuk-input--error" if errors[question.fieldName] or errors[hour] else "govuk-input--width-2",

package/src/components/identifier/index.njk

@@ -8,7 +8,7 @@
     <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 }}

package/src/components/multi-field-input/index.njk

@@ -11,7 +11,7 @@
     <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: {
@@ -53,7 +53,7 @@
                             prefix: inputField.prefix,
                             suffix: inputField.suffix,
                             value: inputField.value,
-                            hint: {
+                            hint: inputField.hint and {
                                 text: inputField.hint
                             },
                             classes: inputField.classes or "govuk-input-!-width-three-quarters",

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

@@ -7,11 +7,14 @@
     <div class="govuk-grid-row">
         <div class="govuk-grid-column-two-thirds">
             <h1 class="govuk-heading-l">{{ question.question }}</h1>
-            <p class="govuk-body">{{ question.description }}</p>
+            {%- if question.description %}
+                <p class="govuk-body">{{ question.description }}</p>
+            {%- endif %}
+
             <form action="" method="post" novalidate>
-                <input type="hidden" name="_csrf" value="{{ _csrf }}">
+                {% if _csrf %}<input type="hidden" name="_csrf" value="{{ _csrf }}">{% endif %}
                 {{ govukInput({
-                    hint: {
+                    hint: question.hint and {
                         text: question.hint
                     },
                     label: {

package/src/components/radio/index.njk

@@ -8,11 +8,13 @@
     <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.legend %}
                     <h1 class="govuk-heading-l">{{ question.question }}</h1>
-                    <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 %}
@@ -45,7 +47,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 %}

package/src/components/select/index.njk

@@ -27,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

@@ -8,7 +8,7 @@
     <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 }}
@@ -34,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
                         },
@@ -58,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/text-entry/index.njk

@@ -9,7 +9,7 @@
     <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 }}
@@ -26,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
                         },
@@ -48,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

@@ -11,7 +11,7 @@
     <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/unit-option-entry/index.njk

@@ -8,7 +8,7 @@
     <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: {
@@ -18,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/validator/address-validator.js

@@ -66,7 +66,7 @@ export default class AddressValidator extends BaseValidator {
 		if (!this.requiredFields?.addressLine1) {
 			validator.optional({ checkFalsy: true });
 		} else {
-			validator.notEmpty().withMessage(`Enter an address line 1`);
+			validator.notEmpty().withMessage(`Enter address line 1, typically the building and street`);
 		}
 
 		return validator

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

@@ -74,7 +74,7 @@ describe('AddressValidator', () => {
 		const errors = await _validationMappedErrors(req, question);
 
 		assert.strictEqual(Object.keys(errors).length, 5);
-		assert.strictEqual(errors.testField_addressLine1.msg, 'Enter an address line 1');
+		assert.strictEqual(errors.testField_addressLine1.msg, 'Enter address line 1, typically the building and street');
 		assert.strictEqual(errors.testField_addressLine2.msg, 'Enter an address line 2');
 		assert.strictEqual(errors.testField_townCity.msg, 'Enter a town or city');
 		assert.strictEqual(errors.testField_county.msg, 'Enter a county');

package/src/validator/coordinates-validator.js

@@ -24,22 +24,22 @@ export default class CoordinatesValidator extends BaseValidator {
 			body(this.northing.fieldName)
 				.optional({ checkFalsy: true })
 				.isNumeric()
-				.withMessage(`Please a numeric value for the Grid reference ${this.northing.title}`)
+				.withMessage(`The ${this.northing.title} grid reference must be a number`)
 				.isLength({ min: requiredCoordinateLength, max: requiredCoordinateLength })
-				.withMessage(`Enter ${requiredCoordinateLength} digits for the Grid reference ${this.northing.title}`),
+				.withMessage(`The ${this.northing.title} grid reference must contain ${requiredCoordinateLength} digits`),
 
 			body(this.easting.fieldName)
 				.optional({ checkFalsy: true })
 				.isNumeric()
-				.withMessage(`Please a numeric value for the Grid reference ${this.easting.title}`)
+				.withMessage(`The ${this.easting.title} grid reference must be a number`)
 				.isLength({ min: requiredCoordinateLength, max: requiredCoordinateLength })
-				.withMessage(`Enter ${requiredCoordinateLength} digits for the Grid reference ${this.easting.title}`),
+				.withMessage(`The ${this.easting.title} grid reference must contain ${requiredCoordinateLength} digits`),
 
 			// validate northing has been populated if value for easting provided
 			body(this.northing.fieldName).custom((_, { req }) => {
 				const { siteNorthing, siteEasting } = req.body;
 				if (!siteNorthing && siteEasting) {
-					throw new Error(`Enter 6 digits for the Grid reference ${this.northing.title}`);
+					throw new Error(`The ${this.northing.title} grid reference must contain 6 digits`);
 				}
 				return true;
 			}),
@@ -48,7 +48,7 @@ export default class CoordinatesValidator extends BaseValidator {
 			body(this.easting.fieldName).custom((_, { req }) => {
 				const { siteNorthing, siteEasting } = req.body;
 				if (siteNorthing && !siteEasting) {
-					throw new Error(`Enter 6 digits for the Grid reference ${this.easting.title}`);
+					throw new Error(`The ${this.easting.title} grid reference must contain 6 digits`);
 				}
 				return true;
 			})

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

@@ -30,13 +30,9 @@ describe('./src/dynamic-forms/validator/coordinates-validator.js', () => {
 		const coordinatesValidator = new CoordinatesValidator(northing, easting);
 		const errors = await _validationMappedErrors(req, coordinatesValidator);
 		assert.strictEqual(Object.keys(errors).length, 2);
-		assert.strictEqual(
-			errors[northing.fieldName].msg,
-			`Please a numeric value for the Grid reference ${northing.title}`
-		);
-		assert.strictEqual(errors[easting.fieldName].msg, `Please a numeric value for the Grid reference ${easting.title}`);
+		assert.strictEqual(errors[northing.fieldName].msg, `The ${northing.title} grid reference must be a number`);
+		assert.strictEqual(errors[easting.fieldName].msg, `The ${easting.title} grid reference must be a number`);
 	});
-
 	it('should return an error message if coordinates are not the required length', async () => {
 		const req = {
 			body: {
@@ -49,8 +45,8 @@ describe('./src/dynamic-forms/validator/coordinates-validator.js', () => {
 		const errors = await _validationMappedErrors(req, coordinatesValidator);
 
 		assert.strictEqual(Object.keys(errors).length, 2);
-		assert.strictEqual(errors[northing.fieldName].msg, `Enter 6 digits for the Grid reference ${northing.title}`);
-		assert.strictEqual(errors[easting.fieldName].msg, `Enter 6 digits for the Grid reference ${easting.title}`);
+		assert.strictEqual(errors[northing.fieldName].msg, `The ${northing.title} grid reference must contain 6 digits`);
+		assert.strictEqual(errors[easting.fieldName].msg, `The ${easting.title} grid reference must contain 6 digits`);
 	});
 
 	it('should return an error message if northing is populated but easting is not', async () => {
@@ -65,7 +61,7 @@ describe('./src/dynamic-forms/validator/coordinates-validator.js', () => {
 		const errors = await _validationMappedErrors(req, coordinatesValidator);
 
 		assert.strictEqual(Object.keys(errors).length, 1);
-		assert.strictEqual(errors[easting.fieldName].msg, `Enter 6 digits for the Grid reference ${easting.title}`);
+		assert.strictEqual(errors[easting.fieldName].msg, `The ${easting.title} grid reference must contain 6 digits`);
 	});
 
 	it('should return an error message if easting is populated but northing is not', async () => {
@@ -80,7 +76,7 @@ describe('./src/dynamic-forms/validator/coordinates-validator.js', () => {
 		const errors = await _validationMappedErrors(req, coordinatesValidator);
 
 		assert.strictEqual(Object.keys(errors).length, 1);
-		assert.strictEqual(errors[northing.fieldName].msg, `Enter 6 digits for the Grid reference ${northing.title}`);
+		assert.strictEqual(errors[northing.fieldName].msg, `The ${northing.title} grid reference must contain 6 digits`);
 	});
 
 	it('should return an error message if northing is populated but not required length and easting is not populated', async () => {
@@ -95,8 +91,8 @@ describe('./src/dynamic-forms/validator/coordinates-validator.js', () => {
 		const errors = await _validationMappedErrors(req, coordinatesValidator);
 
 		assert.strictEqual(Object.keys(errors).length, 2);
-		assert.strictEqual(errors[northing.fieldName].msg, `Enter 6 digits for the Grid reference ${northing.title}`);
-		assert.strictEqual(errors[easting.fieldName].msg, `Enter 6 digits for the Grid reference ${easting.title}`);
+		assert.strictEqual(errors[northing.fieldName].msg, `The ${northing.title} grid reference must contain 6 digits`);
+		assert.strictEqual(errors[easting.fieldName].msg, `The ${easting.title} grid reference must contain 6 digits`);
 	});
 
 	it('should return an error message if easting is populated but not required length and northing is not populated', async () => {
@@ -111,8 +107,8 @@ describe('./src/dynamic-forms/validator/coordinates-validator.js', () => {
 		const errors = await _validationMappedErrors(req, coordinatesValidator);
 
 		assert.strictEqual(Object.keys(errors).length, 2);
-		assert.strictEqual(errors[northing.fieldName].msg, `Enter 6 digits for the Grid reference ${northing.title}`);
-		assert.strictEqual(errors[easting.fieldName].msg, `Enter 6 digits for the Grid reference ${easting.title}`);
+		assert.strictEqual(errors[northing.fieldName].msg, `The ${northing.title} grid reference must contain 6 digits`);
+		assert.strictEqual(errors[easting.fieldName].msg, `The ${easting.title} grid reference must contain 6 digits`);
 	});
 });
 

package/src/validator/date-validator.js

@@ -184,8 +184,8 @@ export default class DateValidator extends BaseValidator {
 			noDayMonthErrorMessage: `${capitalisedInputLabel} must include a day and month`,
 			noDayYearErrorMessage: `${capitalisedInputLabel} must include a day and year`,
 			noMonthYearErrorMessage: `${capitalisedInputLabel} must include a month and year`,
-			invalidDateErrorMessage: `${capitalisedInputLabel} must be a real date`,
-			invalidMonthErrorMessage: `${capitalisedInputLabel} month must be a real month`,
+			invalidDateErrorMessage: `${capitalisedInputLabel} day must be a real day`,
+			invalidMonthErrorMessage: `${capitalisedInputLabel} month must be between 1 and 12`,
 			invalidYearErrorMessage: `${capitalisedInputLabel} year must include 4 numbers`,
 			futureDateErrorMessage: `${capitalisedInputLabel} must be today or in the past`,
 			pastDateErrorMessage: `${capitalisedInputLabel} must be today or in the future`

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

@@ -196,7 +196,7 @@ describe('./src/dynamic-forms/validator/date-validator.js', () => {
 			const errors = await _validationMappedErrors(req, question, 'the required date');
 
 			assert.strictEqual(Object.keys(errors).length, 1);
-			assert.strictEqual(errors[`${question.fieldName}_day`].msg, 'The required date must be a real date');
+			assert.strictEqual(errors[`${question.fieldName}_day`].msg, 'The required date day must be a real day');
 		});
 
 		it('throws error if invalid month provided', async () => {
@@ -215,7 +215,7 @@ describe('./src/dynamic-forms/validator/date-validator.js', () => {
 			const errors = await _validationMappedErrors(req, question, 'the required date');
 
 			assert.strictEqual(Object.keys(errors).length, 1);
-			assert.strictEqual(errors[`${question.fieldName}_month`].msg, 'The required date month must be a real month');
+			assert.strictEqual(errors[`${question.fieldName}_month`].msg, 'The required date month must be between 1 and 12');
 		});
 
 		it('throws error if invalid year provided', async () => {
@@ -336,8 +336,8 @@ describe('./src/dynamic-forms/validator/date-validator.js', () => {
 			const errors = await _validationMappedErrors(req, question, 'the required date');
 
 			assert.strictEqual(Object.keys(errors).length, 3);
-			assert.strictEqual(errors[`${question.fieldName}_day`].msg, 'The required date must be a real date');
-			assert.strictEqual(errors[`${question.fieldName}_month`].msg, 'The required date month must be a real month');
+			assert.strictEqual(errors[`${question.fieldName}_day`].msg, 'The required date day must be a real day');
+			assert.strictEqual(errors[`${question.fieldName}_month`].msg, 'The required date month must be between 1 and 12');
 			assert.strictEqual(errors[`${question.fieldName}_year`].msg, 'The required date year must include 4 numbers');
 		});
 
@@ -357,8 +357,8 @@ describe('./src/dynamic-forms/validator/date-validator.js', () => {
 			const errors = await _validationMappedErrors(req, question, 'the required date');
 
 			assert.strictEqual(Object.keys(errors).length, 3);
-			assert.strictEqual(errors[`${question.fieldName}_day`].msg, 'The required date must be a real date');
-			assert.strictEqual(errors[`${question.fieldName}_month`].msg, 'The required date month must be a real month');
+			assert.strictEqual(errors[`${question.fieldName}_day`].msg, 'The required date day must be a real day');
+			assert.strictEqual(errors[`${question.fieldName}_month`].msg, 'The required date month must be between 1 and 12');
 			assert.strictEqual(errors[`${question.fieldName}_year`].msg, 'The required date year must include 4 numbers');
 		});
 

package/test/snapshots/add-insurance.html

@@ -1,32 +1,28 @@
     <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">
-    <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">
-      
+  <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 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">
+      <label class="govuk-label govuk-radios__label" for="addInsurance">
+        Yes
+      </label>
     </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">
-        <label class="govuk-label govuk-radios__label" for="addInsurance">
-          Yes
-        </label>
-      </div>
-      <div class="govuk-radios__item">
-        <input class="govuk-radios__input" id="addInsurance-2" name="addInsurance" type="radio" value="no" data-cy="answer-no">
-        <label class="govuk-label govuk-radios__label" for="addInsurance-2">
-          No
-        </label>
-      </div>
+    <div class="govuk-radios__item">
+      <input class="govuk-radios__input" id="addInsurance-2" name="addInsurance" type="radio" value="no" data-cy="answer-no">
+      <label class="govuk-label govuk-radios__label" for="addInsurance-2">
+        No
+      </label>
     </div>
-  </fieldset>
+  </div>
+</fieldset>
 </div>
 
 

package/test/snapshots/companions.html

@@ -1,7 +1,6 @@
     <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">
@@ -16,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,17 +1,13 @@
     <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,38 +1,34 @@
     <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">
-    <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">
-      
+  <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 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">
+      <label class="govuk-label govuk-checkboxes__label" for="holidayActivities">
+        Swimming
+      </label>
     </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">
-        <label class="govuk-label govuk-checkboxes__label" for="holidayActivities">
-          Swimming
-        </label>
-      </div>
-      <div class="govuk-checkboxes__item">
-        <input class="govuk-checkboxes__input" id="holidayActivities-2" name="holidayActivities" type="checkbox" value="hiking" data-cy="answer-hiking">
-        <label class="govuk-label govuk-checkboxes__label" for="holidayActivities-2">
-          Hiking
-        </label>
-      </div>
-      <div class="govuk-checkboxes__item">
-        <input class="govuk-checkboxes__input" id="holidayActivities-3" name="holidayActivities" type="checkbox" value="sightseeing" data-cy="answer-sightseeing">
-        <label class="govuk-label govuk-checkboxes__label" for="holidayActivities-3">
-          Sightseeing
-        </label>
-      </div>
+    <div class="govuk-checkboxes__item">
+      <input class="govuk-checkboxes__input" id="holidayActivities-2" name="holidayActivities" type="checkbox" value="hiking" data-cy="answer-hiking">
+      <label class="govuk-label govuk-checkboxes__label" for="holidayActivities-2">
+        Hiking
+      </label>
     </div>
-  </fieldset>
+    <div class="govuk-checkboxes__item">
+      <input class="govuk-checkboxes__input" id="holidayActivities-3" name="holidayActivities" type="checkbox" value="sightseeing" data-cy="answer-sightseeing">
+      <label class="govuk-label govuk-checkboxes__label" for="holidayActivities-3">
+        Sightseeing
+      </label>
+    </div>
+  </div>
+</fieldset>
 </div>
 
                 <button type="submit" class="govuk-button" data-module="govuk-button" data-cy="button-save-and-continue">

package/test/snapshots/holiday-arrival.html

@@ -8,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">
@@ -48,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">

package/test/snapshots/holiday-description.html

@@ -1,7 +1,6 @@
     <div class="govuk-grid-row">
         <div class="govuk-grid-column-two-thirds">
             <form action="" method="post" novalidate>
-                <input type="hidden" name="_csrf" value="">
                     <h1 class="govuk-heading-l">
                         Describe your ideal holiday.
                     </h1>
@@ -11,10 +10,7 @@
   <label class="govuk-label" for="holidayDescription">
     Description
   </label>
-  <div id="holidayDescription-hint" class="govuk-hint">
-    
-  </div>
-  <textarea class="govuk-textarea" id="holidayDescription" name="holidayDescription" rows="5" aria-describedby="holidayDescription-hint"></textarea>
+  <textarea class="govuk-textarea" id="holidayDescription" name="holidayDescription" rows="5"></textarea>
 </div>
 
 

package/test/snapshots/holiday-destination.html

@@ -1,7 +1,6 @@
     <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">
@@ -11,9 +10,6 @@
     </h1>
   </legend>
 
-                        <p class="govuk-body"></p>
-
-
                         <div class="govuk-form-group">
   <div class="govuk-radios govuk-radios" data-module="govuk-radios">
     <div class="govuk-radios__item">

package/test/snapshots/holiday-period.html

@@ -1,7 +1,6 @@
     <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">
@@ -13,13 +12,10 @@
 
 
                 <div class="govuk-form-group">
-  <fieldset class="govuk-fieldset" role="group" aria-describedby="holidayPeriod_start-hint">
+  <fieldset class="govuk-fieldset" role="group">
     <legend class="govuk-fieldset__legend">
       Start
     </legend>
-    <div id="holidayPeriod_start-hint" class="govuk-hint">
-      
-    </div>
     <div class="govuk-date-input" id="holidayPeriod_start">
       <div class="govuk-date-input__item">
         <div class="govuk-form-group">
@@ -51,13 +47,10 @@
 
 
                 <div class="govuk-form-group">
-  <fieldset class="govuk-fieldset" role="group" aria-describedby="holidayPeriod_end-hint">
+  <fieldset class="govuk-fieldset" role="group">
     <legend class="govuk-fieldset__legend">
       End
     </legend>
-    <div id="holidayPeriod_end-hint" class="govuk-hint">
-      
-    </div>
     <div class="govuk-date-input" id="holidayPeriod_end">
       <div class="govuk-date-input__item">
         <div class="govuk-form-group">

package/test/snapshots/holiday-snack.html

@@ -1,7 +1,6 @@
     <div class="govuk-grid-row">
         <div class="govuk-grid-column-two-thirds">
             <form action="" method="post" novalidate>
-                <input type="hidden" name="_csrf" value="">
                     <h1 class="govuk-heading-l">
                         What is your favourite snack to eat on holiday?
                     </h1>
@@ -12,10 +11,7 @@
   <label class="govuk-label govuk-label" for="holidaySnack">
     Snack
   </label>
-  <div id="holidaySnack-hint" class="govuk-hint">
-    
-  </div>
-  <input class="govuk-input" id="holidaySnack" name="holidaySnack" type="text" value="" aria-describedby="holidaySnack-hint">
+  <input class="govuk-input" id="holidaySnack" name="holidaySnack" type="text" value="">
 </div>
 
 

package/test/snapshots/hotel-address.html

@@ -1,7 +1,6 @@
     <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">
     <h1 class="govuk-fieldset__heading">

package/test/snapshots/luggage-weight-units.html

@@ -1,7 +1,6 @@
     <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">
@@ -10,8 +9,6 @@
     </h1>
   </legend>
 
-                    <p class="govuk-body"></p>
-
                     <div class="govuk-form-group">
   <div class="govuk-radios govuk-radios" data-module="govuk-radios">
     <div class="govuk-radios__item">
@@ -25,11 +22,8 @@
   <label class="govuk-label" for="luggageWeightValue_kg">
     Weight in kilograms
   </label>
-  <div id="luggageWeightValue_kg-hint" class="govuk-hint">
-    
-  </div>
   <div class="govuk-input__wrapper">
-    <input class="govuk-input govuk-input--width-5" id="luggageWeightValue_kg" name="luggageWeightValue_kg" type="text" spellcheck="false" value="" aria-describedby="luggageWeightValue_kg-hint" inputmode="numeric">
+    <input class="govuk-input govuk-input--width-5" id="luggageWeightValue_kg" name="luggageWeightValue_kg" type="text" spellcheck="false" value="" inputmode="numeric">
     <div class="govuk-input__suffix" aria-hidden="true">kg</div>
   </div>
 </div>
@@ -45,11 +39,8 @@
   <label class="govuk-label" for="luggageWeightValue_lbs">
     Weight in pounds
   </label>
-  <div id="luggageWeightValue_lbs-hint" class="govuk-hint">
-    
-  </div>
   <div class="govuk-input__wrapper">
-    <input class="govuk-input govuk-input--width-5" id="luggageWeightValue_lbs" name="luggageWeightValue_lbs" type="text" spellcheck="false" value="" aria-describedby="luggageWeightValue_lbs-hint" inputmode="numeric">
+    <input class="govuk-input govuk-input--width-5" id="luggageWeightValue_lbs" name="luggageWeightValue_lbs" type="text" spellcheck="false" value="" inputmode="numeric">
     <div class="govuk-input__suffix" aria-hidden="true">lbs</div>
   </div>
 </div>

package/test/snapshots/nights.html

@@ -1,17 +1,12 @@
     <div class="govuk-grid-row">
         <div class="govuk-grid-column-two-thirds">
             <h1 class="govuk-heading-l">How many nights will you stay on holiday?</h1>
-            <p class="govuk-body"></p>
             <form action="" method="post" novalidate>
-                <input type="hidden" name="_csrf" value="">
                 <div class="govuk-form-group">
   <label class="govuk-label" for="nights">
     Nights
   </label>
-  <div id="nights-hint" class="govuk-hint">
-    
-  </div>
-  <input class="govuk-input govuk-input--width-5" id="nights" name="nights" type="text" spellcheck="false" value="" aria-describedby="nights-hint" inputmode="numeric">
+  <input class="govuk-input govuk-input--width-5" id="nights" name="nights" type="text" spellcheck="false" value="" inputmode="numeric">
 </div>
 
                 <button type="submit" class="govuk-button" data-module="govuk-button" data-cy="button-save-and-continue">

package/test/snapshots/secret-wish.html

@@ -1,7 +1,6 @@
     <div class="govuk-grid-row">
         <div class="govuk-grid-column-two-thirds">
             <form action="" method="post" novalidate>
-                <input type="hidden" name="_csrf" value="">
 
                     <h1 class="govuk-label-wrapper">
   <label class="govuk-label govuk-label--l" for="secretWish">

package/test/snapshots/travel-class.html

@@ -10,10 +10,7 @@
       Which class do you want to travel in?
     </label>
   </h1>
-  <div id="travelClass-hint" class="govuk-hint">
-    
-  </div>
-  <select class="govuk-select" id="travelClass" name="travelClass" aria-describedby="travelClass-hint">
+  <select class="govuk-select" id="travelClass" name="travelClass">
     <option value="economy" data-cy="answer-economy">Economy</option>
     <option value="business" data-cy="answer-business">Business</option>
     <option value="first" data-cy="answer-first">First Class</option>

package/test/snapshots/travel-insurance-type.html

@@ -1,7 +1,6 @@
     <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">
@@ -11,9 +10,6 @@
     </h1>
   </legend>
 
-                        <p class="govuk-body"></p>
-
-
                         <div class="govuk-form-group">
   <div class="govuk-radios govuk-radios" data-module="govuk-radios">
     <div class="govuk-radios__item">