@ons/design-system 73.0.4 → 73.2.0
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.
- package/components/chart/_chart.scss +2 -2
- package/components/chart/_macro.spec.js +32 -0
- package/components/chart/annotations-options.js +1 -0
- package/components/chart/area-chart.js +3 -0
- package/components/chart/bar-chart.js +1 -0
- package/components/chart/chart.js +6 -4
- package/components/chart/column-chart.js +3 -0
- package/components/chart/example-area-chart.njk +2 -2
- package/components/chart/example-line-chart-with-label-format.njk +89 -0
- package/components/chart/reference-line-annotations-options.js +1 -0
- package/components/chart/specific-chart-options.js +8 -1
- package/components/details-panel/_macro.njk +6 -6
- package/components/header/_macro.njk +64 -31
- package/components/header/_macro.spec.js +223 -0
- package/components/header/example-header-basic-with-search-and-language-DEPRECATED.njk +207 -0
- package/components/header/example-header-basic-with-search-and-language.njk +36 -27
- package/components/header/example-header-basic-with-search-button.njk +35 -27
- package/components/hero/_macro.njk +4 -1
- package/components/hero/_macro.spec.js +26 -0
- package/components/list/_list.scss +0 -3
- package/components/panel/_panel.scss +5 -0
- package/components/radios/_macro.njk +1 -1
- package/components/skip-to-content/_macro.njk +1 -1
- package/components/skip-to-content/_skip.scss +0 -2
- package/components/table-of-contents/example-table-of-contents-grouped-with-single-list-item.njk +34 -0
- package/css/main.css +1 -1
- package/js/cookies-settings.js +5 -5
- package/package.json +18 -12
- package/scripts/main.es5.js +5 -3
- package/scripts/main.js +2 -2
- package/scss/utilities/_highlight.scss +2 -1
|
@@ -12,8 +12,8 @@
|
|
|
12
12
|
fill: var(--ons-color-grey-75); /* Forces the color used for text in high contrast mode */
|
|
13
13
|
}
|
|
14
14
|
.highcharts-annotation-label text,
|
|
15
|
-
.highcharts-plot-
|
|
16
|
-
.highcharts-plot-
|
|
15
|
+
.highcharts-plot-band-label,
|
|
16
|
+
.highcharts-plot-line-label {
|
|
17
17
|
fill: CanvasText !important; /* Forces the color used for text in high contrast mode */
|
|
18
18
|
}
|
|
19
19
|
|
|
@@ -260,6 +260,38 @@ describe('Macro: Chart', () => {
|
|
|
260
260
|
expect(configScript).toContain('"startOnTick":false');
|
|
261
261
|
expect(configScript).toContain('"endOnTick":true');
|
|
262
262
|
});
|
|
263
|
+
|
|
264
|
+
test('THEN: yAxis min and max are included in config with the correct values', () => {
|
|
265
|
+
const params = {
|
|
266
|
+
id: 'test-chart',
|
|
267
|
+
title: 'Test Chart',
|
|
268
|
+
xAxis: {
|
|
269
|
+
title: 'X Axis Title',
|
|
270
|
+
categories: ['A', 'B', 'C'],
|
|
271
|
+
type: 'linear',
|
|
272
|
+
labelFormat: '{value}',
|
|
273
|
+
},
|
|
274
|
+
chartType: 'line',
|
|
275
|
+
yAxis: {
|
|
276
|
+
title: 'Y Axis Title',
|
|
277
|
+
labelFormat: '{value}',
|
|
278
|
+
min: 20.5,
|
|
279
|
+
max: 99.5,
|
|
280
|
+
tickIntervalDesktop: 0.5,
|
|
281
|
+
startOnTick: false,
|
|
282
|
+
endOnTick: true,
|
|
283
|
+
},
|
|
284
|
+
series: [],
|
|
285
|
+
};
|
|
286
|
+
|
|
287
|
+
const $ = cheerio.load(renderComponent('chart', params));
|
|
288
|
+
const configScript = $(`script[data-highcharts-config--${params.id}]`).html();
|
|
289
|
+
|
|
290
|
+
expect(configScript).toContain('"min":20.5');
|
|
291
|
+
expect(configScript).toContain('"max":99.5');
|
|
292
|
+
expect(configScript).toContain('"startOnTick":false');
|
|
293
|
+
expect(configScript).toContain('"endOnTick":true');
|
|
294
|
+
});
|
|
263
295
|
});
|
|
264
296
|
|
|
265
297
|
describe('WHEN: yAxis min and max are not provided', () => {
|
|
@@ -56,16 +56,16 @@ class HighchartsBaseChart {
|
|
|
56
56
|
this.percentageHeightDesktop = this.node.dataset.highchartsPercentageHeightDesktop;
|
|
57
57
|
this.percentageHeightMobile = this.node.dataset.highchartsPercentageHeightMobile;
|
|
58
58
|
this.xAxisTickIntervalMobile = this.node.dataset.highchartsXAxisTickIntervalMobile
|
|
59
|
-
?
|
|
59
|
+
? parseFloat(this.node.dataset.highchartsXAxisTickIntervalMobile)
|
|
60
60
|
: undefined;
|
|
61
61
|
this.xAxisTickIntervalDesktop = this.node.dataset.highchartsXAxisTickIntervalDesktop
|
|
62
|
-
?
|
|
62
|
+
? parseFloat(this.node.dataset.highchartsXAxisTickIntervalDesktop)
|
|
63
63
|
: undefined;
|
|
64
64
|
this.yAxisTickIntervalMobile = this.node.dataset.highchartsYAxisTickIntervalMobile
|
|
65
|
-
?
|
|
65
|
+
? parseFloat(this.node.dataset.highchartsYAxisTickIntervalMobile)
|
|
66
66
|
: undefined;
|
|
67
67
|
this.yAxisTickIntervalDesktop = this.node.dataset.highchartsYAxisTickIntervalDesktop
|
|
68
|
-
?
|
|
68
|
+
? parseFloat(this.node.dataset.highchartsYAxisTickIntervalDesktop)
|
|
69
69
|
: undefined;
|
|
70
70
|
this.commonChartOptions = new CommonChartOptions();
|
|
71
71
|
this.estimateLineLabel = this.node.dataset.highchartsEstimateLineLabel;
|
|
@@ -167,6 +167,7 @@ class HighchartsBaseChart {
|
|
|
167
167
|
if (this.chartType === 'scatter') {
|
|
168
168
|
// Merge the scatter chart options with the existing config
|
|
169
169
|
this.config = mergeConfigs(this.config, scatterChartOptions);
|
|
170
|
+
this.specificChartOptions.limitSeriesForScatterChart();
|
|
170
171
|
}
|
|
171
172
|
if (this.chartType === 'boxplot') {
|
|
172
173
|
// Merge the boxplot chart options with the existing config
|
|
@@ -187,6 +188,7 @@ class HighchartsBaseChart {
|
|
|
187
188
|
}
|
|
188
189
|
}
|
|
189
190
|
|
|
191
|
+
// Limit the number of series to the theme length
|
|
190
192
|
this.specificChartOptions.limitSeriesToThemeLength();
|
|
191
193
|
|
|
192
194
|
// Disable the legend for single series charts
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
39.2, 47.1, 44.0, 46, 65.3, 53.2, 49.1, 49.3, 50.4, 48.1,
|
|
35
35
|
43.9, 41.8
|
|
36
36
|
],
|
|
37
|
-
"name": "Test series
|
|
37
|
+
"name": "Test series 1"
|
|
38
38
|
},
|
|
39
39
|
{
|
|
40
40
|
"data": [
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
37.8, 41.0, 43.0, 42.9, 41.8, 39.8, 37.9, 38.2, 37.6, 36.7,
|
|
49
49
|
33.9, 31.8
|
|
50
50
|
],
|
|
51
|
-
"name": "Test series
|
|
51
|
+
"name": "Test series 3"
|
|
52
52
|
}
|
|
53
53
|
],
|
|
54
54
|
"xAxis": {
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
{% from "components/chart/_macro.njk" import onsChart %}
|
|
2
|
+
|
|
3
|
+
{{
|
|
4
|
+
onsChart({
|
|
5
|
+
"chartType": "line",
|
|
6
|
+
"description": "Line chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
|
|
7
|
+
"theme": "primary",
|
|
8
|
+
"title": "Sales volumes and values saw moderate growth in July 2024",
|
|
9
|
+
"subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
|
|
10
|
+
"id": "id",
|
|
11
|
+
"headingLevel": 4,
|
|
12
|
+
"caption": "Source: Monthly Business Survey, Retails Sales Inquiry from the Office for National Statistics",
|
|
13
|
+
"download": {
|
|
14
|
+
'title': 'Download Figure 1 data',
|
|
15
|
+
'itemsList': [
|
|
16
|
+
{
|
|
17
|
+
"text": "Excel spreadsheet (XLSX format, 18KB)",
|
|
18
|
+
"url": "#"
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"text": "Simple text file (CSV format, 25KB)",
|
|
22
|
+
"url": "#"
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
|
|
26
|
+
"text": "Image (PNG format, 25KB)",
|
|
27
|
+
"url": "#"
|
|
28
|
+
}
|
|
29
|
+
]},
|
|
30
|
+
"footnotes": {
|
|
31
|
+
"title": "Footnotes",
|
|
32
|
+
"content": "<ol><li>Non-store retailing refers to retailers that do not have a store presence. While the majority is made up of online retailers, it also includes other retailers, such as stalls and markets.</li><li>More data are available in our Retail Sales Index datasets.</li></ol>"
|
|
33
|
+
},
|
|
34
|
+
"legend": true,
|
|
35
|
+
"xAxis": {
|
|
36
|
+
"title": "Year",
|
|
37
|
+
"type": "linear",
|
|
38
|
+
"labelFormat": "{value:.2f}",
|
|
39
|
+
"categories": [
|
|
40
|
+
'Oct 2014',
|
|
41
|
+
'Nov 2014',
|
|
42
|
+
'Dec 2014',
|
|
43
|
+
'Jan 2015',
|
|
44
|
+
'Feb 2015',
|
|
45
|
+
'Mar 2015',
|
|
46
|
+
'Apr 2015',
|
|
47
|
+
'May 2015',
|
|
48
|
+
'Jun 2015',
|
|
49
|
+
'Jul 2015',
|
|
50
|
+
'Aug 2015',
|
|
51
|
+
'Sep 2015'
|
|
52
|
+
],
|
|
53
|
+
"tickIntervalMobile": 3
|
|
54
|
+
},
|
|
55
|
+
"yAxis": {
|
|
56
|
+
"title": "Sales",
|
|
57
|
+
"labelFormat": "{value:,.2f}"
|
|
58
|
+
},
|
|
59
|
+
"series": [
|
|
60
|
+
{
|
|
61
|
+
"name": 'CPIH',
|
|
62
|
+
"data": [
|
|
63
|
+
1.3, 1.1, 0.7, 0.5, 0.4, 0.3, 0.3, 0.4, 0.3, 0.5, 0.4, 0.2
|
|
64
|
+
]
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
"name": 'Goods',
|
|
68
|
+
"data": [
|
|
69
|
+
0.3, 0.2, 1.0, 1.5, 2.0, 2.1, 1.9, 1.8, 2.0, 1.8, 2.0, 2.3
|
|
70
|
+
]
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
"name": 'Services',
|
|
74
|
+
"data": [
|
|
75
|
+
2.2, 2.1, 2.1, 2.1, 2.2, 2.2, 2.0, 2.1, 2.1, 2.2, 2.2, 2.2
|
|
76
|
+
]
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"name": 'CPIH excl energy, food, alcohol & tobacco',
|
|
80
|
+
"data": [
|
|
81
|
+
1.5, 1.3, 1.4, 1.5, 1.4, 1.2, 1.1, 1.2, 1.0, 1.3, 1.2, 1.2
|
|
82
|
+
]
|
|
83
|
+
}
|
|
84
|
+
],
|
|
85
|
+
"percentageHeightDesktop": 35,
|
|
86
|
+
"percentageHeightMobile": 90,
|
|
87
|
+
"fallbackImageUrl": '/img/small/line-chart-screenshot.png'
|
|
88
|
+
})
|
|
89
|
+
}}
|
|
@@ -51,11 +51,18 @@ class SpecificChartOptions {
|
|
|
51
51
|
const themeArray = this.theme === 'alternate' ? this.constants.alternateTheme : this.constants.primaryTheme;
|
|
52
52
|
|
|
53
53
|
// Limit the series to the theme array length
|
|
54
|
-
if (this.config.series.length > themeArray.length) {
|
|
54
|
+
if (this.type !== 'scatter' && this.config.series.length > themeArray.length) {
|
|
55
55
|
this.config.series.length = themeArray.length;
|
|
56
56
|
}
|
|
57
57
|
};
|
|
58
58
|
|
|
59
|
+
limitSeriesForScatterChart = () => {
|
|
60
|
+
// Scatter charts only support up to 4 series for readability
|
|
61
|
+
if (this.config.series.length > 4) {
|
|
62
|
+
this.config.series.length = 4;
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
|
|
59
66
|
getOptions = () => this.options;
|
|
60
67
|
|
|
61
68
|
getMobileOptions = (xAxisTickInterval, yAxisTickInterval) => {
|
|
@@ -13,11 +13,7 @@
|
|
|
13
13
|
{{ openingTag | safe }}
|
|
14
14
|
class="ons-details-panel__banner-title ons-u-fs-m ons-u-mb-2xs">{{ params.title }}{{ closingTag | safe }}
|
|
15
15
|
<span class="ons-details-panel__banner-detail">
|
|
16
|
-
<span class="ons-details-panel__banner-detail-
|
|
17
|
-
<span class="ons-details-panel__banner-detail-title--open"> {{ openText }} </span>
|
|
18
|
-
<span class="ons-details-panel__banner-detail-title--close"> {{ closeText }} </span>
|
|
19
|
-
</span>
|
|
20
|
-
<span class="ons-details-panel__banner-detail-icon">
|
|
16
|
+
<span class="ons-details-panel__banner-detail-icon ons-u-mr-3xs">
|
|
21
17
|
{% from "components/icon/_macro.njk" import onsIcon %}
|
|
22
18
|
{{
|
|
23
19
|
onsIcon({
|
|
@@ -25,11 +21,15 @@
|
|
|
25
21
|
})
|
|
26
22
|
}}
|
|
27
23
|
</span>
|
|
24
|
+
<span class="ons-details-panel__banner-detail-title">
|
|
25
|
+
<span class="ons-details-panel__banner-detail-title--open"> {{ openText }} </span>
|
|
26
|
+
<span class="ons-details-panel__banner-detail-title--close"> {{ closeText }} </span>
|
|
27
|
+
</span>
|
|
28
28
|
</span>
|
|
29
29
|
</span>
|
|
30
30
|
</span>
|
|
31
31
|
</summary>
|
|
32
|
-
<dl class="ons-container ons-details-panel__content ons-u-
|
|
32
|
+
<dl class="ons-container ons-details-panel__content ons-u-p-l">
|
|
33
33
|
{% for item in params.detailsItems %}
|
|
34
34
|
<div class="ons-details-panel__item ons-u-pb-xl ons-u-mb-l ons-u-ml-2xs">
|
|
35
35
|
<dt class="ons-details-panel__content-meta ons-u-mb-l@2xs@m">
|
|
@@ -216,7 +216,7 @@
|
|
|
216
216
|
</nav>
|
|
217
217
|
{% endif %}
|
|
218
218
|
|
|
219
|
-
{% if params.searchLinks %}
|
|
219
|
+
{% if params.search or params.searchLinks %}
|
|
220
220
|
<div class="ons-header__links ons-grid__col ons-header__menu-link">
|
|
221
221
|
{{
|
|
222
222
|
onsButton({
|
|
@@ -225,8 +225,8 @@
|
|
|
225
225
|
"variants": "search",
|
|
226
226
|
"iconType": "search",
|
|
227
227
|
"attributes": {
|
|
228
|
-
"aria-label": params.searchLinks.searchButtonAriaLabel | default("Toggle search"),
|
|
229
|
-
"aria-controls": params.searchLinks.id,
|
|
228
|
+
"aria-label": (params.search.toggleAriaLabel if params.search.toggleAriaLabel else params.searchLinks.searchButtonAriaLabel) | default("Toggle search"),
|
|
229
|
+
"aria-controls": params.search.id if params.search.id else params.searchLinks.id,
|
|
230
230
|
"aria-expanded": "true",
|
|
231
231
|
"aria-disabled": "true"
|
|
232
232
|
}
|
|
@@ -235,56 +235,89 @@
|
|
|
235
235
|
</div>
|
|
236
236
|
{% endif %}
|
|
237
237
|
|
|
238
|
-
{% if params.variants == "basic" and params.searchLinks %}
|
|
238
|
+
{% if params.variants == "basic" and (params.searchLinks or params.search) %}
|
|
239
239
|
<nav
|
|
240
|
-
class="ons-js-header-search ons-header-nav-search {{ params.searchLinks.classes }}"
|
|
241
|
-
id="{{ params.searchLinks.id }}"
|
|
242
|
-
aria-label="{{ params.searchLinks.searchNavigationAriaLabel | default('Search navigation') }}"
|
|
240
|
+
class="ons-js-header-search ons-header-nav-search {{ params.searchLinks.classes if params.searchLinks and params.searchLinks.classes else '' }}{{ params.search.classes if params.search and params.search.classes else '' }}"
|
|
241
|
+
id="{{ params.search.id if params.search else params.searchLinks.id }}"
|
|
242
|
+
aria-label="{{ (params.search.navAriaLabel if params.search else params.searchLinks.searchNavigationAriaLabel) | default('Search navigation') }}"
|
|
243
243
|
aria-hidden="false"
|
|
244
244
|
>
|
|
245
245
|
<div class="ons-container">
|
|
246
|
-
<
|
|
246
|
+
<form
|
|
247
|
+
class="ons-header-nav-search__input"
|
|
248
|
+
method="get"
|
|
249
|
+
action="{{ params.search.form.action | default('') }}"
|
|
250
|
+
>
|
|
247
251
|
{% from "components/input/_macro.njk" import onsInput %}
|
|
248
252
|
{{
|
|
249
253
|
onsInput({
|
|
250
254
|
"id": 'search-field',
|
|
255
|
+
"name": params.search.form.inputName | default('q'),
|
|
251
256
|
"width": 'full',
|
|
252
257
|
"label": {
|
|
253
|
-
"text": params.searchLinks.searchNavigationInputLabel | default('Search the ONS'),
|
|
258
|
+
"text": (params.search.form.inputLabel if params.search.form else params.searchLinks.searchNavigationInputLabel) | default('Search the ONS'),
|
|
254
259
|
"id": "header-search-input-label"
|
|
255
260
|
},
|
|
256
261
|
"searchButton": {
|
|
257
262
|
"visuallyHideButtonText": true,
|
|
258
|
-
"text": params.searchLinks.searchNavigationButtonText | default('Search'),
|
|
263
|
+
"text": (params.search.form.buttonText if params.search.form else params.searchLinks.searchNavigationButtonText) | default('Search'),
|
|
259
264
|
"iconType": 'search',
|
|
260
265
|
'variant': 'header'
|
|
261
266
|
}
|
|
262
267
|
})
|
|
263
268
|
}}
|
|
264
|
-
</
|
|
269
|
+
</form>
|
|
265
270
|
</div>
|
|
266
|
-
{% if params.searchLinks %}
|
|
271
|
+
{% if params.search or params.searchLinks %}
|
|
267
272
|
<div class="ons-container">
|
|
268
273
|
<h2 class="ons-u-fs-r--b ons-u-mb-s ons-header-nav-search__heading">
|
|
269
|
-
{{ params.searchLinks.heading }}
|
|
274
|
+
{{ params.search.links.heading if params.search.links else params.searchLinks.heading }}
|
|
270
275
|
</h2>
|
|
271
276
|
<ul class="ons-list ons-list--bare ons-list--inline">
|
|
272
|
-
{%
|
|
273
|
-
{
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
{% if item.
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
277
|
+
{% if params.searchLinks %}
|
|
278
|
+
{% for item in params.searchLinks.itemsList %}
|
|
279
|
+
{# Limiting the popular searches to 5 #}
|
|
280
|
+
{% if loop.index <= 5 %}
|
|
281
|
+
<li class="ons-list__item">
|
|
282
|
+
{% if item.text %}
|
|
283
|
+
{% if item.url %}
|
|
284
|
+
<a
|
|
285
|
+
href="{{ item.url }}"
|
|
286
|
+
class="ons-u-fs-r ons-header-nav-search__text"
|
|
287
|
+
>{{ item.text }}
|
|
288
|
+
</a>
|
|
289
|
+
{% else %}
|
|
290
|
+
<p class="ons-u-fs-r ons-header-nav-search__text">
|
|
291
|
+
{{ item.text }}
|
|
292
|
+
</p>
|
|
293
|
+
{% endif %}
|
|
283
294
|
{% endif %}
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
{%
|
|
287
|
-
{%
|
|
295
|
+
</li>
|
|
296
|
+
{% endif %}
|
|
297
|
+
{% endfor %}
|
|
298
|
+
{% endif %}
|
|
299
|
+
{% if params.search.links %}
|
|
300
|
+
{% for item in params.search.links.itemsList %}
|
|
301
|
+
{# Limiting the popular searches to 5 #}
|
|
302
|
+
{% if loop.index <= 5 %}
|
|
303
|
+
<li class="ons-list__item">
|
|
304
|
+
{% if item.text %}
|
|
305
|
+
{% if item.url %}
|
|
306
|
+
<a
|
|
307
|
+
href="{{ item.url }}"
|
|
308
|
+
class="ons-u-fs-r ons-header-nav-search__text"
|
|
309
|
+
>{{ item.text }}
|
|
310
|
+
</a>
|
|
311
|
+
{% else %}
|
|
312
|
+
<p class="ons-u-fs-r ons-header-nav-search__text">
|
|
313
|
+
{{ item.text }}
|
|
314
|
+
</p>
|
|
315
|
+
{% endif %}
|
|
316
|
+
{% endif %}
|
|
317
|
+
</li>
|
|
318
|
+
{% endif %}
|
|
319
|
+
{% endfor %}
|
|
320
|
+
{% endif %}
|
|
288
321
|
</ul>
|
|
289
322
|
</div>
|
|
290
323
|
{% endif %}
|
|
@@ -294,7 +327,7 @@
|
|
|
294
327
|
{% endif %}
|
|
295
328
|
{% if params.language or params.serviceLinks %}
|
|
296
329
|
<div
|
|
297
|
-
class="ons-header__links ons-grid__col{{ ' ons-u-ml-auto' if not params.searchLinks and not params.menuLinks }}"
|
|
330
|
+
class="ons-header__links ons-grid__col{{ ' ons-u-ml-auto' if not (params.searchLinks or params.search) and not params.menuLinks }}"
|
|
298
331
|
>
|
|
299
332
|
{% if params.language %}
|
|
300
333
|
<div class="ons-grid__col ons-col-auto{{ ' ons-u-mr-s ons-u-d-no@2xs@xs' if params.serviceLinks }}">
|
|
@@ -482,13 +515,13 @@
|
|
|
482
515
|
<span class="ons-grid ons-u-ml-no ons-u-d-no@2xs@xs">
|
|
483
516
|
{{
|
|
484
517
|
onsButton({
|
|
485
|
-
"text": params.searchLinks.searchNavigationButtonText | default('Search'),
|
|
518
|
+
"text": (params.search.form.buttonText if params.search.form.buttonText else searchLinks.searchNavigationButtonText) | default('Search'),
|
|
486
519
|
"classes": "ons-btn--search ons-u-ml-2xs ons-u-d-no ons-js-toggle-search",
|
|
487
520
|
"variants": ["small", "ghost"],
|
|
488
521
|
"iconType": "search",
|
|
489
522
|
"iconPosition": "only",
|
|
490
523
|
"attributes": {
|
|
491
|
-
"aria-label": params.searchLinks.searchNavigationButtonAriaLabel | default('Toggle search'),
|
|
524
|
+
"aria-label":(params.search.navButtonAriaLabel if params.search.navButtonAriaLabel else params.searchLinks.searchNavigationButtonAriaLabel) | default('Toggle search'),
|
|
492
525
|
"aria-controls": "ons-site-search",
|
|
493
526
|
"aria-expanded": "false"
|
|
494
527
|
}
|