govuk_publishing_components 23.12.1 → 23.14.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/images/govuk_publishing_components/take-action-amber.svg +4 -0
- data/app/assets/images/govuk_publishing_components/take-action-green.svg +4 -0
- data/app/assets/images/govuk_publishing_components/take-action-red.svg +4 -0
- 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/_contextual-sidebar.scss +34 -17
- data/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss +8 -8
- 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/_contextual_sidebar.html.erb +2 -8
- data/app/views/govuk_publishing_components/components/_document_list.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_layout_footer.html.erb +4 -2
- data/app/views/govuk_publishing_components/components/_layout_header.html.erb +3 -2
- 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/contextual_sidebar/_brexit_cta.html.erb +21 -0
- data/app/views/govuk_publishing_components/components/docs/contextual_sidebar.yml +60 -1
- data/app/views/govuk_publishing_components/components/docs/document_list.yml +8 -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/initializers/assets.rb +3 -0
- data/config/locales/cy.yml +6 -1
- data/config/locales/en.yml +8 -3
- data/lib/govuk_publishing_components/presenters/contextual_navigation.rb +124 -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 +18 -4
- data/app/assets/stylesheets/govuk_publishing_components/components/_transition-countdown.scss +0 -125
- data/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_related_links.html.erb +0 -6
@@ -6,45 +6,54 @@
|
|
6
6
|
"options": {
|
7
7
|
"text": "Error message about full name goes here"
|
8
8
|
},
|
9
|
-
"html": "<span class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message about full name goes here\n</span>"
|
9
|
+
"html": "<span class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message about full name goes here\n</span>",
|
10
|
+
"hidden": false
|
10
11
|
},
|
11
12
|
{
|
12
13
|
"name": "id",
|
13
14
|
"options": {
|
14
|
-
"id": "my-error-message-id"
|
15
|
+
"id": "my-error-message-id",
|
16
|
+
"text": "This is an error message"
|
15
17
|
},
|
16
|
-
"html": "<span id=\"my-error-message-id\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> \n</span>"
|
18
|
+
"html": "<span id=\"my-error-message-id\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> This is an error message\n</span>",
|
19
|
+
"hidden": true
|
17
20
|
},
|
18
21
|
{
|
19
22
|
"name": "classes",
|
20
23
|
"options": {
|
21
|
-
"classes": "custom-class"
|
24
|
+
"classes": "custom-class",
|
25
|
+
"text": "This is an error message"
|
22
26
|
},
|
23
|
-
"html": "<span class=\"govuk-error-message custom-class\">\n <span class=\"govuk-visually-hidden\">Error:</span> \n</span>"
|
27
|
+
"html": "<span class=\"govuk-error-message custom-class\">\n <span class=\"govuk-visually-hidden\">Error:</span> This is an error message\n</span>",
|
28
|
+
"hidden": true
|
24
29
|
},
|
25
30
|
{
|
26
31
|
"name": "html as text",
|
27
32
|
"options": {
|
28
33
|
"text": "Unexpected > in body"
|
29
34
|
},
|
30
|
-
"html": "<span class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Unexpected > in body\n</span>"
|
35
|
+
"html": "<span class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Unexpected > in body\n</span>",
|
36
|
+
"hidden": true
|
31
37
|
},
|
32
38
|
{
|
33
39
|
"name": "html",
|
34
40
|
"options": {
|
35
41
|
"html": "Unexpected <b>bold text</b> in body copy"
|
36
42
|
},
|
37
|
-
"html": "<span class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Unexpected <b>bold text</b> in body copy\n</span>"
|
43
|
+
"html": "<span class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Unexpected <b>bold text</b> in body copy\n</span>",
|
44
|
+
"hidden": true
|
38
45
|
},
|
39
46
|
{
|
40
47
|
"name": "attributes",
|
41
48
|
"options": {
|
49
|
+
"text": "This is an error message",
|
42
50
|
"attributes": {
|
43
51
|
"data-test": "attribute",
|
44
52
|
"id": "my-error-message"
|
45
53
|
}
|
46
54
|
},
|
47
|
-
"html": "<span class=\"govuk-error-message\" data-test=\"attribute\" id=\"my-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> \n</span>"
|
55
|
+
"html": "<span 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</span>",
|
56
|
+
"hidden": true
|
48
57
|
},
|
49
58
|
{
|
50
59
|
"name": "with visually hidden text",
|
@@ -52,7 +61,8 @@
|
|
52
61
|
"text": "Rhowch eich enw llawn",
|
53
62
|
"visuallyHiddenText": "Gwall"
|
54
63
|
},
|
55
|
-
"html": "<span class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Gwall:</span> Rhowch eich enw llawn\n</span>"
|
64
|
+
"html": "<span class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Gwall:</span> Rhowch eich enw llawn\n</span>",
|
65
|
+
"hidden": true
|
56
66
|
},
|
57
67
|
{
|
58
68
|
"name": "visually hidden text removed",
|
@@ -60,7 +70,8 @@
|
|
60
70
|
"text": "There is an error on line 42",
|
61
71
|
"visuallyHiddenText": false
|
62
72
|
},
|
63
|
-
"html": "<span class=\"govuk-error-message\">\n There is an error on line 42\n</span>"
|
73
|
+
"html": "<span class=\"govuk-error-message\">\n There is an error on line 42\n</span>",
|
74
|
+
"hidden": true
|
64
75
|
}
|
65
76
|
]
|
66
77
|
}
|
@@ -37,17 +37,7 @@
|
|
37
37
|
|
38
38
|
.govuk-error-summary__list a {
|
39
39
|
@include govuk-typography-weight-bold;
|
40
|
-
|
41
|
-
|
42
|
-
&:link,
|
43
|
-
&:visited,
|
44
|
-
&:hover,
|
45
|
-
&:active {
|
46
|
-
color: $govuk-error-colour;
|
47
|
-
}
|
48
|
-
|
49
|
-
&:focus {
|
50
|
-
@include govuk-focused-text;
|
51
|
-
}
|
40
|
+
@include govuk-link-common;
|
41
|
+
@include govuk-link-style-error;
|
52
42
|
}
|
53
43
|
}
|
@@ -16,7 +16,8 @@
|
|
16
16
|
}
|
17
17
|
]
|
18
18
|
},
|
19
|
-
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n <a href=\"#example-error-1\">The date your passport was issued must be in the past</a>\n \n </li>\n \n <li>\n \n <a href=\"#example-error-2\">Enter a postcode, like AA1 1AA</a>\n \n </li>\n \n </ul>\n </div>\n</div>"
|
19
|
+
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n <a href=\"#example-error-1\">The date your passport was issued must be in the past</a>\n \n </li>\n \n <li>\n \n <a href=\"#example-error-2\">Enter a postcode, like AA1 1AA</a>\n \n </li>\n \n </ul>\n </div>\n</div>",
|
20
|
+
"hidden": false
|
20
21
|
},
|
21
22
|
{
|
22
23
|
"name": "without links",
|
@@ -28,7 +29,8 @@
|
|
28
29
|
}
|
29
30
|
]
|
30
31
|
},
|
31
|
-
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n Invalid username or password\n \n </li>\n \n </ul>\n </div>\n</div>"
|
32
|
+
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n Invalid username or password\n \n </li>\n \n </ul>\n </div>\n</div>",
|
33
|
+
"hidden": false
|
32
34
|
},
|
33
35
|
{
|
34
36
|
"name": "mixed with and without links",
|
@@ -44,7 +46,8 @@
|
|
44
46
|
}
|
45
47
|
]
|
46
48
|
},
|
47
|
-
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n Invalid username or password\n \n </li>\n \n <li>\n \n <a href=\"#example-error-1\">Agree to the terms of service to log in</a>\n \n </li>\n \n </ul>\n </div>\n</div>"
|
49
|
+
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n Invalid username or password\n \n </li>\n \n <li>\n \n <a href=\"#example-error-1\">Agree to the terms of service to log in</a>\n \n </li>\n \n </ul>\n </div>\n</div>",
|
50
|
+
"hidden": false
|
48
51
|
},
|
49
52
|
{
|
50
53
|
"name": "with everything",
|
@@ -61,63 +64,112 @@
|
|
61
64
|
}
|
62
65
|
]
|
63
66
|
},
|
64
|
-
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <p>\n Please fix the errors below.\n </p>\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n Invalid username or password\n \n </li>\n \n <li>\n \n <a href=\"#example-error-1\">Agree to the terms of service to log in</a>\n \n </li>\n \n </ul>\n </div>\n</div>"
|
67
|
+
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <p>\n Please fix the errors below.\n </p>\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n Invalid username or password\n \n </li>\n \n <li>\n \n <a href=\"#example-error-1\">Agree to the terms of service to log in</a>\n \n </li>\n \n </ul>\n </div>\n</div>",
|
68
|
+
"hidden": false
|
65
69
|
},
|
66
70
|
{
|
67
71
|
"name": "html as titleText",
|
68
72
|
"options": {
|
69
|
-
"titleText": "Alert, <em>alert</em>"
|
73
|
+
"titleText": "Alert, <em>alert</em>",
|
74
|
+
"errorList": [
|
75
|
+
{
|
76
|
+
"text": "Invalid username or password"
|
77
|
+
}
|
78
|
+
]
|
70
79
|
},
|
71
|
-
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n Alert, <em>alert</em>\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n </ul>\n </div>\n</div>"
|
80
|
+
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n Alert, <em>alert</em>\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n Invalid username or password\n \n </li>\n \n </ul>\n </div>\n</div>",
|
81
|
+
"hidden": true
|
72
82
|
},
|
73
83
|
{
|
74
84
|
"name": "title html",
|
75
85
|
"options": {
|
76
|
-
"titleHtml": "Alert, <em>alert</em>"
|
86
|
+
"titleHtml": "Alert, <em>alert</em>",
|
87
|
+
"errorList": [
|
88
|
+
{
|
89
|
+
"text": "Invalid username or password"
|
90
|
+
}
|
91
|
+
]
|
77
92
|
},
|
78
|
-
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n Alert, <em>alert</em>\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n </ul>\n </div>\n</div>"
|
93
|
+
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n Alert, <em>alert</em>\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n Invalid username or password\n \n </li>\n \n </ul>\n </div>\n</div>",
|
94
|
+
"hidden": true
|
79
95
|
},
|
80
96
|
{
|
81
97
|
"name": "description",
|
82
98
|
"options": {
|
83
|
-
"
|
99
|
+
"titleText": "There is a problem",
|
100
|
+
"descriptionText": "Lorem ipsum",
|
101
|
+
"errorList": [
|
102
|
+
{
|
103
|
+
"text": "Invalid username or password"
|
104
|
+
}
|
105
|
+
]
|
84
106
|
},
|
85
|
-
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n \n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <p>\n Lorem ipsum\n </p>\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n </ul>\n </div>\n</div>"
|
107
|
+
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <p>\n Lorem ipsum\n </p>\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n Invalid username or password\n \n </li>\n \n </ul>\n </div>\n</div>",
|
108
|
+
"hidden": true
|
86
109
|
},
|
87
110
|
{
|
88
111
|
"name": "html as descriptionText",
|
89
112
|
"options": {
|
90
|
-
"
|
113
|
+
"titleText": "There is a problem",
|
114
|
+
"descriptionText": "See errors below (▼)",
|
115
|
+
"errorList": [
|
116
|
+
{
|
117
|
+
"text": "Invalid username or password"
|
118
|
+
}
|
119
|
+
]
|
91
120
|
},
|
92
|
-
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n \n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <p>\n See errors below (▼)\n </p>\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n </ul>\n </div>\n</div>"
|
121
|
+
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <p>\n See errors below (▼)\n </p>\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n Invalid username or password\n \n </li>\n \n </ul>\n </div>\n</div>",
|
122
|
+
"hidden": true
|
93
123
|
},
|
94
124
|
{
|
95
125
|
"name": "description html",
|
96
126
|
"options": {
|
97
|
-
"
|
127
|
+
"titleText": "There is a problem",
|
128
|
+
"descriptionHtml": "See <span>errors</span> below",
|
129
|
+
"errorList": [
|
130
|
+
{
|
131
|
+
"text": "Invalid username or password"
|
132
|
+
}
|
133
|
+
]
|
98
134
|
},
|
99
|
-
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n \n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <p>\n See <span>errors</span> below\n </p>\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n </ul>\n </div>\n</div>"
|
135
|
+
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <p>\n See <span>errors</span> below\n </p>\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n Invalid username or password\n \n </li>\n \n </ul>\n </div>\n</div>",
|
136
|
+
"hidden": true
|
100
137
|
},
|
101
138
|
{
|
102
139
|
"name": "classes",
|
103
140
|
"options": {
|
104
|
-
"
|
141
|
+
"titleText": "There is a problem",
|
142
|
+
"classes": "extra-class one-more-class",
|
143
|
+
"errorList": [
|
144
|
+
{
|
145
|
+
"text": "Invalid username or password"
|
146
|
+
}
|
147
|
+
]
|
105
148
|
},
|
106
|
-
"html": "<div class=\"govuk-error-summary extra-class one-more-class\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n \n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n </ul>\n </div>\n</div>"
|
149
|
+
"html": "<div class=\"govuk-error-summary extra-class one-more-class\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n Invalid username or password\n \n </li>\n \n </ul>\n </div>\n</div>",
|
150
|
+
"hidden": true
|
107
151
|
},
|
108
152
|
{
|
109
153
|
"name": "attributes",
|
110
154
|
"options": {
|
155
|
+
"titleText": "There is a problem",
|
111
156
|
"attributes": {
|
112
|
-
"first-attribute": "
|
113
|
-
"second-attribute": "
|
114
|
-
}
|
157
|
+
"first-attribute": "foo",
|
158
|
+
"second-attribute": "bar"
|
159
|
+
},
|
160
|
+
"errorList": [
|
161
|
+
{
|
162
|
+
"text": "Invalid username or password"
|
163
|
+
}
|
164
|
+
]
|
115
165
|
},
|
116
|
-
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" first-attribute=\"
|
166
|
+
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" first-attribute=\"foo\" second-attribute=\"bar\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n Invalid username or password\n \n </li>\n \n </ul>\n </div>\n</div>",
|
167
|
+
"hidden": true
|
117
168
|
},
|
118
169
|
{
|
119
170
|
"name": "error list with attributes",
|
120
171
|
"options": {
|
172
|
+
"titleText": "There is a problem",
|
121
173
|
"errorList": [
|
122
174
|
{
|
123
175
|
"text": "Error-1",
|
@@ -129,33 +181,39 @@
|
|
129
181
|
}
|
130
182
|
]
|
131
183
|
},
|
132
|
-
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n \n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n <a href=\"#item\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">Error-1</a>\n \n </li>\n \n </ul>\n </div>\n</div>"
|
184
|
+
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n <a href=\"#item\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">Error-1</a>\n \n </li>\n \n </ul>\n </div>\n</div>",
|
185
|
+
"hidden": true
|
133
186
|
},
|
134
187
|
{
|
135
188
|
"name": "error list with html as text",
|
136
189
|
"options": {
|
190
|
+
"titleText": "There is a problem",
|
137
191
|
"errorList": [
|
138
192
|
{
|
139
193
|
"text": "Descriptive link to the <b>question</b> with an error"
|
140
194
|
}
|
141
195
|
]
|
142
196
|
},
|
143
|
-
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n \n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n Descriptive link to the <b>question</b> with an error\n \n </li>\n \n </ul>\n </div>\n</div>"
|
197
|
+
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n Descriptive link to the <b>question</b> with an error\n \n </li>\n \n </ul>\n </div>\n</div>",
|
198
|
+
"hidden": true
|
144
199
|
},
|
145
200
|
{
|
146
201
|
"name": "error list with html",
|
147
202
|
"options": {
|
203
|
+
"titleText": "There is a problem",
|
148
204
|
"errorList": [
|
149
205
|
{
|
150
206
|
"html": "The date your passport was issued <b>must</b> be in the past"
|
151
207
|
}
|
152
208
|
]
|
153
209
|
},
|
154
|
-
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n \n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n The date your passport was issued <b>must</b> be in the past\n \n </li>\n \n </ul>\n </div>\n</div>"
|
210
|
+
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n The date your passport was issued <b>must</b> be in the past\n \n </li>\n \n </ul>\n </div>\n</div>",
|
211
|
+
"hidden": true
|
155
212
|
},
|
156
213
|
{
|
157
214
|
"name": "error list with html link",
|
158
215
|
"options": {
|
216
|
+
"titleText": "There is a problem",
|
159
217
|
"errorList": [
|
160
218
|
{
|
161
219
|
"html": "Descriptive link to the <b>question</b> with an error",
|
@@ -163,11 +221,13 @@
|
|
163
221
|
}
|
164
222
|
]
|
165
223
|
},
|
166
|
-
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n \n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n <a href=\"#error-1\">Descriptive link to the <b>question</b> with an error</a>\n \n </li>\n \n </ul>\n </div>\n</div>"
|
224
|
+
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n <a href=\"#error-1\">Descriptive link to the <b>question</b> with an error</a>\n \n </li>\n \n </ul>\n </div>\n</div>",
|
225
|
+
"hidden": true
|
167
226
|
},
|
168
227
|
{
|
169
228
|
"name": "error list with html as text link",
|
170
229
|
"options": {
|
230
|
+
"titleText": "There is a problem",
|
171
231
|
"errorList": [
|
172
232
|
{
|
173
233
|
"text": "Descriptive link to the <b>question</b> with an error",
|
@@ -175,7 +235,8 @@
|
|
175
235
|
}
|
176
236
|
]
|
177
237
|
},
|
178
|
-
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n \n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n <a href=\"#error-1\">Descriptive link to the <b>question</b> with an error</a>\n \n </li>\n \n </ul>\n </div>\n</div>"
|
238
|
+
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n <a href=\"#error-1\">Descriptive link to the <b>question</b> with an error</a>\n \n </li>\n \n </ul>\n </div>\n</div>",
|
239
|
+
"hidden": true
|
179
240
|
}
|
180
241
|
]
|
181
242
|
}
|
@@ -8,7 +8,8 @@
|
|
8
8
|
"text": "What is your address?"
|
9
9
|
}
|
10
10
|
},
|
11
|
-
"html": "<fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your address?\n \n </legend>\n \n\n</fieldset>"
|
11
|
+
"html": "<fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your address?\n \n </legend>\n \n\n</fieldset>",
|
12
|
+
"hidden": false
|
12
13
|
},
|
13
14
|
{
|
14
15
|
"name": "as page heading",
|
@@ -19,7 +20,8 @@
|
|
19
20
|
"isPageHeading": true
|
20
21
|
}
|
21
22
|
},
|
22
|
-
"html": "<fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--xl\">\n \n <h1 class=\"govuk-fieldset__heading\">\n What is your address?\n </h1>\n \n </legend>\n \n\n</fieldset>"
|
23
|
+
"html": "<fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--xl\">\n \n <h1 class=\"govuk-fieldset__heading\">\n What is your address?\n </h1>\n \n </legend>\n \n\n</fieldset>",
|
24
|
+
"hidden": false
|
23
25
|
},
|
24
26
|
{
|
25
27
|
"name": "html fieldset content",
|
@@ -29,14 +31,16 @@
|
|
29
31
|
},
|
30
32
|
"html": "<div class=\"my-content\">\n <p>This is some content to put inside the fieldset</p>\n</div>\n"
|
31
33
|
},
|
32
|
-
"html": "<fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your address?\n \n </legend>\n \n\n <div class=\"my-content\">\n <p>This is some content to put inside the fieldset</p>\n</div>\n\n\n</fieldset>"
|
34
|
+
"html": "<fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your address?\n \n </legend>\n \n\n <div class=\"my-content\">\n <p>This is some content to put inside the fieldset</p>\n</div>\n\n\n</fieldset>",
|
35
|
+
"hidden": true
|
33
36
|
},
|
34
37
|
{
|
35
38
|
"name": "with describedBy",
|
36
39
|
"options": {
|
37
40
|
"describedBy": "some-id"
|
38
41
|
},
|
39
|
-
"html": "<fieldset class=\"govuk-fieldset\" aria-describedby=\"some-id\">\n \n\n</fieldset>"
|
42
|
+
"html": "<fieldset class=\"govuk-fieldset\" aria-describedby=\"some-id\">\n \n\n</fieldset>",
|
43
|
+
"hidden": true
|
40
44
|
},
|
41
45
|
{
|
42
46
|
"name": "html as text",
|
@@ -45,7 +49,8 @@
|
|
45
49
|
"text": "What is <b>your</b> address?"
|
46
50
|
}
|
47
51
|
},
|
48
|
-
"html": "<fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is <b>your</b> address?\n \n </legend>\n \n\n</fieldset>"
|
52
|
+
"html": "<fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is <b>your</b> address?\n \n </legend>\n \n\n</fieldset>",
|
53
|
+
"hidden": true
|
49
54
|
},
|
50
55
|
{
|
51
56
|
"name": "html",
|
@@ -54,7 +59,8 @@
|
|
54
59
|
"html": "What is <b>your</b> address?"
|
55
60
|
}
|
56
61
|
},
|
57
|
-
"html": "<fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is <b>your</b> address?\n \n </legend>\n \n\n</fieldset>"
|
62
|
+
"html": "<fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is <b>your</b> address?\n \n </legend>\n \n\n</fieldset>",
|
63
|
+
"hidden": true
|
58
64
|
},
|
59
65
|
{
|
60
66
|
"name": "legend classes",
|
@@ -64,21 +70,24 @@
|
|
64
70
|
"classes": "my-custom-class"
|
65
71
|
}
|
66
72
|
},
|
67
|
-
"html": "<fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend my-custom-class\">\n \n What is your address?\n \n </legend>\n \n\n</fieldset>"
|
73
|
+
"html": "<fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend my-custom-class\">\n \n What is your address?\n \n </legend>\n \n\n</fieldset>",
|
74
|
+
"hidden": true
|
68
75
|
},
|
69
76
|
{
|
70
77
|
"name": "classes",
|
71
78
|
"options": {
|
72
79
|
"classes": "app-fieldset--custom-modifier"
|
73
80
|
},
|
74
|
-
"html": "<fieldset class=\"govuk-fieldset app-fieldset--custom-modifier\">\n \n\n</fieldset>"
|
81
|
+
"html": "<fieldset class=\"govuk-fieldset app-fieldset--custom-modifier\">\n \n\n</fieldset>",
|
82
|
+
"hidden": true
|
75
83
|
},
|
76
84
|
{
|
77
85
|
"name": "role",
|
78
86
|
"options": {
|
79
87
|
"role": "group"
|
80
88
|
},
|
81
|
-
"html": "<fieldset class=\"govuk-fieldset\" role=\"group\">\n \n\n</fieldset>"
|
89
|
+
"html": "<fieldset class=\"govuk-fieldset\" role=\"group\">\n \n\n</fieldset>",
|
90
|
+
"hidden": true
|
82
91
|
},
|
83
92
|
{
|
84
93
|
"name": "attributes",
|
@@ -87,7 +96,8 @@
|
|
87
96
|
"data-attribute": "value"
|
88
97
|
}
|
89
98
|
},
|
90
|
-
"html": "<fieldset class=\"govuk-fieldset\" data-attribute=\"value\">\n \n\n</fieldset>"
|
99
|
+
"html": "<fieldset class=\"govuk-fieldset\" data-attribute=\"value\">\n \n\n</fieldset>",
|
100
|
+
"hidden": true
|
91
101
|
}
|
92
102
|
]
|
93
103
|
}
|
@@ -10,7 +10,8 @@
|
|
10
10
|
"text": "Upload a file"
|
11
11
|
}
|
12
12
|
},
|
13
|
-
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"file-upload-1\">\n Upload a file\n </label>\n\n\n <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\">\n</div>"
|
13
|
+
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"file-upload-1\">\n Upload a file\n </label>\n\n\n <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\">\n</div>",
|
14
|
+
"hidden": false
|
14
15
|
},
|
15
16
|
{
|
16
17
|
"name": "with hint text",
|
@@ -24,7 +25,8 @@
|
|
24
25
|
"text": "Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto."
|
25
26
|
}
|
26
27
|
},
|
27
|
-
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"file-upload-2\">\n Upload your photo\n </label>\n\n \n \n <div id=\"file-upload-2-hint\" class=\"govuk-hint\">\n Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.\n </div>\n\n\n <input class=\"govuk-file-upload\" id=\"file-upload-2\" name=\"file-upload-2\" type=\"file\" aria-describedby=\"file-upload-2-hint\">\n</div>"
|
28
|
+
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"file-upload-2\">\n Upload your photo\n </label>\n\n \n \n <div id=\"file-upload-2-hint\" class=\"govuk-hint\">\n Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.\n </div>\n\n\n <input class=\"govuk-file-upload\" id=\"file-upload-2\" name=\"file-upload-2\" type=\"file\" aria-describedby=\"file-upload-2-hint\">\n</div>",
|
29
|
+
"hidden": false
|
28
30
|
},
|
29
31
|
{
|
30
32
|
"name": "with error message and hint",
|
@@ -41,7 +43,8 @@
|
|
41
43
|
"text": "Error message goes here"
|
42
44
|
}
|
43
45
|
},
|
44
|
-
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"file-upload-3\">\n Upload a file\n </label>\n\n \n \n <div id=\"file-upload-3-hint\" class=\"govuk-hint\">\n Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.\n </div>\n\n\n \n \n <span id=\"file-upload-3-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </span>\n\n <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"file-upload-3\" name=\"file-upload-3\" type=\"file\" aria-describedby=\"file-upload-3-hint file-upload-3-error\">\n</div>"
|
46
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"file-upload-3\">\n Upload a file\n </label>\n\n \n \n <div id=\"file-upload-3-hint\" class=\"govuk-hint\">\n Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.\n </div>\n\n\n \n \n <span id=\"file-upload-3-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </span>\n\n <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"file-upload-3\" name=\"file-upload-3\" type=\"file\" aria-describedby=\"file-upload-3-hint file-upload-3-error\">\n</div>",
|
47
|
+
"hidden": false
|
45
48
|
},
|
46
49
|
{
|
47
50
|
"name": "with value",
|
@@ -53,7 +56,8 @@
|
|
53
56
|
"text": "Upload a photo"
|
54
57
|
}
|
55
58
|
},
|
56
|
-
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"file-upload-4\">\n Upload a photo\n </label>\n\n\n <input class=\"govuk-file-upload\" id=\"file-upload-4\" name=\"file-upload-4\" type=\"file\" value=\"C:\\fakepath\\myphoto.jpg\">\n</div>"
|
59
|
+
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"file-upload-4\">\n Upload a photo\n </label>\n\n\n <input class=\"govuk-file-upload\" id=\"file-upload-4\" name=\"file-upload-4\" type=\"file\" value=\"C:\\fakepath\\myphoto.jpg\">\n</div>",
|
60
|
+
"hidden": false
|
57
61
|
},
|
58
62
|
{
|
59
63
|
"name": "with label as page heading",
|
@@ -65,7 +69,8 @@
|
|
65
69
|
"isPageHeading": true
|
66
70
|
}
|
67
71
|
},
|
68
|
-
"html": "<div class=\"govuk-form-group\">\n <h1 class=\"govuk-label-wrapper\">\n <label class=\"govuk-label\" for=\"file-upload-1\">\n Upload a file\n </label>\n </h1>\n\n\n <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\">\n</div>"
|
72
|
+
"html": "<div class=\"govuk-form-group\">\n <h1 class=\"govuk-label-wrapper\">\n <label class=\"govuk-label\" for=\"file-upload-1\">\n Upload a file\n </label>\n </h1>\n\n\n <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\">\n</div>",
|
73
|
+
"hidden": false
|
69
74
|
},
|
70
75
|
{
|
71
76
|
"name": "with optional form-group classes",
|
@@ -79,64 +84,105 @@
|
|
79
84
|
"classes": "extra-class"
|
80
85
|
}
|
81
86
|
},
|
82
|
-
"html": "<div class=\"govuk-form-group extra-class\">\n <label class=\"govuk-label\" for=\"file-upload-1\">\n Upload a file\n </label>\n\n\n <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\">\n</div>"
|
87
|
+
"html": "<div class=\"govuk-form-group extra-class\">\n <label class=\"govuk-label\" for=\"file-upload-1\">\n Upload a file\n </label>\n\n\n <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\">\n</div>",
|
88
|
+
"hidden": false
|
83
89
|
},
|
84
90
|
{
|
85
91
|
"name": "attributes",
|
86
92
|
"options": {
|
93
|
+
"id": "file-upload-attributes",
|
94
|
+
"name": "file-upload-attributes",
|
95
|
+
"label": {
|
96
|
+
"text": "Upload a file"
|
97
|
+
},
|
87
98
|
"attributes": {
|
88
99
|
"accept": ".jpg, .jpeg, .png"
|
89
100
|
}
|
90
101
|
},
|
91
|
-
"html": "<div class=\"govuk-form-group\">\n \n\n\n <input class=\"govuk-file-upload\" id=\"\" name=\"\" type=\"file\" accept=\".jpg, .jpeg, .png\">\n</div>"
|
102
|
+
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"file-upload-attributes\">\n Upload a file\n </label>\n\n\n <input class=\"govuk-file-upload\" id=\"file-upload-attributes\" name=\"file-upload-attributes\" type=\"file\" accept=\".jpg, .jpeg, .png\">\n</div>",
|
103
|
+
"hidden": true
|
92
104
|
},
|
93
105
|
{
|
94
106
|
"name": "classes",
|
95
107
|
"options": {
|
108
|
+
"id": "file-upload-classes",
|
109
|
+
"name": "file-upload-classes",
|
110
|
+
"label": {
|
111
|
+
"text": "Upload a file"
|
112
|
+
},
|
96
113
|
"classes": "app-file-upload--custom-modifier"
|
97
114
|
},
|
98
|
-
"html": "<div class=\"govuk-form-group\">\n \n\n\n <input class=\"govuk-file-upload app-file-upload--custom-modifier\" id=\"\" name=\"\" type=\"file\">\n</div>"
|
115
|
+
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"file-upload-classes\">\n Upload a file\n </label>\n\n\n <input class=\"govuk-file-upload app-file-upload--custom-modifier\" id=\"file-upload-classes\" name=\"file-upload-classes\" type=\"file\">\n</div>",
|
116
|
+
"hidden": true
|
99
117
|
},
|
100
118
|
{
|
101
119
|
"name": "with describedBy",
|
102
120
|
"options": {
|
121
|
+
"id": "file-upload-describedby",
|
122
|
+
"name": "file-upload-describedby",
|
123
|
+
"label": {
|
124
|
+
"text": "Upload a file"
|
125
|
+
},
|
103
126
|
"describedBy": "some-id"
|
104
127
|
},
|
105
|
-
"html": "<div class=\"govuk-form-group\">\n \n\n\n <input class=\"govuk-file-upload\" id=\"\" name=\"\" type=\"file\" aria-describedby=\"some-id\">\n</div>"
|
128
|
+
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"file-upload-describedby\">\n Upload a file\n </label>\n\n\n <input class=\"govuk-file-upload\" id=\"file-upload-describedby\" name=\"file-upload-describedby\" type=\"file\" aria-describedby=\"some-id\">\n</div>",
|
129
|
+
"hidden": true
|
106
130
|
},
|
107
131
|
{
|
108
132
|
"name": "with hint and describedBy",
|
109
133
|
"options": {
|
134
|
+
"id": "file-upload-hint-describedby",
|
135
|
+
"name": "file-upload-hint-describedby",
|
136
|
+
"label": {
|
137
|
+
"text": "Upload a file"
|
138
|
+
},
|
110
139
|
"describedBy": "some-id",
|
111
140
|
"hint": {
|
112
141
|
"text": "Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto."
|
113
142
|
}
|
114
143
|
},
|
115
|
-
"html": "<div class=\"govuk-form-group\">\n \n\n \n \n <div id=\"
|
144
|
+
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"file-upload-hint-describedby\">\n Upload a file\n </label>\n\n \n \n <div id=\"file-upload-hint-describedby-hint\" class=\"govuk-hint\">\n Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.\n </div>\n\n\n <input class=\"govuk-file-upload\" id=\"file-upload-hint-describedby\" name=\"file-upload-hint-describedby\" type=\"file\" aria-describedby=\"some-id file-upload-hint-describedby-hint\">\n</div>",
|
145
|
+
"hidden": true
|
116
146
|
},
|
117
147
|
{
|
118
148
|
"name": "error",
|
119
149
|
"options": {
|
120
150
|
"id": "file-upload-with-error",
|
151
|
+
"name": "file-upload-with-error",
|
152
|
+
"label": {
|
153
|
+
"text": "Upload a file"
|
154
|
+
},
|
121
155
|
"errorMessage": {
|
122
156
|
"text": "Error message"
|
123
157
|
}
|
124
158
|
},
|
125
|
-
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n \n\n\n \n \n <span id=\"file-upload-with-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </span>\n\n <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"file-upload-with-error\" name=\"\" type=\"file\" aria-describedby=\"file-upload-with-error-error\">\n</div>"
|
159
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"file-upload-with-error\">\n Upload a file\n </label>\n\n\n \n \n <span id=\"file-upload-with-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </span>\n\n <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"file-upload-with-error\" name=\"file-upload-with-error\" type=\"file\" aria-describedby=\"file-upload-with-error-error\">\n</div>",
|
160
|
+
"hidden": true
|
126
161
|
},
|
127
162
|
{
|
128
163
|
"name": "with error and describedBy",
|
129
164
|
"options": {
|
165
|
+
"id": "file-upload-error-describedby",
|
166
|
+
"name": "file-upload-error-describedby",
|
167
|
+
"label": {
|
168
|
+
"text": "Upload a file"
|
169
|
+
},
|
130
170
|
"describedBy": "some-id",
|
131
171
|
"errorMessage": {
|
132
172
|
"text": "Error message"
|
133
173
|
}
|
134
174
|
},
|
135
|
-
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n \n\n\n \n \n <span id=\"
|
175
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"file-upload-error-describedby\">\n Upload a file\n </label>\n\n\n \n \n <span id=\"file-upload-error-describedby-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </span>\n\n <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"file-upload-error-describedby\" name=\"file-upload-error-describedby\" type=\"file\" aria-describedby=\"some-id file-upload-error-describedby-error\">\n</div>",
|
176
|
+
"hidden": true
|
136
177
|
},
|
137
178
|
{
|
138
179
|
"name": "with error, describedBy and hint",
|
139
180
|
"options": {
|
181
|
+
"id": "file-upload-error-describedby-hint",
|
182
|
+
"name": "file-upload-error-describedby-hint",
|
183
|
+
"label": {
|
184
|
+
"text": "Upload a file"
|
185
|
+
},
|
140
186
|
"describedBy": "some-id",
|
141
187
|
"errorMessage": {
|
142
188
|
"text": "Error message"
|
@@ -145,7 +191,8 @@
|
|
145
191
|
"text": "hint"
|
146
192
|
}
|
147
193
|
},
|
148
|
-
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n \n\n \n \n <div id=\"
|
194
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"file-upload-error-describedby-hint\">\n Upload a file\n </label>\n\n \n \n <div id=\"file-upload-error-describedby-hint-hint\" class=\"govuk-hint\">\n hint\n </div>\n\n\n \n \n <span id=\"file-upload-error-describedby-hint-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </span>\n\n <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"file-upload-error-describedby-hint\" name=\"file-upload-error-describedby-hint\" type=\"file\" aria-describedby=\"some-id file-upload-error-describedby-hint-hint file-upload-error-describedby-hint-error\">\n</div>",
|
195
|
+
"hidden": true
|
149
196
|
}
|
150
197
|
]
|
151
198
|
}
|