@ons/design-system 70.0.7 → 70.0.9

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 (454) hide show
  1. package/README.md +11 -17
  2. package/components/access-code/_macro.njk +31 -25
  3. package/components/access-code/_macro.spec.js +145 -145
  4. package/components/access-code/access-code.dom.js +5 -5
  5. package/components/access-code/access-code.js +16 -16
  6. package/components/access-code/access-code.scss +22 -22
  7. package/components/access-code/access-code.spec.js +17 -17
  8. package/components/access-code/example-access-code-error.njk +49 -37
  9. package/components/access-code/example-access-code.njk +40 -30
  10. package/components/accordion/_macro.njk +7 -6
  11. package/components/accordion/_macro.spec.js +154 -154
  12. package/components/accordion/accordion.dom.js +10 -10
  13. package/components/accordion/accordion.js +50 -50
  14. package/components/accordion/accordion.spec.js +104 -104
  15. package/components/accordion/example-accordion-open.njk +0 -1
  16. package/components/address-input/_macro.njk +23 -11
  17. package/components/address-input/_macro.spec.js +420 -420
  18. package/components/address-input/autosuggest.address.dom.js +5 -5
  19. package/components/address-input/autosuggest.address.error.js +77 -77
  20. package/components/address-input/autosuggest.address.js +354 -359
  21. package/components/address-input/autosuggest.address.setter.js +95 -95
  22. package/components/address-input/autosuggest.address.spec.js +668 -651
  23. package/components/address-input/example-address-input-editable.njk +52 -50
  24. package/components/address-input/example-address-input-manual.njk +23 -21
  25. package/components/address-input/example-address-input.njk +40 -38
  26. package/components/address-output/_address-output.scss +3 -3
  27. package/components/address-output/_macro.njk +6 -6
  28. package/components/address-output/_macro.spec.js +84 -84
  29. package/components/autosuggest/_autosuggest.scss +114 -114
  30. package/components/autosuggest/_macro.njk +57 -37
  31. package/components/autosuggest/_macro.spec.js +255 -255
  32. package/components/autosuggest/autosuggest.dom.js +5 -5
  33. package/components/autosuggest/autosuggest.helpers.js +11 -11
  34. package/components/autosuggest/autosuggest.helpers.spec.js +73 -73
  35. package/components/autosuggest/autosuggest.js +20 -20
  36. package/components/autosuggest/autosuggest.spec.js +542 -536
  37. package/components/autosuggest/autosuggest.ui.js +478 -475
  38. package/components/autosuggest/example-autosuggest-country-multiple.njk +26 -26
  39. package/components/autosuggest/example-autosuggest-country.njk +24 -24
  40. package/components/autosuggest/fuse-config.js +17 -17
  41. package/components/back-to-top/_back-to-top.scss +27 -27
  42. package/components/back-to-top/_macro.spec.js +49 -49
  43. package/components/back-to-top/back-to-top.dom.js +5 -5
  44. package/components/back-to-top/back-to-top.js +52 -52
  45. package/components/back-to-top/back-to-top.spec.js +106 -106
  46. package/components/back-to-top/example-back-to-top.njk +183 -6
  47. package/components/back-to-top/example-full-page-back-to-top.njk +135 -123
  48. package/components/breadcrumbs/_breadcrumbs.scss +63 -65
  49. package/components/breadcrumbs/_macro.njk +12 -4
  50. package/components/breadcrumbs/_macro.spec.js +91 -91
  51. package/components/browser-banner/_browser-banner.scss +23 -23
  52. package/components/browser-banner/_macro.njk +6 -3
  53. package/components/browser-banner/_macro.spec.js +92 -92
  54. package/components/button/_button.scss +525 -491
  55. package/components/button/_macro.njk +63 -62
  56. package/components/button/_macro.spec.js +363 -363
  57. package/components/button/button.dom.js +15 -15
  58. package/components/button/button.js +53 -53
  59. package/components/button/button.spec.js +248 -240
  60. package/components/button/example-button-ghost.njk +1 -0
  61. package/components/call-to-action/_call-to-action.scss +5 -5
  62. package/components/call-to-action/_macro.njk +7 -5
  63. package/components/call-to-action/_macro.spec.js +28 -28
  64. package/components/call-to-action/example-call-to-action-default.njk +3 -2
  65. package/components/card/_card.scss +23 -23
  66. package/components/card/_macro.njk +26 -10
  67. package/components/card/_macro.spec.js +180 -180
  68. package/components/card/example-card-set-with-images.njk +31 -29
  69. package/components/card/example-card-set-with-lists.njk +58 -56
  70. package/components/card/example-card-set.njk +28 -26
  71. package/components/card/example-card.njk +9 -7
  72. package/components/char-check-limit/_macro.njk +1 -3
  73. package/components/char-check-limit/_macro.spec.js +48 -48
  74. package/components/char-check-limit/character-check.js +58 -58
  75. package/components/char-check-limit/character-check.spec.js +173 -173
  76. package/components/char-check-limit/character-limit.js +40 -40
  77. package/components/checkboxes/_checkbox-macro.njk +19 -15
  78. package/components/checkboxes/_checkbox-macro.spec.js +355 -355
  79. package/components/checkboxes/_checkbox.scss +180 -180
  80. package/components/checkboxes/_checkboxes.scss +37 -27
  81. package/components/checkboxes/_macro.njk +81 -72
  82. package/components/checkboxes/_macro.spec.js +261 -261
  83. package/components/checkboxes/checkbox-with-autoselect.js +32 -32
  84. package/components/checkboxes/checkbox-with-fieldset.js +21 -21
  85. package/components/checkboxes/checkboxes-with-reveal.js +10 -10
  86. package/components/checkboxes/checkboxes.dom.js +27 -27
  87. package/components/checkboxes/checkboxes.spec.js +183 -183
  88. package/components/checkboxes/example-checkboxes-disabled.njk +30 -30
  89. package/components/checkboxes/example-checkboxes-error.njk +0 -1
  90. package/components/checkboxes/example-checkboxes-with-descriptions.njk +7 -5
  91. package/components/checkboxes/example-checkboxes-with-hidden-label.njk +162 -170
  92. package/components/checkboxes/example-checkboxes-with-revealed-checkboxes-expanded.njk +81 -81
  93. package/components/checkboxes/example-checkboxes-with-revealed-checkboxes.njk +79 -79
  94. package/components/checkboxes/example-checkboxes-with-revealed-select-expanded.njk +7 -5
  95. package/components/checkboxes/example-checkboxes-with-revealed-select.njk +7 -5
  96. package/components/checkboxes/example-checkboxes-with-revealed-text-input-expanded.njk +7 -5
  97. package/components/checkboxes/example-checkboxes-with-revealed-text-input.njk +7 -5
  98. package/components/checkboxes/example-checkboxes-with-select-all-button.njk +7 -5
  99. package/components/checkboxes/example-checkboxes-with-visible-text-input.njk +7 -5
  100. package/components/checkboxes/example-checkboxes.njk +7 -5
  101. package/components/content-pagination/_content-pagination.scss +41 -41
  102. package/components/content-pagination/_macro.njk +34 -32
  103. package/components/content-pagination/_macro.spec.js +159 -159
  104. package/components/content-pagination/example-content-pagination.njk +17 -17
  105. package/components/cookies-banner/_cookies-banner.scss +22 -22
  106. package/components/cookies-banner/_macro.njk +19 -6
  107. package/components/cookies-banner/_macro.spec.js +177 -177
  108. package/components/cookies-banner/cookies-banner.dom.js +7 -7
  109. package/components/cookies-banner/cookies-banner.js +76 -76
  110. package/components/cookies-banner/cookies-banner.spec.js +72 -68
  111. package/components/cookies-banner/example-cookies-banner-cymraeg.njk +2 -1
  112. package/components/cookies-banner/example-cookies-banner.njk +3 -4
  113. package/components/date-input/_macro.njk +71 -63
  114. package/components/date-input/_macro.spec.js +338 -338
  115. package/components/date-input/example-date-input-error-for-single-field.njk +0 -1
  116. package/components/date-input/example-date-input-error.njk +0 -1
  117. package/components/description-list/_description-list.scss +23 -23
  118. package/components/description-list/_macro.njk +20 -11
  119. package/components/description-list/_macro.spec.js +144 -144
  120. package/components/details/_details.scss +109 -109
  121. package/components/details/_macro.njk +18 -11
  122. package/components/details/_macro.spec.js +132 -132
  123. package/components/details/details.dom.js +6 -6
  124. package/components/details/details.js +60 -60
  125. package/components/details/details.spec.js +106 -106
  126. package/components/details/example-details-with-warning.njk +15 -10
  127. package/components/document-list/_macro.njk +102 -93
  128. package/components/document-list/_macro.spec.js +444 -444
  129. package/components/document-list/document-list.scss +145 -149
  130. package/components/document-list/example-document-list-article-featured.njk +27 -25
  131. package/components/document-list/example-document-list-articles.njk +55 -53
  132. package/components/document-list/example-document-list-downloads.njk +49 -47
  133. package/components/document-list/example-document-list-search-result-featured.njk +19 -17
  134. package/components/document-list/example-document-list-search-results.njk +60 -58
  135. package/components/download-resources/_download-resources.scss +109 -108
  136. package/components/download-resources/download-resources.js +907 -900
  137. package/components/download-resources/download-resources.spec.js +461 -461
  138. package/components/duration/_macro.njk +61 -55
  139. package/components/duration/_macro.spec.js +291 -291
  140. package/components/duration/example-duration-error-for-single-field.njk +28 -26
  141. package/components/duration/example-duration-single-field.njk +23 -19
  142. package/components/duration/example-duration.njk +33 -29
  143. package/components/error/_macro.njk +8 -6
  144. package/components/error/_macro.spec.js +72 -72
  145. package/components/external-link/_external-link.scss +19 -19
  146. package/components/external-link/_macro.njk +7 -5
  147. package/components/external-link/_macro.spec.js +68 -68
  148. package/components/external-link/example-external-link.njk +9 -6
  149. package/components/feedback/_feedback.scss +31 -31
  150. package/components/feedback/_macro.njk +7 -5
  151. package/components/feedback/_macro.spec.js +72 -72
  152. package/components/field/_field-group.scss +10 -10
  153. package/components/field/_field.scss +16 -16
  154. package/components/field/_macro.njk +2 -2
  155. package/components/field/_macro.spec.js +80 -80
  156. package/components/fieldset/_fieldset.scss +27 -27
  157. package/components/fieldset/_macro.njk +23 -16
  158. package/components/fieldset/_macro.spec.js +161 -161
  159. package/components/footer/_footer.scss +45 -45
  160. package/components/footer/_macro.njk +28 -21
  161. package/components/footer/_macro.spec.js +452 -452
  162. package/components/footer/example-footer-cymraeg.njk +2 -1
  163. package/components/footer/example-footer-default.njk +3 -4
  164. package/components/footer/example-footer-transactional.njk +2 -1
  165. package/components/footer/example-footer-warning.njk +2 -1
  166. package/components/footer/example-footer-with-alternative-organisation.njk +2 -1
  167. package/components/footer/example-footer-with-coat-of-arms.njk +2 -1
  168. package/components/footer/example-footer-with-copyright.njk +2 -1
  169. package/components/footer/example-footer.njk +2 -1
  170. package/components/header/_header.scss +207 -202
  171. package/components/header/_macro.njk +183 -141
  172. package/components/header/_macro.spec.js +833 -829
  173. package/components/header/example-header-default.njk +2 -1
  174. package/components/header/example-header-external-for-survey-with-description.njk +2 -1
  175. package/components/header/example-header-external-for-surveys.njk +2 -1
  176. package/components/header/example-header-external-welsh.njk +7 -7
  177. package/components/header/example-header-external-with-navigation-and-search.njk +3 -2
  178. package/components/header/example-header-external-with-navigation.njk +2 -1
  179. package/components/header/example-header-external-with-service-links.njk +2 -1
  180. package/components/header/example-header-external-with-sub-navigation-removed.njk +2 -1
  181. package/components/header/example-header-external-with-sub-navigation.njk +3 -2
  182. package/components/header/example-header-internal.njk +2 -1
  183. package/components/header/example-header-multiple-logos.njk +2 -1
  184. package/components/header/{example-header-neutral-for-multicoloured-logo.njk → example-header-neutral.njk} +2 -1
  185. package/components/helpers/_grid.scss +4 -4
  186. package/components/helpers/grid.njk +17 -16
  187. package/components/hero/_hero.scss +48 -48
  188. package/components/hero/_macro.njk +6 -11
  189. package/components/hero/_macro.spec.js +59 -59
  190. package/components/hero/example-hero-dark.njk +2 -1
  191. package/components/hero/example-hero-default.njk +2 -1
  192. package/components/icon/_icon.scss +44 -44
  193. package/components/icon/_macro.njk +601 -168
  194. package/components/icon/_macro.spec.js +110 -110
  195. package/components/image/_image.scss +11 -11
  196. package/components/image/_macro.njk +7 -5
  197. package/components/image/_macro.spec.js +81 -81
  198. package/components/input/_input-type.scss +86 -89
  199. package/components/input/_input.scss +123 -124
  200. package/components/input/_macro.njk +114 -95
  201. package/components/input/_macro.spec.js +604 -604
  202. package/components/input/character-check.dom.js +5 -5
  203. package/components/input/example-input-search-with-character-check.njk +1 -1
  204. package/components/input/example-input-search-with-placeholder.njk +1 -1
  205. package/components/input/example-input-search.njk +1 -1
  206. package/components/input/input.dom.js +5 -5
  207. package/components/input/input.js +10 -10
  208. package/components/input/input.spec.js +18 -18
  209. package/components/label/_label.scss +24 -24
  210. package/components/label/_macro.njk +32 -26
  211. package/components/label/_macro.spec.js +173 -170
  212. package/components/language-selector/_macro.njk +11 -2
  213. package/components/language-selector/_macro.spec.js +97 -97
  214. package/components/language-selector/language.scss +7 -7
  215. package/components/list/_list.scss +110 -97
  216. package/components/list/_macro.njk +93 -73
  217. package/components/list/_macro.spec.js +583 -583
  218. package/components/message/_macro.njk +20 -7
  219. package/components/message/_macro.spec.js +74 -74
  220. package/components/message/_message.scss +39 -39
  221. package/components/message-list/_macro.njk +26 -20
  222. package/components/message-list/_macro.spec.js +86 -86
  223. package/components/message-list/_message-list.scss +16 -16
  224. package/components/modal/_macro.njk +11 -12
  225. package/components/modal/_macro.spec.js +69 -69
  226. package/components/modal/_modal.scss +36 -36
  227. package/components/modal/modal.dom.js +6 -6
  228. package/components/modal/modal.js +89 -89
  229. package/components/modal/modal.spec.js +50 -50
  230. package/components/multiple-input-fields/_macro.njk +30 -28
  231. package/components/mutually-exclusive/_macro.njk +20 -13
  232. package/components/mutually-exclusive/_macro.spec.js +140 -140
  233. package/components/mutually-exclusive/example-mutually-exclusive-checkboxes.njk +6 -4
  234. package/components/mutually-exclusive/example-mutually-exclusive-date.njk +7 -5
  235. package/components/mutually-exclusive/example-mutually-exclusive-duration.njk +44 -40
  236. package/components/mutually-exclusive/example-mutually-exclusive-email.njk +7 -5
  237. package/components/mutually-exclusive/example-mutually-exclusive-multiple-options.njk +6 -4
  238. package/components/mutually-exclusive/example-mutually-exclusive-number.njk +6 -4
  239. package/components/mutually-exclusive/example-mutually-exclusive-textarea.njk +6 -4
  240. package/components/mutually-exclusive/mutually-exclusive.checkboxes.spec.js +188 -188
  241. package/components/mutually-exclusive/mutually-exclusive.date.spec.js +211 -211
  242. package/components/mutually-exclusive/mutually-exclusive.dom.js +5 -5
  243. package/components/mutually-exclusive/mutually-exclusive.duration.spec.js +210 -210
  244. package/components/mutually-exclusive/mutually-exclusive.email.spec.js +90 -90
  245. package/components/mutually-exclusive/mutually-exclusive.js +137 -137
  246. package/components/mutually-exclusive/mutually-exclusive.multiple-options.checkboxes.spec.js +197 -197
  247. package/components/mutually-exclusive/mutually-exclusive.number.spec.js +96 -96
  248. package/components/mutually-exclusive/mutually-exclusive.textarea.spec.js +102 -102
  249. package/components/navigation/_macro.njk +133 -67
  250. package/components/navigation/_macro.spec.js +360 -354
  251. package/components/navigation/_navigation.scss +112 -122
  252. package/components/navigation/navigation.dom.js +35 -35
  253. package/components/navigation/navigation.js +49 -49
  254. package/components/navigation/navigation.spec.js +249 -249
  255. package/components/pagination/_macro.njk +42 -20
  256. package/components/pagination/_macro.spec.js +342 -335
  257. package/components/pagination/_pagination.scss +58 -58
  258. package/components/panel/_macro.njk +27 -16
  259. package/components/panel/_macro.spec.js +372 -372
  260. package/components/panel/_panel.scss +200 -199
  261. package/components/panel/example-panel-bare.njk +6 -4
  262. package/components/panel/example-panel-with-announcement.njk +7 -4
  263. package/components/panel/example-panel-with-error-summary.njk +6 -4
  264. package/components/panel/example-panel-with-warning.njk +5 -3
  265. package/components/password/_macro.njk +7 -5
  266. package/components/password/_macro.spec.js +95 -95
  267. package/components/password/password.dom.js +5 -5
  268. package/components/password/password.js +10 -10
  269. package/components/password/password.spec.js +26 -26
  270. package/components/phase-banner/_macro.njk +3 -3
  271. package/components/phase-banner/_macro.spec.js +86 -86
  272. package/components/phase-banner/_phase-banner.scss +16 -16
  273. package/components/phase-banner/example-phase-banner-alpha.njk +2 -1
  274. package/components/phase-banner/example-phase-banner-beta.njk +4 -3
  275. package/components/question/_macro.njk +62 -47
  276. package/components/question/_macro.spec.js +235 -235
  277. package/components/question/_question.scss +24 -24
  278. package/components/question/example-question-ccs.njk +40 -35
  279. package/components/question/example-question-fieldset.njk +84 -80
  280. package/components/question/example-question-interviewer-note.njk +27 -24
  281. package/components/question/example-question-no-fieldset.njk +39 -33
  282. package/components/quote/_macro.njk +3 -1
  283. package/components/quote/_macro.spec.js +52 -52
  284. package/components/quote/_quote.scss +24 -24
  285. package/components/radios/_macro.njk +54 -36
  286. package/components/radios/_macro.spec.js +545 -524
  287. package/components/radios/_radio.scss +49 -48
  288. package/components/radios/_radios.scss +14 -20
  289. package/components/radios/check-radios.js +21 -21
  290. package/components/radios/clear-radios.js +45 -45
  291. package/components/radios/example-radios-with-clear-button-expanded.njk +6 -4
  292. package/components/radios/example-radios-with-clear-button.njk +6 -4
  293. package/components/radios/example-radios-with-descriptions.njk +7 -5
  294. package/components/radios/example-radios-with-revealed-select-expanded.njk +6 -4
  295. package/components/radios/example-radios-with-revealed-select.njk +6 -4
  296. package/components/radios/example-radios-with-revealed-text-area-expanded.njk +7 -5
  297. package/components/radios/example-radios-with-revealed-text-area.njk +7 -5
  298. package/components/radios/example-radios-with-revealed-text-input-expanded.njk +7 -5
  299. package/components/radios/example-radios-with-revealed-text-input.njk +7 -5
  300. package/components/radios/example-radios-with-separator.njk +6 -4
  301. package/components/radios/example-radios-with-visible-text-input.njk +7 -5
  302. package/components/radios/example-radios-without-border.njk +0 -1
  303. package/components/radios/example-radios.njk +7 -5
  304. package/components/radios/radio-with-fieldset.js +22 -22
  305. package/components/radios/radios.dom.js +32 -32
  306. package/components/radios/radios.spec.js +251 -251
  307. package/components/related-content/_macro.njk +10 -11
  308. package/components/related-content/_macro.spec.js +109 -109
  309. package/components/related-content/_related-content.scss +12 -12
  310. package/components/related-content/_section-macro.njk +7 -7
  311. package/components/related-content/_section-macro.spec.js +20 -20
  312. package/components/related-content/example-related-content-general.njk +5 -3
  313. package/components/related-content/example-related-content-multiple-rows-of-links.njk +51 -49
  314. package/components/related-content/example-related-content-social-media.njk +40 -38
  315. package/components/relationships/_macro.njk +10 -8
  316. package/components/relationships/_macro.spec.js +94 -94
  317. package/components/relationships/_relationships.scss +9 -9
  318. package/components/relationships/example-relationships-error.njk +176 -168
  319. package/components/relationships/example-relationships-you.njk +169 -163
  320. package/components/relationships/example-relationships.njk +167 -161
  321. package/components/relationships/relationships.dom.js +5 -5
  322. package/components/relationships/relationships.js +18 -18
  323. package/components/relationships/relationships.spec.js +71 -71
  324. package/components/reply/_macro.spec.js +47 -47
  325. package/components/reply/reply-input.js +15 -15
  326. package/components/reply/reply.dom.js +5 -5
  327. package/components/reply/reply.spec.js +57 -57
  328. package/components/section-navigation/_macro.njk +34 -12
  329. package/components/section-navigation/_macro.spec.js +210 -210
  330. package/components/section-navigation/_section-navigation.scss +76 -76
  331. package/components/select/_macro.njk +21 -18
  332. package/components/select/_macro.spec.js +166 -166
  333. package/components/share-page/_macro.njk +10 -5
  334. package/components/share-page/_macro.spec.js +68 -68
  335. package/components/skip-to-content/_macro.njk +1 -1
  336. package/components/skip-to-content/_macro.spec.js +54 -54
  337. package/components/skip-to-content/_skip.scss +30 -30
  338. package/components/skip-to-content/example-skip-to-content.njk +1 -0
  339. package/components/skip-to-content/skip-to-content.dom.js +6 -6
  340. package/components/skip-to-content/skip-to-content.js +7 -7
  341. package/components/skip-to-content/skip-to-content.spec.js +21 -21
  342. package/components/status/_macro.njk +1 -1
  343. package/components/status/_macro.spec.js +53 -53
  344. package/components/status/_status.scss +32 -32
  345. package/components/summary/_macro.njk +53 -23
  346. package/components/summary/_macro.spec.js +551 -535
  347. package/components/summary/_summary.scss +191 -195
  348. package/components/summary/example-summary-household-no-rows.njk +18 -16
  349. package/components/summary/example-summary-household.njk +75 -73
  350. package/components/summary/example-summary-hub-minimal.njk +74 -72
  351. package/components/summary/example-summary-hub.njk +169 -167
  352. package/components/table/_macro.njk +72 -45
  353. package/components/table/_macro.spec.js +499 -499
  354. package/components/table/_table.scss +204 -201
  355. package/components/table/scrollable-table.dom.js +5 -5
  356. package/components/table/scrollable-table.js +60 -60
  357. package/components/table/sortable-table.dom.js +5 -5
  358. package/components/table/sortable-table.js +135 -135
  359. package/components/table/table.spec.js +144 -140
  360. package/components/table-of-contents/_macro.njk +34 -32
  361. package/components/table-of-contents/_macro.spec.js +125 -125
  362. package/components/table-of-contents/_toc.scss +9 -9
  363. package/components/table-of-contents/example-table-of-contents-grouped.njk +1 -1
  364. package/components/table-of-contents/example-table-of-contents-single.njk +1 -1
  365. package/components/table-of-contents/example-table-of-contents-sticky-full-page.njk +79 -38
  366. package/components/table-of-contents/example-table-of-contents-sticky.njk +50 -13
  367. package/components/table-of-contents/toc.dom.js +5 -5
  368. package/components/table-of-contents/toc.js +30 -30
  369. package/components/table-of-contents/toc.spec.js +88 -88
  370. package/components/tabs/_macro.njk +12 -6
  371. package/components/tabs/_macro.spec.js +92 -92
  372. package/components/tabs/_tabs.scss +120 -115
  373. package/components/tabs/example-tabs-details.njk +5 -6
  374. package/components/tabs/tabs.dom.js +5 -5
  375. package/components/tabs/tabs.js +266 -266
  376. package/components/tabs/tabs.spec.js +268 -268
  377. package/components/text-indent/_macro.njk +1 -3
  378. package/components/text-indent/_macro.spec.js +33 -33
  379. package/components/text-indent/_text-indent.scss +3 -3
  380. package/components/textarea/_macro.njk +49 -46
  381. package/components/textarea/_macro.spec.js +227 -238
  382. package/components/textarea/textarea.dom.js +5 -5
  383. package/components/textarea/textarea.spec.js +78 -74
  384. package/components/timeline/_macro.njk +4 -6
  385. package/components/timeline/_macro.spec.js +83 -83
  386. package/components/timeline/_timeline.scss +26 -26
  387. package/components/timeout-modal/_macro.njk +21 -19
  388. package/components/timeout-modal/_macro.spec.js +47 -47
  389. package/components/timeout-modal/example-timeout-modal.njk +16 -14
  390. package/components/timeout-modal/timeout-modal.dom.js +9 -9
  391. package/components/timeout-modal/timeout-modal.js +66 -66
  392. package/components/timeout-modal/timeout-modal.spec.js +157 -157
  393. package/components/timeout-panel/_macro.njk +19 -17
  394. package/components/timeout-panel/_macro.spec.js +41 -41
  395. package/components/timeout-panel/example-panel-with-timeout-warning.njk +13 -11
  396. package/components/timeout-panel/timeout-panel.dom.js +8 -8
  397. package/components/timeout-panel/timeout-panel.spec.js +118 -118
  398. package/components/upload/_macro.njk +20 -16
  399. package/components/upload/_macro.spec.js +52 -52
  400. package/components/upload/_upload.scss +28 -28
  401. package/components/video/_macro.njk +16 -2
  402. package/components/video/_macro.spec.js +42 -42
  403. package/components/video/_video.scss +16 -16
  404. package/components/video/example-video.njk +2 -2
  405. package/components/video/video.dom.js +5 -5
  406. package/components/video/video.js +32 -32
  407. package/components/video/video.spec.js +103 -97
  408. package/css/main.css +1 -1
  409. package/favicons/manifest.json +25 -25
  410. package/js/abortable-fetch.js +23 -23
  411. package/js/analytics.js +53 -53
  412. package/js/cookies-functions.js +135 -135
  413. package/js/cookies-settings.dom.js +7 -7
  414. package/js/cookies-settings.js +77 -77
  415. package/js/cookies-settings.spec.js +106 -106
  416. package/js/domready.js +8 -8
  417. package/js/fetch.js +14 -14
  418. package/js/inpagelink.dom.js +5 -5
  419. package/js/inpagelink.js +19 -19
  420. package/js/polyfills.js +0 -1
  421. package/js/print-button.js +6 -6
  422. package/js/timeout.js +211 -211
  423. package/layout/_dsTemplate.njk +22 -20
  424. package/layout/_template.njk +63 -51
  425. package/package.json +132 -128
  426. package/scripts/main.es5.js +1 -1
  427. package/scripts/main.js +1 -1
  428. package/scss/base/_forms.scss +10 -10
  429. package/scss/base/_global.scss +45 -44
  430. package/scss/base/_typography.scss +20 -20
  431. package/scss/helpers/_functions.scss +18 -15
  432. package/scss/helpers/_mixins.scss +59 -53
  433. package/scss/helpers/_mq.scss +62 -65
  434. package/scss/objects/_container.scss +20 -20
  435. package/scss/objects/_page.scss +33 -33
  436. package/scss/objects/_spacing.scss +10 -10
  437. package/scss/overrides/hcm.scss +237 -237
  438. package/scss/overrides/rtl.scss +95 -95
  439. package/scss/print.scss +47 -47
  440. package/scss/utilities/_border.scss +7 -7
  441. package/scss/utilities/_colors.scss +6 -6
  442. package/scss/utilities/_display.scss +8 -8
  443. package/scss/utilities/_float.scss +7 -7
  444. package/scss/utilities/_grid.scss +144 -144
  445. package/scss/utilities/_highlight.scss +4 -4
  446. package/scss/utilities/_margin.scss +17 -17
  447. package/scss/utilities/_pad.scss +15 -15
  448. package/scss/utilities/_typography.scss +35 -33
  449. package/scss/utilities/_utilities.scss +8 -8
  450. package/scss/utilities/_visibility.scss +25 -25
  451. package/scss/vars/_colors.scss +116 -116
  452. package/scss/vars/_forms.scss +22 -22
  453. package/scss/vars/_grid.scss +11 -9
  454. 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
  }