@ons/design-system 60.0.1 → 60.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/autosuggest.ui.js +2 -1
- package/components/button/_button.scss +53 -25
- package/components/checkboxes/_checkbox-macro.njk +0 -1
- package/components/checkboxes/_checkbox-macro.spec.js +0 -2
- package/components/checkboxes/_checkbox.scss +0 -6
- package/components/checkboxes/_macro.njk +1 -1
- package/components/download-resources/download-resources.js +11 -19
- package/components/download-resources/download-resources.spec.js +172 -232
- package/components/input/_macro.njk +0 -1
- package/components/input/_macro.spec.js +0 -17
- package/components/pagination/_pagination.scss +10 -2
- package/components/radios/_macro.njk +2 -3
- package/components/radios/_macro.spec.js +0 -2
- package/components/summary/_summary.scss +2 -2
- package/components/tabs/tabs.js +3 -2
- package/components/tabs/tabs.spec.js +67 -1
- package/css/main.css +2 -2
- package/css/print.css +1 -1
- package/package.json +2 -1
- package/scripts/main.es5.js +1 -1
- package/scripts/main.js +1 -1
- package/scss/patternlib.scss +1 -15
- package/scss/print.scss +18 -14
- package/css/error.css +0 -1
- package/scss/error.scss +0 -27
|
@@ -4,193 +4,181 @@ import { setViewport } from '../../tests/helpers/puppeteer';
|
|
|
4
4
|
import { renderComponent, renderTemplate, setTestPage } from '../../tests/helpers/rendering';
|
|
5
5
|
|
|
6
6
|
const EXAMPLE_PAGE = `
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
'aria-label': 'Toggle filters',
|
|
27
|
-
'aria-expanded': 'false',
|
|
28
|
-
'aria-controls': 'filter-panel',
|
|
29
|
-
})}
|
|
30
|
-
|
|
31
|
-
<div class="ons-adv-filter__panel ons-js-adv-filter__panel" id="filter-panel">
|
|
32
|
-
<h2>Filters</h2>
|
|
33
|
-
<form class="ons-js-adv-filter__form" method="POST">
|
|
34
|
-
${renderComponent('button', {
|
|
35
|
-
type: 'reset',
|
|
36
|
-
text: 'Reset all filters',
|
|
37
|
-
classes: 'ons-adv-filter__reset ons-js-adv-filter__reset',
|
|
38
|
-
})}
|
|
39
|
-
|
|
40
|
-
<div class="ons-adv-filter__item ons-js-adv-filter__item" data-default-text="All audiences" data-multi-select-text="{n} filters selected">
|
|
41
|
-
<fieldset class="ons-fieldset" aria-controls="adv-filter-gallery">
|
|
42
|
-
<legend class="ons-fieldset__legend">Audience</legend>
|
|
43
|
-
<div class="ons-adv-filter__selection">
|
|
44
|
-
<span>Active filters: </span>
|
|
45
|
-
<span class="ons-js-adv-filter__selection">All audiences</span>
|
|
46
|
-
</div>
|
|
47
|
-
${renderComponent('checkboxes', {
|
|
48
|
-
dontWrap: 'true',
|
|
49
|
-
legend: 'Audience',
|
|
50
|
-
name: 'audience',
|
|
51
|
-
checkboxes: [
|
|
52
|
-
{
|
|
53
|
-
classes: 'ons-checkbox--toggle',
|
|
54
|
-
id: 'community-groups',
|
|
55
|
-
label: {
|
|
56
|
-
text: 'Community groups',
|
|
57
|
-
},
|
|
58
|
-
value: 'community-groups',
|
|
59
|
-
attributes: {
|
|
60
|
-
'data-filter': 'community-groups',
|
|
61
|
-
},
|
|
62
|
-
},
|
|
63
|
-
{
|
|
64
|
-
classes: 'ons-checkbox--toggle',
|
|
65
|
-
id: 'general-public',
|
|
66
|
-
label: {
|
|
67
|
-
text: 'General public',
|
|
68
|
-
},
|
|
69
|
-
value: 'general-public',
|
|
70
|
-
attributes: {
|
|
71
|
-
'data-filter': 'general-public',
|
|
72
|
-
},
|
|
73
|
-
},
|
|
74
|
-
],
|
|
75
|
-
})}
|
|
76
|
-
</fieldset>
|
|
77
|
-
</div>
|
|
7
|
+
<div class="ons-page">
|
|
8
|
+
<div class="ons-js-adv-filter">
|
|
9
|
+
<div class="ons-js-adv-filter__wrap">
|
|
10
|
+
${renderComponent('button', {
|
|
11
|
+
type: 'button',
|
|
12
|
+
text: 'Show filters',
|
|
13
|
+
classes: 'ons-adv-filter__trigger ons-js-adv-filter__trigger',
|
|
14
|
+
'aria-expanded': 'false',
|
|
15
|
+
'aria-controls': 'filter-panel',
|
|
16
|
+
})}
|
|
17
|
+
|
|
18
|
+
<div class="ons-adv-filter__panel ons-js-adv-filter__panel" id="filter-panel">
|
|
19
|
+
<h2>Filters</h2>
|
|
20
|
+
<form class="ons-js-adv-filter__form" method="POST">
|
|
21
|
+
${renderComponent('button', {
|
|
22
|
+
type: 'reset',
|
|
23
|
+
text: 'Reset all filters',
|
|
24
|
+
classes: 'ons-adv-filter__reset ons-js-adv-filter__reset',
|
|
25
|
+
})}
|
|
78
26
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
27
|
+
<div class="ons-adv-filter__item ons-js-adv-filter__item" data-default-text="All audiences" data-multi-select-text="{n} filters selected">
|
|
28
|
+
<fieldset class="ons-fieldset" aria-controls="adv-filter-gallery">
|
|
29
|
+
<legend class="ons-fieldset__legend">Audience</legend>
|
|
30
|
+
<div class="ons-adv-filter__selection">
|
|
31
|
+
<span>Active filters: </span>
|
|
32
|
+
<span class="ons-js-adv-filter__selection">All audiences</span>
|
|
33
|
+
</div>
|
|
34
|
+
${renderComponent('checkboxes', {
|
|
35
|
+
dontWrap: 'true',
|
|
36
|
+
legend: 'Audience',
|
|
37
|
+
name: 'audience',
|
|
38
|
+
checkboxes: [
|
|
39
|
+
{
|
|
40
|
+
classes: 'ons-checkbox--toggle',
|
|
41
|
+
id: 'community-groups',
|
|
42
|
+
label: {
|
|
43
|
+
text: 'Community groups',
|
|
44
|
+
},
|
|
45
|
+
value: 'community-groups',
|
|
46
|
+
attributes: {
|
|
47
|
+
'data-filter': 'community-groups',
|
|
48
|
+
},
|
|
96
49
|
},
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
50
|
+
{
|
|
51
|
+
classes: 'ons-checkbox--toggle',
|
|
52
|
+
id: 'general-public',
|
|
53
|
+
label: {
|
|
54
|
+
text: 'General public',
|
|
55
|
+
},
|
|
56
|
+
value: 'general-public',
|
|
57
|
+
attributes: {
|
|
58
|
+
'data-filter': 'general-public',
|
|
59
|
+
},
|
|
100
60
|
},
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
61
|
+
],
|
|
62
|
+
})}
|
|
63
|
+
</fieldset>
|
|
64
|
+
</div>
|
|
65
|
+
|
|
66
|
+
<div class="ons-adv-filter__item ons-js-adv-filter__item" data-default-text="All types" data-multi-select-text="{n} filters selected">
|
|
67
|
+
<fieldset class="ons-fieldset" aria-controls="adv-filter-gallery">
|
|
68
|
+
<legend class="ons-fieldset__legend">Type</legend>
|
|
69
|
+
<div class="ons-adv-filter__selection">
|
|
70
|
+
<span>Active filters: </span>
|
|
71
|
+
<span class="ons-js-adv-filter__selection">All types</span>
|
|
72
|
+
</div>
|
|
73
|
+
${renderComponent('checkboxes', {
|
|
74
|
+
dontWrap: 'true',
|
|
75
|
+
legend: 'Type',
|
|
76
|
+
name: 'type',
|
|
77
|
+
checkboxes: [
|
|
78
|
+
{
|
|
79
|
+
classes: 'ons-checkbox--toggle',
|
|
80
|
+
id: 'booklet',
|
|
81
|
+
label: {
|
|
82
|
+
text: 'Booklet',
|
|
83
|
+
},
|
|
84
|
+
value: 'booklet',
|
|
85
|
+
attributes: {
|
|
86
|
+
'data-filter': 'booklet',
|
|
87
|
+
},
|
|
107
88
|
},
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
89
|
+
{
|
|
90
|
+
classes: 'ons-checkbox--toggle',
|
|
91
|
+
id: 'logo',
|
|
92
|
+
label: {
|
|
93
|
+
text: 'Logo',
|
|
94
|
+
},
|
|
95
|
+
value: 'logo',
|
|
96
|
+
attributes: {
|
|
97
|
+
'data-filter': 'logo',
|
|
98
|
+
},
|
|
111
99
|
},
|
|
112
|
-
|
|
113
|
-
|
|
100
|
+
],
|
|
101
|
+
})}
|
|
102
|
+
</fieldset>
|
|
103
|
+
</div>
|
|
104
|
+
|
|
105
|
+
<div class="ons-adv-filter__actions">
|
|
106
|
+
${renderComponent('button', {
|
|
107
|
+
type: 'button',
|
|
108
|
+
html: 'Show (<span class="ons-js-adv-filter__show-results">7</span> results',
|
|
109
|
+
classes: 'ons-js-adv-filter__show',
|
|
110
|
+
})}
|
|
111
|
+
${renderComponent('button', {
|
|
112
|
+
type: 'button',
|
|
113
|
+
html: 'Close',
|
|
114
|
+
classes: 'ons-js-adv-filter__close',
|
|
114
115
|
})}
|
|
115
|
-
</
|
|
116
|
+
</div>
|
|
117
|
+
</form>
|
|
116
118
|
</div>
|
|
117
|
-
|
|
118
|
-
<div class="ons-adv-filter__actions">
|
|
119
|
-
${renderComponent('button', {
|
|
120
|
-
type: 'button',
|
|
121
|
-
html: 'Show (<span class="ons-js-adv-filter__show-results">7</span> results',
|
|
122
|
-
classes: 'ons-js-adv-filter__show',
|
|
123
|
-
})}
|
|
124
|
-
${renderComponent('button', {
|
|
125
|
-
type: 'button',
|
|
126
|
-
html: 'Close',
|
|
127
|
-
classes: 'ons-js-adv-filter__close',
|
|
128
|
-
})}
|
|
129
119
|
</div>
|
|
130
|
-
</form>
|
|
131
|
-
</div>
|
|
132
120
|
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
121
|
+
<div class="ons-adv-filter__results-options">
|
|
122
|
+
<div class="ons-adv-filter__results-count">
|
|
123
|
+
<span class="ons-js-adv-filter__results-count">9</span> results of 150
|
|
124
|
+
</div>
|
|
137
125
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
126
|
+
<div class="ons-adv-filter__results-sort">
|
|
127
|
+
<label class="ons-label" for="sort">Sort by</label>
|
|
128
|
+
<select class="ons-input ons-input--select" id="sort" name="sort" aria-controls="adv-filter-gallery" data-sort="true">
|
|
129
|
+
<option value="index" data-sort-number="true">Latest</option>
|
|
130
|
+
<option value="index" data-sort-order="desc" data-sort-number="true">Oldest</option>
|
|
131
|
+
</select>
|
|
132
|
+
</div>
|
|
144
133
|
</div>
|
|
145
|
-
</div>
|
|
146
134
|
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
},
|
|
153
|
-
documents: [
|
|
154
|
-
{
|
|
155
|
-
classes: 'ons-filter__item ons-js-filter__item',
|
|
156
|
-
attributes: {
|
|
157
|
-
'data-filter': 'general-public booklet',
|
|
158
|
-
'data-sort-index': '1',
|
|
159
|
-
},
|
|
160
|
-
url: '/example-booklet-1',
|
|
161
|
-
title: 'Example booklet 1',
|
|
162
|
-
description: 'The first example booklet.',
|
|
135
|
+
${renderComponent('document-list', {
|
|
136
|
+
id: 'adv-filter-gallery',
|
|
137
|
+
classes: 'ons-adv-filter__gallery ons-js-adv-filter__gallery',
|
|
138
|
+
attributes: {
|
|
139
|
+
'data-filter-animation': 'off',
|
|
163
140
|
},
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
141
|
+
documents: [
|
|
142
|
+
{
|
|
143
|
+
classes: 'ons-filter__item ons-js-filter__item',
|
|
144
|
+
attributes: {
|
|
145
|
+
'data-filter': 'general-public booklet',
|
|
146
|
+
'data-sort-index': '1',
|
|
147
|
+
},
|
|
148
|
+
url: '/example-booklet-1',
|
|
149
|
+
title: 'Example booklet 1',
|
|
150
|
+
description: 'The first example booklet.',
|
|
169
151
|
},
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
152
|
+
{
|
|
153
|
+
classes: 'ons-filter__item ons-js-filter__item',
|
|
154
|
+
attributes: {
|
|
155
|
+
'data-filter': 'general-public booklet logo',
|
|
156
|
+
'data-sort-index': '2',
|
|
157
|
+
},
|
|
158
|
+
url: '/example-booklet-2',
|
|
159
|
+
title: 'Example booklet 2 with logo',
|
|
160
|
+
description: 'The second example booklet with a logo.',
|
|
179
161
|
},
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
162
|
+
{
|
|
163
|
+
classes: 'ons-filter__item ons-js-filter__item',
|
|
164
|
+
attributes: {
|
|
165
|
+
'data-filter': 'logo',
|
|
166
|
+
'data-sort-index': '3',
|
|
167
|
+
},
|
|
168
|
+
url: '/example-logo',
|
|
169
|
+
title: 'Example logo',
|
|
170
|
+
description: 'An example logo.',
|
|
171
|
+
},
|
|
172
|
+
],
|
|
173
|
+
})}
|
|
186
174
|
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
175
|
+
<div class="ons-adv-filter__no-results" data-fallback-gallery-id="adv-filter-gallery">
|
|
176
|
+
<h2>No results found</h2>
|
|
177
|
+
<p>Try selecting different filters to get results.</p>
|
|
178
|
+
</div>
|
|
190
179
|
</div>
|
|
191
180
|
</div>
|
|
192
|
-
|
|
193
|
-
`;
|
|
181
|
+
`;
|
|
194
182
|
|
|
195
183
|
const RENDERED_EXAMPLE_PAGE = renderTemplate(EXAMPLE_PAGE);
|
|
196
184
|
|
|
@@ -523,27 +511,11 @@ describe('script: download-resources', () => {
|
|
|
523
511
|
it('hides the underlying page elements when the "Show filters" button is pressed', async () => {
|
|
524
512
|
await page.click('.ons-js-adv-filter__trigger');
|
|
525
513
|
|
|
526
|
-
const
|
|
527
|
-
const
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
const isHeaderAriaHidden = await page.$eval('.ons-header', node => node.getAttribute('aria-hidden'));
|
|
532
|
-
const isFooterHiddenClass = await page.$eval('.ons-footer', node => node.classList.contains('ons-u-d-no'));
|
|
533
|
-
const isFooterAriaHidden = await page.$eval('.ons-footer', node => node.getAttribute('aria-hidden'));
|
|
534
|
-
const isBreadcrumbsHiddenClass = await page.$eval('.ons-breadcrumb', node => node.classList.contains('ons-u-d-no'));
|
|
535
|
-
const isBreadcrumbsAriaHidden = await page.$eval('.ons-breadcrumb', node => node.getAttribute('aria-hidden'));
|
|
536
|
-
|
|
537
|
-
expect(isListHiddenClass).toBe(true);
|
|
538
|
-
expect(isListAriaHidden).toBe('true');
|
|
539
|
-
expect(isOptionsHiddenClass).toBe(true);
|
|
540
|
-
expect(isOptionsAriaHidden).toBe('true');
|
|
541
|
-
expect(isHeaderHiddenClass).toBe(true);
|
|
542
|
-
expect(isHeaderAriaHidden).toBe('true');
|
|
543
|
-
expect(isFooterHiddenClass).toBe(true);
|
|
544
|
-
expect(isFooterAriaHidden).toBe('true');
|
|
545
|
-
expect(isBreadcrumbsHiddenClass).toBe(true);
|
|
546
|
-
expect(isBreadcrumbsAriaHidden).toBe('true');
|
|
514
|
+
const pageIsHidden = await page.$eval('.ons-page', node => node.classList.contains('ons-u-d-no'));
|
|
515
|
+
const pageIsAriaHidden = await page.$eval('.ons-page', node => node.getAttribute('aria-hidden'));
|
|
516
|
+
|
|
517
|
+
expect(pageIsHidden).toBe(true);
|
|
518
|
+
expect(pageIsAriaHidden).toBe('true');
|
|
547
519
|
});
|
|
548
520
|
|
|
549
521
|
it('hides filter elements when the "Show (n results)" button is pressed', async () => {
|
|
@@ -558,27 +530,11 @@ describe('script: download-resources', () => {
|
|
|
558
530
|
await page.click('.ons-js-adv-filter__trigger');
|
|
559
531
|
await page.click('.ons-js-adv-filter__show');
|
|
560
532
|
|
|
561
|
-
const
|
|
562
|
-
const
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
const isHeaderAriaHidden = await page.$eval('.ons-header', node => node.getAttribute('aria-hidden'));
|
|
567
|
-
const isFooterHiddenClass = await page.$eval('.ons-footer', node => node.classList.contains('ons-u-d-no'));
|
|
568
|
-
const isFooterAriaHidden = await page.$eval('.ons-footer', node => node.getAttribute('aria-hidden'));
|
|
569
|
-
const isBreadcrumbsHiddenClass = await page.$eval('.ons-breadcrumb', node => node.classList.contains('ons-u-d-no'));
|
|
570
|
-
const isBreadcrumbsAriaHidden = await page.$eval('.ons-breadcrumb', node => node.getAttribute('aria-hidden'));
|
|
571
|
-
|
|
572
|
-
expect(isListHiddenClass).toBe(false);
|
|
573
|
-
expect(isListAriaHidden).toBe('false');
|
|
574
|
-
expect(isOptionsHiddenClass).toBe(false);
|
|
575
|
-
expect(isOptionsAriaHidden).toBe('false');
|
|
576
|
-
expect(isHeaderHiddenClass).toBe(false);
|
|
577
|
-
expect(isHeaderAriaHidden).toBe('false');
|
|
578
|
-
expect(isFooterHiddenClass).toBe(false);
|
|
579
|
-
expect(isFooterAriaHidden).toBe('false');
|
|
580
|
-
expect(isBreadcrumbsHiddenClass).toBe(false);
|
|
581
|
-
expect(isBreadcrumbsAriaHidden).toBe('false');
|
|
533
|
+
const pageIsHidden = await page.$eval('.ons-page', node => node.classList.contains('ons-u-d-no'));
|
|
534
|
+
const pageIsAriaHidden = await page.$eval('.ons-page', node => node.getAttribute('aria-hidden'));
|
|
535
|
+
|
|
536
|
+
expect(pageIsHidden).toBe(false);
|
|
537
|
+
expect(pageIsAriaHidden).toBe('false');
|
|
582
538
|
});
|
|
583
539
|
|
|
584
540
|
it('hides filter elements when the "Close" button is pressed', async () => {
|
|
@@ -593,27 +549,11 @@ describe('script: download-resources', () => {
|
|
|
593
549
|
await page.click('.ons-js-adv-filter__trigger');
|
|
594
550
|
await page.click('.ons-js-adv-filter__close');
|
|
595
551
|
|
|
596
|
-
const
|
|
597
|
-
const
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
const isHeaderAriaHidden = await page.$eval('.ons-header', node => node.getAttribute('aria-hidden'));
|
|
602
|
-
const isFooterHiddenClass = await page.$eval('.ons-footer', node => node.classList.contains('ons-u-d-no'));
|
|
603
|
-
const isFooterAriaHidden = await page.$eval('.ons-footer', node => node.getAttribute('aria-hidden'));
|
|
604
|
-
const isBreadcrumbsHiddenClass = await page.$eval('.ons-breadcrumb', node => node.classList.contains('ons-u-d-no'));
|
|
605
|
-
const isBreadcrumbsAriaHidden = await page.$eval('.ons-breadcrumb', node => node.getAttribute('aria-hidden'));
|
|
606
|
-
|
|
607
|
-
expect(isListHiddenClass).toBe(false);
|
|
608
|
-
expect(isListAriaHidden).toBe('false');
|
|
609
|
-
expect(isOptionsHiddenClass).toBe(false);
|
|
610
|
-
expect(isOptionsAriaHidden).toBe('false');
|
|
611
|
-
expect(isHeaderHiddenClass).toBe(false);
|
|
612
|
-
expect(isHeaderAriaHidden).toBe('false');
|
|
613
|
-
expect(isFooterHiddenClass).toBe(false);
|
|
614
|
-
expect(isFooterAriaHidden).toBe('false');
|
|
615
|
-
expect(isBreadcrumbsHiddenClass).toBe(false);
|
|
616
|
-
expect(isBreadcrumbsAriaHidden).toBe('false');
|
|
552
|
+
const pageIsHidden = await page.$eval('.ons-page', node => node.classList.contains('ons-u-d-no'));
|
|
553
|
+
const pageIsAriaHidden = await page.$eval('.ons-page', node => node.getAttribute('aria-hidden'));
|
|
554
|
+
|
|
555
|
+
expect(pageIsHidden).toBe(false);
|
|
556
|
+
expect(pageIsAriaHidden).toBe('false');
|
|
617
557
|
});
|
|
618
558
|
});
|
|
619
559
|
});
|
|
@@ -43,7 +43,6 @@
|
|
|
43
43
|
{% if params.charCheckLimit and params.charCheckLimit.charcheckCountdown %}data-char-check-countdown="true"{% endif %}
|
|
44
44
|
{% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
|
|
45
45
|
{% if params.label and params.label.description %}{% if params.label.id %}aria-describedby="{{ params.label.id }}-description-hint"{% else %}aria-describedby="description-hint"{% endif %}{% endif %}
|
|
46
|
-
{% if params.required == true %}required="required"{% endif %}
|
|
47
46
|
/>
|
|
48
47
|
{% if params.listeners %}
|
|
49
48
|
<script{% if csp_nonce %} nonce="{{ csp_nonce() }}"{% endif %}>
|
|
@@ -245,23 +245,6 @@ describe('macro: input', () => {
|
|
|
245
245
|
expect($('.ons-input').attr('autocomplete')).toBe('on');
|
|
246
246
|
});
|
|
247
247
|
|
|
248
|
-
it('does not have `required` attribute', () => {
|
|
249
|
-
const $ = cheerio.load(renderComponent('input', EXAMPLE_INPUT_MINIMAL));
|
|
250
|
-
|
|
251
|
-
expect($('.ons-input').attr('required')).toBeUndefined();
|
|
252
|
-
});
|
|
253
|
-
|
|
254
|
-
it('has `required` attribute when `required` is provided', () => {
|
|
255
|
-
const $ = cheerio.load(
|
|
256
|
-
renderComponent('input', {
|
|
257
|
-
...EXAMPLE_INPUT_MINIMAL,
|
|
258
|
-
required: true,
|
|
259
|
-
}),
|
|
260
|
-
);
|
|
261
|
-
|
|
262
|
-
expect($('.ons-input').attr('required')).toBe('required');
|
|
263
|
-
});
|
|
264
|
-
|
|
265
248
|
it.each([['email'], ['tel'], ['text']])('outputs `type` attribute of "%s"', type => {
|
|
266
249
|
const $ = cheerio.load(
|
|
267
250
|
renderComponent('input', {
|
|
@@ -2,7 +2,9 @@ $pagination-item-padding: 0.5rem;
|
|
|
2
2
|
$pagination-item-width: 2.5rem;
|
|
3
3
|
|
|
4
4
|
.ons-pagination {
|
|
5
|
-
|
|
5
|
+
&__position {
|
|
6
|
+
margin: 0 0 0.4rem;
|
|
7
|
+
}
|
|
6
8
|
|
|
7
9
|
&__items {
|
|
8
10
|
margin: 0 $pagination-item-padding * -1;
|
|
@@ -25,6 +27,12 @@ $pagination-item-width: 2.5rem;
|
|
|
25
27
|
}
|
|
26
28
|
}
|
|
27
29
|
|
|
30
|
+
&__items > & {
|
|
31
|
+
&__item--current {
|
|
32
|
+
margin: 0 0 0 $pagination-item-padding;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
28
36
|
&__item,
|
|
29
37
|
&__link {
|
|
30
38
|
height: $pagination-item-width;
|
|
@@ -43,7 +51,7 @@ $pagination-item-width: 2.5rem;
|
|
|
43
51
|
}
|
|
44
52
|
|
|
45
53
|
&__item--current &__link {
|
|
46
|
-
background: var(--ons-color-text-link-
|
|
54
|
+
background: var(--ons-color-text-link-active);
|
|
47
55
|
color: var(--ons-color-white);
|
|
48
56
|
outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show backgrounds
|
|
49
57
|
text-decoration: none;
|
|
@@ -53,8 +53,7 @@
|
|
|
53
53
|
"id": radio.other.id,
|
|
54
54
|
"name": radio.other.name,
|
|
55
55
|
"type": radio.other.type,
|
|
56
|
-
"
|
|
57
|
-
"classes": ("ons-input--error " if params.error else "") + radio.other.classes | default(''),
|
|
56
|
+
"classes": ("ons-input--error " if params.error and radio.checked else "") + radio.other.classes | default(''),
|
|
58
57
|
"width": radio.other.width | default('auto'),
|
|
59
58
|
"attributes": radio.other.attributes,
|
|
60
59
|
"label": {
|
|
@@ -73,7 +72,7 @@
|
|
|
73
72
|
"id": radio.other.id,
|
|
74
73
|
"name": radio.other.name,
|
|
75
74
|
"options": radio.other.options,
|
|
76
|
-
"classes": ("ons-input--error " if params.error else "") + radio.other.classes | default(''),
|
|
75
|
+
"classes": ("ons-input--error " if params.error and radio.checked else "") + radio.other.classes | default(''),
|
|
77
76
|
"label": {
|
|
78
77
|
"id": radio.other.id + "-label",
|
|
79
78
|
"text": radio.other.label.text,
|
|
@@ -35,7 +35,6 @@ const EXAMPLE_RADIO_ITEM_INPUT = {
|
|
|
35
35
|
label: {
|
|
36
36
|
text: 'Enter your own answer',
|
|
37
37
|
},
|
|
38
|
-
required: false,
|
|
39
38
|
classes: 'extra-textbox-class',
|
|
40
39
|
width: 42,
|
|
41
40
|
value: '42',
|
|
@@ -462,7 +461,6 @@ describe('macro: radios', () => {
|
|
|
462
461
|
text: 'Enter your own answer',
|
|
463
462
|
classes: 'ons-u-fw-n',
|
|
464
463
|
},
|
|
465
|
-
required: false,
|
|
466
464
|
classes: 'extra-textbox-class',
|
|
467
465
|
width: 42,
|
|
468
466
|
attributes: EXAMPLE_RADIO_ITEM_INPUT.other.attributes,
|
package/components/tabs/tabs.js
CHANGED
|
@@ -81,8 +81,9 @@ export default class Tabs {
|
|
|
81
81
|
this.hideTab(tab);
|
|
82
82
|
});
|
|
83
83
|
|
|
84
|
-
|
|
85
|
-
|
|
84
|
+
const hashTab = this.getTab(window.location.hash);
|
|
85
|
+
if (!this.noInitialActiveTab || !!hashTab) {
|
|
86
|
+
const activeTab = hashTab || this.tabs[0];
|
|
86
87
|
this.showTab(activeTab);
|
|
87
88
|
}
|
|
88
89
|
|