@madgex/design-system 1.34.1 → 1.35.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/.eslintignore +0 -1
- package/.eslintrc.js +1 -1
- package/.prettierrc +4 -1
- package/README.md +2 -2
- package/__tests__/.eslintrc.js +8 -0
- package/__tests__/unit/src/components/combobox.spec.js +107 -0
- package/coverage/cobertura-coverage.xml +326 -3
- package/coverage/components/accordion/accordion.js.html +61 -51
- package/coverage/components/accordion/index.html +62 -49
- package/coverage/components/combobox/combobox.js.html +139 -0
- package/coverage/components/combobox/index.html +110 -0
- package/coverage/components/combobox/vue-components/Combobox.vue.html +709 -0
- package/coverage/components/combobox/vue-components/index.html +110 -0
- package/coverage/components/notification/index.html +62 -49
- package/coverage/components/notification/notification.js.html +61 -51
- package/coverage/components/popover/index.html +62 -49
- package/coverage/components/popover/popover.js.html +61 -51
- package/coverage/components/switch-state/index.html +62 -49
- package/coverage/components/switch-state/switch-state.js.html +61 -51
- package/coverage/components/tabs/index.html +62 -49
- package/coverage/components/tabs/tabs.js.html +61 -51
- package/coverage/index.html +126 -67
- package/coverage/js/common.js.html +61 -51
- package/coverage/js/fractal-scripts/combobox.js.html +229 -0
- package/coverage/js/fractal-scripts/index.html +80 -50
- package/coverage/js/fractal-scripts/notification.js.html +61 -51
- package/coverage/js/fractal-scripts/switch-state.js.html +61 -51
- package/coverage/js/index-fractal.js.html +68 -52
- package/coverage/js/index-polyfills.js.html +65 -52
- package/coverage/js/index.html +73 -54
- package/coverage/js/index.js.html +62 -52
- package/coverage/js/polyfills/closest.js.html +61 -51
- package/coverage/js/polyfills/index.html +77 -49
- package/coverage/js/polyfills/remove.js.html +100 -0
- package/coverage/tokens/_config.js.html +61 -51
- package/coverage/tokens/index.html +62 -49
- package/cypress/integration/components/combobox.spec.js +87 -0
- package/cypress/integration/components/switch-state.spec.js +2 -8
- package/cypress/support/index.js +1 -0
- package/dist/_tokens/css/_tokens.css +169 -168
- package/dist/_tokens/js/_tokens-module.js +22 -1
- package/dist/_tokens/scss/_tokens.scss +5 -1
- package/dist/assets/icons.json +1 -1
- package/dist/css/index.css +1 -1
- package/dist/js/index.js +18 -4
- package/gulpfile.js +1 -1
- package/jest.config.js +5 -1
- package/package.json +25 -4
- package/src/components/button/button.scss +1 -0
- package/src/components/combobox/README.md +27 -0
- package/src/components/combobox/_macro.njk +3 -0
- package/src/components/combobox/_template.njk +45 -0
- package/src/components/combobox/combobox.config.js +30 -0
- package/src/components/combobox/combobox.js +20 -0
- package/src/components/combobox/combobox.njk +14 -0
- package/src/components/combobox/combobox.scss +52 -0
- package/src/components/combobox/vue-components/Combobox.vue +210 -0
- package/src/components/combobox/vue-components/ComboboxInput.vue +39 -0
- package/src/components/combobox/vue-components/ListBox.vue +17 -0
- package/src/components/combobox/vue-components/ListBoxOption.vue +27 -0
- package/src/js/fractal-scripts/combobox.js +50 -0
- package/src/js/index-fractal.js +2 -0
- package/src/js/index-polyfills.js +1 -0
- package/src/js/index.js +1 -1
- package/src/js/polyfills/remove.js +7 -0
- package/src/scss/components/__index.scss +1 -0
- package/src/tokens/font.json +5 -0
- package/tasks/js-bundle.js +6 -0
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
|
|
1
2
|
<!doctype html>
|
|
2
3
|
<html lang="en">
|
|
4
|
+
|
|
3
5
|
<head>
|
|
4
6
|
<title>Code coverage report for tokens/_config.js</title>
|
|
5
7
|
<meta charset="utf-8" />
|
|
@@ -12,40 +14,48 @@
|
|
|
12
14
|
}
|
|
13
15
|
</style>
|
|
14
16
|
</head>
|
|
17
|
+
|
|
15
18
|
<body>
|
|
16
19
|
<div class='wrapper'>
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
20
|
+
<div class='pad1'>
|
|
21
|
+
<h1><a href="../index.html">All files</a> / <a href="index.html">tokens</a> _config.js</h1>
|
|
22
|
+
<div class='clearfix'>
|
|
23
|
+
|
|
24
|
+
<div class='fl pad1y space-right2'>
|
|
25
|
+
<span class="strong">0% </span>
|
|
26
|
+
<span class="quiet">Statements</span>
|
|
27
|
+
<span class='fraction'>0/3</span>
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
<div class='fl pad1y space-right2'>
|
|
32
|
+
<span class="strong">100% </span>
|
|
33
|
+
<span class="quiet">Branches</span>
|
|
34
|
+
<span class='fraction'>0/0</span>
|
|
35
|
+
</div>
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
<div class='fl pad1y space-right2'>
|
|
39
|
+
<span class="strong">100% </span>
|
|
40
|
+
<span class="quiet">Functions</span>
|
|
41
|
+
<span class='fraction'>0/0</span>
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
<div class='fl pad1y space-right2'>
|
|
46
|
+
<span class="strong">0% </span>
|
|
47
|
+
<span class="quiet">Lines</span>
|
|
48
|
+
<span class='fraction'>0/3</span>
|
|
49
|
+
</div>
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
</div>
|
|
53
|
+
<p class="quiet">
|
|
54
|
+
Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
|
|
55
|
+
</p>
|
|
42
56
|
</div>
|
|
43
|
-
<
|
|
44
|
-
|
|
45
|
-
</p>
|
|
46
|
-
</div>
|
|
47
|
-
<div class='status-line low'></div>
|
|
48
|
-
<pre><table class="coverage">
|
|
57
|
+
<div class='status-line low'></div>
|
|
58
|
+
<pre><table class="coverage">
|
|
49
59
|
<tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
|
|
50
60
|
<a name='L2'></a><a href='#L2'>2</a>
|
|
51
61
|
<a name='L3'></a><a href='#L3'>3</a>
|
|
@@ -535,24 +545,24 @@ const config = <span class="cstat-no" title="statement not covered" >{</span>
|
|
|
535
545
|
};
|
|
536
546
|
|
|
537
547
|
<span class="cstat-no" title="statement not covered" >module.exports = config;</span>
|
|
538
|
-
</pre></td></tr>
|
|
539
|
-
|
|
540
|
-
<div class='push'></div><!-- for sticky footer -->
|
|
541
|
-
</div><!-- /wrapper -->
|
|
542
|
-
<div class='footer quiet pad2 space-top1 center small'>
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
</div>
|
|
547
|
-
|
|
548
|
-
<script>
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
<script src="../
|
|
556
|
-
|
|
557
|
-
</body>
|
|
548
|
+
</pre></td></tr></table></pre>
|
|
549
|
+
|
|
550
|
+
<div class='push'></div><!-- for sticky footer -->
|
|
551
|
+
</div><!-- /wrapper -->
|
|
552
|
+
<div class='footer quiet pad2 space-top1 center small'>
|
|
553
|
+
Code coverage generated by
|
|
554
|
+
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
555
|
+
at Thu Feb 13 2020 17:53:26 GMT+0000 (Greenwich Mean Time)
|
|
556
|
+
</div>
|
|
557
|
+
</div>
|
|
558
|
+
<script src="../prettify.js"></script>
|
|
559
|
+
<script>
|
|
560
|
+
window.onload = function () {
|
|
561
|
+
prettyPrint();
|
|
562
|
+
};
|
|
563
|
+
</script>
|
|
564
|
+
<script src="../sorter.js"></script>
|
|
565
|
+
<script src="../block-navigation.js"></script>
|
|
566
|
+
</body>
|
|
558
567
|
</html>
|
|
568
|
+
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
|
|
1
2
|
<!doctype html>
|
|
2
3
|
<html lang="en">
|
|
4
|
+
|
|
3
5
|
<head>
|
|
4
6
|
<title>Code coverage report for tokens</title>
|
|
5
7
|
<meta charset="utf-8" />
|
|
@@ -12,40 +14,48 @@
|
|
|
12
14
|
}
|
|
13
15
|
</style>
|
|
14
16
|
</head>
|
|
17
|
+
|
|
15
18
|
<body>
|
|
16
19
|
<div class='wrapper'>
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
20
|
+
<div class='pad1'>
|
|
21
|
+
<h1><a href="../index.html">All files</a> tokens</h1>
|
|
22
|
+
<div class='clearfix'>
|
|
23
|
+
|
|
24
|
+
<div class='fl pad1y space-right2'>
|
|
25
|
+
<span class="strong">0% </span>
|
|
26
|
+
<span class="quiet">Statements</span>
|
|
27
|
+
<span class='fraction'>0/3</span>
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
<div class='fl pad1y space-right2'>
|
|
32
|
+
<span class="strong">100% </span>
|
|
33
|
+
<span class="quiet">Branches</span>
|
|
34
|
+
<span class='fraction'>0/0</span>
|
|
35
|
+
</div>
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
<div class='fl pad1y space-right2'>
|
|
39
|
+
<span class="strong">100% </span>
|
|
40
|
+
<span class="quiet">Functions</span>
|
|
41
|
+
<span class='fraction'>0/0</span>
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
<div class='fl pad1y space-right2'>
|
|
46
|
+
<span class="strong">0% </span>
|
|
47
|
+
<span class="quiet">Lines</span>
|
|
48
|
+
<span class='fraction'>0/3</span>
|
|
49
|
+
</div>
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
</div>
|
|
53
|
+
<p class="quiet">
|
|
54
|
+
Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
|
|
55
|
+
</p>
|
|
42
56
|
</div>
|
|
43
|
-
<
|
|
44
|
-
|
|
45
|
-
</p>
|
|
46
|
-
</div>
|
|
47
|
-
<div class='status-line low'></div>
|
|
48
|
-
<div class="pad1">
|
|
57
|
+
<div class='status-line low'></div>
|
|
58
|
+
<div class="pad1">
|
|
49
59
|
<table class="coverage-summary">
|
|
50
60
|
<thead>
|
|
51
61
|
<tr>
|
|
@@ -63,7 +73,9 @@
|
|
|
63
73
|
</thead>
|
|
64
74
|
<tbody><tr>
|
|
65
75
|
<td class="file low" data-value="_config.js"><a href="_config.js.html">_config.js</a></td>
|
|
66
|
-
<td data-value="0" class="pic low"
|
|
76
|
+
<td data-value="0" class="pic low">
|
|
77
|
+
<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
|
|
78
|
+
</td>
|
|
67
79
|
<td data-value="0" class="pct low">0%</td>
|
|
68
80
|
<td data-value="3" class="abs low">0/3</td>
|
|
69
81
|
<td data-value="100" class="pct high">100%</td>
|
|
@@ -76,22 +88,23 @@
|
|
|
76
88
|
|
|
77
89
|
</tbody>
|
|
78
90
|
</table>
|
|
79
|
-
</div><div class='push'></div><!-- for sticky footer -->
|
|
80
|
-
</div><!-- /wrapper -->
|
|
81
|
-
<div class='footer quiet pad2 space-top1 center small'>
|
|
82
|
-
Code coverage
|
|
83
|
-
generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Mon Jan 13 2020 16:43:15 GMT+0000 (GMT)
|
|
84
91
|
</div>
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
<
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
<script
|
|
95
|
-
|
|
96
|
-
|
|
92
|
+
<div class='push'></div><!-- for sticky footer -->
|
|
93
|
+
</div><!-- /wrapper -->
|
|
94
|
+
<div class='footer quiet pad2 space-top1 center small'>
|
|
95
|
+
Code coverage generated by
|
|
96
|
+
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
97
|
+
at Thu Feb 13 2020 17:53:26 GMT+0000 (Greenwich Mean Time)
|
|
98
|
+
</div>
|
|
99
|
+
</div>
|
|
100
|
+
<script src="../prettify.js"></script>
|
|
101
|
+
<script>
|
|
102
|
+
window.onload = function () {
|
|
103
|
+
prettyPrint();
|
|
104
|
+
};
|
|
105
|
+
</script>
|
|
106
|
+
<script src="../sorter.js"></script>
|
|
107
|
+
<script src="../block-navigation.js"></script>
|
|
108
|
+
</body>
|
|
97
109
|
</html>
|
|
110
|
+
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
context('Combobox', () => {
|
|
2
|
+
beforeEach(() => {
|
|
3
|
+
cy.visitComponent('combobox');
|
|
4
|
+
});
|
|
5
|
+
|
|
6
|
+
it('has no detectable a11y violations on load', () => {
|
|
7
|
+
cy.checkA11y('[data-test="combobox"]');
|
|
8
|
+
});
|
|
9
|
+
|
|
10
|
+
it('has no detectable a11y violations when the select is open', () => {
|
|
11
|
+
const input = cy.get('[data-test="combobox"] input').first();
|
|
12
|
+
input.focus();
|
|
13
|
+
cy.get('[role="listbox"]').should('be.visible');
|
|
14
|
+
cy.checkA11y('[data-test="combobox"]');
|
|
15
|
+
});
|
|
16
|
+
|
|
17
|
+
it('can be navigated with up and down arrows', () => {
|
|
18
|
+
cy.get('[data-test="combobox"] input')
|
|
19
|
+
.first()
|
|
20
|
+
.focus()
|
|
21
|
+
.type('{downArrow}');
|
|
22
|
+
cy.get('[data-test="combobox"] input')
|
|
23
|
+
.attribute('aria-activedescendant')
|
|
24
|
+
.should('equal', 'distance-selection-option-0');
|
|
25
|
+
cy.get('#distance-selection-option-0')
|
|
26
|
+
.attribute('aria-selected')
|
|
27
|
+
.should('equal', 'true');
|
|
28
|
+
cy.get('[data-test="combobox"] input')
|
|
29
|
+
.first()
|
|
30
|
+
.focus()
|
|
31
|
+
.type('{upArrow}');
|
|
32
|
+
cy.get('[data-test="combobox"] input')
|
|
33
|
+
.attribute('aria-activedescendant')
|
|
34
|
+
.should('equal', 'distance-selection-option-3');
|
|
35
|
+
cy.get('#distance-selection-option-3')
|
|
36
|
+
.attribute('aria-selected')
|
|
37
|
+
.should('equal', 'true');
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
it('has no detectable a11y violations when navigating', () => {
|
|
41
|
+
const input = cy.get('[data-test="combobox"] input').first();
|
|
42
|
+
input
|
|
43
|
+
.focus()
|
|
44
|
+
.type('{downArrow}')
|
|
45
|
+
.type('{downArrow}');
|
|
46
|
+
cy.checkA11y('[data-test="combobox"]');
|
|
47
|
+
});
|
|
48
|
+
|
|
49
|
+
it('has the correct home and end key behaviours', () => {
|
|
50
|
+
cy.get('[data-test="combobox"] input')
|
|
51
|
+
.first()
|
|
52
|
+
.focus()
|
|
53
|
+
.type('{end}');
|
|
54
|
+
cy.get('#distance-selection-option-3')
|
|
55
|
+
.attribute('aria-selected')
|
|
56
|
+
.should('equal', 'true');
|
|
57
|
+
cy.get('[data-test="combobox"] input')
|
|
58
|
+
.first()
|
|
59
|
+
.focus()
|
|
60
|
+
.type('{home}');
|
|
61
|
+
cy.get('#distance-selection-option-0')
|
|
62
|
+
.attribute('aria-selected')
|
|
63
|
+
.should('equal', 'true');
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
it('closes correctly', () => {
|
|
67
|
+
cy.get('[data-test="combobox"] input')
|
|
68
|
+
.first()
|
|
69
|
+
.focus()
|
|
70
|
+
.type('{esc}');
|
|
71
|
+
cy.get('[role="listbox"]').should('not.be.visible');
|
|
72
|
+
cy.get('[data-test="combobox"] input')
|
|
73
|
+
.first()
|
|
74
|
+
.focus()
|
|
75
|
+
.type('{enter}');
|
|
76
|
+
cy.get('[role="listbox"]').should('not.be.visible');
|
|
77
|
+
});
|
|
78
|
+
|
|
79
|
+
it('can perform a remote lookup', () => {
|
|
80
|
+
const input = cy.get('[data-test="combobox"] input').last();
|
|
81
|
+
input.focus();
|
|
82
|
+
input.type('h');
|
|
83
|
+
cy.get('[data-test="combobox"] [role="option"]')
|
|
84
|
+
.its('length')
|
|
85
|
+
.should('be.gt', '0');
|
|
86
|
+
});
|
|
87
|
+
});
|
|
@@ -7,12 +7,6 @@ context('Switch state', () => {
|
|
|
7
7
|
cy.checkA11y('[data-test="switch-state"]');
|
|
8
8
|
});
|
|
9
9
|
|
|
10
|
-
it('it has the correct aria-live attribute', () => {
|
|
11
|
-
cy.get('[data-test="switch-state"]')
|
|
12
|
-
.invoke('attr', 'aria-live')
|
|
13
|
-
.should('equal', 'assertive');
|
|
14
|
-
});
|
|
15
|
-
|
|
16
10
|
it('switches text on click', () => {
|
|
17
11
|
const button = cy.get('[data-test="switch-state"]').first();
|
|
18
12
|
button.click();
|
|
@@ -29,8 +23,8 @@ context('Switch state', () => {
|
|
|
29
23
|
|
|
30
24
|
it('reverts to its previous text on a second click', () => {
|
|
31
25
|
cy.get('[data-test="switch-state"]').each((element) => {
|
|
32
|
-
const inactive = element.children('[data-test="switch-state-
|
|
33
|
-
const active = element.children('[data-test="switch-state-
|
|
26
|
+
const inactive = element.children('[data-test="switch-state-default"]');
|
|
27
|
+
const active = element.children('[data-test="switch-state-inverse"]');
|
|
34
28
|
element.click();
|
|
35
29
|
element.click();
|
|
36
30
|
cy.wrap(inactive).should('be.visible');
|
package/cypress/support/index.js
CHANGED