govuk_publishing_components 23.1.0 → 23.5.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/javascripts/govuk_publishing_components/analytics/init.js +56 -0
  3. data/app/assets/javascripts/govuk_publishing_components/components/copy-to-clipboard.js +16 -14
  4. data/app/assets/javascripts/govuk_publishing_components/components/details.js +38 -34
  5. data/app/assets/javascripts/govuk_publishing_components/components/print-link.js +8 -7
  6. data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js +9 -8
  7. data/app/assets/javascripts/govuk_publishing_components/lib/initial-focus.js +13 -0
  8. data/app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss +1 -0
  9. data/app/assets/stylesheets/govuk_publishing_components/components/_input.scss +0 -46
  10. data/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss +5 -0
  11. data/app/assets/stylesheets/govuk_publishing_components/components/print/_govspeak.scss +4 -0
  12. data/app/views/govuk_publishing_components/components/_input.html.erb +6 -6
  13. data/app/views/govuk_publishing_components/components/docs/govspeak.yml +14 -0
  14. data/lib/govuk_publishing_components/version.rb +1 -1
  15. data/node_modules/govuk-frontend/govuk/all.js +31 -37
  16. data/node_modules/govuk-frontend/govuk/components/accordion/README.md +1 -1
  17. data/node_modules/govuk-frontend/govuk/components/accordion/_index.scss +0 -1
  18. data/node_modules/govuk-frontend/govuk/components/accordion/fixtures.json +235 -0
  19. data/node_modules/govuk-frontend/govuk/components/back-link/_index.scss +0 -2
  20. data/node_modules/govuk-frontend/govuk/components/back-link/fixtures.json +56 -0
  21. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/_index.scss +0 -1
  22. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/fixtures.json +172 -0
  23. data/node_modules/govuk-frontend/govuk/components/button/_index.scss +3 -3
  24. data/node_modules/govuk-frontend/govuk/components/button/fixtures.json +275 -0
  25. data/node_modules/govuk-frontend/govuk/components/character-count/fixtures.json +170 -0
  26. data/node_modules/govuk-frontend/govuk/components/checkboxes/_index.scss +13 -13
  27. data/node_modules/govuk-frontend/govuk/components/checkboxes/fixtures.json +1015 -0
  28. data/node_modules/govuk-frontend/govuk/components/date-input/fixtures.json +499 -0
  29. data/node_modules/govuk-frontend/govuk/components/details/_index.scss +0 -1
  30. data/node_modules/govuk-frontend/govuk/components/details/fixtures.json +83 -0
  31. data/node_modules/govuk-frontend/govuk/components/error-message/fixtures.json +66 -0
  32. data/node_modules/govuk-frontend/govuk/components/error-summary/_index.scss +0 -2
  33. data/node_modules/govuk-frontend/govuk/components/error-summary/fixtures.json +181 -0
  34. data/node_modules/govuk-frontend/govuk/components/fieldset/_index.scss +1 -1
  35. data/node_modules/govuk-frontend/govuk/components/fieldset/fixtures.json +93 -0
  36. data/node_modules/govuk-frontend/govuk/components/fieldset/macro-options.json +6 -0
  37. data/node_modules/govuk-frontend/govuk/components/fieldset/template.njk +5 -1
  38. data/node_modules/govuk-frontend/govuk/components/file-upload/fixtures.json +151 -0
  39. data/node_modules/govuk-frontend/govuk/components/footer/_index.scss +0 -1
  40. data/node_modules/govuk-frontend/govuk/components/footer/fixtures.json +482 -0
  41. data/node_modules/govuk-frontend/govuk/components/header/_index.scss +2 -5
  42. data/node_modules/govuk-frontend/govuk/components/header/fixtures.json +360 -0
  43. data/node_modules/govuk-frontend/govuk/components/header/header.js +665 -316
  44. data/node_modules/govuk-frontend/govuk/components/header/macro-options.json +13 -1
  45. data/node_modules/govuk-frontend/govuk/components/header/template.njk +9 -5
  46. data/node_modules/govuk-frontend/govuk/components/hint/_index.scss +0 -2
  47. data/node_modules/govuk-frontend/govuk/components/hint/fixtures.json +50 -0
  48. data/node_modules/govuk-frontend/govuk/components/hint/macro-options.json +1 -1
  49. data/node_modules/govuk-frontend/govuk/components/input/_index.scss +91 -0
  50. data/node_modules/govuk-frontend/govuk/components/input/fixtures.json +538 -0
  51. data/node_modules/govuk-frontend/govuk/components/input/macro-options.json +64 -0
  52. data/node_modules/govuk-frontend/govuk/components/input/template.njk +17 -0
  53. data/node_modules/govuk-frontend/govuk/components/inset-text/fixtures.json +49 -0
  54. data/node_modules/govuk-frontend/govuk/components/label/fixtures.json +75 -0
  55. data/node_modules/govuk-frontend/govuk/components/panel/_index.scss +6 -2
  56. data/node_modules/govuk-frontend/govuk/components/panel/fixtures.json +74 -0
  57. data/node_modules/govuk-frontend/govuk/components/phase-banner/fixtures.json +65 -0
  58. data/node_modules/govuk-frontend/govuk/components/radios/_index.scss +13 -13
  59. data/node_modules/govuk-frontend/govuk/components/radios/fixtures.json +1066 -0
  60. data/node_modules/govuk-frontend/govuk/components/radios/macro-options.json +2 -2
  61. data/node_modules/govuk-frontend/govuk/components/select/_index.scss +0 -1
  62. data/node_modules/govuk-frontend/govuk/components/select/fixtures.json +248 -0
  63. data/node_modules/govuk-frontend/govuk/components/skip-link/fixtures.json +72 -0
  64. data/node_modules/govuk-frontend/govuk/components/summary-list/README.md +1 -1
  65. data/node_modules/govuk-frontend/govuk/components/summary-list/_index.scss +2 -10
  66. data/node_modules/govuk-frontend/govuk/components/summary-list/fixtures.json +991 -0
  67. data/node_modules/govuk-frontend/govuk/components/table/fixtures.json +468 -0
  68. data/node_modules/govuk-frontend/govuk/components/tabs/_index.scss +3 -6
  69. data/node_modules/govuk-frontend/govuk/components/tabs/fixtures.json +229 -0
  70. data/node_modules/govuk-frontend/govuk/components/tag/_index.scss +0 -1
  71. data/node_modules/govuk-frontend/govuk/components/tag/fixtures.json +117 -0
  72. data/node_modules/govuk-frontend/govuk/components/textarea/_index.scss +0 -1
  73. data/node_modules/govuk-frontend/govuk/components/textarea/fixtures.json +199 -0
  74. data/node_modules/govuk-frontend/govuk/components/warning-text/_index.scss +0 -1
  75. data/node_modules/govuk-frontend/govuk/components/warning-text/fixtures.json +68 -0
  76. data/node_modules/govuk-frontend/govuk/helpers/_device-pixels.scss +3 -3
  77. data/node_modules/govuk-frontend/govuk/helpers/_font-faces.scss +9 -11
  78. data/node_modules/govuk-frontend/govuk/helpers/_links.scss +1 -3
  79. data/node_modules/govuk-frontend/govuk/helpers/_media-queries.scss +1 -5
  80. data/node_modules/govuk-frontend/govuk/helpers/_spacing.scss +2 -1
  81. data/node_modules/govuk-frontend/govuk/helpers/_typography.scss +7 -6
  82. data/node_modules/govuk-frontend/govuk/objects/_form-group.scss +0 -1
  83. data/node_modules/govuk-frontend/govuk/objects/_grid.scss +2 -3
  84. data/node_modules/govuk-frontend/govuk/objects/_main-wrapper.scss +0 -1
  85. data/node_modules/govuk-frontend/govuk/overrides/_display.scss +1 -1
  86. data/node_modules/govuk-frontend/govuk/overrides/_width.scss +1 -0
  87. data/node_modules/govuk-frontend/govuk/settings/_colours-applied.scss +0 -3
  88. data/node_modules/govuk-frontend/govuk/settings/_colours-organisations.scss +3 -0
  89. data/node_modules/govuk-frontend/govuk/settings/_colours-palette.scss +9 -2
  90. data/node_modules/govuk-frontend/govuk/settings/_compatibility.scss +0 -1
  91. data/node_modules/govuk-frontend/govuk/settings/_measurements.scss +0 -4
  92. data/node_modules/govuk-frontend/govuk/settings/_typography-font-families.scss +2 -2
  93. data/node_modules/govuk-frontend/govuk/settings/_typography-font.scss +11 -5
  94. data/node_modules/govuk-frontend/govuk/settings/_typography-responsive.scss +6 -2
  95. data/node_modules/govuk-frontend/govuk/tools/_font-url.scss +0 -3
  96. data/node_modules/govuk-frontend/govuk/tools/_image-url.scss +0 -3
  97. data/node_modules/govuk-frontend/govuk/utilities/_visually-hidden.scss +0 -1
  98. data/node_modules/govuk-frontend/govuk/vendor/_sass-mq.scss +0 -4
  99. data/node_modules/govuk-frontend/package.json +1 -1
  100. metadata +33 -4
  101. data/app/assets/javascripts/govuk_publishing_components/analytics/init.js.erb +0 -50
  102. data/app/assets/javascripts/govuk_publishing_components/components/initial-focus.js +0 -12
@@ -38,7 +38,7 @@
38
38
  "name": "idPrefix",
39
39
  "type": "string",
40
40
  "required": false,
41
- "description": "String to prefix id for each checkbox item if no id is specified on each item. If `idPrefix` is not passed, fallback to using the name attribute instead."
41
+ "description": "String to prefix id for each radio item if no id is specified on each item. If `idPrefix` is not passed, fallback to using the name attribute instead."
42
42
  },
43
43
  {
44
44
  "name": "name",
@@ -87,7 +87,7 @@
87
87
  "name": "hint",
88
88
  "type": "object",
89
89
  "required": false,
90
- "description": "Provide hint to each checkbox item.",
90
+ "description": "Provide hint to each radio item.",
91
91
  "isComponent": true
92
92
  },
93
93
  {
@@ -46,5 +46,4 @@
46
46
  border-color: $govuk-input-border-colour;
47
47
  }
48
48
  }
49
-
50
49
  }
@@ -0,0 +1,248 @@
1
+ {
2
+ "component": "select",
3
+ "fixtures": [
4
+ {
5
+ "name": "default",
6
+ "options": {
7
+ "id": "select-1",
8
+ "name": "select-1",
9
+ "label": {
10
+ "text": "Label text goes here"
11
+ },
12
+ "items": [
13
+ {
14
+ "value": 1,
15
+ "text": "GOV.UK frontend option 1"
16
+ },
17
+ {
18
+ "value": 2,
19
+ "text": "GOV.UK frontend option 2",
20
+ "selected": true
21
+ },
22
+ {
23
+ "value": 3,
24
+ "text": "GOV.UK frontend option 3",
25
+ "disabled": true
26
+ }
27
+ ]
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>"
30
+ },
31
+ {
32
+ "name": "with hint text and error message",
33
+ "options": {
34
+ "id": "select-2",
35
+ "name": "select-2",
36
+ "label": {
37
+ "text": "Label text goes here"
38
+ },
39
+ "hint": {
40
+ "text": "Hint text goes here"
41
+ },
42
+ "errorMessage": {
43
+ "text": "Error message goes here"
44
+ },
45
+ "items": [
46
+ {
47
+ "value": 1,
48
+ "text": "GOV.UK frontend option 1"
49
+ },
50
+ {
51
+ "value": 2,
52
+ "text": "GOV.UK frontend option 2"
53
+ },
54
+ {
55
+ "value": 3,
56
+ "text": "GOV.UK frontend option 3"
57
+ }
58
+ ]
59
+ },
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
+ },
62
+ {
63
+ "name": "with label as page heading",
64
+ "options": {
65
+ "id": "select-3",
66
+ "name": "select-3",
67
+ "label": {
68
+ "text": "Label text goes here",
69
+ "isPageHeading": true
70
+ },
71
+ "items": [
72
+ {
73
+ "value": 1,
74
+ "text": "GOV.UK frontend option 1"
75
+ },
76
+ {
77
+ "value": 2,
78
+ "text": "GOV.UK frontend option 2",
79
+ "selected": true
80
+ },
81
+ {
82
+ "value": 3,
83
+ "text": "GOV.UK frontend option 3",
84
+ "disabled": true
85
+ }
86
+ ]
87
+ },
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>"
89
+ },
90
+ {
91
+ "name": "with full width override",
92
+ "options": {
93
+ "id": "select-1",
94
+ "name": "select-1",
95
+ "classes": "govuk-!-width-full",
96
+ "label": {
97
+ "text": "Label text goes here"
98
+ },
99
+ "items": [
100
+ {
101
+ "value": 1,
102
+ "text": "GOV.UK frontend option 1"
103
+ },
104
+ {
105
+ "value": 2,
106
+ "text": "GOV.UK frontend option 2",
107
+ "selected": true
108
+ },
109
+ {
110
+ "value": 3,
111
+ "text": "GOV.UK frontend option 3",
112
+ "disabled": true
113
+ }
114
+ ]
115
+ },
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>"
117
+ },
118
+ {
119
+ "name": "with optional form-group classes",
120
+ "options": {
121
+ "id": "select-1",
122
+ "name": "select-1",
123
+ "classes": "govuk-!-width-full",
124
+ "label": {
125
+ "text": "Label text goes here"
126
+ },
127
+ "formGroup": {
128
+ "classes": "extra-class"
129
+ },
130
+ "items": [
131
+ {
132
+ "value": 1,
133
+ "text": "GOV.UK frontend option 1"
134
+ },
135
+ {
136
+ "value": 2,
137
+ "text": "GOV.UK frontend option 2",
138
+ "selected": true
139
+ },
140
+ {
141
+ "value": 3,
142
+ "text": "GOV.UK frontend option 3",
143
+ "disabled": true
144
+ }
145
+ ]
146
+ },
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>"
148
+ },
149
+ {
150
+ "name": "with describedBy",
151
+ "options": {
152
+ "describedBy": "some-id"
153
+ },
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>"
155
+ },
156
+ {
157
+ "name": "attributes",
158
+ "options": {
159
+ "attributes": {
160
+ "data-attribute": "my data value"
161
+ }
162
+ },
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>"
164
+ },
165
+ {
166
+ "name": "attributes on items",
167
+ "options": {
168
+ "value": 2,
169
+ "items": [
170
+ {
171
+ "text": "Option 1",
172
+ "attributes": {
173
+ "data-attribute": "ABC",
174
+ "data-second-attribute": "DEF"
175
+ }
176
+ },
177
+ {
178
+ "text": "Option 2",
179
+ "attributes": {
180
+ "data-attribute": "GHI",
181
+ "data-second-attribute": "JKL"
182
+ }
183
+ }
184
+ ]
185
+ },
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>"
187
+ },
188
+ {
189
+ "name": "with falsey values",
190
+ "options": {
191
+ "items": [
192
+ {
193
+ "text": "Option 1"
194
+ },
195
+ null,
196
+ false,
197
+ "",
198
+ {
199
+ "text": "Options 2"
200
+ }
201
+ ]
202
+ },
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>"
204
+ },
205
+ {
206
+ "name": "hint",
207
+ "options": {
208
+ "id": "select-with-hint",
209
+ "hint": {
210
+ "text": "Hint text goes here"
211
+ }
212
+ },
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>"
214
+ },
215
+ {
216
+ "name": "hint and describedBy",
217
+ "options": {
218
+ "id": "select-with-hint",
219
+ "describedBy": "some-id",
220
+ "hint": {
221
+ "text": "Hint text goes here"
222
+ }
223
+ },
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>"
225
+ },
226
+ {
227
+ "name": "error",
228
+ "options": {
229
+ "id": "select-with-error",
230
+ "errorMessage": {
231
+ "text": "Error message"
232
+ }
233
+ },
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>"
235
+ },
236
+ {
237
+ "name": "error and describedBy",
238
+ "options": {
239
+ "id": "select-with-error",
240
+ "describedBy": "some-id",
241
+ "errorMessage": {
242
+ "text": "Error message"
243
+ }
244
+ },
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>"
246
+ }
247
+ ]
248
+ }
@@ -0,0 +1,72 @@
1
+ {
2
+ "component": "skip-link",
3
+ "fixtures": [
4
+ {
5
+ "name": "default",
6
+ "options": {
7
+ "text": "Skip to main content",
8
+ "href": "#content"
9
+ },
10
+ "html": "<a href=\"#content\" class=\"govuk-skip-link\">Skip to main content</a>"
11
+ },
12
+ {
13
+ "name": "with focus",
14
+ "options": {
15
+ "classes": ":focus",
16
+ "text": "Skip to main content",
17
+ "href": "#content"
18
+ },
19
+ "html": "<a href=\"#content\" class=\"govuk-skip-link :focus\">Skip to main content</a>"
20
+ },
21
+ {
22
+ "name": "default values",
23
+ "options": {},
24
+ "html": "<a href=\"#content\" class=\"govuk-skip-link\"></a>"
25
+ },
26
+ {
27
+ "name": "custom href",
28
+ "options": {
29
+ "href": "#custom"
30
+ },
31
+ "html": "<a href=\"#custom\" class=\"govuk-skip-link\"></a>"
32
+ },
33
+ {
34
+ "name": "custom text",
35
+ "options": {
36
+ "text": "skip"
37
+ },
38
+ "html": "<a href=\"#content\" class=\"govuk-skip-link\">skip</a>"
39
+ },
40
+ {
41
+ "name": "html as text",
42
+ "options": {
43
+ "text": "<p>skip</p>"
44
+ },
45
+ "html": "<a href=\"#content\" class=\"govuk-skip-link\">&lt;p&gt;skip&lt;/p&gt;</a>"
46
+ },
47
+ {
48
+ "name": "html",
49
+ "options": {
50
+ "html": "<p>skip</p>"
51
+ },
52
+ "html": "<a href=\"#content\" class=\"govuk-skip-link\"><p>skip</p></a>"
53
+ },
54
+ {
55
+ "name": "classes",
56
+ "options": {
57
+ "classes": "app-skip-link--custom-class"
58
+ },
59
+ "html": "<a href=\"#content\" class=\"govuk-skip-link app-skip-link--custom-class\"></a>"
60
+ },
61
+ {
62
+ "name": "attributes",
63
+ "options": {
64
+ "attributes": {
65
+ "data-test": "attribute",
66
+ "aria-label": "Skip to content"
67
+ }
68
+ },
69
+ "html": "<a href=\"#content\" class=\"govuk-skip-link\" data-test=\"attribute\" aria-label=\"Skip to content\"></a>"
70
+ }
71
+ ]
72
+ }
@@ -6,7 +6,7 @@ See the [main README quick start guide](https://github.com/alphagov/govuk-fronte
6
6
 
7
7
  ## Guidance and Examples
8
8
 
9
- Find out when to use the details component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/summary-list).
9
+ Find out when to use the summary list component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/summary-list).
10
10
 
11
11
  ## Component options
12
12
 
@@ -1,5 +1,4 @@
1
1
  @include govuk-exports("govuk/component/summary-list") {
2
-
3
2
  .govuk-summary-list {
4
3
  @include govuk-font($size: 19);
5
4
  @include govuk-text-colour;
@@ -29,15 +28,8 @@
29
28
 
30
29
  @include govuk-media-query($from: tablet) {
31
30
  display: table-cell;
32
- padding-right: govuk-spacing(4);
33
- }
34
- }
35
-
36
- .govuk-summary-list__key,
37
- .govuk-summary-list__value,
38
- .govuk-summary-list__actions {
39
- @include govuk-media-query($from: tablet) {
40
31
  padding-top: govuk-spacing(2);
32
+ padding-right: govuk-spacing(4);
41
33
  padding-bottom: govuk-spacing(2);
42
34
  border-bottom: 1px solid $govuk-border-colour;
43
35
  }
@@ -99,7 +91,7 @@
99
91
 
100
92
  .govuk-summary-list__actions-list-item {
101
93
  display: inline;
102
- margin-right: govuk-spacing(2);
94
+ margin-right: govuk-spacing(2);
103
95
  padding-right: govuk-spacing(2);
104
96
  }
105
97
 
@@ -0,0 +1,991 @@
1
+ {
2
+ "component": "summary-list",
3
+ "fixtures": [
4
+ {
5
+ "name": "default",
6
+ "options": {
7
+ "rows": [
8
+ {
9
+ "key": {
10
+ "text": "Name"
11
+ },
12
+ "value": {
13
+ "text": "Firstname Lastname"
14
+ }
15
+ },
16
+ {
17
+ "key": {
18
+ "text": "Date of birth"
19
+ },
20
+ "value": {
21
+ "text": "13/08/1980"
22
+ }
23
+ },
24
+ {
25
+ "key": {
26
+ "text": "Contact information"
27
+ },
28
+ "value": {
29
+ "html": "<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"
30
+ }
31
+ }
32
+ ]
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>"
35
+ },
36
+ {
37
+ "name": "with actions",
38
+ "options": {
39
+ "rows": [
40
+ {
41
+ "key": {
42
+ "text": "Name"
43
+ },
44
+ "value": {
45
+ "text": "Firstname Lastname"
46
+ },
47
+ "actions": {
48
+ "items": [
49
+ {
50
+ "href": "#",
51
+ "text": "Edit",
52
+ "visuallyHiddenText": "name"
53
+ },
54
+ {
55
+ "href": "#",
56
+ "text": "Delete",
57
+ "visuallyHiddenText": "name"
58
+ }
59
+ ]
60
+ }
61
+ },
62
+ {
63
+ "key": {
64
+ "text": "Date of birth"
65
+ },
66
+ "value": {
67
+ "text": "13/08/1980"
68
+ },
69
+ "actions": {
70
+ "items": [
71
+ {
72
+ "href": "#",
73
+ "text": "Change",
74
+ "visuallyHiddenText": "date of birth"
75
+ }
76
+ ]
77
+ }
78
+ },
79
+ {
80
+ "key": {
81
+ "text": "Contact information"
82
+ },
83
+ "value": {
84
+ "html": "<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"
85
+ },
86
+ "actions": {
87
+ "items": [
88
+ {
89
+ "href": "#",
90
+ "text": "Edit",
91
+ "visuallyHiddenText": "contact information"
92
+ },
93
+ {
94
+ "href": "#",
95
+ "text": "Change",
96
+ "visuallyHiddenText": "contact information"
97
+ }
98
+ ]
99
+ }
100
+ }
101
+ ]
102
+ },
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
+ },
105
+ {
106
+ "name": "with some actions",
107
+ "options": {
108
+ "rows": [
109
+ {
110
+ "key": {
111
+ "text": "Name"
112
+ },
113
+ "value": {
114
+ "text": "Firstname Lastname"
115
+ },
116
+ "actions": {
117
+ "items": [
118
+ {
119
+ "href": "#",
120
+ "text": "Edit",
121
+ "visuallyHiddenText": "name"
122
+ },
123
+ {
124
+ "href": "#",
125
+ "text": "Delete",
126
+ "visuallyHiddenText": "name"
127
+ }
128
+ ]
129
+ }
130
+ },
131
+ {
132
+ "key": {
133
+ "text": "Date of birth"
134
+ },
135
+ "value": {
136
+ "text": "13/08/1980"
137
+ }
138
+ },
139
+ {
140
+ "key": {
141
+ "text": "Contact information"
142
+ },
143
+ "value": {
144
+ "html": "<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"
145
+ }
146
+ }
147
+ ]
148
+ },
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>"
150
+ },
151
+ {
152
+ "name": "no-border",
153
+ "options": {
154
+ "classes": "govuk-summary-list--no-border",
155
+ "rows": [
156
+ {
157
+ "key": {
158
+ "text": "Name"
159
+ },
160
+ "value": {
161
+ "text": "Firstname Lastname"
162
+ }
163
+ },
164
+ {
165
+ "key": {
166
+ "text": "Date of birth"
167
+ },
168
+ "value": {
169
+ "text": "13/08/1980"
170
+ }
171
+ },
172
+ {
173
+ "key": {
174
+ "text": "Contact information"
175
+ },
176
+ "value": {
177
+ "html": "<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"
178
+ }
179
+ }
180
+ ]
181
+ },
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>"
183
+ },
184
+ {
185
+ "name": "no-border on last row",
186
+ "options": {
187
+ "rows": [
188
+ {
189
+ "key": {
190
+ "text": "Name"
191
+ },
192
+ "value": {
193
+ "text": "Firstname Lastname"
194
+ }
195
+ },
196
+ {
197
+ "key": {
198
+ "text": "Date of birth"
199
+ },
200
+ "value": {
201
+ "text": "13/08/1980"
202
+ }
203
+ },
204
+ {
205
+ "key": {
206
+ "text": "Contact information"
207
+ },
208
+ "value": {
209
+ "html": "<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"
210
+ },
211
+ "classes": "govuk-summary-list__row--no-border"
212
+ }
213
+ ]
214
+ },
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>"
216
+ },
217
+ {
218
+ "name": "overridden-widths",
219
+ "options": {
220
+ "rows": [
221
+ {
222
+ "key": {
223
+ "classes": "govuk-!-width-one-half",
224
+ "text": "Name"
225
+ },
226
+ "value": {
227
+ "classes": "govuk-!-width-one-quarter",
228
+ "text": "Firstname Lastname"
229
+ },
230
+ "actions": {
231
+ "classes": "govuk-!-width-one-half",
232
+ "items": [
233
+ {
234
+ "href": "#",
235
+ "text": "Edit",
236
+ "visuallyHiddenText": "name"
237
+ },
238
+ {
239
+ "href": "#",
240
+ "text": "Delete",
241
+ "visuallyHiddenText": "name"
242
+ }
243
+ ]
244
+ }
245
+ },
246
+ {
247
+ "key": {
248
+ "text": "Date of birth"
249
+ },
250
+ "value": {
251
+ "text": "13/08/1980"
252
+ },
253
+ "actions": {
254
+ "items": [
255
+ {
256
+ "href": "#",
257
+ "text": "Change",
258
+ "visuallyHiddenText": "date of birth"
259
+ }
260
+ ]
261
+ }
262
+ },
263
+ {
264
+ "key": {
265
+ "text": "Contact information"
266
+ },
267
+ "value": {
268
+ "html": "<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"
269
+ },
270
+ "actions": {
271
+ "items": [
272
+ {
273
+ "href": "#",
274
+ "text": "Edit",
275
+ "visuallyHiddenText": "contact information"
276
+ },
277
+ {
278
+ "href": "#",
279
+ "text": "Change",
280
+ "visuallyHiddenText": "contact information"
281
+ }
282
+ ]
283
+ }
284
+ }
285
+ ]
286
+ },
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>"
288
+ },
289
+ {
290
+ "name": "check-your-answers",
291
+ "options": {
292
+ "rows": [
293
+ {
294
+ "key": {
295
+ "text": "Name"
296
+ },
297
+ "value": {
298
+ "text": "Sarah Philips"
299
+ },
300
+ "actions": {
301
+ "items": [
302
+ {
303
+ "href": "#",
304
+ "text": "Change",
305
+ "visuallyHiddenText": "name"
306
+ }
307
+ ]
308
+ }
309
+ },
310
+ {
311
+ "key": {
312
+ "text": "Date of birth"
313
+ },
314
+ "value": {
315
+ "text": "5 January 1978"
316
+ },
317
+ "actions": {
318
+ "items": [
319
+ {
320
+ "href": "#",
321
+ "text": "Change",
322
+ "visuallyHiddenText": "date of birth"
323
+ }
324
+ ]
325
+ }
326
+ },
327
+ {
328
+ "key": {
329
+ "text": "Address"
330
+ },
331
+ "value": {
332
+ "html": "72 Guild Street<br>\nLondon<br>\nSE23 6FH\n"
333
+ },
334
+ "actions": {
335
+ "items": [
336
+ {
337
+ "href": "#",
338
+ "text": "Change",
339
+ "visuallyHiddenText": "address"
340
+ }
341
+ ]
342
+ }
343
+ },
344
+ {
345
+ "key": {
346
+ "text": "Contact details"
347
+ },
348
+ "value": {
349
+ "html": "07700 900457<br>\nsarah.phillips@example.com\n"
350
+ },
351
+ "actions": {
352
+ "items": [
353
+ {
354
+ "href": "#",
355
+ "text": "Change",
356
+ "visuallyHiddenText": "contact details"
357
+ }
358
+ ]
359
+ }
360
+ },
361
+ {
362
+ "key": {
363
+ "text": "Previous application number"
364
+ },
365
+ "value": {
366
+ "text": 502135326
367
+ },
368
+ "actions": {
369
+ "items": [
370
+ {
371
+ "href": "#",
372
+ "text": "Change",
373
+ "visuallyHiddenText": "previous application number"
374
+ }
375
+ ]
376
+ }
377
+ },
378
+ {
379
+ "key": {
380
+ "text": "Licence type"
381
+ },
382
+ "value": {
383
+ "text": "For personal use"
384
+ },
385
+ "actions": {
386
+ "items": [
387
+ {
388
+ "href": "#",
389
+ "text": "Change",
390
+ "visuallyHiddenText": "licence type"
391
+ }
392
+ ]
393
+ }
394
+ },
395
+ {
396
+ "key": {
397
+ "text": "Home address"
398
+ },
399
+ "value": {
400
+ "html": "<p class=\"govuk-body\">\n 72 Guild Street<br>\n London<br>\n SE23 6FH\n</p>\n"
401
+ },
402
+ "actions": {
403
+ "items": [
404
+ {
405
+ "href": "#",
406
+ "text": "Change",
407
+ "visuallyHiddenText": "home address"
408
+ }
409
+ ]
410
+ }
411
+ },
412
+ {
413
+ "key": {
414
+ "text": "Licence period"
415
+ },
416
+ "value": {
417
+ "html": "<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"
418
+ },
419
+ "actions": {
420
+ "items": [
421
+ {
422
+ "href": "#",
423
+ "text": "Change",
424
+ "visuallyHiddenText": "licence period"
425
+ }
426
+ ]
427
+ }
428
+ }
429
+ ]
430
+ },
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>"
432
+ },
433
+ {
434
+ "name": "extreme",
435
+ "options": {
436
+ "rows": [
437
+ {
438
+ "key": {
439
+ "text": "Name"
440
+ },
441
+ "value": {
442
+ "text": "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"
443
+ },
444
+ "actions": {
445
+ "items": [
446
+ {
447
+ "href": "#",
448
+ "text": "Buy"
449
+ },
450
+ {
451
+ "href": "#",
452
+ "text": "Use"
453
+ },
454
+ {
455
+ "href": "#",
456
+ "text": "Break"
457
+ },
458
+ {
459
+ "href": "#",
460
+ "text": "Fix"
461
+ },
462
+ {
463
+ "href": "#",
464
+ "text": "Trash"
465
+ },
466
+ {
467
+ "href": "#",
468
+ "text": "Change"
469
+ },
470
+ {
471
+ "href": "#",
472
+ "text": "Mail"
473
+ },
474
+ {
475
+ "href": "#",
476
+ "text": "Upgrade"
477
+ },
478
+ {
479
+ "href": "#",
480
+ "text": "Charge"
481
+ },
482
+ {
483
+ "href": "#",
484
+ "text": "Point"
485
+ },
486
+ {
487
+ "href": "#",
488
+ "text": "Coom"
489
+ },
490
+ {
491
+ "href": "#",
492
+ "text": "Press"
493
+ },
494
+ {
495
+ "href": "#",
496
+ "text": "Snap"
497
+ },
498
+ {
499
+ "href": "#",
500
+ "text": "Work"
501
+ },
502
+ {
503
+ "href": "#",
504
+ "text": "Quick"
505
+ },
506
+ {
507
+ "href": "#",
508
+ "text": "Erase"
509
+ }
510
+ ]
511
+ }
512
+ },
513
+ {
514
+ "key": {
515
+ "text": "Long website address"
516
+ },
517
+ "value": {
518
+ "html": "<a class=\"govuk-link\" href=\"https://cs.wikipedia.org/wiki/Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch\">https://cs.wikipedia.org/wiki/Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch</a>\n"
519
+ },
520
+ "actions": {
521
+ "items": [
522
+ {
523
+ "href": "#",
524
+ "text": "Change",
525
+ "visuallyHiddenText": "long website address"
526
+ }
527
+ ]
528
+ }
529
+ },
530
+ {
531
+ "key": {
532
+ "text": "Long email address"
533
+ },
534
+ "value": {
535
+ "html": "<a class=\"govuk-link\" href=\"mailto:webmaster@llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.com\">webmaster@llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.com</a>\n"
536
+ },
537
+ "actions": {
538
+ "items": [
539
+ {
540
+ "href": "#",
541
+ "text": "Change",
542
+ "visuallyHiddenText": "long email address"
543
+ }
544
+ ]
545
+ }
546
+ },
547
+ {
548
+ "key": {
549
+ "text": "No wrapping allowed"
550
+ },
551
+ "value": {
552
+ "html": "<p class=\"govuk-body\" style=\"white-space: nowrap;\">michelle.longish.name@example.com</p>\n"
553
+ },
554
+ "actions": {
555
+ "items": [
556
+ {
557
+ "href": "#",
558
+ "text": "Change",
559
+ "visuallyHiddenText": "no wrapping allowed"
560
+ }
561
+ ]
562
+ }
563
+ },
564
+ {
565
+ "key": {
566
+ "text": "Pneumonoultramicroscopicsilicovolcanoconiosis"
567
+ },
568
+ "value": {
569
+ "html": "<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"
570
+ },
571
+ "actions": {
572
+ "items": [
573
+ {
574
+ "href": "#",
575
+ "text": "Write"
576
+ },
577
+ {
578
+ "href": "#",
579
+ "text": "Cut"
580
+ },
581
+ {
582
+ "href": "#",
583
+ "text": "Paste"
584
+ },
585
+ {
586
+ "href": "#",
587
+ "text": "Save"
588
+ },
589
+ {
590
+ "href": "#",
591
+ "text": "Load"
592
+ },
593
+ {
594
+ "href": "#",
595
+ "text": "Check"
596
+ },
597
+ {
598
+ "href": "#",
599
+ "text": "Quick"
600
+ },
601
+ {
602
+ "href": "#",
603
+ "text": "Rewrite"
604
+ },
605
+ {
606
+ "href": "#",
607
+ "text": "Plug"
608
+ },
609
+ {
610
+ "href": "#",
611
+ "text": "Play"
612
+ },
613
+ {
614
+ "href": "#",
615
+ "text": "Burn"
616
+ },
617
+ {
618
+ "href": "#",
619
+ "text": "Rip"
620
+ },
621
+ {
622
+ "href": "#",
623
+ "text": "Drag and drop"
624
+ },
625
+ {
626
+ "href": "#",
627
+ "text": "Zip"
628
+ },
629
+ {
630
+ "href": "#",
631
+ "text": "Unzip"
632
+ },
633
+ {
634
+ "href": "#",
635
+ "text": "Lock"
636
+ },
637
+ {
638
+ "href": "#",
639
+ "text": "Fill"
640
+ },
641
+ {
642
+ "href": "#",
643
+ "text": "Curl"
644
+ },
645
+ {
646
+ "href": "#",
647
+ "text": "Find"
648
+ },
649
+ {
650
+ "href": "#",
651
+ "text": "View"
652
+ }
653
+ ]
654
+ }
655
+ },
656
+ {
657
+ "key": {
658
+ "text": "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."
659
+ },
660
+ "value": {
661
+ "text": "The Great Gatsby"
662
+ },
663
+ "actions": {
664
+ "items": [
665
+ {
666
+ "href": "#",
667
+ "text": "Code"
668
+ },
669
+ {
670
+ "href": "#",
671
+ "text": "Jam"
672
+ },
673
+ {
674
+ "href": "#",
675
+ "text": "Unlock"
676
+ },
677
+ {
678
+ "href": "#",
679
+ "text": "Surf"
680
+ },
681
+ {
682
+ "href": "#",
683
+ "text": "Scroll"
684
+ },
685
+ {
686
+ "href": "#",
687
+ "text": "Pose"
688
+ },
689
+ {
690
+ "href": "#",
691
+ "text": "Click"
692
+ },
693
+ {
694
+ "href": "#",
695
+ "text": "Cross"
696
+ },
697
+ {
698
+ "href": "#",
699
+ "text": "Crack"
700
+ },
701
+ {
702
+ "href": "#",
703
+ "text": "Twitch"
704
+ },
705
+ {
706
+ "href": "#",
707
+ "text": "Update"
708
+ },
709
+ {
710
+ "href": "#",
711
+ "text": "Name"
712
+ },
713
+ {
714
+ "href": "#",
715
+ "text": "Read"
716
+ },
717
+ {
718
+ "href": "#",
719
+ "text": "Tune"
720
+ },
721
+ {
722
+ "href": "#",
723
+ "text": "Print"
724
+ },
725
+ {
726
+ "href": "#",
727
+ "text": "Scan"
728
+ },
729
+ {
730
+ "href": "#",
731
+ "text": "Send"
732
+ },
733
+ {
734
+ "href": "#",
735
+ "text": "Fax"
736
+ },
737
+ {
738
+ "href": "#",
739
+ "text": "Rename"
740
+ },
741
+ {
742
+ "href": "#",
743
+ "text": "Touch"
744
+ },
745
+ {
746
+ "href": "#",
747
+ "text": "Bring"
748
+ },
749
+ {
750
+ "href": "#",
751
+ "text": "Pay"
752
+ },
753
+ {
754
+ "href": "#",
755
+ "text": "Watch"
756
+ },
757
+ {
758
+ "href": "#",
759
+ "text": "Turn"
760
+ },
761
+ {
762
+ "href": "#",
763
+ "text": "Leave"
764
+ },
765
+ {
766
+ "href": "#",
767
+ "text": "Stop"
768
+ },
769
+ {
770
+ "href": "#",
771
+ "text": "Format"
772
+ }
773
+ ]
774
+ }
775
+ }
776
+ ]
777
+ },
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>"
779
+ },
780
+ {
781
+ "name": "attributes",
782
+ "options": {
783
+ "attributes": {
784
+ "data-attribute-1": "value-1",
785
+ "data-attribute-2": "value-2"
786
+ }
787
+ },
788
+ "html": "<dl class=\"govuk-summary-list\" data-attribute-1=\"value-1\" data-attribute-2=\"value-2\">\n \n</dl>"
789
+ },
790
+ {
791
+ "name": "with falsey values",
792
+ "options": {
793
+ "rows": [
794
+ {
795
+ "key": {
796
+ "text": "Name"
797
+ }
798
+ },
799
+ null,
800
+ false,
801
+ "",
802
+ {
803
+ "key": {
804
+ "text": "Name 2"
805
+ }
806
+ }
807
+ ]
808
+ },
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>"
810
+ },
811
+ {
812
+ "name": "key with html",
813
+ "options": {
814
+ "rows": [
815
+ {
816
+ "key": {
817
+ "html": "<b>Name</b>"
818
+ }
819
+ }
820
+ ]
821
+ },
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>"
823
+ },
824
+ {
825
+ "name": "key with classes",
826
+ "options": {
827
+ "rows": [
828
+ {
829
+ "key": {
830
+ "text": "Name",
831
+ "classes": "app-custom-class"
832
+ }
833
+ }
834
+ ]
835
+ },
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>"
837
+ },
838
+ {
839
+ "name": "value with html",
840
+ "options": {
841
+ "rows": [
842
+ {
843
+ "key": null,
844
+ "value": {
845
+ "html": "<span>email@email.com</span>"
846
+ }
847
+ }
848
+ ]
849
+ },
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>"
851
+ },
852
+ {
853
+ "name": "actions href",
854
+ "options": {
855
+ "rows": [
856
+ {
857
+ "actions": {
858
+ "items": [
859
+ {
860
+ "href": "https://www.gov.uk"
861
+ }
862
+ ]
863
+ }
864
+ }
865
+ ]
866
+ },
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>"
868
+ },
869
+ {
870
+ "name": "actions with html",
871
+ "options": {
872
+ "rows": [
873
+ {
874
+ "actions": {
875
+ "items": [
876
+ {
877
+ "html": "Edit<span class=\"visually-hidden\"> name</span>"
878
+ }
879
+ ]
880
+ }
881
+ }
882
+ ]
883
+ },
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>"
885
+ },
886
+ {
887
+ "name": "actions with classes",
888
+ "options": {
889
+ "rows": [
890
+ {
891
+ "actions": {
892
+ "classes": "app-custom-class",
893
+ "items": [
894
+ {
895
+ "text": "Edit"
896
+ }
897
+ ]
898
+ }
899
+ }
900
+ ]
901
+ },
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>"
903
+ },
904
+ {
905
+ "name": "actions with attributes",
906
+ "options": {
907
+ "rows": [
908
+ {
909
+ "actions": {
910
+ "items": [
911
+ {
912
+ "text": "Edit",
913
+ "href": "#",
914
+ "attributes": {
915
+ "data-test-attribute": "value",
916
+ "data-test-attribute-2": "value-2"
917
+ }
918
+ }
919
+ ]
920
+ }
921
+ }
922
+ ]
923
+ },
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>"
925
+ },
926
+ {
927
+ "name": "single action with anchor",
928
+ "options": {
929
+ "rows": [
930
+ {
931
+ "actions": {
932
+ "items": [
933
+ {
934
+ "text": "First action",
935
+ "href": "#"
936
+ }
937
+ ]
938
+ }
939
+ }
940
+ ]
941
+ },
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>"
943
+ },
944
+ {
945
+ "name": "classes on items",
946
+ "options": {
947
+ "rows": [
948
+ {
949
+ "actions": {
950
+ "items": [
951
+ {
952
+ "text": "Edit",
953
+ "href": "#",
954
+ "classes": "govuk-link--no-visited-state"
955
+ }
956
+ ]
957
+ }
958
+ }
959
+ ]
960
+ },
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>"
962
+ },
963
+ {
964
+ "name": "empty items array",
965
+ "options": {
966
+ "rows": [
967
+ {
968
+ "actions": {
969
+ "items": []
970
+ }
971
+ }
972
+ ]
973
+ },
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>"
975
+ },
976
+ {
977
+ "name": "rows with classes",
978
+ "options": {
979
+ "rows": [
980
+ {
981
+ "key": {
982
+ "text": "Name"
983
+ },
984
+ "classes": "app-custom-class"
985
+ }
986
+ ]
987
+ },
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>"
989
+ }
990
+ ]
991
+ }