govuk_publishing_components 23.12.3 → 24.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (123) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/images/govuk_publishing_components/take-action-amber.svg +4 -0
  3. data/app/assets/images/govuk_publishing_components/take-action-green.svg +4 -0
  4. data/app/assets/images/govuk_publishing_components/take-action-red.svg +4 -0
  5. data/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js +0 -4
  6. data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js +44 -39
  7. data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +0 -1
  8. data/app/assets/stylesheets/govuk_publishing_components/component_support.scss +0 -2
  9. data/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss +34 -17
  10. data/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss +14 -8
  11. data/app/assets/stylesheets/govuk_publishing_components/components/_error-alert.scss +4 -4
  12. data/app/assets/stylesheets/govuk_publishing_components/components/_feedback.scss +35 -44
  13. data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss +112 -47
  14. data/app/assets/stylesheets/govuk_publishing_components/components/_success-alert.scss +8 -8
  15. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_contact.scss +0 -5
  16. data/app/assets/stylesheets/govuk_publishing_components/components/print/_step-by-step-nav.scss +2 -2
  17. data/app/models/govuk_publishing_components/component_doc.rb +1 -1
  18. data/app/views/govuk_publishing_components/components/_contextual_sidebar.html.erb +2 -8
  19. data/app/views/govuk_publishing_components/components/_document_list.html.erb +12 -2
  20. data/app/views/govuk_publishing_components/components/_layout_footer.html.erb +9 -4
  21. data/app/views/govuk_publishing_components/components/_step_by_step_nav.html.erb +2 -2
  22. data/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_cta.html.erb +21 -0
  23. data/app/views/govuk_publishing_components/components/docs/contextual_sidebar.yml +65 -1
  24. data/app/views/govuk_publishing_components/components/docs/document_list.yml +50 -7
  25. data/app/views/govuk_publishing_components/components/docs/govspeak.yml +3 -3
  26. data/app/views/govuk_publishing_components/components/docs/layout_header.yml +11 -0
  27. data/app/views/govuk_publishing_components/components/docs/meta_tags.yml +99 -1
  28. data/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb +9 -4
  29. data/config/initializers/assets.rb +3 -1
  30. data/config/locales/cy.yml +6 -1
  31. data/config/locales/en.yml +8 -3
  32. data/lib/govuk_publishing_components/presenters/contextual_navigation.rb +183 -2
  33. data/lib/govuk_publishing_components/presenters/meta_tags.rb +2 -0
  34. data/lib/govuk_publishing_components/version.rb +1 -1
  35. data/node_modules/govuk-frontend/govuk/all.js +58 -1
  36. data/node_modules/govuk-frontend/govuk/components/_all.scss +2 -0
  37. data/node_modules/govuk-frontend/govuk/components/accordion/fixtures.json +25 -10
  38. data/node_modules/govuk-frontend/govuk/components/back-link/fixtures.json +12 -6
  39. data/node_modules/govuk-frontend/govuk/components/back-link/macro-options.json +4 -4
  40. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/fixtures.json +34 -13
  41. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/macro-options.json +1 -0
  42. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/template.njk +2 -2
  43. data/node_modules/govuk-frontend/govuk/components/button/_index.scss +2 -0
  44. data/node_modules/govuk-frontend/govuk/components/button/fixtures.json +74 -31
  45. data/node_modules/govuk-frontend/govuk/components/character-count/_index.scss +1 -0
  46. data/node_modules/govuk-frontend/govuk/components/character-count/character-count.js +1 -1
  47. data/node_modules/govuk-frontend/govuk/components/character-count/fixtures.json +85 -15
  48. data/node_modules/govuk-frontend/govuk/components/character-count/macro-options.json +1 -1
  49. data/node_modules/govuk-frontend/govuk/components/checkboxes/fixtures.json +145 -52
  50. data/node_modules/govuk-frontend/govuk/components/checkboxes/macro-options.json +2 -2
  51. data/node_modules/govuk-frontend/govuk/components/cookie-banner/_cookie-banner.scss +2 -0
  52. data/node_modules/govuk-frontend/govuk/components/cookie-banner/_index.scss +51 -0
  53. data/node_modules/govuk-frontend/govuk/components/cookie-banner/fixtures.json +425 -0
  54. data/node_modules/govuk-frontend/govuk/components/cookie-banner/macro-options.json +132 -0
  55. data/node_modules/govuk-frontend/govuk/components/cookie-banner/macro.njk +3 -0
  56. data/node_modules/govuk-frontend/govuk/components/cookie-banner/template.njk +63 -0
  57. data/node_modules/govuk-frontend/govuk/components/date-input/fixtures.json +84 -34
  58. data/node_modules/govuk-frontend/govuk/components/date-input/macro-options.json +1 -1
  59. data/node_modules/govuk-frontend/govuk/components/date-input/template.njk +1 -1
  60. data/node_modules/govuk-frontend/govuk/components/details/fixtures.json +35 -15
  61. data/node_modules/govuk-frontend/govuk/components/error-message/fixtures.json +21 -10
  62. data/node_modules/govuk-frontend/govuk/components/error-message/macro-options.json +1 -0
  63. data/node_modules/govuk-frontend/govuk/components/error-summary/_index.scss +2 -12
  64. data/node_modules/govuk-frontend/govuk/components/error-summary/fixtures.json +86 -25
  65. data/node_modules/govuk-frontend/govuk/components/fieldset/fixtures.json +20 -10
  66. data/node_modules/govuk-frontend/govuk/components/file-upload/fixtures.json +60 -13
  67. data/node_modules/govuk-frontend/govuk/components/footer/fixtures.json +37 -18
  68. data/node_modules/govuk-frontend/govuk/components/footer/macro-options.json +8 -5
  69. data/node_modules/govuk-frontend/govuk/components/header/fixtures.json +36 -18
  70. data/node_modules/govuk-frontend/govuk/components/header/macro-options.json +2 -2
  71. data/node_modules/govuk-frontend/govuk/components/header/template.njk +4 -4
  72. data/node_modules/govuk-frontend/govuk/components/hint/fixtures.json +17 -8
  73. data/node_modules/govuk-frontend/govuk/components/input/fixtures.json +130 -40
  74. data/node_modules/govuk-frontend/govuk/components/input/macro-options.json +1 -1
  75. data/node_modules/govuk-frontend/govuk/components/inset-text/fixtures.json +17 -8
  76. data/node_modules/govuk-frontend/govuk/components/label/fixtures.json +20 -11
  77. data/node_modules/govuk-frontend/govuk/components/label/macro-options.json +1 -1
  78. data/node_modules/govuk-frontend/govuk/components/notification-banner/README.md +15 -0
  79. data/node_modules/govuk-frontend/govuk/components/notification-banner/_index.scss +89 -0
  80. data/node_modules/govuk-frontend/govuk/components/notification-banner/_notification-banner.scss +2 -0
  81. data/node_modules/govuk-frontend/govuk/components/notification-banner/fixtures.json +212 -0
  82. data/node_modules/govuk-frontend/govuk/components/notification-banner/macro-options.json +68 -0
  83. data/node_modules/govuk-frontend/govuk/components/notification-banner/macro.njk +3 -0
  84. data/node_modules/govuk-frontend/govuk/components/notification-banner/notification-banner.js +61 -0
  85. data/node_modules/govuk-frontend/govuk/components/notification-banner/template.njk +47 -0
  86. data/node_modules/govuk-frontend/govuk/components/panel/fixtures.json +30 -13
  87. data/node_modules/govuk-frontend/govuk/components/phase-banner/fixtures.json +20 -9
  88. data/node_modules/govuk-frontend/govuk/components/radios/fixtures.json +167 -50
  89. data/node_modules/govuk-frontend/govuk/components/select/fixtures.json +97 -18
  90. data/node_modules/govuk-frontend/govuk/components/select/macro-options.json +1 -1
  91. data/node_modules/govuk-frontend/govuk/components/skip-link/fixtures.json +21 -9
  92. data/node_modules/govuk-frontend/govuk/components/summary-list/fixtures.json +118 -25
  93. data/node_modules/govuk-frontend/govuk/components/table/_index.scss +21 -0
  94. data/node_modules/govuk-frontend/govuk/components/table/fixtures.json +92 -22
  95. data/node_modules/govuk-frontend/govuk/components/table/macro-options.json +2 -2
  96. data/node_modules/govuk-frontend/govuk/components/tabs/fixtures.json +75 -18
  97. data/node_modules/govuk-frontend/govuk/components/tabs/macro-options.json +1 -1
  98. data/node_modules/govuk-frontend/govuk/components/tag/fixtures.json +28 -14
  99. data/node_modules/govuk-frontend/govuk/components/textarea/fixtures.json +68 -17
  100. data/node_modules/govuk-frontend/govuk/components/warning-text/fixtures.json +19 -14
  101. data/node_modules/govuk-frontend/govuk/helpers/_links.scss +94 -0
  102. data/node_modules/govuk-frontend/govuk/objects/_all.scss +1 -0
  103. data/node_modules/govuk-frontend/govuk/objects/_button-group.scss +94 -0
  104. data/node_modules/govuk-frontend/govuk/settings/_colours-applied.scss +9 -0
  105. data/node_modules/govuk-frontend/govuk/settings/_typography-font.scss +3 -0
  106. data/node_modules/govuk-frontend/package.json +1 -1
  107. metadata +20 -18
  108. data/app/assets/images/govuk_publishing_components/chevron-banner/chevron-banner-small-focus.svg +0 -4
  109. data/app/assets/images/govuk_publishing_components/chevron-banner/chevron-banner-small.svg +0 -4
  110. data/app/assets/javascripts/govuk_publishing_components/components/header.js +0 -8
  111. data/app/assets/javascripts/govuk_publishing_components/lib/auto-track-event.js +0 -31
  112. data/app/assets/stylesheets/govuk_publishing_components/components/_chevron-banner.scss +0 -138
  113. data/app/assets/stylesheets/govuk_publishing_components/components/_list.scss +0 -1
  114. data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_variables.scss +0 -27
  115. data/app/assets/stylesheets/govuk_publishing_components/components/mixins/_back-arrow.scss +0 -13
  116. data/app/assets/stylesheets/govuk_publishing_components/components/mixins/_clearfix.scss +0 -8
  117. data/app/views/govuk_publishing_components/components/_chevron_banner.html.erb +0 -19
  118. data/app/views/govuk_publishing_components/components/_subscription-links.html.erb +0 -85
  119. data/app/views/govuk_publishing_components/components/_translation-nav.html.erb +0 -33
  120. data/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_related_links.html.erb +0 -6
  121. data/app/views/govuk_publishing_components/components/docs/chevron_banner.yml +0 -33
  122. data/app/views/govuk_publishing_components/components/docs/subscription-links.yml +0 -103
  123. data/app/views/govuk_publishing_components/components/docs/translation-nav.yml +0 -139
@@ -74,12 +74,12 @@
74
74
  "name": "id",
75
75
  "type": "string",
76
76
  "required": false,
77
- "description": "Specific id attribute for the checkbox item. If omitted, then idPrefix option will be applied."
77
+ "description": "Specific id attribute for the checkbox item. If omitted, then component global `idPrefix` option will be applied."
78
78
  },
79
79
  {
80
80
  "name": "name",
81
81
  "type": "string",
82
- "required": true,
82
+ "required": false,
83
83
  "description": "Specific name for the checkbox item. If omitted, then component global `name` string will be applied."
84
84
  },
85
85
  {
@@ -0,0 +1,2 @@
1
+ @import "../../base";
2
+ @import "./index";
@@ -0,0 +1,51 @@
1
+ @include govuk-exports("govuk/component/cookie-banner") {
2
+
3
+ // This needs to be kept in sync with the header component's styles
4
+ $border-bottom-width: govuk-spacing(2);
5
+
6
+ .govuk-cookie-banner {
7
+ @include govuk-font($size: 19);
8
+
9
+ padding-top: govuk-spacing(4);
10
+ // The component does not set bottom spacing.
11
+ // The bottom spacing should be created by the items inside the component.
12
+
13
+ // Visually separate the cookie banner from content underneath
14
+ // when user changes colours in their browser.
15
+ border-bottom: $border-bottom-width solid transparent;
16
+
17
+ background-color: govuk-colour("light-grey", $legacy: "grey-3");
18
+ }
19
+
20
+ // Support older browsers which don't hide elements with the `hidden` attribute
21
+ // when user hides the whole cookie banner with a 'Hide' button.
22
+ .govuk-cookie-banner[hidden] {
23
+ display: none;
24
+ }
25
+
26
+ .govuk-cookie-banner__message {
27
+ // Remove the extra height added by the separator border.
28
+ margin-bottom: -$border-bottom-width;
29
+
30
+ &[hidden] {
31
+ // Support older browsers which don't hide elements with the `hidden` attribute
32
+ // when the visibility of cookie and replacement messages is toggled.
33
+ display: none;
34
+ }
35
+
36
+ &:focus {
37
+ // Remove the native visible focus indicator when the element is programmatically focused.
38
+ //
39
+ // The focused cookie banner is the first element on the page and the last thing the user
40
+ // interacted with prior to it gaining focus.
41
+ // We therefore assume that moving focus to it is not going to surprise users, and that giving
42
+ // it a visible focus indicator could be more confusing than helpful, especially as the
43
+ // element is not normally keyboard operable.
44
+ //
45
+ // We have flagged this in the research section of the guidance as something to monitor.
46
+ //
47
+ // A related discussion: https://github.com/w3c/wcag/issues/1001
48
+ outline: none;
49
+ }
50
+ }
51
+ }
@@ -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
+ }