govuk_publishing_components 23.13.0 → 23.13.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (64) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js +32 -36
  3. data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss +19 -7
  4. data/app/views/govuk_publishing_components/components/_step_by_step_nav.html.erb +2 -2
  5. data/config/locales/en.yml +2 -2
  6. data/lib/govuk_publishing_components/version.rb +1 -1
  7. data/node_modules/govuk-frontend/govuk/all.js +57 -0
  8. data/node_modules/govuk-frontend/govuk/components/_all.scss +1 -0
  9. data/node_modules/govuk-frontend/govuk/components/accordion/fixtures.json +25 -10
  10. data/node_modules/govuk-frontend/govuk/components/back-link/fixtures.json +12 -6
  11. data/node_modules/govuk-frontend/govuk/components/back-link/macro-options.json +4 -4
  12. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/fixtures.json +34 -13
  13. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/macro-options.json +1 -0
  14. data/node_modules/govuk-frontend/govuk/components/button/fixtures.json +74 -31
  15. data/node_modules/govuk-frontend/govuk/components/character-count/fixtures.json +72 -15
  16. data/node_modules/govuk-frontend/govuk/components/character-count/macro-options.json +1 -1
  17. data/node_modules/govuk-frontend/govuk/components/checkboxes/fixtures.json +145 -52
  18. data/node_modules/govuk-frontend/govuk/components/checkboxes/macro-options.json +2 -2
  19. data/node_modules/govuk-frontend/govuk/components/date-input/fixtures.json +84 -34
  20. data/node_modules/govuk-frontend/govuk/components/date-input/macro-options.json +1 -1
  21. data/node_modules/govuk-frontend/govuk/components/date-input/template.njk +1 -1
  22. data/node_modules/govuk-frontend/govuk/components/details/fixtures.json +34 -14
  23. data/node_modules/govuk-frontend/govuk/components/error-message/fixtures.json +21 -10
  24. data/node_modules/govuk-frontend/govuk/components/error-message/macro-options.json +1 -0
  25. data/node_modules/govuk-frontend/govuk/components/error-summary/_index.scss +2 -12
  26. data/node_modules/govuk-frontend/govuk/components/error-summary/fixtures.json +86 -25
  27. data/node_modules/govuk-frontend/govuk/components/fieldset/fixtures.json +20 -10
  28. data/node_modules/govuk-frontend/govuk/components/file-upload/fixtures.json +60 -13
  29. data/node_modules/govuk-frontend/govuk/components/footer/fixtures.json +37 -18
  30. data/node_modules/govuk-frontend/govuk/components/footer/macro-options.json +8 -5
  31. data/node_modules/govuk-frontend/govuk/components/header/fixtures.json +36 -18
  32. data/node_modules/govuk-frontend/govuk/components/header/macro-options.json +2 -2
  33. data/node_modules/govuk-frontend/govuk/components/hint/fixtures.json +17 -8
  34. data/node_modules/govuk-frontend/govuk/components/input/fixtures.json +130 -40
  35. data/node_modules/govuk-frontend/govuk/components/input/macro-options.json +1 -1
  36. data/node_modules/govuk-frontend/govuk/components/inset-text/fixtures.json +17 -8
  37. data/node_modules/govuk-frontend/govuk/components/label/fixtures.json +20 -11
  38. data/node_modules/govuk-frontend/govuk/components/label/macro-options.json +1 -1
  39. data/node_modules/govuk-frontend/govuk/components/notification-banner/README.md +15 -0
  40. data/node_modules/govuk-frontend/govuk/components/notification-banner/_index.scss +89 -0
  41. data/node_modules/govuk-frontend/govuk/components/notification-banner/_notification-banner.scss +2 -0
  42. data/node_modules/govuk-frontend/govuk/components/notification-banner/fixtures.json +212 -0
  43. data/node_modules/govuk-frontend/govuk/components/notification-banner/macro-options.json +68 -0
  44. data/node_modules/govuk-frontend/govuk/components/notification-banner/macro.njk +3 -0
  45. data/node_modules/govuk-frontend/govuk/components/notification-banner/notification-banner.js +61 -0
  46. data/node_modules/govuk-frontend/govuk/components/notification-banner/template.njk +47 -0
  47. data/node_modules/govuk-frontend/govuk/components/panel/fixtures.json +30 -13
  48. data/node_modules/govuk-frontend/govuk/components/phase-banner/fixtures.json +20 -9
  49. data/node_modules/govuk-frontend/govuk/components/radios/fixtures.json +167 -50
  50. data/node_modules/govuk-frontend/govuk/components/select/fixtures.json +97 -18
  51. data/node_modules/govuk-frontend/govuk/components/select/macro-options.json +1 -1
  52. data/node_modules/govuk-frontend/govuk/components/skip-link/fixtures.json +21 -9
  53. data/node_modules/govuk-frontend/govuk/components/summary-list/fixtures.json +118 -25
  54. data/node_modules/govuk-frontend/govuk/components/table/fixtures.json +92 -22
  55. data/node_modules/govuk-frontend/govuk/components/tabs/fixtures.json +75 -18
  56. data/node_modules/govuk-frontend/govuk/components/tabs/macro-options.json +1 -1
  57. data/node_modules/govuk-frontend/govuk/components/tag/fixtures.json +28 -14
  58. data/node_modules/govuk-frontend/govuk/components/textarea/fixtures.json +68 -17
  59. data/node_modules/govuk-frontend/govuk/components/warning-text/fixtures.json +19 -14
  60. data/node_modules/govuk-frontend/govuk/helpers/_links.scss +94 -0
  61. data/node_modules/govuk-frontend/govuk/settings/_colours-applied.scss +9 -0
  62. data/node_modules/govuk-frontend/govuk/settings/_typography-font.scss +3 -0
  63. data/node_modules/govuk-frontend/package.json +1 -1
  64. metadata +10 -2
@@ -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 &gt; in body\n</span>"
35
+ "html": "<span class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Unexpected &gt; 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
  }
@@ -32,6 +32,7 @@
32
32
  {
33
33
  "name": "visuallyHiddenText",
34
34
  "type": "string",
35
+ "required": false,
35
36
  "description": "A visually hidden prefix used before the error message. Defaults to \"Error\"."
36
37
  }
37
38
  ]
@@ -37,17 +37,7 @@
37
37
 
38
38
  .govuk-error-summary__list a {
39
39
  @include govuk-typography-weight-bold;
40
-
41
- // Override default link styling to use error colour
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, &lt;em&gt;alert&lt;/em&gt;\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, &lt;em&gt;alert&lt;/em&gt;\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
- "descriptionText": "Lorem ipsum"
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
- "descriptionText": "See errors below (▼)"
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
- "descriptionHtml": "See <span>errors</span> below"
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
- "classes": "extra-class one-more-class"
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": "true",
113
- "second-attribute": "false"
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=\"true\" second-attribute=\"false\" 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>"
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 &lt;b&gt;question&lt;/b&gt; 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 &lt;b&gt;question&lt;/b&gt; 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 &lt;b&gt;question&lt;/b&gt; 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 &lt;b&gt;question&lt;/b&gt; 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 &lt;b&gt;your&lt;/b&gt; 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 &lt;b&gt;your&lt;/b&gt; 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=\"undefined-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=\"\" name=\"\" type=\"file\" aria-describedby=\"some-id undefined-hint\">\n</div>"
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=\"undefined-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=\"\" name=\"\" type=\"file\" aria-describedby=\"some-id undefined-error\">\n</div>"
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=\"undefined-hint\" class=\"govuk-hint\">\n hint\n </div>\n\n\n \n \n <span id=\"undefined-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=\"\" name=\"\" type=\"file\" aria-describedby=\"some-id undefined-hint undefined-error\">\n</div>"
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
  }