@ons/design-system 70.0.6 → 70.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (308) hide show
  1. package/README.md +11 -17
  2. package/components/access-code/_macro.spec.js +145 -145
  3. package/components/access-code/access-code.dom.js +5 -5
  4. package/components/access-code/access-code.js +16 -16
  5. package/components/access-code/access-code.scss +22 -22
  6. package/components/access-code/access-code.spec.js +17 -17
  7. package/components/accordion/_macro.spec.js +154 -154
  8. package/components/accordion/accordion.dom.js +10 -10
  9. package/components/accordion/accordion.js +50 -50
  10. package/components/accordion/accordion.spec.js +104 -104
  11. package/components/address-input/_macro.spec.js +420 -420
  12. package/components/address-input/autosuggest.address.dom.js +5 -5
  13. package/components/address-input/autosuggest.address.error.js +77 -77
  14. package/components/address-input/autosuggest.address.js +357 -357
  15. package/components/address-input/autosuggest.address.setter.js +95 -95
  16. package/components/address-input/autosuggest.address.spec.js +668 -651
  17. package/components/address-input/example-address-input-editable.njk +1 -1
  18. package/components/address-input/example-address-input.njk +1 -1
  19. package/components/address-output/_address-output.scss +3 -3
  20. package/components/address-output/_macro.spec.js +84 -84
  21. package/components/autosuggest/_autosuggest.scss +114 -114
  22. package/components/autosuggest/_macro.spec.js +255 -255
  23. package/components/autosuggest/autosuggest.dom.js +5 -5
  24. package/components/autosuggest/autosuggest.helpers.js +11 -11
  25. package/components/autosuggest/autosuggest.helpers.spec.js +73 -73
  26. package/components/autosuggest/autosuggest.js +20 -20
  27. package/components/autosuggest/autosuggest.spec.js +542 -536
  28. package/components/autosuggest/autosuggest.ui.js +478 -475
  29. package/components/autosuggest/fuse-config.js +17 -17
  30. package/components/back-to-top/_back-to-top.scss +27 -27
  31. package/components/back-to-top/_macro.spec.js +49 -49
  32. package/components/back-to-top/back-to-top.dom.js +5 -5
  33. package/components/back-to-top/back-to-top.js +52 -52
  34. package/components/back-to-top/back-to-top.spec.js +106 -106
  35. package/components/back-to-top/example-back-to-top.njk +6 -6
  36. package/components/breadcrumbs/_breadcrumbs.scss +63 -65
  37. package/components/breadcrumbs/_macro.spec.js +91 -91
  38. package/components/browser-banner/_browser-banner.scss +23 -23
  39. package/components/browser-banner/_macro.spec.js +92 -92
  40. package/components/button/_button.scss +482 -483
  41. package/components/button/_macro.spec.js +363 -363
  42. package/components/button/button.dom.js +15 -15
  43. package/components/button/button.js +53 -53
  44. package/components/button/button.spec.js +248 -240
  45. package/components/call-to-action/_call-to-action.scss +5 -5
  46. package/components/call-to-action/_macro.spec.js +28 -28
  47. package/components/card/_card.scss +23 -23
  48. package/components/card/_macro.spec.js +180 -180
  49. package/components/char-check-limit/_macro.spec.js +48 -48
  50. package/components/char-check-limit/character-check.js +58 -58
  51. package/components/char-check-limit/character-check.spec.js +173 -173
  52. package/components/char-check-limit/character-limit.js +40 -40
  53. package/components/checkboxes/_checkbox-macro.spec.js +355 -355
  54. package/components/checkboxes/_checkbox.scss +180 -180
  55. package/components/checkboxes/_checkboxes.scss +37 -27
  56. package/components/checkboxes/_macro.spec.js +261 -261
  57. package/components/checkboxes/checkbox-with-autoselect.js +32 -32
  58. package/components/checkboxes/checkbox-with-fieldset.js +21 -21
  59. package/components/checkboxes/checkboxes-with-reveal.js +10 -10
  60. package/components/checkboxes/checkboxes.dom.js +27 -27
  61. package/components/checkboxes/checkboxes.spec.js +183 -183
  62. package/components/content-pagination/_content-pagination.scss +41 -41
  63. package/components/content-pagination/_macro.spec.js +159 -159
  64. package/components/cookies-banner/_cookies-banner.scss +22 -22
  65. package/components/cookies-banner/_macro.spec.js +177 -177
  66. package/components/cookies-banner/cookies-banner.dom.js +7 -7
  67. package/components/cookies-banner/cookies-banner.js +76 -76
  68. package/components/cookies-banner/cookies-banner.spec.js +72 -68
  69. package/components/date-input/_macro.spec.js +338 -338
  70. package/components/description-list/_description-list.scss +23 -23
  71. package/components/description-list/_macro.spec.js +144 -144
  72. package/components/details/_details.scss +109 -109
  73. package/components/details/_macro.spec.js +132 -132
  74. package/components/details/details.dom.js +6 -6
  75. package/components/details/details.js +60 -60
  76. package/components/details/details.spec.js +106 -106
  77. package/components/document-list/_macro.spec.js +444 -444
  78. package/components/document-list/document-list.scss +145 -149
  79. package/components/download-resources/_download-resources.scss +109 -108
  80. package/components/download-resources/download-resources.js +907 -900
  81. package/components/download-resources/download-resources.spec.js +461 -461
  82. package/components/duration/_macro.spec.js +291 -291
  83. package/components/error/_macro.spec.js +72 -72
  84. package/components/external-link/_external-link.scss +19 -19
  85. package/components/external-link/_macro.spec.js +68 -68
  86. package/components/feedback/_feedback.scss +31 -31
  87. package/components/feedback/_macro.spec.js +72 -72
  88. package/components/field/_field-group.scss +10 -10
  89. package/components/field/_field.scss +16 -16
  90. package/components/field/_macro.spec.js +80 -80
  91. package/components/fieldset/_fieldset.scss +27 -27
  92. package/components/fieldset/_macro.spec.js +161 -161
  93. package/components/footer/_footer.scss +45 -45
  94. package/components/footer/_macro.spec.js +452 -452
  95. package/components/header/_header.scss +202 -202
  96. package/components/header/_macro.spec.js +833 -829
  97. package/components/helpers/_grid.scss +4 -4
  98. package/components/hero/_hero.scss +48 -48
  99. package/components/hero/_macro.spec.js +59 -59
  100. package/components/icon/_icon.scss +44 -44
  101. package/components/icon/_macro.spec.js +110 -110
  102. package/components/image/_image.scss +11 -11
  103. package/components/image/_macro.spec.js +81 -81
  104. package/components/input/_input-type.scss +86 -89
  105. package/components/input/_input.scss +123 -124
  106. package/components/input/_macro.spec.js +604 -604
  107. package/components/input/character-check.dom.js +5 -5
  108. package/components/input/input.dom.js +5 -5
  109. package/components/input/input.js +10 -10
  110. package/components/input/input.spec.js +18 -18
  111. package/components/label/_label.scss +24 -24
  112. package/components/label/_macro.spec.js +173 -170
  113. package/components/language-selector/_macro.spec.js +97 -97
  114. package/components/language-selector/language.scss +7 -7
  115. package/components/list/_list.scss +84 -84
  116. package/components/list/_macro.njk +2 -2
  117. package/components/list/_macro.spec.js +583 -583
  118. package/components/message/_macro.njk +5 -5
  119. package/components/message/_macro.spec.js +74 -74
  120. package/components/message/_message.scss +39 -39
  121. package/components/message-list/_macro.spec.js +86 -86
  122. package/components/message-list/_message-list.scss +16 -16
  123. package/components/modal/_macro.spec.js +69 -69
  124. package/components/modal/_modal.scss +36 -36
  125. package/components/modal/modal.dom.js +6 -6
  126. package/components/modal/modal.js +89 -89
  127. package/components/modal/modal.spec.js +50 -50
  128. package/components/mutually-exclusive/_macro.spec.js +140 -140
  129. package/components/mutually-exclusive/mutually-exclusive.checkboxes.spec.js +188 -188
  130. package/components/mutually-exclusive/mutually-exclusive.date.spec.js +211 -211
  131. package/components/mutually-exclusive/mutually-exclusive.dom.js +5 -5
  132. package/components/mutually-exclusive/mutually-exclusive.duration.spec.js +210 -210
  133. package/components/mutually-exclusive/mutually-exclusive.email.spec.js +90 -90
  134. package/components/mutually-exclusive/mutually-exclusive.js +137 -137
  135. package/components/mutually-exclusive/mutually-exclusive.multiple-options.checkboxes.spec.js +197 -197
  136. package/components/mutually-exclusive/mutually-exclusive.number.spec.js +96 -96
  137. package/components/mutually-exclusive/mutually-exclusive.textarea.spec.js +102 -102
  138. package/components/navigation/_macro.spec.js +360 -354
  139. package/components/navigation/_navigation.scss +122 -123
  140. package/components/navigation/navigation.dom.js +35 -35
  141. package/components/navigation/navigation.js +49 -49
  142. package/components/navigation/navigation.spec.js +249 -249
  143. package/components/pagination/_macro.spec.js +342 -335
  144. package/components/pagination/_pagination.scss +58 -58
  145. package/components/panel/_macro.spec.js +372 -372
  146. package/components/panel/_panel.scss +200 -199
  147. package/components/password/_macro.spec.js +95 -95
  148. package/components/password/password.dom.js +5 -5
  149. package/components/password/password.js +10 -10
  150. package/components/password/password.spec.js +26 -26
  151. package/components/phase-banner/_macro.spec.js +86 -86
  152. package/components/phase-banner/_phase-banner.scss +16 -16
  153. package/components/question/_macro.spec.js +235 -235
  154. package/components/question/_question.scss +24 -24
  155. package/components/quote/_macro.spec.js +52 -52
  156. package/components/quote/_quote.scss +24 -24
  157. package/components/radios/_macro.spec.js +524 -524
  158. package/components/radios/_radio.scss +49 -48
  159. package/components/radios/_radios.scss +14 -20
  160. package/components/radios/check-radios.js +21 -21
  161. package/components/radios/clear-radios.js +45 -45
  162. package/components/radios/radio-with-fieldset.js +22 -22
  163. package/components/radios/radios.dom.js +32 -32
  164. package/components/radios/radios.spec.js +251 -251
  165. package/components/related-content/_macro.spec.js +109 -109
  166. package/components/related-content/_related-content.scss +12 -12
  167. package/components/related-content/_section-macro.spec.js +20 -20
  168. package/components/relationships/_macro.spec.js +94 -94
  169. package/components/relationships/_relationships.scss +9 -9
  170. package/components/relationships/relationships.dom.js +5 -5
  171. package/components/relationships/relationships.js +18 -18
  172. package/components/relationships/relationships.spec.js +71 -71
  173. package/components/reply/_macro.spec.js +47 -47
  174. package/components/reply/reply-input.js +15 -15
  175. package/components/reply/reply.dom.js +5 -5
  176. package/components/reply/reply.spec.js +57 -57
  177. package/components/section-navigation/_macro.spec.js +210 -210
  178. package/components/section-navigation/_section-navigation.scss +76 -76
  179. package/components/select/_macro.spec.js +166 -166
  180. package/components/share-page/_macro.spec.js +68 -68
  181. package/components/skip-to-content/_macro.spec.js +54 -54
  182. package/components/skip-to-content/_skip.scss +30 -30
  183. package/components/skip-to-content/skip-to-content.dom.js +6 -6
  184. package/components/skip-to-content/skip-to-content.js +7 -7
  185. package/components/skip-to-content/skip-to-content.spec.js +21 -21
  186. package/components/status/_macro.spec.js +53 -53
  187. package/components/status/_status.scss +32 -32
  188. package/components/summary/_macro.spec.js +551 -535
  189. package/components/summary/_summary.scss +191 -195
  190. package/components/table/_macro.spec.js +499 -499
  191. package/components/table/_table.scss +204 -201
  192. package/components/table/scrollable-table.dom.js +5 -5
  193. package/components/table/scrollable-table.js +60 -60
  194. package/components/table/sortable-table.dom.js +5 -5
  195. package/components/table/sortable-table.js +135 -135
  196. package/components/table/table.spec.js +144 -140
  197. package/components/table-of-contents/_macro.spec.js +125 -125
  198. package/components/table-of-contents/_toc.scss +9 -9
  199. package/components/table-of-contents/toc.dom.js +5 -5
  200. package/components/table-of-contents/toc.js +30 -30
  201. package/components/table-of-contents/toc.spec.js +88 -88
  202. package/components/tabs/_macro.spec.js +92 -92
  203. package/components/tabs/_tabs.scss +120 -115
  204. package/components/tabs/tabs.dom.js +5 -5
  205. package/components/tabs/tabs.js +266 -266
  206. package/components/tabs/tabs.spec.js +268 -268
  207. package/components/text-indent/_macro.spec.js +33 -33
  208. package/components/text-indent/_text-indent.scss +3 -3
  209. package/components/textarea/_macro.spec.js +238 -238
  210. package/components/textarea/textarea.dom.js +5 -5
  211. package/components/textarea/textarea.spec.js +78 -74
  212. package/components/timeline/_macro.spec.js +83 -83
  213. package/components/timeline/_timeline.scss +26 -26
  214. package/components/timeout-modal/_macro.spec.js +47 -47
  215. package/components/timeout-modal/timeout-modal.dom.js +9 -9
  216. package/components/timeout-modal/timeout-modal.js +66 -66
  217. package/components/timeout-modal/timeout-modal.spec.js +157 -157
  218. package/components/timeout-panel/_macro.spec.js +41 -41
  219. package/components/timeout-panel/timeout-panel.dom.js +8 -8
  220. package/components/timeout-panel/timeout-panel.spec.js +118 -118
  221. package/components/upload/_macro.spec.js +52 -52
  222. package/components/upload/_upload.scss +28 -28
  223. package/components/video/_macro.spec.js +42 -42
  224. package/components/video/_video.scss +16 -16
  225. package/components/video/video.dom.js +5 -5
  226. package/components/video/video.js +32 -32
  227. package/components/video/video.spec.js +103 -97
  228. package/css/main.css +1 -1
  229. package/favicons/android-chrome-192x192.png +0 -0
  230. package/favicons/android-chrome-512x512.png +0 -0
  231. package/favicons/apple-touch-icon.png +0 -0
  232. package/favicons/favicon-16x16.png +0 -0
  233. package/favicons/favicon-32x32.png +0 -0
  234. package/favicons/favicon.ico +0 -0
  235. package/favicons/manifest.json +25 -25
  236. package/favicons/maskable_icon.png +0 -0
  237. package/favicons/opengraph.png +0 -0
  238. package/favicons/twitter.png +0 -0
  239. package/img/large/alison-pritchard-featured.jpg +0 -0
  240. package/img/large/alison-pritchard.jpg +0 -0
  241. package/img/large/census-monuments-lights-featured.jpg +0 -0
  242. package/img/large/census-monuments-lights.jpg +0 -0
  243. package/img/large/mother-and-daughter-in-ireland.jpg +0 -0
  244. package/img/large/mum-and-child-healthcare-belfast.jpg +0 -0
  245. package/img/large/ons-award-winners.jpg +0 -0
  246. package/img/large/placeholder-card.png +0 -0
  247. package/img/large/placeholder-news-medium.png +0 -0
  248. package/img/large/placeholder-news.png +0 -0
  249. package/img/large/placeholder-portrait.png +0 -0
  250. package/img/large/students.jpg +0 -0
  251. package/img/large/woman-in-purple-dress-shirt.jpg +0 -0
  252. package/img/small/alison-pritchard-featured.jpg +0 -0
  253. package/img/small/alison-pritchard.jpg +0 -0
  254. package/img/small/census-monuments-lights-featured.jpg +0 -0
  255. package/img/small/census-monuments-lights.jpg +0 -0
  256. package/img/small/mother-and-daughter-in-ireland.jpg +0 -0
  257. package/img/small/mum-and-child-healthcare-belfast.jpg +0 -0
  258. package/img/small/ons-award-winners.jpg +0 -0
  259. package/img/small/placeholder-card.png +0 -0
  260. package/img/small/placeholder-news-medium.png +0 -0
  261. package/img/small/placeholder-news.png +0 -0
  262. package/img/small/placeholder-portrait.png +0 -0
  263. package/img/small/students.jpg +0 -0
  264. package/img/small/woman-in-purple-dress-shirt.jpg +0 -0
  265. package/js/abortable-fetch.js +23 -23
  266. package/js/analytics.js +53 -53
  267. package/js/cookies-functions.js +135 -135
  268. package/js/cookies-settings.dom.js +7 -7
  269. package/js/cookies-settings.js +77 -77
  270. package/js/cookies-settings.spec.js +106 -106
  271. package/js/domready.js +8 -8
  272. package/js/fetch.js +14 -14
  273. package/js/inpagelink.dom.js +5 -5
  274. package/js/inpagelink.js +19 -19
  275. package/js/polyfills.js +0 -1
  276. package/js/print-button.js +6 -6
  277. package/js/timeout.js +211 -211
  278. package/layout/_template.njk +5 -7
  279. package/package.json +131 -127
  280. package/scripts/main.es5.js +1 -1
  281. package/scripts/main.js +1 -1
  282. package/scss/base/_forms.scss +10 -10
  283. package/scss/base/_global.scss +45 -44
  284. package/scss/base/_typography.scss +20 -20
  285. package/scss/helpers/_functions.scss +18 -15
  286. package/scss/helpers/_mixins.scss +59 -53
  287. package/scss/helpers/_mq.scss +62 -65
  288. package/scss/objects/_container.scss +20 -20
  289. package/scss/objects/_page.scss +33 -33
  290. package/scss/objects/_spacing.scss +10 -10
  291. package/scss/overrides/hcm.scss +237 -237
  292. package/scss/overrides/rtl.scss +95 -95
  293. package/scss/print.scss +47 -47
  294. package/scss/utilities/_border.scss +7 -7
  295. package/scss/utilities/_colors.scss +6 -6
  296. package/scss/utilities/_display.scss +8 -8
  297. package/scss/utilities/_float.scss +7 -7
  298. package/scss/utilities/_grid.scss +144 -144
  299. package/scss/utilities/_highlight.scss +4 -4
  300. package/scss/utilities/_margin.scss +17 -17
  301. package/scss/utilities/_pad.scss +15 -15
  302. package/scss/utilities/_typography.scss +35 -33
  303. package/scss/utilities/_utilities.scss +8 -8
  304. package/scss/utilities/_visibility.scss +25 -25
  305. package/scss/vars/_colors.scss +116 -116
  306. package/scss/vars/_forms.scss +22 -22
  307. package/scss/vars/_grid.scss +11 -9
  308. package/scss/vars/_typography.scss +54 -54
@@ -6,246 +6,246 @@ import axe from '../../tests/helpers/axe';
6
6
  import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
7
7
 
8
8
  const EXAMPLE_COOKIES_BANNER_PARAMS = {
9
- ariaLabel: 'Cookies banner override',
10
- serviceName: 'ons.gov.uk override',
11
- statementTitle: 'Cookies on override',
12
- settingsLinkText: 'Cookie settings override',
13
- settingsLinkTextURL: '/cookiesoverride',
14
- statementText: 'Statement override',
15
- acceptButtonText: 'Accept additional cookies override',
16
- rejectButtonText: 'Reject additional cookies override',
17
- preferencesText: 'Text override',
18
- confirmationButtonText: 'Hide override',
19
- contextSuffix: 'the cookie message override',
9
+ ariaLabel: 'Cookies banner override',
10
+ serviceName: 'ons.gov.uk override',
11
+ statementTitle: 'Cookies on override',
12
+ settingsLinkText: 'Cookie settings override',
13
+ settingsLinkTextURL: '/cookiesoverride',
14
+ statementText: 'Statement override',
15
+ acceptButtonText: 'Accept additional cookies override',
16
+ rejectButtonText: 'Reject additional cookies override',
17
+ preferencesText: 'Text override',
18
+ confirmationButtonText: 'Hide override',
19
+ contextSuffix: 'the cookie message override',
20
20
  };
21
21
 
22
22
  describe('macro: cookies-banner', () => {
23
- describe.each([
24
- ['default parameters', {}],
25
- ['provided parameters', EXAMPLE_COOKIES_BANNER_PARAMS],
26
- ])('mode: %s', (_, params) => {
27
- it('passes jest-axe checks', async () => {
28
- const $ = cheerio.load(renderComponent('cookies-banner', params));
29
-
30
- const results = await axe($.html());
31
- expect(results).toHaveNoViolations();
23
+ describe.each([
24
+ ['default parameters', {}],
25
+ ['provided parameters', EXAMPLE_COOKIES_BANNER_PARAMS],
26
+ ])('mode: %s', (_, params) => {
27
+ it('passes jest-axe checks', async () => {
28
+ const $ = cheerio.load(renderComponent('cookies-banner', params));
29
+
30
+ const results = await axe($.html());
31
+ expect(results).toHaveNoViolations();
32
+ });
32
33
  });
33
- });
34
34
 
35
- describe('mode: provided parameters', () => {
36
- it('has the correct `aria-label`', () => {
37
- const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS));
35
+ describe('mode: provided parameters', () => {
36
+ it('has the correct `aria-label`', () => {
37
+ const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS));
38
38
 
39
- expect($('.ons-cookies-banner').attr('aria-label')).toBe('Cookies banner override');
40
- });
39
+ expect($('.ons-cookies-banner').attr('aria-label')).toBe('Cookies banner override');
40
+ });
41
41
 
42
- describe('initial banner', () => {
43
- it('has `statementTitle` title text', () => {
44
- const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS));
42
+ describe('initial banner', () => {
43
+ it('has `statementTitle` title text', () => {
44
+ const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS));
45
45
 
46
- const statementTitle = $('.ons-cookies-banner__title').text().trim();
47
- expect(statementTitle).toBe('Cookies on override ons.gov.uk override');
48
- });
46
+ const statementTitle = $('.ons-cookies-banner__title').text().trim();
47
+ expect(statementTitle).toBe('Cookies on override ons.gov.uk override');
48
+ });
49
49
 
50
- it('has `statementText` text', () => {
51
- const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS));
50
+ it('has `statementText` text', () => {
51
+ const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS));
52
52
 
53
- const statementText = $('.ons-cookies-banner__primary .ons-cookies-banner__statement').html().trim();
54
- expect(statementText).toBe('Statement override');
55
- });
53
+ const statementText = $('.ons-cookies-banner__primary .ons-cookies-banner__statement').html().trim();
54
+ expect(statementText).toBe('Statement override');
55
+ });
56
56
 
57
- it('Renders an `accept` button with correct text', () => {
58
- const faker = templateFaker();
59
- const buttonSpy = faker.spy('button');
57
+ it('Renders an `accept` button with correct text', () => {
58
+ const faker = templateFaker();
59
+ const buttonSpy = faker.spy('button');
60
60
 
61
- faker.renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS);
61
+ faker.renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS);
62
62
 
63
- expect(buttonSpy.occurrences[0].text).toBe('Accept additional cookies override');
64
- });
63
+ expect(buttonSpy.occurrences[0].text).toBe('Accept additional cookies override');
64
+ });
65
65
 
66
- it('Renders a `reject` button with correct text', () => {
67
- const faker = templateFaker();
68
- const buttonSpy = faker.spy('button');
66
+ it('Renders a `reject` button with correct text', () => {
67
+ const faker = templateFaker();
68
+ const buttonSpy = faker.spy('button');
69
69
 
70
- faker.renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS);
70
+ faker.renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS);
71
71
 
72
- expect(buttonSpy.occurrences[1].text).toBe('Reject additional cookies override');
73
- });
72
+ expect(buttonSpy.occurrences[1].text).toBe('Reject additional cookies override');
73
+ });
74
74
 
75
- it('Renders a link with text', () => {
76
- const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS));
75
+ it('Renders a link with text', () => {
76
+ const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS));
77
77
 
78
- const linkText = $('.ons-cookies-banner__link').text().trim();
79
- expect(linkText).toBe('Cookie settings override');
80
- });
78
+ const linkText = $('.ons-cookies-banner__link').text().trim();
79
+ expect(linkText).toBe('Cookie settings override');
80
+ });
81
81
 
82
- it('Renders a link with url', () => {
83
- const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS));
82
+ it('Renders a link with url', () => {
83
+ const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS));
84
84
 
85
- const linkText = $('.ons-cookies-banner__link').attr('href');
86
- expect(linkText).toBe('/cookiesoverride');
87
- });
88
- });
85
+ const linkText = $('.ons-cookies-banner__link').attr('href');
86
+ expect(linkText).toBe('/cookiesoverride');
87
+ });
88
+ });
89
89
 
90
- describe('confirmation banner', () => {
91
- it('has `preferencesText` text', () => {
92
- const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS));
90
+ describe('confirmation banner', () => {
91
+ it('has `preferencesText` text', () => {
92
+ const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS));
93
93
 
94
- const preferencesText = $('.ons-cookies-banner__confirmation .ons-cookies-banner__preferences-text').html().trim();
95
- expect(preferencesText).toBe('Text override');
96
- });
94
+ const preferencesText = $('.ons-cookies-banner__confirmation .ons-cookies-banner__preferences-text').html().trim();
95
+ expect(preferencesText).toBe('Text override');
96
+ });
97
97
 
98
- it('renders a button with text', () => {
99
- const faker = templateFaker();
100
- const buttonSpy = faker.spy('button');
98
+ it('renders a button with text', () => {
99
+ const faker = templateFaker();
100
+ const buttonSpy = faker.spy('button');
101
101
 
102
- faker.renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS);
102
+ faker.renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS);
103
103
 
104
- expect(buttonSpy.occurrences[2].text).toBe('Hide override');
105
- });
104
+ expect(buttonSpy.occurrences[2].text).toBe('Hide override');
105
+ });
106
106
 
107
- it('has the correct `contextSuffix` for `buttonContext`', () => {
108
- const faker = templateFaker();
109
- const buttonSpy = faker.spy('button');
107
+ it('has the correct `contextSuffix` for `buttonContext`', () => {
108
+ const faker = templateFaker();
109
+ const buttonSpy = faker.spy('button');
110
110
 
111
- faker.renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS);
111
+ faker.renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS);
112
112
 
113
- expect(buttonSpy.occurrences[2].buttonContext).toBe('the cookie message override');
114
- });
113
+ expect(buttonSpy.occurrences[2].buttonContext).toBe('the cookie message override');
114
+ });
115
+ });
115
116
  });
116
- });
117
117
 
118
- describe('mode: default parameters', () => {
119
- it('has the correct `aria-label`', () => {
120
- const $ = cheerio.load(renderComponent('cookies-banner', {}));
118
+ describe('mode: default parameters', () => {
119
+ it('has the correct `aria-label`', () => {
120
+ const $ = cheerio.load(renderComponent('cookies-banner', {}));
121
121
 
122
- expect($('.ons-cookies-banner').attr('aria-label')).toBe('Cookies banner');
123
- });
122
+ expect($('.ons-cookies-banner').attr('aria-label')).toBe('Cookies banner');
123
+ });
124
124
 
125
- describe('initial banner', () => {
126
- it('has `statementTitle` title text', () => {
127
- const $ = cheerio.load(renderComponent('cookies-banner', {}));
125
+ describe('initial banner', () => {
126
+ it('has `statementTitle` title text', () => {
127
+ const $ = cheerio.load(renderComponent('cookies-banner', {}));
128
128
 
129
- const statementTitle = $('.ons-cookies-banner__title').text().trim();
130
- expect(statementTitle).toBe('Cookies on ons.gov.uk');
131
- });
129
+ const statementTitle = $('.ons-cookies-banner__title').text().trim();
130
+ expect(statementTitle).toBe('Cookies on ons.gov.uk');
131
+ });
132
132
 
133
- it('has `statementText` text', () => {
134
- const $ = cheerio.load(renderComponent('cookies-banner', {}));
133
+ it('has `statementText` text', () => {
134
+ const $ = cheerio.load(renderComponent('cookies-banner', {}));
135
135
 
136
- const statementText = $('.ons-cookies-banner__primary .ons-cookies-banner__statement').html().trim();
137
- expect(statementText).toBe(
138
- '<p>Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.</p><p>We would like to set <a href="/cookies">additional cookies</a> to remember your settings and understand how you use the site. This helps us to improve our services. </p>',
139
- );
140
- });
136
+ const statementText = $('.ons-cookies-banner__primary .ons-cookies-banner__statement').html().trim();
137
+ expect(statementText).toBe(
138
+ '<p>Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.</p><p>We would like to set <a href="/cookies">additional cookies</a> to remember your settings and understand how you use the site. This helps us to improve our services. </p>',
139
+ );
140
+ });
141
141
 
142
- it('Renders an `accept` button with correct text', () => {
143
- const faker = templateFaker();
144
- const buttonSpy = faker.spy('button');
142
+ it('Renders an `accept` button with correct text', () => {
143
+ const faker = templateFaker();
144
+ const buttonSpy = faker.spy('button');
145
145
 
146
- faker.renderComponent('cookies-banner', {});
146
+ faker.renderComponent('cookies-banner', {});
147
147
 
148
- expect(buttonSpy.occurrences[0].text).toBe('Accept additional cookies');
149
- });
148
+ expect(buttonSpy.occurrences[0].text).toBe('Accept additional cookies');
149
+ });
150
150
 
151
- it('Renders a `reject` button with correct text', () => {
152
- const faker = templateFaker();
153
- const buttonSpy = faker.spy('button');
151
+ it('Renders a `reject` button with correct text', () => {
152
+ const faker = templateFaker();
153
+ const buttonSpy = faker.spy('button');
154
154
 
155
- faker.renderComponent('cookies-banner', {});
155
+ faker.renderComponent('cookies-banner', {});
156
156
 
157
- expect(buttonSpy.occurrences[1].text).toBe('Reject additional cookies');
158
- });
157
+ expect(buttonSpy.occurrences[1].text).toBe('Reject additional cookies');
158
+ });
159
159
 
160
- it('Renders a link with text', () => {
161
- const $ = cheerio.load(renderComponent('cookies-banner', {}));
160
+ it('Renders a link with text', () => {
161
+ const $ = cheerio.load(renderComponent('cookies-banner', {}));
162
162
 
163
- const linkText = $('.ons-cookies-banner__link').text().trim();
164
- expect(linkText).toBe('View cookies');
165
- });
163
+ const linkText = $('.ons-cookies-banner__link').text().trim();
164
+ expect(linkText).toBe('View cookies');
165
+ });
166
166
 
167
- it('Renders a link with url', () => {
168
- const $ = cheerio.load(renderComponent('cookies-banner', {}));
167
+ it('Renders a link with url', () => {
168
+ const $ = cheerio.load(renderComponent('cookies-banner', {}));
169
169
 
170
- const linkText = $('.ons-cookies-banner__link').attr('href');
171
- expect(linkText).toBe('/cookies');
172
- });
170
+ const linkText = $('.ons-cookies-banner__link').attr('href');
171
+ expect(linkText).toBe('/cookies');
172
+ });
173
173
 
174
- it('has `container--wide` class when `wide` is true', () => {
175
- const $ = cheerio.load(
176
- renderComponent('cookies-banner', {
177
- wide: true,
178
- }),
179
- );
174
+ it('has `container--wide` class when `wide` is true', () => {
175
+ const $ = cheerio.load(
176
+ renderComponent('cookies-banner', {
177
+ wide: true,
178
+ }),
179
+ );
180
180
 
181
- expect($('.ons-container.ons-cookies-banner__primary').hasClass('ons-container--wide')).toBe(true);
182
- });
181
+ expect($('.ons-container.ons-cookies-banner__primary').hasClass('ons-container--wide')).toBe(true);
182
+ });
183
183
 
184
- it('has `container--full-width` class when `fullWidth` is true', () => {
185
- const $ = cheerio.load(
186
- renderComponent('cookies-banner', {
187
- fullWidth: true,
188
- }),
189
- );
184
+ it('has `container--full-width` class when `fullWidth` is true', () => {
185
+ const $ = cheerio.load(
186
+ renderComponent('cookies-banner', {
187
+ fullWidth: true,
188
+ }),
189
+ );
190
190
 
191
- expect($('.ons-container.ons-cookies-banner__primary').hasClass('ons-container--full-width')).toBe(true);
192
- });
193
- });
191
+ expect($('.ons-container.ons-cookies-banner__primary').hasClass('ons-container--full-width')).toBe(true);
192
+ });
193
+ });
194
194
 
195
- describe('confirmation banner', () => {
196
- it('has `preferencesText` text', () => {
197
- const $ = cheerio.load(renderComponent('cookies-banner', {}));
195
+ describe('confirmation banner', () => {
196
+ it('has `preferencesText` text', () => {
197
+ const $ = cheerio.load(renderComponent('cookies-banner', {}));
198
198
 
199
- const preferencesText = $('.ons-cookies-banner__confirmation .ons-cookies-banner__preferences-text').html().trim();
200
- expect(preferencesText).toBe('You can <a href="/cookies">change your cookie preferences</a> at any time.');
201
- });
199
+ const preferencesText = $('.ons-cookies-banner__confirmation .ons-cookies-banner__preferences-text').html().trim();
200
+ expect(preferencesText).toBe('You can <a href="/cookies">change your cookie preferences</a> at any time.');
201
+ });
202
202
 
203
- it('renders a button with text', () => {
204
- const faker = templateFaker();
205
- const buttonSpy = faker.spy('button');
203
+ it('renders a button with text', () => {
204
+ const faker = templateFaker();
205
+ const buttonSpy = faker.spy('button');
206
206
 
207
- faker.renderComponent('cookies-banner', {});
207
+ faker.renderComponent('cookies-banner', {});
208
208
 
209
- expect(buttonSpy.occurrences[2].text).toBe('Hide');
210
- });
209
+ expect(buttonSpy.occurrences[2].text).toBe('Hide');
210
+ });
211
211
 
212
- it('has the correct `confirmationButtonTextAria` for `buttonContext`', () => {
213
- const faker = templateFaker();
214
- const buttonSpy = faker.spy('button');
212
+ it('has the correct `confirmationButtonTextAria` for `buttonContext`', () => {
213
+ const faker = templateFaker();
214
+ const buttonSpy = faker.spy('button');
215
215
 
216
- faker.renderComponent('cookies-banner', {});
216
+ faker.renderComponent('cookies-banner', {});
217
217
 
218
- expect(buttonSpy.occurrences[2].buttonContext).toBe('cookie message');
219
- });
218
+ expect(buttonSpy.occurrences[2].buttonContext).toBe('cookie message');
219
+ });
220
220
 
221
- it('has `container--wide` class when `wide` is true', () => {
222
- const $ = cheerio.load(
223
- renderComponent('cookies-banner', {
224
- wide: true,
225
- }),
226
- );
221
+ it('has `container--wide` class when `wide` is true', () => {
222
+ const $ = cheerio.load(
223
+ renderComponent('cookies-banner', {
224
+ wide: true,
225
+ }),
226
+ );
227
227
 
228
- expect($('.ons-container.ons-cookies-banner__confirmation').hasClass('ons-container--wide')).toBe(true);
229
- });
228
+ expect($('.ons-container.ons-cookies-banner__confirmation').hasClass('ons-container--wide')).toBe(true);
229
+ });
230
230
 
231
- it('has `container--full-width` class when `fullWidth` is true', () => {
232
- const $ = cheerio.load(
233
- renderComponent('cookies-banner', {
234
- fullWidth: true,
235
- }),
236
- );
231
+ it('has `container--full-width` class when `fullWidth` is true', () => {
232
+ const $ = cheerio.load(
233
+ renderComponent('cookies-banner', {
234
+ fullWidth: true,
235
+ }),
236
+ );
237
237
 
238
- expect($('.ons-container.ons-cookies-banner__confirmation').hasClass('ons-container--full-width')).toBe(true);
239
- });
238
+ expect($('.ons-container.ons-cookies-banner__confirmation').hasClass('ons-container--full-width')).toBe(true);
239
+ });
240
+ });
240
241
  });
241
- });
242
242
 
243
- describe('mode: Welsh language', () => {
244
- it('has the welsh version of default values', () => {
245
- const $ = cheerio.load(renderComponent('cookies-banner', { lang: 'cy' }));
243
+ describe('mode: Welsh language', () => {
244
+ it('has the welsh version of default values', () => {
245
+ const $ = cheerio.load(renderComponent('cookies-banner', { lang: 'cy' }));
246
246
 
247
- const statementTitle = $('.ons-cookies-banner__title').text().trim();
248
- expect(statementTitle).toBe('Cwcis ar ons.gov.uk');
247
+ const statementTitle = $('.ons-cookies-banner__title').text().trim();
248
+ expect(statementTitle).toBe('Cwcis ar ons.gov.uk');
249
+ });
249
250
  });
250
- });
251
251
  });
@@ -1,14 +1,14 @@
1
1
  import domready from '../../js/domready';
2
2
 
3
3
  async function cookiesBanner() {
4
- const cookiesBanner = [...document.querySelectorAll('.ons-cookies-banner')];
4
+ const cookiesBanner = [...document.querySelectorAll('.ons-cookies-banner')];
5
5
 
6
- if (cookiesBanner.length) {
7
- const CookiesBanner = (await import('./cookies-banner')).default;
8
- cookiesBanner.forEach((banner) => {
9
- new CookiesBanner(banner);
10
- });
11
- }
6
+ if (cookiesBanner.length) {
7
+ const CookiesBanner = (await import('./cookies-banner')).default;
8
+ cookiesBanner.forEach((banner) => {
9
+ new CookiesBanner(banner);
10
+ });
11
+ }
12
12
  }
13
13
 
14
14
  domready(cookiesBanner);
@@ -1,97 +1,97 @@
1
1
  import { approveAllCookieTypes, cookie, setConsentCookie, setDefaultConsentCookie } from '../../js/cookies-functions';
2
2
 
3
3
  export default class CookiesBanner {
4
- constructor(component) {
5
- this.component = component;
6
- this.primaryBanner = this.component.querySelector('.ons-cookies-banner__primary');
7
- this.confirmBanner = this.component.querySelector('.ons-cookies-banner__confirmation');
8
- this.acceptButton = this.component.querySelector('.ons-js-accept-cookies');
9
- this.rejectButton = this.component.querySelector('.ons-js-reject-cookies');
10
- this.hideButton = this.component.querySelector('.ons-js-hide-button');
11
- this.acceptedText = this.component.querySelector('.ons-js-accepted-text');
12
- this.rejectedText = this.component.querySelector('.ons-js-rejected-text');
13
- this.setupCookiesEvents();
14
- }
15
-
16
- setupCookiesEvents() {
17
- this.acceptButton.addEventListener('click', this.setCookiesConsent.bind(this));
18
- this.rejectButton.addEventListener('click', this.setCookiesConsent.bind(this));
19
- this.hideButton.addEventListener('click', this.hideConfirmBanner.bind(this));
4
+ constructor(component) {
5
+ this.component = component;
6
+ this.primaryBanner = this.component.querySelector('.ons-cookies-banner__primary');
7
+ this.confirmBanner = this.component.querySelector('.ons-cookies-banner__confirmation');
8
+ this.acceptButton = this.component.querySelector('.ons-js-accept-cookies');
9
+ this.rejectButton = this.component.querySelector('.ons-js-reject-cookies');
10
+ this.hideButton = this.component.querySelector('.ons-js-hide-button');
11
+ this.acceptedText = this.component.querySelector('.ons-js-accepted-text');
12
+ this.rejectedText = this.component.querySelector('.ons-js-rejected-text');
13
+ this.setupCookiesEvents();
14
+ }
20
15
 
21
- this.showCookiesMessage();
22
- }
16
+ setupCookiesEvents() {
17
+ this.acceptButton.addEventListener('click', this.setCookiesConsent.bind(this));
18
+ this.rejectButton.addEventListener('click', this.setCookiesConsent.bind(this));
19
+ this.hideButton.addEventListener('click', this.hideConfirmBanner.bind(this));
23
20
 
24
- showCookiesMessage() {
25
- const displayCookiesBanner = this.component && cookie('ons_cookie_message_displayed') !== 'true';
26
- let policy = cookie('ons_cookie_policy');
27
- if (policy) {
28
- setConsentCookie(JSON.parse(policy.replace(/'/g, '"')));
21
+ this.showCookiesMessage();
29
22
  }
30
- if (displayCookiesBanner) {
31
- this.component.style.display = 'block';
32
23
 
33
- if (!cookie('ons_cookie_policy')) {
34
- setDefaultConsentCookie();
35
- }
24
+ showCookiesMessage() {
25
+ const displayCookiesBanner = this.component && cookie('ons_cookie_message_displayed') !== 'true';
26
+ let policy = cookie('ons_cookie_policy');
27
+ if (policy) {
28
+ setConsentCookie(JSON.parse(policy.replace(/'/g, '"')));
29
+ }
30
+ if (displayCookiesBanner) {
31
+ this.component.style.display = 'block';
32
+
33
+ if (!cookie('ons_cookie_policy')) {
34
+ setDefaultConsentCookie();
35
+ }
36
+ }
36
37
  }
37
- }
38
38
 
39
- setCookiesConsent(event) {
40
- event.preventDefault();
41
- let actionText;
42
- const action = event.target.getAttribute('data-button');
39
+ setCookiesConsent(event) {
40
+ event.preventDefault();
41
+ let actionText;
42
+ const action = event.target.getAttribute('data-button');
43
43
 
44
- if (action == 'accept') {
45
- this.acceptCookies();
46
- actionText = this.acceptedText;
47
- } else if (action == 'reject') {
48
- setDefaultConsentCookie();
49
- actionText = this.rejectedText;
50
- }
44
+ if (action == 'accept') {
45
+ this.acceptCookies();
46
+ actionText = this.acceptedText;
47
+ } else if (action == 'reject') {
48
+ setDefaultConsentCookie();
49
+ actionText = this.rejectedText;
50
+ }
51
51
 
52
- this.hidePrimaryCookiesBanner(actionText);
53
- this.checkPage(action);
54
- cookie('ons_cookie_message_displayed', 'true', { days: 365 });
55
- }
52
+ this.hidePrimaryCookiesBanner(actionText);
53
+ this.checkPage(action);
54
+ cookie('ons_cookie_message_displayed', 'true', { days: 365 });
55
+ }
56
56
 
57
- acceptCookies() {
58
- approveAllCookieTypes();
59
- if (typeof loadGTM != 'undefined') {
60
- loadGTM();
57
+ acceptCookies() {
58
+ approveAllCookieTypes();
59
+ if (typeof loadGTM != 'undefined') {
60
+ loadGTM();
61
+ }
61
62
  }
62
- }
63
63
 
64
- checkPage(action) {
65
- const isOnSettingsPage = document.querySelector('[data-module="cookie-settings"]');
66
- if (isOnSettingsPage) {
67
- this.updateRadios(action);
64
+ checkPage(action) {
65
+ const isOnSettingsPage = document.querySelector('[data-module="cookie-settings"]');
66
+ if (isOnSettingsPage) {
67
+ this.updateRadios(action);
68
+ }
68
69
  }
69
- }
70
70
 
71
- updateRadios(action) {
72
- const radios = [...document.querySelectorAll('.ons-js-radio')];
73
- radios.forEach((radio) => {
74
- if (action == 'reject') {
75
- radio.value == 'off' ? (radio.checked = true) : (radio.checked = false);
76
- } else if (action == 'accept') {
77
- radio.value == 'off' ? (radio.checked = false) : (radio.checked = true);
78
- }
79
- });
80
- }
71
+ updateRadios(action) {
72
+ const radios = [...document.querySelectorAll('.ons-js-radio')];
73
+ radios.forEach((radio) => {
74
+ if (action == 'reject') {
75
+ radio.value == 'off' ? (radio.checked = true) : (radio.checked = false);
76
+ } else if (action == 'accept') {
77
+ radio.value == 'off' ? (radio.checked = false) : (radio.checked = true);
78
+ }
79
+ });
80
+ }
81
81
 
82
- hidePrimaryCookiesBanner(text) {
83
- if (this.component) {
84
- this.primaryBanner.style.display = 'none';
85
- this.confirmBanner.classList.remove('ons-u-d-no');
86
- this.confirmBanner.setAttribute('aria-live', 'polite');
87
- this.confirmBanner.setAttribute('role', 'status');
88
- text.classList.remove('ons-u-d-no');
82
+ hidePrimaryCookiesBanner(text) {
83
+ if (this.component) {
84
+ this.primaryBanner.style.display = 'none';
85
+ this.confirmBanner.classList.remove('ons-u-d-no');
86
+ this.confirmBanner.setAttribute('aria-live', 'polite');
87
+ this.confirmBanner.setAttribute('role', 'status');
88
+ text.classList.remove('ons-u-d-no');
89
+ }
89
90
  }
90
- }
91
91
 
92
- hideConfirmBanner() {
93
- if (this.component) {
94
- this.component.style.display = 'none';
92
+ hideConfirmBanner() {
93
+ if (this.component) {
94
+ this.component.style.display = 'none';
95
+ }
95
96
  }
96
- }
97
97
  }