govuk_publishing_components 24.10.0 → 24.11.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (170) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/govuk_publishing_components/analytics/pii.js +1 -1
  3. data/app/assets/javascripts/govuk_publishing_components/analytics/scroll-tracker.js +6 -248
  4. data/app/assets/javascripts/govuk_publishing_components/components/accordion.js +1 -1
  5. data/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js +1 -0
  6. data/app/assets/javascripts/govuk_publishing_components/components/feedback.js +142 -104
  7. data/app/assets/javascripts/govuk_publishing_components/components/reorderable-list.js +1 -1
  8. data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js +2 -2
  9. data/app/assets/javascripts/govuk_publishing_components/lib/trigger-event.js +18 -0
  10. data/app/assets/stylesheets/govuk_publishing_components/_all_components_print.scss +0 -11
  11. data/app/assets/stylesheets/govuk_publishing_components/components/_govspeak.scss +1 -0
  12. data/app/assets/stylesheets/govuk_publishing_components/components/_metadata.scss +15 -18
  13. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_advisory.scss +27 -24
  14. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_attachment.scss +1 -1
  15. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_button.scss +1 -0
  16. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_call-to-action.scss +1 -0
  17. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss +1 -0
  18. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_contact.scss +1 -0
  19. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_example.scss +1 -0
  20. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_footnotes.scss +1 -0
  21. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_form-download.scss +19 -16
  22. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_fraction.scss +1 -0
  23. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_highlight-answer.scss +30 -27
  24. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_images.scss +1 -0
  25. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_information-callout.scss +1 -0
  26. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_legislative-list.scss +1 -0
  27. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_place.scss +26 -21
  28. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_stat-headline.scss +1 -0
  29. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_steps.scss +19 -16
  30. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_summary.scss +21 -18
  31. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_tables.scss +1 -0
  32. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_typography.scss +1 -0
  33. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_warning-callout.scss +1 -0
  34. data/app/assets/stylesheets/govuk_publishing_components/components/print/_attachment.scss +2 -3
  35. data/app/assets/stylesheets/govuk_publishing_components/components/print/_back-link.scss +2 -3
  36. data/app/assets/stylesheets/govuk_publishing_components/components/print/_button.scss +0 -4
  37. data/app/assets/stylesheets/govuk_publishing_components/components/print/_feedback.scss +2 -3
  38. data/app/assets/stylesheets/govuk_publishing_components/components/print/_layout-footer.scss +2 -6
  39. data/app/assets/stylesheets/govuk_publishing_components/components/print/_layout-header.scss +2 -3
  40. data/app/assets/stylesheets/govuk_publishing_components/components/print/_metadata.scss +2 -6
  41. data/app/assets/stylesheets/govuk_publishing_components/components/print/_search.scss +2 -3
  42. data/app/assets/stylesheets/govuk_publishing_components/components/print/_share-links.scss +2 -3
  43. data/app/assets/stylesheets/govuk_publishing_components/components/print/_skip-link.scss +2 -3
  44. data/app/assets/stylesheets/govuk_publishing_components/components/print/_step-by-step-nav-header.scss +0 -4
  45. data/app/assets/stylesheets/govuk_publishing_components/components/print/_subscription-links.scss +2 -3
  46. data/app/assets/stylesheets/govuk_publishing_components/components/print/_translation-nav.scss +2 -3
  47. data/app/views/govuk_publishing_components/components/_attachment.html.erb +1 -1
  48. data/app/views/govuk_publishing_components/components/_back_link.html.erb +1 -1
  49. data/app/views/govuk_publishing_components/components/_button.html.erb +1 -1
  50. data/app/views/govuk_publishing_components/components/_feedback.html.erb +1 -1
  51. data/app/views/govuk_publishing_components/components/_government_navigation.html.erb +7 -7
  52. data/app/views/govuk_publishing_components/components/_layout_footer.html.erb +5 -3
  53. data/app/views/govuk_publishing_components/components/_layout_header.html.erb +1 -1
  54. data/app/views/govuk_publishing_components/components/_machine_readable_metadata.html.erb +1 -1
  55. data/app/views/govuk_publishing_components/components/_metadata.html.erb +9 -8
  56. data/app/views/govuk_publishing_components/components/_phase_banner.html.erb +1 -5
  57. data/app/views/govuk_publishing_components/components/_previous_and_next_navigation.html.erb +1 -1
  58. data/app/views/govuk_publishing_components/components/_print_link.html.erb +1 -1
  59. data/app/views/govuk_publishing_components/components/_radio.html.erb +6 -11
  60. data/app/views/govuk_publishing_components/components/_search.html.erb +1 -1
  61. data/app/views/govuk_publishing_components/components/_share_links.html.erb +1 -1
  62. data/app/views/govuk_publishing_components/components/_skip_link.html.erb +1 -1
  63. data/app/views/govuk_publishing_components/components/_step_by_step_nav.html.erb +6 -6
  64. data/app/views/govuk_publishing_components/components/_step_by_step_nav_related.html.erb +1 -1
  65. data/app/views/govuk_publishing_components/components/_subscription_links.html.erb +2 -2
  66. data/app/views/govuk_publishing_components/components/_success_alert.html.erb +1 -1
  67. data/app/views/govuk_publishing_components/components/_translation_nav.html.erb +1 -1
  68. data/app/views/govuk_publishing_components/components/docs/feedback.yml +2 -0
  69. data/app/views/govuk_publishing_components/components/docs/phase_banner.yml +2 -2
  70. data/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb +2 -2
  71. data/app/views/govuk_publishing_components/components/metadata/_sentence.html.erb +4 -4
  72. data/app/views/govuk_publishing_components/components/related_navigation/_section.html.erb +2 -2
  73. data/config/locales/ar.yml +123 -0
  74. data/config/locales/az.yml +123 -0
  75. data/config/locales/be.yml +123 -0
  76. data/config/locales/bg.yml +123 -0
  77. data/config/locales/bn.yml +123 -0
  78. data/config/locales/cs.yml +123 -0
  79. data/config/locales/cy.yml +115 -6
  80. data/config/locales/da.yml +123 -0
  81. data/config/locales/de.yml +123 -0
  82. data/config/locales/dr.yml +123 -0
  83. data/config/locales/el.yml +123 -0
  84. data/config/locales/en.yml +111 -103
  85. data/config/locales/es-419.yml +123 -0
  86. data/config/locales/es.yml +123 -0
  87. data/config/locales/et.yml +120 -0
  88. data/config/locales/fa.yml +123 -0
  89. data/config/locales/fi.yml +123 -0
  90. data/config/locales/fr.yml +120 -0
  91. data/config/locales/gd.yml +123 -0
  92. data/config/locales/gu.yml +123 -0
  93. data/config/locales/he.yml +123 -0
  94. data/config/locales/hi.yml +123 -0
  95. data/config/locales/hr.yml +123 -0
  96. data/config/locales/hu.yml +123 -0
  97. data/config/locales/hy.yml +123 -0
  98. data/config/locales/id.yml +123 -0
  99. data/config/locales/is.yml +123 -0
  100. data/config/locales/it.yml +123 -0
  101. data/config/locales/ja.yml +123 -0
  102. data/config/locales/ka.yml +123 -0
  103. data/config/locales/kk.yml +123 -0
  104. data/config/locales/ko.yml +123 -0
  105. data/config/locales/lt.yml +123 -0
  106. data/config/locales/lv.yml +123 -0
  107. data/config/locales/ms.yml +123 -0
  108. data/config/locales/mt.yml +123 -0
  109. data/config/locales/nl.yml +123 -0
  110. data/config/locales/no.yml +124 -1
  111. data/config/locales/pa-pk.yml +123 -0
  112. data/config/locales/pa.yml +123 -0
  113. data/config/locales/pl.yml +123 -0
  114. data/config/locales/ps.yml +123 -0
  115. data/config/locales/pt.yml +123 -0
  116. data/config/locales/ro.yml +123 -0
  117. data/config/locales/ru.yml +123 -0
  118. data/config/locales/si.yml +123 -0
  119. data/config/locales/sk.yml +123 -0
  120. data/config/locales/sl.yml +123 -0
  121. data/config/locales/so.yml +123 -0
  122. data/config/locales/sq.yml +123 -0
  123. data/config/locales/sr.yml +123 -0
  124. data/config/locales/sv.yml +123 -0
  125. data/config/locales/sw.yml +123 -0
  126. data/config/locales/ta.yml +123 -0
  127. data/config/locales/th.yml +123 -0
  128. data/config/locales/tk.yml +123 -0
  129. data/config/locales/tr.yml +123 -0
  130. data/config/locales/uk.yml +123 -0
  131. data/config/locales/ur.yml +123 -0
  132. data/config/locales/uz.yml +123 -0
  133. data/config/locales/vi.yml +123 -0
  134. data/config/locales/zh-hk.yml +123 -0
  135. data/config/locales/zh-tw.yml +123 -0
  136. data/config/locales/zh.yml +123 -0
  137. data/lib/govuk_publishing_components/presenters/breadcrumb_selector.rb +5 -0
  138. data/lib/govuk_publishing_components/presenters/content_breadcrumbs_based_on_taxons.rb +1 -2
  139. data/lib/govuk_publishing_components/presenters/content_item.rb +4 -0
  140. data/lib/govuk_publishing_components/presenters/contextual_navigation.rb +4 -0
  141. data/lib/govuk_publishing_components/presenters/machine_readable/page.rb +4 -0
  142. data/lib/govuk_publishing_components/version.rb +1 -1
  143. data/node_modules/govuk-frontend/govuk/components/accordion/_index.scss +7 -16
  144. data/node_modules/govuk-frontend/govuk/components/back-link/_index.scss +4 -15
  145. data/node_modules/govuk-frontend/govuk/components/character-count/macro-options.json +1 -1
  146. data/node_modules/govuk-frontend/govuk/components/checkboxes/macro-options.json +3 -3
  147. data/node_modules/govuk-frontend/govuk/components/cookie-banner/README.md +15 -0
  148. data/node_modules/govuk-frontend/govuk/components/cookie-banner/fixtures.json +40 -22
  149. data/node_modules/govuk-frontend/govuk/components/cookie-banner/macro-options.json +6 -6
  150. data/node_modules/govuk-frontend/govuk/components/cookie-banner/template.njk +15 -5
  151. data/node_modules/govuk-frontend/govuk/components/date-input/macro-options.json +2 -2
  152. data/node_modules/govuk-frontend/govuk/components/details/_index.scss +5 -1
  153. data/node_modules/govuk-frontend/govuk/components/file-upload/_index.scss +13 -14
  154. data/node_modules/govuk-frontend/govuk/components/file-upload/macro-options.json +1 -1
  155. data/node_modules/govuk-frontend/govuk/components/footer/_index.scss +14 -19
  156. data/node_modules/govuk-frontend/govuk/components/header/_index.scss +39 -21
  157. data/node_modules/govuk-frontend/govuk/components/input/macro-options.json +1 -1
  158. data/node_modules/govuk-frontend/govuk/components/phase-banner/_index.scss +1 -1
  159. data/node_modules/govuk-frontend/govuk/components/radios/macro-options.json +3 -3
  160. data/node_modules/govuk-frontend/govuk/components/select/macro-options.json +1 -1
  161. data/node_modules/govuk-frontend/govuk/components/skip-link/_index.scss +1 -1
  162. data/node_modules/govuk-frontend/govuk/components/tabs/_index.scss +1 -6
  163. data/node_modules/govuk-frontend/govuk/components/textarea/macro-options.json +1 -1
  164. data/node_modules/govuk-frontend/govuk/components/warning-text/_index.scss +10 -0
  165. data/node_modules/govuk-frontend/govuk/core/_links.scss +8 -0
  166. data/node_modules/govuk-frontend/govuk/helpers/_links.scss +153 -38
  167. data/node_modules/govuk-frontend/govuk/settings/_all.scss +2 -0
  168. data/node_modules/govuk-frontend/govuk/settings/_links.scss +62 -0
  169. data/node_modules/govuk-frontend/package.json +1 -1
  170. metadata +20 -3
@@ -1,9 +1,4 @@
1
1
  @include govuk-exports("govuk/component/accordion") {
2
-
3
- $govuk-accordion-link-colour: $govuk-link-colour;
4
- $govuk-accordion-link-hover-colour: govuk-colour("light-blue");
5
- $govuk-accordion-border-width: 3px;
6
-
7
2
  .govuk-accordion {
8
3
  @include govuk-responsive-margin(6, "bottom");
9
4
  }
@@ -98,19 +93,9 @@
98
93
  // Safe area on the right to avoid clashing with icon
99
94
  padding-right: 40px;
100
95
  border-top: 1px solid $govuk-border-colour;
101
- color: $govuk-accordion-link-colour;
102
96
  cursor: pointer;
103
97
  }
104
98
 
105
- // For devices that can't hover such as touch devices,
106
- // remove hover state as it can be stuck in that state (iOS).
107
- @media (hover: none) {
108
- .govuk-accordion__section-header:hover {
109
- border-top-color: $govuk-accordion-link-colour;
110
- box-shadow: inset 0 $govuk-accordion-border-width 0 0 $govuk-accordion-link-colour;
111
- }
112
- }
113
-
114
99
  // Buttons within the headers don’t need default styling
115
100
  .govuk-accordion__section-button {
116
101
  @include govuk-typography-common;
@@ -119,7 +104,7 @@
119
104
  margin-left: 0;
120
105
  padding: 0;
121
106
  border-width: 0;
122
- color: inherit;
107
+ color: $govuk-link-colour;
123
108
  background: none;
124
109
  text-align: left;
125
110
  cursor: pointer;
@@ -147,7 +132,13 @@
147
132
  }
148
133
 
149
134
  .govuk-accordion__section-button:hover:not(:focus) {
135
+ color: $govuk-link-hover-colour;
150
136
  text-decoration: underline;
137
+
138
+ // This needs to come after the text-decoration property otherwise
139
+ // text-decoration, as a shorthand property, resets it to auto
140
+ @include govuk-link-hover-decoration;
141
+ text-underline-offset: $govuk-link-underline-offset;
151
142
  }
152
143
 
153
144
  // For devices that can't hover such as touch devices,
@@ -24,21 +24,6 @@
24
24
  padding-left: 14px;
25
25
  }
26
26
 
27
- // Only underline if the component is linkable
28
- .govuk-back-link[href] {
29
- text-decoration: underline;
30
-
31
- // When the back link is focused, hide the bottom link border as the
32
- // focus styles has a bottom border.
33
- &:focus {
34
- text-decoration: none;
35
-
36
- &:before {
37
- border-color: $govuk-text-colour;
38
- }
39
- }
40
- }
41
-
42
27
  // Prepend left pointing chevron
43
28
  .govuk-back-link:before {
44
29
  content: "";
@@ -88,6 +73,10 @@
88
73
  }
89
74
  }
90
75
 
76
+ .govuk-back-link:focus:before {
77
+ border-color: $govuk-focus-text-colour;
78
+ }
79
+
91
80
  .govuk-back-link:after {
92
81
  content: "";
93
82
  position: absolute;
@@ -72,7 +72,7 @@
72
72
  "name": "classes",
73
73
  "type": "string",
74
74
  "required": false,
75
- "description": "Classes to add to the form group (e.g. to show error state for the whole group)"
75
+ "description": "Classes to add to the form group (for example to show error state for the whole group)"
76
76
  }
77
77
  ]
78
78
  },
@@ -9,14 +9,14 @@
9
9
  "name": "fieldset",
10
10
  "type": "object",
11
11
  "required": false,
12
- "description": "Options for the fieldset component (e.g. legend).",
12
+ "description": "Options for the fieldset component (for example legend).",
13
13
  "isComponent": true
14
14
  },
15
15
  {
16
16
  "name": "hint",
17
17
  "type": "object",
18
18
  "required": false,
19
- "description": "Options for the hint component (e.g. text).",
19
+ "description": "Options for the hint component (for example text).",
20
20
  "isComponent": true
21
21
  },
22
22
  {
@@ -36,7 +36,7 @@
36
36
  "name": "classes",
37
37
  "type": "string",
38
38
  "required": false,
39
- "description": "Classes to add to the form group (e.g. to show error state for the whole group)"
39
+ "description": "Classes to add to the form group (for example to show error state for the whole group)"
40
40
  }
41
41
  ]
42
42
  },
@@ -0,0 +1,15 @@
1
+ # Cookie banner
2
+
3
+ ## Installation
4
+
5
+ See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
6
+
7
+ ## Guidance and Examples
8
+
9
+ Find out when to use the cookie banner component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/cookie-banner).
10
+
11
+ ## Component options
12
+
13
+ Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
14
+
15
+ See [options table](https://design-system.service.gov.uk/components/cookie-banner/#options-default-cookie-banner-example) for details.
@@ -29,7 +29,7 @@
29
29
  }
30
30
  ]
31
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>",
32
+ "html": "<div class=\"govuk-cookie-banner \" data-nosnippet 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 \n <a class=\"govuk-link\" href=\"/cookie-preferences\">View cookie preferences</a>\n \n \n \n </div>\n \n </div>\n \n</div>",
33
33
  "hidden": false
34
34
  },
35
35
  {
@@ -48,7 +48,7 @@
48
48
  }
49
49
  ]
50
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>",
51
+ "html": "<div class=\"govuk-cookie-banner \" data-nosnippet 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
52
  "hidden": false
53
53
  },
54
54
  {
@@ -67,7 +67,7 @@
67
67
  }
68
68
  ]
69
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>",
70
+ "html": "<div class=\"govuk-cookie-banner \" data-nosnippet 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
71
  "hidden": false
72
72
  },
73
73
  {
@@ -120,7 +120,7 @@
120
120
  }
121
121
  ]
122
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>",
123
+ "html": "<div class=\"govuk-cookie-banner \" data-nosnippet 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 \n <a class=\"govuk-link\" href=\"/cookie-preferences\">View cookie preferences</a>\n \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
124
  "hidden": false
125
125
  },
126
126
  {
@@ -132,7 +132,7 @@
132
132
  }
133
133
  ]
134
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>",
135
+ "html": "<div class=\"govuk-cookie-banner \" data-nosnippet 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
136
  "hidden": true
137
137
  },
138
138
  {
@@ -144,7 +144,7 @@
144
144
  }
145
145
  ]
146
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>",
147
+ "html": "<div class=\"govuk-cookie-banner \" data-nosnippet 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
148
  "hidden": true
149
149
  },
150
150
  {
@@ -156,7 +156,7 @@
156
156
  }
157
157
  ]
158
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>",
159
+ "html": "<div class=\"govuk-cookie-banner \" data-nosnippet 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
160
  "hidden": true
161
161
  },
162
162
  {
@@ -168,7 +168,7 @@
168
168
  }
169
169
  ]
170
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>",
171
+ "html": "<div class=\"govuk-cookie-banner \" data-nosnippet 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
172
  "hidden": true
173
173
  },
174
174
  {
@@ -182,7 +182,7 @@
182
182
  }
183
183
  ]
184
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>",
185
+ "html": "<div class=\"govuk-cookie-banner \" data-nosnippet 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
186
  "hidden": true
187
187
  },
188
188
  {
@@ -195,7 +195,7 @@
195
195
  }
196
196
  ]
197
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>",
198
+ "html": "<div class=\"govuk-cookie-banner \" data-nosnippet 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
199
  "hidden": true
200
200
  },
201
201
  {
@@ -207,7 +207,7 @@
207
207
  }
208
208
  ]
209
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>",
210
+ "html": "<div class=\"govuk-cookie-banner \" data-nosnippet 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
211
  "hidden": true
212
212
  },
213
213
  {
@@ -219,7 +219,7 @@
219
219
  }
220
220
  ]
221
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>",
222
+ "html": "<div class=\"govuk-cookie-banner \" data-nosnippet 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
223
  "hidden": true
224
224
  },
225
225
  {
@@ -235,7 +235,7 @@
235
235
  }
236
236
  ]
237
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>",
238
+ "html": "<div class=\"govuk-cookie-banner \" data-nosnippet 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
239
  "hidden": true
240
240
  },
241
241
  {
@@ -252,11 +252,11 @@
252
252
  }
253
253
  ]
254
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>",
255
+ "html": "<div class=\"govuk-cookie-banner \" data-nosnippet 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 <a class=\"govuk-link\" href=\"/link\">This is a link</a>\n \n \n \n </div>\n \n </div>\n \n</div>",
256
256
  "hidden": true
257
257
  },
258
258
  {
259
- "name": "link with button options",
259
+ "name": "link with false button options",
260
260
  "options": {
261
261
  "messages": [
262
262
  {
@@ -271,7 +271,25 @@
271
271
  }
272
272
  ]
273
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>",
274
+ "html": "<div class=\"govuk-cookie-banner \" data-nosnippet 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 <a class=\"govuk-link\" href=\"/link\">This is a link</a>\n \n \n \n </div>\n \n </div>\n \n</div>",
275
+ "hidden": true
276
+ },
277
+ {
278
+ "name": "link as a button",
279
+ "options": {
280
+ "messages": [
281
+ {
282
+ "actions": [
283
+ {
284
+ "text": "This is a link",
285
+ "href": "/link",
286
+ "type": "button"
287
+ }
288
+ ]
289
+ }
290
+ ]
291
+ },
292
+ "html": "<div class=\"govuk-cookie-banner \" data-nosnippet 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 <a href=\"/link\" role=\"button\" draggable=\"false\" class=\"govuk-button\" data-module=\"govuk-button\">\n This is a link\n </a>\n \n \n \n </div>\n \n </div>\n \n</div>",
275
293
  "hidden": true
276
294
  },
277
295
  {
@@ -288,7 +306,7 @@
288
306
  }
289
307
  ]
290
308
  },
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>",
309
+ "html": "<div class=\"govuk-cookie-banner \" data-nosnippet 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
310
  "hidden": true
293
311
  },
294
312
  {
@@ -305,7 +323,7 @@
305
323
  }
306
324
  ]
307
325
  },
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>",
326
+ "html": "<div class=\"govuk-cookie-banner \" data-nosnippet 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
327
  "hidden": true
310
328
  },
311
329
  {
@@ -324,7 +342,7 @@
324
342
  }
325
343
  ]
326
344
  },
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>",
345
+ "html": "<div class=\"govuk-cookie-banner \" data-nosnippet 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
346
  "hidden": true
329
347
  },
330
348
  {
@@ -342,7 +360,7 @@
342
360
  }
343
361
  ]
344
362
  },
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>",
363
+ "html": "<div class=\"govuk-cookie-banner \" data-nosnippet 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 \n <a class=\"govuk-link my-link-class app-link-class\" href=\"/my-link\">Link with custom classes</a>\n \n \n \n </div>\n \n </div>\n \n</div>",
346
364
  "hidden": true
347
365
  },
348
366
  {
@@ -362,7 +380,7 @@
362
380
  }
363
381
  ]
364
382
  },
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>",
383
+ "html": "<div class=\"govuk-cookie-banner \" data-nosnippet 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 <a class=\"govuk-link\" href=\"/link\" data-link-attribute=\"my-value\">Link with attributes</a>\n \n \n \n </div>\n \n </div>\n \n</div>",
366
384
  "hidden": true
367
385
  },
368
386
  {
@@ -418,7 +436,7 @@
418
436
  }
419
437
  ]
420
438
  },
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>",
439
+ "html": "<div class=\"govuk-cookie-banner hide-cookie-banner\" data-nosnippet 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 \n <a class=\"govuk-link\" href=\"/cookie-preferences\">View cookie preferences</a>\n \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
440
  "hidden": true
423
441
  }
424
442
  ]
@@ -3,7 +3,7 @@
3
3
  "name": "ariaLabel",
4
4
  "type": "string",
5
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\"."
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 confirmation message. Defaults to \"Cookie banner\"."
7
7
  },
8
8
  {
9
9
  "name": "hidden",
@@ -27,7 +27,7 @@
27
27
  "name": "messages",
28
28
  "type": "array",
29
29
  "required": true,
30
- "description": "The different messages you can pass into the cookie banner. For example, the cookie message and the replacement message.",
30
+ "description": "The different messages you can pass into the cookie banner. For example, the cookie message and the confirmation message.",
31
31
  "params": [
32
32
  {
33
33
  "name": "headingText",
@@ -69,13 +69,13 @@
69
69
  "name": "type",
70
70
  "type": "string",
71
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`."
72
+ "description": "The type of button. You can set `button` or `submit`. Set `button` and `href` to render a link styled as a button. If you set `href`, it overrides `submit`."
73
73
  },
74
74
  {
75
75
  "name": "href",
76
76
  "type": "string",
77
77
  "required": false,
78
- "description": "The `href` for a link. If you set `href`, users will see a link instead of a button."
78
+ "description": "The `href` for a link. Set `button` and `href` to render a link styled as a button."
79
79
  },
80
80
  {
81
81
  "name": "name",
@@ -107,13 +107,13 @@
107
107
  "name": "hidden",
108
108
  "type": "boolean",
109
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."
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 confirmation message HTML is present, but hidden on the page."
111
111
  },
112
112
  {
113
113
  "name": "role",
114
114
  "type": "string",
115
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."
116
+ "description": "Set `role` to `alert` on confirmation messages to allow assistive tech to automatically read the message. You will also need to move focus to the confirmation message using JavaScript you have written yourself."
117
117
  },
118
118
  {
119
119
  "name": "classes",
@@ -1,6 +1,6 @@
1
1
  {% from "../button/macro.njk" import govukButton -%}
2
2
 
3
- <div class="govuk-cookie-banner {{ params.classes if params.classes }}" role="region" aria-label="{{ params.ariaLabel | default("Cookie banner") }}"
3
+ <div class="govuk-cookie-banner {{ params.classes if params.classes }}" data-nosnippet role="region" aria-label="{{ params.ariaLabel | default("Cookie banner") }}"
4
4
  {%- if params.hidden %} hidden{% endif %}
5
5
  {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
6
6
 
@@ -40,11 +40,21 @@
40
40
  <div class="govuk-button-group">
41
41
  {% for action in message.actions %}
42
42
  {% if action.href %}
43
- {% set linkClasses = "govuk-link" %}
44
- {% if action.classes %}
45
- {% set linkClasses = linkClasses + " " + action.classes %}
43
+ {% if action.type == "button" %}
44
+ {{ govukButton({
45
+ "text": action.text,
46
+ "type": "button",
47
+ "classes": action.classes,
48
+ "href": action.href,
49
+ "attributes": action.attributes
50
+ }) | indent(12) | trim }}
51
+ {% else %}
52
+ {% set linkClasses = "govuk-link" %}
53
+ {% if action.classes %}
54
+ {% set linkClasses = linkClasses + " " + action.classes %}
55
+ {% endif %}
56
+ <a class="{{ linkClasses }}" href="{{ action.href }}" {%- for attribute, value in action.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ action.text }}</a>
46
57
  {% endif %}
47
- <a class="{{ linkClasses }}" href="{{ action.href }}" {%- for attribute, value in action.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ action.text }}</a>
48
58
  {% else %}
49
59
  {{ govukButton({
50
60
  "text": action.text,
@@ -91,7 +91,7 @@
91
91
  "name": "classes",
92
92
  "type": "string",
93
93
  "required": false,
94
- "description": "Classes to add to the form group (e.g. to show error state for the whole group)"
94
+ "description": "Classes to add to the form group (for example to show error state for the whole group)"
95
95
  }
96
96
  ]
97
97
  },
@@ -99,7 +99,7 @@
99
99
  "name": "fieldset",
100
100
  "type": "object",
101
101
  "required": false,
102
- "description": "Options for the fieldset component (e.g. legend).",
102
+ "description": "Options for the fieldset component (for example legend).",
103
103
  "isComponent": true
104
104
  },
105
105
  {
@@ -34,7 +34,11 @@
34
34
 
35
35
  // ...but only underline the text, not the arrow
36
36
  .govuk-details__summary-text {
37
- text-decoration: underline;
37
+ @include govuk-link-decoration;
38
+ }
39
+
40
+ .govuk-details__summary:hover .govuk-details__summary-text {
41
+ @include govuk-link-hover-decoration;
38
42
  }
39
43
 
40
44
  // Remove the underline when focussed to avoid duplicate borders