@ons/design-system 74.0.0-next.1 → 74.0.0-next.10

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 (107) hide show
  1. package/README.md +15 -3
  2. package/components/access-code/example-access-code-error.njk +1 -1
  3. package/components/access-code/example-access-code.njk +1 -1
  4. package/components/address-input/autosuggest.address.spec.js +23 -0
  5. package/components/autosuggest/autosuggest.ui.js +3 -0
  6. package/components/back-to-top/example-full-page-back-to-top.njk +1 -1
  7. package/components/breadcrumbs/_breadcrumbs.scss +4 -7
  8. package/components/breadcrumbs/_macro.njk +29 -25
  9. package/components/breadcrumbs/_macro.spec.js +39 -0
  10. package/components/breadcrumbs/example-breadcrumbs-wide.njk +52 -0
  11. package/components/chart/_chart.scss +0 -9
  12. package/components/chart/_macro.njk +96 -128
  13. package/components/chart/_macro.spec.js +43 -28
  14. package/components/chart/example-area-chart-with-axis-min-and-max-values.njk +6 -3
  15. package/components/chart/example-area-chart.njk +6 -3
  16. package/components/chart/example-bar-chart-with-annotations.njk +6 -3
  17. package/components/chart/example-bar-chart-with-axis-min-and-max-values.njk +6 -3
  18. package/components/chart/example-bar-chart-with-point-range-and-reference-line-annotations.njk +6 -3
  19. package/components/chart/example-bar-chart.njk +6 -3
  20. package/components/chart/example-bar-with-confidence-levels.njk +6 -3
  21. package/components/chart/example-clustered-bar-chart.njk +6 -3
  22. package/components/chart/example-clustered-column-chart.njk +6 -3
  23. package/components/chart/example-column-chart-with-annotations.njk +6 -3
  24. package/components/chart/example-column-chart-with-axis-min-and-max-values.njk +6 -3
  25. package/components/chart/example-column-chart-with-custom-reference-line-value.njk +6 -3
  26. package/components/chart/example-column-chart-with-range-annotations.njk +6 -3
  27. package/components/chart/example-column-chart-with-reference-line-annotations.njk +6 -3
  28. package/components/chart/example-column-chart.njk +6 -3
  29. package/components/chart/example-column-with-confidence-levels.njk +6 -3
  30. package/components/chart/example-column-with-line-chart.njk +6 -3
  31. package/components/chart/example-iframe-chart.njk +6 -3
  32. package/components/chart/example-line-chart-with-annotations.njk +6 -3
  33. package/components/chart/example-line-chart-with-axis-min-and-max-values.njk +6 -3
  34. package/components/chart/example-line-chart-with-custom-reference-line-value.njk +6 -3
  35. package/components/chart/example-line-chart-with-label-format.njk +6 -3
  36. package/components/chart/example-line-chart-with-markers.njk +6 -3
  37. package/components/chart/example-line-chart-with-range-annotations-inside.njk +6 -3
  38. package/components/chart/example-line-chart-with-range-annotations-outside-left-right.njk +6 -3
  39. package/components/chart/example-line-chart-with-range-annotations-outside-top-bottom.njk +6 -3
  40. package/components/chart/example-line-chart-with-reference-line-annotations.njk +6 -3
  41. package/components/chart/example-line-chart.njk +6 -3
  42. package/components/chart/example-scatter-chart-with-axis-min-and-max-values.njk +6 -3
  43. package/components/chart/example-scatter-chart.njk +6 -3
  44. package/components/chart/example-stacked-bar-chart.njk +6 -3
  45. package/components/chart/example-stacked-column-chart.njk +6 -3
  46. package/components/document-list/_macro.njk +2 -2
  47. package/components/document-list/_macro.spec.js +55 -0
  48. package/components/featured-article/_macro.njk +3 -37
  49. package/components/featured-article/example-featured-article-with-chart.njk +19 -14
  50. package/components/featured-article/example-featured-article-with-image.njk +12 -7
  51. package/components/featured-article/featured-article.scss +1 -1
  52. package/components/featured-article/macro.spec.js +44 -67
  53. package/components/figure/_figure.scss +31 -0
  54. package/components/figure/_macro.njk +98 -0
  55. package/components/figure/_macro.spec.js +520 -0
  56. package/components/figure/example-figure-heading-level-2.njk +34 -0
  57. package/components/figure/example-figure-with-div.njk +29 -0
  58. package/components/figure/example-figure-without-footer.njk +12 -0
  59. package/components/figure/example-figure-without-header.njk +24 -0
  60. package/components/figure/example-figure.njk +34 -0
  61. package/components/header/_header.scss +1 -3
  62. package/components/header/_macro.njk +8 -4
  63. package/components/header/_macro.spec.js +48 -0
  64. package/components/hero/_macro.njk +3 -2
  65. package/components/hero/_macro.spec.js +36 -0
  66. package/components/hero/example-hero-dark-wide.njk +17 -0
  67. package/components/hero/example-hero-dark-with-external-breadcrumbs.njk +17 -21
  68. package/components/hero/example-hero-default-full-width.njk +16 -0
  69. package/components/hero/example-hero-default-with-external-breadcrumbs.njk +165 -169
  70. package/components/hero/example-hero-grey-with-external-breadcrumbs.njk +207 -211
  71. package/components/hero/example-hero-navy-blue-with-external-breadcrumbs.njk +163 -167
  72. package/components/hero/example-hero-pale-blue-with-external-breadcrumbs.njk +165 -169
  73. package/components/image/_image.scss +0 -7
  74. package/components/image/_macro.njk +25 -14
  75. package/components/image/_macro.spec.js +122 -7
  76. package/components/image/example-image-with-figure-fields.njk +25 -0
  77. package/components/list/_macro.njk +1 -0
  78. package/components/list/_macro.spec.js +16 -0
  79. package/components/question/example-question-ccs.njk +1 -1
  80. package/components/question/example-question-fieldset.njk +1 -1
  81. package/components/question/example-question-interviewer-note.njk +1 -1
  82. package/components/question/example-question-no-fieldset.njk +1 -1
  83. package/components/relationships/example-relationships-error.njk +1 -1
  84. package/components/relationships/example-relationships-you.njk +1 -1
  85. package/components/relationships/example-relationships.njk +1 -1
  86. package/components/table/_macro.njk +138 -111
  87. package/components/table/_macro.spec.js +175 -16
  88. package/components/table/_table.scss +6 -1
  89. package/components/table/example-table-basic-no-caption.njk +46 -0
  90. package/components/table/example-table-basic-visually-hidden-caption.njk +47 -0
  91. package/components/table/example-table-with-figure-fields.njk +86 -0
  92. package/components/table/table.spec.js +2 -0
  93. package/components/table-of-contents/_macro.njk +6 -4
  94. package/components/table-of-contents/_macro.spec.js +43 -3
  95. package/components/table-of-contents/example-table-of-contents-ordered.njk +64 -0
  96. package/components/table-of-contents/example-table-of-contents-sticky-full-page-ordered.njk +156 -0
  97. package/components/table-of-contents/example-table-of-contents-sticky-full-page.njk +1 -1
  98. package/components/table-of-contents/table-of-contents.spec.js +4 -5
  99. package/css/main.css +1 -1
  100. package/layout/_template.njk +66 -46
  101. package/package.json +45 -36
  102. package/scripts/main.es5.js +3 -3
  103. package/scripts/main.js +2 -2
  104. package/scss/base/_global.scss +8 -0
  105. package/scss/main.scss +1 -0
  106. package/scss/objects/_page.scss +1 -1
  107. package/scss/objects/_spacing.scss +0 -4
package/scss/base/_global.scss CHANGED
@@ -17,6 +17,14 @@ body {
17
17
  height: 100%;
18
18
  margin: 0;
19
19
  position: relative;
20
+
21
+ padding-top: env(safe-area-inset-top, 0px);
22
+ padding-bottom: env(safe-area-inset-bottom, 0px);
23
+
24
+ @media (orientation: landscape) {
25
+ padding-left: env(safe-area-inset-left, 0px);
26
+ padding-right: env(safe-area-inset-right, 0px);
27
+ }
20
28
  }
21
29
 
22
30
  img {
package/scss/main.scss CHANGED
@@ -28,6 +28,7 @@
28
28
  @import '../components/field/field-group';
29
29
  @import '../components/field/field';
30
30
  @import '../components/fieldset/fieldset';
31
+ @import '../components/figure/figure';
31
32
  @import '../components/footer/footer';
32
33
  @import '../components/header/header';
33
34
  @import '../components/hero/hero';
package/scss/objects/_page.scss CHANGED
@@ -23,7 +23,7 @@
23
23
  }
24
24
 
25
25
  // Adjust margin-top when .ons-page__main contains .ons-panel--error
26
- .ons-breadcrumbs ~ .ons-grid .ons-grid__col .ons-page__main:has(.ons-panel--error) {
26
+ header:has(.ons-breadcrumbs) ~ main .ons-grid .ons-grid__col .ons-page__main:has(.ons-panel--error) {
27
27
  margin-top: 1rem;
28
28
  }
29
29
 
package/scss/objects/_spacing.scss CHANGED
@@ -16,7 +16,3 @@
16
16
  margin-top: 1.5rem;
17
17
  }
18
18
  }
19
-
20
- .ons-breadcrumbs + .ons-grid {
21
- margin-top: -1rem;
22
- }