@ons/design-system 65.2.2 → 65.2.4

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 (13) hide show
  1. package/components/card/example-card-set-with-lists.njk +6 -6
  2. package/components/checkboxes/_checkbox.scss +0 -2
  3. package/components/download-resources/download-resources.spec.js +37 -36
  4. package/components/navigation/navigation.js +0 -2
  5. package/components/tabs/_macro.njk +2 -2
  6. package/components/tabs/_macro.spec.js +4 -20
  7. package/components/tabs/example-tabs.njk +1 -0
  8. package/components/tabs/tabs.spec.js +52 -44
  9. package/css/main.css +1 -243
  10. package/layout/_template.njk +48 -43
  11. package/package.json +13 -15
  12. package/scripts/main.es5.js +1 -1
  13. package/scripts/main.js +1 -1
package/components/tabs/tabs.spec.js CHANGED
@@ -1,10 +1,12 @@
1
- import puppeteer from 'puppeteer';
2
-
1
+ import { KnownDevices } from 'puppeteer';
3
2
  import { setViewport } from '../../tests/helpers/puppeteer';
4
3
  import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
5
4
 
5
+ const iPhoneX = KnownDevices['iPhone X'];
6
+
6
7
  const EXAMPLE_TABS = {
7
8
  title: 'Example tabs',
9
+ titleClasses: 'ons-u-fs-m',
8
10
  tabs: [
9
11
  {
10
12
  id: 'tab.id.1',
@@ -74,44 +76,50 @@ describe('script: tabs', () => {
74
76
  await setTestPage('/test', renderComponent('tabs', EXAMPLE_TABS));
75
77
  });
76
78
 
79
+ it('has additionally provided `titleClasses`', async () => {
80
+ const hasClass = await page.$eval('.ons-tabs__title', (node) => node.classList.contains('ons-u-fs-m'));
81
+
82
+ expect(hasClass).toBe(true);
83
+ });
84
+
77
85
  it('has the "presentation" role assigned to tab list items', async () => {
78
- const role = await page.$eval('.ons-tab__list-item', node => node.getAttribute('role'));
86
+ const role = await page.$eval('.ons-tab__list-item', (node) => node.getAttribute('role'));
79
87
  expect(role).toBe('presentation');
80
88
  });
81
89
 
82
90
  it('has the "tab" role assigned to each tab', async () => {
83
- const tabRoleValues = await page.$$eval('.ons-tab', nodes => nodes.map(node => node.getAttribute('role')));
91
+ const tabRoleValues = await page.$$eval('.ons-tab', (nodes) => nodes.map((node) => node.getAttribute('role')));
84
92
 
85
93
  expect(tabRoleValues).toEqual(['tab', 'tab', 'tab']);
86
94
  });
87
95
 
88
96
  it('has "aria-controls" assigned to each tab with the corresponding panel id', async () => {
89
- const ariaControlsValues = await page.$$eval('.ons-tab', nodes => nodes.map(node => node.getAttribute('aria-controls')));
97
+ const ariaControlsValues = await page.$$eval('.ons-tab', (nodes) => nodes.map((node) => node.getAttribute('aria-controls')));
90
98
 
91
99
  expect(ariaControlsValues).toEqual(['tab.id.1', 'tab.id.2', 'tab.id.3']);
92
100
  });
93
101
 
94
102
  it('has "aria-selected" assigned to the first tab', async () => {
95
- const ariaSelectedValue = await page.$eval('.ons-tab', node => node.getAttribute('aria-selected'));
103
+ const ariaSelectedValue = await page.$eval('.ons-tab', (node) => node.getAttribute('aria-selected'));
96
104
 
97
105
  expect(ariaSelectedValue).toBe('true');
98
106
  });
99
107
 
100
108
  it('has the "ons-tab--selected" class assigned to the first tab', async () => {
101
- const hasClass = await page.$eval('.ons-tab', node => node.classList.contains('ons-tab--selected'));
109
+ const hasClass = await page.$eval('.ons-tab', (node) => node.classList.contains('ons-tab--selected'));
102
110
 
103
111
  expect(hasClass).toBe(true);
104
112
  });
105
113
 
106
114
  it('has "tabindex" assigned to each tab', async () => {
107
- const tabIndexValues = await page.$$eval('.ons-tab', nodes => nodes.map(node => node.getAttribute('tabindex')));
115
+ const tabIndexValues = await page.$$eval('.ons-tab', (nodes) => nodes.map((node) => node.getAttribute('tabindex')));
108
116
 
109
117
  expect(tabIndexValues).toEqual(['0', '-1', '-1']);
110
118
  });
111
119
 
112
120
  it('has only one visible tab panel', async () => {
113
- const panelHiddenStates = await page.$$eval('.ons-tabs__panel', nodes =>
114
- nodes.map(node => node.classList.contains('ons-tabs__panel--hidden')),
121
+ const panelHiddenStates = await page.$$eval('.ons-tabs__panel', (nodes) =>
122
+ nodes.map((node) => node.classList.contains('ons-tabs__panel--hidden')),
115
123
  );
116
124
 
117
125
  expect(panelHiddenStates).toEqual([false, true, true]);
@@ -124,26 +132,26 @@ describe('script: tabs', () => {
124
132
  });
125
133
 
126
134
  it('is assigned a "tabindex" value', async () => {
127
- const tabIndexValues = await page.$$eval('.ons-tab', nodes => nodes.map(node => node.getAttribute('tabindex')));
135
+ const tabIndexValues = await page.$$eval('.ons-tab', (nodes) => nodes.map((node) => node.getAttribute('tabindex')));
128
136
 
129
137
  expect(tabIndexValues).toEqual(['-1', '0', '-1']);
130
138
  });
131
139
 
132
140
  it('has the "aria-selected" attribute', async () => {
133
- const ariaSelectedValue = await page.$eval('a[href="#tab.id.2"]', node => node.getAttribute('aria-selected'));
141
+ const ariaSelectedValue = await page.$eval('a[href="#tab.id.2"]', (node) => node.getAttribute('aria-selected'));
134
142
 
135
143
  expect(ariaSelectedValue).toBe('true');
136
144
  });
137
145
 
138
146
  it('has the "ons-tab--selected" class assigned', async () => {
139
- const hasClass = await page.$eval('a[href="#tab.id.2"]', node => node.classList.contains('ons-tab--selected'));
147
+ const hasClass = await page.$eval('a[href="#tab.id.2"]', (node) => node.classList.contains('ons-tab--selected'));
140
148
 
141
149
  expect(hasClass).toBe(true);
142
150
  });
143
151
 
144
152
  it('shows the corresponding panel', async () => {
145
- const panelHiddenStates = await page.$$eval('.ons-tabs__panel', nodes =>
146
- nodes.map(node => node.classList.contains('ons-tabs__panel--hidden')),
153
+ const panelHiddenStates = await page.$$eval('.ons-tabs__panel', (nodes) =>
154
+ nodes.map((node) => node.classList.contains('ons-tabs__panel--hidden')),
147
155
  );
148
156
 
149
157
  expect(panelHiddenStates).toEqual([true, false, true]);
@@ -178,26 +186,26 @@ describe('script: tabs', () => {
178
186
  });
179
187
 
180
188
  it('is assigned a "tabindex" value', async () => {
181
- const tabIndexValues = await page.$$eval('.ons-tab', nodes => nodes.map(node => node.getAttribute('tabindex')));
189
+ const tabIndexValues = await page.$$eval('.ons-tab', (nodes) => nodes.map((node) => node.getAttribute('tabindex')));
182
190
 
183
191
  expect(tabIndexValues).toEqual(['-1', '0', '-1']);
184
192
  });
185
193
 
186
194
  it('has the "aria-selected" attribute', async () => {
187
- const ariaSelectedValue = await page.$eval('a[href="#tab.id.2"]', node => node.getAttribute('aria-selected'));
195
+ const ariaSelectedValue = await page.$eval('a[href="#tab.id.2"]', (node) => node.getAttribute('aria-selected'));
188
196
 
189
197
  expect(ariaSelectedValue).toBe('true');
190
198
  });
191
199
 
192
200
  it('has the "ons-tab--selected" class assigned', async () => {
193
- const hasClass = await page.$eval('a[href="#tab.id.2"]', node => node.classList.contains('ons-tab--selected'));
201
+ const hasClass = await page.$eval('a[href="#tab.id.2"]', (node) => node.classList.contains('ons-tab--selected'));
194
202
 
195
203
  expect(hasClass).toBe(true);
196
204
  });
197
205
 
198
206
  it('shows the corresponding panel', async () => {
199
- const panelHiddenStates = await page.$$eval('.ons-tabs__panel', nodes =>
200
- nodes.map(node => node.classList.contains('ons-tabs__panel--hidden')),
207
+ const panelHiddenStates = await page.$$eval('.ons-tabs__panel', (nodes) =>
208
+ nodes.map((node) => node.classList.contains('ons-tabs__panel--hidden')),
201
209
  );
202
210
 
203
211
  expect(panelHiddenStates).toEqual([true, false, true]);
@@ -206,7 +214,7 @@ describe('script: tabs', () => {
206
214
 
207
215
  describe('when the viewport is small', () => {
208
216
  beforeEach(async () => {
209
- await page.emulate(puppeteer.devices['iPhone X']);
217
+ await page.emulate(iPhoneX);
210
218
 
211
219
  await setTestPage('/test', renderComponent('tabs', EXAMPLE_TABS_LONGER));
212
220
  });
@@ -214,27 +222,27 @@ describe('script: tabs', () => {
214
222
  it('has no aria attributes on tabs', async () => {
215
223
  const tabElements = await page.$$('.ons-tab');
216
224
  for (let i = 0; i < 3; ++i) {
217
- const hasRoleAttribute = await tabElements[i].evaluate(node => node.getAttribute('role') !== null);
225
+ const hasRoleAttribute = await tabElements[i].evaluate((node) => node.getAttribute('role') !== null);
218
226
  expect(hasRoleAttribute).toBe(false);
219
227
 
220
- const hasAriaControlsAttribute = await tabElements[i].evaluate(node => node.getAttribute('aria-controls') !== null);
228
+ const hasAriaControlsAttribute = await tabElements[i].evaluate((node) => node.getAttribute('aria-controls') !== null);
221
229
  expect(hasAriaControlsAttribute).toBe(false);
222
230
 
223
- const hasAriaSelectedAttribute = await tabElements[i].evaluate(node => node.getAttribute('aria-selected') !== null);
231
+ const hasAriaSelectedAttribute = await tabElements[i].evaluate((node) => node.getAttribute('aria-selected') !== null);
224
232
  expect(hasAriaSelectedAttribute).toBe(false);
225
233
  }
226
234
  });
227
235
 
228
236
  it('has no hidden tab panels', async () => {
229
- const panelCount = await page.$$eval('.ons-tabs__panel', nodes => nodes.length);
237
+ const panelCount = await page.$$eval('.ons-tabs__panel', (nodes) => nodes.length);
230
238
  expect(panelCount).toBe(5);
231
239
 
232
- const hiddenPanelCount = await page.$$eval('.ons-tabs__panel--hidden', nodes => nodes.length);
240
+ const hiddenPanelCount = await page.$$eval('.ons-tabs__panel--hidden', (nodes) => nodes.length);
233
241
  expect(hiddenPanelCount).toBe(0);
234
242
  });
235
243
 
236
244
  it('displays a h2 element with a unique id', async () => {
237
- const panelCount = await page.$$eval('#tab-1-content-title', nodes => nodes.length);
245
+ const panelCount = await page.$$eval('#tab-1-content-title', (nodes) => nodes.length);
238
246
  expect(panelCount).toBe(1);
239
247
  });
240
248
  });
@@ -246,13 +254,13 @@ describe('script: tabs', () => {
246
254
  });
247
255
 
248
256
  it('does not assign "aria-selected" to the first tab', async () => {
249
- const ariaSelectedValue = await page.$eval('.ons-tab', node => node.getAttribute('aria-selected'));
257
+ const ariaSelectedValue = await page.$eval('.ons-tab', (node) => node.getAttribute('aria-selected'));
250
258
 
251
259
  expect(ariaSelectedValue).not.toBe('true');
252
260
  });
253
261
 
254
262
  it('does not assign the "ons-tab--selected" class to the first tab', async () => {
255
- const hasClass = await page.$eval('.ons-tab', node => node.classList.contains('ons-tab--selected'));
263
+ const hasClass = await page.$eval('.ons-tab', (node) => node.classList.contains('ons-tab--selected'));
256
264
 
257
265
  expect(hasClass).toBe(false);
258
266
  });
@@ -264,26 +272,26 @@ describe('script: tabs', () => {
264
272
  });
265
273
 
266
274
  it('is assigned a "tabindex" value', async () => {
267
- const tabIndexValues = await page.$$eval('.ons-tab', nodes => nodes.map(node => node.getAttribute('tabindex')));
275
+ const tabIndexValues = await page.$$eval('.ons-tab', (nodes) => nodes.map((node) => node.getAttribute('tabindex')));
268
276
 
269
277
  expect(tabIndexValues).toEqual(['0', '-1', '-1']);
270
278
  });
271
279
 
272
280
  it('has the "aria-selected" attribute', async () => {
273
- const ariaSelectedValue = await page.$eval('a[href="#tab.id.1"]', node => node.getAttribute('aria-selected'));
281
+ const ariaSelectedValue = await page.$eval('a[href="#tab.id.1"]', (node) => node.getAttribute('aria-selected'));
274
282
 
275
283
  expect(ariaSelectedValue).toBe('true');
276
284
  });
277
285
 
278
286
  it('has the "ons-tab--selected" class assigned', async () => {
279
- const hasClass = await page.$eval('a[href="#tab.id.1"]', node => node.classList.contains('ons-tab--selected'));
287
+ const hasClass = await page.$eval('a[href="#tab.id.1"]', (node) => node.classList.contains('ons-tab--selected'));
280
288
 
281
289
  expect(hasClass).toBe(true);
282
290
  });
283
291
 
284
292
  it('shows the corresponding panel', async () => {
285
- const panelHiddenStates = await page.$$eval('.ons-tabs__panel', nodes =>
286
- nodes.map(node => node.classList.contains('ons-tabs__panel--hidden')),
293
+ const panelHiddenStates = await page.$$eval('.ons-tabs__panel', (nodes) =>
294
+ nodes.map((node) => node.classList.contains('ons-tabs__panel--hidden')),
287
295
  );
288
296
 
289
297
  expect(panelHiddenStates).toEqual([false, true, true]);
@@ -298,26 +306,26 @@ describe('script: tabs', () => {
298
306
  });
299
307
 
300
308
  it('is assigned a "tabindex" value', async () => {
301
- const tabIndexValues = await page.$$eval('.ons-tab', nodes => nodes.map(node => node.getAttribute('tabindex')));
309
+ const tabIndexValues = await page.$$eval('.ons-tab', (nodes) => nodes.map((node) => node.getAttribute('tabindex')));
302
310
 
303
311
  expect(tabIndexValues).toEqual(['0', '-1', '-1']);
304
312
  });
305
313
 
306
314
  it('does not have the "aria-selected" attribute', async () => {
307
- const ariaSelectedValue = await page.$eval('a[href="#tab.id.2"]', node => node.getAttribute('aria-selected'));
315
+ const ariaSelectedValue = await page.$eval('a[href="#tab.id.2"]', (node) => node.getAttribute('aria-selected'));
308
316
 
309
317
  expect(ariaSelectedValue).not.toBe('true');
310
318
  });
311
319
 
312
320
  it('does not have the "ons-tab--selected" class assigned', async () => {
313
- const hasClass = await page.$eval('a[href="#tab.id.2"]', node => node.classList.contains('ons-tab--selected'));
321
+ const hasClass = await page.$eval('a[href="#tab.id.2"]', (node) => node.classList.contains('ons-tab--selected'));
314
322
 
315
323
  expect(hasClass).toBe(false);
316
324
  });
317
325
 
318
326
  it('hides the corresponding panel', async () => {
319
- const panelHiddenStates = await page.$$eval('.ons-tabs__panel', nodes =>
320
- nodes.map(node => node.classList.contains('ons-tabs__panel--hidden')),
327
+ const panelHiddenStates = await page.$$eval('.ons-tabs__panel', (nodes) =>
328
+ nodes.map((node) => node.classList.contains('ons-tabs__panel--hidden')),
321
329
  );
322
330
 
323
331
  expect(panelHiddenStates).toEqual([true, true, true]);
@@ -332,26 +340,26 @@ describe('script: tabs', () => {
332
340
  });
333
341
 
334
342
  it('is assigned a "tabindex" value', async () => {
335
- const tabIndexValues = await page.$$eval('.ons-tab', nodes => nodes.map(node => node.getAttribute('tabindex')));
343
+ const tabIndexValues = await page.$$eval('.ons-tab', (nodes) => nodes.map((node) => node.getAttribute('tabindex')));
336
344
 
337
345
  expect(tabIndexValues).toEqual(['-1', '0', '-1']);
338
346
  });
339
347
 
340
348
  it('has the "aria-selected" attribute', async () => {
341
- const ariaSelectedValue = await page.$eval('a[href="#tab.id.2"]', node => node.getAttribute('aria-selected'));
349
+ const ariaSelectedValue = await page.$eval('a[href="#tab.id.2"]', (node) => node.getAttribute('aria-selected'));
342
350
 
343
351
  expect(ariaSelectedValue).toBe('true');
344
352
  });
345
353
 
346
354
  it('has the "ons-tab--selected" class assigned', async () => {
347
- const hasClass = await page.$eval('a[href="#tab.id.2"]', node => node.classList.contains('ons-tab--selected'));
355
+ const hasClass = await page.$eval('a[href="#tab.id.2"]', (node) => node.classList.contains('ons-tab--selected'));
348
356
 
349
357
  expect(hasClass).toBe(true);
350
358
  });
351
359
 
352
360
  it('shows the corresponding panel', async () => {
353
- const panelHiddenStates = await page.$$eval('.ons-tabs__panel', nodes =>
354
- nodes.map(node => node.classList.contains('ons-tabs__panel--hidden')),
361
+ const panelHiddenStates = await page.$$eval('.ons-tabs__panel', (nodes) =>
362
+ nodes.map((node) => node.classList.contains('ons-tabs__panel--hidden')),
355
363
  );
356
364
 
357
365
  expect(panelHiddenStates).toEqual([true, false, true]);