@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,361 +6,368 @@ import axe from '../../tests/helpers/axe';
6
6
  import { renderComponent } from '../../tests/helpers/rendering';
7
7
 
8
8
  const PAGINATION_PREV_NEXT_LABELS = {
9
- previous: 'Previous page',
10
- next: 'Next page',
9
+ previous: 'Previous page',
10
+ next: 'Next page',
11
11
  };
12
12
 
13
13
  const EXAMPLE_PAGINATION_MINIMAL = {
14
- ...PAGINATION_PREV_NEXT_LABELS,
15
- currentPageNumber: 1,
16
- pages: [{ url: '/page/1' }],
14
+ ...PAGINATION_PREV_NEXT_LABELS,
15
+ currentPageNumber: 1,
16
+ pages: [{ url: '/page/1' }],
17
17
  };
18
18
 
19
19
  describe('macro: pagination', () => {
20
- it('has additionally provided style classes', () => {
21
- const $ = cheerio.load(
22
- renderComponent('pagination', {
23
- ...EXAMPLE_PAGINATION_MINIMAL,
24
- classes: 'extra-class another-extra-class',
25
- }),
26
- );
27
-
28
- expect($('.ons-pagination').hasClass('extra-class')).toBe(true);
29
- expect($('.ons-pagination').hasClass('another-extra-class')).toBe(true);
30
- });
31
-
32
- it('has `ons-pagination--no-indicator` style class when `hideRangeIndicator` is `true`', () => {
33
- const $ = cheerio.load(
34
- renderComponent('pagination', {
35
- ...EXAMPLE_PAGINATION_MINIMAL,
36
- hideRangeIndicator: true,
37
- }),
38
- );
39
-
40
- expect($('.ons-pagination').hasClass('ons-pagination--no-indicator')).toBe(true);
41
- });
42
-
43
- it('does not have `ons-pagination--no-indicator` style class when `hideRangeIndicator` is `false`', () => {
44
- const $ = cheerio.load(
45
- renderComponent('pagination', {
46
- ...EXAMPLE_PAGINATION_MINIMAL,
47
- hideRangeIndicator: false,
48
- }),
49
- );
50
-
51
- expect($('.ons-pagination').hasClass('ons-pagination--no-indicator')).toBe(false);
52
- });
53
-
54
- describe('one page', () => {
55
- const $ = cheerio.load(
56
- renderComponent('pagination', {
57
- ...PAGINATION_PREV_NEXT_LABELS,
58
- currentPageNumber: 1,
59
- pages: [{ url: '/page/1' }],
60
- }),
61
- );
62
-
63
- it('passes jest-axe checks', async () => {
64
- const results = await axe($.html());
65
- expect(results).toHaveNoViolations();
20
+ it('has additionally provided style classes', () => {
21
+ const $ = cheerio.load(
22
+ renderComponent('pagination', {
23
+ ...EXAMPLE_PAGINATION_MINIMAL,
24
+ classes: 'extra-class another-extra-class',
25
+ }),
26
+ );
27
+
28
+ expect($('.ons-pagination').hasClass('extra-class')).toBe(true);
29
+ expect($('.ons-pagination').hasClass('another-extra-class')).toBe(true);
30
+ });
31
+
32
+ it('has `ons-pagination--no-indicator` style class when `hideRangeIndicator` is `true`', () => {
33
+ const $ = cheerio.load(
34
+ renderComponent('pagination', {
35
+ ...EXAMPLE_PAGINATION_MINIMAL,
36
+ hideRangeIndicator: true,
37
+ }),
38
+ );
39
+
40
+ expect($('.ons-pagination').hasClass('ons-pagination--no-indicator')).toBe(true);
41
+ });
42
+
43
+ it('does not have `ons-pagination--no-indicator` style class when `hideRangeIndicator` is `false`', () => {
44
+ const $ = cheerio.load(
45
+ renderComponent('pagination', {
46
+ ...EXAMPLE_PAGINATION_MINIMAL,
47
+ hideRangeIndicator: false,
48
+ }),
49
+ );
50
+
51
+ expect($('.ons-pagination').hasClass('ons-pagination--no-indicator')).toBe(false);
52
+ });
53
+
54
+ describe('one page', () => {
55
+ const $ = cheerio.load(
56
+ renderComponent('pagination', {
57
+ ...PAGINATION_PREV_NEXT_LABELS,
58
+ currentPageNumber: 1,
59
+ pages: [{ url: '/page/1' }],
60
+ }),
61
+ );
62
+
63
+ it('passes jest-axe checks', async () => {
64
+ const results = await axe($.html());
65
+ expect(results).toHaveNoViolations();
66
+ });
67
+
68
+ it('has `aria-label` attribute indicating position within pagination', () => {
69
+ expect($('.ons-pagination').attr('aria-label')).toBe('Pagination (Page 1 of 1)');
70
+ });
71
+
72
+ it('renders element indicating position within pagination', () => {
73
+ expect($('.ons-pagination__position').text().trim()).toBe('Page 1 of 1');
74
+ });
75
+
76
+ it('has a single list item', () => {
77
+ expect($('li').length).toBe(1);
78
+ assertIsCurrentPage($('.ons-pagination__item'), '/page/1', 'Current page (Page 1 of 1)', '1');
79
+ });
80
+ });
81
+
82
+ describe('two pages where first is the current page', () => {
83
+ const $ = cheerio.load(
84
+ renderComponent('pagination', {
85
+ ...PAGINATION_PREV_NEXT_LABELS,
86
+ currentPageNumber: 1,
87
+ pages: [{ url: '/page/1' }, { url: '/page/2' }],
88
+ }),
89
+ );
90
+
91
+ it('passes jest-axe checks', async () => {
92
+ const results = await axe($.html());
93
+ expect(results).toHaveNoViolations();
94
+ });
95
+
96
+ it('has `aria-label` attribute indicating position within pagination', () => {
97
+ expect($('.ons-pagination').attr('aria-label')).toBe('Pagination (Page 1 of 2)');
98
+ });
99
+
100
+ it('renders element indicating position within pagination', () => {
101
+ expect($('.ons-pagination__position').text().trim()).toBe('Page 1 of 2');
102
+ });
103
+
104
+ it('has a 3 list items ("1", "2", "Next page")', () => {
105
+ expect($('li').length).toBe(3);
106
+ assertIsCurrentPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Current page (Page 1 of 2)', '1');
107
+ assertIsNextPage($('.ons-pagination__item:nth-child(2)'), '/page/2', 'Go to page 2', '2');
108
+ assertIsNextPage($('.ons-pagination__item:nth-child(3)'), '/page/2', 'Go to the next page (Page 2)', 'Next page');
109
+ });
110
+ });
111
+
112
+ describe('two pages where second is the current page', () => {
113
+ const $ = cheerio.load(
114
+ renderComponent('pagination', {
115
+ ...PAGINATION_PREV_NEXT_LABELS,
116
+ currentPageNumber: 2,
117
+ pages: [{ url: '/page/1' }, { url: '/page/2' }],
118
+ }),
119
+ );
120
+
121
+ it('passes jest-axe checks', async () => {
122
+ const results = await axe($.html());
123
+ expect(results).toHaveNoViolations();
124
+ });
125
+
126
+ it('has `aria-label` attribute indicating position within pagination', () => {
127
+ expect($('.ons-pagination').attr('aria-label')).toBe('Pagination (Page 2 of 2)');
128
+ });
129
+
130
+ it('renders element indicating position within pagination', () => {
131
+ expect($('.ons-pagination__position').text().trim()).toBe('Page 2 of 2');
132
+ });
133
+
134
+ it('has a 3 list items ("Previous page", "1", "2")', () => {
135
+ expect($('li').length).toBe(3);
136
+ assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Go to the previous page (Page 1)', 'Previous page');
137
+ assertIsPreviousPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to page 1', '1');
138
+ assertIsCurrentPage($('.ons-pagination__item:nth-child(3)'), '/page/2', 'Current page (Page 2 of 2)', '2');
139
+ });
140
+ });
141
+
142
+ describe('three pages where second is the current page', () => {
143
+ const $ = cheerio.load(
144
+ renderComponent('pagination', {
145
+ ...PAGINATION_PREV_NEXT_LABELS,
146
+ currentPageNumber: 2,
147
+ pages: [{ url: '/page/1' }, { url: '/page/2' }, { url: '/page/3' }],
148
+ }),
149
+ );
150
+
151
+ it('passes jest-axe checks', async () => {
152
+ const results = await axe($.html());
153
+ expect(results).toHaveNoViolations();
154
+ });
155
+
156
+ it('has `aria-label` attribute indicating position within pagination', () => {
157
+ expect($('.ons-pagination').attr('aria-label')).toBe('Pagination (Page 2 of 3)');
158
+ });
159
+
160
+ it('renders element indicating position within pagination', () => {
161
+ expect($('.ons-pagination__position').text().trim()).toBe('Page 2 of 3');
162
+ });
163
+
164
+ it('has a 5 list items ("Previous page", "1", "2", "3", "Next page")', () => {
165
+ expect($('li').length).toBe(5);
166
+ assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Go to the previous page (Page 1)', 'Previous page');
167
+ assertIsPreviousPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to page 1', '1');
168
+ assertIsCurrentPage($('.ons-pagination__item:nth-child(3)'), '/page/2', 'Current page (Page 2 of 3)', '2');
169
+ assertIsNextPage($('.ons-pagination__item:nth-child(4)'), '/page/3', 'Go to page 3', '3');
170
+ assertIsNextPage($('.ons-pagination__item:nth-child(5)'), '/page/3', 'Go to the next page (Page 3)', 'Next page');
171
+ });
172
+ });
173
+
174
+ describe('five pages where second is the current page', () => {
175
+ const $ = cheerio.load(
176
+ renderComponent('pagination', {
177
+ ...PAGINATION_PREV_NEXT_LABELS,
178
+ currentPageNumber: 2,
179
+ pages: [{ url: '/page/1' }, { url: '/page/2' }, { url: '/page/3' }, { url: '/page/4' }, { url: '/page/5' }],
180
+ }),
181
+ );
182
+
183
+ it('passes jest-axe checks', async () => {
184
+ const results = await axe($.html());
185
+ expect(results).toHaveNoViolations();
186
+ });
187
+
188
+ it('has `aria-label` attribute indicating position within pagination', () => {
189
+ expect($('.ons-pagination').attr('aria-label')).toBe('Pagination (Page 2 of 5)');
190
+ });
191
+
192
+ it('renders element indicating position within pagination', () => {
193
+ expect($('.ons-pagination__position').text().trim()).toBe('Page 2 of 5');
194
+ });
195
+
196
+ it('has a 7 list items ("Previous page", "1", "2", "3", "4", "5", "Next page")', () => {
197
+ expect($('li').length).toBe(7);
198
+ assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Go to the previous page (Page 1)', 'Previous page');
199
+ assertIsPreviousPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to page 1', '1');
200
+ assertIsCurrentPage($('.ons-pagination__item:nth-child(3)'), '/page/2', 'Current page (Page 2 of 5)', '2');
201
+ assertIsNextPage($('.ons-pagination__item:nth-child(4)'), '/page/3', 'Go to page 3', '3');
202
+ assertIsOtherPage($('.ons-pagination__item:nth-child(5)'), '/page/4', 'Go to page 4', '4');
203
+ assertIsOtherPage($('.ons-pagination__item:nth-child(6)'), '/page/5', 'Go to the last page (Page 5)', '5');
204
+ assertIsNextPage($('.ons-pagination__item:nth-child(7)'), '/page/3', 'Go to the next page (Page 3)', 'Next page');
205
+ });
206
+ });
207
+
208
+ describe('six pages where second is the current page', () => {
209
+ const $ = cheerio.load(
210
+ renderComponent('pagination', {
211
+ ...PAGINATION_PREV_NEXT_LABELS,
212
+ currentPageNumber: 2,
213
+ pages: [
214
+ { url: '/page/1' },
215
+ { url: '/page/2' },
216
+ { url: '/page/3' },
217
+ { url: '/page/4' },
218
+ { url: '/page/5' },
219
+ { url: '/page/6' },
220
+ ],
221
+ }),
222
+ );
223
+
224
+ it('passes jest-axe checks', async () => {
225
+ const results = await axe($.html());
226
+ expect(results).toHaveNoViolations();
227
+ });
228
+
229
+ it('has `aria-label` attribute indicating position within pagination', () => {
230
+ expect($('.ons-pagination').attr('aria-label')).toBe('Pagination (Page 2 of 6)');
231
+ });
232
+
233
+ it('renders element indicating position within pagination', () => {
234
+ expect($('.ons-pagination__position').text().trim()).toBe('Page 2 of 6');
235
+ });
236
+
237
+ it('has 7 list items ("Previous page", "1", "2", "3", "...", "6", "Next page")', () => {
238
+ expect($('li').length).toBe(7);
239
+ assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Go to the previous page (Page 1)', 'Previous page');
240
+ assertIsPreviousPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to page 1', '1');
241
+ assertIsCurrentPage($('.ons-pagination__item:nth-child(3)'), '/page/2', 'Current page (Page 2 of 6)', '2');
242
+ assertIsNextPage($('.ons-pagination__item:nth-child(4)'), '/page/3', 'Go to page 3', '3');
243
+ assertIsGap($('.ons-pagination__item:nth-child(5)'));
244
+ assertIsOtherPage($('.ons-pagination__item:nth-child(6)'), '/page/6', 'Go to the last page (Page 6)', '6');
245
+ assertIsNextPage($('.ons-pagination__item:nth-child(7)'), '/page/3', 'Go to the next page (Page 3)', 'Next page');
246
+ });
247
+ });
248
+
249
+ describe('eleven pages where fifth is the current page', () => {
250
+ const $ = cheerio.load(
251
+ renderComponent('pagination', {
252
+ ...PAGINATION_PREV_NEXT_LABELS,
253
+ currentPageNumber: 5,
254
+ pages: [
255
+ { url: '/page/1' },
256
+ { url: '/page/2' },
257
+ { url: '/page/3' },
258
+ { url: '/page/4' },
259
+ { url: '/page/5' },
260
+ { url: '/page/6' },
261
+ { url: '/page/7' },
262
+ { url: '/page/8' },
263
+ { url: '/page/9' },
264
+ { url: '/page/10' },
265
+ { url: '/page/11' },
266
+ ],
267
+ }),
268
+ );
269
+
270
+ it('passes jest-axe checks', async () => {
271
+ const results = await axe($.html());
272
+ expect(results).toHaveNoViolations();
273
+ });
274
+
275
+ it('has `aria-label` attribute indicating position within pagination', () => {
276
+ expect($('.ons-pagination').attr('aria-label')).toBe('Pagination (Page 5 of 11)');
277
+ });
278
+
279
+ it('renders element indicating position within pagination', () => {
280
+ expect($('.ons-pagination__position').text().trim()).toBe('Page 5 of 11');
281
+ });
282
+
283
+ it('has a 9 list items ("Previous page", "1", "...", "4", "5", "6", "...", "11", "Next page")', () => {
284
+ expect($('li').length).toBe(9);
285
+ assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/4', 'Go to the previous page (Page 4)', 'Previous page');
286
+ assertIsOtherPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to the first page (Page 1)', '1');
287
+ assertIsGap($('.ons-pagination__item:nth-child(3)'));
288
+ assertIsPreviousPage($('.ons-pagination__item:nth-child(4)'), '/page/4', 'Go to page 4', '4');
289
+ assertIsCurrentPage($('.ons-pagination__item:nth-child(5)'), '/page/5', 'Current page (Page 5 of 11)', '5');
290
+ assertIsNextPage($('.ons-pagination__item:nth-child(6)'), '/page/6', 'Go to page 6', '6');
291
+ assertIsGap($('.ons-pagination__item:nth-child(7)'));
292
+ assertIsOtherPage($('.ons-pagination__item:nth-child(8)'), '/page/11', 'Go to the last page (Page 11)', '11');
293
+ assertIsNextPage($('.ons-pagination__item:nth-child(9)'), '/page/6', 'Go to the next page (Page 6)', 'Next page');
294
+ });
295
+ });
296
+
297
+ describe('eleven pages where tenth is the current page', () => {
298
+ const $ = cheerio.load(
299
+ renderComponent('pagination', {
300
+ ...PAGINATION_PREV_NEXT_LABELS,
301
+ currentPageNumber: 10,
302
+ pages: [
303
+ { url: '/page/1' },
304
+ { url: '/page/2' },
305
+ { url: '/page/3' },
306
+ { url: '/page/4' },
307
+ { url: '/page/5' },
308
+ { url: '/page/6' },
309
+ { url: '/page/7' },
310
+ { url: '/page/8' },
311
+ { url: '/page/9' },
312
+ { url: '/page/10' },
313
+ { url: '/page/11' },
314
+ ],
315
+ }),
316
+ );
317
+
318
+ it('passes jest-axe checks', async () => {
319
+ const results = await axe($.html());
320
+ expect(results).toHaveNoViolations();
321
+ });
322
+
323
+ it('has `aria-label` attribute indicating position within pagination', () => {
324
+ expect($('.ons-pagination').attr('aria-label')).toBe('Pagination (Page 10 of 11)');
325
+ });
326
+
327
+ it('renders element indicating position within pagination', () => {
328
+ expect($('.ons-pagination__position').text().trim()).toBe('Page 10 of 11');
329
+ });
330
+
331
+ it('has a 7 list items ("Previous page", "1", "...", "9", "10", "11", "Next page")', () => {
332
+ expect($('li').length).toBe(7);
333
+ assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/9', 'Go to the previous page (Page 9)', 'Previous page');
334
+ assertIsOtherPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to the first page (Page 1)', '1');
335
+ assertIsGap($('.ons-pagination__item:nth-child(3)'));
336
+ assertIsPreviousPage($('.ons-pagination__item:nth-child(4)'), '/page/9', 'Go to page 9', '9');
337
+ assertIsCurrentPage($('.ons-pagination__item:nth-child(5)'), '/page/10', 'Current page (Page 10 of 11)', '10');
338
+ assertIsNextPage($('.ons-pagination__item:nth-child(6)'), '/page/11', 'Go to page 11', '11');
339
+ assertIsNextPage($('.ons-pagination__item:nth-child(7)'), '/page/11', 'Go to the next page (Page 11)', 'Next page');
340
+ });
66
341
  });
67
-
68
- it('has `aria-label` attribute indicating position within pagination', () => {
69
- expect($('.ons-pagination').attr('aria-label')).toBe('Pagination (Page 1 of 1)');
70
- });
71
-
72
- it('renders element indicating position within pagination', () => {
73
- expect($('.ons-pagination__position').text().trim()).toBe('Page 1 of 1');
74
- });
75
-
76
- it('has a single list item', () => {
77
- expect($('li').length).toBe(1);
78
- assertIsCurrentPage($('.ons-pagination__item'), '/page/1', 'Current page (Page 1 of 1)', '1');
79
- });
80
- });
81
-
82
- describe('two pages where first is the current page', () => {
83
- const $ = cheerio.load(
84
- renderComponent('pagination', {
85
- ...PAGINATION_PREV_NEXT_LABELS,
86
- currentPageNumber: 1,
87
- pages: [{ url: '/page/1' }, { url: '/page/2' }],
88
- }),
89
- );
90
-
91
- it('passes jest-axe checks', async () => {
92
- const results = await axe($.html());
93
- expect(results).toHaveNoViolations();
94
- });
95
-
96
- it('has `aria-label` attribute indicating position within pagination', () => {
97
- expect($('.ons-pagination').attr('aria-label')).toBe('Pagination (Page 1 of 2)');
98
- });
99
-
100
- it('renders element indicating position within pagination', () => {
101
- expect($('.ons-pagination__position').text().trim()).toBe('Page 1 of 2');
102
- });
103
-
104
- it('has a 3 list items ("1", "2", "Next page")', () => {
105
- expect($('li').length).toBe(3);
106
- assertIsCurrentPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Current page (Page 1 of 2)', '1');
107
- assertIsNextPage($('.ons-pagination__item:nth-child(2)'), '/page/2', 'Go to page 2', '2');
108
- assertIsNextPage($('.ons-pagination__item:nth-child(3)'), '/page/2', 'Go to the next page (Page 2)', 'Next page');
109
- });
110
- });
111
-
112
- describe('two pages where second is the current page', () => {
113
- const $ = cheerio.load(
114
- renderComponent('pagination', {
115
- ...PAGINATION_PREV_NEXT_LABELS,
116
- currentPageNumber: 2,
117
- pages: [{ url: '/page/1' }, { url: '/page/2' }],
118
- }),
119
- );
120
-
121
- it('passes jest-axe checks', async () => {
122
- const results = await axe($.html());
123
- expect(results).toHaveNoViolations();
124
- });
125
-
126
- it('has `aria-label` attribute indicating position within pagination', () => {
127
- expect($('.ons-pagination').attr('aria-label')).toBe('Pagination (Page 2 of 2)');
128
- });
129
-
130
- it('renders element indicating position within pagination', () => {
131
- expect($('.ons-pagination__position').text().trim()).toBe('Page 2 of 2');
132
- });
133
-
134
- it('has a 3 list items ("Previous page", "1", "2")', () => {
135
- expect($('li').length).toBe(3);
136
- assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Go to the previous page (Page 1)', 'Previous page');
137
- assertIsPreviousPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to page 1', '1');
138
- assertIsCurrentPage($('.ons-pagination__item:nth-child(3)'), '/page/2', 'Current page (Page 2 of 2)', '2');
139
- });
140
- });
141
-
142
- describe('three pages where second is the current page', () => {
143
- const $ = cheerio.load(
144
- renderComponent('pagination', {
145
- ...PAGINATION_PREV_NEXT_LABELS,
146
- currentPageNumber: 2,
147
- pages: [{ url: '/page/1' }, { url: '/page/2' }, { url: '/page/3' }],
148
- }),
149
- );
150
-
151
- it('passes jest-axe checks', async () => {
152
- const results = await axe($.html());
153
- expect(results).toHaveNoViolations();
154
- });
155
-
156
- it('has `aria-label` attribute indicating position within pagination', () => {
157
- expect($('.ons-pagination').attr('aria-label')).toBe('Pagination (Page 2 of 3)');
158
- });
159
-
160
- it('renders element indicating position within pagination', () => {
161
- expect($('.ons-pagination__position').text().trim()).toBe('Page 2 of 3');
162
- });
163
-
164
- it('has a 5 list items ("Previous page", "1", "2", "3", "Next page")', () => {
165
- expect($('li').length).toBe(5);
166
- assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Go to the previous page (Page 1)', 'Previous page');
167
- assertIsPreviousPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to page 1', '1');
168
- assertIsCurrentPage($('.ons-pagination__item:nth-child(3)'), '/page/2', 'Current page (Page 2 of 3)', '2');
169
- assertIsNextPage($('.ons-pagination__item:nth-child(4)'), '/page/3', 'Go to page 3', '3');
170
- assertIsNextPage($('.ons-pagination__item:nth-child(5)'), '/page/3', 'Go to the next page (Page 3)', 'Next page');
171
- });
172
- });
173
-
174
- describe('five pages where second is the current page', () => {
175
- const $ = cheerio.load(
176
- renderComponent('pagination', {
177
- ...PAGINATION_PREV_NEXT_LABELS,
178
- currentPageNumber: 2,
179
- pages: [{ url: '/page/1' }, { url: '/page/2' }, { url: '/page/3' }, { url: '/page/4' }, { url: '/page/5' }],
180
- }),
181
- );
182
-
183
- it('passes jest-axe checks', async () => {
184
- const results = await axe($.html());
185
- expect(results).toHaveNoViolations();
186
- });
187
-
188
- it('has `aria-label` attribute indicating position within pagination', () => {
189
- expect($('.ons-pagination').attr('aria-label')).toBe('Pagination (Page 2 of 5)');
190
- });
191
-
192
- it('renders element indicating position within pagination', () => {
193
- expect($('.ons-pagination__position').text().trim()).toBe('Page 2 of 5');
194
- });
195
-
196
- it('has a 7 list items ("Previous page", "1", "2", "3", "4", "5", "Next page")', () => {
197
- expect($('li').length).toBe(7);
198
- assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Go to the previous page (Page 1)', 'Previous page');
199
- assertIsPreviousPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to page 1', '1');
200
- assertIsCurrentPage($('.ons-pagination__item:nth-child(3)'), '/page/2', 'Current page (Page 2 of 5)', '2');
201
- assertIsNextPage($('.ons-pagination__item:nth-child(4)'), '/page/3', 'Go to page 3', '3');
202
- assertIsOtherPage($('.ons-pagination__item:nth-child(5)'), '/page/4', 'Go to page 4', '4');
203
- assertIsOtherPage($('.ons-pagination__item:nth-child(6)'), '/page/5', 'Go to the last page (Page 5)', '5');
204
- assertIsNextPage($('.ons-pagination__item:nth-child(7)'), '/page/3', 'Go to the next page (Page 3)', 'Next page');
205
- });
206
- });
207
-
208
- describe('six pages where second is the current page', () => {
209
- const $ = cheerio.load(
210
- renderComponent('pagination', {
211
- ...PAGINATION_PREV_NEXT_LABELS,
212
- currentPageNumber: 2,
213
- pages: [{ url: '/page/1' }, { url: '/page/2' }, { url: '/page/3' }, { url: '/page/4' }, { url: '/page/5' }, { url: '/page/6' }],
214
- }),
215
- );
216
-
217
- it('passes jest-axe checks', async () => {
218
- const results = await axe($.html());
219
- expect(results).toHaveNoViolations();
220
- });
221
-
222
- it('has `aria-label` attribute indicating position within pagination', () => {
223
- expect($('.ons-pagination').attr('aria-label')).toBe('Pagination (Page 2 of 6)');
224
- });
225
-
226
- it('renders element indicating position within pagination', () => {
227
- expect($('.ons-pagination__position').text().trim()).toBe('Page 2 of 6');
228
- });
229
-
230
- it('has 7 list items ("Previous page", "1", "2", "3", "...", "6", "Next page")', () => {
231
- expect($('li').length).toBe(7);
232
- assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Go to the previous page (Page 1)', 'Previous page');
233
- assertIsPreviousPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to page 1', '1');
234
- assertIsCurrentPage($('.ons-pagination__item:nth-child(3)'), '/page/2', 'Current page (Page 2 of 6)', '2');
235
- assertIsNextPage($('.ons-pagination__item:nth-child(4)'), '/page/3', 'Go to page 3', '3');
236
- assertIsGap($('.ons-pagination__item:nth-child(5)'));
237
- assertIsOtherPage($('.ons-pagination__item:nth-child(6)'), '/page/6', 'Go to the last page (Page 6)', '6');
238
- assertIsNextPage($('.ons-pagination__item:nth-child(7)'), '/page/3', 'Go to the next page (Page 3)', 'Next page');
239
- });
240
- });
241
-
242
- describe('eleven pages where fifth is the current page', () => {
243
- const $ = cheerio.load(
244
- renderComponent('pagination', {
245
- ...PAGINATION_PREV_NEXT_LABELS,
246
- currentPageNumber: 5,
247
- pages: [
248
- { url: '/page/1' },
249
- { url: '/page/2' },
250
- { url: '/page/3' },
251
- { url: '/page/4' },
252
- { url: '/page/5' },
253
- { url: '/page/6' },
254
- { url: '/page/7' },
255
- { url: '/page/8' },
256
- { url: '/page/9' },
257
- { url: '/page/10' },
258
- { url: '/page/11' },
259
- ],
260
- }),
261
- );
262
-
263
- it('passes jest-axe checks', async () => {
264
- const results = await axe($.html());
265
- expect(results).toHaveNoViolations();
266
- });
267
-
268
- it('has `aria-label` attribute indicating position within pagination', () => {
269
- expect($('.ons-pagination').attr('aria-label')).toBe('Pagination (Page 5 of 11)');
270
- });
271
-
272
- it('renders element indicating position within pagination', () => {
273
- expect($('.ons-pagination__position').text().trim()).toBe('Page 5 of 11');
274
- });
275
-
276
- it('has a 9 list items ("Previous page", "1", "...", "4", "5", "6", "...", "11", "Next page")', () => {
277
- expect($('li').length).toBe(9);
278
- assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/4', 'Go to the previous page (Page 4)', 'Previous page');
279
- assertIsOtherPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to the first page (Page 1)', '1');
280
- assertIsGap($('.ons-pagination__item:nth-child(3)'));
281
- assertIsPreviousPage($('.ons-pagination__item:nth-child(4)'), '/page/4', 'Go to page 4', '4');
282
- assertIsCurrentPage($('.ons-pagination__item:nth-child(5)'), '/page/5', 'Current page (Page 5 of 11)', '5');
283
- assertIsNextPage($('.ons-pagination__item:nth-child(6)'), '/page/6', 'Go to page 6', '6');
284
- assertIsGap($('.ons-pagination__item:nth-child(7)'));
285
- assertIsOtherPage($('.ons-pagination__item:nth-child(8)'), '/page/11', 'Go to the last page (Page 11)', '11');
286
- assertIsNextPage($('.ons-pagination__item:nth-child(9)'), '/page/6', 'Go to the next page (Page 6)', 'Next page');
287
- });
288
- });
289
-
290
- describe('eleven pages where tenth is the current page', () => {
291
- const $ = cheerio.load(
292
- renderComponent('pagination', {
293
- ...PAGINATION_PREV_NEXT_LABELS,
294
- currentPageNumber: 10,
295
- pages: [
296
- { url: '/page/1' },
297
- { url: '/page/2' },
298
- { url: '/page/3' },
299
- { url: '/page/4' },
300
- { url: '/page/5' },
301
- { url: '/page/6' },
302
- { url: '/page/7' },
303
- { url: '/page/8' },
304
- { url: '/page/9' },
305
- { url: '/page/10' },
306
- { url: '/page/11' },
307
- ],
308
- }),
309
- );
310
-
311
- it('passes jest-axe checks', async () => {
312
- const results = await axe($.html());
313
- expect(results).toHaveNoViolations();
314
- });
315
-
316
- it('has `aria-label` attribute indicating position within pagination', () => {
317
- expect($('.ons-pagination').attr('aria-label')).toBe('Pagination (Page 10 of 11)');
318
- });
319
-
320
- it('renders element indicating position within pagination', () => {
321
- expect($('.ons-pagination__position').text().trim()).toBe('Page 10 of 11');
322
- });
323
-
324
- it('has a 7 list items ("Previous page", "1", "...", "9", "10", "11", "Next page")', () => {
325
- expect($('li').length).toBe(7);
326
- assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/9', 'Go to the previous page (Page 9)', 'Previous page');
327
- assertIsOtherPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to the first page (Page 1)', '1');
328
- assertIsGap($('.ons-pagination__item:nth-child(3)'));
329
- assertIsPreviousPage($('.ons-pagination__item:nth-child(4)'), '/page/9', 'Go to page 9', '9');
330
- assertIsCurrentPage($('.ons-pagination__item:nth-child(5)'), '/page/10', 'Current page (Page 10 of 11)', '10');
331
- assertIsNextPage($('.ons-pagination__item:nth-child(6)'), '/page/11', 'Go to page 11', '11');
332
- assertIsNextPage($('.ons-pagination__item:nth-child(7)'), '/page/11', 'Go to the next page (Page 11)', 'Next page');
333
- });
334
- });
335
342
  });
336
343
 
337
344
  function assertIsCurrentPage(pageItem, url, label, text) {
338
- expect(pageItem.hasClass('ons-pagination__item--current')).toBe(true);
339
- expect(pageItem.find('.ons-pagination__link').attr('href')).toBe(url);
340
- expect(pageItem.find('.ons-pagination__link').attr('aria-current')).toBe('true');
341
- expect(pageItem.find('.ons-pagination__link').attr('aria-label')).toBe(label);
342
- expect(pageItem.find('.ons-pagination__link').text().trim()).toBe(text);
345
+ expect(pageItem.hasClass('ons-pagination__item--current')).toBe(true);
346
+ expect(pageItem.find('.ons-pagination__link').attr('href')).toBe(url);
347
+ expect(pageItem.find('.ons-pagination__link').attr('aria-current')).toBe('true');
348
+ expect(pageItem.find('.ons-pagination__link').attr('aria-label')).toBe(label);
349
+ expect(pageItem.find('.ons-pagination__link').text().trim()).toBe(text);
343
350
  }
344
351
 
345
352
  function assertIsOtherPage(pageItem, url, label, text) {
346
- expect(pageItem.hasClass('ons-pagination__item--current')).toBe(false);
347
- expect(pageItem.find('.ons-pagination__link').attr('href')).toBe(url);
348
- expect(pageItem.find('.ons-pagination__link').attr('aria-current')).toBeUndefined();
349
- expect(pageItem.find('.ons-pagination__link').attr('aria-label')).toBe(label);
350
- expect(pageItem.find('.ons-pagination__link').text().trim()).toBe(text);
353
+ expect(pageItem.hasClass('ons-pagination__item--current')).toBe(false);
354
+ expect(pageItem.find('.ons-pagination__link').attr('href')).toBe(url);
355
+ expect(pageItem.find('.ons-pagination__link').attr('aria-current')).toBeUndefined();
356
+ expect(pageItem.find('.ons-pagination__link').attr('aria-label')).toBe(label);
357
+ expect(pageItem.find('.ons-pagination__link').text().trim()).toBe(text);
351
358
  }
352
359
 
353
360
  function assertIsPreviousPage(pageItem, url, label, text) {
354
- assertIsOtherPage(pageItem, url, label, text);
355
- expect(pageItem.find('.ons-pagination__link').attr('rel')).toBe('prev');
361
+ assertIsOtherPage(pageItem, url, label, text);
362
+ expect(pageItem.find('.ons-pagination__link').attr('rel')).toBe('prev');
356
363
  }
357
364
 
358
365
  function assertIsNextPage(pageItem, url, label, text) {
359
- assertIsOtherPage(pageItem, url, label, text);
360
- expect(pageItem.find('.ons-pagination__link').attr('rel')).toBe('next');
366
+ assertIsOtherPage(pageItem, url, label, text);
367
+ expect(pageItem.find('.ons-pagination__link').attr('rel')).toBe('next');
361
368
  }
362
369
 
363
370
  function assertIsGap(pageItem) {
364
- expect(pageItem.hasClass('ons-pagination__item--gap')).toBe(true);
365
- expect(pageItem.text().trim()).toBe('…');
371
+ expect(pageItem.hasClass('ons-pagination__item--gap')).toBe(true);
372
+ expect(pageItem.text().trim()).toBe('…');
366
373
  }