govuk_publishing_components 23.12.2 → 23.15.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (102) 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/header.js +3 -0
  6. data/app/assets/javascripts/govuk_publishing_components/components/layout-header.js +5 -0
  7. data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js +32 -36
  8. data/app/assets/javascripts/govuk_publishing_components/modules.js +1 -1
  9. data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +0 -1
  10. data/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss +34 -17
  11. data/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss +14 -8
  12. data/app/assets/stylesheets/govuk_publishing_components/components/_feedback.scss +35 -44
  13. data/app/assets/stylesheets/govuk_publishing_components/components/_layout-footer.scss +5 -0
  14. data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss +19 -7
  15. data/app/assets/stylesheets/govuk_publishing_components/components/print/_govspeak.scss +5 -0
  16. data/app/models/govuk_publishing_components/component_doc.rb +1 -1
  17. data/app/views/govuk_publishing_components/components/_button.html.erb +1 -0
  18. data/app/views/govuk_publishing_components/components/_contextual_sidebar.html.erb +2 -8
  19. data/app/views/govuk_publishing_components/components/_document_list.html.erb +2 -1
  20. data/app/views/govuk_publishing_components/components/_layout_footer.html.erb +9 -4
  21. data/app/views/govuk_publishing_components/components/_layout_header.html.erb +3 -2
  22. data/app/views/govuk_publishing_components/components/_step_by_step_nav.html.erb +2 -2
  23. data/app/views/govuk_publishing_components/components/_subscription-links.html.erb +3 -0
  24. data/app/views/govuk_publishing_components/components/_subscription_links.html.erb +82 -0
  25. data/app/views/govuk_publishing_components/components/_translation-nav.html.erb +3 -0
  26. data/app/views/govuk_publishing_components/components/_translation_nav.html.erb +30 -0
  27. data/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_cta.html.erb +21 -0
  28. data/app/views/govuk_publishing_components/components/docs/contextual_sidebar.yml +60 -1
  29. data/app/views/govuk_publishing_components/components/docs/document_list.yml +32 -7
  30. data/app/views/govuk_publishing_components/components/docs/layout_header.yml +32 -0
  31. data/app/views/govuk_publishing_components/components/docs/meta_tags.yml +99 -1
  32. data/app/views/govuk_publishing_components/components/docs/subscription-links.yml +3 -0
  33. data/app/views/govuk_publishing_components/components/docs/subscription_links.yml +100 -0
  34. data/app/views/govuk_publishing_components/components/docs/translation-nav.yml +3 -1
  35. data/app/views/govuk_publishing_components/components/docs/translation_nav.yml +137 -0
  36. data/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb +11 -6
  37. data/config/initializers/assets.rb +3 -0
  38. data/config/locales/cy.yml +6 -1
  39. data/config/locales/en.yml +8 -3
  40. data/lib/govuk_publishing_components/presenters/contextual_navigation.rb +124 -2
  41. data/lib/govuk_publishing_components/presenters/meta_tags.rb +2 -0
  42. data/lib/govuk_publishing_components/version.rb +1 -1
  43. data/node_modules/govuk-frontend/govuk/all.js +57 -0
  44. data/node_modules/govuk-frontend/govuk/components/_all.scss +1 -0
  45. data/node_modules/govuk-frontend/govuk/components/accordion/fixtures.json +25 -10
  46. data/node_modules/govuk-frontend/govuk/components/back-link/fixtures.json +12 -6
  47. data/node_modules/govuk-frontend/govuk/components/back-link/macro-options.json +4 -4
  48. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/fixtures.json +34 -13
  49. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/macro-options.json +1 -0
  50. data/node_modules/govuk-frontend/govuk/components/button/fixtures.json +74 -31
  51. data/node_modules/govuk-frontend/govuk/components/character-count/fixtures.json +72 -15
  52. data/node_modules/govuk-frontend/govuk/components/character-count/macro-options.json +1 -1
  53. data/node_modules/govuk-frontend/govuk/components/checkboxes/fixtures.json +145 -52
  54. data/node_modules/govuk-frontend/govuk/components/checkboxes/macro-options.json +2 -2
  55. data/node_modules/govuk-frontend/govuk/components/date-input/fixtures.json +84 -34
  56. data/node_modules/govuk-frontend/govuk/components/date-input/macro-options.json +1 -1
  57. data/node_modules/govuk-frontend/govuk/components/date-input/template.njk +1 -1
  58. data/node_modules/govuk-frontend/govuk/components/details/fixtures.json +34 -14
  59. data/node_modules/govuk-frontend/govuk/components/error-message/fixtures.json +21 -10
  60. data/node_modules/govuk-frontend/govuk/components/error-message/macro-options.json +1 -0
  61. data/node_modules/govuk-frontend/govuk/components/error-summary/_index.scss +2 -12
  62. data/node_modules/govuk-frontend/govuk/components/error-summary/fixtures.json +86 -25
  63. data/node_modules/govuk-frontend/govuk/components/fieldset/fixtures.json +20 -10
  64. data/node_modules/govuk-frontend/govuk/components/file-upload/fixtures.json +60 -13
  65. data/node_modules/govuk-frontend/govuk/components/footer/fixtures.json +37 -18
  66. data/node_modules/govuk-frontend/govuk/components/footer/macro-options.json +8 -5
  67. data/node_modules/govuk-frontend/govuk/components/header/fixtures.json +36 -18
  68. data/node_modules/govuk-frontend/govuk/components/header/macro-options.json +2 -2
  69. data/node_modules/govuk-frontend/govuk/components/hint/fixtures.json +17 -8
  70. data/node_modules/govuk-frontend/govuk/components/input/fixtures.json +130 -40
  71. data/node_modules/govuk-frontend/govuk/components/input/macro-options.json +1 -1
  72. data/node_modules/govuk-frontend/govuk/components/inset-text/fixtures.json +17 -8
  73. data/node_modules/govuk-frontend/govuk/components/label/fixtures.json +20 -11
  74. data/node_modules/govuk-frontend/govuk/components/label/macro-options.json +1 -1
  75. data/node_modules/govuk-frontend/govuk/components/notification-banner/README.md +15 -0
  76. data/node_modules/govuk-frontend/govuk/components/notification-banner/_index.scss +89 -0
  77. data/node_modules/govuk-frontend/govuk/components/notification-banner/_notification-banner.scss +2 -0
  78. data/node_modules/govuk-frontend/govuk/components/notification-banner/fixtures.json +212 -0
  79. data/node_modules/govuk-frontend/govuk/components/notification-banner/macro-options.json +68 -0
  80. data/node_modules/govuk-frontend/govuk/components/notification-banner/macro.njk +3 -0
  81. data/node_modules/govuk-frontend/govuk/components/notification-banner/notification-banner.js +61 -0
  82. data/node_modules/govuk-frontend/govuk/components/notification-banner/template.njk +47 -0
  83. data/node_modules/govuk-frontend/govuk/components/panel/fixtures.json +30 -13
  84. data/node_modules/govuk-frontend/govuk/components/phase-banner/fixtures.json +20 -9
  85. data/node_modules/govuk-frontend/govuk/components/radios/fixtures.json +167 -50
  86. data/node_modules/govuk-frontend/govuk/components/select/fixtures.json +97 -18
  87. data/node_modules/govuk-frontend/govuk/components/select/macro-options.json +1 -1
  88. data/node_modules/govuk-frontend/govuk/components/skip-link/fixtures.json +21 -9
  89. data/node_modules/govuk-frontend/govuk/components/summary-list/fixtures.json +118 -25
  90. data/node_modules/govuk-frontend/govuk/components/table/fixtures.json +92 -22
  91. data/node_modules/govuk-frontend/govuk/components/tabs/fixtures.json +75 -18
  92. data/node_modules/govuk-frontend/govuk/components/tabs/macro-options.json +1 -1
  93. data/node_modules/govuk-frontend/govuk/components/tag/fixtures.json +28 -14
  94. data/node_modules/govuk-frontend/govuk/components/textarea/fixtures.json +68 -17
  95. data/node_modules/govuk-frontend/govuk/components/warning-text/fixtures.json +19 -14
  96. data/node_modules/govuk-frontend/govuk/helpers/_links.scss +94 -0
  97. data/node_modules/govuk-frontend/govuk/settings/_colours-applied.scss +9 -0
  98. data/node_modules/govuk-frontend/govuk/settings/_typography-font.scss +3 -0
  99. data/node_modules/govuk-frontend/package.json +1 -1
  100. metadata +18 -4
  101. data/app/assets/stylesheets/govuk_publishing_components/components/_transition-countdown.scss +0 -125
  102. data/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_related_links.html.erb +0 -6
@@ -26,7 +26,8 @@
26
26
  }
27
27
  ]
28
28
  },
29
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"select-1\">\n Label text goes here\n </label>\n\n\n <select class=\"govuk-select\" id=\"select-1\" name=\"select-1\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\" selected>GOV.UK frontend option 2</option>\n \n \n \n <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n \n \n </select>\n</div>"
29
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"select-1\">\n Label text goes here\n </label>\n\n\n <select class=\"govuk-select\" id=\"select-1\" name=\"select-1\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\" selected>GOV.UK frontend option 2</option>\n \n \n \n <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n \n \n </select>\n</div>",
30
+ "hidden": false
30
31
  },
31
32
  {
32
33
  "name": "with hint text and error message",
@@ -57,7 +58,8 @@
57
58
  }
58
59
  ]
59
60
  },
60
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"select-2\">\n Label text goes here\n </label>\n\n \n \n <div id=\"select-2-hint\" class=\"govuk-hint\">\n Hint text goes here\n </div>\n\n\n \n \n <span id=\"select-2-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </span>\n\n <select class=\"govuk-select govuk-select--error\" id=\"select-2\" name=\"select-2\" aria-describedby=\"select-2-hint select-2-error\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\">GOV.UK frontend option 2</option>\n \n \n \n <option value=\"3\">GOV.UK frontend option 3</option>\n \n \n </select>\n</div>"
61
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"select-2\">\n Label text goes here\n </label>\n\n \n \n <div id=\"select-2-hint\" class=\"govuk-hint\">\n Hint text goes here\n </div>\n\n\n \n \n <span id=\"select-2-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </span>\n\n <select class=\"govuk-select govuk-select--error\" id=\"select-2\" name=\"select-2\" aria-describedby=\"select-2-hint select-2-error\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\">GOV.UK frontend option 2</option>\n \n \n \n <option value=\"3\">GOV.UK frontend option 3</option>\n \n \n </select>\n</div>",
62
+ "hidden": false
61
63
  },
62
64
  {
63
65
  "name": "with label as page heading",
@@ -85,7 +87,8 @@
85
87
  }
86
88
  ]
87
89
  },
88
- "html": "<div class=\"govuk-form-group\">\n <h1 class=\"govuk-label-wrapper\">\n <label class=\"govuk-label\" for=\"select-3\">\n Label text goes here\n </label>\n </h1>\n\n\n <select class=\"govuk-select\" id=\"select-3\" name=\"select-3\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\" selected>GOV.UK frontend option 2</option>\n \n \n \n <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n \n \n </select>\n</div>"
90
+ "html": "<div class=\"govuk-form-group\">\n <h1 class=\"govuk-label-wrapper\">\n <label class=\"govuk-label\" for=\"select-3\">\n Label text goes here\n </label>\n </h1>\n\n\n <select class=\"govuk-select\" id=\"select-3\" name=\"select-3\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\" selected>GOV.UK frontend option 2</option>\n \n \n \n <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n \n \n </select>\n</div>",
91
+ "hidden": false
89
92
  },
90
93
  {
91
94
  "name": "with full width override",
@@ -113,7 +116,8 @@
113
116
  }
114
117
  ]
115
118
  },
116
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"select-1\">\n Label text goes here\n </label>\n\n\n <select class=\"govuk-select govuk-!-width-full\" id=\"select-1\" name=\"select-1\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\" selected>GOV.UK frontend option 2</option>\n \n \n \n <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n \n \n </select>\n</div>"
119
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"select-1\">\n Label text goes here\n </label>\n\n\n <select class=\"govuk-select govuk-!-width-full\" id=\"select-1\" name=\"select-1\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\" selected>GOV.UK frontend option 2</option>\n \n \n \n <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n \n \n </select>\n</div>",
120
+ "hidden": false
117
121
  },
118
122
  {
119
123
  "name": "with optional form-group classes",
@@ -144,31 +148,61 @@
144
148
  }
145
149
  ]
146
150
  },
147
- "html": "<div class=\"govuk-form-group extra-class\">\n <label class=\"govuk-label\" for=\"select-1\">\n Label text goes here\n </label>\n\n\n <select class=\"govuk-select govuk-!-width-full\" id=\"select-1\" name=\"select-1\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\" selected>GOV.UK frontend option 2</option>\n \n \n \n <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n \n \n </select>\n</div>"
151
+ "html": "<div class=\"govuk-form-group extra-class\">\n <label class=\"govuk-label\" for=\"select-1\">\n Label text goes here\n </label>\n\n\n <select class=\"govuk-select govuk-!-width-full\" id=\"select-1\" name=\"select-1\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\" selected>GOV.UK frontend option 2</option>\n \n \n \n <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n \n \n </select>\n</div>",
152
+ "hidden": false
148
153
  },
149
154
  {
150
155
  "name": "with describedBy",
151
156
  "options": {
157
+ "id": "with-describedby",
158
+ "name": "with-describedby",
159
+ "items": [
160
+ {
161
+ "value": 1,
162
+ "text": "GOV.UK frontend option 1"
163
+ },
164
+ {
165
+ "value": 2,
166
+ "text": "GOV.UK frontend option 2"
167
+ }
168
+ ],
152
169
  "describedBy": "some-id"
153
170
  },
154
- "html": "<div class=\"govuk-form-group\">\n \n\n\n <select class=\"govuk-select\" id=\"\" name=\"\" aria-describedby=\"some-id\">\n \n </select>\n</div>"
171
+ "html": "<div class=\"govuk-form-group\">\n \n\n\n <select class=\"govuk-select\" id=\"with-describedby\" name=\"with-describedby\" aria-describedby=\"some-id\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\">GOV.UK frontend option 2</option>\n \n \n </select>\n</div>",
172
+ "hidden": true
155
173
  },
156
174
  {
157
175
  "name": "attributes",
158
176
  "options": {
177
+ "id": "with-attributes",
178
+ "name": "with-attributes",
179
+ "items": [
180
+ {
181
+ "value": 1,
182
+ "text": "GOV.UK frontend option 1"
183
+ },
184
+ {
185
+ "value": 2,
186
+ "text": "GOV.UK frontend option 2"
187
+ }
188
+ ],
159
189
  "attributes": {
160
190
  "data-attribute": "my data value"
161
191
  }
162
192
  },
163
- "html": "<div class=\"govuk-form-group\">\n \n\n\n <select class=\"govuk-select\" id=\"\" name=\"\" data-attribute=\"my data value\">\n \n </select>\n</div>"
193
+ "html": "<div class=\"govuk-form-group\">\n \n\n\n <select class=\"govuk-select\" id=\"with-attributes\" name=\"with-attributes\" data-attribute=\"my data value\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\">GOV.UK frontend option 2</option>\n \n \n </select>\n</div>",
194
+ "hidden": true
164
195
  },
165
196
  {
166
197
  "name": "attributes on items",
167
198
  "options": {
199
+ "id": "with-item-attributes",
200
+ "name": "with-item-attributes",
168
201
  "value": 2,
169
202
  "items": [
170
203
  {
171
204
  "text": "Option 1",
205
+ "value": 1,
172
206
  "attributes": {
173
207
  "data-attribute": "ABC",
174
208
  "data-second-attribute": "DEF"
@@ -176,6 +210,7 @@
176
210
  },
177
211
  {
178
212
  "text": "Option 2",
213
+ "value": 2,
179
214
  "attributes": {
180
215
  "data-attribute": "GHI",
181
216
  "data-second-attribute": "JKL"
@@ -183,66 +218,110 @@
183
218
  }
184
219
  ]
185
220
  },
186
- "html": "<div class=\"govuk-form-group\">\n \n\n\n <select class=\"govuk-select\" id=\"\" name=\"\">\n \n \n <option value=\"\" data-attribute=\"ABC\" data-second-attribute=\"DEF\">Option 1</option>\n \n \n \n <option value=\"\" data-attribute=\"GHI\" data-second-attribute=\"JKL\">Option 2</option>\n \n \n </select>\n</div>"
221
+ "html": "<div class=\"govuk-form-group\">\n \n\n\n <select class=\"govuk-select\" id=\"with-item-attributes\" name=\"with-item-attributes\">\n \n \n <option value=\"1\" data-attribute=\"ABC\" data-second-attribute=\"DEF\">Option 1</option>\n \n \n \n <option value=\"2\" data-attribute=\"GHI\" data-second-attribute=\"JKL\">Option 2</option>\n \n \n </select>\n</div>",
222
+ "hidden": true
187
223
  },
188
224
  {
189
225
  "name": "with falsey values",
190
226
  "options": {
227
+ "id": "with-falsey-values",
228
+ "name": "with-falsey-values",
191
229
  "items": [
192
230
  {
193
- "text": "Option 1"
231
+ "text": "Option 1",
232
+ "value": 1
194
233
  },
195
234
  null,
196
235
  false,
197
236
  "",
198
237
  {
199
- "text": "Options 2"
238
+ "text": "Options 2",
239
+ "value": 2
200
240
  }
201
241
  ]
202
242
  },
203
- "html": "<div class=\"govuk-form-group\">\n \n\n\n <select class=\"govuk-select\" id=\"\" name=\"\">\n \n \n <option value=\"\">Option 1</option>\n \n \n \n \n \n \n \n \n \n <option value=\"\">Options 2</option>\n \n \n </select>\n</div>"
243
+ "html": "<div class=\"govuk-form-group\">\n \n\n\n <select class=\"govuk-select\" id=\"with-falsey-values\" name=\"with-falsey-values\">\n \n \n <option value=\"1\">Option 1</option>\n \n \n \n \n \n \n \n \n \n <option value=\"2\">Options 2</option>\n \n \n </select>\n</div>",
244
+ "hidden": true
204
245
  },
205
246
  {
206
247
  "name": "hint",
207
248
  "options": {
208
249
  "id": "select-with-hint",
250
+ "name": "select-with-hint",
209
251
  "hint": {
210
252
  "text": "Hint text goes here"
211
253
  }
212
254
  },
213
- "html": "<div class=\"govuk-form-group\">\n \n\n \n \n <div id=\"select-with-hint-hint\" class=\"govuk-hint\">\n Hint text goes here\n </div>\n\n\n <select class=\"govuk-select\" id=\"select-with-hint\" name=\"\" aria-describedby=\"select-with-hint-hint\">\n \n </select>\n</div>"
255
+ "html": "<div class=\"govuk-form-group\">\n \n\n \n \n <div id=\"select-with-hint-hint\" class=\"govuk-hint\">\n Hint text goes here\n </div>\n\n\n <select class=\"govuk-select\" id=\"select-with-hint\" name=\"select-with-hint\" aria-describedby=\"select-with-hint-hint\">\n \n </select>\n</div>",
256
+ "hidden": true
214
257
  },
215
258
  {
216
259
  "name": "hint and describedBy",
217
260
  "options": {
218
261
  "id": "select-with-hint",
262
+ "name": "select-with-hint",
219
263
  "describedBy": "some-id",
220
264
  "hint": {
221
265
  "text": "Hint text goes here"
222
- }
266
+ },
267
+ "items": [
268
+ {
269
+ "value": 1,
270
+ "text": "GOV.UK frontend option 1"
271
+ },
272
+ {
273
+ "value": 2,
274
+ "text": "GOV.UK frontend option 2"
275
+ }
276
+ ]
223
277
  },
224
- "html": "<div class=\"govuk-form-group\">\n \n\n \n \n <div id=\"select-with-hint-hint\" class=\"govuk-hint\">\n Hint text goes here\n </div>\n\n\n <select class=\"govuk-select\" id=\"select-with-hint\" name=\"\" aria-describedby=\"some-id select-with-hint-hint\">\n \n </select>\n</div>"
278
+ "html": "<div class=\"govuk-form-group\">\n \n\n \n \n <div id=\"select-with-hint-hint\" class=\"govuk-hint\">\n Hint text goes here\n </div>\n\n\n <select class=\"govuk-select\" id=\"select-with-hint\" name=\"select-with-hint\" aria-describedby=\"some-id select-with-hint-hint\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\">GOV.UK frontend option 2</option>\n \n \n </select>\n</div>",
279
+ "hidden": true
225
280
  },
226
281
  {
227
282
  "name": "error",
228
283
  "options": {
229
284
  "id": "select-with-error",
285
+ "name": "select-with-error",
230
286
  "errorMessage": {
231
287
  "text": "Error message"
232
- }
288
+ },
289
+ "items": [
290
+ {
291
+ "value": 1,
292
+ "text": "GOV.UK frontend option 1"
293
+ },
294
+ {
295
+ "value": 2,
296
+ "text": "GOV.UK frontend option 2"
297
+ }
298
+ ]
233
299
  },
234
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n \n\n\n \n \n <span id=\"select-with-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </span>\n\n <select class=\"govuk-select govuk-select--error\" id=\"select-with-error\" name=\"\" aria-describedby=\"select-with-error-error\">\n \n </select>\n</div>"
300
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n \n\n\n \n \n <span id=\"select-with-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </span>\n\n <select class=\"govuk-select govuk-select--error\" id=\"select-with-error\" name=\"select-with-error\" aria-describedby=\"select-with-error-error\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\">GOV.UK frontend option 2</option>\n \n \n </select>\n</div>",
301
+ "hidden": true
235
302
  },
236
303
  {
237
304
  "name": "error and describedBy",
238
305
  "options": {
239
306
  "id": "select-with-error",
307
+ "name": "select-with-error",
240
308
  "describedBy": "some-id",
241
309
  "errorMessage": {
242
310
  "text": "Error message"
243
- }
311
+ },
312
+ "items": [
313
+ {
314
+ "value": 1,
315
+ "text": "GOV.UK frontend option 1"
316
+ },
317
+ {
318
+ "value": 2,
319
+ "text": "GOV.UK frontend option 2"
320
+ }
321
+ ]
244
322
  },
245
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n \n\n\n \n \n <span id=\"select-with-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </span>\n\n <select class=\"govuk-select govuk-select--error\" id=\"select-with-error\" name=\"\" aria-describedby=\"some-id select-with-error-error\">\n \n </select>\n</div>"
323
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n \n\n\n \n \n <span id=\"select-with-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </span>\n\n <select class=\"govuk-select govuk-select--error\" id=\"select-with-error\" name=\"select-with-error\" aria-describedby=\"some-id select-with-error-error\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\">GOV.UK frontend option 2</option>\n \n \n </select>\n</div>",
324
+ "hidden": true
246
325
  }
247
326
  ]
248
327
  }
@@ -21,7 +21,7 @@
21
21
  "name": "value",
22
22
  "type": "string",
23
23
  "required": false,
24
- "description": "Value for the option item."
24
+ "description": "Value for the option item. Defaults to an empty string."
25
25
  },
26
26
  {
27
27
  "name": "text",
@@ -7,7 +7,8 @@
7
7
  "text": "Skip to main content",
8
8
  "href": "#content"
9
9
  },
10
- "html": "<a href=\"#content\" class=\"govuk-skip-link\">Skip to main content</a>"
10
+ "html": "<a href=\"#content\" class=\"govuk-skip-link\">Skip to main content</a>",
11
+ "hidden": false
11
12
  },
12
13
  {
13
14
  "name": "with focus",
@@ -16,57 +17,68 @@
16
17
  "text": "Skip to main content",
17
18
  "href": "#content"
18
19
  },
19
- "html": "<a href=\"#content\" class=\"govuk-skip-link :focus\">Skip to main content</a>"
20
+ "html": "<a href=\"#content\" class=\"govuk-skip-link :focus\">Skip to main content</a>",
21
+ "hidden": false
20
22
  },
21
23
  {
22
24
  "name": "default values",
23
25
  "options": {},
24
- "html": "<a href=\"#content\" class=\"govuk-skip-link\"></a>"
26
+ "html": "<a href=\"#content\" class=\"govuk-skip-link\"></a>",
27
+ "hidden": true
25
28
  },
26
29
  {
27
30
  "name": "custom href",
28
31
  "options": {
32
+ "text": "Skip to custom content",
29
33
  "href": "#custom"
30
34
  },
31
- "html": "<a href=\"#custom\" class=\"govuk-skip-link\"></a>"
35
+ "html": "<a href=\"#custom\" class=\"govuk-skip-link\">Skip to custom content</a>",
36
+ "hidden": true
32
37
  },
33
38
  {
34
39
  "name": "custom text",
35
40
  "options": {
36
41
  "text": "skip"
37
42
  },
38
- "html": "<a href=\"#content\" class=\"govuk-skip-link\">skip</a>"
43
+ "html": "<a href=\"#content\" class=\"govuk-skip-link\">skip</a>",
44
+ "hidden": true
39
45
  },
40
46
  {
41
47
  "name": "html as text",
42
48
  "options": {
43
49
  "text": "<p>skip</p>"
44
50
  },
45
- "html": "<a href=\"#content\" class=\"govuk-skip-link\">&lt;p&gt;skip&lt;/p&gt;</a>"
51
+ "html": "<a href=\"#content\" class=\"govuk-skip-link\">&lt;p&gt;skip&lt;/p&gt;</a>",
52
+ "hidden": true
46
53
  },
47
54
  {
48
55
  "name": "html",
49
56
  "options": {
50
57
  "html": "<p>skip</p>"
51
58
  },
52
- "html": "<a href=\"#content\" class=\"govuk-skip-link\"><p>skip</p></a>"
59
+ "html": "<a href=\"#content\" class=\"govuk-skip-link\"><p>skip</p></a>",
60
+ "hidden": true
53
61
  },
54
62
  {
55
63
  "name": "classes",
56
64
  "options": {
65
+ "text": "Skip link",
57
66
  "classes": "app-skip-link--custom-class"
58
67
  },
59
- "html": "<a href=\"#content\" class=\"govuk-skip-link app-skip-link--custom-class\"></a>"
68
+ "html": "<a href=\"#content\" class=\"govuk-skip-link app-skip-link--custom-class\">Skip link</a>",
69
+ "hidden": true
60
70
  },
61
71
  {
62
72
  "name": "attributes",
63
73
  "options": {
74
+ "text": "Skip link",
64
75
  "attributes": {
65
76
  "data-test": "attribute",
66
77
  "aria-label": "Skip to content"
67
78
  }
68
79
  },
69
- "html": "<a href=\"#content\" class=\"govuk-skip-link\" data-test=\"attribute\" aria-label=\"Skip to content\"></a>"
80
+ "html": "<a href=\"#content\" class=\"govuk-skip-link\" data-test=\"attribute\" aria-label=\"Skip to content\">Skip link</a>",
81
+ "hidden": true
70
82
  }
71
83
  ]
72
84
  }
@@ -31,7 +31,8 @@
31
31
  }
32
32
  ]
33
33
  },
34
- "html": "<dl class=\"govuk-summary-list\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Name\n </dt>\n <dd class=\"govuk-summary-list__value\">\n Firstname Lastname\n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Date of birth\n </dt>\n <dd class=\"govuk-summary-list__value\">\n 13/08/1980\n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Contact information\n </dt>\n <dd class=\"govuk-summary-list__value\">\n <p class=\"govuk-body\">\n email@email.com\n </p>\n <p class=\"govuk-body\">\n Address line 1<br>\n Address line 2<br>\n Address line 3<br>\n Address line 4<br>\n Address line 5\n </p>\n </dd>\n \n </div>\n \n \n</dl>"
34
+ "html": "<dl class=\"govuk-summary-list\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Name\n </dt>\n <dd class=\"govuk-summary-list__value\">\n Firstname Lastname\n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Date of birth\n </dt>\n <dd class=\"govuk-summary-list__value\">\n 13/08/1980\n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Contact information\n </dt>\n <dd class=\"govuk-summary-list__value\">\n <p class=\"govuk-body\">\n email@email.com\n </p>\n <p class=\"govuk-body\">\n Address line 1<br>\n Address line 2<br>\n Address line 3<br>\n Address line 4<br>\n Address line 5\n </p>\n </dd>\n \n </div>\n \n \n</dl>",
35
+ "hidden": false
35
36
  },
36
37
  {
37
38
  "name": "with actions",
@@ -100,7 +101,8 @@
100
101
  }
101
102
  ]
102
103
  },
103
- "html": "<dl class=\"govuk-summary-list\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Name\n </dt>\n <dd class=\"govuk-summary-list__value\">\n Firstname Lastname\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <ul class=\"govuk-summary-list__actions-list\">\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Edit<span class=\"govuk-visually-hidden\"> name</span>\n </a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Delete<span class=\"govuk-visually-hidden\"> name</span>\n </a>\n </li>\n \n </ul>\n \n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Date of birth\n </dt>\n <dd class=\"govuk-summary-list__value\">\n 13/08/1980\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <a class=\"govuk-link\" href=\"#\">\n Change<span class=\"govuk-visually-hidden\"> date of birth</span>\n </a>\n \n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Contact information\n </dt>\n <dd class=\"govuk-summary-list__value\">\n <p class=\"govuk-body\">\n email@email.com\n </p>\n <p class=\"govuk-body\">\n Address line 1<br>\n Address line 2<br>\n Address line 3<br>\n Address line 4<br>\n Address line 5\n </p>\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <ul class=\"govuk-summary-list__actions-list\">\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Edit<span class=\"govuk-visually-hidden\"> contact information</span>\n </a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Change<span class=\"govuk-visually-hidden\"> contact information</span>\n </a>\n </li>\n \n </ul>\n \n </dd>\n \n </div>\n \n \n</dl>"
104
+ "html": "<dl class=\"govuk-summary-list\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Name\n </dt>\n <dd class=\"govuk-summary-list__value\">\n Firstname Lastname\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <ul class=\"govuk-summary-list__actions-list\">\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Edit<span class=\"govuk-visually-hidden\"> name</span>\n </a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Delete<span class=\"govuk-visually-hidden\"> name</span>\n </a>\n </li>\n \n </ul>\n \n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Date of birth\n </dt>\n <dd class=\"govuk-summary-list__value\">\n 13/08/1980\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <a class=\"govuk-link\" href=\"#\">\n Change<span class=\"govuk-visually-hidden\"> date of birth</span>\n </a>\n \n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Contact information\n </dt>\n <dd class=\"govuk-summary-list__value\">\n <p class=\"govuk-body\">\n email@email.com\n </p>\n <p class=\"govuk-body\">\n Address line 1<br>\n Address line 2<br>\n Address line 3<br>\n Address line 4<br>\n Address line 5\n </p>\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <ul class=\"govuk-summary-list__actions-list\">\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Edit<span class=\"govuk-visually-hidden\"> contact information</span>\n </a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Change<span class=\"govuk-visually-hidden\"> contact information</span>\n </a>\n </li>\n \n </ul>\n \n </dd>\n \n </div>\n \n \n</dl>",
105
+ "hidden": false
104
106
  },
105
107
  {
106
108
  "name": "with some actions",
@@ -146,7 +148,8 @@
146
148
  }
147
149
  ]
148
150
  },
149
- "html": "<dl class=\"govuk-summary-list\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Name\n </dt>\n <dd class=\"govuk-summary-list__value\">\n Firstname Lastname\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <ul class=\"govuk-summary-list__actions-list\">\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Edit<span class=\"govuk-visually-hidden\"> name</span>\n </a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Delete<span class=\"govuk-visually-hidden\"> name</span>\n </a>\n </li>\n \n </ul>\n \n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Date of birth\n </dt>\n <dd class=\"govuk-summary-list__value\">\n 13/08/1980\n </dd>\n \n \n <span class=\"govuk-summary-list__actions\"></span>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Contact information\n </dt>\n <dd class=\"govuk-summary-list__value\">\n <p class=\"govuk-body\">\n email@email.com\n </p>\n <p class=\"govuk-body\">\n Address line 1<br>\n Address line 2<br>\n Address line 3<br>\n Address line 4<br>\n Address line 5\n </p>\n </dd>\n \n \n <span class=\"govuk-summary-list__actions\"></span>\n \n </div>\n \n \n</dl>"
151
+ "html": "<dl class=\"govuk-summary-list\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Name\n </dt>\n <dd class=\"govuk-summary-list__value\">\n Firstname Lastname\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <ul class=\"govuk-summary-list__actions-list\">\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Edit<span class=\"govuk-visually-hidden\"> name</span>\n </a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Delete<span class=\"govuk-visually-hidden\"> name</span>\n </a>\n </li>\n \n </ul>\n \n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Date of birth\n </dt>\n <dd class=\"govuk-summary-list__value\">\n 13/08/1980\n </dd>\n \n \n <span class=\"govuk-summary-list__actions\"></span>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Contact information\n </dt>\n <dd class=\"govuk-summary-list__value\">\n <p class=\"govuk-body\">\n email@email.com\n </p>\n <p class=\"govuk-body\">\n Address line 1<br>\n Address line 2<br>\n Address line 3<br>\n Address line 4<br>\n Address line 5\n </p>\n </dd>\n \n \n <span class=\"govuk-summary-list__actions\"></span>\n \n </div>\n \n \n</dl>",
152
+ "hidden": false
150
153
  },
151
154
  {
152
155
  "name": "no-border",
@@ -179,7 +182,8 @@
179
182
  }
180
183
  ]
181
184
  },
182
- "html": "<dl class=\"govuk-summary-list govuk-summary-list--no-border\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Name\n </dt>\n <dd class=\"govuk-summary-list__value\">\n Firstname Lastname\n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Date of birth\n </dt>\n <dd class=\"govuk-summary-list__value\">\n 13/08/1980\n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Contact information\n </dt>\n <dd class=\"govuk-summary-list__value\">\n <p class=\"govuk-body\">\n email@email.com\n </p>\n <p class=\"govuk-body\">\n Address line 1<br>\n Address line 2<br>\n Address line 3<br>\n Address line 4<br>\n Address line 5\n </p>\n </dd>\n \n </div>\n \n \n</dl>"
185
+ "html": "<dl class=\"govuk-summary-list govuk-summary-list--no-border\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Name\n </dt>\n <dd class=\"govuk-summary-list__value\">\n Firstname Lastname\n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Date of birth\n </dt>\n <dd class=\"govuk-summary-list__value\">\n 13/08/1980\n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Contact information\n </dt>\n <dd class=\"govuk-summary-list__value\">\n <p class=\"govuk-body\">\n email@email.com\n </p>\n <p class=\"govuk-body\">\n Address line 1<br>\n Address line 2<br>\n Address line 3<br>\n Address line 4<br>\n Address line 5\n </p>\n </dd>\n \n </div>\n \n \n</dl>",
186
+ "hidden": false
183
187
  },
184
188
  {
185
189
  "name": "no-border on last row",
@@ -212,7 +216,8 @@
212
216
  }
213
217
  ]
214
218
  },
215
- "html": "<dl class=\"govuk-summary-list\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Name\n </dt>\n <dd class=\"govuk-summary-list__value\">\n Firstname Lastname\n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Date of birth\n </dt>\n <dd class=\"govuk-summary-list__value\">\n 13/08/1980\n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row govuk-summary-list__row--no-border\">\n <dt class=\"govuk-summary-list__key\">\n Contact information\n </dt>\n <dd class=\"govuk-summary-list__value\">\n <p class=\"govuk-body\">\n email@email.com\n </p>\n <p class=\"govuk-body\">\n Address line 1<br>\n Address line 2<br>\n Address line 3<br>\n Address line 4<br>\n Address line 5\n </p>\n </dd>\n \n </div>\n \n \n</dl>"
219
+ "html": "<dl class=\"govuk-summary-list\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Name\n </dt>\n <dd class=\"govuk-summary-list__value\">\n Firstname Lastname\n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Date of birth\n </dt>\n <dd class=\"govuk-summary-list__value\">\n 13/08/1980\n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row govuk-summary-list__row--no-border\">\n <dt class=\"govuk-summary-list__key\">\n Contact information\n </dt>\n <dd class=\"govuk-summary-list__value\">\n <p class=\"govuk-body\">\n email@email.com\n </p>\n <p class=\"govuk-body\">\n Address line 1<br>\n Address line 2<br>\n Address line 3<br>\n Address line 4<br>\n Address line 5\n </p>\n </dd>\n \n </div>\n \n \n</dl>",
220
+ "hidden": false
216
221
  },
217
222
  {
218
223
  "name": "overridden-widths",
@@ -284,7 +289,8 @@
284
289
  }
285
290
  ]
286
291
  },
287
- "html": "<dl class=\"govuk-summary-list\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key govuk-!-width-one-half\">\n Name\n </dt>\n <dd class=\"govuk-summary-list__value govuk-!-width-one-quarter\">\n Firstname Lastname\n </dd>\n \n <dd class=\"govuk-summary-list__actions govuk-!-width-one-half\">\n \n <ul class=\"govuk-summary-list__actions-list\">\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Edit<span class=\"govuk-visually-hidden\"> name</span>\n </a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Delete<span class=\"govuk-visually-hidden\"> name</span>\n </a>\n </li>\n \n </ul>\n \n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Date of birth\n </dt>\n <dd class=\"govuk-summary-list__value\">\n 13/08/1980\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <a class=\"govuk-link\" href=\"#\">\n Change<span class=\"govuk-visually-hidden\"> date of birth</span>\n </a>\n \n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Contact information\n </dt>\n <dd class=\"govuk-summary-list__value\">\n <p class=\"govuk-body\">\n email@email.com\n </p>\n <p class=\"govuk-body\">\n Address line 1<br>\n Address line 2<br>\n Address line 3<br>\n Address line 4<br>\n Address line 5\n </p>\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <ul class=\"govuk-summary-list__actions-list\">\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Edit<span class=\"govuk-visually-hidden\"> contact information</span>\n </a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Change<span class=\"govuk-visually-hidden\"> contact information</span>\n </a>\n </li>\n \n </ul>\n \n </dd>\n \n </div>\n \n \n</dl>"
292
+ "html": "<dl class=\"govuk-summary-list\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key govuk-!-width-one-half\">\n Name\n </dt>\n <dd class=\"govuk-summary-list__value govuk-!-width-one-quarter\">\n Firstname Lastname\n </dd>\n \n <dd class=\"govuk-summary-list__actions govuk-!-width-one-half\">\n \n <ul class=\"govuk-summary-list__actions-list\">\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Edit<span class=\"govuk-visually-hidden\"> name</span>\n </a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Delete<span class=\"govuk-visually-hidden\"> name</span>\n </a>\n </li>\n \n </ul>\n \n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Date of birth\n </dt>\n <dd class=\"govuk-summary-list__value\">\n 13/08/1980\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <a class=\"govuk-link\" href=\"#\">\n Change<span class=\"govuk-visually-hidden\"> date of birth</span>\n </a>\n \n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Contact information\n </dt>\n <dd class=\"govuk-summary-list__value\">\n <p class=\"govuk-body\">\n email@email.com\n </p>\n <p class=\"govuk-body\">\n Address line 1<br>\n Address line 2<br>\n Address line 3<br>\n Address line 4<br>\n Address line 5\n </p>\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <ul class=\"govuk-summary-list__actions-list\">\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Edit<span class=\"govuk-visually-hidden\"> contact information</span>\n </a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Change<span class=\"govuk-visually-hidden\"> contact information</span>\n </a>\n </li>\n \n </ul>\n \n </dd>\n \n </div>\n \n \n</dl>",
293
+ "hidden": false
288
294
  },
289
295
  {
290
296
  "name": "check-your-answers",
@@ -428,7 +434,8 @@
428
434
  }
429
435
  ]
430
436
  },
431
- "html": "<dl class=\"govuk-summary-list\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Name\n </dt>\n <dd class=\"govuk-summary-list__value\">\n Sarah Philips\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <a class=\"govuk-link\" href=\"#\">\n Change<span class=\"govuk-visually-hidden\"> name</span>\n </a>\n \n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Date of birth\n </dt>\n <dd class=\"govuk-summary-list__value\">\n 5 January 1978\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <a class=\"govuk-link\" href=\"#\">\n Change<span class=\"govuk-visually-hidden\"> date of birth</span>\n </a>\n \n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Address\n </dt>\n <dd class=\"govuk-summary-list__value\">\n 72 Guild Street<br>\n London<br>\n SE23 6FH\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <a class=\"govuk-link\" href=\"#\">\n Change<span class=\"govuk-visually-hidden\"> address</span>\n </a>\n \n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Contact details\n </dt>\n <dd class=\"govuk-summary-list__value\">\n 07700 900457<br>\n sarah.phillips@example.com\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <a class=\"govuk-link\" href=\"#\">\n Change<span class=\"govuk-visually-hidden\"> contact details</span>\n </a>\n \n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Previous application number\n </dt>\n <dd class=\"govuk-summary-list__value\">\n 502135326\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <a class=\"govuk-link\" href=\"#\">\n Change<span class=\"govuk-visually-hidden\"> previous application number</span>\n </a>\n \n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Licence type\n </dt>\n <dd class=\"govuk-summary-list__value\">\n For personal use\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <a class=\"govuk-link\" href=\"#\">\n Change<span class=\"govuk-visually-hidden\"> licence type</span>\n </a>\n \n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Home address\n </dt>\n <dd class=\"govuk-summary-list__value\">\n <p class=\"govuk-body\">\n 72 Guild Street<br>\n London<br>\n SE23 6FH\n </p>\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <a class=\"govuk-link\" href=\"#\">\n Change<span class=\"govuk-visually-hidden\"> home address</span>\n </a>\n \n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Licence period\n </dt>\n <dd class=\"govuk-summary-list__value\">\n <p class=\"govuk-body\">This is a longer paragraph of text provided by the user to provide additional information.</p>\n <p class=\"govuk-body\">This is a second paragraph of text provided by the user.</p>\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <a class=\"govuk-link\" href=\"#\">\n Change<span class=\"govuk-visually-hidden\"> licence period</span>\n </a>\n \n </dd>\n \n </div>\n \n \n</dl>"
437
+ "html": "<dl class=\"govuk-summary-list\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Name\n </dt>\n <dd class=\"govuk-summary-list__value\">\n Sarah Philips\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <a class=\"govuk-link\" href=\"#\">\n Change<span class=\"govuk-visually-hidden\"> name</span>\n </a>\n \n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Date of birth\n </dt>\n <dd class=\"govuk-summary-list__value\">\n 5 January 1978\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <a class=\"govuk-link\" href=\"#\">\n Change<span class=\"govuk-visually-hidden\"> date of birth</span>\n </a>\n \n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Address\n </dt>\n <dd class=\"govuk-summary-list__value\">\n 72 Guild Street<br>\n London<br>\n SE23 6FH\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <a class=\"govuk-link\" href=\"#\">\n Change<span class=\"govuk-visually-hidden\"> address</span>\n </a>\n \n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Contact details\n </dt>\n <dd class=\"govuk-summary-list__value\">\n 07700 900457<br>\n sarah.phillips@example.com\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <a class=\"govuk-link\" href=\"#\">\n Change<span class=\"govuk-visually-hidden\"> contact details</span>\n </a>\n \n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Previous application number\n </dt>\n <dd class=\"govuk-summary-list__value\">\n 502135326\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <a class=\"govuk-link\" href=\"#\">\n Change<span class=\"govuk-visually-hidden\"> previous application number</span>\n </a>\n \n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Licence type\n </dt>\n <dd class=\"govuk-summary-list__value\">\n For personal use\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <a class=\"govuk-link\" href=\"#\">\n Change<span class=\"govuk-visually-hidden\"> licence type</span>\n </a>\n \n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Home address\n </dt>\n <dd class=\"govuk-summary-list__value\">\n <p class=\"govuk-body\">\n 72 Guild Street<br>\n London<br>\n SE23 6FH\n </p>\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <a class=\"govuk-link\" href=\"#\">\n Change<span class=\"govuk-visually-hidden\"> home address</span>\n </a>\n \n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Licence period\n </dt>\n <dd class=\"govuk-summary-list__value\">\n <p class=\"govuk-body\">This is a longer paragraph of text provided by the user to provide additional information.</p>\n <p class=\"govuk-body\">This is a second paragraph of text provided by the user.</p>\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <a class=\"govuk-link\" href=\"#\">\n Change<span class=\"govuk-visually-hidden\"> licence period</span>\n </a>\n \n </dd>\n \n </div>\n \n \n</dl>",
438
+ "hidden": false
432
439
  },
433
440
  {
434
441
  "name": "extreme",
@@ -775,17 +782,29 @@
775
782
  }
776
783
  ]
777
784
  },
778
- "html": "<dl class=\"govuk-summary-list\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Name\n </dt>\n <dd class=\"govuk-summary-list__value\">\n Barnaby Marmaduke Aloysius Benjy Cobweb Dartagnan Egbert Felix Gaspar Humbert Ignatius Jayden Kasper Leroy Maximilian Neddy Obiajulu Pepin Quilliam Rosencrantz Sexton Teddy Upwood Vivatma Wayland Xylon Yardley Zachary Usansky\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <ul class=\"govuk-summary-list__actions-list\">\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Buy</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Use</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Break</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Fix</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Trash</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Change</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Mail</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Upgrade</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Charge</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Point</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Coom</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Press</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Snap</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Work</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Quick</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Erase</a>\n </li>\n \n </ul>\n \n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Long website address\n </dt>\n <dd class=\"govuk-summary-list__value\">\n <a class=\"govuk-link\" href=\"https://cs.wikipedia.org/wiki/Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch\">https://cs.wikipedia.org/wiki/Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch</a>\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <a class=\"govuk-link\" href=\"#\">\n Change<span class=\"govuk-visually-hidden\"> long website address</span>\n </a>\n \n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Long email address\n </dt>\n <dd class=\"govuk-summary-list__value\">\n <a class=\"govuk-link\" href=\"mailto:webmaster@llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.com\">webmaster@llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.com</a>\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <a class=\"govuk-link\" href=\"#\">\n Change<span class=\"govuk-visually-hidden\"> long email address</span>\n </a>\n \n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n No wrapping allowed\n </dt>\n <dd class=\"govuk-summary-list__value\">\n <p class=\"govuk-body\" style=\"white-space: nowrap;\">michelle.longish.name@example.com</p>\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <a class=\"govuk-link\" href=\"#\">\n Change<span class=\"govuk-visually-hidden\"> no wrapping allowed</span>\n </a>\n \n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Pneumonoultramicroscopicsilicovolcanoconiosis\n </dt>\n <dd class=\"govuk-summary-list__value\">\n <p class=\"govuk-body\">Pneumonoultramicroscopicsilicovolcanoconiosis is a word coined by the president of the National Puzzlers’ League as a synonym for the disease known as silicosis. It is the longest word in the English language published in a dictionary, the Oxford English Dictionary, which defines it as \"an artificial long word said to mean a lung disease caused by inhaling very fine ash and sand dust.\"</p>\n <p class=\"govuk-body\">Silicosis is a form of occupational lung disease caused by inhalation of crystalline silica dust, and is marked by inflammation and scarring in the form of nodular lesions in the upper lobes of the lungs. It is a type of pneumoconiosis.</p>\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <ul class=\"govuk-summary-list__actions-list\">\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Write</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Cut</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Paste</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Save</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Load</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Check</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Quick</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Rewrite</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Plug</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Play</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Burn</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Rip</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Drag and drop</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Zip</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Unzip</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Lock</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Fill</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Curl</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Find</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n View</a>\n </li>\n \n </ul>\n \n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Its vanished trees, the trees that had made way for Gatsby’s house, Pneumonoultramicroscopicsilicovolcanoconiosis had once pandered in whispers to the last and greatest of all human dreams; for a transitory enchanted moment man must have held his breath in the presence of this continent, compelled into an aesthetic contemplation he neither understood nor desired, face to face for the last time in history with something commensurate to his capacity for wonder.\n </dt>\n <dd class=\"govuk-summary-list__value\">\n The Great Gatsby\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <ul class=\"govuk-summary-list__actions-list\">\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Code</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Jam</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Unlock</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Surf</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Scroll</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Pose</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Click</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Cross</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Crack</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Twitch</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Update</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Name</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Read</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Tune</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Print</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Scan</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Send</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Fax</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Rename</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Touch</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Bring</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Pay</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Watch</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Turn</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Leave</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Stop</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Format</a>\n </li>\n \n </ul>\n \n </dd>\n \n </div>\n \n \n</dl>"
785
+ "html": "<dl class=\"govuk-summary-list\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Name\n </dt>\n <dd class=\"govuk-summary-list__value\">\n Barnaby Marmaduke Aloysius Benjy Cobweb Dartagnan Egbert Felix Gaspar Humbert Ignatius Jayden Kasper Leroy Maximilian Neddy Obiajulu Pepin Quilliam Rosencrantz Sexton Teddy Upwood Vivatma Wayland Xylon Yardley Zachary Usansky\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <ul class=\"govuk-summary-list__actions-list\">\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Buy</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Use</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Break</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Fix</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Trash</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Change</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Mail</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Upgrade</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Charge</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Point</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Coom</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Press</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Snap</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Work</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Quick</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Erase</a>\n </li>\n \n </ul>\n \n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Long website address\n </dt>\n <dd class=\"govuk-summary-list__value\">\n <a class=\"govuk-link\" href=\"https://cs.wikipedia.org/wiki/Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch\">https://cs.wikipedia.org/wiki/Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch</a>\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <a class=\"govuk-link\" href=\"#\">\n Change<span class=\"govuk-visually-hidden\"> long website address</span>\n </a>\n \n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Long email address\n </dt>\n <dd class=\"govuk-summary-list__value\">\n <a class=\"govuk-link\" href=\"mailto:webmaster@llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.com\">webmaster@llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.com</a>\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <a class=\"govuk-link\" href=\"#\">\n Change<span class=\"govuk-visually-hidden\"> long email address</span>\n </a>\n \n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n No wrapping allowed\n </dt>\n <dd class=\"govuk-summary-list__value\">\n <p class=\"govuk-body\" style=\"white-space: nowrap;\">michelle.longish.name@example.com</p>\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <a class=\"govuk-link\" href=\"#\">\n Change<span class=\"govuk-visually-hidden\"> no wrapping allowed</span>\n </a>\n \n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Pneumonoultramicroscopicsilicovolcanoconiosis\n </dt>\n <dd class=\"govuk-summary-list__value\">\n <p class=\"govuk-body\">Pneumonoultramicroscopicsilicovolcanoconiosis is a word coined by the president of the National Puzzlers’ League as a synonym for the disease known as silicosis. It is the longest word in the English language published in a dictionary, the Oxford English Dictionary, which defines it as \"an artificial long word said to mean a lung disease caused by inhaling very fine ash and sand dust.\"</p>\n <p class=\"govuk-body\">Silicosis is a form of occupational lung disease caused by inhalation of crystalline silica dust, and is marked by inflammation and scarring in the form of nodular lesions in the upper lobes of the lungs. It is a type of pneumoconiosis.</p>\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <ul class=\"govuk-summary-list__actions-list\">\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Write</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Cut</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Paste</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Save</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Load</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Check</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Quick</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Rewrite</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Plug</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Play</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Burn</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Rip</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Drag and drop</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Zip</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Unzip</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Lock</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Fill</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Curl</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Find</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n View</a>\n </li>\n \n </ul>\n \n </dd>\n \n </div>\n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Its vanished trees, the trees that had made way for Gatsby’s house, Pneumonoultramicroscopicsilicovolcanoconiosis had once pandered in whispers to the last and greatest of all human dreams; for a transitory enchanted moment man must have held his breath in the presence of this continent, compelled into an aesthetic contemplation he neither understood nor desired, face to face for the last time in history with something commensurate to his capacity for wonder.\n </dt>\n <dd class=\"govuk-summary-list__value\">\n The Great Gatsby\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <ul class=\"govuk-summary-list__actions-list\">\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Code</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Jam</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Unlock</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Surf</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Scroll</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Pose</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Click</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Cross</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Crack</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Twitch</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Update</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Name</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Read</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Tune</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Print</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Scan</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Send</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Fax</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Rename</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Touch</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Bring</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Pay</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Watch</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Turn</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Leave</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Stop</a>\n </li>\n \n <li class=\"govuk-summary-list__actions-list-item\">\n <a class=\"govuk-link\" href=\"#\">\n Format</a>\n </li>\n \n </ul>\n \n </dd>\n \n </div>\n \n \n</dl>",
786
+ "hidden": false
779
787
  },
780
788
  {
781
789
  "name": "attributes",
782
790
  "options": {
791
+ "rows": [
792
+ {
793
+ "key": {
794
+ "text": "Name"
795
+ },
796
+ "value": {
797
+ "text": "Firstname Lastname"
798
+ }
799
+ }
800
+ ],
783
801
  "attributes": {
784
802
  "data-attribute-1": "value-1",
785
803
  "data-attribute-2": "value-2"
786
804
  }
787
805
  },
788
- "html": "<dl class=\"govuk-summary-list\" data-attribute-1=\"value-1\" data-attribute-2=\"value-2\">\n \n</dl>"
806
+ "html": "<dl class=\"govuk-summary-list\" data-attribute-1=\"value-1\" data-attribute-2=\"value-2\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Name\n </dt>\n <dd class=\"govuk-summary-list__value\">\n Firstname Lastname\n </dd>\n \n </div>\n \n \n</dl>",
807
+ "hidden": true
789
808
  },
790
809
  {
791
810
  "name": "with falsey values",
@@ -794,6 +813,9 @@
794
813
  {
795
814
  "key": {
796
815
  "text": "Name"
816
+ },
817
+ "value": {
818
+ "text": "Firstname Lastname"
797
819
  }
798
820
  },
799
821
  null,
@@ -802,11 +824,15 @@
802
824
  {
803
825
  "key": {
804
826
  "text": "Name 2"
827
+ },
828
+ "value": {
829
+ "text": "Firstname2 Lastname2"
805
830
  }
806
831
  }
807
832
  ]
808
833
  },
809
- "html": "<dl class=\"govuk-summary-list\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Name\n </dt>\n <dd class=\"govuk-summary-list__value\">\n \n </dd>\n \n </div>\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Name 2\n </dt>\n <dd class=\"govuk-summary-list__value\">\n \n </dd>\n \n </div>\n \n \n</dl>"
834
+ "html": "<dl class=\"govuk-summary-list\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Name\n </dt>\n <dd class=\"govuk-summary-list__value\">\n Firstname Lastname\n </dd>\n \n </div>\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Name 2\n </dt>\n <dd class=\"govuk-summary-list__value\">\n Firstname2 Lastname2\n </dd>\n \n </div>\n \n \n</dl>",
835
+ "hidden": true
810
836
  },
811
837
  {
812
838
  "name": "key with html",
@@ -815,11 +841,15 @@
815
841
  {
816
842
  "key": {
817
843
  "html": "<b>Name</b>"
844
+ },
845
+ "value": {
846
+ "html": "<strong>Firstname Lastname</strong>"
818
847
  }
819
848
  }
820
849
  ]
821
850
  },
822
- "html": "<dl class=\"govuk-summary-list\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n <b>Name</b>\n </dt>\n <dd class=\"govuk-summary-list__value\">\n \n </dd>\n \n </div>\n \n \n</dl>"
851
+ "html": "<dl class=\"govuk-summary-list\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n <b>Name</b>\n </dt>\n <dd class=\"govuk-summary-list__value\">\n <strong>Firstname Lastname</strong>\n </dd>\n \n </div>\n \n \n</dl>",
852
+ "hidden": true
823
853
  },
824
854
  {
825
855
  "name": "key with classes",
@@ -829,83 +859,120 @@
829
859
  "key": {
830
860
  "text": "Name",
831
861
  "classes": "app-custom-class"
862
+ },
863
+ "value": {
864
+ "text": "Firstname Lastname"
832
865
  }
833
866
  }
834
867
  ]
835
868
  },
836
- "html": "<dl class=\"govuk-summary-list\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key app-custom-class\">\n Name\n </dt>\n <dd class=\"govuk-summary-list__value\">\n \n </dd>\n \n </div>\n \n \n</dl>"
869
+ "html": "<dl class=\"govuk-summary-list\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key app-custom-class\">\n Name\n </dt>\n <dd class=\"govuk-summary-list__value\">\n Firstname Lastname\n </dd>\n \n </div>\n \n \n</dl>",
870
+ "hidden": true
837
871
  },
838
872
  {
839
873
  "name": "value with html",
840
874
  "options": {
841
875
  "rows": [
842
876
  {
843
- "key": null,
877
+ "key": {
878
+ "text": "Name"
879
+ },
844
880
  "value": {
845
881
  "html": "<span>email@email.com</span>"
846
882
  }
847
883
  }
848
884
  ]
849
885
  },
850
- "html": "<dl class=\"govuk-summary-list\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n \n </dt>\n <dd class=\"govuk-summary-list__value\">\n <span>email@email.com</span>\n </dd>\n \n </div>\n \n \n</dl>"
886
+ "html": "<dl class=\"govuk-summary-list\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Name\n </dt>\n <dd class=\"govuk-summary-list__value\">\n <span>email@email.com</span>\n </dd>\n \n </div>\n \n \n</dl>",
887
+ "hidden": true
851
888
  },
852
889
  {
853
890
  "name": "actions href",
854
891
  "options": {
855
892
  "rows": [
856
893
  {
894
+ "key": {
895
+ "text": "Name"
896
+ },
897
+ "value": {
898
+ "text": "Firstname Lastname"
899
+ },
857
900
  "actions": {
858
901
  "items": [
859
902
  {
860
- "href": "https://www.gov.uk"
903
+ "href": "https://www.gov.uk",
904
+ "text": "Go to GOV.UK"
861
905
  }
862
906
  ]
863
907
  }
864
908
  }
865
909
  ]
866
910
  },
867
- "html": "<dl class=\"govuk-summary-list\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n \n </dt>\n <dd class=\"govuk-summary-list__value\">\n \n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <a class=\"govuk-link\" href=\"https://www.gov.uk\">\n </a>\n \n </dd>\n \n </div>\n \n \n</dl>"
911
+ "html": "<dl class=\"govuk-summary-list\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Name\n </dt>\n <dd class=\"govuk-summary-list__value\">\n Firstname Lastname\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <a class=\"govuk-link\" href=\"https://www.gov.uk\">\n Go to GOV.UK</a>\n \n </dd>\n \n </div>\n \n \n</dl>",
912
+ "hidden": true
868
913
  },
869
914
  {
870
915
  "name": "actions with html",
871
916
  "options": {
872
917
  "rows": [
873
918
  {
919
+ "key": {
920
+ "text": "Name"
921
+ },
922
+ "value": {
923
+ "text": "Firstname Lastname"
924
+ },
874
925
  "actions": {
875
926
  "items": [
876
927
  {
877
- "html": "Edit<span class=\"visually-hidden\"> name</span>"
928
+ "html": "Edit<span class=\"visually-hidden\"> name</span>",
929
+ "href": "#"
878
930
  }
879
931
  ]
880
932
  }
881
933
  }
882
934
  ]
883
935
  },
884
- "html": "<dl class=\"govuk-summary-list\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n \n </dt>\n <dd class=\"govuk-summary-list__value\">\n \n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <a class=\"govuk-link\" href=\"\">\n Edit<span class=\"visually-hidden\"> name</span></a>\n \n </dd>\n \n </div>\n \n \n</dl>"
936
+ "html": "<dl class=\"govuk-summary-list\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Name\n </dt>\n <dd class=\"govuk-summary-list__value\">\n Firstname Lastname\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <a class=\"govuk-link\" href=\"#\">\n Edit<span class=\"visually-hidden\"> name</span></a>\n \n </dd>\n \n </div>\n \n \n</dl>",
937
+ "hidden": true
885
938
  },
886
939
  {
887
940
  "name": "actions with classes",
888
941
  "options": {
889
942
  "rows": [
890
943
  {
944
+ "key": {
945
+ "text": "Name"
946
+ },
947
+ "value": {
948
+ "text": "Firstname Lastname"
949
+ },
891
950
  "actions": {
892
951
  "classes": "app-custom-class",
893
952
  "items": [
894
953
  {
895
- "text": "Edit"
954
+ "text": "Edit",
955
+ "href": "/edit"
896
956
  }
897
957
  ]
898
958
  }
899
959
  }
900
960
  ]
901
961
  },
902
- "html": "<dl class=\"govuk-summary-list\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n \n </dt>\n <dd class=\"govuk-summary-list__value\">\n \n </dd>\n \n <dd class=\"govuk-summary-list__actions app-custom-class\">\n \n <a class=\"govuk-link\" href=\"\">\n Edit</a>\n \n </dd>\n \n </div>\n \n \n</dl>"
962
+ "html": "<dl class=\"govuk-summary-list\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Name\n </dt>\n <dd class=\"govuk-summary-list__value\">\n Firstname Lastname\n </dd>\n \n <dd class=\"govuk-summary-list__actions app-custom-class\">\n \n <a class=\"govuk-link\" href=\"/edit\">\n Edit</a>\n \n </dd>\n \n </div>\n \n \n</dl>",
963
+ "hidden": true
903
964
  },
904
965
  {
905
966
  "name": "actions with attributes",
906
967
  "options": {
907
968
  "rows": [
908
969
  {
970
+ "key": {
971
+ "text": "Name"
972
+ },
973
+ "value": {
974
+ "text": "Firstname Lastname"
975
+ },
909
976
  "actions": {
910
977
  "items": [
911
978
  {
@@ -921,13 +988,20 @@
921
988
  }
922
989
  ]
923
990
  },
924
- "html": "<dl class=\"govuk-summary-list\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n \n </dt>\n <dd class=\"govuk-summary-list__value\">\n \n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <a class=\"govuk-link\" href=\"#\" data-test-attribute=\"value\" data-test-attribute-2=\"value-2\">\n Edit</a>\n \n </dd>\n \n </div>\n \n \n</dl>"
991
+ "html": "<dl class=\"govuk-summary-list\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Name\n </dt>\n <dd class=\"govuk-summary-list__value\">\n Firstname Lastname\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <a class=\"govuk-link\" href=\"#\" data-test-attribute=\"value\" data-test-attribute-2=\"value-2\">\n Edit</a>\n \n </dd>\n \n </div>\n \n \n</dl>",
992
+ "hidden": true
925
993
  },
926
994
  {
927
995
  "name": "single action with anchor",
928
996
  "options": {
929
997
  "rows": [
930
998
  {
999
+ "key": {
1000
+ "text": "Name"
1001
+ },
1002
+ "value": {
1003
+ "text": "Firstname Lastname"
1004
+ },
931
1005
  "actions": {
932
1006
  "items": [
933
1007
  {
@@ -939,13 +1013,20 @@
939
1013
  }
940
1014
  ]
941
1015
  },
942
- "html": "<dl class=\"govuk-summary-list\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n \n </dt>\n <dd class=\"govuk-summary-list__value\">\n \n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <a class=\"govuk-link\" href=\"#\">\n First action</a>\n \n </dd>\n \n </div>\n \n \n</dl>"
1016
+ "html": "<dl class=\"govuk-summary-list\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Name\n </dt>\n <dd class=\"govuk-summary-list__value\">\n Firstname Lastname\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <a class=\"govuk-link\" href=\"#\">\n First action</a>\n \n </dd>\n \n </div>\n \n \n</dl>",
1017
+ "hidden": true
943
1018
  },
944
1019
  {
945
1020
  "name": "classes on items",
946
1021
  "options": {
947
1022
  "rows": [
948
1023
  {
1024
+ "key": {
1025
+ "text": "Name"
1026
+ },
1027
+ "value": {
1028
+ "text": "Firstname Lastname"
1029
+ },
949
1030
  "actions": {
950
1031
  "items": [
951
1032
  {
@@ -958,20 +1039,28 @@
958
1039
  }
959
1040
  ]
960
1041
  },
961
- "html": "<dl class=\"govuk-summary-list\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n \n </dt>\n <dd class=\"govuk-summary-list__value\">\n \n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <a class=\"govuk-link govuk-link--no-visited-state\" href=\"#\">\n Edit</a>\n \n </dd>\n \n </div>\n \n \n</dl>"
1042
+ "html": "<dl class=\"govuk-summary-list\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Name\n </dt>\n <dd class=\"govuk-summary-list__value\">\n Firstname Lastname\n </dd>\n \n <dd class=\"govuk-summary-list__actions\">\n \n <a class=\"govuk-link govuk-link--no-visited-state\" href=\"#\">\n Edit</a>\n \n </dd>\n \n </div>\n \n \n</dl>",
1043
+ "hidden": true
962
1044
  },
963
1045
  {
964
1046
  "name": "empty items array",
965
1047
  "options": {
966
1048
  "rows": [
967
1049
  {
1050
+ "key": {
1051
+ "text": "Name"
1052
+ },
1053
+ "value": {
1054
+ "text": "Firstname Lastname"
1055
+ },
968
1056
  "actions": {
969
1057
  "items": []
970
1058
  }
971
1059
  }
972
1060
  ]
973
1061
  },
974
- "html": "<dl class=\"govuk-summary-list\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n \n </dt>\n <dd class=\"govuk-summary-list__value\">\n \n </dd>\n \n </div>\n \n \n</dl>"
1062
+ "html": "<dl class=\"govuk-summary-list\">\n \n \n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Name\n </dt>\n <dd class=\"govuk-summary-list__value\">\n Firstname Lastname\n </dd>\n \n </div>\n \n \n</dl>",
1063
+ "hidden": true
975
1064
  },
976
1065
  {
977
1066
  "name": "rows with classes",
@@ -981,11 +1070,15 @@
981
1070
  "key": {
982
1071
  "text": "Name"
983
1072
  },
1073
+ "value": {
1074
+ "text": "Firstname Lastname"
1075
+ },
984
1076
  "classes": "app-custom-class"
985
1077
  }
986
1078
  ]
987
1079
  },
988
- "html": "<dl class=\"govuk-summary-list\">\n \n \n <div class=\"govuk-summary-list__row app-custom-class\">\n <dt class=\"govuk-summary-list__key\">\n Name\n </dt>\n <dd class=\"govuk-summary-list__value\">\n \n </dd>\n \n </div>\n \n \n</dl>"
1080
+ "html": "<dl class=\"govuk-summary-list\">\n \n \n <div class=\"govuk-summary-list__row app-custom-class\">\n <dt class=\"govuk-summary-list__key\">\n Name\n </dt>\n <dd class=\"govuk-summary-list__value\">\n Firstname Lastname\n </dd>\n \n </div>\n \n \n</dl>",
1081
+ "hidden": true
989
1082
  }
990
1083
  ]
991
1084
  }