govuk_publishing_components 23.15.0 → 24.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (55) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js +0 -4
  3. data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js +23 -14
  4. data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +0 -1
  5. data/app/assets/stylesheets/govuk_publishing_components/component_support.scss +0 -2
  6. data/app/assets/stylesheets/govuk_publishing_components/components/_error-alert.scss +4 -4
  7. data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss +101 -48
  8. data/app/assets/stylesheets/govuk_publishing_components/components/_success-alert.scss +8 -8
  9. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_contact.scss +0 -5
  10. data/app/assets/stylesheets/govuk_publishing_components/components/print/_step-by-step-nav.scss +2 -2
  11. data/app/views/govuk_publishing_components/components/_document_list.html.erb +10 -1
  12. data/app/views/govuk_publishing_components/components/docs/contextual_sidebar.yml +5 -0
  13. data/app/views/govuk_publishing_components/components/docs/document_list.yml +18 -0
  14. data/app/views/govuk_publishing_components/components/docs/govspeak.yml +3 -3
  15. data/config/initializers/assets.rb +0 -1
  16. data/lib/govuk_publishing_components/presenters/contextual_navigation.rb +61 -2
  17. data/lib/govuk_publishing_components/version.rb +1 -1
  18. data/node_modules/govuk-frontend/govuk/all.js +1 -1
  19. data/node_modules/govuk-frontend/govuk/components/_all.scss +1 -0
  20. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/fixtures.json +10 -10
  21. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/template.njk +2 -2
  22. data/node_modules/govuk-frontend/govuk/components/button/_index.scss +2 -0
  23. data/node_modules/govuk-frontend/govuk/components/character-count/_index.scss +1 -0
  24. data/node_modules/govuk-frontend/govuk/components/character-count/character-count.js +1 -1
  25. data/node_modules/govuk-frontend/govuk/components/character-count/fixtures.json +13 -0
  26. data/node_modules/govuk-frontend/govuk/components/cookie-banner/_cookie-banner.scss +2 -0
  27. data/node_modules/govuk-frontend/govuk/components/cookie-banner/_index.scss +51 -0
  28. data/node_modules/govuk-frontend/govuk/components/cookie-banner/fixtures.json +425 -0
  29. data/node_modules/govuk-frontend/govuk/components/cookie-banner/macro-options.json +132 -0
  30. data/node_modules/govuk-frontend/govuk/components/cookie-banner/macro.njk +3 -0
  31. data/node_modules/govuk-frontend/govuk/components/cookie-banner/template.njk +63 -0
  32. data/node_modules/govuk-frontend/govuk/components/details/fixtures.json +2 -2
  33. data/node_modules/govuk-frontend/govuk/components/header/fixtures.json +18 -18
  34. data/node_modules/govuk-frontend/govuk/components/header/template.njk +4 -4
  35. data/node_modules/govuk-frontend/govuk/components/table/_index.scss +21 -0
  36. data/node_modules/govuk-frontend/govuk/components/table/macro-options.json +2 -2
  37. data/node_modules/govuk-frontend/govuk/objects/_all.scss +1 -0
  38. data/node_modules/govuk-frontend/govuk/objects/_button-group.scss +94 -0
  39. data/node_modules/govuk-frontend/package.json +1 -1
  40. metadata +9 -17
  41. data/app/assets/images/govuk_publishing_components/chevron-banner/chevron-banner-small-focus.svg +0 -4
  42. data/app/assets/images/govuk_publishing_components/chevron-banner/chevron-banner-small.svg +0 -4
  43. data/app/assets/javascripts/govuk_publishing_components/components/header.js +0 -8
  44. data/app/assets/javascripts/govuk_publishing_components/lib/auto-track-event.js +0 -31
  45. data/app/assets/stylesheets/govuk_publishing_components/components/_chevron-banner.scss +0 -138
  46. data/app/assets/stylesheets/govuk_publishing_components/components/_list.scss +0 -1
  47. data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_variables.scss +0 -27
  48. data/app/assets/stylesheets/govuk_publishing_components/components/mixins/_back-arrow.scss +0 -13
  49. data/app/assets/stylesheets/govuk_publishing_components/components/mixins/_clearfix.scss +0 -8
  50. data/app/views/govuk_publishing_components/components/_chevron_banner.html.erb +0 -19
  51. data/app/views/govuk_publishing_components/components/_subscription-links.html.erb +0 -85
  52. data/app/views/govuk_publishing_components/components/_translation-nav.html.erb +0 -33
  53. data/app/views/govuk_publishing_components/components/docs/chevron_banner.yml +0 -33
  54. data/app/views/govuk_publishing_components/components/docs/subscription-links.yml +0 -103
  55. data/app/views/govuk_publishing_components/components/docs/translation-nav.yml +0 -139
@@ -0,0 +1,425 @@
1
+ {
2
+ "component": "cookie-banner",
3
+ "fixtures": [
4
+ {
5
+ "name": "default",
6
+ "options": {
7
+ "messages": [
8
+ {
9
+ "headingText": "Cookies on this government service",
10
+ "text": "We use analytics cookies to help understand how users use our service.",
11
+ "actions": [
12
+ {
13
+ "text": "Accept analytics cookies",
14
+ "type": "submit",
15
+ "name": "cookies",
16
+ "value": "accept"
17
+ },
18
+ {
19
+ "text": "Reject analytics cookies",
20
+ "type": "submit",
21
+ "name": "cookies",
22
+ "value": "reject"
23
+ },
24
+ {
25
+ "text": "View cookie preferences",
26
+ "href": "/cookie-preferences"
27
+ }
28
+ ]
29
+ }
30
+ ]
31
+ },
32
+ "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookie banner\">\n \n \n\n <div class=\"govuk-cookie-banner__message govuk-width-container\"\n >\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n \n <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">Cookies on this government service</h2>\n \n\n <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">We use analytics cookies to help understand how users use our service.</p></div>\n </div>\n </div>\n\n \n <div class=\"govuk-button-group\">\n \n \n <button value=\"accept\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n Accept analytics cookies\n </button>\n \n \n \n <button value=\"reject\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n Reject analytics cookies\n </button>\n \n \n \n \n \n <a class=\"govuk-link\" href=\"/cookie-preferences\">View cookie preferences</a>\n \n \n </div>\n \n </div>\n \n</div>",
33
+ "hidden": false
34
+ },
35
+ {
36
+ "name": "accepted confirmation banner",
37
+ "options": {
38
+ "messages": [
39
+ {
40
+ "text": "Your cookie preferences have been saved. You have accepted cookies.",
41
+ "role": "alert",
42
+ "actions": [
43
+ {
44
+ "text": "Hide this message",
45
+ "type": "button"
46
+ }
47
+ ]
48
+ }
49
+ ]
50
+ },
51
+ "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookie banner\">\n \n \n\n <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\"\n >\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n \n\n <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">Your cookie preferences have been saved. You have accepted cookies.</p></div>\n </div>\n </div>\n\n \n <div class=\"govuk-button-group\">\n \n \n <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n Hide this message\n </button>\n \n \n </div>\n \n </div>\n \n</div>",
52
+ "hidden": false
53
+ },
54
+ {
55
+ "name": "rejected confirmation banner",
56
+ "options": {
57
+ "messages": [
58
+ {
59
+ "text": "Your cookie preferences have been saved. You have rejected cookies.",
60
+ "role": "alert",
61
+ "actions": [
62
+ {
63
+ "text": "Hide this message",
64
+ "type": "button"
65
+ }
66
+ ]
67
+ }
68
+ ]
69
+ },
70
+ "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookie banner\">\n \n \n\n <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\"\n >\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n \n\n <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">Your cookie preferences have been saved. You have rejected cookies.</p></div>\n </div>\n </div>\n\n \n <div class=\"govuk-button-group\">\n \n \n <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n Hide this message\n </button>\n \n \n </div>\n \n </div>\n \n</div>",
71
+ "hidden": false
72
+ },
73
+ {
74
+ "name": "client-side implementation",
75
+ "options": {
76
+ "messages": [
77
+ {
78
+ "headingText": "Cookies on this service",
79
+ "text": "We use cookies to help understand how users use our service.",
80
+ "actions": [
81
+ {
82
+ "text": "Accept analytics cookies",
83
+ "type": "submit",
84
+ "name": "cookies",
85
+ "value": "accept"
86
+ },
87
+ {
88
+ "text": "Reject analytics cookies",
89
+ "type": "submit",
90
+ "name": "cookies",
91
+ "value": "reject"
92
+ },
93
+ {
94
+ "text": "View cookie preferences",
95
+ "href": "/cookie-preferences"
96
+ }
97
+ ]
98
+ },
99
+ {
100
+ "text": "Your cookie preferences have been saved. You have accepted cookies.",
101
+ "role": "alert",
102
+ "hidden": true,
103
+ "actions": [
104
+ {
105
+ "text": "Hide this message",
106
+ "type": "button"
107
+ }
108
+ ]
109
+ },
110
+ {
111
+ "text": "Your cookie preferences have been saved. You have rejected cookies.",
112
+ "role": "alert",
113
+ "hidden": true,
114
+ "actions": [
115
+ {
116
+ "text": "Hide this message",
117
+ "type": "button"
118
+ }
119
+ ]
120
+ }
121
+ ]
122
+ },
123
+ "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookie banner\">\n \n \n\n <div class=\"govuk-cookie-banner__message govuk-width-container\"\n >\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n \n <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">Cookies on this service</h2>\n \n\n <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">We use cookies to help understand how users use our service.</p></div>\n </div>\n </div>\n\n \n <div class=\"govuk-button-group\">\n \n \n <button value=\"accept\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n Accept analytics cookies\n </button>\n \n \n \n <button value=\"reject\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n Reject analytics cookies\n </button>\n \n \n \n \n \n <a class=\"govuk-link\" href=\"/cookie-preferences\">View cookie preferences</a>\n \n \n </div>\n \n </div>\n \n \n \n\n <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\"\n hidden>\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n \n\n <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">Your cookie preferences have been saved. You have accepted cookies.</p></div>\n </div>\n </div>\n\n \n <div class=\"govuk-button-group\">\n \n \n <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n Hide this message\n </button>\n \n \n </div>\n \n </div>\n \n \n \n\n <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\"\n hidden>\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n \n\n <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">Your cookie preferences have been saved. You have rejected cookies.</p></div>\n </div>\n </div>\n\n \n <div class=\"govuk-button-group\">\n \n \n <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n Hide this message\n </button>\n \n \n </div>\n \n </div>\n \n</div>",
124
+ "hidden": false
125
+ },
126
+ {
127
+ "name": "heading html",
128
+ "options": {
129
+ "messages": [
130
+ {
131
+ "headingHtml": "Cookies on <span>my service</span>"
132
+ }
133
+ ]
134
+ },
135
+ "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookie banner\">\n \n \n\n <div class=\"govuk-cookie-banner__message govuk-width-container\"\n >\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n \n <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">Cookies on <span>my service</span></h2>\n \n\n <div class=\"govuk-cookie-banner__content\"></div>\n </div>\n </div>\n\n \n </div>\n \n</div>",
136
+ "hidden": true
137
+ },
138
+ {
139
+ "name": "heading html as text",
140
+ "options": {
141
+ "messages": [
142
+ {
143
+ "headingText": "Cookies on <span>my service</span>"
144
+ }
145
+ ]
146
+ },
147
+ "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookie banner\">\n \n \n\n <div class=\"govuk-cookie-banner__message govuk-width-container\"\n >\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n \n <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">Cookies on &lt;span&gt;my service&lt;/span&gt;</h2>\n \n\n <div class=\"govuk-cookie-banner__content\"></div>\n </div>\n </div>\n\n \n </div>\n \n</div>",
148
+ "hidden": true
149
+ },
150
+ {
151
+ "name": "html",
152
+ "options": {
153
+ "messages": [
154
+ {
155
+ "html": "<p class=\"govuk-body\">We use cookies in <span>our service</span>.</p>"
156
+ }
157
+ ]
158
+ },
159
+ "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookie banner\">\n \n \n\n <div class=\"govuk-cookie-banner__message govuk-width-container\"\n >\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n \n\n <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">We use cookies in <span>our service</span>.</p></div>\n </div>\n </div>\n\n \n </div>\n \n</div>",
160
+ "hidden": true
161
+ },
162
+ {
163
+ "name": "classes",
164
+ "options": {
165
+ "messages": [
166
+ {
167
+ "classes": "app-my-class"
168
+ }
169
+ ]
170
+ },
171
+ "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookie banner\">\n \n \n \n \n\n <div class=\"govuk-cookie-banner__message govuk-width-container app-my-class\"\n >\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n \n\n <div class=\"govuk-cookie-banner__content\"></div>\n </div>\n </div>\n\n \n </div>\n \n</div>",
172
+ "hidden": true
173
+ },
174
+ {
175
+ "name": "attributes",
176
+ "options": {
177
+ "messages": [
178
+ {
179
+ "attributes": {
180
+ "data-attribute": "my-value"
181
+ }
182
+ }
183
+ ]
184
+ },
185
+ "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookie banner\">\n \n \n\n <div class=\"govuk-cookie-banner__message govuk-width-container\" data-attribute=\"my-value\"\n >\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n \n\n <div class=\"govuk-cookie-banner__content\"></div>\n </div>\n </div>\n\n \n </div>\n \n</div>",
186
+ "hidden": true
187
+ },
188
+ {
189
+ "name": "custom aria label",
190
+ "options": {
191
+ "ariaLabel": "Cookies on GOV.UK",
192
+ "messages": [
193
+ {
194
+ "text": "We use cookies on GOV.UK"
195
+ }
196
+ ]
197
+ },
198
+ "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookies on GOV.UK\">\n \n \n\n <div class=\"govuk-cookie-banner__message govuk-width-container\"\n >\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n \n\n <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">We use cookies on GOV.UK</p></div>\n </div>\n </div>\n\n \n </div>\n \n</div>",
199
+ "hidden": true
200
+ },
201
+ {
202
+ "name": "hidden",
203
+ "options": {
204
+ "messages": [
205
+ {
206
+ "hidden": true
207
+ }
208
+ ]
209
+ },
210
+ "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookie banner\">\n \n \n\n <div class=\"govuk-cookie-banner__message govuk-width-container\"\n hidden>\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n \n\n <div class=\"govuk-cookie-banner__content\"></div>\n </div>\n </div>\n\n \n </div>\n \n</div>",
211
+ "hidden": true
212
+ },
213
+ {
214
+ "name": "hidden false",
215
+ "options": {
216
+ "messages": [
217
+ {
218
+ "hidden": false
219
+ }
220
+ ]
221
+ },
222
+ "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookie banner\">\n \n \n\n <div class=\"govuk-cookie-banner__message govuk-width-container\"\n >\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n \n\n <div class=\"govuk-cookie-banner__content\"></div>\n </div>\n </div>\n\n \n </div>\n \n</div>",
223
+ "hidden": true
224
+ },
225
+ {
226
+ "name": "default action",
227
+ "options": {
228
+ "messages": [
229
+ {
230
+ "actions": [
231
+ {
232
+ "text": "This is a button"
233
+ }
234
+ ]
235
+ }
236
+ ]
237
+ },
238
+ "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookie banner\">\n \n \n\n <div class=\"govuk-cookie-banner__message govuk-width-container\"\n >\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n \n\n <div class=\"govuk-cookie-banner__content\"></div>\n </div>\n </div>\n\n \n <div class=\"govuk-button-group\">\n \n \n <button class=\"govuk-button\" data-module=\"govuk-button\">\n This is a button\n </button>\n \n \n </div>\n \n </div>\n \n</div>",
239
+ "hidden": true
240
+ },
241
+ {
242
+ "name": "link",
243
+ "options": {
244
+ "messages": [
245
+ {
246
+ "actions": [
247
+ {
248
+ "text": "This is a link",
249
+ "href": "/link"
250
+ }
251
+ ]
252
+ }
253
+ ]
254
+ },
255
+ "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookie banner\">\n \n \n\n <div class=\"govuk-cookie-banner__message govuk-width-container\"\n >\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n \n\n <div class=\"govuk-cookie-banner__content\"></div>\n </div>\n </div>\n\n \n <div class=\"govuk-button-group\">\n \n \n \n \n <a class=\"govuk-link\" href=\"/link\">This is a link</a>\n \n \n </div>\n \n </div>\n \n</div>",
256
+ "hidden": true
257
+ },
258
+ {
259
+ "name": "link with button options",
260
+ "options": {
261
+ "messages": [
262
+ {
263
+ "actions": [
264
+ {
265
+ "text": "This is a link",
266
+ "href": "/link",
267
+ "value": "cookies",
268
+ "name": "link"
269
+ }
270
+ ]
271
+ }
272
+ ]
273
+ },
274
+ "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookie banner\">\n \n \n\n <div class=\"govuk-cookie-banner__message govuk-width-container\"\n >\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n \n\n <div class=\"govuk-cookie-banner__content\"></div>\n </div>\n </div>\n\n \n <div class=\"govuk-button-group\">\n \n \n \n \n <a class=\"govuk-link\" href=\"/link\">This is a link</a>\n \n \n </div>\n \n </div>\n \n</div>",
275
+ "hidden": true
276
+ },
277
+ {
278
+ "name": "type",
279
+ "options": {
280
+ "messages": [
281
+ {
282
+ "actions": [
283
+ {
284
+ "text": "Button",
285
+ "type": "button"
286
+ }
287
+ ]
288
+ }
289
+ ]
290
+ },
291
+ "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookie banner\">\n \n \n\n <div class=\"govuk-cookie-banner__message govuk-width-container\"\n >\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n \n\n <div class=\"govuk-cookie-banner__content\"></div>\n </div>\n </div>\n\n \n <div class=\"govuk-button-group\">\n \n \n <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n Button\n </button>\n \n \n </div>\n \n </div>\n \n</div>",
292
+ "hidden": true
293
+ },
294
+ {
295
+ "name": "button classes",
296
+ "options": {
297
+ "messages": [
298
+ {
299
+ "actions": [
300
+ {
301
+ "text": "Button with custom classes",
302
+ "classes": "my-button-class app-button-class"
303
+ }
304
+ ]
305
+ }
306
+ ]
307
+ },
308
+ "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookie banner\">\n \n \n\n <div class=\"govuk-cookie-banner__message govuk-width-container\"\n >\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n \n\n <div class=\"govuk-cookie-banner__content\"></div>\n </div>\n </div>\n\n \n <div class=\"govuk-button-group\">\n \n \n <button class=\"govuk-button my-button-class app-button-class\" data-module=\"govuk-button\">\n Button with custom classes\n </button>\n \n \n </div>\n \n </div>\n \n</div>",
309
+ "hidden": true
310
+ },
311
+ {
312
+ "name": "button attributes",
313
+ "options": {
314
+ "messages": [
315
+ {
316
+ "actions": [
317
+ {
318
+ "text": "Button with attributes",
319
+ "attributes": {
320
+ "data-button-attribute": "my-value"
321
+ }
322
+ }
323
+ ]
324
+ }
325
+ ]
326
+ },
327
+ "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookie banner\">\n \n \n\n <div class=\"govuk-cookie-banner__message govuk-width-container\"\n >\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n \n\n <div class=\"govuk-cookie-banner__content\"></div>\n </div>\n </div>\n\n \n <div class=\"govuk-button-group\">\n \n \n <button class=\"govuk-button\" data-module=\"govuk-button\" data-button-attribute=\"my-value\">\n Button with attributes\n </button>\n \n \n </div>\n \n </div>\n \n</div>",
328
+ "hidden": true
329
+ },
330
+ {
331
+ "name": "link classes",
332
+ "options": {
333
+ "messages": [
334
+ {
335
+ "actions": [
336
+ {
337
+ "text": "Link with custom classes",
338
+ "href": "/my-link",
339
+ "classes": "my-link-class app-link-class"
340
+ }
341
+ ]
342
+ }
343
+ ]
344
+ },
345
+ "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookie banner\">\n \n \n\n <div class=\"govuk-cookie-banner__message govuk-width-container\"\n >\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n \n\n <div class=\"govuk-cookie-banner__content\"></div>\n </div>\n </div>\n\n \n <div class=\"govuk-button-group\">\n \n \n \n \n \n \n <a class=\"govuk-link my-link-class app-link-class\" href=\"/my-link\">Link with custom classes</a>\n \n \n </div>\n \n </div>\n \n</div>",
346
+ "hidden": true
347
+ },
348
+ {
349
+ "name": "link attributes",
350
+ "options": {
351
+ "messages": [
352
+ {
353
+ "actions": [
354
+ {
355
+ "text": "Link with attributes",
356
+ "href": "/link",
357
+ "attributes": {
358
+ "data-link-attribute": "my-value"
359
+ }
360
+ }
361
+ ]
362
+ }
363
+ ]
364
+ },
365
+ "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookie banner\">\n \n \n\n <div class=\"govuk-cookie-banner__message govuk-width-container\"\n >\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n \n\n <div class=\"govuk-cookie-banner__content\"></div>\n </div>\n </div>\n\n \n <div class=\"govuk-button-group\">\n \n \n \n \n <a class=\"govuk-link\" href=\"/link\" data-link-attribute=\"my-value\">Link with attributes</a>\n \n \n </div>\n \n </div>\n \n</div>",
366
+ "hidden": true
367
+ },
368
+ {
369
+ "name": "full banner hidden",
370
+ "options": {
371
+ "hidden": true,
372
+ "classes": "hide-cookie-banner",
373
+ "attributes": {
374
+ "data-hide-cookie-banner": "true"
375
+ },
376
+ "messages": [
377
+ {
378
+ "headingText": "Cookies on this service",
379
+ "text": "We use cookies to help understand how users use our service.",
380
+ "actions": [
381
+ {
382
+ "text": "Accept analytics cookies",
383
+ "type": "submit",
384
+ "name": "cookies",
385
+ "value": "accept"
386
+ },
387
+ {
388
+ "text": "Reject analytics cookies",
389
+ "type": "submit",
390
+ "name": "cookies",
391
+ "value": "reject"
392
+ },
393
+ {
394
+ "text": "View cookie preferences",
395
+ "href": "/cookie-preferences"
396
+ }
397
+ ]
398
+ },
399
+ {
400
+ "text": "Your cookie preferences have been saved. You have accepted cookies.",
401
+ "role": "alert",
402
+ "actions": [
403
+ {
404
+ "text": "Hide this message",
405
+ "type": "button"
406
+ }
407
+ ]
408
+ },
409
+ {
410
+ "text": "Your cookie preferences have been saved. You have rejected cookies.",
411
+ "role": "alert",
412
+ "actions": [
413
+ {
414
+ "text": "Hide this message",
415
+ "type": "button"
416
+ }
417
+ ]
418
+ }
419
+ ]
420
+ },
421
+ "html": "<div class=\"govuk-cookie-banner hide-cookie-banner\" role=\"region\" aria-label=\"Cookie banner\" hidden data-hide-cookie-banner=\"true\">\n \n \n\n <div class=\"govuk-cookie-banner__message govuk-width-container\"\n >\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n \n <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">Cookies on this service</h2>\n \n\n <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">We use cookies to help understand how users use our service.</p></div>\n </div>\n </div>\n\n \n <div class=\"govuk-button-group\">\n \n \n <button value=\"accept\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n Accept analytics cookies\n </button>\n \n \n \n <button value=\"reject\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n Reject analytics cookies\n </button>\n \n \n \n \n \n <a class=\"govuk-link\" href=\"/cookie-preferences\">View cookie preferences</a>\n \n \n </div>\n \n </div>\n \n \n \n\n <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\"\n >\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n \n\n <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">Your cookie preferences have been saved. You have accepted cookies.</p></div>\n </div>\n </div>\n\n \n <div class=\"govuk-button-group\">\n \n \n <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n Hide this message\n </button>\n \n \n </div>\n \n </div>\n \n \n \n\n <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\"\n >\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n \n\n <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">Your cookie preferences have been saved. You have rejected cookies.</p></div>\n </div>\n </div>\n\n \n <div class=\"govuk-button-group\">\n \n \n <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n Hide this message\n </button>\n \n \n </div>\n \n </div>\n \n</div>",
422
+ "hidden": true
423
+ }
424
+ ]
425
+ }
@@ -0,0 +1,132 @@
1
+ [
2
+ {
3
+ "name": "ariaLabel",
4
+ "type": "string",
5
+ "required": false,
6
+ "description": "The text for the `aria-label` which labels the cookie banner region. This region applies to all messages that the cookie banner includes. For example, the cookie message and the replacement message. Defaults to \"Cookie banner\"."
7
+ },
8
+ {
9
+ "name": "hidden",
10
+ "type": "boolean",
11
+ "required": false,
12
+ "description": "Defaults to `false`. If you set this option to `true`, the whole cookie banner is hidden, including all messages within the banner. You can use `hidden` for client-side implementations where the cookie banner HTML is present, but hidden until the cookie banner is shown using JavaScript."
13
+ },
14
+ {
15
+ "name": "classes",
16
+ "type": "string",
17
+ "required": false,
18
+ "description": "The additional classes that you want to add to the cookie banner."
19
+ },
20
+ {
21
+ "name": "attributes",
22
+ "type": "object",
23
+ "required": false,
24
+ "description": "The additional attributes that you want to add to the cookie banner. For example, data attributes."
25
+ },
26
+ {
27
+ "name": "messages",
28
+ "type": "array",
29
+ "required": true,
30
+ "description": "The different messages you can pass into the cookie banner. For example, the cookie message and the replacement message.",
31
+ "params": [
32
+ {
33
+ "name": "headingText",
34
+ "type": "string",
35
+ "required": false,
36
+ "description": "The heading text that displays in the message. You can use any string with this option. If you set `headingHtml`, `headingText` is ignored."
37
+ },
38
+ {
39
+ "name": "headingHtml",
40
+ "type": "string",
41
+ "required": false,
42
+ "description": "The heading HTML to use within the message. You can use any string with this option. If you set `headingHtml`, `headingText` is ignored. If you are not passing HTML, use `headingText`."
43
+ },
44
+ {
45
+ "name": "text",
46
+ "type": "string",
47
+ "required": true,
48
+ "description": "The text for the main content within the message. You can use any string with this option. If you set `html`, `text` is not required and is ignored."
49
+ },
50
+ {
51
+ "name": "html",
52
+ "type": "string",
53
+ "required": true,
54
+ "description": "The HTML for the main content within the message. You can use any string with this option. If you set `html`, `text` is not required and is ignored. If you are not passing HTML, use `text`."
55
+ },
56
+ {
57
+ "name": "actions",
58
+ "type": "array",
59
+ "required": false,
60
+ "description": "The buttons and links that you want to display in the message. `actions` defaults to `button` unless you set `href`, which renders the action as a link.",
61
+ "params": [
62
+ {
63
+ "name": "text",
64
+ "type": "string",
65
+ "required": true,
66
+ "description": "The button or link text."
67
+ },
68
+ {
69
+ "name": "type",
70
+ "type": "string",
71
+ "required": false,
72
+ "description": "The type of button. Does not apply if you set `href`, which renders a link. You can choose `button` or `submit`."
73
+ },
74
+ {
75
+ "name": "href",
76
+ "type": "string",
77
+ "required": false,
78
+ "description": "The `href` for a link. If you set `href`, users will see a link instead of a button."
79
+ },
80
+ {
81
+ "name": "name",
82
+ "type": "string",
83
+ "required": false,
84
+ "description": "The name attribute for the button. Does not apply if you set `href`, which makes a link."
85
+ },
86
+ {
87
+ "name": "value",
88
+ "type": "string",
89
+ "required": false,
90
+ "description": "The value attribute for the button. Does not apply if you set `href`, which makes a link."
91
+ },
92
+ {
93
+ "name": "classes",
94
+ "type": "string",
95
+ "required": false,
96
+ "description": "The additional classes that you want to add to the button or link."
97
+ },
98
+ {
99
+ "name": "attributes",
100
+ "type": "object",
101
+ "required": false,
102
+ "description": "The additional attributes that you want to add to the button or link. For example, data attributes."
103
+ }
104
+ ]
105
+ },
106
+ {
107
+ "name": "hidden",
108
+ "type": "boolean",
109
+ "required": false,
110
+ "description": "Defaults to `false`. If you set it to `true`, the message is hidden. You can use `hidden` for client-side implementations where the replacement message HTML is present, but hidden on the page."
111
+ },
112
+ {
113
+ "name": "role",
114
+ "type": "string",
115
+ "required": false,
116
+ "description": "Set `role` to `alert` on replacement messages to allow assistive tech to automatically read the message. You will also need to move focus to the replacement message using JavaScript you have written yourself."
117
+ },
118
+ {
119
+ "name": "classes",
120
+ "type": "string",
121
+ "required": false,
122
+ "description": "The additional classes that you want to add to the message."
123
+ },
124
+ {
125
+ "name": "attributes",
126
+ "type": "object",
127
+ "required": false,
128
+ "description": "The additional attributes that you want to add to the message. For example, data attributes."
129
+ }
130
+ ]
131
+ }
132
+ ]