@crowdstrike/glide-core 0.13.1 → 0.14.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.
Files changed (284) hide show
  1. package/dist/drawer.d.ts +2 -2
  2. package/dist/drawer.js +1 -1
  3. package/dist/drawer.styles.js +3 -3
  4. package/dist/dropdown.styles.js +3 -2
  5. package/dist/input.styles.js +1 -0
  6. package/dist/styles/variables.css +1 -1
  7. package/dist/textarea.styles.js +2 -0
  8. package/dist/toasts.d.ts +2 -2
  9. package/dist/toasts.toast.d.ts +1 -1
  10. package/dist/toasts.toast.js +1 -1
  11. package/dist/toasts.toast.styles.js +8 -0
  12. package/dist/tree.item.styles.js +2 -2
  13. package/package.json +8 -5
  14. package/dist/accordion.stories.d.ts +0 -6
  15. package/dist/accordion.test.basics.d.ts +0 -1
  16. package/dist/accordion.test.basics.js +0 -28
  17. package/dist/accordion.test.events.d.ts +0 -1
  18. package/dist/accordion.test.events.js +0 -28
  19. package/dist/accordion.test.focus.d.ts +0 -1
  20. package/dist/accordion.test.focus.js +0 -11
  21. package/dist/accordion.test.interactions.d.ts +0 -1
  22. package/dist/accordion.test.interactions.js +0 -75
  23. package/dist/button-group.button.test.basics.d.ts +0 -1
  24. package/dist/button-group.button.test.basics.js +0 -97
  25. package/dist/button-group.button.test.events.d.ts +0 -1
  26. package/dist/button-group.button.test.events.js +0 -15
  27. package/dist/button-group.button.test.focus.d.ts +0 -1
  28. package/dist/button-group.button.test.focus.js +0 -13
  29. package/dist/button-group.button.test.interactions.d.ts +0 -1
  30. package/dist/button-group.button.test.interactions.js +0 -42
  31. package/dist/button-group.stories.d.ts +0 -7
  32. package/dist/button-group.test.basics.d.ts +0 -1
  33. package/dist/button-group.test.basics.js +0 -148
  34. package/dist/button-group.test.events.d.ts +0 -1
  35. package/dist/button-group.test.events.js +0 -241
  36. package/dist/button-group.test.focus.d.ts +0 -1
  37. package/dist/button-group.test.focus.js +0 -39
  38. package/dist/button-group.test.interactions.d.ts +0 -1
  39. package/dist/button-group.test.interactions.js +0 -91
  40. package/dist/button.stories.d.ts +0 -7
  41. package/dist/button.test.basics.d.ts +0 -1
  42. package/dist/button.test.basics.js +0 -69
  43. package/dist/button.test.events.d.ts +0 -1
  44. package/dist/button.test.events.js +0 -102
  45. package/dist/checkbox-group.stories.d.ts +0 -6
  46. package/dist/checkbox-group.test.basics.d.ts +0 -1
  47. package/dist/checkbox-group.test.basics.js +0 -116
  48. package/dist/checkbox-group.test.events.d.ts +0 -1
  49. package/dist/checkbox-group.test.events.js +0 -111
  50. package/dist/checkbox-group.test.focus.d.ts +0 -1
  51. package/dist/checkbox-group.test.focus.js +0 -70
  52. package/dist/checkbox-group.test.form.d.ts +0 -1
  53. package/dist/checkbox-group.test.form.js +0 -131
  54. package/dist/checkbox-group.test.interactions.d.ts +0 -1
  55. package/dist/checkbox-group.test.interactions.js +0 -82
  56. package/dist/checkbox-group.test.validity.d.ts +0 -1
  57. package/dist/checkbox-group.test.validity.js +0 -145
  58. package/dist/checkbox.stories.d.ts +0 -5
  59. package/dist/checkbox.test.basics.d.ts +0 -1
  60. package/dist/checkbox.test.basics.js +0 -90
  61. package/dist/checkbox.test.events.d.ts +0 -1
  62. package/dist/checkbox.test.events.js +0 -105
  63. package/dist/checkbox.test.focus.d.ts +0 -1
  64. package/dist/checkbox.test.focus.js +0 -51
  65. package/dist/checkbox.test.form.d.ts +0 -1
  66. package/dist/checkbox.test.form.js +0 -133
  67. package/dist/checkbox.test.interactions.d.ts +0 -1
  68. package/dist/checkbox.test.interactions.js +0 -131
  69. package/dist/checkbox.test.validity.d.ts +0 -1
  70. package/dist/checkbox.test.validity.js +0 -128
  71. package/dist/drawer.stories.d.ts +0 -6
  72. package/dist/drawer.test.accessibility.d.ts +0 -1
  73. package/dist/drawer.test.accessibility.js +0 -22
  74. package/dist/drawer.test.basics.d.ts +0 -1
  75. package/dist/drawer.test.basics.js +0 -44
  76. package/dist/drawer.test.closing.d.ts +0 -1
  77. package/dist/drawer.test.closing.js +0 -40
  78. package/dist/drawer.test.events.d.ts +0 -1
  79. package/dist/drawer.test.events.js +0 -42
  80. package/dist/drawer.test.methods.d.ts +0 -1
  81. package/dist/drawer.test.methods.js +0 -35
  82. package/dist/dropdown.option.test.basics.d.ts +0 -1
  83. package/dist/dropdown.option.test.basics.js +0 -34
  84. package/dist/dropdown.option.test.basics.multiple.d.ts +0 -1
  85. package/dist/dropdown.option.test.basics.multiple.js +0 -36
  86. package/dist/dropdown.option.test.basics.single.d.ts +0 -1
  87. package/dist/dropdown.option.test.basics.single.js +0 -29
  88. package/dist/dropdown.option.test.events.d.ts +0 -1
  89. package/dist/dropdown.option.test.events.js +0 -36
  90. package/dist/dropdown.option.test.focus.d.ts +0 -1
  91. package/dist/dropdown.option.test.focus.js +0 -11
  92. package/dist/dropdown.option.test.interactions.multiple.d.ts +0 -1
  93. package/dist/dropdown.option.test.interactions.multiple.js +0 -42
  94. package/dist/dropdown.option.test.interactions.single.d.ts +0 -1
  95. package/dist/dropdown.option.test.interactions.single.js +0 -76
  96. package/dist/dropdown.stories.d.ts +0 -8
  97. package/dist/dropdown.test.basics.d.ts +0 -1
  98. package/dist/dropdown.test.basics.filterable.d.ts +0 -1
  99. package/dist/dropdown.test.basics.filterable.js +0 -108
  100. package/dist/dropdown.test.basics.js +0 -181
  101. package/dist/dropdown.test.basics.multiple.d.ts +0 -1
  102. package/dist/dropdown.test.basics.multiple.js +0 -259
  103. package/dist/dropdown.test.basics.single.d.ts +0 -1
  104. package/dist/dropdown.test.basics.single.js +0 -122
  105. package/dist/dropdown.test.events.d.ts +0 -1
  106. package/dist/dropdown.test.events.filterable.d.ts +0 -1
  107. package/dist/dropdown.test.events.filterable.js +0 -31
  108. package/dist/dropdown.test.events.js +0 -251
  109. package/dist/dropdown.test.events.multiple.d.ts +0 -1
  110. package/dist/dropdown.test.events.multiple.js +0 -446
  111. package/dist/dropdown.test.events.single.d.ts +0 -1
  112. package/dist/dropdown.test.events.single.js +0 -343
  113. package/dist/dropdown.test.focus.d.ts +0 -1
  114. package/dist/dropdown.test.focus.filterable.d.ts +0 -1
  115. package/dist/dropdown.test.focus.filterable.js +0 -140
  116. package/dist/dropdown.test.focus.js +0 -107
  117. package/dist/dropdown.test.focus.multiple.d.ts +0 -1
  118. package/dist/dropdown.test.focus.multiple.js +0 -170
  119. package/dist/dropdown.test.focus.single.d.ts +0 -1
  120. package/dist/dropdown.test.focus.single.js +0 -42
  121. package/dist/dropdown.test.form.d.ts +0 -1
  122. package/dist/dropdown.test.form.js +0 -74
  123. package/dist/dropdown.test.form.multiple.d.ts +0 -1
  124. package/dist/dropdown.test.form.multiple.js +0 -151
  125. package/dist/dropdown.test.form.single.d.ts +0 -1
  126. package/dist/dropdown.test.form.single.js +0 -129
  127. package/dist/dropdown.test.interactions.d.ts +0 -1
  128. package/dist/dropdown.test.interactions.filterable.d.ts +0 -1
  129. package/dist/dropdown.test.interactions.filterable.js +0 -805
  130. package/dist/dropdown.test.interactions.js +0 -696
  131. package/dist/dropdown.test.interactions.multiple.d.ts +0 -1
  132. package/dist/dropdown.test.interactions.multiple.js +0 -1026
  133. package/dist/dropdown.test.interactions.single.d.ts +0 -1
  134. package/dist/dropdown.test.interactions.single.js +0 -569
  135. package/dist/dropdown.test.validity.d.ts +0 -1
  136. package/dist/dropdown.test.validity.js +0 -181
  137. package/dist/form-controls-layout.stories.d.ts +0 -10
  138. package/dist/form-controls-layout.test.basics.d.ts +0 -2
  139. package/dist/form-controls-layout.test.basics.js +0 -75
  140. package/dist/form-controls-layout.test.interactions.d.ts +0 -2
  141. package/dist/form-controls-layout.test.interactions.js +0 -26
  142. package/dist/icon-button.stories.d.ts +0 -6
  143. package/dist/icon-button.test.basics.d.ts +0 -1
  144. package/dist/icon-button.test.basics.js +0 -43
  145. package/dist/icon-button.test.focus.d.ts +0 -1
  146. package/dist/icon-button.test.focus.js +0 -13
  147. package/dist/input.stories.d.ts +0 -8
  148. package/dist/input.test.basics.d.ts +0 -1
  149. package/dist/input.test.basics.js +0 -138
  150. package/dist/input.test.events.d.ts +0 -1
  151. package/dist/input.test.events.js +0 -98
  152. package/dist/input.test.focus.d.ts +0 -1
  153. package/dist/input.test.focus.js +0 -58
  154. package/dist/input.test.form.d.ts +0 -1
  155. package/dist/input.test.form.js +0 -74
  156. package/dist/input.test.validity.d.ts +0 -1
  157. package/dist/input.test.validity.js +0 -258
  158. package/dist/label.test.basics.d.ts +0 -1
  159. package/dist/label.test.basics.js +0 -136
  160. package/dist/menu.button.test.basics.d.ts +0 -1
  161. package/dist/menu.button.test.basics.js +0 -43
  162. package/dist/menu.link.test.basics.d.ts +0 -1
  163. package/dist/menu.link.test.basics.js +0 -47
  164. package/dist/menu.options.test.basics.d.ts +0 -2
  165. package/dist/menu.options.test.basics.js +0 -44
  166. package/dist/menu.options.test.events.d.ts +0 -1
  167. package/dist/menu.options.test.events.js +0 -19
  168. package/dist/menu.stories.d.ts +0 -11
  169. package/dist/menu.test.basics.d.ts +0 -1
  170. package/dist/menu.test.basics.js +0 -178
  171. package/dist/menu.test.events.d.ts +0 -3
  172. package/dist/menu.test.events.js +0 -125
  173. package/dist/menu.test.focus.d.ts +0 -2
  174. package/dist/menu.test.focus.js +0 -102
  175. package/dist/menu.test.interactions.d.ts +0 -3
  176. package/dist/menu.test.interactions.js +0 -1069
  177. package/dist/modal.icon-button.test.basics.d.ts +0 -1
  178. package/dist/modal.icon-button.test.basics.js +0 -46
  179. package/dist/modal.stories.d.ts +0 -13
  180. package/dist/modal.tertiary-icon.test.basics.d.ts +0 -1
  181. package/dist/modal.tertiary-icon.test.basics.js +0 -60
  182. package/dist/modal.test.accessibility.d.ts +0 -1
  183. package/dist/modal.test.accessibility.js +0 -38
  184. package/dist/modal.test.basics.d.ts +0 -3
  185. package/dist/modal.test.basics.js +0 -204
  186. package/dist/modal.test.close.d.ts +0 -1
  187. package/dist/modal.test.close.js +0 -35
  188. package/dist/modal.test.events.d.ts +0 -1
  189. package/dist/modal.test.events.js +0 -99
  190. package/dist/modal.test.lock-scroll.d.ts +0 -1
  191. package/dist/modal.test.lock-scroll.js +0 -67
  192. package/dist/modal.test.methods.d.ts +0 -1
  193. package/dist/modal.test.methods.js +0 -20
  194. package/dist/modal.test.scrollbars.d.ts +0 -1
  195. package/dist/modal.test.scrollbars.js +0 -18
  196. package/dist/radio-group.stories.d.ts +0 -6
  197. package/dist/radio-group.test.basics.d.ts +0 -2
  198. package/dist/radio-group.test.basics.js +0 -324
  199. package/dist/radio-group.test.events.d.ts +0 -2
  200. package/dist/radio-group.test.events.js +0 -278
  201. package/dist/radio-group.test.focus.d.ts +0 -2
  202. package/dist/radio-group.test.focus.js +0 -95
  203. package/dist/radio-group.test.form.d.ts +0 -1
  204. package/dist/radio-group.test.form.js +0 -124
  205. package/dist/radio-group.test.validity.d.ts +0 -1
  206. package/dist/radio-group.test.validity.js +0 -311
  207. package/dist/split-button.primary-button.test.basics.d.ts +0 -1
  208. package/dist/split-button.primary-button.test.basics.js +0 -31
  209. package/dist/split-button.primary-button.test.focus.d.ts +0 -1
  210. package/dist/split-button.primary-button.test.focus.js +0 -14
  211. package/dist/split-button.primary-link.test.basics.d.ts +0 -1
  212. package/dist/split-button.primary-link.test.basics.js +0 -30
  213. package/dist/split-button.primary-link.test.focus.d.ts +0 -1
  214. package/dist/split-button.primary-link.test.focus.js +0 -15
  215. package/dist/split-button.secondary-button.test.basics.d.ts +0 -1
  216. package/dist/split-button.secondary-button.test.basics.js +0 -58
  217. package/dist/split-button.secondary-button.test.focus.d.ts +0 -1
  218. package/dist/split-button.secondary-button.test.focus.js +0 -14
  219. package/dist/split-button.secondary-button.test.interactions.d.ts +0 -2
  220. package/dist/split-button.secondary-button.test.interactions.js +0 -30
  221. package/dist/split-button.stories.d.ts +0 -13
  222. package/dist/split-button.test.basics.d.ts +0 -2
  223. package/dist/split-button.test.basics.js +0 -87
  224. package/dist/split-button.test.interactions.d.ts +0 -4
  225. package/dist/split-button.test.interactions.js +0 -51
  226. package/dist/tab.group.test.basics.d.ts +0 -3
  227. package/dist/tab.group.test.basics.js +0 -234
  228. package/dist/tab.group.test.interactions.d.ts +0 -3
  229. package/dist/tab.group.test.interactions.js +0 -434
  230. package/dist/tab.test.basics.d.ts +0 -1
  231. package/dist/tab.test.basics.js +0 -50
  232. package/dist/tabs.stories.d.ts +0 -8
  233. package/dist/tag.stories.d.ts +0 -7
  234. package/dist/tag.test.basics.d.ts +0 -1
  235. package/dist/tag.test.basics.js +0 -28
  236. package/dist/tag.test.events.d.ts +0 -1
  237. package/dist/tag.test.events.js +0 -93
  238. package/dist/tag.test.focus.d.ts +0 -1
  239. package/dist/tag.test.focus.js +0 -10
  240. package/dist/tag.test.interactions.d.ts +0 -1
  241. package/dist/tag.test.interactions.js +0 -36
  242. package/dist/textarea.stories.d.ts +0 -5
  243. package/dist/textarea.test.basics.d.ts +0 -1
  244. package/dist/textarea.test.basics.js +0 -177
  245. package/dist/textarea.test.events.d.ts +0 -1
  246. package/dist/textarea.test.events.js +0 -106
  247. package/dist/textarea.test.form.d.ts +0 -1
  248. package/dist/textarea.test.form.js +0 -71
  249. package/dist/textarea.test.validity.d.ts +0 -1
  250. package/dist/textarea.test.validity.js +0 -204
  251. package/dist/toasts.stories.d.ts +0 -7
  252. package/dist/toasts.test.basics.d.ts +0 -1
  253. package/dist/toasts.test.basics.js +0 -115
  254. package/dist/toasts.toast.test.basics.d.ts +0 -1
  255. package/dist/toasts.toast.test.basics.js +0 -139
  256. package/dist/toggle.stories.d.ts +0 -4
  257. package/dist/toggle.test.basics.d.ts +0 -1
  258. package/dist/toggle.test.basics.js +0 -69
  259. package/dist/toggle.test.events.d.ts +0 -1
  260. package/dist/toggle.test.events.js +0 -30
  261. package/dist/toggle.test.focus.d.ts +0 -1
  262. package/dist/toggle.test.focus.js +0 -9
  263. package/dist/toggle.test.interactions.d.ts +0 -1
  264. package/dist/toggle.test.interactions.js +0 -81
  265. package/dist/tooltip.stories.d.ts +0 -7
  266. package/dist/tooltip.test.basics.d.ts +0 -1
  267. package/dist/tooltip.test.basics.js +0 -100
  268. package/dist/tooltip.test.interactions.d.ts +0 -1
  269. package/dist/tooltip.test.interactions.js +0 -203
  270. package/dist/tree.item.icon-button.test.basics.d.ts +0 -1
  271. package/dist/tree.item.icon-button.test.basics.js +0 -22
  272. package/dist/tree.item.menu.test.basics.d.ts +0 -1
  273. package/dist/tree.item.menu.test.basics.js +0 -86
  274. package/dist/tree.item.test.basics.d.ts +0 -2
  275. package/dist/tree.item.test.basics.js +0 -138
  276. package/dist/tree.stories.d.ts +0 -9
  277. package/dist/tree.test.aria.d.ts +0 -1
  278. package/dist/tree.test.aria.js +0 -86
  279. package/dist/tree.test.basics.d.ts +0 -3
  280. package/dist/tree.test.basics.js +0 -130
  281. package/dist/tree.test.events.d.ts +0 -2
  282. package/dist/tree.test.events.js +0 -19
  283. package/dist/tree.test.focus.d.ts +0 -1
  284. package/dist/tree.test.focus.js +0 -383
@@ -1,115 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import { assert, expect, fixture, html } from '@open-wc/testing';
3
- import GlideCoreToasts from './toasts.js';
4
- GlideCoreToasts.shadowRootOptions.mode = 'open';
5
- // NOTE: Due to https://github.com/modernweb-dev/web/issues/2520, we sometimes need
6
- // to manually dispatch the `transitionend` event in tests.
7
- it('registers', async () => {
8
- expect(window.customElements.get('glide-core-toasts')).to.equal(GlideCoreToasts);
9
- });
10
- it('is accessible', async () => {
11
- const component = await fixture(html `<glide-core-toasts></glide-core-toasts>`);
12
- component.add({
13
- label: 'Test toast',
14
- description: 'Test toast description',
15
- variant: 'informational',
16
- });
17
- await expect(component).to.be.accessible();
18
- });
19
- it('sets correct role', async () => {
20
- const component = await fixture(html `<glide-core-toasts></glide-core-toasts>`);
21
- component.add({
22
- label: 'Test toast',
23
- description: 'Test toast description',
24
- variant: 'informational',
25
- });
26
- expect(component.shadowRoot?.firstElementChild?.getAttribute('role')).to.equal('region');
27
- });
28
- it('can add a toast', async () => {
29
- const component = await fixture(html `<glide-core-toasts></glide-core-toasts>`);
30
- component.add({
31
- label: 'Test toast',
32
- description: 'Test toast description',
33
- variant: 'informational',
34
- });
35
- const toasts = component.shadowRoot?.querySelectorAll('glide-core-toast');
36
- assert(toasts);
37
- expect(toasts.length).to.equal(1);
38
- const toast = toasts[0];
39
- expect(toast.label).to.equal('Test toast');
40
- expect(toast.description).to.equal('Test toast description');
41
- expect(toast.variant).to.equal('informational');
42
- });
43
- it('can add a toast with duration', async () => {
44
- const component = await fixture(html `<glide-core-toasts></glide-core-toasts>`);
45
- component.add({
46
- label: 'Test toast',
47
- description: 'Test toast description',
48
- variant: 'informational',
49
- duration: 10_000,
50
- });
51
- const toasts = component.shadowRoot?.querySelectorAll('glide-core-toast');
52
- assert(toasts);
53
- const toast = toasts[0];
54
- expect(toast.duration).to.equal(10_000);
55
- });
56
- it('can add multiple toasts', async () => {
57
- const component = await fixture(html `<glide-core-toasts></glide-core-toasts>`);
58
- component.add({
59
- label: 'Test toast',
60
- description: 'Test toast description',
61
- variant: 'informational',
62
- });
63
- component.add({
64
- label: 'Test toast 2',
65
- description: 'Test toast description 2',
66
- variant: 'success',
67
- });
68
- const toasts = component.shadowRoot?.querySelectorAll('glide-core-toast');
69
- assert(toasts);
70
- expect(toasts.length).to.equal(2);
71
- const toast1 = toasts[0];
72
- expect(toast1.label).to.equal('Test toast');
73
- expect(toast1.description).to.equal('Test toast description');
74
- expect(toast1.variant).to.equal('informational');
75
- const toast2 = toasts[1];
76
- expect(toast2.label).to.equal('Test toast 2');
77
- expect(toast2.description).to.equal('Test toast description 2');
78
- expect(toast2.variant).to.equal('success');
79
- });
80
- it('removes a closed toast from the DOM', async () => {
81
- const component = await fixture(html `<glide-core-toasts></glide-core-toasts>`);
82
- component.add({
83
- label: 'Test toast',
84
- description: 'Test toast description',
85
- variant: 'informational',
86
- });
87
- let toasts = component.shadowRoot?.querySelectorAll('glide-core-toast');
88
- assert(toasts);
89
- expect(toasts.length).to.equal(1);
90
- const toast = toasts[0];
91
- toast.close();
92
- toast.dispatchEvent(new Event('close', { bubbles: true }));
93
- toasts = component.shadowRoot?.querySelectorAll('glide-core-toast');
94
- expect(toasts?.length).to.equal(0);
95
- });
96
- it('is hidden unless there are toasts displayed', async () => {
97
- const component = await fixture(html `<glide-core-toasts></glide-core-toasts>`);
98
- const shadowComponent = component.shadowRoot?.querySelector('.component');
99
- assert(shadowComponent);
100
- expect(shadowComponent.hasAttribute('popover')).to.be.false;
101
- expect(getComputedStyle(shadowComponent).display).to.equal('none');
102
- component.add({
103
- label: 'Test toast',
104
- description: 'Test toast description',
105
- variant: 'informational',
106
- });
107
- expect(shadowComponent.getAttribute('popover')).to.equal('manual');
108
- expect(getComputedStyle(shadowComponent).display).to.equal('flex');
109
- const toasts = component.shadowRoot?.querySelectorAll('glide-core-toast');
110
- assert(toasts);
111
- const toast = toasts[0];
112
- toast.close();
113
- toast.dispatchEvent(new Event('close', { bubbles: true }));
114
- expect(getComputedStyle(shadowComponent).display).to.equal('none');
115
- });
@@ -1 +0,0 @@
1
- export {};
@@ -1,139 +0,0 @@
1
- import { assert, expect, fixture, html } from '@open-wc/testing';
2
- import GlideCoreToast from './toasts.toast.js';
3
- import sinon from 'sinon';
4
- GlideCoreToast.shadowRootOptions.mode = 'open';
5
- // NOTE: Due to https://github.com/modernweb-dev/web/issues/2520, we sometimes need
6
- // to manually dispatch the `transitionend` event in tests.
7
- it('registers', async () => {
8
- expect(window.customElements.get('glide-core-toast')).to.equal(GlideCoreToast);
9
- });
10
- it('is accessible', async () => {
11
- const component = await fixture(html `<glide-core-toast
12
- variant="informational"
13
- label="Label"
14
- description="Toast description"
15
- ></glide-core-toast>`);
16
- await expect(component).to.be.accessible();
17
- });
18
- it('sets correct role', async () => {
19
- const component = await fixture(html `<glide-core-toast
20
- variant="informational"
21
- label="Label"
22
- description="Toast description"
23
- ></glide-core-toast>`);
24
- expect(component.shadowRoot?.firstElementChild?.getAttribute('role')).to.equal('alert');
25
- });
26
- it('sets correct aria labelling', async () => {
27
- const component = await fixture(html `<glide-core-toast
28
- variant="informational"
29
- label="Label"
30
- description="Toast description"
31
- ></glide-core-toast>`);
32
- expect(component.shadowRoot?.firstElementChild?.getAttribute('aria-labelledby')).to.equal('label description');
33
- expect(component.shadowRoot?.firstElementChild?.querySelector('#label')
34
- ?.textContent).to.equal('Label');
35
- expect(component.shadowRoot?.firstElementChild?.querySelector('#description')
36
- ?.textContent).to.equal('Toast description');
37
- });
38
- it('sets variant, label, and description', async () => {
39
- const component = await fixture(html `<glide-core-toast
40
- variant="informational"
41
- label="Label"
42
- description="Toast description"
43
- ></glide-core-toast>`);
44
- await expect(component.variant).to.equal('informational');
45
- await expect(component.label).to.equal('Label');
46
- await expect(component.description).to.equal('Toast description');
47
- });
48
- it('opens and closes by default', async () => {
49
- const clock = sinon.useFakeTimers();
50
- const component = await fixture(html `<glide-core-toast
51
- variant="informational"
52
- label="Label"
53
- description="Toast description"
54
- ></glide-core-toast>`);
55
- clock.tick(3000);
56
- const shadowElement = component.shadowRoot.firstElementChild;
57
- await expect([...shadowElement.classList]).to.deep.equal([
58
- 'component',
59
- 'informational',
60
- 'open',
61
- ]);
62
- clock.tick(3000);
63
- shadowElement?.dispatchEvent(new TransitionEvent('transitionend'));
64
- await expect([
65
- ...component.shadowRoot.firstElementChild.classList,
66
- ]).to.deep.equal(['component', 'informational', 'closed']);
67
- clock.restore();
68
- });
69
- it('responds to duration', async () => {
70
- const clock = sinon.useFakeTimers();
71
- const component = await fixture(html `<glide-core-toast
72
- variant="informational"
73
- label="Label"
74
- description="Toast description"
75
- duration="10000"
76
- ></glide-core-toast>`);
77
- clock.tick(9500);
78
- const shadowElement = component.shadowRoot.firstElementChild;
79
- await expect([...shadowElement.classList]).to.deep.equal([
80
- 'component',
81
- 'informational',
82
- 'open',
83
- ]);
84
- clock.tick(1000);
85
- shadowElement?.dispatchEvent(new TransitionEvent('transitionend'));
86
- await expect([
87
- ...component.shadowRoot.firstElementChild.classList,
88
- ]).to.deep.equal(['component', 'informational', 'closed']);
89
- clock.restore();
90
- });
91
- it('responds to duration of Infinity', async () => {
92
- const clock = sinon.useFakeTimers();
93
- const component = await fixture(html `<glide-core-toast
94
- variant="informational"
95
- label="Label"
96
- description="Toast description"
97
- duration="Infinity"
98
- ></glide-core-toast>`);
99
- clock.tick(9500);
100
- const shadowElement = component.shadowRoot.firstElementChild;
101
- await expect([...shadowElement.classList]).to.deep.equal([
102
- 'component',
103
- 'informational',
104
- 'open',
105
- ]);
106
- clock.restore();
107
- });
108
- it('does not allow less than 5000 duration', async () => {
109
- const clock = sinon.useFakeTimers();
110
- const component = await fixture(html `<glide-core-toast
111
- variant="informational"
112
- label="Label"
113
- description="Toast description"
114
- duration="3000"
115
- ></glide-core-toast>`);
116
- clock.tick(4000);
117
- const shadowElement = component.shadowRoot.firstElementChild;
118
- await expect([...shadowElement.classList]).to.deep.equal([
119
- 'component',
120
- 'informational',
121
- 'open',
122
- ]);
123
- clock.restore();
124
- });
125
- it('can be closed by clicking on the x icon', async () => {
126
- const component = await fixture(html `<glide-core-toast
127
- variant="informational"
128
- label="Label"
129
- description="Toast description"
130
- ></glide-core-toast>`);
131
- const shadowElement = component.shadowRoot.firstElementChild;
132
- const closeButton = shadowElement?.querySelector('glide-core-icon-button[label="Close"]');
133
- assert(closeButton);
134
- closeButton.click();
135
- shadowElement?.dispatchEvent(new TransitionEvent('transitionend'));
136
- await expect([
137
- ...component.shadowRoot.firstElementChild.classList,
138
- ]).to.deep.equal(['component', 'informational', 'closed']);
139
- });
@@ -1,4 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/web-components';
2
- declare const meta: Meta;
3
- export default meta;
4
- export declare const Toggle: StoryObj;
@@ -1 +0,0 @@
1
- export {};
@@ -1,69 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import { expect, fixture, html } from '@open-wc/testing';
3
- import GlideCoreToggle from './toggle.js';
4
- GlideCoreToggle.shadowRootOptions.mode = 'open';
5
- it('registers', async () => {
6
- expect(window.customElements.get('glide-core-toggle')).to.equal(GlideCoreToggle);
7
- });
8
- it('has defaults', async () => {
9
- const component = await fixture(html `<glide-core-toggle label="Label"></glide-core-toggle>`);
10
- expect(component.hasAttribute('checked')).to.be.false;
11
- expect(component.checked).to.be.false;
12
- const input = component.shadowRoot?.querySelector('[data-test="input"]');
13
- expect(input?.getAttribute('aria-checked')).to.equal('false');
14
- expect(component.hasAttribute('disabled')).to.be.false;
15
- expect(component.disabled).to.be.false;
16
- expect(component.hasAttribute('hide-label')).to.be.false;
17
- expect(component.hideLabel).to.be.false;
18
- expect(component.getAttribute('orientation')).to.equal('horizontal');
19
- expect(component.orientation).to.equal('horizontal');
20
- expect(component.getAttribute('summary')).to.be.null;
21
- expect(component.summary).to.equal(undefined);
22
- });
23
- it('is accessible', async () => {
24
- const component = await fixture(html `<glide-core-toggle label="Label">
25
- <div slot="tooltip">Tooltip</div>
26
- <div slot="description">Description</div>
27
- </glide-core-toggle>`);
28
- await expect(component).to.be.accessible();
29
- });
30
- it('can have a label', async () => {
31
- const component = await fixture(html `<glide-core-toggle label="Label"></glide-core-toggle> `);
32
- expect(component.getAttribute('label')).to.equal('Label');
33
- expect(component.label).to.equal('Label');
34
- });
35
- it('can have a description', async () => {
36
- const component = await fixture(html `<glide-core-toggle label="Label">
37
- <div slot="description">Description</div>
38
- </glide-core-toggle>`);
39
- const assignedElements = component.shadowRoot
40
- ?.querySelector('slot[name="description"]')
41
- ?.assignedElements();
42
- expect(assignedElements?.at(0)?.textContent).to.equal('Description');
43
- });
44
- it('can have a summary', async () => {
45
- const component = await fixture(html `<glide-core-toggle summary="Summary"></glide-core-toggle> `);
46
- expect(component.getAttribute('summary')).to.equal('Summary');
47
- expect(component.summary).to.equal('Summary');
48
- });
49
- it('can have a tooltip', async () => {
50
- const component = await fixture(html `<glide-core-toggle label="Label">
51
- <div slot="tooltip">Tooltip</div>
52
- </glide-core-toggle>`);
53
- const assignedElements = component.shadowRoot
54
- ?.querySelector('slot[name="tooltip"]')
55
- ?.assignedElements();
56
- expect(assignedElements?.at(0)?.textContent).to.equal('Tooltip');
57
- });
58
- it('can be checked', async () => {
59
- const component = await fixture(html `<glide-core-toggle checked></glide-core-toggle> `);
60
- expect(component.hasAttribute('checked')).to.be.true;
61
- expect(component.checked).to.be.true;
62
- const input = component.shadowRoot?.querySelector('[data-test="input"]');
63
- expect(input?.getAttribute('aria-checked')).to.equal('true');
64
- });
65
- it('can be disabled', async () => {
66
- const component = await fixture(html `<glide-core-toggle disabled></glide-core-toggle> `);
67
- expect(component.hasAttribute('disabled')).to.be.true;
68
- expect(component.disabled).to.be.true;
69
- });
@@ -1 +0,0 @@
1
- export {};
@@ -1,30 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import { expect, fixture, html, oneEvent } from '@open-wc/testing';
3
- import GlideCoreToggle from './toggle.js';
4
- GlideCoreToggle.shadowRootOptions.mode = 'open';
5
- // `await aTimeout(0)` is used throughout. Using `oneEvent` instead and
6
- // expecting it to throw would work. But it wouldn't throw until its
7
- // timeout, which would make for a slow test. Its timeout can likely be
8
- // configured. But waiting a turn of the event loop, after which the event
9
- // will have been dispatched, gets the job done as well.
10
- it('dispatches a "click" event when clicked', async () => {
11
- const component = await fixture(html `<glide-core-toggle label="Label"></glide-core-toggle>`);
12
- setTimeout(() => component.click());
13
- const event = await oneEvent(component, 'click');
14
- expect(event instanceof PointerEvent).to.be.true;
15
- expect(event.bubbles).to.be.true;
16
- });
17
- it('dispatches a "change" event when clicked', async () => {
18
- const component = await fixture(html `<glide-core-toggle label="Label"></glide-core-toggle>`);
19
- setTimeout(() => component.click());
20
- const event = await oneEvent(component, 'change');
21
- expect(event instanceof Event).to.be.true;
22
- expect(event.bubbles).to.be.true;
23
- });
24
- it('dispatches an "input" event when clicked', async () => {
25
- const component = await fixture(html `<glide-core-toggle label="Label"></glide-core-toggle>`);
26
- setTimeout(() => component.click());
27
- const event = await oneEvent(component, 'input');
28
- expect(event instanceof Event).to.be.true;
29
- expect(event.bubbles).to.be.true;
30
- });
@@ -1 +0,0 @@
1
- export {};
@@ -1,9 +0,0 @@
1
- import { expect, fixture, html } from '@open-wc/testing';
2
- import GlideCoreToggle from './toggle.js';
3
- GlideCoreToggle.shadowRootOptions.mode = 'open';
4
- it('focuses the input when `focus()` is called', async () => {
5
- const component = await fixture(html `<glide-core-toggle label="Label"></glide-core-toggle>`);
6
- component.focus();
7
- const input = component.shadowRoot?.querySelector('[data-test="input"]');
8
- expect(component.shadowRoot?.activeElement).to.equal(input);
9
- });
@@ -1 +0,0 @@
1
- export {};
@@ -1,81 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
3
- import GlideCoreToggle from './toggle.js';
4
- GlideCoreToggle.shadowRootOptions.mode = 'open';
5
- it('is checked after being clicked', async () => {
6
- const component = await fixture(html `<glide-core-toggle label="Label"></glide-core-toggle>`);
7
- component.click();
8
- await elementUpdated(component);
9
- expect(component.checked).to.be.true;
10
- expect(component.hasAttribute('checked')).to.be.false;
11
- const input = component.shadowRoot?.querySelector('[data-test="input"]');
12
- expect(input?.getAttribute('aria-checked')).to.equal('true');
13
- });
14
- it('is unchecked after being clicked', async () => {
15
- const component = await fixture(html `<glide-core-toggle label="Label" checked></glide-core-toggle>`);
16
- component.click();
17
- await elementUpdated(component);
18
- expect(component.checked).to.be.false;
19
- expect(component.hasAttribute('checked')).to.be.true;
20
- const input = component.shadowRoot?.querySelector('[data-test="input"]');
21
- expect(input?.getAttribute('aria-checked')).to.equal('false');
22
- });
23
- it('is still checked after being clicked when checked but disabled', async () => {
24
- const component = await fixture(html `<glide-core-toggle
25
- label="Label"
26
- checked
27
- disabled
28
- ></glide-core-toggle>`);
29
- component.click();
30
- await elementUpdated(component);
31
- expect(component.checked).to.be.true;
32
- expect(component.hasAttribute('checked')).to.be.true;
33
- const input = component.shadowRoot?.querySelector('[data-test="input"]');
34
- expect(input?.getAttribute('aria-checked')).to.equal('true');
35
- });
36
- it('is still unchecked after being clicked when unchecked and disabled', async () => {
37
- const component = await fixture(html `<glide-core-toggle label="Label" disabled></glide-core-toggle>`);
38
- component.click();
39
- await elementUpdated(component);
40
- expect(component.hasAttribute('checked')).to.be.false;
41
- expect(component.checked).to.be.false;
42
- const input = component.shadowRoot?.querySelector('[data-test="input"]');
43
- expect(input?.getAttribute('aria-checked')).to.equal('false');
44
- });
45
- it('is unchecked after being clicked then forcibly unchecked via a "change" listener', async () => {
46
- const component = await fixture(html `<glide-core-toggle label="Label"></glide-core-toggle>`);
47
- component.addEventListener('change', async () => {
48
- await component.updateComplete;
49
- component.checked = false;
50
- });
51
- component.click();
52
- await elementUpdated(component);
53
- expect(component.hasAttribute('checked')).to.be.false;
54
- expect(component.checked).to.be.false;
55
- const input = component.shadowRoot?.querySelector('[data-test="input"]');
56
- expect(input?.getAttribute('aria-checked')).to.equal('false');
57
- });
58
- it('is unchecked after being clicked then forcibly unchecked via an "input" listener', async () => {
59
- const component = await fixture(html `<glide-core-toggle label="Label"></glide-core-toggle>`);
60
- component.addEventListener('input', async () => {
61
- await component.updateComplete;
62
- component.checked = false;
63
- });
64
- component.click();
65
- await elementUpdated(component);
66
- expect(component.hasAttribute('checked')).to.be.false;
67
- expect(component.checked).to.be.false;
68
- const input = component.shadowRoot?.querySelector('[data-test="input"]');
69
- expect(input?.getAttribute('aria-checked')).to.equal('false');
70
- });
71
- it('remains unchecked when its "click" event is canceled', async () => {
72
- const component = await fixture(html `<glide-core-toggle label="Label"></glide-core-toggle>`);
73
- component.addEventListener('click', async (event) => {
74
- event.preventDefault();
75
- });
76
- component.click();
77
- expect(component.hasAttribute('checked')).to.be.false;
78
- expect(component.checked).to.be.false;
79
- const input = component.shadowRoot?.querySelector('[data-test="input"]');
80
- expect(input?.getAttribute('aria-checked')).to.equal('false');
81
- });
@@ -1,7 +0,0 @@
1
- import './button.js';
2
- import './icons/storybook.js';
3
- import './tooltip.js';
4
- import type { Meta, StoryObj } from '@storybook/web-components';
5
- declare const meta: Meta;
6
- export default meta;
7
- export declare const Tooltip: StoryObj;
@@ -1 +0,0 @@
1
- export {};
@@ -1,100 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import { ArgumentError } from 'ow';
3
- import { aTimeout, expect, fixture, html } from '@open-wc/testing';
4
- import GlideCoreTooltip from './tooltip.js';
5
- import sinon from 'sinon';
6
- GlideCoreTooltip.shadowRootOptions.mode = 'open';
7
- it('registers', async () => {
8
- expect(window.customElements.get('glide-core-tooltip')).to.equal(GlideCoreTooltip);
9
- });
10
- it('is accessible', async () => {
11
- const component = await fixture(html `<glide-core-tooltip>
12
- Tooltip
13
- <span slot="target" tabindex="0">Target</span>
14
- </glide-core-tooltip>`);
15
- // See the comment in the component's `render` method for an explanation.
16
- await expect(component).to.be.accessible({
17
- ignoredRules: ['aria-tooltip-name'],
18
- });
19
- });
20
- it('has defaults', async () => {
21
- const component = await fixture(html `<glide-core-tooltip>
22
- Tooltip
23
- <span slot="target" tabindex="0">Target</span>
24
- </glide-core-tooltip>`);
25
- const tooltip = component.shadowRoot?.querySelector('[data-test="tooltip"]');
26
- // Wait for Floating UI.
27
- await aTimeout(0);
28
- expect(component.offset).to.equal(4);
29
- expect(component.open).to.be.false;
30
- expect(component.placement).to.be.be.undefined;
31
- expect(component.disabled).to.be.false;
32
- expect(component.shortcut).to.be.deep.equal([]);
33
- expect(tooltip?.checkVisibility()).to.be.false;
34
- });
35
- it('can be open', async () => {
36
- const component = await fixture(html `<glide-core-tooltip open>
37
- Tooltip
38
- <span slot="target" tabindex="0">Target</span>
39
- </glide-core-tooltip>`);
40
- const tooltip = component.shadowRoot?.querySelector('[data-test="tooltip"]');
41
- // Wait for Floating UI.
42
- await aTimeout(0);
43
- expect(tooltip?.checkVisibility()).to.be.true;
44
- });
45
- it('can have a single-key shortcut', async () => {
46
- const component = await fixture(html `<glide-core-tooltip .shortcut=${['Enter']}>
47
- Tooltip
48
- <span slot="target" tabindex="0">Target</span>
49
- </glide-core-tooltip>`);
50
- const shortcut = component.shadowRoot?.querySelector('[data-test="shortcut"]');
51
- expect(shortcut?.textContent?.trim()).to.equal('Enter');
52
- });
53
- it('can have a multi-key shortcut', async () => {
54
- const component = await fixture(html `<glide-core-tooltip .shortcut=${['CMD', 'K']}>
55
- Tooltip
56
- <span slot="target" tabindex="0">Target</span>
57
- </glide-core-tooltip>`);
58
- const shortcut = component.shadowRoot?.querySelector('[data-test="shortcut"]');
59
- expect(shortcut?.textContent?.replaceAll(/\s/g, '')).to.equal('CMD+K');
60
- });
61
- it('is not open when disabled', async () => {
62
- const component = await fixture(html `<glide-core-tooltip open disabled>
63
- Tooltip
64
- <span slot="target" tabindex="0">Target</span>
65
- </glide-core-tooltip>`);
66
- const tooltip = component.shadowRoot?.querySelector('[data-test="tooltip"]');
67
- // Wait for Floating UI.
68
- await aTimeout(0);
69
- expect(tooltip?.checkVisibility()).to.be.false;
70
- });
71
- it('throws if it does not have a default slot', async () => {
72
- const spy = sinon.spy();
73
- try {
74
- await fixture(html `<glide-core-tooltip></glide-core-tooltip>`);
75
- }
76
- catch (error) {
77
- if (error instanceof ArgumentError) {
78
- spy();
79
- }
80
- }
81
- expect(spy.callCount).to.equal(1);
82
- });
83
- it('throws if it does not have a "target" slot', async () => {
84
- const spy = sinon.spy();
85
- try {
86
- await fixture(html `<glide-core-tooltip>Tooltip</glide-core-tooltip>`);
87
- }
88
- catch (error) {
89
- if (error instanceof ArgumentError) {
90
- spy();
91
- }
92
- }
93
- expect(spy.callCount).to.equal(1);
94
- });
95
- it('has `placement` coverage', async () => {
96
- await fixture(html `<glide-core-tooltip open placement="top">
97
- Tooltip
98
- <span slot="target" tabindex="0">Target</span>
99
- </glide-core-tooltip>`);
100
- });
@@ -1 +0,0 @@
1
- import './tooltip.js';