govuk_publishing_components 23.12.0 → 23.13.1
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/components/header.js +3 -0
- data/app/assets/javascripts/govuk_publishing_components/components/layout-header.js +5 -0
- data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js +32 -36
- data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js +66 -14
- data/app/assets/javascripts/govuk_publishing_components/modules.js +1 -1
- data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +0 -1
- data/app/assets/stylesheets/govuk_publishing_components/components/_layout-footer.scss +5 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/_show-password.scss +4 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss +19 -7
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss +17 -6
- data/app/assets/stylesheets/govuk_publishing_components/components/print/_govspeak.scss +5 -0
- data/app/views/govuk_publishing_components/components/_button.html.erb +1 -0
- data/app/views/govuk_publishing_components/components/_layout_header.html.erb +3 -2
- data/app/views/govuk_publishing_components/components/_machine_readable_metadata.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_step_by_step_nav.html.erb +2 -2
- data/app/views/govuk_publishing_components/components/_subscription-links.html.erb +3 -0
- data/app/views/govuk_publishing_components/components/_subscription_links.html.erb +82 -0
- data/app/views/govuk_publishing_components/components/_translation-nav.html.erb +3 -0
- data/app/views/govuk_publishing_components/components/_translation_nav.html.erb +30 -0
- data/app/views/govuk_publishing_components/components/docs/layout_header.yml +21 -0
- data/app/views/govuk_publishing_components/components/docs/meta_tags.yml +99 -1
- data/app/views/govuk_publishing_components/components/docs/subscription-links.yml +3 -0
- data/app/views/govuk_publishing_components/components/docs/subscription_links.yml +100 -0
- data/app/views/govuk_publishing_components/components/docs/translation-nav.yml +3 -1
- data/app/views/govuk_publishing_components/components/docs/translation_nav.yml +137 -0
- data/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb +3 -3
- data/config/locales/en.yml +2 -2
- data/lib/govuk_publishing_components/presenters/meta_tags.rb +2 -0
- data/lib/govuk_publishing_components/version.rb +1 -1
- data/node_modules/govuk-frontend/govuk/all.js +57 -0
- data/node_modules/govuk-frontend/govuk/components/_all.scss +1 -0
- data/node_modules/govuk-frontend/govuk/components/accordion/fixtures.json +25 -10
- data/node_modules/govuk-frontend/govuk/components/back-link/fixtures.json +12 -6
- data/node_modules/govuk-frontend/govuk/components/back-link/macro-options.json +4 -4
- data/node_modules/govuk-frontend/govuk/components/breadcrumbs/fixtures.json +34 -13
- data/node_modules/govuk-frontend/govuk/components/breadcrumbs/macro-options.json +1 -0
- data/node_modules/govuk-frontend/govuk/components/button/fixtures.json +74 -31
- data/node_modules/govuk-frontend/govuk/components/character-count/fixtures.json +72 -15
- data/node_modules/govuk-frontend/govuk/components/character-count/macro-options.json +1 -1
- data/node_modules/govuk-frontend/govuk/components/checkboxes/fixtures.json +145 -52
- data/node_modules/govuk-frontend/govuk/components/checkboxes/macro-options.json +2 -2
- data/node_modules/govuk-frontend/govuk/components/date-input/fixtures.json +84 -34
- data/node_modules/govuk-frontend/govuk/components/date-input/macro-options.json +1 -1
- data/node_modules/govuk-frontend/govuk/components/date-input/template.njk +1 -1
- data/node_modules/govuk-frontend/govuk/components/details/fixtures.json +34 -14
- data/node_modules/govuk-frontend/govuk/components/error-message/fixtures.json +21 -10
- data/node_modules/govuk-frontend/govuk/components/error-message/macro-options.json +1 -0
- data/node_modules/govuk-frontend/govuk/components/error-summary/_index.scss +2 -12
- data/node_modules/govuk-frontend/govuk/components/error-summary/fixtures.json +86 -25
- data/node_modules/govuk-frontend/govuk/components/fieldset/fixtures.json +20 -10
- data/node_modules/govuk-frontend/govuk/components/file-upload/fixtures.json +60 -13
- data/node_modules/govuk-frontend/govuk/components/footer/fixtures.json +37 -18
- data/node_modules/govuk-frontend/govuk/components/footer/macro-options.json +8 -5
- data/node_modules/govuk-frontend/govuk/components/header/fixtures.json +36 -18
- data/node_modules/govuk-frontend/govuk/components/header/macro-options.json +2 -2
- data/node_modules/govuk-frontend/govuk/components/hint/fixtures.json +17 -8
- data/node_modules/govuk-frontend/govuk/components/input/fixtures.json +130 -40
- data/node_modules/govuk-frontend/govuk/components/input/macro-options.json +1 -1
- data/node_modules/govuk-frontend/govuk/components/inset-text/fixtures.json +17 -8
- data/node_modules/govuk-frontend/govuk/components/label/fixtures.json +20 -11
- data/node_modules/govuk-frontend/govuk/components/label/macro-options.json +1 -1
- data/node_modules/govuk-frontend/govuk/components/notification-banner/README.md +15 -0
- data/node_modules/govuk-frontend/govuk/components/notification-banner/_index.scss +89 -0
- data/node_modules/govuk-frontend/govuk/components/notification-banner/_notification-banner.scss +2 -0
- data/node_modules/govuk-frontend/govuk/components/notification-banner/fixtures.json +212 -0
- data/node_modules/govuk-frontend/govuk/components/notification-banner/macro-options.json +68 -0
- data/node_modules/govuk-frontend/govuk/components/notification-banner/macro.njk +3 -0
- data/node_modules/govuk-frontend/govuk/components/notification-banner/notification-banner.js +61 -0
- data/node_modules/govuk-frontend/govuk/components/notification-banner/template.njk +47 -0
- data/node_modules/govuk-frontend/govuk/components/panel/fixtures.json +30 -13
- data/node_modules/govuk-frontend/govuk/components/phase-banner/fixtures.json +20 -9
- data/node_modules/govuk-frontend/govuk/components/radios/fixtures.json +167 -50
- data/node_modules/govuk-frontend/govuk/components/select/fixtures.json +97 -18
- data/node_modules/govuk-frontend/govuk/components/select/macro-options.json +1 -1
- data/node_modules/govuk-frontend/govuk/components/skip-link/fixtures.json +21 -9
- data/node_modules/govuk-frontend/govuk/components/summary-list/fixtures.json +118 -25
- data/node_modules/govuk-frontend/govuk/components/table/fixtures.json +92 -22
- data/node_modules/govuk-frontend/govuk/components/tabs/fixtures.json +75 -18
- data/node_modules/govuk-frontend/govuk/components/tabs/macro-options.json +1 -1
- data/node_modules/govuk-frontend/govuk/components/tag/fixtures.json +28 -14
- data/node_modules/govuk-frontend/govuk/components/textarea/fixtures.json +68 -17
- data/node_modules/govuk-frontend/govuk/components/warning-text/fixtures.json +19 -14
- data/node_modules/govuk-frontend/govuk/helpers/_links.scss +94 -0
- data/node_modules/govuk-frontend/govuk/settings/_colours-applied.scss +9 -0
- data/node_modules/govuk-frontend/govuk/settings/_typography-font.scss +3 -0
- data/node_modules/govuk-frontend/package.json +1 -1
- metadata +15 -3
- data/app/assets/stylesheets/govuk_publishing_components/components/_transition-countdown.scss +0 -125
|
@@ -74,12 +74,12 @@
|
|
|
74
74
|
"name": "id",
|
|
75
75
|
"type": "string",
|
|
76
76
|
"required": false,
|
|
77
|
-
"description": "Specific id attribute for the checkbox item. If omitted, then idPrefix option will be applied."
|
|
77
|
+
"description": "Specific id attribute for the checkbox item. If omitted, then component global `idPrefix` option will be applied."
|
|
78
78
|
},
|
|
79
79
|
{
|
|
80
80
|
"name": "name",
|
|
81
81
|
"type": "string",
|
|
82
|
-
"required":
|
|
82
|
+
"required": false,
|
|
83
83
|
"description": "Specific name for the checkbox item. If omitted, then component global `name` string will be applied."
|
|
84
84
|
},
|
|
85
85
|
{
|
|
@@ -6,7 +6,8 @@
|
|
|
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 </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>",
|
|
10
|
+
"hidden": false
|
|
10
11
|
},
|
|
11
12
|
{
|
|
12
13
|
"name": "complete question",
|
|
@@ -36,7 +37,8 @@
|
|
|
36
37
|
}
|
|
37
38
|
]
|
|
38
39
|
},
|
|
39
|
-
"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 </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>",
|
|
41
|
+
"hidden": false
|
|
40
42
|
},
|
|
41
43
|
{
|
|
42
44
|
"name": "with errors only",
|
|
@@ -65,7 +67,8 @@
|
|
|
65
67
|
}
|
|
66
68
|
]
|
|
67
69
|
},
|
|
68
|
-
"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 <span id=\"dob-errors-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </span>\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 </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 </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 </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
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 <span id=\"dob-errors-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </span>\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 </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 </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 </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
|
|
71
|
+
"hidden": false
|
|
69
72
|
},
|
|
70
73
|
{
|
|
71
74
|
"name": "with errors and hint",
|
|
@@ -97,7 +100,8 @@
|
|
|
97
100
|
}
|
|
98
101
|
]
|
|
99
102
|
},
|
|
100
|
-
"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 <span id=\"dob-errors-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </span>\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 </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 </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 </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
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 <span id=\"dob-errors-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </span>\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 </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 </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 </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
|
|
104
|
+
"hidden": false
|
|
101
105
|
},
|
|
102
106
|
{
|
|
103
107
|
"name": "with error on day input",
|
|
@@ -130,7 +134,8 @@
|
|
|
130
134
|
}
|
|
131
135
|
]
|
|
132
136
|
},
|
|
133
|
-
"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 <span id=\"dob-day-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </span>\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 </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 </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 </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
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 <span id=\"dob-day-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </span>\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 </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 </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 </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
|
|
138
|
+
"hidden": false
|
|
134
139
|
},
|
|
135
140
|
{
|
|
136
141
|
"name": "with error on month input",
|
|
@@ -163,7 +168,8 @@
|
|
|
163
168
|
}
|
|
164
169
|
]
|
|
165
170
|
},
|
|
166
|
-
"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 <span id=\"dob-month-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </span>\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 </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 </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 </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
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 <span id=\"dob-month-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </span>\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 </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 </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 </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
|
|
172
|
+
"hidden": false
|
|
167
173
|
},
|
|
168
174
|
{
|
|
169
175
|
"name": "with error on year input",
|
|
@@ -196,7 +202,8 @@
|
|
|
196
202
|
}
|
|
197
203
|
]
|
|
198
204
|
},
|
|
199
|
-
"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 <span id=\"dob-year-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </span>\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 </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 </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 </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
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 <span id=\"dob-year-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </span>\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 </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 </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 </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
|
|
206
|
+
"hidden": false
|
|
200
207
|
},
|
|
201
208
|
{
|
|
202
209
|
"name": "with default items",
|
|
@@ -212,7 +219,8 @@
|
|
|
212
219
|
"text": "For example, 31 3 1980"
|
|
213
220
|
}
|
|
214
221
|
},
|
|
215
|
-
"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 </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>",
|
|
223
|
+
"hidden": false
|
|
216
224
|
},
|
|
217
225
|
{
|
|
218
226
|
"name": "with optional form-group classes",
|
|
@@ -231,7 +239,8 @@
|
|
|
231
239
|
"classes": "extra-class"
|
|
232
240
|
}
|
|
233
241
|
},
|
|
234
|
-
"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 </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>",
|
|
243
|
+
"hidden": false
|
|
235
244
|
},
|
|
236
245
|
{
|
|
237
246
|
"name": "with autocomplete values",
|
|
@@ -264,7 +273,8 @@
|
|
|
264
273
|
}
|
|
265
274
|
]
|
|
266
275
|
},
|
|
267
|
-
"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 </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>",
|
|
277
|
+
"hidden": false
|
|
268
278
|
},
|
|
269
279
|
{
|
|
270
280
|
"name": "with input attributes",
|
|
@@ -303,39 +313,42 @@
|
|
|
303
313
|
}
|
|
304
314
|
]
|
|
305
315
|
},
|
|
306
|
-
"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>"
|
|
307
|
-
|
|
308
|
-
{
|
|
309
|
-
"name": "no data",
|
|
310
|
-
"options": {},
|
|
311
|
-
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-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=\"undefined-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"undefined-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=\"undefined-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"undefined-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=\"undefined-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"undefined-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\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 </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>",
|
|
317
|
+
"hidden": false
|
|
312
318
|
},
|
|
313
319
|
{
|
|
314
320
|
"name": "classes",
|
|
315
321
|
"options": {
|
|
322
|
+
"id": "with-classes",
|
|
316
323
|
"classes": "app-date-input--custom-modifier"
|
|
317
324
|
},
|
|
318
|
-
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input app-date-input--custom-modifier\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"
|
|
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>",
|
|
326
|
+
"hidden": true
|
|
319
327
|
},
|
|
320
328
|
{
|
|
321
329
|
"name": "attributes",
|
|
322
330
|
"options": {
|
|
331
|
+
"id": "with-attributes",
|
|
323
332
|
"attributes": {
|
|
324
333
|
"data-attribute": "my data value"
|
|
325
334
|
}
|
|
326
335
|
},
|
|
327
|
-
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" data-attribute=\"my data value\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"
|
|
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>",
|
|
337
|
+
"hidden": true
|
|
328
338
|
},
|
|
329
339
|
{
|
|
330
340
|
"name": "with empty items",
|
|
331
341
|
"options": {
|
|
342
|
+
"id": "with-empty-items",
|
|
332
343
|
"items": []
|
|
333
344
|
},
|
|
334
|
-
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-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=\"
|
|
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>",
|
|
346
|
+
"hidden": true
|
|
335
347
|
},
|
|
336
348
|
{
|
|
337
349
|
"name": "custom pattern",
|
|
338
350
|
"options": {
|
|
351
|
+
"id": "with-custom-pattern",
|
|
339
352
|
"items": [
|
|
340
353
|
{
|
|
341
354
|
"name": "day",
|
|
@@ -343,11 +356,28 @@
|
|
|
343
356
|
}
|
|
344
357
|
]
|
|
345
358
|
},
|
|
346
|
-
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-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=\"
|
|
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>",
|
|
360
|
+
"hidden": true
|
|
361
|
+
},
|
|
362
|
+
{
|
|
363
|
+
"name": "custom inputmode",
|
|
364
|
+
"options": {
|
|
365
|
+
"id": "with-custom-inputmode",
|
|
366
|
+
"items": [
|
|
367
|
+
{
|
|
368
|
+
"name": "day",
|
|
369
|
+
"pattern": "[0-9X]*",
|
|
370
|
+
"inputmode": "text"
|
|
371
|
+
}
|
|
372
|
+
]
|
|
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>",
|
|
375
|
+
"hidden": true
|
|
347
376
|
},
|
|
348
377
|
{
|
|
349
378
|
"name": "with nested name",
|
|
350
379
|
"options": {
|
|
380
|
+
"id": "with-nested-name",
|
|
351
381
|
"items": [
|
|
352
382
|
{
|
|
353
383
|
"name": "day[dd]"
|
|
@@ -360,24 +390,30 @@
|
|
|
360
390
|
}
|
|
361
391
|
]
|
|
362
392
|
},
|
|
363
|
-
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-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=\"
|
|
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>",
|
|
394
|
+
"hidden": true
|
|
364
395
|
},
|
|
365
396
|
{
|
|
366
397
|
"name": "with id on items",
|
|
367
398
|
"options": {
|
|
399
|
+
"id": "with-item-id",
|
|
368
400
|
"items": [
|
|
369
401
|
{
|
|
370
|
-
"id": "day"
|
|
402
|
+
"id": "day",
|
|
403
|
+
"name": "day"
|
|
371
404
|
},
|
|
372
405
|
{
|
|
373
|
-
"id": "month"
|
|
406
|
+
"id": "month",
|
|
407
|
+
"name": "month"
|
|
374
408
|
},
|
|
375
409
|
{
|
|
376
|
-
"
|
|
410
|
+
"id": "year",
|
|
411
|
+
"name": "year"
|
|
377
412
|
}
|
|
378
413
|
]
|
|
379
414
|
},
|
|
380
|
-
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n \n \n <input class=\"govuk-input govuk-date-input__input \" id=\"day\" name=\"\" 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 \n \n <input class=\"govuk-input govuk-date-input__input \" id=\"month\" name=\"\" 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 \n \n <input class=\"govuk-input govuk-date-input__input \" id=\"
|
|
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>",
|
|
416
|
+
"hidden": true
|
|
381
417
|
},
|
|
382
418
|
{
|
|
383
419
|
"name": "suffixed id",
|
|
@@ -395,25 +431,31 @@
|
|
|
395
431
|
}
|
|
396
432
|
]
|
|
397
433
|
},
|
|
398
|
-
"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 </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>",
|
|
435
|
+
"hidden": true
|
|
399
436
|
},
|
|
400
437
|
{
|
|
401
438
|
"name": "with values",
|
|
402
439
|
"options": {
|
|
440
|
+
"id": "with-values",
|
|
403
441
|
"items": [
|
|
404
442
|
{
|
|
405
|
-
"id": "day"
|
|
443
|
+
"id": "day",
|
|
444
|
+
"name": "day"
|
|
406
445
|
},
|
|
407
446
|
{
|
|
408
|
-
"id": "month"
|
|
447
|
+
"id": "month",
|
|
448
|
+
"name": "month"
|
|
409
449
|
},
|
|
410
450
|
{
|
|
411
451
|
"id": "year",
|
|
452
|
+
"name": "year",
|
|
412
453
|
"value": 2018
|
|
413
454
|
}
|
|
414
455
|
]
|
|
415
456
|
},
|
|
416
|
-
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n \n \n <input class=\"govuk-input govuk-date-input__input \" id=\"day\" name=\"\" 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 \n \n <input class=\"govuk-input govuk-date-input__input \" id=\"month\" name=\"\" 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 \n \n <input class=\"govuk-input govuk-date-input__input \" id=\"year\" name=\"\" 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 </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>",
|
|
458
|
+
"hidden": true
|
|
417
459
|
},
|
|
418
460
|
{
|
|
419
461
|
"name": "with hint and describedBy",
|
|
@@ -429,7 +471,8 @@
|
|
|
429
471
|
"text": "For example, 31 3 1980"
|
|
430
472
|
}
|
|
431
473
|
},
|
|
432
|
-
"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 </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>",
|
|
475
|
+
"hidden": true
|
|
433
476
|
},
|
|
434
477
|
{
|
|
435
478
|
"name": "with error and describedBy",
|
|
@@ -445,22 +488,26 @@
|
|
|
445
488
|
"text": "Error message goes here"
|
|
446
489
|
}
|
|
447
490
|
},
|
|
448
|
-
"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 <span id=\"dob-errors-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </span>\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>"
|
|
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 <span id=\"dob-errors-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </span>\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>",
|
|
492
|
+
"hidden": true
|
|
449
493
|
},
|
|
450
494
|
{
|
|
451
495
|
"name": "fieldset html",
|
|
452
496
|
"options": {
|
|
497
|
+
"id": "with-fieldset-html",
|
|
453
498
|
"fieldset": {
|
|
454
499
|
"legend": {
|
|
455
500
|
"html": "What is your <b>date of birth</b>?"
|
|
456
501
|
}
|
|
457
502
|
}
|
|
458
503
|
},
|
|
459
|
-
"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\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"
|
|
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>",
|
|
505
|
+
"hidden": true
|
|
460
506
|
},
|
|
461
507
|
{
|
|
462
508
|
"name": "items with classes",
|
|
463
509
|
"options": {
|
|
510
|
+
"id": "with-item-classes",
|
|
464
511
|
"items": [
|
|
465
512
|
{
|
|
466
513
|
"name": "day",
|
|
@@ -476,11 +523,13 @@
|
|
|
476
523
|
}
|
|
477
524
|
]
|
|
478
525
|
},
|
|
479
|
-
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-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=\"
|
|
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>",
|
|
527
|
+
"hidden": true
|
|
480
528
|
},
|
|
481
529
|
{
|
|
482
530
|
"name": "items without classes",
|
|
483
531
|
"options": {
|
|
532
|
+
"id": "without-item-classes",
|
|
484
533
|
"items": [
|
|
485
534
|
{
|
|
486
535
|
"name": "day"
|
|
@@ -493,7 +542,8 @@
|
|
|
493
542
|
}
|
|
494
543
|
]
|
|
495
544
|
},
|
|
496
|
-
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-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=\"
|
|
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>",
|
|
546
|
+
"hidden": true
|
|
497
547
|
}
|
|
498
548
|
]
|
|
499
549
|
}
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
name: (params.namePrefix + "-" + item.name) if params.namePrefix else item.name,
|
|
67
67
|
value: item.value,
|
|
68
68
|
type: "text",
|
|
69
|
-
inputmode: "numeric",
|
|
69
|
+
inputmode: item.inputmode if item.inputmode else "numeric",
|
|
70
70
|
autocomplete: item.autocomplete,
|
|
71
71
|
pattern: item.pattern if item.pattern else "[0-9]*",
|
|
72
72
|
attributes: item.attributes
|
|
@@ -7,7 +7,8 @@
|
|
|
7
7
|
"summaryText": "Help with nationality",
|
|
8
8
|
"text": "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."
|
|
9
9
|
},
|
|
10
|
-
"html": "<details class=\"govuk-details\" data-module=\"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>"
|
|
10
|
+
"html": "<details class=\"govuk-details\" data-module=\"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>",
|
|
11
|
+
"hidden": false
|
|
11
12
|
},
|
|
12
13
|
{
|
|
13
14
|
"name": "expanded",
|
|
@@ -17,7 +18,8 @@
|
|
|
17
18
|
"text": "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.",
|
|
18
19
|
"open": true
|
|
19
20
|
},
|
|
20
|
-
"html": "<details id=\"help-with-nationality\" class=\"govuk-details\" data-module=\"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>"
|
|
21
|
+
"html": "<details id=\"help-with-nationality\" class=\"govuk-details\" data-module=\"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>",
|
|
22
|
+
"hidden": false
|
|
21
23
|
},
|
|
22
24
|
{
|
|
23
25
|
"name": "with html",
|
|
@@ -25,59 +27,77 @@
|
|
|
25
27
|
"summaryText": "Where to find your National Insurance Number",
|
|
26
28
|
"html": "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"
|
|
27
29
|
},
|
|
28
|
-
"html": "<details class=\"govuk-details\" data-module=\"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>"
|
|
30
|
+
"html": "<details class=\"govuk-details\" data-module=\"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>",
|
|
31
|
+
"hidden": false
|
|
29
32
|
},
|
|
30
33
|
{
|
|
31
34
|
"name": "id",
|
|
32
35
|
"options": {
|
|
33
|
-
"id": "my-details-element"
|
|
36
|
+
"id": "my-details-element",
|
|
37
|
+
"summaryText": "Expand this section",
|
|
38
|
+
"text": "Here are some more details"
|
|
34
39
|
},
|
|
35
|
-
"html": "<details id=\"my-details-element\" class=\"govuk-details\" data-module=\"govuk-details\">\n <summary class=\"govuk-details__summary\">\n <span class=\"govuk-details__summary-text\">\n \n </span>\n </summary>\n <div class=\"govuk-details__text\">\n \n </div>\n</details>"
|
|
40
|
+
"html": "<details id=\"my-details-element\" class=\"govuk-details\" data-module=\"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>",
|
|
41
|
+
"hidden": true
|
|
36
42
|
},
|
|
37
43
|
{
|
|
38
44
|
"name": "html as text",
|
|
39
45
|
"options": {
|
|
46
|
+
"summaryText": "Expand this section",
|
|
40
47
|
"text": "More about the greater than symbol (>)"
|
|
41
48
|
},
|
|
42
|
-
"html": "<details class=\"govuk-details\" data-module=\"govuk-details\">\n <summary class=\"govuk-details__summary\">\n <span class=\"govuk-details__summary-text\">\n \n </span>\n </summary>\n <div class=\"govuk-details__text\">\n More about the greater than symbol (>)\n </div>\n</details>"
|
|
49
|
+
"html": "<details class=\"govuk-details\" data-module=\"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 (>)\n </div>\n</details>",
|
|
50
|
+
"hidden": true
|
|
43
51
|
},
|
|
44
52
|
{
|
|
45
53
|
"name": "html",
|
|
46
54
|
"options": {
|
|
55
|
+
"summaryText": "Expand this section",
|
|
47
56
|
"html": "More about <b>bold text</b>"
|
|
48
57
|
},
|
|
49
|
-
"html": "<details class=\"govuk-details\" data-module=\"govuk-details\">\n <summary class=\"govuk-details__summary\">\n <span class=\"govuk-details__summary-text\">\n \n </span>\n </summary>\n <div class=\"govuk-details__text\">\n More about <b>bold text</b>\n </div>\n</details>"
|
|
58
|
+
"html": "<details class=\"govuk-details\" data-module=\"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>",
|
|
59
|
+
"hidden": true
|
|
50
60
|
},
|
|
51
61
|
{
|
|
52
62
|
"name": "summary html as text",
|
|
53
63
|
"options": {
|
|
54
|
-
"summaryText": "The greater than symbol (>) is the best"
|
|
64
|
+
"summaryText": "The greater than symbol (>) is the best",
|
|
65
|
+
"text": "Here are some more details"
|
|
55
66
|
},
|
|
56
|
-
"html": "<details class=\"govuk-details\" data-module=\"govuk-details\">\n <summary class=\"govuk-details__summary\">\n <span class=\"govuk-details__summary-text\">\n The greater than symbol (>) is the best\n </span>\n </summary>\n <div class=\"govuk-details__text\">\n \n </div>\n</details>"
|
|
67
|
+
"html": "<details class=\"govuk-details\" data-module=\"govuk-details\">\n <summary class=\"govuk-details__summary\">\n <span class=\"govuk-details__summary-text\">\n The greater than symbol (>) is the best\n </span>\n </summary>\n <div class=\"govuk-details__text\">\n Here are some more details\n </div>\n</details>",
|
|
68
|
+
"hidden": true
|
|
57
69
|
},
|
|
58
70
|
{
|
|
59
71
|
"name": "summary html",
|
|
60
72
|
"options": {
|
|
61
|
-
"summaryHtml": "Use <b>bold text</b> sparingly"
|
|
73
|
+
"summaryHtml": "Use <b>bold text</b> sparingly",
|
|
74
|
+
"text": "Here are some more details"
|
|
62
75
|
},
|
|
63
|
-
"html": "<details class=\"govuk-details\" data-module=\"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 \n </div>\n</details>"
|
|
76
|
+
"html": "<details class=\"govuk-details\" data-module=\"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>",
|
|
77
|
+
"hidden": true
|
|
64
78
|
},
|
|
65
79
|
{
|
|
66
80
|
"name": "classes",
|
|
67
81
|
"options": {
|
|
68
|
-
"classes": "some-additional-class"
|
|
82
|
+
"classes": "some-additional-class",
|
|
83
|
+
"text": "Here are some more details",
|
|
84
|
+
"summaryText": "Expand me"
|
|
69
85
|
},
|
|
70
|
-
"html": "<details class=\"govuk-details some-additional-class\" data-module=\"govuk-details\">\n <summary class=\"govuk-details__summary\">\n <span class=\"govuk-details__summary-text\">\n \n </span>\n </summary>\n <div class=\"govuk-details__text\">\n \n </div>\n</details>"
|
|
86
|
+
"html": "<details class=\"govuk-details some-additional-class\" data-module=\"govuk-details\">\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>",
|
|
87
|
+
"hidden": true
|
|
71
88
|
},
|
|
72
89
|
{
|
|
73
90
|
"name": "attributes",
|
|
74
91
|
"options": {
|
|
92
|
+
"text": "Here are some more details",
|
|
93
|
+
"summaryText": "Expand me",
|
|
75
94
|
"attributes": {
|
|
76
95
|
"data-some-data-attribute": "i-love-data",
|
|
77
96
|
"another-attribute": true
|
|
78
97
|
}
|
|
79
98
|
},
|
|
80
|
-
"html": "<details class=\"govuk-details\" data-module=\"govuk-details\" data-some-data-attribute=\"i-love-data\" another-attribute=\"true\">\n <summary class=\"govuk-details__summary\">\n <span class=\"govuk-details__summary-text\">\n \n </span>\n </summary>\n <div class=\"govuk-details__text\">\n \n </div>\n</details>"
|
|
99
|
+
"html": "<details class=\"govuk-details\" data-module=\"govuk-details\" data-some-data-attribute=\"i-love-data\" another-attribute=\"true\">\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>",
|
|
100
|
+
"hidden": true
|
|
81
101
|
}
|
|
82
102
|
]
|
|
83
103
|
}
|