govuk_publishing_components 23.13.1 → 24.1.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (85) 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/accordion.js +286 -4
  6. data/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js +0 -4
  7. data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js +23 -14
  8. data/app/assets/javascripts/govuk_publishing_components/vendor/polyfills/common.js +8 -0
  9. data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +0 -1
  10. data/app/assets/stylesheets/govuk_publishing_components/component_support.scss +0 -2
  11. data/app/assets/stylesheets/govuk_publishing_components/components/_accordion.scss +298 -14
  12. data/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss +34 -17
  13. data/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss +14 -8
  14. data/app/assets/stylesheets/govuk_publishing_components/components/_error-alert.scss +4 -4
  15. data/app/assets/stylesheets/govuk_publishing_components/components/_feedback.scss +35 -44
  16. data/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss +21 -5
  17. data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss +105 -48
  18. data/app/assets/stylesheets/govuk_publishing_components/components/_success-alert.scss +8 -8
  19. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_contact.scss +0 -5
  20. data/app/assets/stylesheets/govuk_publishing_components/components/print/_accordion.scss +17 -9
  21. data/app/assets/stylesheets/govuk_publishing_components/components/print/_step-by-step-nav.scss +2 -2
  22. data/app/assets/stylesheets/govuk_publishing_components/govuk_frontend_support.scss +1 -11
  23. data/app/models/govuk_publishing_components/audit_applications.rb +1 -1
  24. data/app/models/govuk_publishing_components/component_doc.rb +1 -1
  25. data/app/views/govuk_publishing_components/audit/show.html.erb +26 -26
  26. data/app/views/govuk_publishing_components/components/_accordion.html.erb +13 -20
  27. data/app/views/govuk_publishing_components/components/_attachment.html.erb +3 -3
  28. data/app/views/govuk_publishing_components/components/_contextual_sidebar.html.erb +2 -8
  29. data/app/views/govuk_publishing_components/components/_document_list.html.erb +12 -2
  30. data/app/views/govuk_publishing_components/components/_layout_footer.html.erb +9 -4
  31. data/app/views/govuk_publishing_components/components/attachment/{_thumbnail_document.svg → _thumbnail_document.html.erb} +0 -0
  32. data/app/views/govuk_publishing_components/components/attachment/{_thumbnail_generic.svg → _thumbnail_generic.html.erb} +0 -0
  33. data/app/views/govuk_publishing_components/components/attachment/{_thumbnail_spreadsheet.svg → _thumbnail_spreadsheet.html.erb} +0 -0
  34. data/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_cta.html.erb +21 -0
  35. data/app/views/govuk_publishing_components/components/docs/accordion.yml +8 -3
  36. data/app/views/govuk_publishing_components/components/docs/contextual_sidebar.yml +65 -1
  37. data/app/views/govuk_publishing_components/components/docs/document_list.yml +50 -7
  38. data/app/views/govuk_publishing_components/components/docs/govspeak.yml +3 -3
  39. data/app/views/govuk_publishing_components/components/docs/layout_header.yml +11 -0
  40. data/app/views/govuk_publishing_components/components/layout_header/_header_logo.html.erb +1 -1
  41. data/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb +9 -4
  42. data/config/initializers/assets.rb +3 -1
  43. data/config/locales/cy.yml +6 -1
  44. data/config/locales/en.yml +6 -1
  45. data/lib/govuk_publishing_components/presenters/contextual_navigation.rb +183 -2
  46. data/lib/govuk_publishing_components/version.rb +1 -1
  47. data/node_modules/govuk-frontend/govuk/all.js +1 -1
  48. data/node_modules/govuk-frontend/govuk/components/_all.scss +1 -0
  49. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/fixtures.json +10 -10
  50. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/template.njk +2 -2
  51. data/node_modules/govuk-frontend/govuk/components/button/_index.scss +2 -0
  52. data/node_modules/govuk-frontend/govuk/components/character-count/_index.scss +1 -0
  53. data/node_modules/govuk-frontend/govuk/components/character-count/character-count.js +1 -1
  54. data/node_modules/govuk-frontend/govuk/components/character-count/fixtures.json +13 -0
  55. data/node_modules/govuk-frontend/govuk/components/cookie-banner/_cookie-banner.scss +2 -0
  56. data/node_modules/govuk-frontend/govuk/components/cookie-banner/_index.scss +51 -0
  57. data/node_modules/govuk-frontend/govuk/components/cookie-banner/fixtures.json +425 -0
  58. data/node_modules/govuk-frontend/govuk/components/cookie-banner/macro-options.json +132 -0
  59. data/node_modules/govuk-frontend/govuk/components/cookie-banner/macro.njk +3 -0
  60. data/node_modules/govuk-frontend/govuk/components/cookie-banner/template.njk +63 -0
  61. data/node_modules/govuk-frontend/govuk/components/details/fixtures.json +2 -2
  62. data/node_modules/govuk-frontend/govuk/components/header/fixtures.json +18 -18
  63. data/node_modules/govuk-frontend/govuk/components/header/template.njk +4 -4
  64. data/node_modules/govuk-frontend/govuk/components/table/_index.scss +21 -0
  65. data/node_modules/govuk-frontend/govuk/components/table/macro-options.json +2 -2
  66. data/node_modules/govuk-frontend/govuk/objects/_all.scss +1 -0
  67. data/node_modules/govuk-frontend/govuk/objects/_button-group.scss +94 -0
  68. data/node_modules/govuk-frontend/package.json +1 -1
  69. metadata +16 -21
  70. data/app/assets/images/govuk_publishing_components/chevron-banner/chevron-banner-small-focus.svg +0 -4
  71. data/app/assets/images/govuk_publishing_components/chevron-banner/chevron-banner-small.svg +0 -4
  72. data/app/assets/javascripts/govuk_publishing_components/components/header.js +0 -8
  73. data/app/assets/javascripts/govuk_publishing_components/lib/auto-track-event.js +0 -31
  74. data/app/assets/stylesheets/govuk_publishing_components/components/_chevron-banner.scss +0 -138
  75. data/app/assets/stylesheets/govuk_publishing_components/components/_list.scss +0 -1
  76. data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_variables.scss +0 -27
  77. data/app/assets/stylesheets/govuk_publishing_components/components/mixins/_back-arrow.scss +0 -13
  78. data/app/assets/stylesheets/govuk_publishing_components/components/mixins/_clearfix.scss +0 -8
  79. data/app/views/govuk_publishing_components/components/_chevron_banner.html.erb +0 -19
  80. data/app/views/govuk_publishing_components/components/_subscription-links.html.erb +0 -85
  81. data/app/views/govuk_publishing_components/components/_translation-nav.html.erb +0 -33
  82. data/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_related_links.html.erb +0 -6
  83. data/app/views/govuk_publishing_components/components/docs/chevron_banner.yml +0 -33
  84. data/app/views/govuk_publishing_components/components/docs/subscription-links.yml +0 -103
  85. data/app/views/govuk_publishing_components/components/docs/translation-nav.yml +0 -139
@@ -1,3 +1,3 @@
1
1
  module GovukPublishingComponents
2
- VERSION = "23.13.1".freeze
2
+ VERSION = "24.1.1".freeze
3
3
  end
@@ -1498,7 +1498,7 @@ function CharacterCount ($module) {
1498
1498
  this.$module = $module;
1499
1499
  this.$textarea = $module.querySelector('.govuk-js-character-count');
1500
1500
  if (this.$textarea) {
1501
- this.$countMessage = $module.querySelector('[id=' + this.$textarea.id + '-info]');
1501
+ this.$countMessage = $module.querySelector('[id="' + this.$textarea.id + '-info"]');
1502
1502
  }
1503
1503
  }
1504
1504
 
@@ -6,6 +6,7 @@
6
6
  @import "button/index";
7
7
  @import "checkboxes/index";
8
8
  @import "character-count/index";
9
+ @import "cookie-banner/index";
9
10
  @import "summary-list/index";
10
11
  @import "date-input/index";
11
12
  @import "details/index";
@@ -15,7 +15,7 @@
15
15
  }
16
16
  ]
17
17
  },
18
- "html": "<div class=\"govuk-breadcrumbs \">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section\">Sub-section</a>\n </li>\n \n \n </ol>\n</div>",
18
+ "html": "<div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section\">Sub-section</a>\n </li>\n \n \n </ol>\n</div>",
19
19
  "hidden": false
20
20
  },
21
21
  {
@@ -28,7 +28,7 @@
28
28
  }
29
29
  ]
30
30
  },
31
- "html": "<div class=\"govuk-breadcrumbs \">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n </li>\n \n \n </ol>\n</div>",
31
+ "html": "<div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n </li>\n \n \n </ol>\n</div>",
32
32
  "hidden": false
33
33
  },
34
34
  {
@@ -53,7 +53,7 @@
53
53
  }
54
54
  ]
55
55
  },
56
- "html": "<div class=\"govuk-breadcrumbs \">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section\">Sub-section</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section/sub-sub-section\">Sub Sub-section</a>\n </li>\n \n \n </ol>\n</div>",
56
+ "html": "<div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section\">Sub-section</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section/sub-sub-section\">Sub Sub-section</a>\n </li>\n \n \n </ol>\n</div>",
57
57
  "hidden": false
58
58
  },
59
59
  {
@@ -70,7 +70,7 @@
70
70
  }
71
71
  ]
72
72
  },
73
- "html": "<div class=\"govuk-breadcrumbs \">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/service-manual\">Service Manual</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/service-manual/agile-delivery\">Agile Delivery</a>\n </li>\n \n \n </ol>\n</div>",
73
+ "html": "<div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/service-manual\">Service Manual</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/service-manual/agile-delivery\">Agile Delivery</a>\n </li>\n \n \n </ol>\n</div>",
74
74
  "hidden": false
75
75
  },
76
76
  {
@@ -90,7 +90,7 @@
90
90
  }
91
91
  ]
92
92
  },
93
- "html": "<div class=\"govuk-breadcrumbs \">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/browse/abroad\">Passports, travel and living abroad</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Travel abroad</li>\n \n \n </ol>\n</div>",
93
+ "html": "<div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/browse/abroad\">Passports, travel and living abroad</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Travel abroad</li>\n \n \n </ol>\n</div>",
94
94
  "hidden": false
95
95
  },
96
96
  {
@@ -112,7 +112,7 @@
112
112
  }
113
113
  ]
114
114
  },
115
- "html": "<div class=\"govuk-breadcrumbs govuk-breadcrumbs--collapse-on-mobile\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/education\">Education, training and skills</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/education/special-educational-needs-and-disability-send-and-high-needs\">Special educational needs and disability (SEND) and high needs</a>\n </li>\n \n \n </ol>\n</div>",
115
+ "html": "<div class=\"govuk-breadcrumbs govuk-breadcrumbs--collapse-on-mobile\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/education\">Education, training and skills</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/education/special-educational-needs-and-disability-send-and-high-needs\">Special educational needs and disability (SEND) and high needs</a>\n </li>\n \n \n </ol>\n</div>",
116
116
  "hidden": false
117
117
  },
118
118
  {
@@ -141,7 +141,7 @@
141
141
  }
142
142
  ]
143
143
  },
144
- "html": "<div class=\"govuk-breadcrumbs \" id=\"my-navigation\" role=\"navigation\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Home</li>\n \n \n </ol>\n</div>",
144
+ "html": "<div class=\"govuk-breadcrumbs\" id=\"my-navigation\" role=\"navigation\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Home</li>\n \n \n </ol>\n</div>",
145
145
  "hidden": true
146
146
  },
147
147
  {
@@ -158,7 +158,7 @@
158
158
  }
159
159
  ]
160
160
  },
161
- "html": "<div class=\"govuk-breadcrumbs \">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/section\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">Section 1</a>\n </li>\n \n \n </ol>\n</div>",
161
+ "html": "<div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/section\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">Section 1</a>\n </li>\n \n \n </ol>\n</div>",
162
162
  "hidden": true
163
163
  },
164
164
  {
@@ -170,7 +170,7 @@
170
170
  }
171
171
  ]
172
172
  },
173
- "html": "<div class=\"govuk-breadcrumbs \">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">&lt;span&gt;Section 1&lt;/span&gt;</li>\n \n \n </ol>\n</div>",
173
+ "html": "<div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">&lt;span&gt;Section 1&lt;/span&gt;</li>\n \n \n </ol>\n</div>",
174
174
  "hidden": true
175
175
  },
176
176
  {
@@ -186,7 +186,7 @@
186
186
  }
187
187
  ]
188
188
  },
189
- "html": "<div class=\"govuk-breadcrumbs \">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\"><em>Section 1</em></li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/section-2\"><em>Section 2</em></a>\n </li>\n \n \n </ol>\n</div>",
189
+ "html": "<div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\"><em>Section 1</em></li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/section-2\"><em>Section 2</em></a>\n </li>\n \n \n </ol>\n</div>",
190
190
  "hidden": true
191
191
  }
192
192
  ]
@@ -1,8 +1,8 @@
1
1
  {# Set classes for this component #}
2
- {%- set classNames = "govuk-breadcrumbs " -%}
2
+ {%- set classNames = "govuk-breadcrumbs" -%}
3
3
 
4
4
  {% if params.classes %}
5
- {% set classNames = classNames + params.classes %}
5
+ {% set classNames = classNames + " " + params.classes %}
6
6
  {% endif -%}
7
7
 
8
8
  {% if params.collapseOnMobile %}
@@ -29,6 +29,8 @@
29
29
  position: relative;
30
30
  width: 100%;
31
31
  margin-top: 0;
32
+ margin-right: 0;
33
+ margin-left: 0;
32
34
  @include govuk-responsive-margin(6, "bottom", $adjustment: $button-shadow-size); // s2
33
35
  padding: (govuk-spacing(2) - $govuk-border-width-form-element) govuk-spacing(2) (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2)); // s1
34
36
  border: $govuk-border-width-form-element solid transparent;
@@ -14,6 +14,7 @@
14
14
  }
15
15
 
16
16
  .govuk-character-count__message {
17
+ @include govuk-font($size: false, $tabular: true);
17
18
  margin-top: 0;
18
19
  margin-bottom: 0;
19
20
  }
@@ -1018,7 +1018,7 @@ function CharacterCount ($module) {
1018
1018
  this.$module = $module;
1019
1019
  this.$textarea = $module.querySelector('.govuk-js-character-count');
1020
1020
  if (this.$textarea) {
1021
- this.$countMessage = $module.querySelector('[id=' + this.$textarea.id + '-info]');
1021
+ this.$countMessage = $module.querySelector('[id="' + this.$textarea.id + '-info"]');
1022
1022
  }
1023
1023
  }
1024
1024
 
@@ -222,6 +222,19 @@
222
222
  },
223
223
  "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n \n\n<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"with-custom-error-class\">\n With custom error class\n </label>\n\n\n \n \n <span id=\"with-custom-error-class-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </span>\n\n <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count govuk-textarea--error app-character-count--custom-modifier\" id=\"with-custom-error-class\" name=\"with-custom-error-class\" rows=\"5\" aria-describedby=\"with-custom-error-class-info with-custom-error-class-error\"></textarea>\n</div>\n\n <div id=\"with-custom-error-class-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to 10 characters\n</div>\n\n</div>",
224
224
  "hidden": true
225
+ },
226
+ {
227
+ "name": "with id starting with number",
228
+ "options": {
229
+ "name": "more-detail",
230
+ "id": "1_more-detail",
231
+ "maxlength": 10,
232
+ "label": {
233
+ "text": "Can you provide more detail?"
234
+ }
235
+ },
236
+ "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n \n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"1_more-detail\">\n Can you provide more detail?\n </label>\n\n\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"1_more-detail\" name=\"more-detail\" rows=\"5\" aria-describedby=\"1_more-detail-info\"></textarea>\n</div>\n\n <div id=\"1_more-detail-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to 10 characters\n</div>\n\n</div>",
237
+ "hidden": true
225
238
  }
226
239
  ]
227
240
  }
@@ -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
+ }