govuk_publishing_components 23.13.0 → 24.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (129) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/images/govuk_publishing_components/take-action-amber.svg +4 -0
  3. data/app/assets/images/govuk_publishing_components/take-action-green.svg +4 -0
  4. data/app/assets/images/govuk_publishing_components/take-action-red.svg +4 -0
  5. data/app/assets/javascripts/govuk_publishing_components/components/accordion.js +286 -4
  6. data/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js +0 -4
  7. data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js +44 -39
  8. data/app/assets/javascripts/govuk_publishing_components/vendor/polyfills/common.js +8 -0
  9. data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +0 -1
  10. data/app/assets/stylesheets/govuk_publishing_components/component_support.scss +0 -2
  11. data/app/assets/stylesheets/govuk_publishing_components/components/_accordion.scss +302 -14
  12. data/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss +34 -17
  13. data/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss +14 -8
  14. data/app/assets/stylesheets/govuk_publishing_components/components/_error-alert.scss +4 -4
  15. data/app/assets/stylesheets/govuk_publishing_components/components/_feedback.scss +35 -44
  16. data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss +112 -47
  17. data/app/assets/stylesheets/govuk_publishing_components/components/_success-alert.scss +8 -8
  18. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_contact.scss +0 -5
  19. data/app/assets/stylesheets/govuk_publishing_components/components/print/_accordion.scss +16 -9
  20. data/app/assets/stylesheets/govuk_publishing_components/components/print/_step-by-step-nav.scss +2 -2
  21. data/app/models/govuk_publishing_components/component_doc.rb +1 -1
  22. data/app/views/govuk_publishing_components/audit/show.html.erb +26 -26
  23. data/app/views/govuk_publishing_components/components/_accordion.html.erb +13 -20
  24. data/app/views/govuk_publishing_components/components/_contextual_sidebar.html.erb +2 -8
  25. data/app/views/govuk_publishing_components/components/_document_list.html.erb +12 -2
  26. data/app/views/govuk_publishing_components/components/_layout_footer.html.erb +9 -4
  27. data/app/views/govuk_publishing_components/components/_step_by_step_nav.html.erb +2 -2
  28. data/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_cta.html.erb +21 -0
  29. data/app/views/govuk_publishing_components/components/docs/accordion.yml +8 -3
  30. data/app/views/govuk_publishing_components/components/docs/contextual_sidebar.yml +65 -1
  31. data/app/views/govuk_publishing_components/components/docs/document_list.yml +50 -7
  32. data/app/views/govuk_publishing_components/components/docs/govspeak.yml +3 -3
  33. data/app/views/govuk_publishing_components/components/docs/layout_header.yml +11 -0
  34. data/app/views/govuk_publishing_components/components/layout_header/_header_logo.html.erb +1 -1
  35. data/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb +9 -4
  36. data/config/initializers/assets.rb +3 -1
  37. data/config/locales/cy.yml +6 -1
  38. data/config/locales/en.yml +8 -3
  39. data/lib/govuk_publishing_components/presenters/contextual_navigation.rb +183 -2
  40. data/lib/govuk_publishing_components/version.rb +1 -1
  41. data/node_modules/govuk-frontend/govuk/all.js +58 -1
  42. data/node_modules/govuk-frontend/govuk/components/_all.scss +2 -0
  43. data/node_modules/govuk-frontend/govuk/components/accordion/fixtures.json +25 -10
  44. data/node_modules/govuk-frontend/govuk/components/back-link/fixtures.json +12 -6
  45. data/node_modules/govuk-frontend/govuk/components/back-link/macro-options.json +4 -4
  46. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/fixtures.json +34 -13
  47. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/macro-options.json +1 -0
  48. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/template.njk +2 -2
  49. data/node_modules/govuk-frontend/govuk/components/button/_index.scss +2 -0
  50. data/node_modules/govuk-frontend/govuk/components/button/fixtures.json +74 -31
  51. data/node_modules/govuk-frontend/govuk/components/character-count/_index.scss +1 -0
  52. data/node_modules/govuk-frontend/govuk/components/character-count/character-count.js +1 -1
  53. data/node_modules/govuk-frontend/govuk/components/character-count/fixtures.json +85 -15
  54. data/node_modules/govuk-frontend/govuk/components/character-count/macro-options.json +1 -1
  55. data/node_modules/govuk-frontend/govuk/components/checkboxes/fixtures.json +145 -52
  56. data/node_modules/govuk-frontend/govuk/components/checkboxes/macro-options.json +2 -2
  57. data/node_modules/govuk-frontend/govuk/components/cookie-banner/_cookie-banner.scss +2 -0
  58. data/node_modules/govuk-frontend/govuk/components/cookie-banner/_index.scss +51 -0
  59. data/node_modules/govuk-frontend/govuk/components/cookie-banner/fixtures.json +425 -0
  60. data/node_modules/govuk-frontend/govuk/components/cookie-banner/macro-options.json +132 -0
  61. data/node_modules/govuk-frontend/govuk/components/cookie-banner/macro.njk +3 -0
  62. data/node_modules/govuk-frontend/govuk/components/cookie-banner/template.njk +63 -0
  63. data/node_modules/govuk-frontend/govuk/components/date-input/fixtures.json +84 -34
  64. data/node_modules/govuk-frontend/govuk/components/date-input/macro-options.json +1 -1
  65. data/node_modules/govuk-frontend/govuk/components/date-input/template.njk +1 -1
  66. data/node_modules/govuk-frontend/govuk/components/details/fixtures.json +35 -15
  67. data/node_modules/govuk-frontend/govuk/components/error-message/fixtures.json +21 -10
  68. data/node_modules/govuk-frontend/govuk/components/error-message/macro-options.json +1 -0
  69. data/node_modules/govuk-frontend/govuk/components/error-summary/_index.scss +2 -12
  70. data/node_modules/govuk-frontend/govuk/components/error-summary/fixtures.json +86 -25
  71. data/node_modules/govuk-frontend/govuk/components/fieldset/fixtures.json +20 -10
  72. data/node_modules/govuk-frontend/govuk/components/file-upload/fixtures.json +60 -13
  73. data/node_modules/govuk-frontend/govuk/components/footer/fixtures.json +37 -18
  74. data/node_modules/govuk-frontend/govuk/components/footer/macro-options.json +8 -5
  75. data/node_modules/govuk-frontend/govuk/components/header/fixtures.json +36 -18
  76. data/node_modules/govuk-frontend/govuk/components/header/macro-options.json +2 -2
  77. data/node_modules/govuk-frontend/govuk/components/header/template.njk +4 -4
  78. data/node_modules/govuk-frontend/govuk/components/hint/fixtures.json +17 -8
  79. data/node_modules/govuk-frontend/govuk/components/input/fixtures.json +130 -40
  80. data/node_modules/govuk-frontend/govuk/components/input/macro-options.json +1 -1
  81. data/node_modules/govuk-frontend/govuk/components/inset-text/fixtures.json +17 -8
  82. data/node_modules/govuk-frontend/govuk/components/label/fixtures.json +20 -11
  83. data/node_modules/govuk-frontend/govuk/components/label/macro-options.json +1 -1
  84. data/node_modules/govuk-frontend/govuk/components/notification-banner/README.md +15 -0
  85. data/node_modules/govuk-frontend/govuk/components/notification-banner/_index.scss +89 -0
  86. data/node_modules/govuk-frontend/govuk/components/notification-banner/_notification-banner.scss +2 -0
  87. data/node_modules/govuk-frontend/govuk/components/notification-banner/fixtures.json +212 -0
  88. data/node_modules/govuk-frontend/govuk/components/notification-banner/macro-options.json +68 -0
  89. data/node_modules/govuk-frontend/govuk/components/notification-banner/macro.njk +3 -0
  90. data/node_modules/govuk-frontend/govuk/components/notification-banner/notification-banner.js +61 -0
  91. data/node_modules/govuk-frontend/govuk/components/notification-banner/template.njk +47 -0
  92. data/node_modules/govuk-frontend/govuk/components/panel/fixtures.json +30 -13
  93. data/node_modules/govuk-frontend/govuk/components/phase-banner/fixtures.json +20 -9
  94. data/node_modules/govuk-frontend/govuk/components/radios/fixtures.json +167 -50
  95. data/node_modules/govuk-frontend/govuk/components/select/fixtures.json +97 -18
  96. data/node_modules/govuk-frontend/govuk/components/select/macro-options.json +1 -1
  97. data/node_modules/govuk-frontend/govuk/components/skip-link/fixtures.json +21 -9
  98. data/node_modules/govuk-frontend/govuk/components/summary-list/fixtures.json +118 -25
  99. data/node_modules/govuk-frontend/govuk/components/table/_index.scss +21 -0
  100. data/node_modules/govuk-frontend/govuk/components/table/fixtures.json +92 -22
  101. data/node_modules/govuk-frontend/govuk/components/table/macro-options.json +2 -2
  102. data/node_modules/govuk-frontend/govuk/components/tabs/fixtures.json +75 -18
  103. data/node_modules/govuk-frontend/govuk/components/tabs/macro-options.json +1 -1
  104. data/node_modules/govuk-frontend/govuk/components/tag/fixtures.json +28 -14
  105. data/node_modules/govuk-frontend/govuk/components/textarea/fixtures.json +68 -17
  106. data/node_modules/govuk-frontend/govuk/components/warning-text/fixtures.json +19 -14
  107. data/node_modules/govuk-frontend/govuk/helpers/_links.scss +94 -0
  108. data/node_modules/govuk-frontend/govuk/objects/_all.scss +1 -0
  109. data/node_modules/govuk-frontend/govuk/objects/_button-group.scss +94 -0
  110. data/node_modules/govuk-frontend/govuk/settings/_colours-applied.scss +9 -0
  111. data/node_modules/govuk-frontend/govuk/settings/_typography-font.scss +3 -0
  112. data/node_modules/govuk-frontend/package.json +1 -1
  113. metadata +21 -18
  114. data/app/assets/images/govuk_publishing_components/chevron-banner/chevron-banner-small-focus.svg +0 -4
  115. data/app/assets/images/govuk_publishing_components/chevron-banner/chevron-banner-small.svg +0 -4
  116. data/app/assets/javascripts/govuk_publishing_components/components/header.js +0 -8
  117. data/app/assets/javascripts/govuk_publishing_components/lib/auto-track-event.js +0 -31
  118. data/app/assets/stylesheets/govuk_publishing_components/components/_chevron-banner.scss +0 -138
  119. data/app/assets/stylesheets/govuk_publishing_components/components/_list.scss +0 -1
  120. data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_variables.scss +0 -27
  121. data/app/assets/stylesheets/govuk_publishing_components/components/mixins/_back-arrow.scss +0 -13
  122. data/app/assets/stylesheets/govuk_publishing_components/components/mixins/_clearfix.scss +0 -8
  123. data/app/views/govuk_publishing_components/components/_chevron_banner.html.erb +0 -19
  124. data/app/views/govuk_publishing_components/components/_subscription-links.html.erb +0 -85
  125. data/app/views/govuk_publishing_components/components/_translation-nav.html.erb +0 -33
  126. data/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_related_links.html.erb +0 -6
  127. data/app/views/govuk_publishing_components/components/docs/chevron_banner.yml +0 -33
  128. data/app/views/govuk_publishing_components/components/docs/subscription-links.yml +0 -103
  129. data/app/views/govuk_publishing_components/components/docs/translation-nav.yml +0 -139
@@ -47,4 +47,25 @@
47
47
  display: table-caption;
48
48
  text-align: left;
49
49
  }
50
+
51
+ // Modifiers that make captions look more like their equivalent headings
52
+
53
+ .govuk-table__caption--xl {
54
+ @include govuk-font($size: 48, $weight: bold);
55
+ margin-bottom: govuk-spacing(3);
56
+ }
57
+
58
+ .govuk-table__caption--l {
59
+ @include govuk-font($size: 36, $weight: bold);
60
+ margin-bottom: govuk-spacing(3);
61
+ }
62
+
63
+ .govuk-table__caption--m {
64
+ @include govuk-font($size: 24, $weight: bold);
65
+ margin-bottom: govuk-spacing(3);
66
+ }
67
+
68
+ .govuk-table__caption--s {
69
+ @include govuk-font($size: 19, $weight: bold);
70
+ }
50
71
  }
@@ -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
  }
@@ -15,7 +15,7 @@
15
15
  "name": "html",
16
16
  "type": "string",
17
17
  "required": true,
18
- "description": "If `text` is set, this is not required. HTML for cells in table rows. If `html` is provided, the `text` argument will be ignore"
18
+ "description": "If `text` is set, this is not required. HTML for cells in table rows. If `html` is provided, the `text` argument will be ignored."
19
19
  },
20
20
  {
21
21
  "name": "format",
@@ -65,7 +65,7 @@
65
65
  "name": "html",
66
66
  "type": "string",
67
67
  "required": false,
68
- "description": "If `text` is set, this is not required. HTML for table head cells. If `html` is provided, the `text` argument will be ignore"
68
+ "description": "If `text` is set, this is not required. HTML for table head cells. If `html` is provided, the `text` argument will be ignored."
69
69
  },
70
70
  {
71
71
  "name": "format",
@@ -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
  }