@ons/design-system 72.10.2 → 72.10.4

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 (38) hide show
  1. package/components/card/_card.scss +1 -0
  2. package/components/card/example-card-set-with-headline-figures.njk +4 -4
  3. package/components/chart/_macro.njk +34 -34
  4. package/components/chart/_macro.spec.js +0 -49
  5. package/components/chart/bar-chart.js +0 -2
  6. package/components/chart/chart.js +28 -17
  7. package/components/chart/columnrange-chart.js +3 -0
  8. package/components/chart/common-chart-options.js +1 -128
  9. package/components/chart/example-bar-with-confidence-levels.njk +0 -5
  10. package/components/chart/example-column-with-confidence-levels.njk +1 -4
  11. package/components/chart/example-scatter-chart.njk +4 -8
  12. package/components/chart/specific-chart-options.js +141 -1
  13. package/components/description-list/_description-list.scss +7 -6
  14. package/components/description-list/_macro.njk +1 -1
  15. package/components/details-panel/_details-panel.scss +40 -20
  16. package/components/details-panel/_macro.njk +18 -12
  17. package/components/details-panel/example-details-panel.njk +1 -0
  18. package/components/featured-article/_macro.njk +76 -0
  19. package/components/featured-article/example-featured-article-with-chart.njk +223 -0
  20. package/components/featured-article/example-featured-article-with-image.njk +24 -0
  21. package/components/featured-article/featured-article.scss +33 -0
  22. package/components/featured-article/macro.spec.js +173 -0
  23. package/components/header/_header.scss +34 -1
  24. package/components/header/_macro.njk +140 -132
  25. package/components/hero/_hero.scss +5 -0
  26. package/components/hero/_macro.njk +8 -4
  27. package/components/hero/example-hero-grey.njk +2 -17
  28. package/css/main.css +1 -1
  29. package/css/print.css +1 -1
  30. package/js/details.js +39 -0
  31. package/js/main.js +1 -0
  32. package/package.json +1 -1
  33. package/scripts/main.es5.js +1 -1
  34. package/scripts/main.js +1 -1
  35. package/scss/main.scss +1 -0
  36. package/scss/objects/_page.scss +1 -1
  37. package/scss/print.scss +6 -1
  38. package/scss/utilities/_grid.scss +46 -0
package/scss/main.scss CHANGED
@@ -22,6 +22,7 @@
22
22
  @import '../components/document-list/document-list';
23
23
  @import '../components/download-resources/download-resources';
24
24
  @import '../components/external-link/external-link';
25
+ @import '../components/featured-article/featured-article';
25
26
  @import '../components/feedback/feedback';
26
27
  @import '../components/field/field-group';
27
28
  @import '../components/field/field';
package/scss/objects/_page.scss CHANGED
@@ -28,7 +28,7 @@
28
28
  }
29
29
 
30
30
  .ons-page__body {
31
- h2:not(.ons-document-list__item-title, .ons-details__title) {
31
+ h2:not(.ons-document-list__item-title, .ons-details__title, .ons-card__title) {
32
32
  @extend .ons-u-fs-xl;
33
33
  }
34
34
  h3,
package/scss/print.scss CHANGED
@@ -5,7 +5,8 @@
5
5
  .ons-cookies-banner,
6
6
  .ons-language-links,
7
7
  .ons-breadcrumbs,
8
- .ons-u-ph {
8
+ .ons-u-ph,
9
+ .ons-details-panel__banner-detail {
9
10
  display: none !important;
10
11
  }
11
12
 
@@ -91,3 +92,7 @@ p {
91
92
  }
92
93
  }
93
94
  }
95
+
96
+ details::details-content {
97
+ display: contents;
98
+ }
package/scss/utilities/_grid.scss CHANGED
@@ -107,6 +107,32 @@
107
107
  }
108
108
  }
109
109
 
110
+ &-flex-gap {
111
+ display: flex;
112
+ margin-left: 0;
113
+ flex-flow: column nowrap;
114
+
115
+ @include mq('m') {
116
+ flex-direction: row;
117
+ }
118
+
119
+ &--xl {
120
+ column-gap: 2rem;
121
+ }
122
+
123
+ &--l {
124
+ column-gap: 1.5rem;
125
+ }
126
+
127
+ &--m {
128
+ column-gap: 1.25rem;
129
+ }
130
+
131
+ &--s {
132
+ column-gap: 1rem;
133
+ }
134
+ }
135
+
110
136
  &__col {
111
137
  background-clip: content-box;
112
138
  box-sizing: border-box;
@@ -122,6 +148,20 @@
122
148
  float: left;
123
149
  }
124
150
 
151
+ .ons-grid-flex-gap & {
152
+ padding-left: 0;
153
+ }
154
+
155
+ &--sticky\@m {
156
+ /* if parent element is set to flex, override the default align-self property
157
+ from stretch to flex-start so that it stays sticky on scroll after medium breakpoint -
158
+ this is set for the table of contents component specifically */
159
+ .ons-grid-flex &,
160
+ .ons-grid-flex-gap & {
161
+ align-self: flex-start;
162
+ }
163
+ }
164
+
125
165
  &--loose {
126
166
  padding-left: $grid-gutters * 2;
127
167
  }
@@ -141,6 +181,11 @@
141
181
 
142
182
  .ons-grid-flex & {
143
183
  width: auto;
184
+
185
+ // keep header menu columns 100% width
186
+ &.ons-header-nav-menu__col {
187
+ width: 100%;
188
+ }
144
189
  }
145
190
  }
146
191
  }
@@ -155,6 +200,7 @@
155
200
 
156
201
  @include bp-suffix(ons-grid--bordered, false) {
157
202
  margin-left: 0;
203
+
158
204
  .ons-grid__col {
159
205
  border-bottom: 1px solid var(--ons-color-borders);
160
206
  border-top: 1px solid var(--ons-color-borders);