@madgex/design-system 3.0.2 → 3.0.3

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 (109) hide show
  1. package/.eslintignore +2 -0
  2. package/.eslintrc.js +3 -3
  3. package/__tests__/.eslintrc.js +3 -3
  4. package/__tests__/unit/src/components/combobox.spec.js +4 -28
  5. package/__tests__/unit/src/components/notification.spec.js +14 -12
  6. package/__tests__/unit/src/components/popover.spec.js +4 -0
  7. package/__tests__/unit/tasks/css.spec.js +3 -2
  8. package/__tests__/unit/tasks/jsbundle.spec.js +3 -2
  9. package/__tests__/unit/tasks/svgsprite.spec.js +3 -2
  10. package/__tests__/unit/tasks/tokens.spec.js +3 -2
  11. package/coverage/cobertura-coverage.xml +389 -389
  12. package/coverage/components/accordion/accordion.js.html +164 -127
  13. package/coverage/components/accordion/index.html +23 -22
  14. package/coverage/components/button/button.js.html +3 -2
  15. package/coverage/components/button/index.html +3 -2
  16. package/coverage/components/inputs/combobox/combobox.js.html +3 -2
  17. package/coverage/components/inputs/combobox/index.html +3 -2
  18. package/coverage/components/inputs/combobox/vue-components/Combobox.vue.html +55 -54
  19. package/coverage/components/inputs/combobox/vue-components/ListBoxOption.vue.html +9 -8
  20. package/coverage/components/inputs/combobox/vue-components/index.html +21 -20
  21. package/coverage/components/inputs/file-upload/file-upload.js.html +7 -3
  22. package/coverage/components/inputs/file-upload/index.html +3 -2
  23. package/coverage/components/inputs/textarea/character-count.js.html +13 -3
  24. package/coverage/components/inputs/textarea/index.html +3 -2
  25. package/coverage/components/modal/index.html +23 -22
  26. package/coverage/components/modal/modal.js.html +118 -111
  27. package/coverage/components/notification/index.html +3 -2
  28. package/coverage/components/notification/notification.js.html +13 -3
  29. package/coverage/components/popover/index.html +3 -2
  30. package/coverage/components/popover/popover.js.html +3 -2
  31. package/coverage/components/switch-state/index.html +19 -18
  32. package/coverage/components/switch-state/switch-state.js.html +22 -21
  33. package/coverage/components/tabs/index.html +3 -2
  34. package/coverage/components/tabs/tabs.js.html +37 -3
  35. package/coverage/favicon.png +0 -0
  36. package/coverage/index.html +52 -51
  37. package/coverage/js/common.js.html +3 -2
  38. package/coverage/js/fractal-scripts/combobox.js.html +22 -3
  39. package/coverage/js/fractal-scripts/index.html +3 -2
  40. package/coverage/js/fractal-scripts/notification.js.html +13 -3
  41. package/coverage/js/fractal-scripts/switch-state.js.html +13 -3
  42. package/coverage/js/index-fractal.js.html +3 -2
  43. package/coverage/js/index-polyfills.js.html +3 -2
  44. package/coverage/js/index-vue.js.html +3 -2
  45. package/coverage/js/index.html +3 -2
  46. package/coverage/js/index.js.html +3 -2
  47. package/coverage/js/polyfills/arrayPrototypeFind.js.html +20 -10
  48. package/coverage/js/polyfills/closest.js.html +8 -4
  49. package/coverage/js/polyfills/index.html +3 -2
  50. package/coverage/js/polyfills/objectAssign.js.html +19 -9
  51. package/coverage/js/polyfills/remove.js.html +3 -2
  52. package/coverage/tokens/_config.js.html +3 -2
  53. package/coverage/tokens/index.html +3 -2
  54. package/cypress/.eslintrc.js +6 -6
  55. package/cypress/fixtures/testuploadfile.txt +1 -0
  56. package/cypress/integration/components/accordion.spec.js +40 -3
  57. package/cypress/integration/components/button.spec.js +2 -3
  58. package/cypress/integration/components/card.spec.js +2 -3
  59. package/cypress/integration/components/icons.spec.js +10 -0
  60. package/cypress/integration/components/{combobox.spec.js → inputs/combobox.spec.js} +6 -0
  61. package/cypress/integration/components/inputs/file-upload.spec.js +45 -0
  62. package/cypress/integration/components/{input.spec.js → inputs/input.spec.js} +1 -1
  63. package/cypress/integration/components/inputs/label.spec.js +15 -0
  64. package/cypress/integration/components/inputs/radio.spec.js +20 -0
  65. package/cypress/integration/components/inputs/select.spec.js +31 -0
  66. package/cypress/integration/components/inputs/textarea.spec.js +23 -0
  67. package/cypress/integration/components/modal.spec.js +65 -0
  68. package/cypress/integration/components/notifications.spec.js +35 -0
  69. package/cypress/integration/components/popover.spec.js +36 -0
  70. package/cypress/integration/components/skip-link.spec.js +9 -0
  71. package/cypress/plugins/index.js +1 -1
  72. package/cypress/support/commands.js +14 -0
  73. package/cypress/support/index.js +2 -0
  74. package/dist/_tokens/css/_tokens.css +1 -1
  75. package/dist/_tokens/js/_tokens-module.js +455 -1
  76. package/dist/_tokens/scss/_tokens.scss +4 -4
  77. package/dist/assets/icons.json +1 -1
  78. package/dist/assets/icons.svg +6 -1
  79. package/dist/js/index.js +1 -1
  80. package/fractal.js +2 -0
  81. package/package.json +59 -54
  82. package/server.js +1 -1
  83. package/src/components/accordion/accordion.config.js +9 -12
  84. package/src/components/accordion/accordion.js +12 -0
  85. package/src/components/inputs/file-upload/file-upload.js +1 -0
  86. package/src/components/inputs/textarea/character-count.js +3 -0
  87. package/src/components/modal/modal.js +3 -1
  88. package/src/components/notification/notification.js +3 -0
  89. package/src/components/skip-link/skip-link.njk +11 -1
  90. package/src/components/tabs/tabs.js +11 -0
  91. package/src/js/fractal-scripts/combobox.js +6 -0
  92. package/src/js/fractal-scripts/notification.js +3 -0
  93. package/src/js/fractal-scripts/switch-state.js +3 -0
  94. package/src/js/polyfills/arrayPrototypeFind.js +9 -6
  95. package/src/js/polyfills/closest.js +2 -1
  96. package/src/js/polyfills/objectAssign.js +9 -6
  97. package/tasks/colorTransforms.js +4 -0
  98. package/tasks/createMacroIndex.js +1 -0
  99. package/tasks/css.js +3 -0
  100. package/tasks/fractal.js +2 -0
  101. package/tasks/js-bundle.js +6 -2
  102. package/tasks/svgsprite.js +31 -21
  103. package/tasks/tokens.js +2 -0
  104. package/__tests__/unit/src/components/accordion.spec.js +0 -88
  105. package/__tests__/unit/src/components/modal.spec.js +0 -87
  106. package/__tests__/unit/src/components/switch-state.spec.js +0 -21
  107. package/cypress/integration/components/textarea.spec.js +0 -9
  108. /package/cypress/integration/components/{checkbox-list.spec.js → inputs/checkbox-list.spec.js} +0 -0
  109. /package/cypress/integration/components/{single-checkbox.spec.js → inputs/single-checkbox.spec.js} +0 -0
package/coverage/components/modal/index.html CHANGED
@@ -7,7 +7,8 @@
7
7
  <meta charset="utf-8" />
8
8
  <link rel="stylesheet" href="../../prettify.css" />
9
9
  <link rel="stylesheet" href="../../base.css" />
10
- <meta name="viewport" content="width=device-width, initial-scale=1">
10
+ <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
11
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
11
12
  <style type='text/css'>
12
13
  .coverage-summary .sorter {
13
14
  background-image: url(../../sort-arrow-sprite.png);
@@ -22,30 +23,30 @@
22
23
  <div class='clearfix'>
23
24
 
24
25
  <div class='fl pad1y space-right2'>
25
- <span class="strong">100% </span>
26
+ <span class="strong">0% </span>
26
27
  <span class="quiet">Statements</span>
27
- <span class='fraction'>48/48</span>
28
+ <span class='fraction'>0/48</span>
28
29
  </div>
29
30
 
30
31
 
31
32
  <div class='fl pad1y space-right2'>
32
- <span class="strong">81.25% </span>
33
+ <span class="strong">0% </span>
33
34
  <span class="quiet">Branches</span>
34
- <span class='fraction'>13/16</span>
35
+ <span class='fraction'>0/16</span>
35
36
  </div>
36
37
 
37
38
 
38
39
  <div class='fl pad1y space-right2'>
39
- <span class="strong">100% </span>
40
+ <span class="strong">0% </span>
40
41
  <span class="quiet">Functions</span>
41
- <span class='fraction'>10/10</span>
42
+ <span class='fraction'>0/10</span>
42
43
  </div>
43
44
 
44
45
 
45
46
  <div class='fl pad1y space-right2'>
46
- <span class="strong">100% </span>
47
+ <span class="strong">0% </span>
47
48
  <span class="quiet">Lines</span>
48
- <span class='fraction'>48/48</span>
49
+ <span class='fraction'>0/48</span>
49
50
  </div>
50
51
 
51
52
 
@@ -54,7 +55,7 @@
54
55
  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
56
  </p>
56
57
  </div>
57
- <div class='status-line high'></div>
58
+ <div class='status-line low'></div>
58
59
  <div class="pad1">
59
60
  <table class="coverage-summary">
60
61
  <thead>
@@ -72,18 +73,18 @@
72
73
  </tr>
73
74
  </thead>
74
75
  <tbody><tr>
75
- <td class="file high" data-value="modal.js"><a href="modal.js.html">modal.js</a></td>
76
- <td data-value="100" class="pic high">
77
- <div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
76
+ <td class="file low" data-value="modal.js"><a href="modal.js.html">modal.js</a></td>
77
+ <td data-value="0" class="pic low">
78
+ <div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
78
79
  </td>
79
- <td data-value="100" class="pct high">100%</td>
80
- <td data-value="48" class="abs high">48/48</td>
81
- <td data-value="81.25" class="pct high">81.25%</td>
82
- <td data-value="16" class="abs high">13/16</td>
83
- <td data-value="100" class="pct high">100%</td>
84
- <td data-value="10" class="abs high">10/10</td>
85
- <td data-value="100" class="pct high">100%</td>
86
- <td data-value="48" class="abs high">48/48</td>
80
+ <td data-value="0" class="pct low">0%</td>
81
+ <td data-value="48" class="abs low">0/48</td>
82
+ <td data-value="0" class="pct low">0%</td>
83
+ <td data-value="16" class="abs low">0/16</td>
84
+ <td data-value="0" class="pct low">0%</td>
85
+ <td data-value="10" class="abs low">0/10</td>
86
+ <td data-value="0" class="pct low">0%</td>
87
+ <td data-value="48" class="abs low">0/48</td>
87
88
  </tr>
88
89
 
89
90
  </tbody>
@@ -94,7 +95,7 @@
94
95
  <div class='footer quiet pad2 space-top1 center small'>
95
96
  Code coverage generated by
96
97
  <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
97
- at Wed Jul 07 2021 12:25:30 GMT+0100 (British Summer Time)
98
+ at Thu Jul 08 2021 15:47:09 GMT+0100 (British Summer Time)
98
99
  </div>
99
100
  </div>
100
101
  <script src="../../prettify.js"></script>
package/coverage/components/modal/modal.js.html CHANGED
@@ -7,7 +7,8 @@
7
7
  <meta charset="utf-8" />
8
8
  <link rel="stylesheet" href="../../prettify.css" />
9
9
  <link rel="stylesheet" href="../../base.css" />
10
- <meta name="viewport" content="width=device-width, initial-scale=1">
10
+ <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
11
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
11
12
  <style type='text/css'>
12
13
  .coverage-summary .sorter {
13
14
  background-image: url(../../sort-arrow-sprite.png);
@@ -22,30 +23,30 @@
22
23
  <div class='clearfix'>
23
24
 
24
25
  <div class='fl pad1y space-right2'>
25
- <span class="strong">100% </span>
26
+ <span class="strong">0% </span>
26
27
  <span class="quiet">Statements</span>
27
- <span class='fraction'>48/48</span>
28
+ <span class='fraction'>0/48</span>
28
29
  </div>
29
30
 
30
31
 
31
32
  <div class='fl pad1y space-right2'>
32
- <span class="strong">81.25% </span>
33
+ <span class="strong">0% </span>
33
34
  <span class="quiet">Branches</span>
34
- <span class='fraction'>13/16</span>
35
+ <span class='fraction'>0/16</span>
35
36
  </div>
36
37
 
37
38
 
38
39
  <div class='fl pad1y space-right2'>
39
- <span class="strong">100% </span>
40
+ <span class="strong">0% </span>
40
41
  <span class="quiet">Functions</span>
41
- <span class='fraction'>10/10</span>
42
+ <span class='fraction'>0/10</span>
42
43
  </div>
43
44
 
44
45
 
45
46
  <div class='fl pad1y space-right2'>
46
- <span class="strong">100% </span>
47
+ <span class="strong">0% </span>
47
48
  <span class="quiet">Lines</span>
48
- <span class='fraction'>48/48</span>
49
+ <span class='fraction'>0/48</span>
49
50
  </div>
50
51
 
51
52
 
@@ -54,7 +55,7 @@
54
55
  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
56
  </p>
56
57
  </div>
57
- <div class='status-line high'></div>
58
+ <div class='status-line low'></div>
58
59
  <pre><table class="coverage">
59
60
  <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
60
61
  <a name='L2'></a><a href='#L2'>2</a>
@@ -140,168 +141,174 @@
140
141
  <a name='L82'></a><a href='#L82'>82</a>
141
142
  <a name='L83'></a><a href='#L83'>83</a>
142
143
  <a name='L84'></a><a href='#L84'>84</a>
143
- <a name='L85'></a><a href='#L85'>85</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
144
+ <a name='L85'></a><a href='#L85'>85</a>
145
+ <a name='L86'></a><a href='#L86'>86</a>
146
+ <a name='L87'></a><a href='#L87'>87</a></td><td class="line-coverage quiet"><span class="cline-any cline-no">&nbsp;</span>
144
147
  <span class="cline-any cline-neutral">&nbsp;</span>
145
- <span class="cline-any cline-yes">1x</span>
146
- <span class="cline-any cline-yes">1x</span>
147
- <span class="cline-any cline-yes">1x</span>
148
- <span class="cline-any cline-yes">1x</span>
148
+ <span class="cline-any cline-no">&nbsp;</span>
149
+ <span class="cline-any cline-no">&nbsp;</span>
150
+ <span class="cline-any cline-no">&nbsp;</span>
151
+ <span class="cline-any cline-no">&nbsp;</span>
149
152
  <span class="cline-any cline-neutral">&nbsp;</span>
150
153
  <span class="cline-any cline-neutral">&nbsp;</span>
151
- <span class="cline-any cline-yes">1x</span>
154
+ <span class="cline-any cline-no">&nbsp;</span>
152
155
  <span class="cline-any cline-neutral">&nbsp;</span>
153
- <span class="cline-any cline-yes">5x</span>
154
- <span class="cline-any cline-yes">5x</span>
155
- <span class="cline-any cline-yes">5x</span>
156
+ <span class="cline-any cline-no">&nbsp;</span>
156
157
  <span class="cline-any cline-neutral">&nbsp;</span>
157
- <span class="cline-any cline-yes">5x</span>
158
- <span class="cline-any cline-yes">1x</span>
159
- <span class="cline-any cline-yes">1x</span>
158
+ <span class="cline-any cline-no">&nbsp;</span>
159
+ <span class="cline-any cline-no">&nbsp;</span>
160
160
  <span class="cline-any cline-neutral">&nbsp;</span>
161
- <span class="cline-any cline-yes">1x</span>
161
+ <span class="cline-any cline-no">&nbsp;</span>
162
+ <span class="cline-any cline-no">&nbsp;</span>
163
+ <span class="cline-any cline-no">&nbsp;</span>
162
164
  <span class="cline-any cline-neutral">&nbsp;</span>
165
+ <span class="cline-any cline-no">&nbsp;</span>
163
166
  <span class="cline-any cline-neutral">&nbsp;</span>
164
- <span class="cline-any cline-yes">1x</span>
165
- <span class="cline-any cline-yes">1x</span>
166
167
  <span class="cline-any cline-neutral">&nbsp;</span>
168
+ <span class="cline-any cline-no">&nbsp;</span>
169
+ <span class="cline-any cline-no">&nbsp;</span>
167
170
  <span class="cline-any cline-neutral">&nbsp;</span>
168
171
  <span class="cline-any cline-neutral">&nbsp;</span>
169
- <span class="cline-any cline-yes">1x</span>
170
- <span class="cline-any cline-yes">1x</span>
171
172
  <span class="cline-any cline-neutral">&nbsp;</span>
172
- <span class="cline-any cline-yes">1x</span>
173
+ <span class="cline-any cline-no">&nbsp;</span>
174
+ <span class="cline-any cline-no">&nbsp;</span>
173
175
  <span class="cline-any cline-neutral">&nbsp;</span>
174
- <span class="cline-any cline-yes">1x</span>
175
- <span class="cline-any cline-yes">1x</span>
176
176
  <span class="cline-any cline-neutral">&nbsp;</span>
177
- <span class="cline-any cline-yes">1x</span>
178
- <span class="cline-any cline-yes">5x</span>
179
- <span class="cline-any cline-yes">5x</span>
177
+ <span class="cline-any cline-no">&nbsp;</span>
180
178
  <span class="cline-any cline-neutral">&nbsp;</span>
181
- <span class="cline-any cline-yes">1x</span>
182
- <span class="cline-any cline-yes">2x</span>
183
- <span class="cline-any cline-yes">1x</span>
179
+ <span class="cline-any cline-no">&nbsp;</span>
180
+ <span class="cline-any cline-no">&nbsp;</span>
184
181
  <span class="cline-any cline-neutral">&nbsp;</span>
182
+ <span class="cline-any cline-no">&nbsp;</span>
183
+ <span class="cline-any cline-no">&nbsp;</span>
184
+ <span class="cline-any cline-no">&nbsp;</span>
185
185
  <span class="cline-any cline-neutral">&nbsp;</span>
186
- <span class="cline-any cline-yes">1x</span>
187
- <span class="cline-any cline-yes">3x</span>
188
- <span class="cline-any cline-yes">3x</span>
189
- <span class="cline-any cline-yes">1x</span>
186
+ <span class="cline-any cline-no">&nbsp;</span>
187
+ <span class="cline-any cline-no">&nbsp;</span>
188
+ <span class="cline-any cline-no">&nbsp;</span>
190
189
  <span class="cline-any cline-neutral">&nbsp;</span>
191
190
  <span class="cline-any cline-neutral">&nbsp;</span>
192
- <span class="cline-any cline-yes">1x</span>
193
- <span class="cline-any cline-yes">1x</span>
194
- <span class="cline-any cline-yes">1x</span>
191
+ <span class="cline-any cline-no">&nbsp;</span>
192
+ <span class="cline-any cline-no">&nbsp;</span>
193
+ <span class="cline-any cline-no">&nbsp;</span>
194
+ <span class="cline-any cline-no">&nbsp;</span>
195
195
  <span class="cline-any cline-neutral">&nbsp;</span>
196
196
  <span class="cline-any cline-neutral">&nbsp;</span>
197
+ <span class="cline-any cline-no">&nbsp;</span>
198
+ <span class="cline-any cline-no">&nbsp;</span>
199
+ <span class="cline-any cline-no">&nbsp;</span>
197
200
  <span class="cline-any cline-neutral">&nbsp;</span>
198
201
  <span class="cline-any cline-neutral">&nbsp;</span>
199
202
  <span class="cline-any cline-neutral">&nbsp;</span>
200
203
  <span class="cline-any cline-neutral">&nbsp;</span>
201
- <span class="cline-any cline-yes">5x</span>
202
- <span class="cline-any cline-yes">5x</span>
203
- <span class="cline-any cline-yes">5x</span>
204
- <span class="cline-any cline-yes">5x</span>
205
204
  <span class="cline-any cline-neutral">&nbsp;</span>
206
205
  <span class="cline-any cline-neutral">&nbsp;</span>
207
- <span class="cline-any cline-yes">3x</span>
208
- <span class="cline-any cline-yes">3x</span>
209
- <span class="cline-any cline-yes">3x</span>
206
+ <span class="cline-any cline-no">&nbsp;</span>
207
+ <span class="cline-any cline-no">&nbsp;</span>
208
+ <span class="cline-any cline-no">&nbsp;</span>
209
+ <span class="cline-any cline-no">&nbsp;</span>
210
210
  <span class="cline-any cline-neutral">&nbsp;</span>
211
211
  <span class="cline-any cline-neutral">&nbsp;</span>
212
- <span class="cline-any cline-yes">3x</span>
213
- <span class="cline-any cline-yes">2x</span>
214
- <span class="cline-any cline-yes">1x</span>
215
- <span class="cline-any cline-yes">1x</span>
216
- <span class="cline-any cline-yes">1x</span>
212
+ <span class="cline-any cline-no">&nbsp;</span>
213
+ <span class="cline-any cline-no">&nbsp;</span>
214
+ <span class="cline-any cline-no">&nbsp;</span>
217
215
  <span class="cline-any cline-neutral">&nbsp;</span>
218
- <span class="cline-any cline-yes">1x</span>
219
- <span class="cline-any cline-yes">1x</span>
220
- <span class="cline-any cline-yes">1x</span>
221
216
  <span class="cline-any cline-neutral">&nbsp;</span>
217
+ <span class="cline-any cline-no">&nbsp;</span>
218
+ <span class="cline-any cline-no">&nbsp;</span>
219
+ <span class="cline-any cline-no">&nbsp;</span>
220
+ <span class="cline-any cline-no">&nbsp;</span>
221
+ <span class="cline-any cline-no">&nbsp;</span>
222
222
  <span class="cline-any cline-neutral">&nbsp;</span>
223
+ <span class="cline-any cline-no">&nbsp;</span>
224
+ <span class="cline-any cline-no">&nbsp;</span>
225
+ <span class="cline-any cline-no">&nbsp;</span>
223
226
  <span class="cline-any cline-neutral">&nbsp;</span>
224
227
  <span class="cline-any cline-neutral">&nbsp;</span>
225
228
  <span class="cline-any cline-neutral">&nbsp;</span>
226
229
  <span class="cline-any cline-neutral">&nbsp;</span>
227
- <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">const tokens = require('../../tokens/size.json');
230
+ <span class="cline-any cline-neutral">&nbsp;</span>
231
+ <span class="cline-any cline-neutral">&nbsp;</span>
232
+ <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">const tokens = <span class="cstat-no" title="statement not covered" >require('../../tokens/size.json');</span>
228
233
  &nbsp;
229
- const breakpoint = parseInt(tokens.size.breakpoint.md.value, 10);
230
- const modalTrigger = 'data-modal-id';
231
- const modalActiveClass = 'mds-modal--active';
232
- const modalCloseButtonClassName = 'js-mds-modal-close';
234
+ const breakpoint = <span class="cstat-no" title="statement not covered" >parseInt(tokens.size.breakpoint.md.value, 10);</span>
235
+ const modalTrigger = <span class="cstat-no" title="statement not covered" >'data-modal-id';</span>
236
+ const modalActiveClass = <span class="cstat-no" title="statement not covered" >'mds-modal--active';</span>
237
+ const modalCloseButtonClassName = <span class="cstat-no" title="statement not covered" >'js-mds-modal-close';</span>
233
238
  let focusedElementBeforeModal;
234
239
  &nbsp;
235
- const modals = {
236
- init: () =&gt; {
237
- const screenWidth = window.innerWidth;
238
- <span class="missing-if-branch" title="else path not taken" >E</span>if (screenWidth &gt; breakpoint) {
239
- const triggersList = Array.from(document.querySelectorAll(`[${modalTrigger}]`));
240
+ const modals = <span class="cstat-no" title="statement not covered" >{</span>
241
+ init: <span class="fstat-no" title="function not covered" >()</span> =&gt; {
242
+ const screenWidth = <span class="cstat-no" title="statement not covered" >window.innerWidth;</span>
240
243
  &nbsp;
241
- triggersList.forEach((trigger) =&gt; {
242
- const modalId = trigger.getAttribute(modalTrigger);
243
- const modal = document.getElementById(modalId);
244
+ <span class="cstat-no" title="statement not covered" > if (screenWidth &gt; breakpoint) {</span>
245
+ const triggersList = <span class="cstat-no" title="statement not covered" >Array.from(document.querySelectorAll(`[${modalTrigger}]`));</span>
244
246
  &nbsp;
245
- const closeButtons = Array.from(modal.querySelectorAll(`.${modalCloseButtonClassName}`));
247
+ <span class="cstat-no" title="statement not covered" > triggersList.forEach(<span class="fstat-no" title="function not covered" >(t</span>rigger) =&gt; {</span>
248
+ const modalId = <span class="cstat-no" title="statement not covered" >trigger.getAttribute(modalTrigger);</span>
249
+ const modal = <span class="cstat-no" title="statement not covered" >document.getElementById(modalId);</span>
250
+ &nbsp;
251
+ const closeButtons = <span class="cstat-no" title="statement not covered" >Array.from(modal.querySelectorAll(`.${modalCloseButtonClassName}`));</span>
246
252
  // Ensure content outside of the modal dialog is inaccessible to all users while the modal dialog is active
247
253
  // We target the site container (modal should be outside) and add aria-hidden="true" to it
248
- const siteContainerId = modal.getAttribute('data-site-container');
249
- const siteContainer = document.getElementById(siteContainerId);
254
+ const siteContainerId = <span class="cstat-no" title="statement not covered" >modal.getAttribute('data-site-container');</span>
255
+ const siteContainer = <span class="cstat-no" title="statement not covered" >document.getElementById(siteContainerId);</span>
250
256
  &nbsp;
251
257
  // Find all focusable children
252
258
  const focusableElementsString =
253
- 'a[href], area[href], input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]';
254
- let focusableElements = modal.querySelectorAll(focusableElementsString);
259
+ <span class="cstat-no" title="statement not covered" > 'a[href], area[href], input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]';</span>
260
+ let focusableElements = <span class="cstat-no" title="statement not covered" >modal.querySelectorAll(focusableElementsString);</span>
261
+ &nbsp;
255
262
  // Convert NodeList to Array
256
- focusableElements = Array.prototype.slice.call(focusableElements);
263
+ <span class="cstat-no" title="statement not covered" > focusableElements = Array.prototype.slice.call(focusableElements);</span>
257
264
  &nbsp;
258
- const firstTabStop = focusableElements[0];
259
- const lastTabStop = focusableElements[focusableElements.length - 1];
265
+ const firstTabStop = <span class="cstat-no" title="statement not covered" >focusableElements[0];</span>
266
+ const lastTabStop = <span class="cstat-no" title="statement not covered" >focusableElements[focusableElements.length - 1];</span>
260
267
  &nbsp;
261
- trigger.addEventListener('click', (elem) =&gt; {
262
- elem.preventDefault();
263
- modals.open(modal, firstTabStop, siteContainer);
268
+ <span class="cstat-no" title="statement not covered" > trigger.addEventListener('click', <span class="fstat-no" title="function not covered" >(e</span>lem) =&gt; {</span>
269
+ <span class="cstat-no" title="statement not covered" > elem.preventDefault();</span>
270
+ <span class="cstat-no" title="statement not covered" > modals.open(modal, firstTabStop, siteContainer);</span>
264
271
  });
265
- modal.addEventListener('click', (event) =&gt; {
266
- if (event.target === modal) {
267
- modals.close(modal, focusedElementBeforeModal, siteContainer);
272
+ <span class="cstat-no" title="statement not covered" > modal.addEventListener('click', <span class="fstat-no" title="function not covered" >(e</span>vent) =&gt; {</span>
273
+ <span class="cstat-no" title="statement not covered" > if (event.target === modal) {</span>
274
+ <span class="cstat-no" title="statement not covered" > modals.close(modal, focusedElementBeforeModal, siteContainer);</span>
268
275
  }
269
276
  });
270
- modal.addEventListener('keydown', (event) =&gt; {
271
- modals.trapFocus(event, firstTabStop, lastTabStop);
272
- if (event.key === 'Escape' || event.key === 'Esc') {
273
- modals.close(modal, focusedElementBeforeModal, siteContainer);
277
+ <span class="cstat-no" title="statement not covered" > modal.addEventListener('keydown', <span class="fstat-no" title="function not covered" >(e</span>vent) =&gt; {</span>
278
+ <span class="cstat-no" title="statement not covered" > modals.trapFocus(event, firstTabStop, lastTabStop);</span>
279
+ <span class="cstat-no" title="statement not covered" > if (event.key === 'Escape' || event.key === 'Esc') {</span>
280
+ <span class="cstat-no" title="statement not covered" > modals.close(modal, focusedElementBeforeModal, siteContainer);</span>
274
281
  }
275
282
  });
276
- closeButtons.forEach((closeButton) =&gt; {
277
- closeButton.addEventListener('click', (elem) =&gt; {
278
- modals.close(modal, focusedElementBeforeModal, siteContainer);
283
+ <span class="cstat-no" title="statement not covered" > closeButtons.forEach(<span class="fstat-no" title="function not covered" >(c</span>loseButton) =&gt; {</span>
284
+ <span class="cstat-no" title="statement not covered" > closeButton.addEventListener('click', <span class="fstat-no" title="function not covered" >(/</span>* elem */) =&gt; {</span>
285
+ <span class="cstat-no" title="statement not covered" > modals.close(modal, focusedElementBeforeModal, siteContainer);</span>
279
286
  });
280
287
  });
281
288
  });
282
289
  }
283
290
  },
284
- open: (modal, firstTabStop, siteContainer) =&gt; {
285
- focusedElementBeforeModal = document.activeElement;
286
- modal.classList.add(modalActiveClass);
287
- firstTabStop.focus();
288
- siteContainer.setAttribute('aria-hidden', 'true');
291
+ open: <span class="fstat-no" title="function not covered" >(m</span>odal, firstTabStop, siteContainer) =&gt; {
292
+ <span class="cstat-no" title="statement not covered" > focusedElementBeforeModal = document.activeElement;</span>
293
+ <span class="cstat-no" title="statement not covered" > modal.classList.add(modalActiveClass);</span>
294
+ <span class="cstat-no" title="statement not covered" > firstTabStop.focus();</span>
295
+ <span class="cstat-no" title="statement not covered" > siteContainer.setAttribute('aria-hidden', 'true');</span>
289
296
  },
290
- close: (modal, previousActiveElement, siteContainer) =&gt; {
291
- siteContainer.removeAttribute('aria-hidden');
292
- modal.classList.remove(modalActiveClass);
293
- previousActiveElement.focus();
297
+ close: <span class="fstat-no" title="function not covered" >(m</span>odal, previousActiveElement, siteContainer) =&gt; {
298
+ <span class="cstat-no" title="statement not covered" > siteContainer.removeAttribute('aria-hidden');</span>
299
+ <span class="cstat-no" title="statement not covered" > modal.classList.remove(modalActiveClass);</span>
300
+ <span class="cstat-no" title="statement not covered" > previousActiveElement.focus();</span>
294
301
  },
295
- trapFocus: (event, firstTabStop, lastTabStop) =&gt; {
296
- if (event.key === 'Tab') {
297
- if (event.shiftKey) {
298
- <span class="missing-if-branch" title="else path not taken" >E</span>if (document.activeElement === firstTabStop) {
299
- event.preventDefault();
300
- lastTabStop.focus();
302
+ trapFocus: <span class="fstat-no" title="function not covered" >(e</span>vent, firstTabStop, lastTabStop) =&gt; {
303
+ <span class="cstat-no" title="statement not covered" > if (event.key === 'Tab') {</span>
304
+ <span class="cstat-no" title="statement not covered" > if (event.shiftKey) {</span>
305
+ <span class="cstat-no" title="statement not covered" > if (document.activeElement === firstTabStop) {</span>
306
+ <span class="cstat-no" title="statement not covered" > event.preventDefault();</span>
307
+ <span class="cstat-no" title="statement not covered" > lastTabStop.focus();</span>
301
308
  }
302
- } else <span class="missing-if-branch" title="else path not taken" >E</span>if (document.activeElement === lastTabStop) {
303
- event.preventDefault();
304
- firstTabStop.focus();
309
+ } else <span class="cstat-no" title="statement not covered" >if (document.activeElement === lastTabStop) {</span>
310
+ <span class="cstat-no" title="statement not covered" > event.preventDefault();</span>
311
+ <span class="cstat-no" title="statement not covered" > firstTabStop.focus();</span>
305
312
  }
306
313
  }
307
314
  },
@@ -315,7 +322,7 @@ export default modals;
315
322
  <div class='footer quiet pad2 space-top1 center small'>
316
323
  Code coverage generated by
317
324
  <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
318
- at Wed Jul 07 2021 12:25:30 GMT+0100 (British Summer Time)
325
+ at Thu Jul 08 2021 15:47:09 GMT+0100 (British Summer Time)
319
326
  </div>
320
327
  </div>
321
328
  <script src="../../prettify.js"></script>
package/coverage/components/notification/index.html CHANGED
@@ -7,7 +7,8 @@
7
7
  <meta charset="utf-8" />
8
8
  <link rel="stylesheet" href="../../prettify.css" />
9
9
  <link rel="stylesheet" href="../../base.css" />
10
- <meta name="viewport" content="width=device-width, initial-scale=1">
10
+ <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
11
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
11
12
  <style type='text/css'>
12
13
  .coverage-summary .sorter {
13
14
  background-image: url(../../sort-arrow-sprite.png);
@@ -94,7 +95,7 @@
94
95
  <div class='footer quiet pad2 space-top1 center small'>
95
96
  Code coverage generated by
96
97
  <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
97
- at Wed Jul 07 2021 12:25:30 GMT+0100 (British Summer Time)
98
+ at Thu Jul 08 2021 15:47:09 GMT+0100 (British Summer Time)
98
99
  </div>
99
100
  </div>
100
101
  <script src="../../prettify.js"></script>
package/coverage/components/notification/notification.js.html CHANGED
@@ -7,7 +7,8 @@
7
7
  <meta charset="utf-8" />
8
8
  <link rel="stylesheet" href="../../prettify.css" />
9
9
  <link rel="stylesheet" href="../../base.css" />
10
- <meta name="viewport" content="width=device-width, initial-scale=1">
10
+ <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
11
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
11
12
  <style type='text/css'>
12
13
  .coverage-summary .sorter {
13
14
  background-image: url(../../sort-arrow-sprite.png);
@@ -83,14 +84,19 @@
83
84
  <a name='L25'></a><a href='#L25'>25</a>
84
85
  <a name='L26'></a><a href='#L26'>26</a>
85
86
  <a name='L27'></a><a href='#L27'>27</a>
86
- <a name='L28'></a><a href='#L28'>28</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
87
+ <a name='L28'></a><a href='#L28'>28</a>
88
+ <a name='L29'></a><a href='#L29'>29</a>
89
+ <a name='L30'></a><a href='#L30'>30</a>
90
+ <a name='L31'></a><a href='#L31'>31</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
87
91
  <span class="cline-any cline-neutral">&nbsp;</span>
88
92
  <span class="cline-any cline-yes">1x</span>
89
93
  <span class="cline-any cline-neutral">&nbsp;</span>
90
94
  <span class="cline-any cline-yes">1x</span>
95
+ <span class="cline-any cline-neutral">&nbsp;</span>
91
96
  <span class="cline-any cline-yes">1x</span>
92
97
  <span class="cline-any cline-neutral">&nbsp;</span>
93
98
  <span class="cline-any cline-yes">1x</span>
99
+ <span class="cline-any cline-neutral">&nbsp;</span>
94
100
  <span class="cline-any cline-yes">1x</span>
95
101
  <span class="cline-any cline-yes">1x</span>
96
102
  <span class="cline-any cline-yes">1x</span>
@@ -103,6 +109,7 @@
103
109
  <span class="cline-any cline-neutral">&nbsp;</span>
104
110
  <span class="cline-any cline-neutral">&nbsp;</span>
105
111
  <span class="cline-any cline-yes">1x</span>
112
+ <span class="cline-any cline-neutral">&nbsp;</span>
106
113
  <span class="cline-any cline-yes">1x</span>
107
114
  <span class="cline-any cline-no">&nbsp;</span>
108
115
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -115,9 +122,11 @@
115
122
  const notification = {
116
123
  init: (text, type, duration = 3000) =&gt; {
117
124
  const { body } = document;
125
+ &nbsp;
118
126
  notification.hide(body);
119
127
  &nbsp;
120
128
  const message = document.createElement('div');
129
+ &nbsp;
121
130
  message.setAttribute('role', 'alert');
122
131
  message.classList.add(componentClass, 'mds-message', `mds-message--${type}`);
123
132
  message.innerText = text;
@@ -130,6 +139,7 @@ const notification = {
130
139
  },
131
140
  hide: (container) =&gt; {
132
141
  const elementArray = Array.from(container.querySelectorAll(`.${componentClass}`));
142
+ &nbsp;
133
143
  elementArray.forEach(<span class="fstat-no" title="function not covered" >(e</span>lem) =&gt; {
134
144
  <span class="cstat-no" title="statement not covered" > elem.parentNode.removeChild(elem);</span>
135
145
  });
@@ -144,7 +154,7 @@ export default notification;
144
154
  <div class='footer quiet pad2 space-top1 center small'>
145
155
  Code coverage generated by
146
156
  <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
147
- at Wed Jul 07 2021 12:25:30 GMT+0100 (British Summer Time)
157
+ at Thu Jul 08 2021 15:47:09 GMT+0100 (British Summer Time)
148
158
  </div>
149
159
  </div>
150
160
  <script src="../../prettify.js"></script>
package/coverage/components/popover/index.html CHANGED
@@ -7,7 +7,8 @@
7
7
  <meta charset="utf-8" />
8
8
  <link rel="stylesheet" href="../../prettify.css" />
9
9
  <link rel="stylesheet" href="../../base.css" />
10
- <meta name="viewport" content="width=device-width, initial-scale=1">
10
+ <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
11
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
11
12
  <style type='text/css'>
12
13
  .coverage-summary .sorter {
13
14
  background-image: url(../../sort-arrow-sprite.png);
@@ -94,7 +95,7 @@
94
95
  <div class='footer quiet pad2 space-top1 center small'>
95
96
  Code coverage generated by
96
97
  <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
97
- at Wed Jul 07 2021 12:25:30 GMT+0100 (British Summer Time)
98
+ at Thu Jul 08 2021 15:47:09 GMT+0100 (British Summer Time)
98
99
  </div>
99
100
  </div>
100
101
  <script src="../../prettify.js"></script>
package/coverage/components/popover/popover.js.html CHANGED
@@ -7,7 +7,8 @@
7
7
  <meta charset="utf-8" />
8
8
  <link rel="stylesheet" href="../../prettify.css" />
9
9
  <link rel="stylesheet" href="../../base.css" />
10
- <meta name="viewport" content="width=device-width, initial-scale=1">
10
+ <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
11
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
11
12
  <style type='text/css'>
12
13
  .coverage-summary .sorter {
13
14
  background-image: url(../../sort-arrow-sprite.png);
@@ -294,7 +295,7 @@ export default popovers;
294
295
  <div class='footer quiet pad2 space-top1 center small'>
295
296
  Code coverage generated by
296
297
  <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
297
- at Wed Jul 07 2021 12:25:30 GMT+0100 (British Summer Time)
298
+ at Thu Jul 08 2021 15:47:09 GMT+0100 (British Summer Time)
298
299
  </div>
299
300
  </div>
300
301
  <script src="../../prettify.js"></script>