govuk_publishing_components 28.5.0 → 28.6.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/javascripts/govuk_publishing_components/analytics/track-select-change.js +4 -3
- data/app/assets/javascripts/govuk_publishing_components/components/accordion.js +21 -291
- data/app/assets/javascripts/govuk_publishing_components/components/button.js +1 -1
- data/app/assets/javascripts/govuk_publishing_components/components/character-count.js +1 -1
- data/app/assets/javascripts/govuk_publishing_components/components/checkboxes.js +1 -1
- data/app/assets/javascripts/govuk_publishing_components/components/details.js +1 -1
- data/app/assets/javascripts/govuk_publishing_components/components/error-summary.js +1 -1
- data/app/assets/javascripts/govuk_publishing_components/components/layout-header.js +1 -1
- data/app/assets/javascripts/govuk_publishing_components/components/radio.js +1 -1
- data/app/assets/javascripts/govuk_publishing_components/components/skip-link.js +5 -0
- data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js +40 -37
- data/app/assets/javascripts/govuk_publishing_components/components/tabs.js +1 -1
- data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/barchart-enhancement.js +2 -1
- data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js +8 -10
- data/app/assets/javascripts/govuk_publishing_components/lib/initial-focus.js +4 -3
- data/app/assets/javascripts/govuk_publishing_components/lib/toggle-input-class-on-focus.js +4 -3
- data/app/assets/javascripts/govuk_publishing_components/lib/toggle.js +4 -3
- data/app/assets/stylesheets/govuk_publishing_components/components/_accordion.scss +1 -329
- data/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss +1 -1
- data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss +95 -56
- data/app/assets/stylesheets/govuk_publishing_components/components/print/_accordion.scss +6 -17
- data/app/assets/stylesheets/govuk_publishing_components/govuk_frontend_support.scss +0 -9
- data/app/views/govuk_publishing_components/components/_accordion.html.erb +31 -16
- data/app/views/govuk_publishing_components/components/_button.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_character_count.html.erb +2 -2
- data/app/views/govuk_publishing_components/components/_checkboxes.html.erb +2 -2
- data/app/views/govuk_publishing_components/components/_error_message.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_error_summary.html.erb +0 -1
- data/app/views/govuk_publishing_components/components/_inset_text.html.erb +12 -1
- data/app/views/govuk_publishing_components/components/_layout_footer.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_modal_dialogue.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_radio.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_skip_link.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/docs/accordion.yml +2 -97
- data/app/views/govuk_publishing_components/components/docs/govspeak.yml +1 -1
- data/app/views/govuk_publishing_components/components/docs/inset_text.yml +6 -0
- data/app/views/govuk_publishing_components/components/docs/share_links.yml +1 -1
- data/app/views/govuk_publishing_components/components/docs/step_by_step_nav.yml +13 -13
- data/app/views/govuk_publishing_components/components/docs/tabs.yml +1 -1
- data/app/views/govuk_publishing_components/components/docs/textarea.yml +1 -1
- data/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb +11 -11
- data/lib/govuk_publishing_components/version.rb +1 -1
- data/node_modules/govuk-frontend/govuk/all.js +294 -76
- data/node_modules/govuk-frontend/govuk/components/accordion/_index.scss +274 -99
- data/node_modules/govuk-frontend/govuk/components/accordion/accordion.js +169 -65
- data/node_modules/govuk-frontend/govuk/components/accordion/fixtures.json +37 -5
- data/node_modules/govuk-frontend/govuk/components/accordion/macro-options.json +4 -4
- data/node_modules/govuk-frontend/govuk/components/button/button.js +2 -2
- data/node_modules/govuk-frontend/govuk/components/character-count/character-count.js +3 -3
- data/node_modules/govuk-frontend/govuk/components/character-count/fixtures.json +15 -2
- data/node_modules/govuk-frontend/govuk/components/checkboxes/checkboxes.js +8 -10
- data/node_modules/govuk-frontend/govuk/components/checkboxes/fixtures.json +52 -15
- data/node_modules/govuk-frontend/govuk/components/cookie-banner/_index.scss +0 -2
- data/node_modules/govuk-frontend/govuk/components/cookie-banner/fixtures.json +31 -0
- data/node_modules/govuk-frontend/govuk/components/date-input/fixtures.json +25 -25
- data/node_modules/govuk-frontend/govuk/components/details/details.js +2 -2
- data/node_modules/govuk-frontend/govuk/components/error-message/_index.scss +1 -0
- data/node_modules/govuk-frontend/govuk/components/error-message/fixtures.json +8 -8
- data/node_modules/govuk-frontend/govuk/components/error-message/template.njk +2 -2
- data/node_modules/govuk-frontend/govuk/components/error-summary/error-summary.js +24 -3
- data/node_modules/govuk-frontend/govuk/components/error-summary/fixtures.json +25 -16
- data/node_modules/govuk-frontend/govuk/components/error-summary/macro-options.json +6 -0
- data/node_modules/govuk-frontend/govuk/components/error-summary/template.njk +2 -1
- data/node_modules/govuk-frontend/govuk/components/file-upload/fixtures.json +4 -4
- data/node_modules/govuk-frontend/govuk/components/footer/_index.scss +3 -37
- data/node_modules/govuk-frontend/govuk/components/footer/fixtures.json +119 -15
- data/node_modules/govuk-frontend/govuk/components/footer/macro-options.json +6 -0
- data/node_modules/govuk-frontend/govuk/components/footer/template.njk +1 -1
- data/node_modules/govuk-frontend/govuk/components/header/_index.scss +10 -4
- data/node_modules/govuk-frontend/govuk/components/header/fixtures.json +11 -11
- data/node_modules/govuk-frontend/govuk/components/header/header.js +4 -4
- data/node_modules/govuk-frontend/govuk/components/header/template.njk +4 -3
- data/node_modules/govuk-frontend/govuk/components/hint/_index.scss +1 -3
- data/node_modules/govuk-frontend/govuk/components/input/_index.scss +1 -1
- data/node_modules/govuk-frontend/govuk/components/input/fixtures.json +40 -40
- data/node_modules/govuk-frontend/govuk/components/input/template.njk +4 -3
- data/node_modules/govuk-frontend/govuk/components/notification-banner/notification-banner.js +499 -2
- data/node_modules/govuk-frontend/govuk/components/phase-banner/fixtures.json +2 -2
- data/node_modules/govuk-frontend/govuk/components/radios/_index.scss +0 -8
- data/node_modules/govuk-frontend/govuk/components/radios/fixtures.json +44 -45
- data/node_modules/govuk-frontend/govuk/components/radios/radios.js +4 -4
- data/node_modules/govuk-frontend/govuk/components/radios/template.njk +2 -9
- data/node_modules/govuk-frontend/govuk/components/select/_index.scss +6 -1
- data/node_modules/govuk-frontend/govuk/components/select/fixtures.json +3 -3
- data/node_modules/govuk-frontend/govuk/components/skip-link/_index.scss +13 -0
- data/node_modules/govuk-frontend/govuk/components/skip-link/fixtures.json +9 -9
- data/node_modules/govuk-frontend/govuk/components/skip-link/skip-link.js +1108 -0
- data/node_modules/govuk-frontend/govuk/components/skip-link/template.njk +1 -1
- data/node_modules/govuk-frontend/govuk/components/summary-list/_index.scss +20 -23
- data/node_modules/govuk-frontend/govuk/components/summary-list/fixtures.json +86 -1
- data/node_modules/govuk-frontend/govuk/components/summary-list/template.njk +1 -4
- data/node_modules/govuk-frontend/govuk/components/tabs/_index.scss +2 -2
- data/node_modules/govuk-frontend/govuk/components/tabs/tabs.js +2 -2
- data/node_modules/govuk-frontend/govuk/components/tag/_index.scss +0 -5
- data/node_modules/govuk-frontend/govuk/components/tag/fixtures.json +2 -2
- data/node_modules/govuk-frontend/govuk/components/textarea/_index.scss +1 -1
- data/node_modules/govuk-frontend/govuk/components/textarea/fixtures.json +4 -4
- data/node_modules/govuk-frontend/govuk/core/_all.scss +0 -1
- data/node_modules/govuk-frontend/govuk/core/_global-styles.scss +0 -6
- data/node_modules/govuk-frontend/govuk/core/_links.scss +0 -6
- data/node_modules/govuk-frontend/govuk/core/_lists.scss +0 -6
- data/node_modules/govuk-frontend/govuk/core/_section-break.scss +0 -6
- data/node_modules/govuk-frontend/govuk/core/_typography.scss +0 -6
- data/node_modules/govuk-frontend/govuk/objects/_all.scss +1 -0
- data/node_modules/govuk-frontend/govuk/objects/_main-wrapper.scss +15 -30
- data/node_modules/govuk-frontend/govuk/{core → objects}/_template.scss +1 -5
- data/node_modules/govuk-frontend/govuk/overrides/_display.scss +0 -6
- data/node_modules/govuk-frontend/govuk/overrides/_spacing.scss +0 -6
- data/node_modules/govuk-frontend/govuk/overrides/_text-align.scss +0 -6
- data/node_modules/govuk-frontend/govuk/overrides/_typography.scss +0 -6
- data/node_modules/govuk-frontend/govuk/overrides/_width.scss +0 -6
- data/node_modules/govuk-frontend/govuk/settings/_colours-organisations.scss +3 -0
- data/node_modules/govuk-frontend/govuk/settings/_measurements.scss +0 -10
- data/node_modules/govuk-frontend/govuk/tools/_all.scss +0 -1
- data/node_modules/govuk-frontend/package.json +1 -1
- metadata +8 -7
- data/node_modules/govuk-frontend/govuk/tools/_iff.scss +0 -17
@@ -6,7 +6,7 @@
|
|
6
6
|
"options": {
|
7
7
|
"id": "dob"
|
8
8
|
},
|
9
|
-
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"dob\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n\n</div>",
|
9
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"dob\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
|
10
10
|
"hidden": false
|
11
11
|
},
|
12
12
|
{
|
@@ -37,7 +37,7 @@
|
|
37
37
|
}
|
38
38
|
]
|
39
39
|
},
|
40
|
-
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
|
40
|
+
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
|
41
41
|
"hidden": false
|
42
42
|
},
|
43
43
|
{
|
@@ -67,7 +67,7 @@
|
|
67
67
|
}
|
68
68
|
]
|
69
69
|
},
|
70
|
-
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-errors-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <
|
70
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-errors-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\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\n <div class=\"govuk-date-input\" id=\"dob-errors\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-errors-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
|
71
71
|
"hidden": false
|
72
72
|
},
|
73
73
|
{
|
@@ -100,7 +100,7 @@
|
|
100
100
|
}
|
101
101
|
]
|
102
102
|
},
|
103
|
-
"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 \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-errors-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n \n \n <
|
103
|
+
"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 \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-errors-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n \n \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\n <div class=\"govuk-date-input\" id=\"dob-errors\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-errors-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
|
104
104
|
"hidden": false
|
105
105
|
},
|
106
106
|
{
|
@@ -134,7 +134,7 @@
|
|
134
134
|
}
|
135
135
|
]
|
136
136
|
},
|
137
|
-
"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 \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-day-error-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n \n \n <
|
137
|
+
"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 \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-day-error-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n \n \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\n <div class=\"govuk-date-input\" id=\"dob-day-error\">\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
|
138
138
|
"hidden": false
|
139
139
|
},
|
140
140
|
{
|
@@ -168,7 +168,7 @@
|
|
168
168
|
}
|
169
169
|
]
|
170
170
|
},
|
171
|
-
"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 \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-month-error-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n \n \n <
|
171
|
+
"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 \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-month-error-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n \n \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\n <div class=\"govuk-date-input\" id=\"dob-month-error\">\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
|
172
172
|
"hidden": false
|
173
173
|
},
|
174
174
|
{
|
@@ -202,7 +202,7 @@
|
|
202
202
|
}
|
203
203
|
]
|
204
204
|
},
|
205
|
-
"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 \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-year-error-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n \n \n <
|
205
|
+
"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 \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-year-error-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n \n \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\n <div class=\"govuk-date-input\" id=\"dob-year-error\">\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
|
206
206
|
"hidden": false
|
207
207
|
},
|
208
208
|
{
|
@@ -219,7 +219,7 @@
|
|
219
219
|
"text": "For example, 31 3 1980"
|
220
220
|
}
|
221
221
|
},
|
222
|
-
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
|
222
|
+
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
|
223
223
|
"hidden": false
|
224
224
|
},
|
225
225
|
{
|
@@ -239,7 +239,7 @@
|
|
239
239
|
"classes": "extra-class"
|
240
240
|
}
|
241
241
|
},
|
242
|
-
"html": "<div class=\"govuk-form-group extra-class\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
|
242
|
+
"html": "<div class=\"govuk-form-group extra-class\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
|
243
243
|
"hidden": false
|
244
244
|
},
|
245
245
|
{
|
@@ -273,7 +273,7 @@
|
|
273
273
|
}
|
274
274
|
]
|
275
275
|
},
|
276
|
-
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-with-autocomplete-attribute-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-with-autocomplete-attribute-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob-with-autocomplete-attribute\">\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
|
276
|
+
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-with-autocomplete-attribute-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-with-autocomplete-attribute-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob-with-autocomplete-attribute\">\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
|
277
277
|
"hidden": false
|
278
278
|
},
|
279
279
|
{
|
@@ -313,7 +313,7 @@
|
|
313
313
|
}
|
314
314
|
]
|
315
315
|
},
|
316
|
-
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-with-input-attributes-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-with-input-attributes-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob-with-input-attributes\">\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\" data-example-day=\"day\">\n </div>\n </div>\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\" data-example-month=\"month\">\n </div>\n </div>\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\" data-example-year=\"year\">\n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
|
316
|
+
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-with-input-attributes-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-with-input-attributes-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob-with-input-attributes\">\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\" data-example-day=\"day\">\n \n </div>\n </div>\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\" data-example-month=\"month\">\n \n </div>\n </div>\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\" data-example-year=\"year\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
|
317
317
|
"hidden": false
|
318
318
|
},
|
319
319
|
{
|
@@ -322,7 +322,7 @@
|
|
322
322
|
"id": "with-classes",
|
323
323
|
"classes": "app-date-input--custom-modifier"
|
324
324
|
},
|
325
|
-
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input app-date-input--custom-modifier\" id=\"with-classes\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-classes-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-classes-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-classes-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n\n</div>",
|
325
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input app-date-input--custom-modifier\" id=\"with-classes\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-classes-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-classes-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-classes-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
|
326
326
|
"hidden": true
|
327
327
|
},
|
328
328
|
{
|
@@ -333,7 +333,7 @@
|
|
333
333
|
"data-attribute": "my data value"
|
334
334
|
}
|
335
335
|
},
|
336
|
-
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" data-attribute=\"my data value\" id=\"with-attributes\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-attributes-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-attributes-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-attributes-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n\n</div>",
|
336
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" data-attribute=\"my data value\" id=\"with-attributes\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-attributes-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-attributes-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-attributes-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
|
337
337
|
"hidden": true
|
338
338
|
},
|
339
339
|
{
|
@@ -342,7 +342,7 @@
|
|
342
342
|
"id": "with-empty-items",
|
343
343
|
"items": []
|
344
344
|
},
|
345
|
-
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-empty-items\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-empty-items-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-empty-items-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-empty-items-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n\n</div>",
|
345
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-empty-items\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-empty-items-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-empty-items-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-empty-items-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
|
346
346
|
"hidden": true
|
347
347
|
},
|
348
348
|
{
|
@@ -356,7 +356,7 @@
|
|
356
356
|
}
|
357
357
|
]
|
358
358
|
},
|
359
|
-
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-custom-pattern\">\n \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 \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 \n </div>\n\n</div>",
|
359
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-custom-pattern\">\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"with-custom-pattern-day\" name=\"day\" type=\"text\" pattern=\"[0-8]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
|
360
360
|
"hidden": true
|
361
361
|
},
|
362
362
|
{
|
@@ -371,7 +371,7 @@
|
|
371
371
|
}
|
372
372
|
]
|
373
373
|
},
|
374
|
-
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-custom-inputmode\">\n \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 \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 \n </div>\n\n</div>",
|
374
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-custom-inputmode\">\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"with-custom-inputmode-day\" name=\"day\" type=\"text\" pattern=\"[0-9X]*\" inputmode=\"text\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
|
375
375
|
"hidden": true
|
376
376
|
},
|
377
377
|
{
|
@@ -390,7 +390,7 @@
|
|
390
390
|
}
|
391
391
|
]
|
392
392
|
},
|
393
|
-
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-nested-name\">\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-day[dd]\" name=\"day[dd]\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-month[mm]\" name=\"month[mm]\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-year[yyyy]\" name=\"year[yyyy]\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n\n</div>",
|
393
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-nested-name\">\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-day[dd]\" name=\"day[dd]\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-month[mm]\" name=\"month[mm]\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-year[yyyy]\" name=\"year[yyyy]\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
|
394
394
|
"hidden": true
|
395
395
|
},
|
396
396
|
{
|
@@ -412,7 +412,7 @@
|
|
412
412
|
}
|
413
413
|
]
|
414
414
|
},
|
415
|
-
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-item-id\">\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n\n</div>",
|
415
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-item-id\">\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
|
416
416
|
"hidden": true
|
417
417
|
},
|
418
418
|
{
|
@@ -431,7 +431,7 @@
|
|
431
431
|
}
|
432
432
|
]
|
433
433
|
},
|
434
|
-
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"my-date-input\">\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n\n</div>",
|
434
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"my-date-input\">\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
|
435
435
|
"hidden": true
|
436
436
|
},
|
437
437
|
{
|
@@ -454,7 +454,7 @@
|
|
454
454
|
}
|
455
455
|
]
|
456
456
|
},
|
457
|
-
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-values\">\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"year\" name=\"year\" type=\"text\" value=\"2018\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n\n</div>",
|
457
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-values\">\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"year\" name=\"year\" type=\"text\" value=\"2018\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
|
458
458
|
"hidden": true
|
459
459
|
},
|
460
460
|
{
|
@@ -471,7 +471,7 @@
|
|
471
471
|
"text": "For example, 31 3 1980"
|
472
472
|
}
|
473
473
|
},
|
474
|
-
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"some-id dob-errors-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-errors-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob-errors\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-errors-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
|
474
|
+
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"some-id dob-errors-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-errors-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob-errors\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-errors-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
|
475
475
|
"hidden": true
|
476
476
|
},
|
477
477
|
{
|
@@ -488,7 +488,7 @@
|
|
488
488
|
"text": "Error message goes here"
|
489
489
|
}
|
490
490
|
},
|
491
|
-
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"some-id dob-errors-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <
|
491
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"some-id dob-errors-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\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\n <div class=\"govuk-date-input\" id=\"dob-errors\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-errors-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
|
492
492
|
"hidden": true
|
493
493
|
},
|
494
494
|
{
|
@@ -501,7 +501,7 @@
|
|
501
501
|
}
|
502
502
|
}
|
503
503
|
},
|
504
|
-
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your <b>date of birth</b>?\n \n </legend>\n \n\n <div class=\"govuk-date-input\" id=\"with-fieldset-html\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-fieldset-html-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-fieldset-html-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-fieldset-html-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
|
504
|
+
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your <b>date of birth</b>?\n \n </legend>\n \n\n <div class=\"govuk-date-input\" id=\"with-fieldset-html\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-fieldset-html-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-fieldset-html-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-fieldset-html-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
|
505
505
|
"hidden": true
|
506
506
|
},
|
507
507
|
{
|
@@ -523,7 +523,7 @@
|
|
523
523
|
}
|
524
524
|
]
|
525
525
|
},
|
526
|
-
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-item-classes\">\n \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 \n <input class=\"govuk-input govuk-date-input__input app-date-input__day\" id=\"with-item-classes-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input app-date-input__month\" id=\"with-item-classes-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input app-date-input__year\" id=\"with-item-classes-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n\n</div>",
|
526
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-item-classes\">\n \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 \n <input class=\"govuk-input govuk-date-input__input app-date-input__day\" id=\"with-item-classes-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input app-date-input__month\" id=\"with-item-classes-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input app-date-input__year\" id=\"with-item-classes-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
|
527
527
|
"hidden": true
|
528
528
|
},
|
529
529
|
{
|
@@ -542,7 +542,7 @@
|
|
542
542
|
}
|
543
543
|
]
|
544
544
|
},
|
545
|
-
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"without-item-classes\">\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n\n</div>",
|
545
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"without-item-classes\">\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
|
546
546
|
"hidden": true
|
547
547
|
}
|
548
548
|
]
|
@@ -1,7 +1,7 @@
|
|
1
1
|
(function (global, factory) {
|
2
2
|
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
3
|
-
typeof define === 'function' && define.amd ? define('GOVUKFrontend', factory) :
|
4
|
-
(global.GOVUKFrontend = factory());
|
3
|
+
typeof define === 'function' && define.amd ? define('GOVUKFrontend.Details', factory) :
|
4
|
+
(global.GOVUKFrontend = global.GOVUKFrontend || {}, global.GOVUKFrontend.Details = factory());
|
5
5
|
}(this, (function () { 'use strict';
|
6
6
|
|
7
7
|
(function(undefined) {
|
@@ -6,7 +6,7 @@
|
|
6
6
|
"options": {
|
7
7
|
"text": "Error message about full name goes here"
|
8
8
|
},
|
9
|
-
"html": "<
|
9
|
+
"html": "<p class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message about full name goes here\n</p>",
|
10
10
|
"hidden": false
|
11
11
|
},
|
12
12
|
{
|
@@ -15,7 +15,7 @@
|
|
15
15
|
"id": "my-error-message-id",
|
16
16
|
"text": "This is an error message"
|
17
17
|
},
|
18
|
-
"html": "<
|
18
|
+
"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>",
|
19
19
|
"hidden": true
|
20
20
|
},
|
21
21
|
{
|
@@ -24,7 +24,7 @@
|
|
24
24
|
"classes": "custom-class",
|
25
25
|
"text": "This is an error message"
|
26
26
|
},
|
27
|
-
"html": "<
|
27
|
+
"html": "<p class=\"govuk-error-message custom-class\">\n <span class=\"govuk-visually-hidden\">Error:</span> This is an error message\n</p>",
|
28
28
|
"hidden": true
|
29
29
|
},
|
30
30
|
{
|
@@ -32,7 +32,7 @@
|
|
32
32
|
"options": {
|
33
33
|
"text": "Unexpected > in body"
|
34
34
|
},
|
35
|
-
"html": "<
|
35
|
+
"html": "<p class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Unexpected > in body\n</p>",
|
36
36
|
"hidden": true
|
37
37
|
},
|
38
38
|
{
|
@@ -40,7 +40,7 @@
|
|
40
40
|
"options": {
|
41
41
|
"html": "Unexpected <b>bold text</b> in body copy"
|
42
42
|
},
|
43
|
-
"html": "<
|
43
|
+
"html": "<p class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Unexpected <b>bold text</b> in body copy\n</p>",
|
44
44
|
"hidden": true
|
45
45
|
},
|
46
46
|
{
|
@@ -52,7 +52,7 @@
|
|
52
52
|
"id": "my-error-message"
|
53
53
|
}
|
54
54
|
},
|
55
|
-
"html": "<
|
55
|
+
"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>",
|
56
56
|
"hidden": true
|
57
57
|
},
|
58
58
|
{
|
@@ -61,7 +61,7 @@
|
|
61
61
|
"text": "Rhowch eich enw llawn",
|
62
62
|
"visuallyHiddenText": "Gwall"
|
63
63
|
},
|
64
|
-
"html": "<
|
64
|
+
"html": "<p class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Gwall:</span> Rhowch eich enw llawn\n</p>",
|
65
65
|
"hidden": true
|
66
66
|
},
|
67
67
|
{
|
@@ -70,7 +70,7 @@
|
|
70
70
|
"text": "There is an error on line 42",
|
71
71
|
"visuallyHiddenText": false
|
72
72
|
},
|
73
|
-
"html": "<
|
73
|
+
"html": "<p class=\"govuk-error-message\">\n There is an error on line 42\n</p>",
|
74
74
|
"hidden": true
|
75
75
|
}
|
76
76
|
]
|
@@ -1,6 +1,6 @@
|
|
1
1
|
{% set visuallyHiddenText = params.visuallyHiddenText | default("Error") -%}
|
2
2
|
|
3
|
-
<
|
3
|
+
<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 -%}>
|
4
4
|
{% if visuallyHiddenText %}<span class="govuk-visually-hidden">{{ visuallyHiddenText }}:</span> {% endif -%}
|
5
5
|
{{ params.html | safe if params.html else params.text }}
|
6
|
-
</
|
6
|
+
</p>
|
@@ -1,7 +1,7 @@
|
|
1
1
|
(function (global, factory) {
|
2
2
|
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
3
|
-
typeof define === 'function' && define.amd ? define('GOVUKFrontend', factory) :
|
4
|
-
(global.GOVUKFrontend = factory());
|
3
|
+
typeof define === 'function' && define.amd ? define('GOVUKFrontend.ErrorSummary', factory) :
|
4
|
+
(global.GOVUKFrontend = global.GOVUKFrontend || {}, global.GOVUKFrontend.ErrorSummary = factory());
|
5
5
|
}(this, (function () { 'use strict';
|
6
6
|
|
7
7
|
(function(undefined) {
|
@@ -715,11 +715,32 @@ ErrorSummary.prototype.init = function () {
|
|
715
715
|
if (!$module) {
|
716
716
|
return
|
717
717
|
}
|
718
|
-
$module.focus();
|
719
718
|
|
719
|
+
this.setFocus();
|
720
720
|
$module.addEventListener('click', this.handleClick.bind(this));
|
721
721
|
};
|
722
722
|
|
723
|
+
/**
|
724
|
+
* Focus the error summary
|
725
|
+
*/
|
726
|
+
ErrorSummary.prototype.setFocus = function () {
|
727
|
+
var $module = this.$module;
|
728
|
+
|
729
|
+
if ($module.getAttribute('data-disable-auto-focus') === 'true') {
|
730
|
+
return
|
731
|
+
}
|
732
|
+
|
733
|
+
// Set tabindex to -1 to make the element programmatically focusable, but
|
734
|
+
// remove it on blur as the error summary doesn't need to be focused again.
|
735
|
+
$module.setAttribute('tabindex', '-1');
|
736
|
+
|
737
|
+
$module.addEventListener('blur', function () {
|
738
|
+
$module.removeAttribute('tabindex');
|
739
|
+
});
|
740
|
+
|
741
|
+
$module.focus();
|
742
|
+
};
|
743
|
+
|
723
744
|
/**
|
724
745
|
* Click event handler
|
725
746
|
*
|