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
@@ -10,7 +10,8 @@
10
10
  "id": "input-example",
11
11
  "name": "test-name"
12
12
  },
13
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-example\">\n National Insurance number\n </label>\n\n<input class=\"govuk-input\" id=\"input-example\" name=\"test-name\" type=\"text\">\n</div>"
13
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-example\">\n National Insurance number\n </label>\n\n<input class=\"govuk-input\" id=\"input-example\" name=\"test-name\" type=\"text\">\n</div>",
14
+ "hidden": false
14
15
  },
15
16
  {
16
17
  "name": "with hint text",
@@ -24,7 +25,8 @@
24
25
  "id": "input-with-hint-text",
25
26
  "name": "test-name-2"
26
27
  },
27
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-hint-text\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-with-hint-text-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input\" id=\"input-with-hint-text\" name=\"test-name-2\" type=\"text\" aria-describedby=\"input-with-hint-text-hint\">\n</div>"
28
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-hint-text\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-with-hint-text-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input\" id=\"input-with-hint-text\" name=\"test-name-2\" type=\"text\" aria-describedby=\"input-with-hint-text-hint\">\n</div>",
29
+ "hidden": false
28
30
  },
29
31
  {
30
32
  "name": "with error message",
@@ -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=\"input-with-error-message\">\n National Insurance number\n </label>\n\n \n \n <div id=\"input-with-error-message-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n\n \n \n <span id=\"input-with-error-message-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </span>\n<input class=\"govuk-input govuk-input--error\" id=\"input-with-error-message\" name=\"test-name-3\" type=\"text\" aria-describedby=\"input-with-error-message-hint input-with-error-message-error\">\n</div>"
46
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"input-with-error-message\">\n National Insurance number\n </label>\n\n \n \n <div id=\"input-with-error-message-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n\n \n \n <span id=\"input-with-error-message-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </span>\n<input class=\"govuk-input govuk-input--error\" id=\"input-with-error-message\" name=\"test-name-3\" type=\"text\" aria-describedby=\"input-with-error-message-hint input-with-error-message-error\">\n</div>",
47
+ "hidden": false
45
48
  },
46
49
  {
47
50
  "name": "with width-2 class",
@@ -56,7 +59,8 @@
56
59
  "name": "test-width-2",
57
60
  "classes": "govuk-input--width-2"
58
61
  },
59
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-2\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-2-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-2\" id=\"input-width-2\" name=\"test-width-2\" type=\"text\" aria-describedby=\"input-width-2-hint\">\n</div>"
62
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-2\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-2-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-2\" id=\"input-width-2\" name=\"test-width-2\" type=\"text\" aria-describedby=\"input-width-2-hint\">\n</div>",
63
+ "hidden": false
60
64
  },
61
65
  {
62
66
  "name": "with width-3 class",
@@ -71,7 +75,8 @@
71
75
  "name": "test-width-3",
72
76
  "classes": "govuk-input--width-3"
73
77
  },
74
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-3\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-3-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-3\" id=\"input-width-3\" name=\"test-width-3\" type=\"text\" aria-describedby=\"input-width-3-hint\">\n</div>"
78
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-3\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-3-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-3\" id=\"input-width-3\" name=\"test-width-3\" type=\"text\" aria-describedby=\"input-width-3-hint\">\n</div>",
79
+ "hidden": false
75
80
  },
76
81
  {
77
82
  "name": "with width-4 class",
@@ -86,7 +91,8 @@
86
91
  "name": "test-width-4",
87
92
  "classes": "govuk-input--width-4"
88
93
  },
89
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-4\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-4-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-4\" id=\"input-width-4\" name=\"test-width-4\" type=\"text\" aria-describedby=\"input-width-4-hint\">\n</div>"
94
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-4\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-4-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-4\" id=\"input-width-4\" name=\"test-width-4\" type=\"text\" aria-describedby=\"input-width-4-hint\">\n</div>",
95
+ "hidden": false
90
96
  },
91
97
  {
92
98
  "name": "with width-5 class",
@@ -101,7 +107,8 @@
101
107
  "name": "test-width-5",
102
108
  "classes": "govuk-input--width-5"
103
109
  },
104
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-5\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-5-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-5\" id=\"input-width-5\" name=\"test-width-5\" type=\"text\" aria-describedby=\"input-width-5-hint\">\n</div>"
110
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-5\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-5-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-5\" id=\"input-width-5\" name=\"test-width-5\" type=\"text\" aria-describedby=\"input-width-5-hint\">\n</div>",
111
+ "hidden": false
105
112
  },
106
113
  {
107
114
  "name": "with width-10 class",
@@ -116,7 +123,8 @@
116
123
  "name": "test-width-10",
117
124
  "classes": "govuk-input--width-10"
118
125
  },
119
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-10\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-10-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-10\" id=\"input-width-10\" name=\"test-width-10\" type=\"text\" aria-describedby=\"input-width-10-hint\">\n</div>"
126
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-10\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-10-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-10\" id=\"input-width-10\" name=\"test-width-10\" type=\"text\" aria-describedby=\"input-width-10-hint\">\n</div>",
127
+ "hidden": false
120
128
  },
121
129
  {
122
130
  "name": "with width-20 class",
@@ -131,7 +139,8 @@
131
139
  "name": "test-width-20",
132
140
  "classes": "govuk-input--width-20"
133
141
  },
134
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-20\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-20-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-20\" id=\"input-width-20\" name=\"test-width-20\" type=\"text\" aria-describedby=\"input-width-20-hint\">\n</div>"
142
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-20\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-20-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-20\" id=\"input-width-20\" name=\"test-width-20\" type=\"text\" aria-describedby=\"input-width-20-hint\">\n</div>",
143
+ "hidden": false
135
144
  },
136
145
  {
137
146
  "name": "with width-30 class",
@@ -146,7 +155,8 @@
146
155
  "name": "test-width-30",
147
156
  "classes": "govuk-input--width-30"
148
157
  },
149
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-30\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-30-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-30\" id=\"input-width-30\" name=\"test-width-30\" type=\"text\" aria-describedby=\"input-width-30-hint\">\n</div>"
158
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-30\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-30-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-30\" id=\"input-width-30\" name=\"test-width-30\" type=\"text\" aria-describedby=\"input-width-30-hint\">\n</div>",
159
+ "hidden": false
150
160
  },
151
161
  {
152
162
  "name": "with label as page heading",
@@ -158,7 +168,8 @@
158
168
  "id": "input-with-page-heading",
159
169
  "name": "test-name"
160
170
  },
161
- "html": "<div class=\"govuk-form-group\">\n <h1 class=\"govuk-label-wrapper\">\n <label class=\"govuk-label\" for=\"input-with-page-heading\">\n National Insurance number\n </label>\n </h1>\n\n<input class=\"govuk-input\" id=\"input-with-page-heading\" name=\"test-name\" type=\"text\">\n</div>"
171
+ "html": "<div class=\"govuk-form-group\">\n <h1 class=\"govuk-label-wrapper\">\n <label class=\"govuk-label\" for=\"input-with-page-heading\">\n National Insurance number\n </label>\n </h1>\n\n<input class=\"govuk-input\" id=\"input-with-page-heading\" name=\"test-name\" type=\"text\">\n</div>",
172
+ "hidden": false
162
173
  },
163
174
  {
164
175
  "name": "with optional form-group classes",
@@ -172,7 +183,8 @@
172
183
  "classes": "extra-class"
173
184
  }
174
185
  },
175
- "html": "<div class=\"govuk-form-group extra-class\">\n <label class=\"govuk-label\" for=\"input-example\">\n National Insurance number\n </label>\n\n<input class=\"govuk-input\" id=\"input-example\" name=\"test-name\" type=\"text\">\n</div>"
186
+ "html": "<div class=\"govuk-form-group extra-class\">\n <label class=\"govuk-label\" for=\"input-example\">\n National Insurance number\n </label>\n\n<input class=\"govuk-input\" id=\"input-example\" name=\"test-name\" type=\"text\">\n</div>",
187
+ "hidden": false
176
188
  },
177
189
  {
178
190
  "name": "with autocomplete attribute",
@@ -184,7 +196,8 @@
184
196
  "name": "postcode",
185
197
  "autocomplete": "postal-code"
186
198
  },
187
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-autocomplete-attribute\">\n Postcode\n </label>\n\n<input class=\"govuk-input\" id=\"input-with-autocomplete-attribute\" name=\"postcode\" type=\"text\" autocomplete=\"postal-code\">\n</div>"
199
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-autocomplete-attribute\">\n Postcode\n </label>\n\n<input class=\"govuk-input\" id=\"input-with-autocomplete-attribute\" name=\"postcode\" type=\"text\" autocomplete=\"postal-code\">\n</div>",
200
+ "hidden": false
188
201
  },
189
202
  {
190
203
  "name": "with pattern attribute",
@@ -197,7 +210,8 @@
197
210
  "type": "number",
198
211
  "pattern": "[0-9]*"
199
212
  },
200
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-pattern-attribute\">\n Numbers only\n </label>\n\n<input class=\"govuk-input\" id=\"input-with-pattern-attribute\" name=\"numbers-only\" type=\"number\" pattern=\"[0-9]*\">\n</div>"
213
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-pattern-attribute\">\n Numbers only\n </label>\n\n<input class=\"govuk-input\" id=\"input-with-pattern-attribute\" name=\"numbers-only\" type=\"number\" pattern=\"[0-9]*\">\n</div>",
214
+ "hidden": false
201
215
  },
202
216
  {
203
217
  "name": "with spellcheck enabled",
@@ -210,7 +224,8 @@
210
224
  "type": "text",
211
225
  "spellcheck": true
212
226
  },
213
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-spellcheck-enabled\">\n Spellcheck is enabled\n </label>\n\n<input class=\"govuk-input\" id=\"input-with-spellcheck-enabled\" name=\"spellcheck\" type=\"text\" spellcheck=\"true\">\n</div>"
227
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-spellcheck-enabled\">\n Spellcheck is enabled\n </label>\n\n<input class=\"govuk-input\" id=\"input-with-spellcheck-enabled\" name=\"spellcheck\" type=\"text\" spellcheck=\"true\">\n</div>",
228
+ "hidden": false
214
229
  },
215
230
  {
216
231
  "name": "with spellcheck disabled",
@@ -223,7 +238,8 @@
223
238
  "type": "text",
224
239
  "spellcheck": false
225
240
  },
226
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-spellcheck-disabled\">\n Spellcheck is disabled\n </label>\n\n<input class=\"govuk-input\" id=\"input-with-spellcheck-disabled\" name=\"spellcheck\" type=\"text\" spellcheck=\"false\">\n</div>"
241
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-spellcheck-disabled\">\n Spellcheck is disabled\n </label>\n\n<input class=\"govuk-input\" id=\"input-with-spellcheck-disabled\" name=\"spellcheck\" type=\"text\" spellcheck=\"false\">\n</div>",
242
+ "hidden": false
227
243
  },
228
244
  {
229
245
  "name": "with prefix",
@@ -237,7 +253,8 @@
237
253
  "text": "£"
238
254
  }
239
255
  },
240
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix\">\n Amount, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input\" id=\"input-with-prefix\" name=\"amount\" type=\"text\"></div>\n</div>"
256
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix\">\n Amount, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input\" id=\"input-with-prefix\" name=\"amount\" type=\"text\"></div>\n</div>",
257
+ "hidden": false
241
258
  },
242
259
  {
243
260
  "name": "with suffix",
@@ -251,7 +268,8 @@
251
268
  "text": "kg"
252
269
  }
253
270
  },
254
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-suffix\">\n Weight, in kilograms\n </label>\n\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\">\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\">kg</div>\n </div>\n</div>"
271
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-suffix\">\n Weight, in kilograms\n </label>\n\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\">\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\">kg</div>\n </div>\n</div>",
272
+ "hidden": false
255
273
  },
256
274
  {
257
275
  "name": "with prefix and suffix",
@@ -268,7 +286,8 @@
268
286
  "text": "per item"
269
287
  }
270
288
  },
271
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n Cost per item, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\">\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n </div>\n</div>"
289
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n Cost per item, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\">\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n </div>\n</div>",
290
+ "hidden": false
272
291
  },
273
292
  {
274
293
  "name": "with prefix and long suffix",
@@ -285,7 +304,8 @@
285
304
  "text": "per household member"
286
305
  }
287
306
  },
288
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n Cost per item, in pounds, per household member\n </label>\n\n<div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\">\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\">per household member</div>\n </div>\n</div>"
307
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n Cost per item, in pounds, per household member\n </label>\n\n<div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\">\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\">per household member</div>\n </div>\n</div>",
308
+ "hidden": false
289
309
  },
290
310
  {
291
311
  "name": "with prefix and suffix and error",
@@ -305,7 +325,8 @@
305
325
  "text": "Error message goes here"
306
326
  }
307
327
  },
308
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n Cost per item, in pounds\n </label>\n\n\n \n \n <span id=\"input-with-prefix-suffix-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </span>\n<div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input govuk-input--error\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\" aria-describedby=\"input-with-prefix-suffix-error\">\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n </div>\n</div>"
328
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n Cost per item, in pounds\n </label>\n\n\n \n \n <span id=\"input-with-prefix-suffix-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </span>\n<div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input govuk-input--error\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\" aria-describedby=\"input-with-prefix-suffix-error\">\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n </div>\n</div>",
329
+ "hidden": false
309
330
  },
310
331
  {
311
332
  "name": "with prefix and suffix and width modifier",
@@ -323,68 +344,116 @@
323
344
  "text": "per item"
324
345
  }
325
346
  },
326
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n Cost per item, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input govuk-input--width-5\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\">\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n </div>\n</div>"
347
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n Cost per item, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input govuk-input--width-5\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\">\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n </div>\n</div>",
348
+ "hidden": false
327
349
  },
328
350
  {
329
351
  "name": "classes",
330
352
  "options": {
353
+ "id": "with-classes",
354
+ "name": "with-classes",
355
+ "label": {
356
+ "text": "With classes"
357
+ },
331
358
  "classes": "app-input--custom-modifier"
332
359
  },
333
- "html": "<div class=\"govuk-form-group\">\n \n\n<input class=\"govuk-input app-input--custom-modifier\" id=\"\" name=\"\" type=\"text\">\n</div>"
360
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-classes\">\n With classes\n </label>\n\n<input class=\"govuk-input app-input--custom-modifier\" id=\"with-classes\" name=\"with-classes\" type=\"text\">\n</div>",
361
+ "hidden": true
334
362
  },
335
363
  {
336
364
  "name": "custom type",
337
365
  "options": {
366
+ "id": "with-custom-type",
367
+ "name": "with-custom-type",
368
+ "label": {
369
+ "text": "With custom type"
370
+ },
338
371
  "type": "number"
339
372
  },
340
- "html": "<div class=\"govuk-form-group\">\n \n\n<input class=\"govuk-input\" id=\"\" name=\"\" type=\"number\">\n</div>"
373
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-custom-type\">\n With custom type\n </label>\n\n<input class=\"govuk-input\" id=\"with-custom-type\" name=\"with-custom-type\" type=\"number\">\n</div>",
374
+ "hidden": true
341
375
  },
342
376
  {
343
377
  "name": "value",
344
378
  "options": {
379
+ "id": "with-value",
380
+ "name": "with-value",
381
+ "label": {
382
+ "text": "With value"
383
+ },
345
384
  "value": "QQ 12 34 56 C"
346
385
  },
347
- "html": "<div class=\"govuk-form-group\">\n \n\n<input class=\"govuk-input\" id=\"\" name=\"\" type=\"text\" value=\"QQ 12 34 56 C\">\n</div>"
386
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-value\">\n With value\n </label>\n\n<input class=\"govuk-input\" id=\"with-value\" name=\"with-value\" type=\"text\" value=\"QQ 12 34 56 C\">\n</div>",
387
+ "hidden": true
348
388
  },
349
389
  {
350
390
  "name": "with describedBy",
351
391
  "options": {
392
+ "id": "with-describedby",
393
+ "name": "with-describedby",
394
+ "label": {
395
+ "text": "With describedBy"
396
+ },
352
397
  "describedBy": "some-id"
353
398
  },
354
- "html": "<div class=\"govuk-form-group\">\n \n\n<input class=\"govuk-input\" id=\"\" name=\"\" type=\"text\" aria-describedby=\"some-id\">\n</div>"
399
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-describedby\">\n With describedBy\n </label>\n\n<input class=\"govuk-input\" id=\"with-describedby\" name=\"with-describedby\" type=\"text\" aria-describedby=\"some-id\">\n</div>",
400
+ "hidden": true
355
401
  },
356
402
  {
357
403
  "name": "attributes",
358
404
  "options": {
405
+ "id": "with-attributes",
406
+ "name": "with-attributes",
407
+ "label": {
408
+ "text": "With attributes"
409
+ },
359
410
  "attributes": {
360
411
  "data-attribute": "my data value"
361
412
  }
362
413
  },
363
- "html": "<div class=\"govuk-form-group\">\n \n\n<input class=\"govuk-input\" id=\"\" name=\"\" type=\"text\" data-attribute=\"my data value\">\n</div>"
414
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-attributes\">\n With attributes\n </label>\n\n<input class=\"govuk-input\" id=\"with-attributes\" name=\"with-attributes\" type=\"text\" data-attribute=\"my data value\">\n</div>",
415
+ "hidden": true
364
416
  },
365
417
  {
366
418
  "name": "hint with describedBy",
367
419
  "options": {
420
+ "id": "with-hint-describedby",
421
+ "name": "with-hint-describedby",
422
+ "label": {
423
+ "text": "With hint describedBy"
424
+ },
368
425
  "describedBy": "some-id",
369
426
  "hint": {
370
427
  "text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
371
428
  }
372
429
  },
373
- "html": "<div class=\"govuk-form-group\">\n \n\n \n \n <div id=\"undefined-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input\" id=\"\" name=\"\" type=\"text\" aria-describedby=\"some-id undefined-hint\">\n</div>"
430
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-hint-describedby\">\n With hint describedBy\n </label>\n\n \n \n <div id=\"with-hint-describedby-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input\" id=\"with-hint-describedby\" name=\"with-hint-describedby\" type=\"text\" aria-describedby=\"some-id with-hint-describedby-hint\">\n</div>",
431
+ "hidden": true
374
432
  },
375
433
  {
376
434
  "name": "error with describedBy",
377
435
  "options": {
436
+ "id": "with-error-describedby",
437
+ "name": "with-error-describedby",
438
+ "label": {
439
+ "text": "With error describedBy"
440
+ },
378
441
  "describedBy": "some-id",
379
442
  "errorMessage": {
380
443
  "text": "Error message"
381
444
  }
382
445
  },
383
- "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<input class=\"govuk-input govuk-input--error\" id=\"\" name=\"\" type=\"text\" aria-describedby=\"some-id undefined-error\">\n</div>"
446
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"with-error-describedby\">\n With error describedBy\n </label>\n\n\n \n \n <span id=\"with-error-describedby-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </span>\n<input class=\"govuk-input govuk-input--error\" id=\"with-error-describedby\" name=\"with-error-describedby\" type=\"text\" aria-describedby=\"some-id with-error-describedby-error\">\n</div>",
447
+ "hidden": true
384
448
  },
385
449
  {
386
450
  "name": "with error and hint",
387
451
  "options": {
452
+ "id": "with-error-hint",
453
+ "name": "with-error-hint",
454
+ "label": {
455
+ "text": "With error and hint"
456
+ },
388
457
  "errorMessage": {
389
458
  "text": "Error message"
390
459
  },
@@ -392,11 +461,17 @@
392
461
  "text": "Hint"
393
462
  }
394
463
  },
395
- "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<input class=\"govuk-input govuk-input--error\" id=\"\" name=\"\" type=\"text\" aria-describedby=\"undefined-hint undefined-error\">\n</div>"
464
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"with-error-hint\">\n With error and hint\n </label>\n\n \n \n <div id=\"with-error-hint-hint\" class=\"govuk-hint\">\n Hint\n </div>\n\n\n \n \n <span id=\"with-error-hint-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </span>\n<input class=\"govuk-input govuk-input--error\" id=\"with-error-hint\" name=\"with-error-hint\" type=\"text\" aria-describedby=\"with-error-hint-hint with-error-hint-error\">\n</div>",
465
+ "hidden": true
396
466
  },
397
467
  {
398
468
  "name": "with error, hint and describedBy",
399
469
  "options": {
470
+ "id": "with-error-hint-describedby",
471
+ "name": "with-error-hint-describedby",
472
+ "label": {
473
+ "text": "With error, hint and describedBy"
474
+ },
400
475
  "errorMessage": {
401
476
  "text": "Error message"
402
477
  },
@@ -405,14 +480,21 @@
405
480
  },
406
481
  "describedBy": "some-id"
407
482
  },
408
- "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<input class=\"govuk-input govuk-input--error\" id=\"\" name=\"\" type=\"text\" aria-describedby=\"some-id undefined-hint undefined-error\">\n</div>"
483
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"with-error-hint-describedby\">\n With error, hint and describedBy\n </label>\n\n \n \n <div id=\"with-error-hint-describedby-hint\" class=\"govuk-hint\">\n Hint\n </div>\n\n\n \n \n <span id=\"with-error-hint-describedby-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </span>\n<input class=\"govuk-input govuk-input--error\" id=\"with-error-hint-describedby\" name=\"with-error-hint-describedby\" type=\"text\" aria-describedby=\"some-id with-error-hint-describedby-hint with-error-hint-describedby-error\">\n</div>",
484
+ "hidden": true
409
485
  },
410
486
  {
411
487
  "name": "inputmode",
412
488
  "options": {
489
+ "id": "with-inputmode",
490
+ "name": "with-inputmode",
491
+ "label": {
492
+ "text": "With inputmode"
493
+ },
413
494
  "inputmode": "decimal"
414
495
  },
415
- "html": "<div class=\"govuk-form-group\">\n \n\n<input class=\"govuk-input\" id=\"\" name=\"\" type=\"text\" inputmode=\"decimal\">\n</div>"
496
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-inputmode\">\n With inputmode\n </label>\n\n<input class=\"govuk-input\" id=\"with-inputmode\" name=\"with-inputmode\" type=\"text\" inputmode=\"decimal\">\n</div>",
497
+ "hidden": true
416
498
  },
417
499
  {
418
500
  "name": "with prefix with html as text",
@@ -426,7 +508,8 @@
426
508
  "text": "<span>£</span>"
427
509
  }
428
510
  },
429
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix\">\n Amount, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">&lt;span&gt;£&lt;/span&gt;</div>\n <input class=\"govuk-input\" id=\"input-with-prefix\" name=\"amount\" type=\"text\"></div>\n</div>"
511
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix\">\n Amount, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">&lt;span&gt;£&lt;/span&gt;</div>\n <input class=\"govuk-input\" id=\"input-with-prefix\" name=\"amount\" type=\"text\"></div>\n</div>",
512
+ "hidden": true
430
513
  },
431
514
  {
432
515
  "name": "with prefix with html",
@@ -440,7 +523,8 @@
440
523
  "html": "<span>£</span>"
441
524
  }
442
525
  },
443
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix\">\n Amount, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\"><span>£</span></div>\n <input class=\"govuk-input\" id=\"input-with-prefix\" name=\"amount\" type=\"text\"></div>\n</div>"
526
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix\">\n Amount, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\"><span>£</span></div>\n <input class=\"govuk-input\" id=\"input-with-prefix\" name=\"amount\" type=\"text\"></div>\n</div>",
527
+ "hidden": true
444
528
  },
445
529
  {
446
530
  "name": "with prefix with classes",
@@ -455,7 +539,8 @@
455
539
  "classes": "app-input__prefix--custom-modifier"
456
540
  }
457
541
  },
458
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix-element\">\n Amount, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix app-input__prefix--custom-modifier\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input\" id=\"input-with-prefix-element\" name=\"amount\" type=\"text\"></div>\n</div>"
542
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix-element\">\n Amount, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix app-input__prefix--custom-modifier\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input\" id=\"input-with-prefix-element\" name=\"amount\" type=\"text\"></div>\n</div>",
543
+ "hidden": true
459
544
  },
460
545
  {
461
546
  "name": "with prefix with attributes",
@@ -472,7 +557,8 @@
472
557
  }
473
558
  }
474
559
  },
475
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix-element\">\n Amount, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\" data-attribute=\"value\">£</div>\n <input class=\"govuk-input\" id=\"input-with-prefix-element\" name=\"amount\" type=\"text\"></div>\n</div>"
560
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix-element\">\n Amount, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\" data-attribute=\"value\">£</div>\n <input class=\"govuk-input\" id=\"input-with-prefix-element\" name=\"amount\" type=\"text\"></div>\n</div>",
561
+ "hidden": true
476
562
  },
477
563
  {
478
564
  "name": "with suffix with html as text",
@@ -486,7 +572,8 @@
486
572
  "text": "<span>kg</span>"
487
573
  }
488
574
  },
489
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-suffix\">\n Weight, in kilograms\n </label>\n\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\">\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\">&lt;span&gt;kg&lt;/span&gt;</div>\n </div>\n</div>"
575
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-suffix\">\n Weight, in kilograms\n </label>\n\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\">\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\">&lt;span&gt;kg&lt;/span&gt;</div>\n </div>\n</div>",
576
+ "hidden": true
490
577
  },
491
578
  {
492
579
  "name": "with suffix with html",
@@ -500,7 +587,8 @@
500
587
  "html": "<span>kg</span>"
501
588
  }
502
589
  },
503
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-suffix\">\n Weight, in kilograms\n </label>\n\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\">\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\"><span>kg</span></div>\n </div>\n</div>"
590
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-suffix\">\n Weight, in kilograms\n </label>\n\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\">\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\"><span>kg</span></div>\n </div>\n</div>",
591
+ "hidden": true
504
592
  },
505
593
  {
506
594
  "name": "with suffix with classes",
@@ -515,7 +603,8 @@
515
603
  "classes": "app-input__suffix--custom-modifier"
516
604
  }
517
605
  },
518
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-suffix\">\n Weight, in kilograms\n </label>\n\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\">\n <div class=\"govuk-input__suffix app-input__suffix--custom-modifier\" aria-hidden=\"true\"><span>kg</span></div>\n </div>\n</div>"
606
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-suffix\">\n Weight, in kilograms\n </label>\n\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\">\n <div class=\"govuk-input__suffix app-input__suffix--custom-modifier\" aria-hidden=\"true\"><span>kg</span></div>\n </div>\n</div>",
607
+ "hidden": true
519
608
  },
520
609
  {
521
610
  "name": "with suffix with attributes",
@@ -532,7 +621,8 @@
532
621
  }
533
622
  }
534
623
  },
535
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-suffix\">\n Weight, in kilograms\n </label>\n\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\">\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\" data-attribute=\"value\"><span>kg</span></div>\n </div>\n</div>"
624
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-suffix\">\n Weight, in kilograms\n </label>\n\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\">\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\" data-attribute=\"value\"><span>kg</span></div>\n </div>\n</div>",
625
+ "hidden": true
536
626
  }
537
627
  ]
538
628
  }
@@ -20,7 +20,7 @@
20
20
  {
21
21
  "name": "inputmode",
22
22
  "type": "string",
23
- "require": false,
23
+ "required": false,
24
24
  "description": "Optional value for [inputmode](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)."
25
25
  },
26
26
  {