@ons/design-system 64.0.0 → 65.0.0

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 (71) hide show
  1. package/components/access-code/_macro.njk +2 -2
  2. package/components/access-code/_macro.spec.js +2 -2
  3. package/components/access-code/access-code.dom.js +11 -0
  4. package/components/access-code/{uac.js → access-code.js} +1 -1
  5. package/components/access-code/{uac.scss → access-code.scss} +1 -1
  6. package/components/access-code/example-access-code-error.njk +6 -6
  7. package/components/access-code/example-access-code.njk +4 -4
  8. package/components/accordion/_macro.njk +2 -2
  9. package/components/accordion/_macro.spec.js +3 -3
  10. package/components/accordion/accordion.dom.js +1 -1
  11. package/components/accordion/accordion.js +1 -1
  12. package/components/breadcrumbs/_breadcrumbs.scss +6 -6
  13. package/components/breadcrumbs/_macro.njk +4 -4
  14. package/components/breadcrumbs/_macro.spec.js +13 -13
  15. package/components/button/_button.scss +27 -27
  16. package/components/button/_macro.spec.js +2 -2
  17. package/components/call-to-action/_macro.njk +1 -1
  18. package/components/date-input/_macro.njk +3 -3
  19. package/components/date-input/_macro.spec.js +118 -0
  20. package/components/date-input/example-date-input-error-for-single-field.njk +63 -0
  21. package/components/details/_details.scss +1 -1
  22. package/components/external-link/_external-link.scss +3 -3
  23. package/components/external-link/_macro.njk +1 -1
  24. package/components/footer/_footer.scss +2 -2
  25. package/components/footer/example-footer-with-alternative-organisation.njk +5 -5
  26. package/components/header/_header.scss +8 -8
  27. package/components/icon/_icon.scss +1 -1
  28. package/components/icon/_macro.njk +35 -35
  29. package/components/icon/_macro.spec.js +1 -1
  30. package/components/image/_image.scss +2 -2
  31. package/components/image/_macro.njk +4 -6
  32. package/components/image/_macro.spec.js +10 -10
  33. package/components/mutually-exclusive/_macro.njk +4 -3
  34. package/components/pagination/_macro.njk +2 -2
  35. package/components/pagination/example-pagination-first.njk +0 -2
  36. package/components/pagination/example-pagination-last.njk +0 -2
  37. package/components/pagination/example-pagination-with-no-range-indicator.njk +0 -2
  38. package/components/pagination/example-pagination.njk +0 -2
  39. package/components/panel/_macro.njk +1 -1
  40. package/components/panel/_panel.scss +7 -7
  41. package/components/password/_macro.njk +1 -1
  42. package/components/password/example-password.njk +1 -2
  43. package/components/quote/_quote.scss +1 -1
  44. package/components/radios/_macro.njk +1 -1
  45. package/components/skip-to-content/_macro.njk +2 -1
  46. package/components/skip-to-content/_macro.spec.js +17 -3
  47. package/components/skip-to-content/_skip.scss +1 -1
  48. package/components/skip-to-content/skip-to-content.dom.js +1 -1
  49. package/components/skip-to-content/skip-to-content.spec.js +3 -3
  50. package/components/summary/_summary.scss +1 -1
  51. package/components/table/_table.scss +6 -6
  52. package/components/table/sortable-table.js +1 -1
  53. package/components/timeline/_macro.njk +18 -22
  54. package/components/timeline/_macro.spec.js +18 -0
  55. package/components/video/example-video.njk +1 -1
  56. package/components/video/video.js +10 -1
  57. package/components/video/video.spec.js +33 -0
  58. package/css/main.css +3 -3
  59. package/css/print.css +1 -1
  60. package/js/main.js +1 -1
  61. package/package.json +1 -1
  62. package/scripts/main.es5.js +1 -1
  63. package/scripts/main.js +1 -1
  64. package/scss/base/_global.scss +1 -1
  65. package/scss/main.scss +1 -1
  66. package/scss/objects/_spacing.scss +3 -3
  67. package/scss/overrides/hcm.scss +6 -6
  68. package/scss/overrides/rtl.scss +2 -2
  69. package/scss/print.scss +1 -1
  70. package/components/access-code/uac.dom.js +0 -11
  71. /package/components/access-code/{uac.spec.js → access-code.spec.js} +0 -0
package/scss/base/_global.scss CHANGED
@@ -61,7 +61,7 @@ a {
61
61
  color: var(--ons-color-text-link-hover);
62
62
  text-decoration: underline solid var(--ons-color-text-link-hover) 2px;
63
63
  }
64
- &:focus:not(.ons-btn--link):not(.ons-btn--ghost):not(.ons-js-clear-btn):not(.ons-download__thumbnail--link):not(.ons-tab--row):not(.ons-skip-link) {
64
+ &:focus:not(.ons-btn--link):not(.ons-btn--ghost):not(.ons-js-clear-btn):not(.ons-download__thumbnail--link):not(.ons-tab--row):not(.ons-skip-to-content) {
65
65
  @extend %a-focus;
66
66
  }
67
67
  }
package/scss/main.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  @import 'helpers/index';
4
4
  @import 'base/index';
5
5
  @import 'objects/index';
6
- @import '../components/access-code/uac';
6
+ @import '../components/access-code/access-code';
7
7
  @import '../components/address-output/address-output';
8
8
  @import '../components/autosuggest/autosuggest';
9
9
  @import '../components/breadcrumbs/breadcrumbs';
package/scss/objects/_spacing.scss CHANGED
@@ -2,11 +2,11 @@
2
2
  .ons-field-group +,
3
3
  .ons-fieldset +,
4
4
  .ons-input-items +,
5
- .ons-figure +,
5
+ .ons-image +,
6
6
  .ons-panel +,
7
7
  .ons-summary__group +,
8
8
  .ons-details:not(.ons-details--accordion) + {
9
- .ons-figure,
9
+ .ons-image,
10
10
  .ons-panel,
11
11
  .ons-field,
12
12
  .ons-field-group,
@@ -17,6 +17,6 @@
17
17
  }
18
18
  }
19
19
 
20
- .ons-breadcrumb + .ons-grid {
20
+ .ons-breadcrumbs + .ons-grid {
21
21
  margin-top: -1rem;
22
22
  }
package/scss/overrides/hcm.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  // Brightness makes all images black, except transparent parts, which remain transparent
4
4
  // Then, invert(1) makes the black parts white
5
5
  .ons-footer__ogl-img,
6
- .ons-quote .ons-svg-icon,
6
+ .ons-quote .ons-icon,
7
7
  .ons-footer img {
8
8
  filter: brightness(0) invert(1);
9
9
  }
@@ -36,7 +36,7 @@
36
36
  // Select - Overrides custom background image icon
37
37
  .ons-input--select {
38
38
  background: var(--ons-color-input-bg)
39
- url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ons-svg-icon' viewBox='0 0 12 8'%3E%3Cpath fill='%23fff' d='M1.5.3 6 5.4 10.5.3c.2-.2.4-.2.6 0l.7.7c.1.2.1.4 0 .5L6.3 7.7c-.2.2-.4.2-.6 0L.2 1.6C.1 1.4.1 1.2.2 1L.9.3c.2-.1.4-.1.6 0z'/%3E%3C/svg%3E")
39
+ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ons-icon' viewBox='0 0 12 8'%3E%3Cpath fill='%23fff' d='M1.5.3 6 5.4 10.5.3c.2-.2.4-.2.6 0l.7.7c.1.2.1.4 0 .5L6.3 7.7c-.2.2-.4.2-.6 0L.2 1.6C.1 1.4.1 1.2.2 1L.9.3c.2-.1.4-.1.6 0z'/%3E%3C/svg%3E")
40
40
  no-repeat center right 10px;
41
41
  background-size: 1rem;
42
42
  }
@@ -48,12 +48,12 @@
48
48
 
49
49
  // Element icons – matches icon with the link colour
50
50
  .ons-details,
51
- .ons-breadcrumb__item,
51
+ .ons-breadcrumbs__item,
52
52
  .ons-panel,
53
53
  .ons-btn__inner,
54
54
  .ons-external-link,
55
55
  .ons-list--icons {
56
- & .ons-svg-icon {
56
+ & .ons-icon {
57
57
  fill: currentColor !important;
58
58
  forced-color-adjust: auto;
59
59
  }
@@ -63,7 +63,7 @@
63
63
  .ons-header__org-logo,
64
64
  .ons-header__title-logo,
65
65
  .ons-footer {
66
- & .ons-svg-logo {
66
+ & .ons-icon--logo {
67
67
  fill: currentColor !important;
68
68
  forced-color-adjust: auto;
69
69
  }
@@ -115,7 +115,7 @@
115
115
  }
116
116
 
117
117
  // Add borders to separate banners with no backgrounds
118
- .ons-skip-link,
118
+ .ons-skip-to-content,
119
119
  .ons-browser-banner,
120
120
  .ons-cookies-banner,
121
121
  .ons-header,
package/scss/overrides/rtl.scss CHANGED
@@ -63,7 +63,7 @@
63
63
 
64
64
  // Buttons
65
65
  .ons-btn {
66
- .ons-svg-icon {
66
+ .ons-icon {
67
67
  margin: 0 0.5rem 0.1rem 0;
68
68
  transform: rotate(180deg);
69
69
  }
@@ -83,7 +83,7 @@
83
83
  margin: 0 2rem 0 0;
84
84
  }
85
85
 
86
- .ons-svg-icon {
86
+ .ons-icon {
87
87
  transform: rotate(180deg);
88
88
  }
89
89
  }
package/scss/print.scss CHANGED
@@ -4,7 +4,7 @@
4
4
  .ons-footer,
5
5
  .ons-cookies-banner,
6
6
  .ons-language-links,
7
- .ons-breadcrumb,
7
+ .ons-breadcrumbs,
8
8
  .ons-u-ph {
9
9
  display: none !important;
10
10
  }
package/components/access-code/uac.dom.js DELETED
@@ -1,11 +0,0 @@
1
- import domready from '../../js/domready';
2
-
3
- domready(async () => {
4
- const uacInputs = [...document.querySelectorAll('.ons-js-uac')];
5
-
6
- if (uacInputs.length) {
7
- const UAC = (await import('./uac')).default;
8
-
9
- uacInputs.forEach(element => new UAC(element));
10
- }
11
- });