@ons/design-system 72.10.6 → 72.10.8

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/char-check-limit/_macro.njk +5 -4
  2. package/components/char-check-limit/_macro.spec.js +167 -7
  3. package/components/char-check-limit/character-check.js +23 -17
  4. package/components/char-check-limit/character-check.spec.js +106 -1
  5. package/components/chart/_chart.scss +39 -5
  6. package/components/chart/_macro.njk +190 -152
  7. package/components/chart/_macro.spec.js +274 -21
  8. package/components/chart/annotations-options.js +1 -1
  9. package/components/chart/bar-chart.js +2 -0
  10. package/components/chart/chart-iframe-resize.dom.js +8 -0
  11. package/components/chart/chart-iframe-resize.js +16 -0
  12. package/components/chart/chart.dom.js +5 -3
  13. package/components/chart/chart.js +13 -2
  14. package/components/chart/example-area-chart.njk +2 -1
  15. package/components/chart/example-bar-chart.njk +4 -0
  16. package/components/chart/example-iframe-chart.njk +33 -0
  17. package/components/chart/example-line-chart-with-annotations.njk +3 -1
  18. package/components/chart/example-line-chart.njk +6 -1
  19. package/components/chart/example-scatter-chart.njk +4 -0
  20. package/components/chart/range-annotations-options.js +1 -1
  21. package/components/chart/reference-line-annotations-options.js +1 -1
  22. package/components/checkboxes/_macro.spec.js +3 -3
  23. package/components/input/_macro.njk +1 -2
  24. package/components/input/_macro.spec.js +2 -22
  25. package/components/input/example-input-search-with-character-check.njk +0 -1
  26. package/components/tabs/tabs.js +2 -2
  27. package/components/textarea/_macro.njk +19 -3
  28. package/components/textarea/_macro.spec.js +76 -3
  29. package/components/textarea/example-textarea-with-word-limit.njk +20 -0
  30. package/css/main.css +1 -1
  31. package/img/small/area-chart-screenshot.png +0 -0
  32. package/img/small/line-chart-screenshot.png +0 -0
  33. package/js/main.js +2 -0
  34. package/layout/_template.njk +4 -1
  35. package/package.json +6 -3
  36. package/scripts/main.es5.js +3 -1
  37. package/scripts/main.js +3 -1
  38. package/scss/objects/_page.scss +1 -1
@@ -1,4 +1,5 @@
1
1
  {% from "components/list/_macro.njk" import onsList %}
2
+ {% from "components/details/_macro.njk" import onsDetails %}
2
3
 
3
4
  {% macro onsChart(params) %}
4
5
  {% set supportedChartTypes = ['line', 'bar', 'column', 'scatter', 'area', 'columnrange', 'boxplot'] %}
@@ -13,95 +14,117 @@
13
14
  {% set closingSubtitleTag = "</h" ~ (headingLevel + 1) ~ ">" %}
14
15
  {% set openingDownloadTitleTag = "<h" ~ (headingLevel + 2) %}
15
16
  {% set closingDownloadTitleTag = "</h" ~ (headingLevel + 2) ~ ">" %}
17
+ {% set audioDescriptionId = "chart-audio-description-" ~ params.id %}
16
18
  <div
17
- data-highcharts-base-chart
18
- data-highcharts-type="{{ params.chartType }}"
19
- data-highcharts-theme="{{ params.theme }}"
20
- data-highcharts-title="{{ params.title }}"
21
- data-highcharts-id="{{ params.id }}"
22
- {% if params.useStackedLayout %}data-highcharts-use-stacked-layout="{{ params.useStackedLayout }}"{% endif %}
23
- {% if params.percentageHeightDesktop and params.chartType != 'bar' %}
24
- data-highcharts-percentage-height-desktop="{{ params.percentageHeightDesktop }}"
25
- {% endif %}
26
- {% if params.percentageHeightMobile and params.chartType != 'bar' %}
27
- data-highcharts-percentage-height-mobile="{{ params.percentageHeightMobile }}"
28
- {% endif %}
29
- {% if params.xAxis.tickIntervalMobile %}
30
- data-highcharts-x-axis-tick-interval-mobile="{{ params.xAxis.tickIntervalMobile }}"
31
- {% endif %}
32
- {% if params.xAxis.tickIntervalDesktop %}
33
- data-highcharts-x-axis-tick-interval-desktop="{{ params.xAxis.tickIntervalDesktop }}"
34
- {% endif %}
35
- {% if params.yAxis.tickIntervalMobile %}
36
- data-highcharts-y-axis-tick-interval-mobile="{{ params.yAxis.tickIntervalMobile }}"
37
- {% endif %}
38
- {% if params.yAxis.tickIntervalDesktop %}
39
- data-highcharts-y-axis-tick-interval-desktop="{{ params.yAxis.tickIntervalDesktop }}"
40
- {% endif %}
41
- {% if params.estimateLineLabel %}
42
- data-highcharts-estimate-line-label="{{ params.estimateLineLabel }}"
43
- {% endif %}
44
- {% if params.uncertaintyRangeLabel %}
45
- data-highcharts-uncertainty-range-label="{{ params.uncertaintyRangeLabel }}"
46
- {% endif %}
47
- {% if params.yAxis.customReferenceLineValue %}
48
- data-highcharts-custom-reference-line-value="{{ params.yAxis.customReferenceLineValue }}"
19
+ {% if not params.iframeUrl %}
20
+ data-highcharts-base-chart data-highcharts-type="{{ params.chartType }}" data-highcharts-theme="{{ params.theme }}"
21
+ data-highcharts-title="{{ params.title }}" data-highcharts-id="{{ params.id }}"
22
+ {% if params.useStackedLayout %}data-highcharts-use-stacked-layout="{{ params.useStackedLayout }}"{% endif %}
23
+ {% if params.percentageHeightDesktop and params.chartType != 'bar' %}
24
+ data-highcharts-percentage-height-desktop="{{ params.percentageHeightDesktop }}"
25
+ {% endif %}
26
+ {% if params.percentageHeightMobile and params.chartType != 'bar' %}
27
+ data-highcharts-percentage-height-mobile="{{ params.percentageHeightMobile }}"
28
+ {% endif %}
29
+ {% if params.xAxis.tickIntervalMobile %}
30
+ data-highcharts-x-axis-tick-interval-mobile="{{ params.xAxis.tickIntervalMobile }}"
31
+ {% endif %}
32
+ {% if params.xAxis.tickIntervalDesktop %}
33
+ data-highcharts-x-axis-tick-interval-desktop="{{ params.xAxis.tickIntervalDesktop }}"
34
+ {% endif %}
35
+ {% if params.yAxis.tickIntervalMobile %}
36
+ data-highcharts-y-axis-tick-interval-mobile="{{ params.yAxis.tickIntervalMobile }}"
37
+ {% endif %}
38
+ {% if params.yAxis.tickIntervalDesktop %}
39
+ data-highcharts-y-axis-tick-interval-desktop="{{ params.yAxis.tickIntervalDesktop }}"
40
+ {% endif %}
41
+ {% if params.estimateLineLabel %}
42
+ data-highcharts-estimate-line-label="{{ params.estimateLineLabel }}"
43
+ {% endif %}
44
+ {% if params.uncertaintyRangeLabel %}
45
+ data-highcharts-uncertainty-range-label="{{ params.uncertaintyRangeLabel }}"
46
+ {% endif %}
47
+ {% if params.yAxis.customReferenceLineValue %}
48
+ data-highcharts-custom-reference-line-value="{{ params.yAxis.customReferenceLineValue }}"
49
+ {% endif %}
49
50
  {% endif %}
50
51
  >
51
- <figure class="ons-chart">
52
+ <figure class="ons-chart" aria-describedby="{{ audioDescriptionId }}">
52
53
  {{ openingTitleTag | safe }} class="ons-chart__title">{{ params.title }}{{ closingTitleTag | safe }}
53
54
  {% if params.subtitle %}
54
55
  {{ openingSubtitleTag | safe }}
55
56
  class="ons-chart__subtitle">{{ params.subtitle }}{{ closingSubtitleTag | safe }}
56
57
  {% endif %}
57
58
 
58
- {% if params.description %}
59
- <p class="ons-u-vh">{{ params.description }}</p>
60
- {% endif %}
61
- {% if params.chartType == 'boxplot' and (params.estimateLineLabel or params.uncertaintyRangeLabel) and params.legend == true %}
62
- <div class="ons-chart__boxplot-legend">
63
- {% if params.uncertaintyRangeLabel %}
64
- <div class="ons-chart__boxplot-legend-item">
65
- <span class="ons-chart__boxplot-legend-item ons-chart__boxplot-legend-item--uncertainty"></span>
66
- <span class="ons-chart__boxplot-legend-label">{{ params.uncertaintyRangeLabel }}</span>
67
- </div>
68
- {% endif %}
69
- {% if params.estimateLineLabel %}
70
- <div class="ons-chart__boxplot-legend-item">
71
- <span class="ons-chart__boxplot-legend-item ons-chart__boxplot-legend-item--estimate"></span>
72
- <span class="ons-chart__boxplot-legend-label">{{ params.estimateLineLabel }}</span>
73
- </div>
74
- {% endif %}
59
+ <p class="ons-u-vh" id="{{ audioDescriptionId }}">{{ params.description }}</p>
60
+
61
+ {% if params.iframeUrl %}
62
+ <div
63
+ class="ons-chart__iframe-wrapper{% if params.fallbackImageUrl %} ons-chart__non-js-hide{% endif %}"
64
+ id="{{ params.id }}"
65
+ data-url="{{ params.iframeUrl }}"
66
+ data-title="{{ params.title }}"
67
+ >
68
+ <iframe src="{{ params.iframeUrl }}" title="{{ params.title }}" class="ons-chart__iframe"></iframe>
75
69
  </div>
76
- {% endif %}
77
- {% if params.chartType in supportedChartTypes %}
78
- <div data-highcharts-chart></div>
79
70
  {% else %}
80
- <p data-invalid-chart-type data-unsupported-chart-text>
81
- <b>{{ '"' + params.chartType + '" - ' + (params.unsupportedChartText or 'chart type is not supported') }}</b>
82
- </p>
71
+ {% if params.chartType == 'boxplot' and (params.estimateLineLabel or params.uncertaintyRangeLabel) and params.legend == true %}
72
+ <div class="ons-chart__boxplot-legend">
73
+ {% if params.uncertaintyRangeLabel %}
74
+ <div class="ons-chart__boxplot-legend-item">
75
+ <span class="ons-chart__boxplot-legend-item ons-chart__boxplot-legend-item--uncertainty"></span>
76
+ <span class="ons-chart__boxplot-legend-label">{{ params.uncertaintyRangeLabel }}</span>
77
+ </div>
78
+ {% endif %}
79
+ {% if params.estimateLineLabel %}
80
+ <div class="ons-chart__boxplot-legend-item">
81
+ <span class="ons-chart__boxplot-legend-item ons-chart__boxplot-legend-item--estimate"></span>
82
+ <span class="ons-chart__boxplot-legend-label">{{ params.estimateLineLabel }}</span>
83
+ </div>
84
+ {% endif %}
85
+ </div>
86
+ {% endif %}
87
+ {% if params.chartType in supportedChartTypes %}
88
+ <div data-highcharts-chart class="ons-chart__chart"></div>
89
+ {% else %}
90
+ <p data-invalid-chart-type data-unsupported-chart-text>
91
+ <b>{{ '"' + params.chartType + '" - ' + (params.unsupportedChartText or 'chart type is not supported') }}</b>
92
+ </p>
93
+ {% endif %}
94
+ {% endif %}
95
+
96
+ {% if params.fallbackImageUrl %}
97
+ {% set fallbackImageId = ["fallback-image--", params.id] | join %}
98
+ <noscript id="{{ fallbackImageId }}">
99
+ {# Note that a more detailed description of the chart is provided in the audio description above #}
100
+ <img
101
+ src="{{ params.fallbackImageUrl }}"
102
+ alt="{{ params.fallbackImageAlt or 'Fallback image for the chart as JavaScript is disabled' }}"
103
+ class="ons-chart__fallback-image"
104
+ />
105
+ </noscript>
83
106
  {% endif %}
84
107
  {#
85
108
  Footnotes for the annotations at mobile
86
109
  Hidden from screen readers because the full text will be read out where they appear in the chart
87
110
  #}
88
- {% if params.annotations or params.rangeAnnotations or params.referenceLineAnnotations %}
89
- <ul class="ons-chart__footnotes" aria-hidden="true">
111
+ {% if (params.annotations or params.rangeAnnotations or params.referenceLineAnnotations) and not params.iframeUrl %}
112
+ <ul class="ons-chart__annotations-footnotes" aria-hidden="true" data-annotations-footnotes>
90
113
  {% for annotation in params.annotations %}
91
- <li class="ons-chart__footnote_item">
92
- <span class="ons-chart__footnote-number">{{ loop.index }}</span>
114
+ <li class="ons-chart__annotations-footnotes_item">
115
+ <span class="ons-chart__annotations-footnotes-number">{{ loop.index }}</span>
93
116
  {{ annotation.text }}
94
117
  </li>
95
118
  {% endfor %}
96
119
  {% for rangeAnnotation in params.rangeAnnotations %}
97
- <li class="ons-chart__footnote_item">
98
- <span class="ons-chart__footnote-number">{{ loop.index + params.annotations | length }}</span>
120
+ <li class="ons-chart__annotations-footnotes_item">
121
+ <span class="ons-chart__annotations-footnotes-number">{{ loop.index + params.annotations | length }}</span>
99
122
  {{ rangeAnnotation.text }}
100
123
  </li>
101
124
  {% endfor %}
102
125
  {% for referenceLineAnnotation in params.referenceLineAnnotations %}
103
- <li class="ons-chart__footnote_item">
104
- <span class="ons-chart__footnote-number"
126
+ <li class="ons-chart__annotations-footnotes_item">
127
+ <span class="ons-chart__annotations-footnotes-number"
105
128
  >{{ loop.index + params.annotations | length + params.rangeAnnotations | length }}</span
106
129
  >
107
130
  {{ referenceLineAnnotation.text }}
@@ -109,7 +132,6 @@
109
132
  {% endfor %}
110
133
  </ul>
111
134
  {% endif %}
112
-
113
135
  {% if params.caption %}
114
136
  <figcaption class="ons-chart__caption">{{ params.caption }}</figcaption>
115
137
  {% endif %}
@@ -125,102 +147,118 @@
125
147
  })
126
148
  }}
127
149
  {% endif %}
128
- {% if params.chartType in supportedChartTypes %}
129
- {% set series = [] %}
130
- {% set lineSeriesCount = 0 %}
131
- {% for item in params.series %}
132
- {% if item.type == 'line' and lineSeriesCount > 0 %}
133
- {# skip extra line series as the DS guidelines only allow for one extra line series #}
134
- {% else %}
135
- {%
136
- set seriesItem = {
137
- "name": item.name if item.name else '',
138
- "data": item.data if item.data else [],
139
- "marker": {
140
- "enabled": true if (item.type == 'scatter' or params.chartType == 'scatter' or item.marker == true) else false
141
- },
142
- "dataLabels": {
143
- "enabled": item.dataLabels if item.dataLabels else false
144
- },
145
- "connectNulls": item.connectNulls if item.connectNulls else false,
146
- "type": item.type if item.type and (item.type == 'line' and params.chartType in supportedChartTypesWithLine) or (item.type == 'scatter' and params.chartType in supportedChartTypesWithScatter) else params.chartType
147
- }
148
- %}
149
- {# Use `set` tag to avoid printing the return value of extend #}
150
- {% set _ = extend(series, seriesItem) %}
151
- {% endif %}
152
- {% if item.type == 'line' %}
153
- {% set lineSeriesCount = lineSeriesCount + 1 %}
154
- {% endif %}
155
- {% endfor %}
156
- {# Set the legend value to true by default #}
157
- {% set legendValue = true %}
158
- {% if params.legend is defined %}
159
- {# if a legend parameter has been provided, check that it is a boolean #}
160
- {% if params.legend == true or params.legend == false %}
161
- {# legend value is a boolean - use the value passed in #}
162
- {% set legendValue = params.legend %}
163
- {% endif %}
150
+
151
+ {% if params.footnotes %}
152
+ {% set footnotesId = ["footnotes--", params.id] | join %}
153
+
154
+ {{
155
+ onsDetails({
156
+ "id": footnotesId,
157
+ "title": params.footnotes.title,
158
+ "content": params.footnotes.content,
159
+ "headingLevel": headingLevel + 2,
160
+ "classes": "ons-u-mt-xl"
161
+ })
162
+ }}
164
163
  {% endif %}
165
- {%
166
- set config = {
167
- "chart": {
168
- "type": params.chartType
169
- },
170
- "legend": {
171
- "enabled" : legendValue
172
- },
173
- "yAxis": {
174
- "title": {
175
- "text": params.yAxis.title
164
+
165
+ {% if (params.chartType in supportedChartTypes) and not params.iframeUrl %}
166
+ {% set series = [] %}
167
+ {% set lineSeriesCount = 0 %}
168
+ {% for item in params.series %}
169
+ {% if item.type == 'line' and lineSeriesCount > 0 %}
170
+ {# skip extra line series as the DS guidelines only allow for one extra line series #}
171
+ {% else %}
172
+ {%
173
+ set seriesItem = {
174
+ "name": item.name if item.name else '',
175
+ "data": item.data if item.data else [],
176
+ "marker": {
177
+ "enabled": true if (item.type == 'scatter' or params.chartType == 'scatter' or item.marker == true) else false
178
+ },
179
+ "dataLabels": {
180
+ "enabled": item.dataLabels if item.dataLabels else false
181
+ },
182
+ "connectNulls": item.connectNulls if item.connectNulls else false,
183
+ "type": item.type if item.type and (item.type == 'line' and params.chartType in supportedChartTypesWithLine) or (item.type == 'scatter' and params.chartType in supportedChartTypesWithScatter) else params.chartType
184
+ }
185
+ %}
186
+ {# Use `set` tag to avoid printing the return value of extend #}
187
+ {% set _ = extend(series, seriesItem) %}
188
+ {% endif %}
189
+ {% if item.type == 'line' %}
190
+ {% set lineSeriesCount = lineSeriesCount + 1 %}
191
+ {% endif %}
192
+ {% endfor %}
193
+ {# Set the legend value to true by default #}
194
+ {% set legendValue = true %}
195
+ {% if params.legend is defined %}
196
+ {# if a legend parameter has been provided, check that it is a boolean #}
197
+ {% if params.legend == true or params.legend == false %}
198
+ {# legend value is a boolean - use the value passed in #}
199
+ {% set legendValue = params.legend %}
200
+ {% endif %}
201
+ {% endif %}
202
+ {%
203
+ set config = {
204
+ "chart": {
205
+ "type": params.chartType
176
206
  },
177
- "labels": {
178
- "format": params.yAxis.labelFormat
207
+ "legend": {
208
+ "enabled" : legendValue
179
209
  },
180
- "min": params.yAxis.min if params.yAxis.min is defined and params.chartType in supportedChartTypesWithYAxisMinAndMax else undefined,
181
- "max": params.yAxis.max if params.yAxis.max is defined and params.chartType in supportedChartTypesWithYAxisMinAndMax else undefined,
182
- "startOnTick": params.yAxis.startOnTick if params.yAxis.startOnTick is defined and params.chartType in supportedChartTypesWithYAxisMinAndMax else undefined,
183
- "endOnTick": params.yAxis.endOnTick if params.yAxis.endOnTick is defined and params.chartType in supportedChartTypesWithYAxisMinAndMax else undefined
184
- },
185
- "xAxis": {
186
- "title": {
187
- "text": params.xAxis.title
210
+ "yAxis": {
211
+ "title": {
212
+ "text": params.yAxis.title
213
+ },
214
+ "labels": {
215
+ "format": params.yAxis.labelFormat
216
+ },
217
+ "min": params.yAxis.min if params.yAxis.min is defined and params.chartType in supportedChartTypesWithYAxisMinAndMax else undefined,
218
+ "max": params.yAxis.max if params.yAxis.max is defined and params.chartType in supportedChartTypesWithYAxisMinAndMax else undefined,
219
+ "startOnTick": params.yAxis.startOnTick if params.yAxis.startOnTick is defined and params.chartType in supportedChartTypesWithYAxisMinAndMax else undefined,
220
+ "endOnTick": params.yAxis.endOnTick if params.yAxis.endOnTick is defined and params.chartType in supportedChartTypesWithYAxisMinAndMax else undefined
188
221
  },
189
- "categories": params.xAxis.categories,
190
- "type": params.xAxis.type,
191
- "labels": {
192
- "format": params.xAxis.labelFormat
222
+ "xAxis": {
223
+ "title": {
224
+ "text": params.xAxis.title
225
+ },
226
+ "categories": params.xAxis.categories,
227
+ "type": params.xAxis.type,
228
+ "labels": {
229
+ "format": params.xAxis.labelFormat
230
+ },
231
+ "min": params.xAxis.min if params.xAxis.min is defined and params.chartType in supportedChartTypesWithXAxisMinAndMax else undefined,
232
+ "max": params.xAxis.max if params.xAxis.max is defined and params.chartType in supportedChartTypesWithXAxisMinAndMax else undefined,
233
+ "startOnTick": params.xAxis.startOnTick if params.xAxis.startOnTick is defined and params.chartType in supportedChartTypesWithXAxisMinAndMax else undefined,
234
+ "endOnTick": params.xAxis.endOnTick if params.xAxis.endOnTick is defined and params.chartType in supportedChartTypesWithXAxisMinAndMax else undefined
193
235
  },
194
- "min": params.xAxis.min if params.xAxis.min is defined and params.chartType in supportedChartTypesWithXAxisMinAndMax else undefined,
195
- "max": params.xAxis.max if params.xAxis.max is defined and params.chartType in supportedChartTypesWithXAxisMinAndMax else undefined,
196
- "startOnTick": params.xAxis.startOnTick if params.xAxis.startOnTick is defined and params.chartType in supportedChartTypesWithXAxisMinAndMax else undefined,
197
- "endOnTick": params.xAxis.endOnTick if params.xAxis.endOnTick is defined and params.chartType in supportedChartTypesWithXAxisMinAndMax else undefined
198
- },
199
- "series": series
200
- }
201
- %}
236
+ "series": series
237
+ }
238
+ %}
202
239
 
203
- <!-- Set scripts to pass the config values as json to the javascript -->
204
- <!-- prettier-ignore-start -->
240
+ <!-- Set scripts to pass the config values as json to the javascript -->
241
+ <!-- prettier-ignore-start -->
205
242
  <script type="application/json" data-highcharts-config--{{ params.id }}>
206
243
  {{ config | tojson }}
207
244
  </script>
245
+
246
+ {% if params.annotations %}
247
+ <script type="application/json" data-highcharts-annotations--{{ params.id }}>
248
+ {{ params.annotations | tojson }}
249
+ </script>
250
+ {% endif %}
251
+ {% if params.rangeAnnotations %}
252
+ <script type="application/json" data-highcharts-range-annotations--{{ params.id }}>
253
+ {{ params.rangeAnnotations | tojson }}
254
+ </script>
255
+ {% endif %}
256
+ {% if params.referenceLineAnnotations %}
257
+ <script type="application/json" data-highcharts-reference-line-annotations--{{ params.id }}>
258
+ {{ params.referenceLineAnnotations | tojson }}
259
+ </script>
260
+ {% endif %}
261
+ <!-- prettier-ignore-end -->
208
262
  {% endif %}
209
- {% if params.annotations %}
210
- <script type="application/json" data-highcharts-annotations--{{ params.id }}>
211
- {{ params.annotations | tojson }}
212
- </script>
213
- {% endif %}
214
- {% if params.rangeAnnotations %}
215
- <script type="application/json" data-highcharts-range-annotations--{{ params.id }}>
216
- {{ params.rangeAnnotations | tojson }}
217
- </script>
218
- {% endif %}
219
- {% if params.referenceLineAnnotations %}
220
- <script type="application/json" data-highcharts-reference-line-annotations--{{ params.id }}>
221
- {{ params.referenceLineAnnotations | tojson }}
222
- </script>
223
- {% endif %}
224
- <!-- prettier-ignore-end -->
225
263
  </div>
226
264
  {% endmacro %}