@ons/design-system 66.0.0 → 66.0.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.
- package/components/autosuggest/_macro.spec.js +2 -10
- package/components/button/_button.scss +23 -12
- package/components/button/button.js +12 -3
- package/components/header/_macro.njk +2 -2
- package/components/icon/_macro.njk +4 -3
- package/components/list/_list.scss +1 -1
- package/components/navigation/_macro.njk +32 -12
- package/components/navigation/_macro.spec.js +22 -18
- package/css/main.css +1 -1
- package/package.json +1 -1
- package/scripts/main.es5.js +1 -1
- package/scripts/main.js +1 -1
|
@@ -264,11 +264,7 @@ describe('macro: autosuggest', () => {
|
|
|
264
264
|
it('renders div with the provided title text', () => {
|
|
265
265
|
const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
|
|
266
266
|
|
|
267
|
-
expect(
|
|
268
|
-
$('.ons-autosuggest__results-title')
|
|
269
|
-
.text()
|
|
270
|
-
.trim(),
|
|
271
|
-
).toBe('Suggestions');
|
|
267
|
+
expect($('.ons-autosuggest__results-title').text().trim()).toBe('Suggestions');
|
|
272
268
|
});
|
|
273
269
|
|
|
274
270
|
it('renders list with a generated identifier', () => {
|
|
@@ -298,11 +294,7 @@ describe('macro: autosuggest', () => {
|
|
|
298
294
|
it('renders instructions text', () => {
|
|
299
295
|
const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
|
|
300
296
|
|
|
301
|
-
expect(
|
|
302
|
-
$('.ons-autosuggest__instructions')
|
|
303
|
-
.text()
|
|
304
|
-
.trim(),
|
|
305
|
-
).toBe('Use up and down keys to navigate.');
|
|
297
|
+
expect($('.ons-autosuggest__instructions').text().trim()).toBe('Use up and down keys to navigate.');
|
|
306
298
|
});
|
|
307
299
|
});
|
|
308
300
|
});
|
|
@@ -78,13 +78,15 @@ $button-shadow-size: 3px;
|
|
|
78
78
|
}
|
|
79
79
|
}
|
|
80
80
|
|
|
81
|
-
&:focus:hover:not(:active) &__inner {
|
|
81
|
+
&:focus:hover:not(:active, .active) &__inner {
|
|
82
82
|
background: var(--ons-color-focus-dark);
|
|
83
83
|
}
|
|
84
84
|
|
|
85
85
|
// When down
|
|
86
86
|
&:active &,
|
|
87
|
-
&:active:focus
|
|
87
|
+
&:active:focus &,
|
|
88
|
+
&.active &,
|
|
89
|
+
&.active:focus & {
|
|
88
90
|
&__inner {
|
|
89
91
|
background: var(--ons-color-button);
|
|
90
92
|
box-shadow: none;
|
|
@@ -96,7 +98,8 @@ $button-shadow-size: 3px;
|
|
|
96
98
|
}
|
|
97
99
|
}
|
|
98
100
|
|
|
99
|
-
&:active
|
|
101
|
+
&:active,
|
|
102
|
+
&.active {
|
|
100
103
|
top: ems($button-shadow-size);
|
|
101
104
|
}
|
|
102
105
|
|
|
@@ -132,7 +135,9 @@ $button-shadow-size: 3px;
|
|
|
132
135
|
|
|
133
136
|
&--secondary &,
|
|
134
137
|
&--secondary:active &,
|
|
135
|
-
&--secondary
|
|
138
|
+
&--secondary.active &,
|
|
139
|
+
&--secondary:active:focus &,
|
|
140
|
+
&--secondary.active:focus & {
|
|
136
141
|
&__inner {
|
|
137
142
|
background: var(--ons-color-button-secondary);
|
|
138
143
|
color: var(--ons-color-text);
|
|
@@ -169,8 +174,8 @@ $button-shadow-size: 3px;
|
|
|
169
174
|
text-decoration: none;
|
|
170
175
|
}
|
|
171
176
|
|
|
172
|
-
&--link:focus:not(:active, &--secondary) &,
|
|
173
|
-
&--link:focus:hover:not(:active, &--secondary) & {
|
|
177
|
+
&--link:focus:not(:active, .active, &--secondary) &,
|
|
178
|
+
&--link:focus:hover:not(:active, .active, &--secondary) & {
|
|
174
179
|
outline: inherit;
|
|
175
180
|
|
|
176
181
|
&__inner {
|
|
@@ -238,8 +243,8 @@ $button-shadow-size: 3px;
|
|
|
238
243
|
}
|
|
239
244
|
|
|
240
245
|
&--text-link:focus &,
|
|
241
|
-
&--text-link
|
|
242
|
-
&--text-link
|
|
246
|
+
&--text-link:active:focus &,
|
|
247
|
+
&--text-link.active:focus & {
|
|
243
248
|
&__inner {
|
|
244
249
|
background-color: var(--ons-color-focus);
|
|
245
250
|
box-shadow: 0 -2px var(--ons-color-focus),
|
|
@@ -288,7 +293,9 @@ $button-shadow-size: 3px;
|
|
|
288
293
|
}
|
|
289
294
|
|
|
290
295
|
&--ghost:active:focus,
|
|
291
|
-
&--ghost
|
|
296
|
+
&--ghost.active:focus
|
|
297
|
+
&--ghost-dark:active:focus
|
|
298
|
+
&--ghost-dark.active:focus {
|
|
292
299
|
box-shadow: none;
|
|
293
300
|
outline: 3px solid transparent;
|
|
294
301
|
}
|
|
@@ -403,7 +410,8 @@ $button-shadow-size: 3px;
|
|
|
403
410
|
}
|
|
404
411
|
}
|
|
405
412
|
|
|
406
|
-
&--loader.ons-is-loading:active
|
|
413
|
+
&--loader.ons-is-loading:active &,
|
|
414
|
+
&--loader.ons-is-loading.active & {
|
|
407
415
|
&__inner {
|
|
408
416
|
box-shadow: 0 ems($button-shadow-size) 0 var(--ons-color-button-shadow);
|
|
409
417
|
}
|
|
@@ -448,7 +456,8 @@ $button-shadow-size: 3px;
|
|
|
448
456
|
cursor: not-allowed;
|
|
449
457
|
}
|
|
450
458
|
|
|
451
|
-
&--disabled:active
|
|
459
|
+
&--disabled:active &,
|
|
460
|
+
&--disabled.active & {
|
|
452
461
|
&__inner {
|
|
453
462
|
box-shadow: 0 ems($button-shadow-size) 0 var(--ons-color-button-shadow);
|
|
454
463
|
}
|
|
@@ -496,7 +505,9 @@ $button-shadow-size: 3px;
|
|
|
496
505
|
}
|
|
497
506
|
|
|
498
507
|
&--dropdown:active &,
|
|
499
|
-
&--dropdown
|
|
508
|
+
&--dropdown.active &,
|
|
509
|
+
&--dropdown:active:focus &,
|
|
510
|
+
&--dropdown.active:focus & {
|
|
500
511
|
&__inner {
|
|
501
512
|
background: var(--ons-color-branded-secondary);
|
|
502
513
|
color: var(--ons-color-white);
|
|
@@ -18,7 +18,8 @@ export default class SubmitButton {
|
|
|
18
18
|
this.button.addEventListener('click', this.timerButton.bind(this));
|
|
19
19
|
}
|
|
20
20
|
} else if (this.submitType == 'link') {
|
|
21
|
-
this.button.addEventListener('keydown', this.
|
|
21
|
+
this.button.addEventListener('keydown', this.linkButtonDown.bind(this));
|
|
22
|
+
this.button.addEventListener('keyup', this.linkButtonUp.bind(this));
|
|
22
23
|
}
|
|
23
24
|
}
|
|
24
25
|
|
|
@@ -48,10 +49,18 @@ export default class SubmitButton {
|
|
|
48
49
|
);
|
|
49
50
|
}
|
|
50
51
|
|
|
51
|
-
|
|
52
|
-
if (e.keyCode == 32)
|
|
52
|
+
linkButtonDown(e){
|
|
53
|
+
if (e.keyCode == 32 || e.keyCode == 13){
|
|
54
|
+
this.button.classList.add("active");
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
linkButtonUp(e){
|
|
59
|
+
if (e.keyCode == 32 || e.keyCode == 13) {
|
|
60
|
+
this.button.classList.remove("active");
|
|
53
61
|
e.preventDefault();
|
|
54
62
|
this.button.click();
|
|
55
63
|
}
|
|
56
64
|
}
|
|
65
|
+
|
|
57
66
|
}
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
<div class="ons-grid__col ons-col-auto{% if controlVisibility == true %} ons-u-d-no@xxs@{{ breakpoint }}{% endif %}">
|
|
89
89
|
<nav class="ons-header-service-nav ons-header-service-nav--main {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
|
|
90
90
|
<ul class="ons-header-service-nav__list">
|
|
91
|
-
{% for item in params.serviceLinks.itemsList %}
|
|
91
|
+
{% for item in params.serviceLinks.itemsList %}
|
|
92
92
|
<li class="ons-header-service-nav__item">
|
|
93
93
|
{% if item.iconType %}
|
|
94
94
|
{{
|
|
@@ -139,7 +139,7 @@
|
|
|
139
139
|
{% if params.serviceLinks %}
|
|
140
140
|
<nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav" id="{{ params.serviceLinks.id }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
|
|
141
141
|
<ul class="ons-header-service-nav__list">
|
|
142
|
-
{% for item in params.serviceLinks.itemsList %}
|
|
142
|
+
{% for item in params.serviceLinks.itemsList %}
|
|
143
143
|
<li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
|
|
144
144
|
{% if item.iconType %}
|
|
145
145
|
{{
|
|
@@ -72,9 +72,10 @@
|
|
|
72
72
|
<path d="M32,16.0986285 C32.0009185,7.5342974 25.337417,0.468462963 16.8372092,0.0203294753 C8.33700136,-0.427804013 0.97607758,5.89865855 0.0874346352,14.4161886 C-0.801208309,22.9337186 5.09355054,30.6602611 13.5009524,31.9979281 L13.5009524,20.7518951 L9.44,20.7518951 L9.44,16.0986285 L13.5009524,16.0986285 L13.5009524,12.549267 C13.5009524,8.5169471 15.8857143,6.28613892 19.5428571,6.28613892 C20.742535,6.30277426 21.9393895,6.40782423 23.1238095,6.60044523 L23.1238095,10.5637711 L21.1047619,10.5637711 C19.1161905,10.5637711 18.4990476,11.8056643 18.4990476,13.0782216 L18.4990476,16.0986285 L22.9409524,16.0986285 L22.2247619,20.7518951 L18.4990476,20.7518951 L18.4990476,31.9979281 C26.2735701,30.760956 31.9991507,24.0182672 32,16.0986285 L32,16.0986285 Z"/>
|
|
73
73
|
</svg>
|
|
74
74
|
{% elif params.iconType == "twitter" %}
|
|
75
|
-
<svg class="{% if params.iconSize %}ons-icon ons-icon--{{ params.iconSize }}{% else %}ons-icon{% endif %}{{ iconClasses }}" id="icon-twitter" viewBox="0 0
|
|
76
|
-
|
|
77
|
-
|
|
75
|
+
<svg class="{% if params.iconSize %}ons-icon ons-icon--{{ params.iconSize }}{% else %}ons-icon{% endif %}{{ iconClasses }}" id="icon-twitter" viewBox="0 0 90.01 90.01" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
|
|
76
|
+
<polygon points="24.89,23.01 57.79,66.99 65.24,66.99 32.34,23.01"/>
|
|
77
|
+
<path d="M 45 0 L 45 0 C 20.147 0 0 20.147 0 45 v 0 c 0 24.853 20.147 45 45 45 h 0 c 24.853 0 45 -20.147 45 -45 v 0 C 90 20.147 69.853 0 45 0 z M 56.032 70.504 L 41.054 50.477 L 22.516 70.504 h -4.765 L 38.925 47.63 L 17.884 19.496 h 16.217 L 47.895 37.94 l 17.072 -18.444 h 4.765 L 50.024 40.788 l 22.225 29.716 H 56.032 z"/>
|
|
78
|
+
</svg>
|
|
78
79
|
{% elif params.iconType == "instagram" %}
|
|
79
80
|
<svg class="{% if params.iconSize %}ons-icon ons-icon--{{ params.iconSize }}{% else %}ons-icon{% endif %}{{ iconClasses }}" id="icon-instagram" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
|
|
80
81
|
<path d="M21.34,9.46c0.66,0,1.2,0.54,1.2,1.2c0,0.66-0.54,1.2-1.2,1.2c-0.66,0-1.2-0.54-1.2-1.2C20.14,10,20.68,9.46,21.34,9.46z M16,12.67c-1.84,0-3.33,1.49-3.33,3.33c0,1.84,1.49,3.33,3.33,3.33c1.84,0,3.33-1.49,3.33-3.33C19.33,14.16,17.84,12.67,16,12.67z M16,10.86c2.84,0,5.14,2.3,5.14,5.14c0,2.84-2.3,5.14-5.14,5.14c-2.84,0-5.14-2.3-5.14-5.14C10.86,13.16,13.16,10.86,16,10.86z M16.56,7.8h-1.11c-2.17,0-2.51,0.01-3.49,0.06c-0.97,0.04-1.5,0.21-1.86,0.34C9.64,8.39,9.3,8.6,8.95,8.95C8.6,9.3,8.39,9.64,8.2,10.1c-0.14,0.35-0.3,0.88-0.34,1.86c-0.04,0.98-0.06,1.32-0.06,3.49v1.11c0,2.17,0.01,2.51,0.06,3.49c0.04,0.97,0.21,1.5,0.34,1.86c0.18,0.47,0.4,0.8,0.75,1.15c0.35,0.35,0.68,0.57,1.15,0.75c0.35,0.14,0.88,0.3,1.86,0.34c0.94,0.04,1.29,0.06,3.23,0.06h1.61c1.94,0,2.3-0.02,3.23-0.06c0.97-0.04,1.5-0.21,1.86-0.34c0.47-0.18,0.8-0.4,1.15-0.75c0.35-0.35,0.57-0.68,0.75-1.15c0.14-0.35,0.3-0.88,0.34-1.86c0.04-0.94,0.06-1.29,0.06-3.23v-1.61c0-1.94-0.02-2.3-0.06-3.23c-0.04-0.97-0.21-1.5-0.34-1.86c-0.18-0.47-0.4-0.8-0.75-1.15C22.7,8.6,22.36,8.39,21.9,8.2c-0.35-0.14-0.88-0.3-1.86-0.34C19.06,7.82,18.72,7.8,16.56,7.8z M17.03,6c1.8,0,2.18,0.02,3.1,0.06c1.06,0.05,1.79,0.22,2.43,0.46c0.66,0.26,1.22,0.6,1.77,1.15c0.56,0.56,0.9,1.11,1.15,1.77c0.25,0.64,0.42,1.36,0.46,2.43c0.05,0.99,0.06,1.35,0.06,3.58v1.09c0,2.22-0.01,2.59-0.06,3.58c-0.05,1.06-0.22,1.79-0.46,2.43c-0.26,0.66-0.6,1.22-1.15,1.77c-0.56,0.56-1.11,0.9-1.77,1.15c-0.64,0.25-1.36,0.42-2.43,0.46C19.13,25.99,18.77,26,16.55,26h-1.09c-2.22,0-2.59-0.01-3.58-0.06c-1.06-0.05-1.79-0.22-2.43-0.46c-0.66-0.26-1.22-0.6-1.77-1.15c-0.56-0.56-0.9-1.11-1.15-1.77c-0.25-0.64-0.42-1.36-0.46-2.43C6.02,19.21,6,18.83,6,17.03v-2.06c0-1.8,0.02-2.18,0.06-3.1c0.05-1.06,0.22-1.79,0.46-2.43c0.26-0.66,0.6-1.22,1.15-1.77c0.56-0.56,1.11-0.9,1.77-1.15c0.64-0.25,1.36-0.42,2.43-0.46C12.79,6.02,13.17,6,14.97,6H17.03z M16,0C7.16,0,0,7.16,0,16s7.16,16,16,16s16-7.16,16-16c0-4.24-1.69-8.31-4.69-11.31S20.24,0,16,0z"/>
|
|
@@ -77,6 +77,7 @@
|
|
|
77
77
|
&--icons {
|
|
78
78
|
margin-bottom: 0;
|
|
79
79
|
.ons-list__item {
|
|
80
|
+
margin-top: 0;
|
|
80
81
|
margin-bottom: 0.5rem;
|
|
81
82
|
}
|
|
82
83
|
}
|
|
@@ -99,7 +100,6 @@
|
|
|
99
100
|
.ons-list__item {
|
|
100
101
|
display: inline-block;
|
|
101
102
|
margin: 0 1rem 0 0;
|
|
102
|
-
vertical-align: top;
|
|
103
103
|
}
|
|
104
104
|
}
|
|
105
105
|
|
|
@@ -15,14 +15,16 @@
|
|
|
15
15
|
{{ onsAutosuggest({
|
|
16
16
|
"id": "ons-site-search",
|
|
17
17
|
"containerClasses": "ons-autosuggest--header",
|
|
18
|
-
"
|
|
19
|
-
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
"
|
|
18
|
+
"input": {
|
|
19
|
+
"classes": autosuggestClasses,
|
|
20
|
+
"accessiblePlaceholder": true,
|
|
21
|
+
"autocomplete": "off",
|
|
22
|
+
"label": {
|
|
23
|
+
"text": params.siteSearchAutosuggest.label,
|
|
24
|
+
"id": "ons-site-search-label",
|
|
25
|
+
"classes": autosuggestLabelClasses
|
|
26
|
+
}
|
|
23
27
|
},
|
|
24
|
-
"accessiblePlaceholder": true,
|
|
25
|
-
"autocomplete": "off",
|
|
26
28
|
"instructions": params.siteSearchAutosuggest.instructions,
|
|
27
29
|
"ariaYouHaveSelected":params.siteSearchAutosuggest.ariaYouHaveSelected,
|
|
28
30
|
"ariaMinChars": params.siteSearchAutosuggest.ariaMinChars,
|
|
@@ -42,7 +44,11 @@
|
|
|
42
44
|
<ul class="ons-navigation__list">
|
|
43
45
|
{% for item in params.navigation.itemsList %}
|
|
44
46
|
<li class="ons-navigation__item {{ item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and item.url in params.navigation.currentPath) }}">
|
|
45
|
-
|
|
47
|
+
<a class="ons-navigation__link" href="{{ item.url }}" {% if item.id %}id="{{ item.id }}" {% endif %}{% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %}>
|
|
48
|
+
{% if item.title %}{{ item.title }}
|
|
49
|
+
{% elif item.text %}{{ item.text }}
|
|
50
|
+
{% endif %}
|
|
51
|
+
</a>
|
|
46
52
|
</li>
|
|
47
53
|
{% endfor %}
|
|
48
54
|
</ul>
|
|
@@ -55,7 +61,11 @@
|
|
|
55
61
|
<ul class="ons-navigation__list ons-navigation__list">
|
|
56
62
|
{% for item in params.navigation.subNavigation.itemsList %}
|
|
57
63
|
<li class="ons-navigation__item {{ item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and item.url in params.navigation.currentPath) }}">
|
|
58
|
-
<a class="ons-navigation__link ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id %}id="{{ item.id }}" {% endif %}>
|
|
64
|
+
<a class="ons-navigation__link ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id %}id="{{ item.id }}" {% endif %}>
|
|
65
|
+
{% if item.title %}{{ item.title }}
|
|
66
|
+
{% elif item.text %}{{ item.text }}
|
|
67
|
+
{% endif %}
|
|
68
|
+
</a>
|
|
59
69
|
</li>
|
|
60
70
|
{% endfor %}
|
|
61
71
|
</ul>
|
|
@@ -81,14 +91,24 @@
|
|
|
81
91
|
</li>
|
|
82
92
|
{% for item in params.navigation.subNavigation.itemsList %}
|
|
83
93
|
<li class="ons-navigation__item {{ ' ons-navigation__item--active' if (item.url == params.navigation.subNavigation.currentPath) or (item.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and item.url in params.navigation.currentPath) }}">
|
|
84
|
-
<a class="ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id %}id="{{ item.id }}--mobile" {% endif %}>
|
|
94
|
+
<a class="ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id %}id="{{ item.id }}--mobile" {% endif %}>
|
|
95
|
+
{% if item.title %}{{ item.title }}
|
|
96
|
+
{% elif item.text %}{{ item.text }}
|
|
97
|
+
{% endif %}
|
|
98
|
+
</a>
|
|
85
99
|
{% if item.sections %}
|
|
86
100
|
{% for section in item.sections %}
|
|
87
|
-
{% if section.sectionTitle %}
|
|
101
|
+
{% if section.sectionTitle %}
|
|
102
|
+
<h3 class="ons-navigation__list-header">{{ section.sectionTitle }}</h3>
|
|
103
|
+
{% endif %}
|
|
88
104
|
<ul class="ons-navigation__list ons-navigation__list--child ons-list--dashed ons-u-ml-s ons-u-mt-xs">
|
|
89
105
|
{% for child in section.children %}
|
|
90
106
|
<li class="ons-navigation__item ons-list__item {{ ' ons-navigation__item--active' if (child.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and child.url in params.navigation.currentPath) }}">
|
|
91
|
-
<a class="ons-navigation__link ons-navigation__link--section" href="{{ child.url }}" {% if child.ariaLabel %}aria-label="{{ child.ariaLabel }}" {% endif %} {% if child.id %}id="{{ child.id }}" {% endif %}>
|
|
107
|
+
<a class="ons-navigation__link ons-navigation__link--section" href="{{ child.url }}" {% if child.ariaLabel %}aria-label="{{ child.ariaLabel }}" {% endif %} {% if child.id %}id="{{ child.id }}" {% endif %}>
|
|
108
|
+
{% if child.title %}{{ child.title }}
|
|
109
|
+
{% elif child.text %}{{ child.text }}
|
|
110
|
+
{% endif %}
|
|
111
|
+
</a>
|
|
92
112
|
</li>
|
|
93
113
|
{% endfor %}
|
|
94
114
|
</ul>
|
|
@@ -71,7 +71,6 @@ const PARAMS = {
|
|
|
71
71
|
};
|
|
72
72
|
|
|
73
73
|
const SITE_SEARCH_AUTOSUGGEST = {
|
|
74
|
-
label: 'Search the design system',
|
|
75
74
|
instructions:
|
|
76
75
|
"Use up and down keys to navigate results once you've typed more than two characters. Use the enter key to select a result. Touch device users, explore by touch or with swipe gestures.",
|
|
77
76
|
ariaYouHaveSelected: 'You have selected',
|
|
@@ -122,20 +121,25 @@ describe('macro: navigation', () => {
|
|
|
122
121
|
navigation: PARAMS,
|
|
123
122
|
siteSearchAutosuggest: {
|
|
124
123
|
...SITE_SEARCH_AUTOSUGGEST,
|
|
124
|
+
input: {
|
|
125
|
+
label: 'Search the design system',
|
|
126
|
+
},
|
|
125
127
|
},
|
|
126
128
|
});
|
|
127
129
|
|
|
128
130
|
expect(autosuggestSpy.occurrences[0]).toEqual({
|
|
129
131
|
...SITE_SEARCH_AUTOSUGGEST,
|
|
130
|
-
accessiblePlaceholder: true,
|
|
131
|
-
autocomplete: 'off',
|
|
132
132
|
id: 'ons-site-search',
|
|
133
133
|
containerClasses: 'ons-autosuggest--header',
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
classes: 'ons-
|
|
134
|
+
input: {
|
|
135
|
+
accessiblePlaceholder: true,
|
|
136
|
+
autocomplete: 'off',
|
|
137
|
+
label: 'Search the design system',
|
|
138
|
+
classes: 'ons-input-search ons-input-search--icon',
|
|
139
|
+
label: {
|
|
140
|
+
id: 'ons-site-search-label',
|
|
141
|
+
classes: 'ons-u-pl-m ons-label--white',
|
|
142
|
+
},
|
|
139
143
|
},
|
|
140
144
|
});
|
|
141
145
|
});
|
|
@@ -157,21 +161,21 @@ describe('macro: navigation', () => {
|
|
|
157
161
|
it('has the correct link href for each list item', () => {
|
|
158
162
|
const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));
|
|
159
163
|
|
|
160
|
-
const values = mapAll($('.ons-navigation--main .ons-navigation__link'), node => node.attr('href'));
|
|
164
|
+
const values = mapAll($('.ons-navigation--main .ons-navigation__link'), (node) => node.attr('href'));
|
|
161
165
|
expect(values).toEqual(['#0', '#1']);
|
|
162
166
|
});
|
|
163
167
|
|
|
164
168
|
it('has the correct link text for each list item', () => {
|
|
165
169
|
const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));
|
|
166
170
|
|
|
167
|
-
const values = mapAll($('.ons-navigation--main .ons-navigation__link'), node => node.text().trim());
|
|
171
|
+
const values = mapAll($('.ons-navigation--main .ons-navigation__link'), (node) => node.text().trim());
|
|
168
172
|
expect(values).toEqual(['Main nav item 1', 'Main nav item 2']);
|
|
169
173
|
});
|
|
170
174
|
|
|
171
175
|
it('has the correct aria-label for each list item', () => {
|
|
172
176
|
const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));
|
|
173
177
|
|
|
174
|
-
const values = mapAll($('.ons-navigation--main .ons-navigation__link'), node => node.attr('aria-label'));
|
|
178
|
+
const values = mapAll($('.ons-navigation--main .ons-navigation__link'), (node) => node.attr('aria-label'));
|
|
175
179
|
expect(values).toEqual(['Main nav ariaLabel 1', 'Main nav ariaLabel 2']);
|
|
176
180
|
});
|
|
177
181
|
|
|
@@ -249,21 +253,21 @@ describe('macro: navigation', () => {
|
|
|
249
253
|
it('has the correct link href for each list item', () => {
|
|
250
254
|
const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));
|
|
251
255
|
|
|
252
|
-
const values = mapAll($('.ons-navigation--sub .ons-navigation__link'), node => node.attr('href'));
|
|
256
|
+
const values = mapAll($('.ons-navigation--sub .ons-navigation__link'), (node) => node.attr('href'));
|
|
253
257
|
expect(values).toEqual(['/sub-item-1', '/sub-item-2']);
|
|
254
258
|
});
|
|
255
259
|
|
|
256
260
|
it('has the correct link text for each list item', () => {
|
|
257
261
|
const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));
|
|
258
262
|
|
|
259
|
-
const values = mapAll($('.ons-navigation--sub .ons-navigation__link'), node => node.text().trim());
|
|
263
|
+
const values = mapAll($('.ons-navigation--sub .ons-navigation__link'), (node) => node.text().trim());
|
|
260
264
|
expect(values).toEqual(['Sub nav item 1', 'Sub nav item 2']);
|
|
261
265
|
});
|
|
262
266
|
|
|
263
267
|
it('has the correct aria-label for each list item', () => {
|
|
264
268
|
const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));
|
|
265
269
|
|
|
266
|
-
const values = mapAll($('.ons-navigation--sub .ons-navigation__link'), node => node.attr('aria-label'));
|
|
270
|
+
const values = mapAll($('.ons-navigation--sub .ons-navigation__link'), (node) => node.attr('aria-label'));
|
|
267
271
|
expect(values).toEqual(['Sub nav ariaLabel 1', 'Sub nav ariaLabel 2']);
|
|
268
272
|
});
|
|
269
273
|
|
|
@@ -322,7 +326,7 @@ describe('macro: navigation', () => {
|
|
|
322
326
|
|
|
323
327
|
const values = mapAll(
|
|
324
328
|
$('.ons-navigation__list--parent > li a').not('.ons-navigation__list--parent li .ons-navigation__list--child a'),
|
|
325
|
-
node => node.attr('href'),
|
|
329
|
+
(node) => node.attr('href'),
|
|
326
330
|
);
|
|
327
331
|
expect(values).toEqual(['#overview', '/sub-item-1', '/sub-item-2']);
|
|
328
332
|
});
|
|
@@ -332,7 +336,7 @@ describe('macro: navigation', () => {
|
|
|
332
336
|
|
|
333
337
|
const values = mapAll(
|
|
334
338
|
$('.ons-navigation__list--parent > li a').not('.ons-navigation__list--parent li .ons-navigation__list--child a'),
|
|
335
|
-
node => node.text().trim(),
|
|
339
|
+
(node) => node.text().trim(),
|
|
336
340
|
);
|
|
337
341
|
expect(values).toEqual(['Overview', 'Sub nav item 1', 'Sub nav item 2']);
|
|
338
342
|
});
|
|
@@ -364,14 +368,14 @@ describe('macro: navigation', () => {
|
|
|
364
368
|
it('has the correct link href for each child list item', () => {
|
|
365
369
|
const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));
|
|
366
370
|
|
|
367
|
-
const values = mapAll($('.ons-navigation__list--child > li a'), node => node.attr('href'));
|
|
371
|
+
const values = mapAll($('.ons-navigation__list--child > li a'), (node) => node.attr('href'));
|
|
368
372
|
expect(values).toEqual(['/sub-item-2/child-item-1', '/sub-item-2/child-item-2']);
|
|
369
373
|
});
|
|
370
374
|
|
|
371
375
|
it('has the correct link text for each child list item', () => {
|
|
372
376
|
const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));
|
|
373
377
|
|
|
374
|
-
const values = mapAll($('.ons-navigation__list--child > li a'), node => node.text().trim());
|
|
378
|
+
const values = mapAll($('.ons-navigation__list--child > li a'), (node) => node.text().trim());
|
|
375
379
|
expect(values).toEqual(['Child item 1', 'Child item 2']);
|
|
376
380
|
});
|
|
377
381
|
|