@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
@@ -1,13 +1,13 @@
1
1
  import domready from './domready';
2
2
 
3
3
  async function cookiesSettings() {
4
- const cookiesSettings = [...document.querySelectorAll('[data-module=cookie-settings]')];
5
- if (cookiesSettings.length) {
6
- const CookiesSettings = (await import('./cookies-settings')).default;
7
- cookiesSettings.forEach((form) => {
8
- new CookiesSettings(form);
9
- });
10
- }
4
+ const cookiesSettings = [...document.querySelectorAll('[data-module=cookie-settings]')];
5
+ if (cookiesSettings.length) {
6
+ const CookiesSettings = (await import('./cookies-settings')).default;
7
+ cookiesSettings.forEach((form) => {
8
+ new CookiesSettings(form);
9
+ });
10
+ }
11
11
  }
12
12
 
13
13
  domready(cookiesSettings);
@@ -3,105 +3,105 @@ import { unset } from 'lodash';
3
3
  import { cookie, setConsentCookie, setCookie, setDefaultConsentCookie } from './cookies-functions';
4
4
 
5
5
  export default class CookiesSettings {
6
- constructor(component) {
7
- this.component = component;
8
- this.returnLink = document.querySelector('.ons-js-return-link');
9
- this.confirmationMessage = document.querySelector('.ons-cookies-confirmation-message');
10
- this.cookiesBanner = document.querySelector('.ons-cookies-banner');
6
+ constructor(component) {
7
+ this.component = component;
8
+ this.returnLink = document.querySelector('.ons-js-return-link');
9
+ this.confirmationMessage = document.querySelector('.ons-cookies-confirmation-message');
10
+ this.cookiesBanner = document.querySelector('.ons-cookies-banner');
11
11
 
12
- this.component.addEventListener('submit', this.submitSettingsForm.bind(this));
13
- this.returnLink?.addEventListener('click', this.goBackToPrevPage.bind(this));
12
+ this.component.addEventListener('submit', this.submitSettingsForm.bind(this));
13
+ this.returnLink?.addEventListener('click', this.goBackToPrevPage.bind(this));
14
14
 
15
- this.setInitialFormValues();
16
- }
17
-
18
- setInitialFormValues() {
19
- if (!cookie('ons_cookie_policy')) {
20
- setDefaultConsentCookie();
15
+ this.setInitialFormValues();
21
16
  }
22
17
 
23
- const currentConsentCookie = cookie('ons_cookie_policy');
24
- let currentConsentCookieJSON = JSON.parse(currentConsentCookie.replace(/'/g, '"'));
18
+ setInitialFormValues() {
19
+ if (!cookie('ons_cookie_policy')) {
20
+ setDefaultConsentCookie();
21
+ }
22
+
23
+ const currentConsentCookie = cookie('ons_cookie_policy');
24
+ let currentConsentCookieJSON = JSON.parse(currentConsentCookie.replace(/'/g, '"'));
25
25
 
26
- try {
27
- unset(currentConsentCookieJSON, 'essential');
28
- } catch (e) {
29
- console.error(e);
30
- }
26
+ try {
27
+ unset(currentConsentCookieJSON, 'essential');
28
+ } catch (e) {
29
+ console.error(e);
30
+ }
31
31
 
32
- for (let cookieType in currentConsentCookieJSON) {
33
- let radioButton;
32
+ for (let cookieType in currentConsentCookieJSON) {
33
+ let radioButton;
34
34
 
35
- if (currentConsentCookieJSON[cookieType]) {
36
- radioButton = document.querySelector(`input[name=cookies-${cookieType}][value=on]`);
37
- } else {
38
- radioButton = document.querySelector(`input[name=cookies-${cookieType}][value=off]`);
39
- }
35
+ if (currentConsentCookieJSON[cookieType]) {
36
+ radioButton = document.querySelector(`input[name=cookies-${cookieType}][value=on]`);
37
+ } else {
38
+ radioButton = document.querySelector(`input[name=cookies-${cookieType}][value=off]`);
39
+ }
40
40
 
41
- if (radioButton) {
42
- radioButton.checked = true;
43
- }
41
+ if (radioButton) {
42
+ radioButton.checked = true;
43
+ }
44
+ }
44
45
  }
45
- }
46
46
 
47
- submitSettingsForm(event) {
48
- event.preventDefault();
47
+ submitSettingsForm(event) {
48
+ event.preventDefault();
49
49
 
50
- if (!cookie('ons_cookie_message_displayed')) {
51
- setCookie('ons_cookie_message_displayed', true, { days: 365 });
52
- }
50
+ if (!cookie('ons_cookie_message_displayed')) {
51
+ setCookie('ons_cookie_message_displayed', true, { days: 365 });
52
+ }
53
53
 
54
- const formInputs = event.target.getElementsByTagName('input');
55
- let options = {};
54
+ const formInputs = event.target.getElementsByTagName('input');
55
+ let options = {};
56
56
 
57
- for (let i = 0; i < formInputs.length; i++) {
58
- const input = formInputs[i];
59
- if (input.checked) {
60
- const name = input.name.replace('cookies-', '');
61
- const value = input.value === 'on' ? true : false;
57
+ for (let i = 0; i < formInputs.length; i++) {
58
+ const input = formInputs[i];
59
+ if (input.checked) {
60
+ const name = input.name.replace('cookies-', '');
61
+ const value = input.value === 'on' ? true : false;
62
62
 
63
- options[name] = value;
63
+ options[name] = value;
64
64
 
65
- if (name === 'usage' && value === true) {
66
- if (typeof loadGTM != 'undefined') {
67
- loadGTM();
68
- }
65
+ if (name === 'usage' && value === true) {
66
+ if (typeof loadGTM != 'undefined') {
67
+ loadGTM();
68
+ }
69
+ }
70
+ }
69
71
  }
70
- }
71
- }
72
72
 
73
- setConsentCookie(options);
73
+ setConsentCookie(options);
74
74
 
75
- this.showConfirmationMessage();
76
- this.hideCookiesBanner();
75
+ this.showConfirmationMessage();
76
+ this.hideCookiesBanner();
77
77
 
78
- return false;
79
- }
78
+ return false;
79
+ }
80
80
 
81
- showConfirmationMessage() {
82
- this.confirmationMessage.classList.remove('ons-u-d-no');
83
- document.body.scrollTop = document.documentElement.scrollTop = 0;
84
- this.setConfirmationMessageAttributes();
85
- }
81
+ showConfirmationMessage() {
82
+ this.confirmationMessage.classList.remove('ons-u-d-no');
83
+ document.body.scrollTop = document.documentElement.scrollTop = 0;
84
+ this.setConfirmationMessageAttributes();
85
+ }
86
86
 
87
- hideCookiesBanner() {
88
- if (this.cookiesBanner) {
89
- this.cookiesBanner.style.display = 'none';
87
+ hideCookiesBanner() {
88
+ if (this.cookiesBanner) {
89
+ this.cookiesBanner.style.display = 'none';
90
+ }
90
91
  }
91
- }
92
-
93
- setConfirmationMessageAttributes() {
94
- this.confirmationMessage.setAttribute('role', 'alert');
95
- if (document.referrer != '') {
96
- this.confirmationMessage.setAttribute('autofocus', 'autofocus');
97
- this.confirmationMessage.setAttribute('tabindex', '-1');
98
- this.confirmationMessage.focus();
99
- } else {
100
- this.returnLink.style.display = 'none';
92
+
93
+ setConfirmationMessageAttributes() {
94
+ this.confirmationMessage.setAttribute('role', 'alert');
95
+ if (document.referrer != '') {
96
+ this.confirmationMessage.setAttribute('autofocus', 'autofocus');
97
+ this.confirmationMessage.setAttribute('tabindex', '-1');
98
+ this.confirmationMessage.focus();
99
+ } else {
100
+ this.returnLink.style.display = 'none';
101
+ }
101
102
  }
102
- }
103
103
 
104
- goBackToPrevPage() {
105
- window.history.back();
106
- }
104
+ goBackToPrevPage() {
105
+ window.history.back();
106
+ }
107
107
  }
@@ -2,9 +2,9 @@ import { renderComponent, setTestPage } from '../tests/helpers/rendering';
2
2
 
3
3
  const EXAMPLE_COOKIES_SETTINGS_PAGE = `
4
4
  ${renderComponent('cookies-banner', {
5
- statementTitle: 'Tell us whether you accept cookies',
6
- statementText: 'We use <a href="#0">cookies to collect information</a> about how you use census.gov.uk.',
7
- confirmationText: 'You’ve accepted all cookies. You can <a href="#0">change your cookie preferences</a> at any time.',
5
+ statementTitle: 'Tell us whether you accept cookies',
6
+ statementText: 'We use <a href="#0">cookies to collect information</a> about how you use census.gov.uk.',
7
+ confirmationText: 'You’ve accepted all cookies. You can <a href="#0">change your cookie preferences</a> at any time.',
8
8
  })}
9
9
 
10
10
  <form data-module="cookie-settings">
@@ -37,142 +37,142 @@ const EXAMPLE_PART_COOKIES_SETTINGS_PAGE = `
37
37
  `;
38
38
 
39
39
  describe('script: cookies-settings', () => {
40
- beforeEach(async () => {
41
- const client = await page.target().createCDPSession();
42
- await client.send('Network.clearBrowserCookies');
43
- });
44
-
45
- it('sets a consent cookie by default', async () => {
46
- await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
47
-
48
- const cookies = await page.cookies();
49
- const ons_cookie_policy = cookies.find((cookie) => cookie.name === 'ons_cookie_policy');
50
- const policy = JSON.parse(ons_cookie_policy.value.replace(/'/g, '"'));
51
-
52
- expect(policy).toEqual({
53
- essential: true,
54
- settings: false,
55
- usage: false,
56
- campaigns: false,
40
+ beforeEach(async () => {
41
+ const client = await page.target().createCDPSession();
42
+ await client.send('Network.clearBrowserCookies');
57
43
  });
58
- });
59
44
 
60
- it('sets all radio buttons to the default values of every `cookieType`', async () => {
61
- await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
45
+ it('sets a consent cookie by default', async () => {
46
+ await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
62
47
 
63
- const cookiesSettingsOffRadio = await page.$eval('input[name=cookies-settings][value=off]', (node) => node.checked);
64
- const cookiesUsageOffRadio = await page.$eval('input[name=cookies-usage][value=off]', (node) => node.checked);
65
- const cookiesCampaignsOffRadio = await page.$eval('input[name=cookies-campaigns][value=off]', (node) => node.checked);
48
+ const cookies = await page.cookies();
49
+ const ons_cookie_policy = cookies.find((cookie) => cookie.name === 'ons_cookie_policy');
50
+ const policy = JSON.parse(ons_cookie_policy.value.replace(/'/g, '"'));
66
51
 
67
- expect(cookiesSettingsOffRadio).toBe(true);
68
- expect(cookiesUsageOffRadio).toBe(true);
69
- expect(cookiesCampaignsOffRadio).toBe(true);
70
- });
52
+ expect(policy).toEqual({
53
+ essential: true,
54
+ settings: false,
55
+ usage: false,
56
+ campaigns: false,
57
+ });
58
+ });
59
+
60
+ it('sets all radio buttons to the default values of every `cookieType`', async () => {
61
+ await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
62
+
63
+ const cookiesSettingsOffRadio = await page.$eval('input[name=cookies-settings][value=off]', (node) => node.checked);
64
+ const cookiesUsageOffRadio = await page.$eval('input[name=cookies-usage][value=off]', (node) => node.checked);
65
+ const cookiesCampaignsOffRadio = await page.$eval('input[name=cookies-campaigns][value=off]', (node) => node.checked);
66
+
67
+ expect(cookiesSettingsOffRadio).toBe(true);
68
+ expect(cookiesUsageOffRadio).toBe(true);
69
+ expect(cookiesCampaignsOffRadio).toBe(true);
70
+ });
71
71
 
72
- it('sets the provided radio buttons to the default values of every matched `cookieType`', async () => {
73
- await setTestPage('/test', EXAMPLE_PART_COOKIES_SETTINGS_PAGE);
72
+ it('sets the provided radio buttons to the default values of every matched `cookieType`', async () => {
73
+ await setTestPage('/test', EXAMPLE_PART_COOKIES_SETTINGS_PAGE);
74
74
 
75
- const cookiesSettingsOffRadio = await page.$eval('input[name=cookies-settings][value=off]', (node) => node.checked);
76
- const cookiesCampaignsOffRadio = await page.$eval('input[name=cookies-campaigns][value=off]', (node) => node.checked);
75
+ const cookiesSettingsOffRadio = await page.$eval('input[name=cookies-settings][value=off]', (node) => node.checked);
76
+ const cookiesCampaignsOffRadio = await page.$eval('input[name=cookies-campaigns][value=off]', (node) => node.checked);
77
77
 
78
- expect(cookiesSettingsOffRadio).toBe(true);
79
- expect(cookiesCampaignsOffRadio).toBe(true);
80
- });
78
+ expect(cookiesSettingsOffRadio).toBe(true);
79
+ expect(cookiesCampaignsOffRadio).toBe(true);
80
+ });
81
81
 
82
- it('sets all radios to on from off when accepting cookies', async () => {
83
- await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
82
+ it('sets all radios to on from off when accepting cookies', async () => {
83
+ await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
84
84
 
85
- await page.click('.ons-js-accept-cookies');
85
+ await page.click('.ons-js-accept-cookies');
86
86
 
87
- const cookiesSettingsOnRadio = await page.$eval('input[name=cookies-settings][value=on]', (node) => node.checked);
88
- const cookiesUsageOnRadio = await page.$eval('input[name=cookies-usage][value=on]', (node) => node.checked);
89
- const cookiesCampaignsOnRadio = await page.$eval('input[name=cookies-campaigns][value=on]', (node) => node.checked);
87
+ const cookiesSettingsOnRadio = await page.$eval('input[name=cookies-settings][value=on]', (node) => node.checked);
88
+ const cookiesUsageOnRadio = await page.$eval('input[name=cookies-usage][value=on]', (node) => node.checked);
89
+ const cookiesCampaignsOnRadio = await page.$eval('input[name=cookies-campaigns][value=on]', (node) => node.checked);
90
90
 
91
- expect(cookiesSettingsOnRadio).toBe(true);
92
- expect(cookiesUsageOnRadio).toBe(true);
93
- expect(cookiesCampaignsOnRadio).toBe(true);
94
- });
91
+ expect(cookiesSettingsOnRadio).toBe(true);
92
+ expect(cookiesUsageOnRadio).toBe(true);
93
+ expect(cookiesCampaignsOnRadio).toBe(true);
94
+ });
95
95
 
96
- it.each([['settings'], ['usage'], ['campaigns']])('updates consent cookie when "%s" policy is turned on', async (policyName) => {
97
- await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
96
+ it.each([['settings'], ['usage'], ['campaigns']])('updates consent cookie when "%s" policy is turned on', async (policyName) => {
97
+ await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
98
98
 
99
- await page.click(`input[name=cookies-${policyName}][value=on]`);
100
- await page.click('#submit-button');
99
+ await page.click(`input[name=cookies-${policyName}][value=on]`);
100
+ await page.click('#submit-button');
101
101
 
102
- const cookies = await page.cookies();
103
- const ons_cookie_policy = cookies.find((cookie) => cookie.name === 'ons_cookie_policy');
104
- const policy = JSON.parse(ons_cookie_policy.value.replace(/'/g, '"'));
102
+ const cookies = await page.cookies();
103
+ const ons_cookie_policy = cookies.find((cookie) => cookie.name === 'ons_cookie_policy');
104
+ const policy = JSON.parse(ons_cookie_policy.value.replace(/'/g, '"'));
105
105
 
106
- expect(policy).toHaveProperty(policyName, true);
107
- });
106
+ expect(policy).toHaveProperty(policyName, true);
107
+ });
108
108
 
109
- it.each([['settings'], ['usage'], ['campaigns']])(
110
- 'updates consent cookie when "%s" policy is turned on and then off',
111
- async (policyName) => {
112
- await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
109
+ it.each([['settings'], ['usage'], ['campaigns']])(
110
+ 'updates consent cookie when "%s" policy is turned on and then off',
111
+ async (policyName) => {
112
+ await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
113
113
 
114
- await page.click(`input[name=cookies-${policyName}][value=on]`);
115
- await page.click('#submit-button');
114
+ await page.click(`input[name=cookies-${policyName}][value=on]`);
115
+ await page.click('#submit-button');
116
116
 
117
- await page.click(`input[name=cookies-${policyName}][value=off]`);
118
- await page.click('#submit-button');
117
+ await page.click(`input[name=cookies-${policyName}][value=off]`);
118
+ await page.click('#submit-button');
119
119
 
120
- const cookies = await page.cookies();
121
- const ons_cookie_policy = cookies.find((cookie) => cookie.name === 'ons_cookie_policy');
122
- const policy = JSON.parse(ons_cookie_policy.value.replace(/'/g, '"'));
120
+ const cookies = await page.cookies();
121
+ const ons_cookie_policy = cookies.find((cookie) => cookie.name === 'ons_cookie_policy');
122
+ const policy = JSON.parse(ons_cookie_policy.value.replace(/'/g, '"'));
123
123
 
124
- expect(policy).toHaveProperty(policyName, false);
125
- },
126
- );
124
+ expect(policy).toHaveProperty(policyName, false);
125
+ },
126
+ );
127
127
 
128
- it('sets ons_cookie_message_displayed cookie on form submit', async () => {
129
- await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
128
+ it('sets ons_cookie_message_displayed cookie on form submit', async () => {
129
+ await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
130
130
 
131
- const cookiesBefore = await page.cookies();
132
- const ons_cookie_message_displayed_before = cookiesBefore.find((cookie) => cookie.name === 'ons_cookie_message_displayed');
133
- expect(ons_cookie_message_displayed_before).toBeUndefined();
131
+ const cookiesBefore = await page.cookies();
132
+ const ons_cookie_message_displayed_before = cookiesBefore.find((cookie) => cookie.name === 'ons_cookie_message_displayed');
133
+ expect(ons_cookie_message_displayed_before).toBeUndefined();
134
134
 
135
- await page.click('#submit-button');
135
+ await page.click('#submit-button');
136
136
 
137
- const cookiesAfter = await page.cookies();
138
- const ons_cookie_message_displayed_after = cookiesAfter.find((cookie) => cookie.name === 'ons_cookie_message_displayed');
137
+ const cookiesAfter = await page.cookies();
138
+ const ons_cookie_message_displayed_after = cookiesAfter.find((cookie) => cookie.name === 'ons_cookie_message_displayed');
139
139
 
140
- expect(ons_cookie_message_displayed_after.value).toBe('true');
141
- });
140
+ expect(ons_cookie_message_displayed_after.value).toBe('true');
141
+ });
142
142
 
143
- it('does not hide the cookie banner by default', async () => {
144
- await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
143
+ it('does not hide the cookie banner by default', async () => {
144
+ await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
145
145
 
146
- const displayStyle = await page.$eval('.ons-cookies-banner', (node) => window.getComputedStyle(node).getPropertyValue('display'));
147
- expect(displayStyle).not.toBe('none');
148
- });
146
+ const displayStyle = await page.$eval('.ons-cookies-banner', (node) => window.getComputedStyle(node).getPropertyValue('display'));
147
+ expect(displayStyle).not.toBe('none');
148
+ });
149
149
 
150
- it('hides the cookie banner on form submit', async () => {
151
- await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
150
+ it('hides the cookie banner on form submit', async () => {
151
+ await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
152
152
 
153
- await page.click('#submit-button');
153
+ await page.click('#submit-button');
154
154
 
155
- const displayStyle = await page.$eval('.ons-cookies-banner', (node) => window.getComputedStyle(node).getPropertyValue('display'));
156
- expect(displayStyle).toBe('none');
157
- });
155
+ const displayStyle = await page.$eval('.ons-cookies-banner', (node) => window.getComputedStyle(node).getPropertyValue('display'));
156
+ expect(displayStyle).toBe('none');
157
+ });
158
158
 
159
- it('does not show a confirmation message by default', async () => {
160
- await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
159
+ it('does not show a confirmation message by default', async () => {
160
+ await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
161
161
 
162
- const displayStyle = await page.$eval('.ons-cookies-confirmation-message', (node) =>
163
- window.getComputedStyle(node).getPropertyValue('display'),
164
- );
165
- expect(displayStyle).toBe('none');
166
- });
162
+ const displayStyle = await page.$eval('.ons-cookies-confirmation-message', (node) =>
163
+ window.getComputedStyle(node).getPropertyValue('display'),
164
+ );
165
+ expect(displayStyle).toBe('none');
166
+ });
167
167
 
168
- it('shows a confirmation message on form submit', async () => {
169
- await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
168
+ it('shows a confirmation message on form submit', async () => {
169
+ await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
170
170
 
171
- await page.click('#submit-button');
171
+ await page.click('#submit-button');
172
172
 
173
- const displayStyle = await page.$eval('.ons-cookies-confirmation-message', (node) =>
174
- window.getComputedStyle(node).getPropertyValue('display'),
175
- );
176
- expect(displayStyle).not.toBe('none');
177
- });
173
+ const displayStyle = await page.$eval('.ons-cookies-confirmation-message', (node) =>
174
+ window.getComputedStyle(node).getPropertyValue('display'),
175
+ );
176
+ expect(displayStyle).not.toBe('none');
177
+ });
178
178
  });
package/js/domready.js CHANGED
@@ -1,17 +1,17 @@
1
1
  let callbacks = [];
2
2
 
3
3
  const onReady = () => {
4
- callbacks.forEach((fn) => fn.call());
5
- callbacks = [];
6
- window.onsDOMReady = true;
4
+ callbacks.forEach((fn) => fn.call());
5
+ callbacks = [];
6
+ window.onsDOMReady = true;
7
7
  };
8
8
 
9
9
  export default function ready(fn) {
10
- if (document.readyState === 'loading') {
11
- callbacks.push(fn);
12
- } else {
13
- fn.call();
14
- }
10
+ if (document.readyState === 'loading') {
11
+ callbacks.push(fn);
12
+ } else {
13
+ fn.call();
14
+ }
15
15
  }
16
16
 
17
17
  document.addEventListener('DOMContentLoaded', onReady);
package/js/fetch.js CHANGED
@@ -1,19 +1,19 @@
1
1
  export function checkStatus(response) {
2
- if (response.status >= 200 && response.status < 300) {
3
- return response;
4
- } else {
5
- const error = new Error(response.statusText);
6
- error.response = response;
7
- throw error;
8
- }
2
+ if (response.status >= 200 && response.status < 300) {
3
+ return response;
4
+ } else {
5
+ const error = new Error(response.statusText);
6
+ error.response = response;
7
+ throw error;
8
+ }
9
9
  }
10
10
 
11
11
  export default function (url, options) {
12
- return window
13
- .fetch(url, {
14
- method: 'GET',
15
- credentials: 'include',
16
- ...options,
17
- })
18
- .then(checkStatus);
12
+ return window
13
+ .fetch(url, {
14
+ method: 'GET',
15
+ credentials: 'include',
16
+ ...options,
17
+ })
18
+ .then(checkStatus);
19
19
  }
@@ -1,13 +1,13 @@
1
1
  import domready from './domready';
2
2
 
3
3
  async function initialise() {
4
- const links = [...document.getElementsByClassName('ons-js-inpagelink')];
4
+ const links = [...document.getElementsByClassName('ons-js-inpagelink')];
5
5
 
6
- if (links.length) {
7
- const inPageLinks = (await import('./inpagelink')).default;
6
+ if (links.length) {
7
+ const inPageLinks = (await import('./inpagelink')).default;
8
8
 
9
- inPageLinks(links);
10
- }
9
+ inPageLinks(links);
10
+ }
11
11
  }
12
12
 
13
13
  domready(initialise);
package/js/inpagelink.js CHANGED
@@ -1,29 +1,29 @@
1
1
  export default function inPageLinks(links) {
2
- links.forEach((link) => {
3
- const id = link.getAttribute('href').replace('#', '');
2
+ links.forEach((link) => {
3
+ const id = link.getAttribute('href').replace('#', '');
4
4
 
5
- link.addEventListener('click', (event) => {
6
- event.preventDefault();
7
- focusOnInput(id);
5
+ link.addEventListener('click', (event) => {
6
+ event.preventDefault();
7
+ focusOnInput(id);
8
+ });
8
9
  });
9
- });
10
10
  }
11
11
 
12
12
  function focusOnInput(id) {
13
- const container = document.getElementById(id);
14
- container.scrollIntoView();
13
+ const container = document.getElementById(id);
14
+ container.scrollIntoView();
15
15
 
16
- const input = [
17
- ...container.getElementsByTagName('INPUT'),
18
- ...container.getElementsByTagName('TEXTAREA'),
19
- ...container.getElementsByTagName('SELECT'),
20
- ].filter((input) => {
21
- const type = input.getAttribute('type');
16
+ const input = [
17
+ ...container.getElementsByTagName('INPUT'),
18
+ ...container.getElementsByTagName('TEXTAREA'),
19
+ ...container.getElementsByTagName('SELECT'),
20
+ ].filter((input) => {
21
+ const type = input.getAttribute('type');
22
22
 
23
- return type !== 'readonly' && type !== 'hidden';
24
- })[0];
23
+ return type !== 'readonly' && type !== 'hidden';
24
+ })[0];
25
25
 
26
- if (input && input.getAttribute('tabindex') !== '-1') {
27
- input.focus();
28
- }
26
+ if (input && input.getAttribute('tabindex') !== '-1') {
27
+ input.focus();
28
+ }
29
29
  }
package/js/polyfills.js CHANGED
@@ -1,6 +1,5 @@
1
1
  // This must be included for IE support
2
2
  import 'core-js';
3
- //import 'regenerator-runtime/runtime';
4
3
  import 'mdn-polyfills/CustomEvent';
5
4
  import 'mdn-polyfills/Node.prototype.append';
6
5
  import 'mdn-polyfills/Node.prototype.remove';
@@ -1,16 +1,16 @@
1
1
  import domready from './domready';
2
2
 
3
3
  export default function addEventListeners() {
4
- const buttons = [...document.querySelectorAll('.ons-js-print-btn')];
4
+ const buttons = [...document.querySelectorAll('.ons-js-print-btn')];
5
5
 
6
- buttons.forEach((button) => {
7
- button.addEventListener('click', handleClick);
8
- button.classList.remove('ons-u-d-no');
9
- });
6
+ buttons.forEach((button) => {
7
+ button.addEventListener('click', handleClick);
8
+ button.classList.remove('ons-u-d-no');
9
+ });
10
10
  }
11
11
 
12
12
  function handleClick() {
13
- window.print();
13
+ window.print();
14
14
  }
15
15
 
16
16
  domready(addEventListeners);