govuk_publishing_components 42.0.0 → 43.0.0

data/node_modules/govuk-frontend/dist/govuk/components/date-input/fixtures.json

@@ -9,6 +9,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"dob\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n          Day\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n          Month\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n          Year\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
         },
         {
@@ -42,6 +43,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <div id=\"dob-hint\" class=\"govuk-hint\">\n      For example, 31 3 1980\n    </div>\n    <div class=\"govuk-date-input\" id=\"dob\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
@@ -71,6 +73,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"bday-hint\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your birthday?\n    </legend>\n    <div id=\"bday-hint\" class=\"govuk-hint\">\n      For example, 5 12\n    </div>\n    <div class=\"govuk-date-input\" id=\"bday\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"bday-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"bday-day\" name=\"bday-day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"bday-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"bday-month\" name=\"bday-month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
@@ -100,6 +103,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n    <legend class=\"govuk-fieldset__legend\">\n      When did you move to this property?\n    </legend>\n    <div id=\"dob-hint\" class=\"govuk-hint\">\n      For example, 3 1980\n    </div>\n    <div class=\"govuk-date-input\" id=\"dob\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
@@ -132,6 +136,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-errors-error\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <p id=\"dob-errors-error\" class=\"govuk-error-message\">\n      <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n    </p>\n    <div class=\"govuk-date-input\" id=\"dob-errors\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-errors-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
@@ -167,6 +172,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-errors-hint dob-errors-error\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <div id=\"dob-errors-hint\" class=\"govuk-hint\">\n      For example, 31 3 1980\n    </div>\n    <p id=\"dob-errors-error\" class=\"govuk-error-message\">\n      <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n    </p>\n    <div class=\"govuk-date-input\" id=\"dob-errors\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-errors-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
@@ -203,6 +209,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-day-error-hint dob-day-error-error\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <div id=\"dob-day-error-hint\" class=\"govuk-hint\">\n      For example, 31 3 1980\n    </div>\n    <p id=\"dob-day-error-error\" class=\"govuk-error-message\">\n      <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n    </p>\n    <div class=\"govuk-date-input\" id=\"dob-day-error\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day-error-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-day-error-day\" name=\"dob-day-error-day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day-error-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day-error-month\" name=\"dob-day-error-month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day-error-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-day-error-year\" name=\"dob-day-error-year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
@@ -239,6 +246,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-month-error-hint dob-month-error-error\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <div id=\"dob-month-error-hint\" class=\"govuk-hint\">\n      For example, 31 3 1980\n    </div>\n    <p id=\"dob-month-error-error\" class=\"govuk-error-message\">\n      <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n    </p>\n    <div class=\"govuk-date-input\" id=\"dob-month-error\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month-error-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month-error-day\" name=\"dob-month-error-day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month-error-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-month-error-month\" name=\"dob-month-error-month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month-error-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-month-error-year\" name=\"dob-month-error-year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
@@ -275,6 +283,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-year-error-hint dob-year-error-error\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <div id=\"dob-year-error-hint\" class=\"govuk-hint\">\n      For example, 31 3 1980\n    </div>\n    <p id=\"dob-year-error-error\" class=\"govuk-error-message\">\n      <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n    </p>\n    <div class=\"govuk-date-input\" id=\"dob-year-error\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year-error-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-year-error-day\" name=\"dob-year-error-day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year-error-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-year-error-month\" name=\"dob-year-error-month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year-error-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-year-error-year\" name=\"dob-year-error-year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
@@ -294,6 +303,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <div id=\"dob-hint\" class=\"govuk-hint\">\n      For example, 31 3 1980\n    </div>\n    <div class=\"govuk-date-input\" id=\"dob\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
@@ -316,6 +326,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group extra-class\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <div id=\"dob-hint\" class=\"govuk-hint\">\n      For example, 31 3 1980\n    </div>\n    <div class=\"govuk-date-input\" id=\"dob\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
@@ -352,6 +363,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-with-autocomplete-attribute-hint\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <div id=\"dob-with-autocomplete-attribute-hint\" class=\"govuk-hint\">\n      For example, 31 3 1980\n    </div>\n    <div class=\"govuk-date-input\" id=\"dob-with-autocomplete-attribute\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-autocomplete-attribute-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-with-autocomplete-attribute-day\" name=\"dob-with-autocomplete-day\" type=\"text\" autocomplete=\"bday-day\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-autocomplete-attribute-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-with-autocomplete-attribute-month\" name=\"dob-with-autocomplete-month\" type=\"text\" autocomplete=\"bday-month\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-autocomplete-attribute-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-with-autocomplete-attribute-year\" name=\"dob-with-autocomplete-year\" type=\"text\" autocomplete=\"bday-year\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
@@ -394,6 +406,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-with-input-attributes-hint\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <div id=\"dob-with-input-attributes-hint\" class=\"govuk-hint\">\n      For example, 31 3 1980\n    </div>\n    <div class=\"govuk-date-input\" id=\"dob-with-input-attributes\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-input-attributes-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-with-input-attributes-day\" name=\"dob-with-input-attributes-day\" type=\"text\" inputmode=\"numeric\" data-example-day=\"day\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-input-attributes-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-with-input-attributes-month\" name=\"dob-with-input-attributes-month\" type=\"text\" inputmode=\"numeric\" data-example-month=\"month\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-input-attributes-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-with-input-attributes-year\" name=\"dob-with-input-attributes-year\" type=\"text\" inputmode=\"numeric\" data-example-year=\"year\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
@@ -405,6 +418,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input app-date-input--custom-modifier\" id=\"with-classes\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-classes-day\">\n          Day\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-classes-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-classes-month\">\n          Month\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-classes-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-classes-year\">\n          Year\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-classes-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
         },
         {
@@ -418,6 +432,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" data-attribute=\"my data value\" id=\"with-attributes\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-attributes-day\">\n          Day\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-attributes-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-attributes-month\">\n          Month\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-attributes-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-attributes-year\">\n          Year\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-attributes-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
         },
         {
@@ -429,6 +444,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-empty-items\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-empty-items-day\">\n          Day\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-empty-items-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-empty-items-month\">\n          Month\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-empty-items-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-empty-items-year\">\n          Year\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-empty-items-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
         },
         {
@@ -445,6 +461,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-custom-pattern\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-custom-pattern-day\">\n          Day\n        </label>\n        <input class=\"govuk-input govuk-date-input__input \" id=\"with-custom-pattern-day\" name=\"day\" type=\"text\" pattern=\"[0-8]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
         },
         {
@@ -462,6 +479,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-custom-inputmode\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-custom-inputmode-day\">\n          Day\n        </label>\n        <input class=\"govuk-input govuk-date-input__input \" id=\"with-custom-inputmode-day\" name=\"day\" type=\"text\" pattern=\"[0-9X]*\" inputmode=\"text\">\n      </div>\n    </div>\n  </div>\n</div>"
         },
         {
@@ -483,6 +501,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-nested-name\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-nested-name-day[dd]\">\n          Day[dd]\n        </label>\n        <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-day[dd]\" name=\"day[dd]\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-nested-name-month[mm]\">\n          Month[mm]\n        </label>\n        <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-month[mm]\" name=\"month[mm]\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-nested-name-year[yyyy]\">\n          Year[yyyy]\n        </label>\n        <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-year[yyyy]\" name=\"year[yyyy]\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
         },
         {
@@ -507,6 +526,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-item-id\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"day\">\n          Day\n        </label>\n        <input class=\"govuk-input govuk-date-input__input \" id=\"day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"month\">\n          Month\n        </label>\n        <input class=\"govuk-input govuk-date-input__input \" id=\"month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"year\">\n          Year\n        </label>\n        <input class=\"govuk-input govuk-date-input__input \" id=\"year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
         },
         {
@@ -528,6 +548,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"my-date-input\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"my-date-input-day\">\n          Day\n        </label>\n        <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"my-date-input-month\">\n          Month\n        </label>\n        <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"my-date-input-year\">\n          Year\n        </label>\n        <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
         },
         {
@@ -553,6 +574,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-values\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"day\">\n          Day\n        </label>\n        <input class=\"govuk-input govuk-date-input__input \" id=\"day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"month\">\n          Month\n        </label>\n        <input class=\"govuk-input govuk-date-input__input \" id=\"month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"year\">\n          Year\n        </label>\n        <input class=\"govuk-input govuk-date-input__input \" id=\"year\" name=\"year\" type=\"text\" value=\"2018\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
         },
         {
@@ -572,6 +594,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"test-target-element dob-errors-hint\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <div id=\"dob-errors-hint\" class=\"govuk-hint\">\n      For example, 31 3 1980\n    </div>\n    <div class=\"govuk-date-input\" id=\"dob-errors\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-errors-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
@@ -591,6 +614,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"test-target-element dob-errors-error\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <p id=\"dob-errors-error\" class=\"govuk-error-message\">\n      <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n    </p>\n    <div class=\"govuk-date-input\" id=\"dob-errors\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-errors-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
@@ -606,6 +630,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your <b>date of birth</b>?\n    </legend>\n    <div class=\"govuk-date-input\" id=\"with-fieldset-html\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"with-fieldset-html-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-fieldset-html-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"with-fieldset-html-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-fieldset-html-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"with-fieldset-html-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-fieldset-html-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
@@ -630,6 +655,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-item-classes\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-item-classes-day\">\n          Day\n        </label>\n        <input class=\"govuk-input govuk-date-input__input app-date-input__day\" id=\"with-item-classes-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-item-classes-month\">\n          Month\n        </label>\n        <input class=\"govuk-input govuk-date-input__input app-date-input__month\" id=\"with-item-classes-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-item-classes-year\">\n          Year\n        </label>\n        <input class=\"govuk-input govuk-date-input__input app-date-input__year\" id=\"with-item-classes-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
         },
         {
@@ -651,6 +677,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"without-item-classes\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"without-item-classes-day\">\n          Day\n        </label>\n        <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"without-item-classes-month\">\n          Month\n        </label>\n        <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"without-item-classes-year\">\n          Year\n        </label>\n        <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
         }
     ]

data/node_modules/govuk-frontend/dist/govuk/components/date-input/macro-options.json

@@ -98,6 +98,46 @@
                 "type": "object",
                 "required": false,
                 "description": "HTML attributes (for example data attributes) to add to the form group."
+            },
+            {
+                "name": "beforeInputs",
+                "type": "object",
+                "required": false,
+                "description": "Content to add before the inputs used by the date input component.",
+                "params": [
+                    {
+                        "name": "text",
+                        "type": "string",
+                        "required": true,
+                        "description": "Text to add before the inputs. If `html` is provided, the `text` option will be ignored."
+                    },
+                    {
+                        "name": "html",
+                        "type": "string",
+                        "required": true,
+                        "description": "HTML to add before the inputs. If `html` is provided, the `text` option will be ignored."
+                    }
+                ]
+            },
+            {
+                "name": "afterInputs",
+                "type": "object",
+                "required": false,
+                "description": "Content to add after the inputs used by the date input component.",
+                "params": [
+                    {
+                        "name": "text",
+                        "type": "string",
+                        "required": true,
+                        "description": "Text to add after the inputs. If `html` is provided, the `text` option will be ignored."
+                    },
+                    {
+                        "name": "html",
+                        "type": "string",
+                        "required": true,
+                        "description": "HTML to add after the inputs. If `html` is provided, the `text` option will be ignored."
+                    }
+                ]
             }
         ]
     },

data/node_modules/govuk-frontend/dist/govuk/components/date-input/template.njk

@@ -1,3 +1,4 @@
+{% from "../../macros/attributes.njk" import govukAttributes %}
 {% from "../error-message/macro.njk" import govukErrorMessage %}
 {% from "../fieldset/macro.njk" import govukFieldset %}
 {% from "../hint/macro.njk" import govukHint %}
@@ -55,8 +56,11 @@
   }) | trim | indent(2) }}
 {% endif %}
   <div class="govuk-date-input {%- if params.classes %} {{ params.classes }}{% endif %}"
-    {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
+    {{- govukAttributes(params.attributes) -}}
     {%- if params.id %} id="{{ params.id }}"{% endif %}>
+    {% if params.formGroup.beforeInputs %}
+    {{ params.formGroup.beforeInputs.html | safe | trim | indent(4) if params.formGroup.beforeInputs.html else params.formGroup.beforeInputs.text }}
+    {% endif %}
     {% for item in dateInputItems %}
     <div class="govuk-date-input__item">
       {{ govukInput({
@@ -75,11 +79,14 @@
         attributes: item.attributes
       }) | trim | indent(6) }}
     </div>
-  {% endfor %}
+    {% endfor %}
+    {% if params.formGroup.afterInputs %}
+    {{ params.formGroup.afterInputs.html | safe | trim | indent(4) if params.formGroup.afterInputs.html else params.formGroup.afterInputs.text }}
+    {% endif %}
   </div>
 {% endset -%}
 
-<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}" {%- for attribute, value in params.formGroup.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}" {{- govukAttributes(params.formGroup.attributes) }}>
 {% if hasFieldset %}
   {# We override the fieldset's role to 'group' because otherwise JAWS does not
     announce the description for a fieldset comprised of text inputs, but

data/node_modules/govuk-frontend/dist/govuk/components/details/fixtures.json

@@ -10,6 +10,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<details class=\"govuk-details\">\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      Help with nationality\n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.\n  </div>\n</details>"
         },
         {
@@ -23,6 +24,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": true,
             "html": "<details id=\"help-with-nationality\" class=\"govuk-details\" open>\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      Help with nationality\n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.\n  </div>\n</details>"
         },
         {
@@ -34,6 +36,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<details class=\"govuk-details\">\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      Where to find your National Insurance Number\n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    Your National Insurance number can be found on\n<ul>\n  <li>your National Insurance card</li>\n  <li>your payslip</li>\n  <li>P60</li>\n  <li>benefits information</li>\n  <li>tax return</li>\n</ul>\n\n  </div>\n</details>"
         },
         {
@@ -46,6 +49,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<details id=\"my-details-element\" class=\"govuk-details\">\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      Expand this section\n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    Here are some more details\n  </div>\n</details>"
         },
         {
@@ -57,6 +61,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<details class=\"govuk-details\">\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      Expand this section\n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    More about the greater than symbol (&gt;)\n  </div>\n</details>"
         },
         {
@@ -68,6 +73,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<details class=\"govuk-details\">\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      Expand this section\n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    More about <b>bold text</b>\n  </div>\n</details>"
         },
         {
@@ -79,6 +85,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<details class=\"govuk-details\">\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      The greater than symbol (&gt;) is the best\n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    Here are some more details\n  </div>\n</details>"
         },
         {
@@ -90,6 +97,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<details class=\"govuk-details\">\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      Use <b>bold text</b> sparingly\n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    Here are some more details\n  </div>\n</details>"
         },
         {
@@ -102,6 +110,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<details class=\"govuk-details some-additional-class\">\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      Expand me\n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    Here are some more details\n  </div>\n</details>"
         },
         {
@@ -117,6 +126,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<details class=\"govuk-details\" data-some-data-attribute=\"i-love-data\" another-attribute=\"foo\">\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      Expand me\n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    Here are some more details\n  </div>\n</details>"
         }
     ]

data/node_modules/govuk-frontend/dist/govuk/components/details/template.njk

@@ -1,7 +1,11 @@
-<details {%- if params.id %} id="{{ params.id }}"{% endif %} class="govuk-details {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} {{- " open" if params.open }}>
+{% from "../../macros/attributes.njk" import govukAttributes -%}
+
+<details {%- if params.id %} id="{{ params.id }}"{% endif %} class="govuk-details {%- if params.classes %} {{ params.classes }}{% endif %}"
+  {{- govukAttributes(params.attributes) -}}
+  {{- " open" if params.open }}>
   <summary class="govuk-details__summary">
     <span class="govuk-details__summary-text">
-      {{ params.summaryHtml | safe if params.summaryHtml else params.summaryText }}
+      {{ params.summaryHtml | safe | trim | indent(6) if params.summaryHtml else params.summaryText }}
     </span>
   </summary>
   <div class="govuk-details__text">

data/node_modules/govuk-frontend/dist/govuk/components/error-message/fixtures.json

@@ -9,6 +9,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<p class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message about full name goes here\n</p>"
         },
         {
@@ -20,6 +21,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<p class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Gwall:</span> Neges gwall am yr enw llawn yn mynd yma\n</p>"
         },
         {
@@ -31,6 +33,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<p id=\"my-error-message-id\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> This is an error message\n</p>"
         },
         {
@@ -42,6 +45,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<p class=\"govuk-error-message custom-class\">\n  <span class=\"govuk-visually-hidden\">Error:</span> This is an error message\n</p>"
         },
         {
@@ -52,6 +56,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<p class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Unexpected &gt; in body\n</p>"
         },
         {
@@ -62,6 +67,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<p class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Unexpected <b>bold text</b> in body copy\n</p>"
         },
         {
@@ -76,6 +82,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<p class=\"govuk-error-message\" data-test=\"attribute\" id=\"my-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> This is an error message\n</p>"
         },
         {
@@ -87,6 +94,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<p class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Gwall:</span> Rhowch eich enw llawn\n</p>"
         },
         {
@@ -98,6 +106,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<p class=\"govuk-error-message\">\n  There is an error on line 42\n</p>"
         }
     ]

data/node_modules/govuk-frontend/dist/govuk/components/error-message/template.njk

@@ -1,7 +1,10 @@
+{% from "../../macros/attributes.njk" import govukAttributes -%}
+
 {% set visuallyHiddenText = params.visuallyHiddenText | default("Error") -%}
 {% set errorMessageText = params.html | safe | trim | indent(2) if params.html else params.text -%}
 
-<p {%- if params.id %} id="{{ params.id }}"{% endif %} class="govuk-error-message {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+<p {%- if params.id %} id="{{ params.id }}"{% endif %} class="govuk-error-message {%- if params.classes %} {{ params.classes }}{% endif %}"
+  {{- govukAttributes(params.attributes) }}>
   {% if visuallyHiddenText %}
   <span class="govuk-visually-hidden">{{ visuallyHiddenText }}:</span> {{ errorMessageText }}
   {% else %}

data/node_modules/govuk-frontend/dist/govuk/components/error-summary/_index.scss

@@ -24,14 +24,25 @@
 
   .govuk-error-summary__body {
     p {
-      margin-top: 0;
-      @include govuk-responsive-margin(4, "bottom");
+      margin-bottom: 0;
+    }
+
+    > * + * {
+      @include govuk-responsive-margin(4, "top");
+    }
+
+    > :last-child {
+      @include govuk-responsive-margin(1, "bottom");
     }
   }
 
   // Cross-component class - adjusts styling of list component
   .govuk-error-summary__list {
-    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  // Remove the bottom margin from the last list item
+  .govuk-error-summary__list li:last-child {
     margin-bottom: 0;
   }
 

data/node_modules/govuk-frontend/dist/govuk/components/error-summary/_index.scss.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/govuk/components/error-summary/_index.scss"],"names":[],"mappings":"AAAA,0BAA0B;;AAE1B;EACE;IACE,8BAA8B;IAC9B,0BAA0B;IAC1B,oCAAoC;IACpC,6CAA6C;;IAE7C,qDAAqD;;IAErD;MACE,qDAAqD;IACvD;EACF;;EAEA;IACE,mCAAmC;IACnC,qCAAqC;;IAErC,aAAa;IACb,6CAA6C;EAC/C;;EAEA;IACE;MACE,aAAa;MACb,6CAA6C;IAC/C;EACF;;EAEA,2DAA2D;EAC3D;IACE,aAAa;IACb,gBAAgB;EAClB;;EAEA;IACE,qCAAqC;IACrC,0BAA0B;IAC1B,+BAA+B;EACjC;AACF","file":"_index.scss","sourcesContent":["@import \"../../core/lists\";\n\n@include govuk-exports(\"govuk/component/error-summary\") {\n  .govuk-error-summary {\n    @include govuk-font($size: 19);\n    @include govuk-text-colour;\n    @include govuk-responsive-padding(4);\n    @include govuk-responsive-margin(8, \"bottom\");\n\n    border: $govuk-border-width solid $govuk-error-colour;\n\n    &:focus {\n      outline: $govuk-focus-width solid $govuk-focus-colour;\n    }\n  }\n\n  .govuk-error-summary__title {\n    @include govuk-font-size($size: 24);\n    @include govuk-typography-weight-bold;\n\n    margin-top: 0;\n    @include govuk-responsive-margin(4, \"bottom\");\n  }\n\n  .govuk-error-summary__body {\n    p {\n      margin-top: 0;\n      @include govuk-responsive-margin(4, \"bottom\");\n    }\n  }\n\n  // Cross-component class - adjusts styling of list component\n  .govuk-error-summary__list {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  .govuk-error-summary__list a {\n    @include govuk-typography-weight-bold;\n    @include govuk-link-common;\n    @include govuk-link-style-error;\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/govuk/components/error-summary/_index.scss"],"names":[],"mappings":"AAAA,0BAA0B;;AAE1B;EACE;IACE,8BAA8B;IAC9B,0BAA0B;IAC1B,oCAAoC;IACpC,6CAA6C;;IAE7C,qDAAqD;;IAErD;MACE,qDAAqD;IACvD;EACF;;EAEA;IACE,mCAAmC;IACnC,qCAAqC;;IAErC,aAAa;IACb,6CAA6C;EAC/C;;EAEA;IACE;MACE,gBAAgB;IAClB;;IAEA;MACE,0CAA0C;IAC5C;;IAEA;MACE,6CAA6C;IAC/C;EACF;;EAEA,2DAA2D;EAC3D;IACE,gBAAgB;EAClB;;EAEA,kDAAkD;EAClD;IACE,gBAAgB;EAClB;;EAEA;IACE,qCAAqC;IACrC,0BAA0B;IAC1B,+BAA+B;EACjC;AACF","file":"_index.scss","sourcesContent":["@import \"../../core/lists\";\n\n@include govuk-exports(\"govuk/component/error-summary\") {\n  .govuk-error-summary {\n    @include govuk-font($size: 19);\n    @include govuk-text-colour;\n    @include govuk-responsive-padding(4);\n    @include govuk-responsive-margin(8, \"bottom\");\n\n    border: $govuk-border-width solid $govuk-error-colour;\n\n    &:focus {\n      outline: $govuk-focus-width solid $govuk-focus-colour;\n    }\n  }\n\n  .govuk-error-summary__title {\n    @include govuk-font-size($size: 24);\n    @include govuk-typography-weight-bold;\n\n    margin-top: 0;\n    @include govuk-responsive-margin(4, \"bottom\");\n  }\n\n  .govuk-error-summary__body {\n    p {\n      margin-bottom: 0;\n    }\n\n    > * + * {\n      @include govuk-responsive-margin(4, \"top\");\n    }\n\n    > :last-child {\n      @include govuk-responsive-margin(1, \"bottom\");\n    }\n  }\n\n  // Cross-component class - adjusts styling of list component\n  .govuk-error-summary__list {\n    margin-bottom: 0;\n  }\n\n  // Remove the bottom margin from the last list item\n  .govuk-error-summary__list li:last-child {\n    margin-bottom: 0;\n  }\n\n  .govuk-error-summary__list a {\n    @include govuk-typography-weight-bold;\n    @include govuk-link-common;\n    @include govuk-link-style-error;\n  }\n}\n"]}