@ons/design-system 60.0.0 → 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/footer/_macro.njk +11 -18
- package/components/footer/_macro.spec.js +6 -6
- package/components/hero/_macro.njk +8 -4
- package/components/hero/_macro.spec.js +8 -1
- 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
|
});
|
|
@@ -157,22 +157,14 @@
|
|
|
157
157
|
{% endif %}
|
|
158
158
|
</div>
|
|
159
159
|
{% endif %}
|
|
160
|
+
{% if not params.poweredBy %}
|
|
161
|
+
<div class="ons-footer__poweredby ons-u-mb-m">
|
|
162
|
+
{{ onsLogo | safe }}
|
|
163
|
+
</div>
|
|
164
|
+
{% endif %}
|
|
160
165
|
</div>
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
<div class="ons-grid ons-grid--flex ons-grid--vertical-bottom ons-grid--between ons-footer__poweredby">
|
|
164
|
-
{% if params.poweredBy %}
|
|
165
|
-
{{ params.poweredBy | safe }}
|
|
166
|
-
{% else %}
|
|
167
|
-
<div class="ons-grid__col ons-u-mb-m">
|
|
168
|
-
{{ onsLogo | safe }}
|
|
169
|
-
</div>
|
|
170
|
-
{% endif %}
|
|
171
|
-
</div>
|
|
172
|
-
|
|
173
|
-
{% if params.crest %}
|
|
174
|
-
<!-- Crest -->
|
|
175
|
-
<div class="ons-grid ons-grid--flex ons-grid--vertical-bottom ons-grid--between">
|
|
166
|
+
{% if params.crest %}
|
|
167
|
+
<!-- Crest -->
|
|
176
168
|
<div class="ons-grid__col ons-footer__crest ons-u-mb-m@xxs@l">
|
|
177
169
|
{{
|
|
178
170
|
onsIcon({
|
|
@@ -180,10 +172,11 @@
|
|
|
180
172
|
})
|
|
181
173
|
}}
|
|
182
174
|
</div>
|
|
183
|
-
|
|
184
|
-
|
|
175
|
+
{% endif %}
|
|
176
|
+
</div>
|
|
177
|
+
{% if params.poweredBy %}
|
|
178
|
+
{{ params.poweredBy | safe }}
|
|
185
179
|
{% endif %}
|
|
186
|
-
|
|
187
180
|
{% if params.copyrightDeclaration %}
|
|
188
181
|
<!-- Copyright -->
|
|
189
182
|
<div class="ons-grid ons-grid--flex ons-grid--vertical-bottom ons-grid--between">
|
|
@@ -416,28 +416,28 @@ describe('macro: footer', () => {
|
|
|
416
416
|
[
|
|
417
417
|
'the `poweredBy` and `OGLLink` parameters are provided',
|
|
418
418
|
{
|
|
419
|
-
poweredBy: '<img src="logo.svg" alt="logo">',
|
|
419
|
+
poweredBy: '<img src="logo.svg" class="custom-logo" alt="logo">',
|
|
420
420
|
OGLLink: EXAMPLE_OGL_LINK_PARAM,
|
|
421
421
|
},
|
|
422
422
|
],
|
|
423
423
|
[
|
|
424
424
|
'the `poweredBy` and `legal` parameters are provided',
|
|
425
425
|
{
|
|
426
|
-
poweredBy: '<img src="logo.svg" alt="logo">',
|
|
426
|
+
poweredBy: '<img src="logo.svg" class="custom-logo" alt="logo">',
|
|
427
427
|
legal: EXAMPLE_LEGAL_PARAM,
|
|
428
428
|
},
|
|
429
429
|
],
|
|
430
430
|
[
|
|
431
431
|
'the `poweredBy` and `crest` parameters are provided',
|
|
432
432
|
{
|
|
433
|
-
poweredBy: '<img src="logo.svg" alt="logo">',
|
|
433
|
+
poweredBy: '<img src="logo.svg" class="custom-logo" alt="logo">',
|
|
434
434
|
crest: true,
|
|
435
435
|
},
|
|
436
436
|
],
|
|
437
437
|
[
|
|
438
438
|
'the `poweredBy`, `legal` and `crest` parameters are provided',
|
|
439
439
|
{
|
|
440
|
-
poweredBy: '<img src="logo.svg" alt="logo">',
|
|
440
|
+
poweredBy: '<img src="logo.svg" class="custom-logo" alt="logo">',
|
|
441
441
|
legal: EXAMPLE_LEGAL_PARAM,
|
|
442
442
|
crest: true,
|
|
443
443
|
},
|
|
@@ -445,7 +445,7 @@ describe('macro: footer', () => {
|
|
|
445
445
|
[
|
|
446
446
|
'the `poweredBy` parameter is provided but the `legal` and `crest` parameters are not provided',
|
|
447
447
|
{
|
|
448
|
-
poweredBy: '<img src="logo.svg" alt="logo">',
|
|
448
|
+
poweredBy: '<img src="logo.svg" class="custom-logo" alt="logo">',
|
|
449
449
|
},
|
|
450
450
|
],
|
|
451
451
|
])('where %s', (_, poweredByParams) => {
|
|
@@ -463,7 +463,7 @@ describe('macro: footer', () => {
|
|
|
463
463
|
it('renders the expected logo', () => {
|
|
464
464
|
const $ = cheerio.load(renderComponent('footer', params));
|
|
465
465
|
|
|
466
|
-
expect($('.
|
|
466
|
+
expect($('.custom-logo').length).toBe(1);
|
|
467
467
|
});
|
|
468
468
|
});
|
|
469
469
|
});
|
|
@@ -36,11 +36,15 @@
|
|
|
36
36
|
})
|
|
37
37
|
}}
|
|
38
38
|
{% endif %}
|
|
39
|
+
{% if caller %}
|
|
40
|
+
<div class="ons-hero__additional-content">
|
|
41
|
+
{{- caller() -}}
|
|
42
|
+
</div>
|
|
43
|
+
{% endif %}
|
|
39
44
|
</div>
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
{{- caller() -}}
|
|
45
|
+
{% if params.html %}
|
|
46
|
+
<div class="ons-hero__additional-html">
|
|
47
|
+
{{- params.html | safe -}}
|
|
44
48
|
</div>
|
|
45
49
|
{% endif %}
|
|
46
50
|
</div>
|
|
@@ -61,6 +61,13 @@ describe('macro: hero', () => {
|
|
|
61
61
|
expect(title).toBe('Hero text');
|
|
62
62
|
});
|
|
63
63
|
|
|
64
|
+
it('has expected `html`', () => {
|
|
65
|
+
const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, html: '<span class="some-html">some html</span>' }));
|
|
66
|
+
|
|
67
|
+
const htmlOutput = $('.ons-hero__additional-html').html();
|
|
68
|
+
expect(htmlOutput).toBe('<span class="some-html">some html</span>');
|
|
69
|
+
});
|
|
70
|
+
|
|
64
71
|
it('outputs the expected button', () => {
|
|
65
72
|
const faker = templateFaker();
|
|
66
73
|
const buttonSpy = faker.spy('button');
|
|
@@ -83,7 +90,7 @@ describe('macro: hero', () => {
|
|
|
83
90
|
it('calls with content', () => {
|
|
84
91
|
const $ = cheerio.load(renderComponent('hero', { EXAMPLE_HERO }, 'Example content...'));
|
|
85
92
|
|
|
86
|
-
const content = $('.ons-hero__additional')
|
|
93
|
+
const content = $('.ons-hero__additional-content')
|
|
87
94
|
.text()
|
|
88
95
|
.trim();
|
|
89
96
|
expect(content).toEqual(expect.stringContaining('Example content...'));
|
|
@@ -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', {
|