@ons/design-system 73.9.1 → 73.10.0-beta.2

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 (60) hide show
  1. package/components/chart/_chart.scss +0 -9
  2. package/components/chart/_macro.njk +96 -128
  3. package/components/chart/_macro.spec.js +43 -28
  4. package/components/chart/example-area-chart-with-axis-min-and-max-values.njk +6 -3
  5. package/components/chart/example-area-chart.njk +6 -3
  6. package/components/chart/example-bar-chart-with-annotations.njk +6 -3
  7. package/components/chart/example-bar-chart-with-axis-min-and-max-values.njk +6 -3
  8. package/components/chart/example-bar-chart-with-point-range-and-reference-line-annotations.njk +6 -3
  9. package/components/chart/example-bar-chart.njk +6 -3
  10. package/components/chart/example-bar-with-confidence-levels.njk +6 -3
  11. package/components/chart/example-clustered-bar-chart.njk +6 -3
  12. package/components/chart/example-clustered-column-chart.njk +6 -3
  13. package/components/chart/example-column-chart-with-annotations.njk +6 -3
  14. package/components/chart/example-column-chart-with-axis-min-and-max-values.njk +6 -3
  15. package/components/chart/example-column-chart-with-custom-reference-line-value.njk +6 -3
  16. package/components/chart/example-column-chart-with-range-annotations.njk +6 -3
  17. package/components/chart/example-column-chart-with-reference-line-annotations.njk +6 -3
  18. package/components/chart/example-column-chart.njk +6 -3
  19. package/components/chart/example-column-with-confidence-levels.njk +6 -3
  20. package/components/chart/example-column-with-line-chart.njk +6 -3
  21. package/components/chart/example-iframe-chart.njk +6 -3
  22. package/components/chart/example-line-chart-with-annotations.njk +6 -3
  23. package/components/chart/example-line-chart-with-axis-min-and-max-values.njk +6 -3
  24. package/components/chart/example-line-chart-with-custom-reference-line-value.njk +6 -3
  25. package/components/chart/example-line-chart-with-label-format.njk +6 -3
  26. package/components/chart/example-line-chart-with-markers.njk +6 -3
  27. package/components/chart/example-line-chart-with-range-annotations-inside.njk +6 -3
  28. package/components/chart/example-line-chart-with-range-annotations-outside-left-right.njk +6 -3
  29. package/components/chart/example-line-chart-with-range-annotations-outside-top-bottom.njk +6 -3
  30. package/components/chart/example-line-chart-with-reference-line-annotations.njk +6 -3
  31. package/components/chart/example-line-chart.njk +6 -3
  32. package/components/chart/example-scatter-chart-with-axis-min-and-max-values.njk +6 -3
  33. package/components/chart/example-scatter-chart.njk +6 -3
  34. package/components/chart/example-stacked-bar-chart.njk +6 -3
  35. package/components/chart/example-stacked-column-chart.njk +6 -3
  36. package/components/featured-article/_macro.njk +3 -37
  37. package/components/featured-article/example-featured-article-with-chart.njk +19 -14
  38. package/components/featured-article/example-featured-article-with-image.njk +12 -7
  39. package/components/featured-article/featured-article.scss +1 -1
  40. package/components/featured-article/macro.spec.js +44 -67
  41. package/components/figure/_figure.scss +31 -0
  42. package/components/figure/_macro.njk +93 -0
  43. package/components/figure/_macro.spec.js +423 -0
  44. package/components/figure/example-figure-heading-level-2.njk +34 -0
  45. package/components/figure/example-figure-with-div.njk +29 -0
  46. package/components/figure/example-figure-without-footer.njk +12 -0
  47. package/components/figure/example-figure-without-header.njk +24 -0
  48. package/components/figure/example-figure.njk +34 -0
  49. package/components/image/_image.scss +0 -7
  50. package/components/image/_macro.njk +25 -14
  51. package/components/image/_macro.spec.js +122 -7
  52. package/components/image/example-image-with-figure-fields.njk +25 -0
  53. package/components/list/_macro.njk +1 -0
  54. package/components/list/_macro.spec.js +16 -0
  55. package/components/table/_macro.njk +125 -111
  56. package/components/table/_macro.spec.js +107 -2
  57. package/components/table/example-table-with-figure-fields.njk +85 -0
  58. package/css/main.css +1 -1
  59. package/package.json +2 -2
  60. package/scss/main.scss +1 -0
@@ -14,15 +14,18 @@
14
14
  'itemsList': [
15
15
  {
16
16
  "text": "Excel spreadsheet (XLSX format, 18KB)",
17
- "url": "#"
17
+ "url": "#",
18
+ "download": "file"
18
19
  },
19
20
  {
20
21
  "text": "Simple text file (CSV format, 25KB)",
21
- "url": "#"
22
+ "url": "#",
23
+ "download": "file"
22
24
  },
23
25
  {
24
26
  "text": "Image (PNG format, 25KB)",
25
- "url": "#"
27
+ "url": "#",
28
+ "download": "file"
26
29
  }
27
30
  ]
28
31
  },
@@ -14,15 +14,18 @@
14
14
  'itemsList': [
15
15
  {
16
16
  "text": "Excel spreadsheet (XLSX format, 18KB)",
17
- "url": "#"
17
+ "url": "#",
18
+ "download": "file"
18
19
  },
19
20
  {
20
21
  "text": "Simple text file (CSV format, 25KB)",
21
- "url": "#"
22
+ "url": "#",
23
+ "download": "file"
22
24
  },
23
25
  {
24
26
  "text": "Image (PNG format, 25KB)",
25
- "url": "#"
27
+ "url": "#",
28
+ "download": "file"
26
29
  }
27
30
  ]
28
31
  },
@@ -14,15 +14,18 @@
14
14
  'itemsList': [
15
15
  {
16
16
  "text": "Excel spreadsheet (XLSX format, 18KB)",
17
- "url": "#"
17
+ "url": "#",
18
+ "download": "file"
18
19
  },
19
20
  {
20
21
  "text": "Simple text file (CSV format, 25KB)",
21
- "url": "#"
22
+ "url": "#",
23
+ "download": "file"
22
24
  },
23
25
  {
24
26
  "text": "Image (PNG format, 25KB)",
25
- "url": "#"
27
+ "url": "#",
28
+ "download": "file"
26
29
  }
27
30
  ]
28
31
  },
@@ -14,15 +14,18 @@
14
14
  'itemsList': [
15
15
  {
16
16
  "text": "Excel spreadsheet (XLSX format, 18KB)",
17
- "url": "#"
17
+ "url": "#",
18
+ "download": "file"
18
19
  },
19
20
  {
20
21
  "text": "Simple text file (CSV format, 25KB)",
21
- "url": "#"
22
+ "url": "#",
23
+ "download": "file"
22
24
  },
23
25
  {
24
26
  "text": "Image (PNG format, 25KB)",
25
- "url": "#"
27
+ "url": "#",
28
+ "download": "file"
26
29
  }
27
30
  ]
28
31
  },
@@ -14,15 +14,18 @@
14
14
  'itemsList': [
15
15
  {
16
16
  "text": "Excel spreadsheet (XLSX format, 18KB)",
17
- "url": "#"
17
+ "url": "#",
18
+ "download": "file"
18
19
  },
19
20
  {
20
21
  "text": "Simple text file (CSV format, 25KB)",
21
- "url": "#"
22
+ "url": "#",
23
+ "download": "file"
22
24
  },
23
25
  {
24
26
  "text": "Image (PNG format, 25KB)",
25
- "url": "#"
27
+ "url": "#",
28
+ "download": "file"
26
29
  }
27
30
  ]
28
31
  },
@@ -14,15 +14,18 @@
14
14
  'itemsList': [
15
15
  {
16
16
  "text": "Excel spreadsheet (XLSX format, 18KB)",
17
- "url": "#"
17
+ "url": "#",
18
+ "download": "file"
18
19
  },
19
20
  {
20
21
  "text": "Simple text file (CSV format, 25KB)",
21
- "url": "#"
22
+ "url": "#",
23
+ "download": "file"
22
24
  },
23
25
  {
24
26
  "text": "Image (PNG format, 25KB)",
25
- "url": "#"
27
+ "url": "#",
28
+ "download": "file"
26
29
  }
27
30
  ]
28
31
  },
@@ -14,15 +14,18 @@
14
14
  'itemsList': [
15
15
  {
16
16
  "text": "Excel spreadsheet (XLSX format, 18KB)",
17
- "url": "#"
17
+ "url": "#",
18
+ "download": "file"
18
19
  },
19
20
  {
20
21
  "text": "Simple text file (CSV format, 25KB)",
21
- "url": "#"
22
+ "url": "#",
23
+ "download": "file"
22
24
  },
23
25
  {
24
26
  "text": "Image (PNG format, 25KB)",
25
- "url": "#"
27
+ "url": "#",
28
+ "download": "file"
26
29
  }
27
30
  ]
28
31
  },
@@ -14,15 +14,18 @@
14
14
  'itemsList': [
15
15
  {
16
16
  "text": "Excel spreadsheet (XLSX format, 18KB)",
17
- "url": "#"
17
+ "url": "#",
18
+ "download": "file"
18
19
  },
19
20
  {
20
21
  "text": "Simple text file (CSV format, 25KB)",
21
- "url": "#"
22
+ "url": "#",
23
+ "download": "file"
22
24
  },
23
25
  {
24
26
  "text": "Image (PNG format, 25KB)",
25
- "url": "#"
27
+ "url": "#",
28
+ "download": "file"
26
29
  }
27
30
  ]
28
31
  },
@@ -13,15 +13,18 @@
13
13
  'itemsList': [
14
14
  {
15
15
  "text": "Excel spreadsheet (XLSX format, 18KB)",
16
- "url": "#"
16
+ "url": "#",
17
+ "download": "file"
17
18
  },
18
19
  {
19
20
  "text": "Simple text file (CSV format, 25KB)",
20
- "url": "#"
21
+ "url": "#",
22
+ "download": "file"
21
23
  },
22
24
  {
23
25
  "text": "Image (PNG format, 25KB)",
24
- "url": "#"
26
+ "url": "#",
27
+ "download": "file"
25
28
  }
26
29
  ]
27
30
  },
@@ -14,15 +14,18 @@
14
14
  'itemsList': [
15
15
  {
16
16
  "text": "Excel spreadsheet (XLSX format, 18KB)",
17
- "url": "#"
17
+ "url": "#",
18
+ "download": "file"
18
19
  },
19
20
  {
20
21
  "text": "Simple text file (CSV format, 25KB)",
21
- "url": "#"
22
+ "url": "#",
23
+ "download": "file"
22
24
  },
23
25
  {
24
26
  "text": "Image (PNG format, 25KB)",
25
- "url": "#"
27
+ "url": "#",
28
+ "download": "file"
26
29
  }
27
30
  ]
28
31
  },
@@ -15,15 +15,18 @@ may not be available in the future once Florence is decommissioned. #}
15
15
  'itemsList': [
16
16
  {
17
17
  "text": "Excel spreadsheet (XLSX format, 18KB)",
18
- "url": "#"
18
+ "url": "#",
19
+ "download": "file"
19
20
  },
20
21
  {
21
22
  "text": "Simple text file (CSV format, 25KB)",
22
- "url": "#"
23
+ "url": "#",
24
+ "download": "file"
23
25
  },
24
26
  {
25
27
  "text": "Image (PNG format, 25KB)",
26
- "url": "#"
28
+ "url": "#",
29
+ "download": "file"
27
30
  }
28
31
  ]
29
32
  },
@@ -15,16 +15,19 @@
15
15
  'itemsList': [
16
16
  {
17
17
  "text": "Excel spreadsheet (XLSX format, 18KB)",
18
- "url": "#"
18
+ "url": "#",
19
+ "download": "file"
19
20
  },
20
21
  {
21
22
  "text": "Simple text file (CSV format, 25KB)",
22
- "url": "#"
23
+ "url": "#",
24
+ "download": "file"
23
25
  },
24
26
  {
25
27
 
26
28
  "text": "Image (PNG format, 25KB)",
27
- "url": "#"
29
+ "url": "#",
30
+ "download": "file"
28
31
  }
29
32
  ]},
30
33
  "legend": true,
@@ -15,16 +15,19 @@
15
15
  'itemsList': [
16
16
  {
17
17
  "text": "Excel spreadsheet (XLSX format, 18KB)",
18
- "url": "#"
18
+ "url": "#",
19
+ "download": "file"
19
20
  },
20
21
  {
21
22
  "text": "Simple text file (CSV format, 25KB)",
22
- "url": "#"
23
+ "url": "#",
24
+ "download": "file"
23
25
  },
24
26
  {
25
27
 
26
28
  "text": "Image (PNG format, 25KB)",
27
- "url": "#"
29
+ "url": "#",
30
+ "download": "file"
28
31
  }
29
32
  ]},
30
33
  "legend": true,
@@ -15,16 +15,19 @@
15
15
  'itemsList': [
16
16
  {
17
17
  "text": "Excel spreadsheet (XLSX format, 18KB)",
18
- "url": "#"
18
+ "url": "#",
19
+ "download": "file"
19
20
  },
20
21
  {
21
22
  "text": "Simple text file (CSV format, 25KB)",
22
- "url": "#"
23
+ "url": "#",
24
+ "download": "file"
23
25
  },
24
26
  {
25
27
 
26
28
  "text": "Image (PNG format, 25KB)",
27
- "url": "#"
29
+ "url": "#",
30
+ "download": "file"
28
31
  }
29
32
  ]},
30
33
  "legend": true,
@@ -15,16 +15,19 @@
15
15
  'itemsList': [
16
16
  {
17
17
  "text": "Excel spreadsheet (XLSX format, 18KB)",
18
- "url": "#"
18
+ "url": "#",
19
+ "download": "file"
19
20
  },
20
21
  {
21
22
  "text": "Simple text file (CSV format, 25KB)",
22
- "url": "#"
23
+ "url": "#",
24
+ "download": "file"
23
25
  },
24
26
  {
25
27
 
26
28
  "text": "Image (PNG format, 25KB)",
27
- "url": "#"
29
+ "url": "#",
30
+ "download": "file"
28
31
  }
29
32
  ]},
30
33
  "footnotes": {
@@ -15,16 +15,19 @@
15
15
  'itemsList': [
16
16
  {
17
17
  "text": "Excel spreadsheet (XLSX format, 18KB)",
18
- "url": "#"
18
+ "url": "#",
19
+ "download": "file"
19
20
  },
20
21
  {
21
22
  "text": "Simple text file (CSV format, 25KB)",
22
- "url": "#"
23
+ "url": "#",
24
+ "download": "file"
23
25
  },
24
26
  {
25
27
 
26
28
  "text": "Image (PNG format, 25KB)",
27
- "url": "#"
29
+ "url": "#",
30
+ "download": "file"
28
31
  }
29
32
  ]},
30
33
  "legend": true,
@@ -15,16 +15,19 @@
15
15
  'itemsList': [
16
16
  {
17
17
  "text": "Excel spreadsheet (XLSX format, 18KB)",
18
- "url": "#"
18
+ "url": "#",
19
+ "download": "file"
19
20
  },
20
21
  {
21
22
  "text": "Simple text file (CSV format, 25KB)",
22
- "url": "#"
23
+ "url": "#",
24
+ "download": "file"
23
25
  },
24
26
  {
25
27
 
26
28
  "text": "Image (PNG format, 25KB)",
27
- "url": "#"
29
+ "url": "#",
30
+ "download": "file"
28
31
  }
29
32
  ]},
30
33
  "legend": true,
@@ -15,16 +15,19 @@
15
15
  'itemsList': [
16
16
  {
17
17
  "text": "Excel spreadsheet (XLSX format, 18KB)",
18
- "url": "#"
18
+ "url": "#",
19
+ "download": "file"
19
20
  },
20
21
  {
21
22
  "text": "Simple text file (CSV format, 25KB)",
22
- "url": "#"
23
+ "url": "#",
24
+ "download": "file"
23
25
  },
24
26
  {
25
27
 
26
28
  "text": "Image (PNG format, 25KB)",
27
- "url": "#"
29
+ "url": "#",
30
+ "download": "file"
28
31
  }
29
32
  ]},
30
33
  "legend": true,
@@ -15,16 +15,19 @@
15
15
  'itemsList': [
16
16
  {
17
17
  "text": "Excel spreadsheet (XLSX format, 18KB)",
18
- "url": "#"
18
+ "url": "#",
19
+ "download": "file"
19
20
  },
20
21
  {
21
22
  "text": "Simple text file (CSV format, 25KB)",
22
- "url": "#"
23
+ "url": "#",
24
+ "download": "file"
23
25
  },
24
26
  {
25
27
 
26
28
  "text": "Image (PNG format, 25KB)",
27
- "url": "#"
29
+ "url": "#",
30
+ "download": "file"
28
31
  }
29
32
  ]},
30
33
  "legend": true,
@@ -15,16 +15,19 @@
15
15
  'itemsList': [
16
16
  {
17
17
  "text": "Excel spreadsheet (XLSX format, 18KB)",
18
- "url": "#"
18
+ "url": "#",
19
+ "download": "file"
19
20
  },
20
21
  {
21
22
  "text": "Simple text file (CSV format, 25KB)",
22
- "url": "#"
23
+ "url": "#",
24
+ "download": "file"
23
25
  },
24
26
  {
25
27
 
26
28
  "text": "Image (PNG format, 25KB)",
27
- "url": "#"
29
+ "url": "#",
30
+ "download": "file"
28
31
  }
29
32
  ]},
30
33
  "legend": true,
@@ -15,16 +15,19 @@
15
15
  'itemsList': [
16
16
  {
17
17
  "text": "Excel spreadsheet (XLSX format, 18KB)",
18
- "url": "#"
18
+ "url": "#",
19
+ "download": "file"
19
20
  },
20
21
  {
21
22
  "text": "Simple text file (CSV format, 25KB)",
22
- "url": "#"
23
+ "url": "#",
24
+ "download": "file"
23
25
  },
24
26
  {
25
27
 
26
28
  "text": "Image (PNG format, 25KB)",
27
- "url": "#"
29
+ "url": "#",
30
+ "download": "file"
28
31
  }
29
32
  ]},
30
33
  "footnotes": {
@@ -15,16 +15,19 @@
15
15
  'itemsList': [
16
16
  {
17
17
  "text": "Excel spreadsheet (XLSX format, 18KB)",
18
- "url": "#"
18
+ "url": "#",
19
+ "download": "file"
19
20
  },
20
21
  {
21
22
  "text": "Simple text file (CSV format, 25KB)",
22
- "url": "#"
23
+ "url": "#",
24
+ "download": "file"
23
25
  },
24
26
  {
25
27
 
26
28
  "text": "Image (PNG format, 25KB)",
27
- "url": "#"
29
+ "url": "#",
30
+ "download": "file"
28
31
  }
29
32
  ]},
30
33
  "xAxis": {
@@ -15,16 +15,19 @@
15
15
  'itemsList': [
16
16
  {
17
17
  "text": "Excel spreadsheet (XLSX format, 18KB)",
18
- "url": "#"
18
+ "url": "#",
19
+ "download": "file"
19
20
  },
20
21
  {
21
22
  "text": "Simple text file (CSV format, 25KB)",
22
- "url": "#"
23
+ "url": "#",
24
+ "download": "file"
23
25
  },
24
26
  {
25
27
 
26
28
  "text": "Image (PNG format, 25KB)",
27
- "url": "#"
29
+ "url": "#",
30
+ "download": "file"
28
31
  }
29
32
  ]},
30
33
  "footnotes": {
@@ -14,15 +14,18 @@
14
14
  'itemsList': [
15
15
  {
16
16
  "text": "Excel spreadsheet (XLSX format, 18KB)",
17
- "url": "#"
17
+ "url": "#",
18
+ "download": "file"
18
19
  },
19
20
  {
20
21
  "text": "Simple text file (CSV format, 25KB)",
21
- "url": "#"
22
+ "url": "#",
23
+ "download": "file"
22
24
  },
23
25
  {
24
26
  "text": "Image (PNG format, 25KB)",
25
- "url": "#"
27
+ "url": "#",
28
+ "download": "file"
26
29
  }
27
30
  ]
28
31
  },
@@ -12,9 +12,12 @@
12
12
  "download": {
13
13
  "title": "Download Figure 6 data",
14
14
  "itemsList": [
15
- { "text": "Excel spreadsheet (XLSX format, 22KB)", "url": "#" },
16
- { "text": "Simple text file (CSV format, 28KB)", "url": "#" },
17
- { "text": "Image (PNG format, 32KB)", "url": "#" }
15
+ { "text": "Excel spreadsheet (XLSX format, 22KB)", "url": "#",
16
+ "download": "file" },
17
+ { "text": "Simple text file (CSV format, 28KB)", "url": "#",
18
+ "download": "file" },
19
+ { "text": "Image (PNG format, 32KB)", "url": "#",
20
+ "download": "file" }
18
21
  ]
19
22
  },
20
23
  "legend": true,
@@ -1,6 +1,3 @@
1
- {% from "components/chart/_macro.njk" import onsChart %}
2
- {% from "components/image/_macro.njk" import onsImage %}
3
-
4
1
  {% macro onsFeaturedArticle(params) %}
5
2
  {% set headingLevel = params.headingLevel | default(2) %}
6
3
  {% set openingArticleTitleTag = "<h" ~ headingLevel %}
@@ -32,41 +29,10 @@
32
29
  </ul>
33
30
  {% endif %}
34
31
 
32
+ {# The media (a nested figure containing a chart or image) is provided via the caller
33
+ block, so the article does not need to know how the content is rendered. #}
35
34
  <div class="ons-featured__media">
36
- {% if params.chart %}
37
- {{
38
- onsChart({
39
- "chartType": params.chart.chartType,
40
- "description": params.chart.description,
41
- "theme": params.chart.theme,
42
- "title": params.chart.title,
43
- "id": params.chart.id,
44
- "headingLevel": headingLevel + 1,
45
- "legend": params.chart.legend,
46
- "xAxis": params.chart.xAxis,
47
- "yAxis": params.chart.yAxis,
48
- "series": params.chart.series,
49
- "annotations": params.chart.annotations,
50
- "rangeAnnotations": params.chart.rangeAnnotations,
51
- "referenceLineAnnotations": params.chart.referenceLineAnnotations,
52
- "estimateLineLabel": params.chart.estimateLineLabel,
53
- "uncertaintyRangeLabel": params.chart.uncertaintyRangeLabel,
54
- "isChartInverted": params.chart.isChartInverted,
55
- "useStackedLayout": params.chart.useStackedLayout,
56
- "percentageHeightDesktop": params.chart.percentageHeightDesktop,
57
- "percentageHeightMobile": params.chart.percentageHeightMobile
58
- })
59
- }}
60
- {% elif params.image %}
61
- <div class="ons-featured__image">
62
- {{
63
- onsImage({
64
- "src": params.image.src,
65
- "alt": params.image.alt
66
- })
67
- }}
68
- </div>
69
- {% endif %}
35
+ {{ caller() if caller }}
70
36
  </div>
71
37
 
72
38
  {% if params.description %}