@ons/design-system 72.10.3 → 72.10.5

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 (44) 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/_chart.scss +2 -14
  4. package/components/chart/_macro.njk +34 -34
  5. package/components/chart/_macro.spec.js +0 -49
  6. package/components/chart/boxplot.js +3 -0
  7. package/components/chart/chart.js +18 -8
  8. package/components/chart/columnrange-chart.js +6 -0
  9. package/components/chart/common-chart-options.js +1 -13
  10. package/components/chart/example-bar-with-confidence-levels.njk +0 -5
  11. package/components/chart/example-column-with-confidence-levels.njk +1 -4
  12. package/components/chart/example-scatter-chart.njk +4 -8
  13. package/components/chart/specific-chart-options.js +42 -15
  14. package/components/description-list/_description-list.scss +7 -6
  15. package/components/description-list/_macro.njk +1 -1
  16. package/components/details-panel/_details-panel.scss +40 -20
  17. package/components/details-panel/_macro.njk +18 -12
  18. package/components/details-panel/example-details-panel.njk +1 -0
  19. package/components/featured-article/_macro.njk +76 -0
  20. package/components/featured-article/example-featured-article-with-chart.njk +223 -0
  21. package/components/featured-article/example-featured-article-with-image.njk +24 -0
  22. package/components/featured-article/featured-article.scss +33 -0
  23. package/components/featured-article/macro.spec.js +173 -0
  24. package/components/header/_header.scss +34 -1
  25. package/components/header/_macro.njk +140 -132
  26. package/components/header/_macro.spec.js +1 -1
  27. package/components/hero/_hero.scss +5 -0
  28. package/components/hero/_macro.njk +8 -4
  29. package/components/hero/example-hero-grey.njk +2 -17
  30. package/components/language-selector/_macro.spec.js +4 -3
  31. package/components/table/_macro.njk +83 -44
  32. package/components/table/_macro.spec.js +90 -0
  33. package/components/table/_table.scss +15 -3
  34. package/components/table/example-table-merge-cells.njk +139 -0
  35. package/css/main.css +1 -1
  36. package/css/print.css +1 -1
  37. package/js/details.js +39 -0
  38. package/js/main.js +1 -0
  39. package/package.json +1 -1
  40. package/scripts/main.es5.js +1 -1
  41. package/scripts/main.js +1 -1
  42. package/scss/main.scss +1 -0
  43. package/scss/print.scss +6 -1
  44. package/scss/utilities/_grid.scss +46 -0
package/css/print.css CHANGED
@@ -1 +1 @@
1
- .ons-btn,.ons-navigation-search,.ons-summary__actions,.ons-footer,.ons-cookies-banner,.ons-language-links,.ons-breadcrumbs,.ons-u-ph{display:none !important}a::after{content:" (" attr(href) ") "}.ons-header__main,.ons-header__bottom{background:rgba(0,0,0,0)}.ons-header__title{color:var(--ons-color-black)}.ons-header .ons-header__svg-logo{fill:var(--ons-color-black)}.ons-navigation--main,.ons-navigation--sub{border-top:1px solid var(--ons-color-text-link);display:block !important;padding:1rem 0 .5rem}.ons-navigation--main .ons-navigation__item,.ons-navigation--sub .ons-navigation__item{display:inline-block}.ons-navigation--main .ons-navigation__item--active,.ons-navigation--sub .ons-navigation__item--active{border:0}.ons-navigation--main .ons-navigation__link,.ons-navigation--main .ons-navigation__link:hover,.ons-navigation--sub .ons-navigation__link,.ons-navigation--sub .ons-navigation__link:hover{color:var(--ons-color-text-link)}.ons-hero{-webkit-print-color-adjust:exact;print-color-adjust:exact}.ons-grid__col{display:block}.ons-panel,h1,h2,h3,h4,h5,h6,p{-moz-column-break-inside:avoid;break-inside:avoid}.ons-details--initialised .ons-details__heading{padding:0;margin:0 0 1rem}.ons-details--initialised .ons-details__title{color:var(--ons-color-black);font-size:24px}.ons-details--initialised .ons-details__icon{display:none}.ons-details--initialised .ons-details__content{display:block}.ons-details--accordion .ons-details__heading{padding-top:1rem}
1
+ .ons-btn,.ons-navigation-search,.ons-summary__actions,.ons-footer,.ons-cookies-banner,.ons-language-links,.ons-breadcrumbs,.ons-u-ph,.ons-details-panel__banner-detail{display:none !important}a::after{content:" (" attr(href) ") "}.ons-header__main,.ons-header__bottom{background:rgba(0,0,0,0)}.ons-header__title{color:var(--ons-color-black)}.ons-header .ons-header__svg-logo{fill:var(--ons-color-black)}.ons-navigation--main,.ons-navigation--sub{border-top:1px solid var(--ons-color-text-link);display:block !important;padding:1rem 0 .5rem}.ons-navigation--main .ons-navigation__item,.ons-navigation--sub .ons-navigation__item{display:inline-block}.ons-navigation--main .ons-navigation__item--active,.ons-navigation--sub .ons-navigation__item--active{border:0}.ons-navigation--main .ons-navigation__link,.ons-navigation--main .ons-navigation__link:hover,.ons-navigation--sub .ons-navigation__link,.ons-navigation--sub .ons-navigation__link:hover{color:var(--ons-color-text-link)}.ons-hero{-webkit-print-color-adjust:exact;print-color-adjust:exact}.ons-grid__col{display:block}.ons-panel,h1,h2,h3,h4,h5,h6,p{-moz-column-break-inside:avoid;break-inside:avoid}.ons-details--initialised .ons-details__heading{padding:0;margin:0 0 1rem}.ons-details--initialised .ons-details__title{color:var(--ons-color-black);font-size:24px}.ons-details--initialised .ons-details__icon{display:none}.ons-details--initialised .ons-details__content{display:block}.ons-details--accordion .ons-details__heading{padding-top:1rem}details::details-content{display:contents}
package/js/details.js ADDED
@@ -0,0 +1,39 @@
1
+ import domready from './domready';
2
+
3
+ export default function toggleDetails() {
4
+ const allDetails = document.querySelectorAll('details');
5
+
6
+ // Open any <details> elements with 'data-open' attribute automatically
7
+ allDetails.forEach((detail) => {
8
+ if (detail.hasAttribute('data-open')) {
9
+ detail.setAttribute('open', '');
10
+ }
11
+ });
12
+
13
+ // Expand all <details> before printing
14
+ window.addEventListener('beforeprint', () => {
15
+ allDetails.forEach((detail) => {
16
+ // Set as visible if already open
17
+ if (detail.hasAttribute('open')) {
18
+ detail.dataset.open = 'true';
19
+ } else {
20
+ detail.setAttribute('open', '');
21
+ }
22
+ });
23
+ });
24
+
25
+ // Collapse all <details> after printing
26
+ window.addEventListener('afterprint', () => {
27
+ allDetails.forEach((detail) => {
28
+ // Re-open all <details> which were previously visible
29
+ if (detail.dataset.open === 'true') {
30
+ detail.setAttribute('open', '');
31
+ delete detail.dataset.open;
32
+ } else {
33
+ detail.removeAttribute('open');
34
+ }
35
+ });
36
+ });
37
+ }
38
+
39
+ domready(toggleDetails);
package/js/main.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import './inpagelink.dom';
2
2
  import './print-button';
3
3
  import './analytics';
4
+ import './details';
4
5
  import './cookies-settings.dom';
5
6
  import '../components/mutually-exclusive/mutually-exclusive.dom';
6
7
  import '../components/password/password.dom';
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ons/design-system",
3
3
  "description": "ONS Design System built CSS, JS, and Nunjucks templates",
4
- "version": "72.10.3",
4
+ "version": "72.10.5",
5
5
  "main": "index.js",
6
6
  "license": "MIT",
7
7
  "author": {