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
@@ -46,7 +46,8 @@
46
46
  ]
47
47
  ]
48
48
  },
49
- "html": "<table class=\"govuk-table\">\n \n \n <tbody class=\"govuk-table__body\">\n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <td class=\"govuk-table__cell\"\n >January</td>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£85</td>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£95</td>\n \n \n </tr>\n \n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <td class=\"govuk-table__cell\"\n >February</td>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£75</td>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£55</td>\n \n \n </tr>\n \n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <td class=\"govuk-table__cell\"\n >March</td>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£165</td>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£125</td>\n \n \n </tr>\n \n \n </tbody>\n</table>"
49
+ "html": "<table class=\"govuk-table\">\n \n \n <tbody class=\"govuk-table__body\">\n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <td class=\"govuk-table__cell\"\n >January</td>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£85</td>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£95</td>\n \n \n </tr>\n \n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <td class=\"govuk-table__cell\"\n >February</td>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£75</td>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£55</td>\n \n \n </tr>\n \n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <td class=\"govuk-table__cell\"\n >March</td>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£165</td>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£125</td>\n \n \n </tr>\n \n \n </tbody>\n</table>",
50
+ "hidden": false
50
51
  },
51
52
  {
52
53
  "name": "table with head",
@@ -106,7 +107,8 @@
106
107
  ]
107
108
  ]
108
109
  },
109
- "html": "<table class=\"govuk-table\">\n \n \n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n \n <th scope=\"col\" class=\"govuk-table__header\">Month you apply</th>\n \n <th scope=\"col\" class=\"govuk-table__header govuk-table__header--numeric\">Rate for bicycles</th>\n \n <th scope=\"col\" class=\"govuk-table__header govuk-table__header--numeric\">Rate for vehicles</th>\n \n </tr>\n </thead>\n \n <tbody class=\"govuk-table__body\">\n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <td class=\"govuk-table__cell\"\n >January</td>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£85</td>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£95</td>\n \n \n </tr>\n \n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <td class=\"govuk-table__cell\"\n >February</td>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£75</td>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£55</td>\n \n \n </tr>\n \n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <td class=\"govuk-table__cell\"\n >March</td>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£165</td>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£125</td>\n \n \n </tr>\n \n \n </tbody>\n</table>"
110
+ "html": "<table class=\"govuk-table\">\n \n \n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n \n <th scope=\"col\" class=\"govuk-table__header\">Month you apply</th>\n \n <th scope=\"col\" class=\"govuk-table__header govuk-table__header--numeric\">Rate for bicycles</th>\n \n <th scope=\"col\" class=\"govuk-table__header govuk-table__header--numeric\">Rate for vehicles</th>\n \n </tr>\n </thead>\n \n <tbody class=\"govuk-table__body\">\n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <td class=\"govuk-table__cell\"\n >January</td>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£85</td>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£95</td>\n \n \n </tr>\n \n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <td class=\"govuk-table__cell\"\n >February</td>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£75</td>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£55</td>\n \n \n </tr>\n \n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <td class=\"govuk-table__cell\"\n >March</td>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£165</td>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£125</td>\n \n \n </tr>\n \n \n </tbody>\n</table>",
111
+ "hidden": false
110
112
  },
111
113
  {
112
114
  "name": "table with head and caption",
@@ -169,23 +171,46 @@
169
171
  ]
170
172
  ]
171
173
  },
172
- "html": "<table class=\"govuk-table\">\n \n <caption class=\"govuk-table__caption govuk-heading-m\">Caption 1: Months and rates</caption>\n \n \n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n \n <th scope=\"col\" class=\"govuk-table__header\">Month you apply</th>\n \n <th scope=\"col\" class=\"govuk-table__header govuk-table__header--numeric\">Rate for bicycles</th>\n \n <th scope=\"col\" class=\"govuk-table__header govuk-table__header--numeric\">Rate for vehicles</th>\n \n </tr>\n </thead>\n \n <tbody class=\"govuk-table__body\">\n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <th scope=\"row\" class=\"govuk-table__header\"\n >January</th>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£85</td>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£95</td>\n \n \n </tr>\n \n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <th scope=\"row\" class=\"govuk-table__header\"\n >February</th>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£75</td>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£55</td>\n \n \n </tr>\n \n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <th scope=\"row\" class=\"govuk-table__header\"\n >March</th>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£165</td>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£125</td>\n \n \n </tr>\n \n \n </tbody>\n</table>"
174
+ "html": "<table class=\"govuk-table\">\n \n <caption class=\"govuk-table__caption govuk-heading-m\">Caption 1: Months and rates</caption>\n \n \n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n \n <th scope=\"col\" class=\"govuk-table__header\">Month you apply</th>\n \n <th scope=\"col\" class=\"govuk-table__header govuk-table__header--numeric\">Rate for bicycles</th>\n \n <th scope=\"col\" class=\"govuk-table__header govuk-table__header--numeric\">Rate for vehicles</th>\n \n </tr>\n </thead>\n \n <tbody class=\"govuk-table__body\">\n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <th scope=\"row\" class=\"govuk-table__header\"\n >January</th>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£85</td>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£95</td>\n \n \n </tr>\n \n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <th scope=\"row\" class=\"govuk-table__header\"\n >February</th>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£75</td>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£55</td>\n \n \n </tr>\n \n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <th scope=\"row\" class=\"govuk-table__header\"\n >March</th>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£165</td>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£125</td>\n \n \n </tr>\n \n \n </tbody>\n</table>",
175
+ "hidden": false
173
176
  },
174
177
  {
175
178
  "name": "classes",
176
179
  "options": {
177
- "classes": "custom-class-goes-here"
180
+ "classes": "custom-class-goes-here",
181
+ "rows": [
182
+ [
183
+ {
184
+ "text": "Jan"
185
+ },
186
+ {
187
+ "text": "Feb"
188
+ }
189
+ ]
190
+ ]
178
191
  },
179
- "html": "<table class=\"govuk-table custom-class-goes-here\">\n \n \n <tbody class=\"govuk-table__body\">\n \n </tbody>\n</table>"
192
+ "html": "<table class=\"govuk-table custom-class-goes-here\">\n \n \n <tbody class=\"govuk-table__body\">\n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <td class=\"govuk-table__cell\"\n >Jan</td>\n \n \n \n \n <td class=\"govuk-table__cell\"\n >Feb</td>\n \n \n </tr>\n \n \n </tbody>\n</table>",
193
+ "hidden": true
180
194
  },
181
195
  {
182
196
  "name": "attributes",
183
197
  "options": {
184
198
  "attributes": {
185
199
  "data-foo": "bar"
186
- }
200
+ },
201
+ "rows": [
202
+ [
203
+ {
204
+ "text": "Jan"
205
+ },
206
+ {
207
+ "text": "Feb"
208
+ }
209
+ ]
210
+ ]
187
211
  },
188
- "html": "<table class=\"govuk-table\" data-foo=\"bar\">\n \n \n <tbody class=\"govuk-table__body\">\n \n </tbody>\n</table>"
212
+ "html": "<table class=\"govuk-table\" data-foo=\"bar\">\n \n \n <tbody class=\"govuk-table__body\">\n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <td class=\"govuk-table__cell\"\n >Jan</td>\n \n \n \n \n <td class=\"govuk-table__cell\"\n >Feb</td>\n \n \n </tr>\n \n \n </tbody>\n</table>",
213
+ "hidden": true
189
214
  },
190
215
  {
191
216
  "name": "html as text",
@@ -203,7 +228,8 @@
203
228
  ]
204
229
  ]
205
230
  },
206
- "html": "<table class=\"govuk-table\">\n \n \n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n \n <th scope=\"col\" class=\"govuk-table__header\">Foo &lt;script&gt;hacking.do(1337)&lt;/script&gt;</th>\n \n </tr>\n </thead>\n \n <tbody class=\"govuk-table__body\">\n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <td class=\"govuk-table__cell\"\n >Foo &lt;script&gt;hacking.do(1337)&lt;/script&gt;</td>\n \n \n </tr>\n \n \n </tbody>\n</table>"
231
+ "html": "<table class=\"govuk-table\">\n \n \n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n \n <th scope=\"col\" class=\"govuk-table__header\">Foo &lt;script&gt;hacking.do(1337)&lt;/script&gt;</th>\n \n </tr>\n </thead>\n \n <tbody class=\"govuk-table__body\">\n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <td class=\"govuk-table__cell\"\n >Foo &lt;script&gt;hacking.do(1337)&lt;/script&gt;</td>\n \n \n </tr>\n \n \n </tbody>\n</table>",
232
+ "hidden": true
207
233
  },
208
234
  {
209
235
  "name": "html",
@@ -221,7 +247,8 @@
221
247
  ]
222
248
  ]
223
249
  },
224
- "html": "<table class=\"govuk-table\">\n \n \n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n \n <th scope=\"col\" class=\"govuk-table__header\">Foo <span>bar</span></th>\n \n </tr>\n </thead>\n \n <tbody class=\"govuk-table__body\">\n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <td class=\"govuk-table__cell\"\n >Foo <span>bar</span></td>\n \n \n </tr>\n \n \n </tbody>\n</table>"
250
+ "html": "<table class=\"govuk-table\">\n \n \n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n \n <th scope=\"col\" class=\"govuk-table__header\">Foo <span>bar</span></th>\n \n </tr>\n </thead>\n \n <tbody class=\"govuk-table__body\">\n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <td class=\"govuk-table__cell\"\n >Foo <span>bar</span></td>\n \n \n </tr>\n \n \n </tbody>\n</table>",
251
+ "hidden": true
225
252
  },
226
253
  {
227
254
  "name": "head with classes",
@@ -231,9 +258,20 @@
231
258
  "text": "Foo",
232
259
  "classes": "my-custom-class"
233
260
  }
261
+ ],
262
+ "rows": [
263
+ [
264
+ {
265
+ "text": "Jan"
266
+ },
267
+ {
268
+ "text": "Feb"
269
+ }
270
+ ]
234
271
  ]
235
272
  },
236
- "html": "<table class=\"govuk-table\">\n \n \n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n \n <th scope=\"col\" class=\"govuk-table__header my-custom-class\">Foo</th>\n \n </tr>\n </thead>\n \n <tbody class=\"govuk-table__body\">\n \n </tbody>\n</table>"
273
+ "html": "<table class=\"govuk-table\">\n \n \n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n \n <th scope=\"col\" class=\"govuk-table__header my-custom-class\">Foo</th>\n \n </tr>\n </thead>\n \n <tbody class=\"govuk-table__body\">\n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <td class=\"govuk-table__cell\"\n >Jan</td>\n \n \n \n \n <td class=\"govuk-table__cell\"\n >Feb</td>\n \n \n </tr>\n \n \n </tbody>\n</table>",
274
+ "hidden": true
237
275
  },
238
276
  {
239
277
  "name": "head with rowspan and colspan",
@@ -244,9 +282,20 @@
244
282
  "rowspan": 2,
245
283
  "colspan": 2
246
284
  }
285
+ ],
286
+ "rows": [
287
+ [
288
+ {
289
+ "text": "Jan"
290
+ },
291
+ {
292
+ "text": "Feb"
293
+ }
294
+ ]
247
295
  ]
248
296
  },
249
- "html": "<table class=\"govuk-table\">\n \n \n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n \n <th scope=\"col\" class=\"govuk-table__header\" colspan=\"2\" rowspan=\"2\">Foo</th>\n \n </tr>\n </thead>\n \n <tbody class=\"govuk-table__body\">\n \n </tbody>\n</table>"
297
+ "html": "<table class=\"govuk-table\">\n \n \n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n \n <th scope=\"col\" class=\"govuk-table__header\" colspan=\"2\" rowspan=\"2\">Foo</th>\n \n </tr>\n </thead>\n \n <tbody class=\"govuk-table__body\">\n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <td class=\"govuk-table__cell\"\n >Jan</td>\n \n \n \n \n <td class=\"govuk-table__cell\"\n >Feb</td>\n \n \n </tr>\n \n \n </tbody>\n</table>",
298
+ "hidden": true
250
299
  },
251
300
  {
252
301
  "name": "head with attributes",
@@ -257,9 +306,20 @@
257
306
  "data-fizz": "buzz"
258
307
  }
259
308
  }
309
+ ],
310
+ "rows": [
311
+ [
312
+ {
313
+ "text": "Jan"
314
+ },
315
+ {
316
+ "text": "Feb"
317
+ }
318
+ ]
260
319
  ]
261
320
  },
262
- "html": "<table class=\"govuk-table\">\n \n \n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n \n <th scope=\"col\" class=\"govuk-table__header\" data-fizz=\"buzz\"></th>\n \n </tr>\n </thead>\n \n <tbody class=\"govuk-table__body\">\n \n </tbody>\n</table>"
321
+ "html": "<table class=\"govuk-table\">\n \n \n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n \n <th scope=\"col\" class=\"govuk-table__header\" data-fizz=\"buzz\"></th>\n \n </tr>\n </thead>\n \n <tbody class=\"govuk-table__body\">\n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <td class=\"govuk-table__cell\"\n >Jan</td>\n \n \n \n \n <td class=\"govuk-table__cell\"\n >Feb</td>\n \n \n </tr>\n \n \n </tbody>\n</table>",
322
+ "hidden": true
263
323
  },
264
324
  {
265
325
  "name": "with firstCellIsHeader true",
@@ -307,7 +367,8 @@
307
367
  ]
308
368
  ]
309
369
  },
310
- "html": "<table class=\"govuk-table\">\n \n \n <tbody class=\"govuk-table__body\">\n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <th scope=\"row\" class=\"govuk-table__header\"\n >January</th>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£85</td>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£95</td>\n \n \n </tr>\n \n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <th scope=\"row\" class=\"govuk-table__header\"\n >February</th>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£75</td>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£55</td>\n \n \n </tr>\n \n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <th scope=\"row\" class=\"govuk-table__header\"\n >March</th>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£165</td>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£125</td>\n \n \n </tr>\n \n \n </tbody>\n</table>"
370
+ "html": "<table class=\"govuk-table\">\n \n \n <tbody class=\"govuk-table__body\">\n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <th scope=\"row\" class=\"govuk-table__header\"\n >January</th>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£85</td>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£95</td>\n \n \n </tr>\n \n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <th scope=\"row\" class=\"govuk-table__header\"\n >February</th>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£75</td>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£55</td>\n \n \n </tr>\n \n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <th scope=\"row\" class=\"govuk-table__header\"\n >March</th>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£165</td>\n \n \n \n \n <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n >£125</td>\n \n \n </tr>\n \n \n </tbody>\n</table>",
371
+ "hidden": true
311
372
  },
312
373
  {
313
374
  "name": "firstCellIsHeader with classes",
@@ -322,7 +383,8 @@
322
383
  ]
323
384
  ]
324
385
  },
325
- "html": "<table class=\"govuk-table\">\n \n \n <tbody class=\"govuk-table__body\">\n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <th scope=\"row\" class=\"govuk-table__header my-custom-class\"\n >Foo</th>\n \n \n </tr>\n \n \n </tbody>\n</table>"
386
+ "html": "<table class=\"govuk-table\">\n \n \n <tbody class=\"govuk-table__body\">\n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <th scope=\"row\" class=\"govuk-table__header my-custom-class\"\n >Foo</th>\n \n \n </tr>\n \n \n </tbody>\n</table>",
387
+ "hidden": true
326
388
  },
327
389
  {
328
390
  "name": "firstCellIsHeader with html",
@@ -336,7 +398,8 @@
336
398
  ]
337
399
  ]
338
400
  },
339
- "html": "<table class=\"govuk-table\">\n \n \n <tbody class=\"govuk-table__body\">\n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <th scope=\"row\" class=\"govuk-table__header\"\n >Foo <span>bar</span></th>\n \n \n </tr>\n \n \n </tbody>\n</table>"
401
+ "html": "<table class=\"govuk-table\">\n \n \n <tbody class=\"govuk-table__body\">\n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <th scope=\"row\" class=\"govuk-table__header\"\n >Foo <span>bar</span></th>\n \n \n </tr>\n \n \n </tbody>\n</table>",
402
+ "hidden": true
340
403
  },
341
404
  {
342
405
  "name": "firstCellIsHeader with html as text",
@@ -350,7 +413,8 @@
350
413
  ]
351
414
  ]
352
415
  },
353
- "html": "<table class=\"govuk-table\">\n \n \n <tbody class=\"govuk-table__body\">\n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <th scope=\"row\" class=\"govuk-table__header\"\n >Foo &lt;script&gt;hacking.do(1337)&lt;/script&gt;</th>\n \n \n </tr>\n \n \n </tbody>\n</table>"
416
+ "html": "<table class=\"govuk-table\">\n \n \n <tbody class=\"govuk-table__body\">\n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <th scope=\"row\" class=\"govuk-table__header\"\n >Foo &lt;script&gt;hacking.do(1337)&lt;/script&gt;</th>\n \n \n </tr>\n \n \n </tbody>\n</table>",
417
+ "hidden": true
354
418
  },
355
419
  {
356
420
  "name": "firstCellIsHeader with rowspan and colspan",
@@ -366,7 +430,8 @@
366
430
  ]
367
431
  ]
368
432
  },
369
- "html": "<table class=\"govuk-table\">\n \n \n <tbody class=\"govuk-table__body\">\n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <th scope=\"row\" class=\"govuk-table__header\" colspan=\"2\" rowspan=\"2\"\n >Foo</th>\n \n \n </tr>\n \n \n </tbody>\n</table>"
433
+ "html": "<table class=\"govuk-table\">\n \n \n <tbody class=\"govuk-table__body\">\n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <th scope=\"row\" class=\"govuk-table__header\" colspan=\"2\" rowspan=\"2\"\n >Foo</th>\n \n \n </tr>\n \n \n </tbody>\n</table>",
434
+ "hidden": true
370
435
  },
371
436
  {
372
437
  "name": "firstCellIsHeader with attributes",
@@ -383,7 +448,8 @@
383
448
  ]
384
449
  ]
385
450
  },
386
- "html": "<table class=\"govuk-table\">\n \n \n <tbody class=\"govuk-table__body\">\n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <th scope=\"row\" class=\"govuk-table__header\" data-fizz=\"buzz\"\n >Foo</th>\n \n \n </tr>\n \n \n </tbody>\n</table>"
451
+ "html": "<table class=\"govuk-table\">\n \n \n <tbody class=\"govuk-table__body\">\n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <th scope=\"row\" class=\"govuk-table__header\" data-fizz=\"buzz\"\n >Foo</th>\n \n \n </tr>\n \n \n </tbody>\n</table>",
452
+ "hidden": true
387
453
  },
388
454
  {
389
455
  "name": "with falsey items",
@@ -417,7 +483,8 @@
417
483
  ]
418
484
  ]
419
485
  },
420
- "html": "<table class=\"govuk-table\">\n \n \n <tbody class=\"govuk-table__body\">\n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <td class=\"govuk-table__cell\"\n >A</td>\n \n \n \n \n <td class=\"govuk-table__cell\"\n >1</td>\n \n \n </tr>\n \n \n \n \n \n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <td class=\"govuk-table__cell\"\n >B</td>\n \n \n \n \n <td class=\"govuk-table__cell\"\n >2</td>\n \n \n </tr>\n \n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <td class=\"govuk-table__cell\"\n >C</td>\n \n \n \n \n <td class=\"govuk-table__cell\"\n >3</td>\n \n \n </tr>\n \n \n </tbody>\n</table>"
486
+ "html": "<table class=\"govuk-table\">\n \n \n <tbody class=\"govuk-table__body\">\n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <td class=\"govuk-table__cell\"\n >A</td>\n \n \n \n \n <td class=\"govuk-table__cell\"\n >1</td>\n \n \n </tr>\n \n \n \n \n \n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <td class=\"govuk-table__cell\"\n >B</td>\n \n \n \n \n <td class=\"govuk-table__cell\"\n >2</td>\n \n \n </tr>\n \n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <td class=\"govuk-table__cell\"\n >C</td>\n \n \n \n \n <td class=\"govuk-table__cell\"\n >3</td>\n \n \n </tr>\n \n \n </tbody>\n</table>",
487
+ "hidden": true
421
488
  },
422
489
  {
423
490
  "name": "rows with classes",
@@ -431,7 +498,8 @@
431
498
  ]
432
499
  ]
433
500
  },
434
- "html": "<table class=\"govuk-table\">\n \n \n <tbody class=\"govuk-table__body\">\n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <td class=\"govuk-table__cell my-custom-class\"\n >Foo</td>\n \n \n </tr>\n \n \n </tbody>\n</table>"
501
+ "html": "<table class=\"govuk-table\">\n \n \n <tbody class=\"govuk-table__body\">\n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <td class=\"govuk-table__cell my-custom-class\"\n >Foo</td>\n \n \n </tr>\n \n \n </tbody>\n</table>",
502
+ "hidden": true
435
503
  },
436
504
  {
437
505
  "name": "rows with rowspan and colspan",
@@ -446,7 +514,8 @@
446
514
  ]
447
515
  ]
448
516
  },
449
- "html": "<table class=\"govuk-table\">\n \n \n <tbody class=\"govuk-table__body\">\n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <td class=\"govuk-table__cell\" colspan=\"2\" rowspan=\"2\"\n >Foo</td>\n \n \n </tr>\n \n \n </tbody>\n</table>"
517
+ "html": "<table class=\"govuk-table\">\n \n \n <tbody class=\"govuk-table__body\">\n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <td class=\"govuk-table__cell\" colspan=\"2\" rowspan=\"2\"\n >Foo</td>\n \n \n </tr>\n \n \n </tbody>\n</table>",
518
+ "hidden": true
450
519
  },
451
520
  {
452
521
  "name": "rows with attributes",
@@ -462,7 +531,8 @@
462
531
  ]
463
532
  ]
464
533
  },
465
- "html": "<table class=\"govuk-table\">\n \n \n <tbody class=\"govuk-table__body\">\n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <td class=\"govuk-table__cell\" data-fizz=\"buzz\"\n >Foo</td>\n \n \n </tr>\n \n \n </tbody>\n</table>"
534
+ "html": "<table class=\"govuk-table\">\n \n \n <tbody class=\"govuk-table__body\">\n \n \n <tr class=\"govuk-table__row\">\n \n \n \n <td class=\"govuk-table__cell\" data-fizz=\"buzz\"\n >Foo</td>\n \n \n </tr>\n \n \n </tbody>\n</table>",
535
+ "hidden": true
466
536
  }
467
537
  ]
468
538
  }
@@ -35,7 +35,8 @@
35
35
  }
36
36
  ]
37
37
  },
38
- "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n <h2 class=\"govuk-tabs__title\">\n Contents\n </h2>\n \n <ul class=\"govuk-tabs__list\">\n \n \n \n <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n <a class=\"govuk-tabs__tab\" href=\"#past-day\">\n Past day\n </a>\n </li>\n \n \n \n \n <li class=\"govuk-tabs__list-item\">\n <a class=\"govuk-tabs__tab\" href=\"#past-week\">\n Past week\n </a>\n </li>\n \n \n \n \n <li class=\"govuk-tabs__list-item\">\n <a class=\"govuk-tabs__tab\" href=\"#past-month\">\n Past month\n </a>\n </li>\n \n \n \n \n <li class=\"govuk-tabs__list-item\">\n <a class=\"govuk-tabs__tab\" href=\"#past-year\">\n Past year\n </a>\n </li>\n \n \n </ul>\n \n \n \n \n <div class=\"govuk-tabs__panel\" id=\"past-day\">\n <h2 class=\"govuk-heading-l\">Past day</h2>\n<table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">David Francis</td>\n <td class=\"govuk-table__cell\">3</td>\n <td class=\"govuk-table__cell\">0</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">Paul Farmer</td>\n <td class=\"govuk-table__cell\">1</td>\n <td class=\"govuk-table__cell\">0</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">Rita Patel</td>\n <td class=\"govuk-table__cell\">2</td>\n <td class=\"govuk-table__cell\">0</td>\n </tr>\n </tbody>\n</table>\n\n </div>\n \n \n \n \n <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"past-week\">\n <h2 class=\"govuk-heading-l\">Past week</h2>\n<table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">David Francis</td>\n <td class=\"govuk-table__cell\">24</td>\n <td class=\"govuk-table__cell\">18</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">Paul Farmer</td>\n <td class=\"govuk-table__cell\">16</td>\n <td class=\"govuk-table__cell\">20</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">Rita Patel</td>\n <td class=\"govuk-table__cell\">24</td>\n <td class=\"govuk-table__cell\">27</td>\n </tr>\n </tbody>\n</table>\n\n </div>\n \n \n \n \n <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"past-month\">\n <h2 class=\"govuk-heading-l\">Past month</h2>\n<table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">David Francis</td>\n <td class=\"govuk-table__cell\">98</td>\n <td class=\"govuk-table__cell\">95</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">Paul Farmer</td>\n <td class=\"govuk-table__cell\">122</td>\n <td class=\"govuk-table__cell\">131</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">Rita Patel</td>\n <td class=\"govuk-table__cell\">126</td>\n <td class=\"govuk-table__cell\">142</td>\n </tr>\n </tbody>\n</table>\n\n </div>\n \n \n \n \n <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"past-year\">\n <h2 class=\"govuk-heading-l\">Past year</h2>\n<table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">David Francis</td>\n <td class=\"govuk-table__cell\">1380</td>\n <td class=\"govuk-table__cell\">1472</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">Paul Farmer</td>\n <td class=\"govuk-table__cell\">1129</td>\n <td class=\"govuk-table__cell\">1083</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">Rita Patel</td>\n <td class=\"govuk-table__cell\">1539</td>\n <td class=\"govuk-table__cell\">1265</td>\n </tr>\n </tbody>\n</table>\n\n </div>\n \n \n</div>"
38
+ "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n <h2 class=\"govuk-tabs__title\">\n Contents\n </h2>\n \n <ul class=\"govuk-tabs__list\">\n \n \n \n <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n <a class=\"govuk-tabs__tab\" href=\"#past-day\">\n Past day\n </a>\n </li>\n \n \n \n \n <li class=\"govuk-tabs__list-item\">\n <a class=\"govuk-tabs__tab\" href=\"#past-week\">\n Past week\n </a>\n </li>\n \n \n \n \n <li class=\"govuk-tabs__list-item\">\n <a class=\"govuk-tabs__tab\" href=\"#past-month\">\n Past month\n </a>\n </li>\n \n \n \n \n <li class=\"govuk-tabs__list-item\">\n <a class=\"govuk-tabs__tab\" href=\"#past-year\">\n Past year\n </a>\n </li>\n \n \n </ul>\n \n \n \n \n <div class=\"govuk-tabs__panel\" id=\"past-day\">\n <h2 class=\"govuk-heading-l\">Past day</h2>\n<table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">David Francis</td>\n <td class=\"govuk-table__cell\">3</td>\n <td class=\"govuk-table__cell\">0</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">Paul Farmer</td>\n <td class=\"govuk-table__cell\">1</td>\n <td class=\"govuk-table__cell\">0</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">Rita Patel</td>\n <td class=\"govuk-table__cell\">2</td>\n <td class=\"govuk-table__cell\">0</td>\n </tr>\n </tbody>\n</table>\n\n </div>\n \n \n \n \n <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"past-week\">\n <h2 class=\"govuk-heading-l\">Past week</h2>\n<table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">David Francis</td>\n <td class=\"govuk-table__cell\">24</td>\n <td class=\"govuk-table__cell\">18</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">Paul Farmer</td>\n <td class=\"govuk-table__cell\">16</td>\n <td class=\"govuk-table__cell\">20</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">Rita Patel</td>\n <td class=\"govuk-table__cell\">24</td>\n <td class=\"govuk-table__cell\">27</td>\n </tr>\n </tbody>\n</table>\n\n </div>\n \n \n \n \n <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"past-month\">\n <h2 class=\"govuk-heading-l\">Past month</h2>\n<table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">David Francis</td>\n <td class=\"govuk-table__cell\">98</td>\n <td class=\"govuk-table__cell\">95</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">Paul Farmer</td>\n <td class=\"govuk-table__cell\">122</td>\n <td class=\"govuk-table__cell\">131</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">Rita Patel</td>\n <td class=\"govuk-table__cell\">126</td>\n <td class=\"govuk-table__cell\">142</td>\n </tr>\n </tbody>\n</table>\n\n </div>\n \n \n \n \n <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"past-year\">\n <h2 class=\"govuk-heading-l\">Past year</h2>\n<table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">David Francis</td>\n <td class=\"govuk-table__cell\">1380</td>\n <td class=\"govuk-table__cell\">1472</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">Paul Farmer</td>\n <td class=\"govuk-table__cell\">1129</td>\n <td class=\"govuk-table__cell\">1083</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">Rita Patel</td>\n <td class=\"govuk-table__cell\">1539</td>\n <td class=\"govuk-table__cell\">1265</td>\n </tr>\n </tbody>\n</table>\n\n </div>\n \n \n</div>",
39
+ "hidden": false
39
40
  },
40
41
  {
41
42
  "name": "tabs-with-anchor-in-panel",
@@ -57,37 +58,78 @@
57
58
  }
58
59
  ]
59
60
  },
60
- "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n <h2 class=\"govuk-tabs__title\">\n Contents\n </h2>\n \n <ul class=\"govuk-tabs__list\">\n \n \n \n <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n Tab 1\n </a>\n </li>\n \n \n \n \n <li class=\"govuk-tabs__list-item\">\n <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n Tab 2\n </a>\n </li>\n \n \n </ul>\n \n \n \n \n <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n <h2 class=\"govuk-heading-l\">Tab 1</h2>\n<p class=\"govuk-body\">Testing that when you click the anchor it moves to the anchor point successfully</p>\n<p class=\"govuk-body\"><a class=\"govuk-link\" href=\"#anchor\">Anchor</a></p>\n<p class=\"govuk-body\"><a id=\"anchor\" tabIndex=\"0\">Anchor Point</a></p>\n\n </div>\n \n \n \n \n <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n <h2 class=\"govuk-heading-l\">Tab 2</h2>\n\n </div>\n \n \n</div>"
61
+ "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n <h2 class=\"govuk-tabs__title\">\n Contents\n </h2>\n \n <ul class=\"govuk-tabs__list\">\n \n \n \n <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n Tab 1\n </a>\n </li>\n \n \n \n \n <li class=\"govuk-tabs__list-item\">\n <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n Tab 2\n </a>\n </li>\n \n \n </ul>\n \n \n \n \n <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n <h2 class=\"govuk-heading-l\">Tab 1</h2>\n<p class=\"govuk-body\">Testing that when you click the anchor it moves to the anchor point successfully</p>\n<p class=\"govuk-body\"><a class=\"govuk-link\" href=\"#anchor\">Anchor</a></p>\n<p class=\"govuk-body\"><a id=\"anchor\" tabIndex=\"0\">Anchor Point</a></p>\n\n </div>\n \n \n \n \n <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n <h2 class=\"govuk-heading-l\">Tab 2</h2>\n\n </div>\n \n \n</div>",
62
+ "hidden": false
61
63
  },
62
64
  {
63
65
  "name": "classes",
64
66
  "options": {
65
- "classes": "app-tabs--custom-modifier"
67
+ "classes": "app-tabs--custom-modifier",
68
+ "items": [
69
+ {
70
+ "label": "Tab 1",
71
+ "id": "tab-1",
72
+ "panel": {
73
+ "text": "Information about tabs"
74
+ }
75
+ }
76
+ ]
66
77
  },
67
- "html": "<div class=\"govuk-tabs app-tabs--custom-modifier\" data-module=\"govuk-tabs\">\n <h2 class=\"govuk-tabs__title\">\n Contents\n </h2>\n \n \n</div>"
78
+ "html": "<div class=\"govuk-tabs app-tabs--custom-modifier\" data-module=\"govuk-tabs\">\n <h2 class=\"govuk-tabs__title\">\n Contents\n </h2>\n \n <ul class=\"govuk-tabs__list\">\n \n \n \n <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n Tab 1\n </a>\n </li>\n \n \n </ul>\n \n \n \n \n <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n Information about tabs\n </div>\n \n \n</div>",
79
+ "hidden": true
68
80
  },
69
81
  {
70
82
  "name": "id",
71
83
  "options": {
72
- "id": "my-tabs"
84
+ "id": "my-tabs",
85
+ "items": [
86
+ {
87
+ "label": "Tab 1",
88
+ "id": "tab-1",
89
+ "panel": {
90
+ "text": "Information about tabs"
91
+ }
92
+ }
93
+ ]
73
94
  },
74
- "html": "<div id=\"my-tabs\" class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n <h2 class=\"govuk-tabs__title\">\n Contents\n </h2>\n \n \n</div>"
95
+ "html": "<div id=\"my-tabs\" class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n <h2 class=\"govuk-tabs__title\">\n Contents\n </h2>\n \n <ul class=\"govuk-tabs__list\">\n \n \n \n <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n Tab 1\n </a>\n </li>\n \n \n </ul>\n \n \n \n \n <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n Information about tabs\n </div>\n \n \n</div>",
96
+ "hidden": true
75
97
  },
76
98
  {
77
99
  "name": "title",
78
100
  "options": {
79
- "title": "Custom title for Contents"
101
+ "title": "Custom title for Contents",
102
+ "items": [
103
+ {
104
+ "label": "Tab 1",
105
+ "id": "tab-1",
106
+ "panel": {
107
+ "text": "Information about tabs"
108
+ }
109
+ }
110
+ ]
80
111
  },
81
- "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n <h2 class=\"govuk-tabs__title\">\n Custom title for Contents\n </h2>\n \n \n</div>"
112
+ "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n <h2 class=\"govuk-tabs__title\">\n Custom title for Contents\n </h2>\n \n <ul class=\"govuk-tabs__list\">\n \n \n \n <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n Tab 1\n </a>\n </li>\n \n \n </ul>\n \n \n \n \n <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n Information about tabs\n </div>\n \n \n</div>",
113
+ "hidden": true
82
114
  },
83
115
  {
84
116
  "name": "attributes",
85
117
  "options": {
86
118
  "attributes": {
87
119
  "data-attribute": "my data value"
88
- }
120
+ },
121
+ "items": [
122
+ {
123
+ "label": "Tab 1",
124
+ "id": "tab-1",
125
+ "panel": {
126
+ "text": "Information about tabs"
127
+ }
128
+ }
129
+ ]
89
130
  },
90
- "html": "<div class=\"govuk-tabs\" data-attribute=\"my data value\" data-module=\"govuk-tabs\">\n <h2 class=\"govuk-tabs__title\">\n Contents\n </h2>\n \n \n</div>"
131
+ "html": "<div class=\"govuk-tabs\" data-attribute=\"my data value\" data-module=\"govuk-tabs\">\n <h2 class=\"govuk-tabs__title\">\n Contents\n </h2>\n \n <ul class=\"govuk-tabs__list\">\n \n \n \n <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n Tab 1\n </a>\n </li>\n \n \n </ul>\n \n \n \n \n <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n Information about tabs\n </div>\n \n \n</div>",
132
+ "hidden": true
91
133
  },
92
134
  {
93
135
  "name": "item with attributes",
@@ -96,6 +138,9 @@
96
138
  {
97
139
  "id": "tab-1",
98
140
  "label": "Tab 1",
141
+ "panel": {
142
+ "text": "Information about tabs"
143
+ },
99
144
  "attributes": {
100
145
  "data-attribute": "my-attribute",
101
146
  "data-attribute-2": "my-attribute-2"
@@ -103,7 +148,8 @@
103
148
  }
104
149
  ]
105
150
  },
106
- "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n <h2 class=\"govuk-tabs__title\">\n Contents\n </h2>\n \n <ul class=\"govuk-tabs__list\">\n \n \n \n <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n <a class=\"govuk-tabs__tab\" href=\"#tab-1\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">\n Tab 1\n </a>\n </li>\n \n \n </ul>\n \n \n \n \n <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n \n </div>\n \n \n</div>"
151
+ "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n <h2 class=\"govuk-tabs__title\">\n Contents\n </h2>\n \n <ul class=\"govuk-tabs__list\">\n \n \n \n <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n <a class=\"govuk-tabs__tab\" href=\"#tab-1\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">\n Tab 1\n </a>\n </li>\n \n \n </ul>\n \n \n \n \n <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n Information about tabs\n </div>\n \n \n</div>",
152
+ "hidden": true
107
153
  },
108
154
  {
109
155
  "name": "panel with attributes",
@@ -122,7 +168,8 @@
122
168
  }
123
169
  ]
124
170
  },
125
- "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n <h2 class=\"govuk-tabs__title\">\n Contents\n </h2>\n \n <ul class=\"govuk-tabs__list\">\n \n \n \n <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n Tab 1\n </a>\n </li>\n \n \n </ul>\n \n \n \n \n <div class=\"govuk-tabs__panel\" id=\"tab-1\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">\n Panel text\n </div>\n \n \n</div>"
171
+ "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n <h2 class=\"govuk-tabs__title\">\n Contents\n </h2>\n \n <ul class=\"govuk-tabs__list\">\n \n \n \n <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n Tab 1\n </a>\n </li>\n \n \n </ul>\n \n \n \n \n <div class=\"govuk-tabs__panel\" id=\"tab-1\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">\n Panel text\n </div>\n \n \n</div>",
172
+ "hidden": true
126
173
  },
127
174
  {
128
175
  "name": "no item list",
@@ -130,14 +177,16 @@
130
177
  "id": "my-tabs",
131
178
  "classes": "app-tabs--custom-modifier"
132
179
  },
133
- "html": "<div id=\"my-tabs\" class=\"govuk-tabs app-tabs--custom-modifier\" data-module=\"govuk-tabs\">\n <h2 class=\"govuk-tabs__title\">\n Contents\n </h2>\n \n \n</div>"
180
+ "html": "<div id=\"my-tabs\" class=\"govuk-tabs app-tabs--custom-modifier\" data-module=\"govuk-tabs\">\n <h2 class=\"govuk-tabs__title\">\n Contents\n </h2>\n \n \n</div>",
181
+ "hidden": true
134
182
  },
135
183
  {
136
184
  "name": "empty item list",
137
185
  "options": {
138
186
  "items": []
139
187
  },
140
- "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n <h2 class=\"govuk-tabs__title\">\n Contents\n </h2>\n \n \n</div>"
188
+ "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n <h2 class=\"govuk-tabs__title\">\n Contents\n </h2>\n \n \n</div>",
189
+ "hidden": true
141
190
  },
142
191
  {
143
192
  "name": "with falsey values",
@@ -162,7 +211,8 @@
162
211
  }
163
212
  ]
164
213
  },
165
- "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n <h2 class=\"govuk-tabs__title\">\n Contents\n </h2>\n \n <ul class=\"govuk-tabs__list\">\n \n \n \n <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n Tab 1\n </a>\n </li>\n \n \n \n \n \n \n \n \n \n \n <li class=\"govuk-tabs__list-item\">\n <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n Tab 2\n </a>\n </li>\n \n \n </ul>\n \n \n \n \n <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n Panel 1 content\n </div>\n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n Panel 2 content\n </div>\n \n \n</div>"
214
+ "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n <h2 class=\"govuk-tabs__title\">\n Contents\n </h2>\n \n <ul class=\"govuk-tabs__list\">\n \n \n \n <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n Tab 1\n </a>\n </li>\n \n \n \n \n \n \n \n \n \n \n <li class=\"govuk-tabs__list-item\">\n <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n Tab 2\n </a>\n </li>\n \n \n </ul>\n \n \n \n \n <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n Panel 1 content\n </div>\n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n Panel 2 content\n </div>\n \n \n</div>",
215
+ "hidden": true
166
216
  },
167
217
  {
168
218
  "name": "idPrefix",
@@ -183,7 +233,8 @@
183
233
  }
184
234
  ]
185
235
  },
186
- "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n <h2 class=\"govuk-tabs__title\">\n Contents\n </h2>\n \n <ul class=\"govuk-tabs__list\">\n \n \n \n <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n <a class=\"govuk-tabs__tab\" href=\"#custom-1\">\n Tab 1\n </a>\n </li>\n \n \n \n \n <li class=\"govuk-tabs__list-item\">\n <a class=\"govuk-tabs__tab\" href=\"#custom-2\">\n Tab 2\n </a>\n </li>\n \n \n </ul>\n \n \n \n \n <div class=\"govuk-tabs__panel\" id=\"custom-1\">\n Panel 1 content\n </div>\n \n \n \n \n <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"custom-2\">\n Panel 2 content\n </div>\n \n \n</div>"
236
+ "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n <h2 class=\"govuk-tabs__title\">\n Contents\n </h2>\n \n <ul class=\"govuk-tabs__list\">\n \n \n \n <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n <a class=\"govuk-tabs__tab\" href=\"#custom-1\">\n Tab 1\n </a>\n </li>\n \n \n \n \n <li class=\"govuk-tabs__list-item\">\n <a class=\"govuk-tabs__tab\" href=\"#custom-2\">\n Tab 2\n </a>\n </li>\n \n \n </ul>\n \n \n \n \n <div class=\"govuk-tabs__panel\" id=\"custom-1\">\n Panel 1 content\n </div>\n \n \n \n \n <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"custom-2\">\n Panel 2 content\n </div>\n \n \n</div>",
237
+ "hidden": true
187
238
  },
188
239
  {
189
240
  "name": "html as text",
@@ -191,19 +242,22 @@
191
242
  "items": [
192
243
  {
193
244
  "label": "Tab 1",
245
+ "id": "tab-1",
194
246
  "panel": {
195
247
  "text": "<p>Panel 1 content</p>"
196
248
  }
197
249
  },
198
250
  {
199
251
  "label": "Tab 2",
252
+ "id": "tab-2",
200
253
  "panel": {
201
254
  "text": "<p>Panel 2 content</p>"
202
255
  }
203
256
  }
204
257
  ]
205
258
  },
206
- "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n <h2 class=\"govuk-tabs__title\">\n Contents\n </h2>\n \n <ul class=\"govuk-tabs__list\">\n \n \n \n <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n <a class=\"govuk-tabs__tab\" href=\"#-1\">\n Tab 1\n </a>\n </li>\n \n \n \n \n <li class=\"govuk-tabs__list-item\">\n <a class=\"govuk-tabs__tab\" href=\"#-2\">\n Tab 2\n </a>\n </li>\n \n \n </ul>\n \n \n \n \n <div class=\"govuk-tabs__panel\" id=\"-1\">\n &lt;p&gt;Panel 1 content&lt;/p&gt;\n </div>\n \n \n \n \n <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"-2\">\n &lt;p&gt;Panel 2 content&lt;/p&gt;\n </div>\n \n \n</div>"
259
+ "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n <h2 class=\"govuk-tabs__title\">\n Contents\n </h2>\n \n <ul class=\"govuk-tabs__list\">\n \n \n \n <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n Tab 1\n </a>\n </li>\n \n \n \n \n <li class=\"govuk-tabs__list-item\">\n <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n Tab 2\n </a>\n </li>\n \n \n </ul>\n \n \n \n \n <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n &lt;p&gt;Panel 1 content&lt;/p&gt;\n </div>\n \n \n \n \n <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n &lt;p&gt;Panel 2 content&lt;/p&gt;\n </div>\n \n \n</div>",
260
+ "hidden": true
207
261
  },
208
262
  {
209
263
  "name": "html",
@@ -211,19 +265,22 @@
211
265
  "items": [
212
266
  {
213
267
  "label": "Tab 1",
268
+ "id": "tab-1",
214
269
  "panel": {
215
270
  "html": "<p>Panel 1 content</p>"
216
271
  }
217
272
  },
218
273
  {
219
274
  "label": "Tab 2",
275
+ "id": "tab-2",
220
276
  "panel": {
221
277
  "html": "<p>Panel 2 content</p>"
222
278
  }
223
279
  }
224
280
  ]
225
281
  },
226
- "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n <h2 class=\"govuk-tabs__title\">\n Contents\n </h2>\n \n <ul class=\"govuk-tabs__list\">\n \n \n \n <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n <a class=\"govuk-tabs__tab\" href=\"#-1\">\n Tab 1\n </a>\n </li>\n \n \n \n \n <li class=\"govuk-tabs__list-item\">\n <a class=\"govuk-tabs__tab\" href=\"#-2\">\n Tab 2\n </a>\n </li>\n \n \n </ul>\n \n \n \n \n <div class=\"govuk-tabs__panel\" id=\"-1\">\n <p>Panel 1 content</p>\n </div>\n \n \n \n \n <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"-2\">\n <p>Panel 2 content</p>\n </div>\n \n \n</div>"
282
+ "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n <h2 class=\"govuk-tabs__title\">\n Contents\n </h2>\n \n <ul class=\"govuk-tabs__list\">\n \n \n \n <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n Tab 1\n </a>\n </li>\n \n \n \n \n <li class=\"govuk-tabs__list-item\">\n <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n Tab 2\n </a>\n </li>\n \n \n </ul>\n \n \n \n \n <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n <p>Panel 1 content</p>\n </div>\n \n \n \n \n <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n <p>Panel 2 content</p>\n </div>\n \n \n</div>",
283
+ "hidden": true
227
284
  }
228
285
  ]
229
286
  }