@crowdstrike/glide-core 0.13.0 → 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 (287) 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.js +11 -11
  5. package/dist/dropdown.option.d.ts +1 -1
  6. package/dist/dropdown.option.js +1 -1
  7. package/dist/dropdown.styles.js +11 -16
  8. package/dist/input.styles.js +6 -1
  9. package/dist/styles/variables.css +1 -1
  10. package/dist/textarea.styles.js +6 -0
  11. package/dist/toasts.d.ts +2 -2
  12. package/dist/toasts.toast.d.ts +1 -1
  13. package/dist/toasts.toast.js +1 -1
  14. package/dist/toasts.toast.styles.js +8 -0
  15. package/dist/tree.item.styles.js +2 -2
  16. package/package.json +9 -6
  17. package/dist/accordion.stories.d.ts +0 -6
  18. package/dist/accordion.test.basics.d.ts +0 -1
  19. package/dist/accordion.test.basics.js +0 -28
  20. package/dist/accordion.test.events.d.ts +0 -1
  21. package/dist/accordion.test.events.js +0 -28
  22. package/dist/accordion.test.focus.d.ts +0 -1
  23. package/dist/accordion.test.focus.js +0 -11
  24. package/dist/accordion.test.interactions.d.ts +0 -1
  25. package/dist/accordion.test.interactions.js +0 -75
  26. package/dist/button-group.button.test.basics.d.ts +0 -1
  27. package/dist/button-group.button.test.basics.js +0 -97
  28. package/dist/button-group.button.test.events.d.ts +0 -1
  29. package/dist/button-group.button.test.events.js +0 -15
  30. package/dist/button-group.button.test.focus.d.ts +0 -1
  31. package/dist/button-group.button.test.focus.js +0 -13
  32. package/dist/button-group.button.test.interactions.d.ts +0 -1
  33. package/dist/button-group.button.test.interactions.js +0 -42
  34. package/dist/button-group.stories.d.ts +0 -7
  35. package/dist/button-group.test.basics.d.ts +0 -1
  36. package/dist/button-group.test.basics.js +0 -148
  37. package/dist/button-group.test.events.d.ts +0 -1
  38. package/dist/button-group.test.events.js +0 -241
  39. package/dist/button-group.test.focus.d.ts +0 -1
  40. package/dist/button-group.test.focus.js +0 -39
  41. package/dist/button-group.test.interactions.d.ts +0 -1
  42. package/dist/button-group.test.interactions.js +0 -91
  43. package/dist/button.stories.d.ts +0 -7
  44. package/dist/button.test.basics.d.ts +0 -1
  45. package/dist/button.test.basics.js +0 -69
  46. package/dist/button.test.events.d.ts +0 -1
  47. package/dist/button.test.events.js +0 -102
  48. package/dist/checkbox-group.stories.d.ts +0 -6
  49. package/dist/checkbox-group.test.basics.d.ts +0 -1
  50. package/dist/checkbox-group.test.basics.js +0 -116
  51. package/dist/checkbox-group.test.events.d.ts +0 -1
  52. package/dist/checkbox-group.test.events.js +0 -111
  53. package/dist/checkbox-group.test.focus.d.ts +0 -1
  54. package/dist/checkbox-group.test.focus.js +0 -70
  55. package/dist/checkbox-group.test.form.d.ts +0 -1
  56. package/dist/checkbox-group.test.form.js +0 -131
  57. package/dist/checkbox-group.test.interactions.d.ts +0 -1
  58. package/dist/checkbox-group.test.interactions.js +0 -82
  59. package/dist/checkbox-group.test.validity.d.ts +0 -1
  60. package/dist/checkbox-group.test.validity.js +0 -145
  61. package/dist/checkbox.stories.d.ts +0 -5
  62. package/dist/checkbox.test.basics.d.ts +0 -1
  63. package/dist/checkbox.test.basics.js +0 -90
  64. package/dist/checkbox.test.events.d.ts +0 -1
  65. package/dist/checkbox.test.events.js +0 -105
  66. package/dist/checkbox.test.focus.d.ts +0 -1
  67. package/dist/checkbox.test.focus.js +0 -51
  68. package/dist/checkbox.test.form.d.ts +0 -1
  69. package/dist/checkbox.test.form.js +0 -133
  70. package/dist/checkbox.test.interactions.d.ts +0 -1
  71. package/dist/checkbox.test.interactions.js +0 -131
  72. package/dist/checkbox.test.validity.d.ts +0 -1
  73. package/dist/checkbox.test.validity.js +0 -128
  74. package/dist/drawer.stories.d.ts +0 -6
  75. package/dist/drawer.test.accessibility.d.ts +0 -1
  76. package/dist/drawer.test.accessibility.js +0 -22
  77. package/dist/drawer.test.basics.d.ts +0 -1
  78. package/dist/drawer.test.basics.js +0 -44
  79. package/dist/drawer.test.closing.d.ts +0 -1
  80. package/dist/drawer.test.closing.js +0 -40
  81. package/dist/drawer.test.events.d.ts +0 -1
  82. package/dist/drawer.test.events.js +0 -42
  83. package/dist/drawer.test.methods.d.ts +0 -1
  84. package/dist/drawer.test.methods.js +0 -35
  85. package/dist/dropdown.option.test.basics.d.ts +0 -1
  86. package/dist/dropdown.option.test.basics.js +0 -34
  87. package/dist/dropdown.option.test.basics.multiple.d.ts +0 -1
  88. package/dist/dropdown.option.test.basics.multiple.js +0 -36
  89. package/dist/dropdown.option.test.basics.single.d.ts +0 -1
  90. package/dist/dropdown.option.test.basics.single.js +0 -29
  91. package/dist/dropdown.option.test.events.d.ts +0 -1
  92. package/dist/dropdown.option.test.events.js +0 -36
  93. package/dist/dropdown.option.test.focus.d.ts +0 -1
  94. package/dist/dropdown.option.test.focus.js +0 -11
  95. package/dist/dropdown.option.test.interactions.multiple.d.ts +0 -1
  96. package/dist/dropdown.option.test.interactions.multiple.js +0 -42
  97. package/dist/dropdown.option.test.interactions.single.d.ts +0 -1
  98. package/dist/dropdown.option.test.interactions.single.js +0 -76
  99. package/dist/dropdown.stories.d.ts +0 -8
  100. package/dist/dropdown.test.basics.d.ts +0 -1
  101. package/dist/dropdown.test.basics.filterable.d.ts +0 -1
  102. package/dist/dropdown.test.basics.filterable.js +0 -108
  103. package/dist/dropdown.test.basics.js +0 -181
  104. package/dist/dropdown.test.basics.multiple.d.ts +0 -1
  105. package/dist/dropdown.test.basics.multiple.js +0 -259
  106. package/dist/dropdown.test.basics.single.d.ts +0 -1
  107. package/dist/dropdown.test.basics.single.js +0 -122
  108. package/dist/dropdown.test.events.d.ts +0 -1
  109. package/dist/dropdown.test.events.filterable.d.ts +0 -1
  110. package/dist/dropdown.test.events.filterable.js +0 -31
  111. package/dist/dropdown.test.events.js +0 -251
  112. package/dist/dropdown.test.events.multiple.d.ts +0 -1
  113. package/dist/dropdown.test.events.multiple.js +0 -446
  114. package/dist/dropdown.test.events.single.d.ts +0 -1
  115. package/dist/dropdown.test.events.single.js +0 -343
  116. package/dist/dropdown.test.focus.d.ts +0 -1
  117. package/dist/dropdown.test.focus.filterable.d.ts +0 -1
  118. package/dist/dropdown.test.focus.filterable.js +0 -140
  119. package/dist/dropdown.test.focus.js +0 -107
  120. package/dist/dropdown.test.focus.multiple.d.ts +0 -1
  121. package/dist/dropdown.test.focus.multiple.js +0 -170
  122. package/dist/dropdown.test.focus.single.d.ts +0 -1
  123. package/dist/dropdown.test.focus.single.js +0 -42
  124. package/dist/dropdown.test.form.d.ts +0 -1
  125. package/dist/dropdown.test.form.js +0 -74
  126. package/dist/dropdown.test.form.multiple.d.ts +0 -1
  127. package/dist/dropdown.test.form.multiple.js +0 -151
  128. package/dist/dropdown.test.form.single.d.ts +0 -1
  129. package/dist/dropdown.test.form.single.js +0 -129
  130. package/dist/dropdown.test.interactions.d.ts +0 -1
  131. package/dist/dropdown.test.interactions.filterable.d.ts +0 -1
  132. package/dist/dropdown.test.interactions.filterable.js +0 -805
  133. package/dist/dropdown.test.interactions.js +0 -696
  134. package/dist/dropdown.test.interactions.multiple.d.ts +0 -1
  135. package/dist/dropdown.test.interactions.multiple.js +0 -1026
  136. package/dist/dropdown.test.interactions.single.d.ts +0 -1
  137. package/dist/dropdown.test.interactions.single.js +0 -569
  138. package/dist/dropdown.test.validity.d.ts +0 -1
  139. package/dist/dropdown.test.validity.js +0 -181
  140. package/dist/form-controls-layout.stories.d.ts +0 -10
  141. package/dist/form-controls-layout.test.basics.d.ts +0 -2
  142. package/dist/form-controls-layout.test.basics.js +0 -75
  143. package/dist/form-controls-layout.test.interactions.d.ts +0 -2
  144. package/dist/form-controls-layout.test.interactions.js +0 -26
  145. package/dist/icon-button.stories.d.ts +0 -6
  146. package/dist/icon-button.test.basics.d.ts +0 -1
  147. package/dist/icon-button.test.basics.js +0 -43
  148. package/dist/icon-button.test.focus.d.ts +0 -1
  149. package/dist/icon-button.test.focus.js +0 -13
  150. package/dist/input.stories.d.ts +0 -8
  151. package/dist/input.test.basics.d.ts +0 -1
  152. package/dist/input.test.basics.js +0 -138
  153. package/dist/input.test.events.d.ts +0 -1
  154. package/dist/input.test.events.js +0 -98
  155. package/dist/input.test.focus.d.ts +0 -1
  156. package/dist/input.test.focus.js +0 -58
  157. package/dist/input.test.form.d.ts +0 -1
  158. package/dist/input.test.form.js +0 -74
  159. package/dist/input.test.validity.d.ts +0 -1
  160. package/dist/input.test.validity.js +0 -258
  161. package/dist/label.test.basics.d.ts +0 -1
  162. package/dist/label.test.basics.js +0 -136
  163. package/dist/menu.button.test.basics.d.ts +0 -1
  164. package/dist/menu.button.test.basics.js +0 -43
  165. package/dist/menu.link.test.basics.d.ts +0 -1
  166. package/dist/menu.link.test.basics.js +0 -47
  167. package/dist/menu.options.test.basics.d.ts +0 -2
  168. package/dist/menu.options.test.basics.js +0 -44
  169. package/dist/menu.options.test.events.d.ts +0 -1
  170. package/dist/menu.options.test.events.js +0 -19
  171. package/dist/menu.stories.d.ts +0 -11
  172. package/dist/menu.test.basics.d.ts +0 -1
  173. package/dist/menu.test.basics.js +0 -178
  174. package/dist/menu.test.events.d.ts +0 -3
  175. package/dist/menu.test.events.js +0 -125
  176. package/dist/menu.test.focus.d.ts +0 -2
  177. package/dist/menu.test.focus.js +0 -102
  178. package/dist/menu.test.interactions.d.ts +0 -3
  179. package/dist/menu.test.interactions.js +0 -1069
  180. package/dist/modal.icon-button.test.basics.d.ts +0 -1
  181. package/dist/modal.icon-button.test.basics.js +0 -46
  182. package/dist/modal.stories.d.ts +0 -13
  183. package/dist/modal.tertiary-icon.test.basics.d.ts +0 -1
  184. package/dist/modal.tertiary-icon.test.basics.js +0 -60
  185. package/dist/modal.test.accessibility.d.ts +0 -1
  186. package/dist/modal.test.accessibility.js +0 -38
  187. package/dist/modal.test.basics.d.ts +0 -3
  188. package/dist/modal.test.basics.js +0 -204
  189. package/dist/modal.test.close.d.ts +0 -1
  190. package/dist/modal.test.close.js +0 -35
  191. package/dist/modal.test.events.d.ts +0 -1
  192. package/dist/modal.test.events.js +0 -99
  193. package/dist/modal.test.lock-scroll.d.ts +0 -1
  194. package/dist/modal.test.lock-scroll.js +0 -67
  195. package/dist/modal.test.methods.d.ts +0 -1
  196. package/dist/modal.test.methods.js +0 -20
  197. package/dist/modal.test.scrollbars.d.ts +0 -1
  198. package/dist/modal.test.scrollbars.js +0 -18
  199. package/dist/radio-group.stories.d.ts +0 -6
  200. package/dist/radio-group.test.basics.d.ts +0 -2
  201. package/dist/radio-group.test.basics.js +0 -324
  202. package/dist/radio-group.test.events.d.ts +0 -2
  203. package/dist/radio-group.test.events.js +0 -278
  204. package/dist/radio-group.test.focus.d.ts +0 -2
  205. package/dist/radio-group.test.focus.js +0 -95
  206. package/dist/radio-group.test.form.d.ts +0 -1
  207. package/dist/radio-group.test.form.js +0 -124
  208. package/dist/radio-group.test.validity.d.ts +0 -1
  209. package/dist/radio-group.test.validity.js +0 -311
  210. package/dist/split-button.primary-button.test.basics.d.ts +0 -1
  211. package/dist/split-button.primary-button.test.basics.js +0 -31
  212. package/dist/split-button.primary-button.test.focus.d.ts +0 -1
  213. package/dist/split-button.primary-button.test.focus.js +0 -14
  214. package/dist/split-button.primary-link.test.basics.d.ts +0 -1
  215. package/dist/split-button.primary-link.test.basics.js +0 -30
  216. package/dist/split-button.primary-link.test.focus.d.ts +0 -1
  217. package/dist/split-button.primary-link.test.focus.js +0 -15
  218. package/dist/split-button.secondary-button.test.basics.d.ts +0 -1
  219. package/dist/split-button.secondary-button.test.basics.js +0 -58
  220. package/dist/split-button.secondary-button.test.focus.d.ts +0 -1
  221. package/dist/split-button.secondary-button.test.focus.js +0 -14
  222. package/dist/split-button.secondary-button.test.interactions.d.ts +0 -2
  223. package/dist/split-button.secondary-button.test.interactions.js +0 -30
  224. package/dist/split-button.stories.d.ts +0 -13
  225. package/dist/split-button.test.basics.d.ts +0 -2
  226. package/dist/split-button.test.basics.js +0 -87
  227. package/dist/split-button.test.interactions.d.ts +0 -4
  228. package/dist/split-button.test.interactions.js +0 -51
  229. package/dist/tab.group.test.basics.d.ts +0 -3
  230. package/dist/tab.group.test.basics.js +0 -234
  231. package/dist/tab.group.test.interactions.d.ts +0 -3
  232. package/dist/tab.group.test.interactions.js +0 -434
  233. package/dist/tab.test.basics.d.ts +0 -1
  234. package/dist/tab.test.basics.js +0 -50
  235. package/dist/tabs.stories.d.ts +0 -8
  236. package/dist/tag.stories.d.ts +0 -7
  237. package/dist/tag.test.basics.d.ts +0 -1
  238. package/dist/tag.test.basics.js +0 -28
  239. package/dist/tag.test.events.d.ts +0 -1
  240. package/dist/tag.test.events.js +0 -93
  241. package/dist/tag.test.focus.d.ts +0 -1
  242. package/dist/tag.test.focus.js +0 -10
  243. package/dist/tag.test.interactions.d.ts +0 -1
  244. package/dist/tag.test.interactions.js +0 -36
  245. package/dist/textarea.stories.d.ts +0 -5
  246. package/dist/textarea.test.basics.d.ts +0 -1
  247. package/dist/textarea.test.basics.js +0 -177
  248. package/dist/textarea.test.events.d.ts +0 -1
  249. package/dist/textarea.test.events.js +0 -106
  250. package/dist/textarea.test.form.d.ts +0 -1
  251. package/dist/textarea.test.form.js +0 -71
  252. package/dist/textarea.test.validity.d.ts +0 -1
  253. package/dist/textarea.test.validity.js +0 -204
  254. package/dist/toasts.stories.d.ts +0 -7
  255. package/dist/toasts.test.basics.d.ts +0 -1
  256. package/dist/toasts.test.basics.js +0 -115
  257. package/dist/toasts.toast.test.basics.d.ts +0 -1
  258. package/dist/toasts.toast.test.basics.js +0 -139
  259. package/dist/toggle.stories.d.ts +0 -4
  260. package/dist/toggle.test.basics.d.ts +0 -1
  261. package/dist/toggle.test.basics.js +0 -69
  262. package/dist/toggle.test.events.d.ts +0 -1
  263. package/dist/toggle.test.events.js +0 -30
  264. package/dist/toggle.test.focus.d.ts +0 -1
  265. package/dist/toggle.test.focus.js +0 -9
  266. package/dist/toggle.test.interactions.d.ts +0 -1
  267. package/dist/toggle.test.interactions.js +0 -81
  268. package/dist/tooltip.stories.d.ts +0 -7
  269. package/dist/tooltip.test.basics.d.ts +0 -1
  270. package/dist/tooltip.test.basics.js +0 -100
  271. package/dist/tooltip.test.interactions.d.ts +0 -1
  272. package/dist/tooltip.test.interactions.js +0 -203
  273. package/dist/tree.item.icon-button.test.basics.d.ts +0 -1
  274. package/dist/tree.item.icon-button.test.basics.js +0 -22
  275. package/dist/tree.item.menu.test.basics.d.ts +0 -1
  276. package/dist/tree.item.menu.test.basics.js +0 -86
  277. package/dist/tree.item.test.basics.d.ts +0 -2
  278. package/dist/tree.item.test.basics.js +0 -138
  279. package/dist/tree.stories.d.ts +0 -9
  280. package/dist/tree.test.aria.d.ts +0 -1
  281. package/dist/tree.test.aria.js +0 -86
  282. package/dist/tree.test.basics.d.ts +0 -3
  283. package/dist/tree.test.basics.js +0 -130
  284. package/dist/tree.test.events.d.ts +0 -2
  285. package/dist/tree.test.events.js +0 -19
  286. package/dist/tree.test.focus.d.ts +0 -1
  287. package/dist/tree.test.focus.js +0 -383
@@ -1 +0,0 @@
1
- export {};
@@ -1,46 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import { ArgumentError } from 'ow';
3
- import { expect, fixture, html } from '@open-wc/testing';
4
- import GlideCoreModalIconButton from './modal.icon-button.js';
5
- import sinon from 'sinon';
6
- GlideCoreModalIconButton.shadowRootOptions.mode = 'open';
7
- it('registers', async () => {
8
- expect(window.customElements.get('glide-core-modal-icon-button')).to.equal(GlideCoreModalIconButton);
9
- });
10
- it('is accessible', async () => {
11
- const component = await fixture(html `<glide-core-modal-icon-button>Test</glide-core-modal-icon-button>`);
12
- await expect(component).to.be.accessible();
13
- });
14
- it('renders and sets default attributes', async () => {
15
- const component = await fixture(html `
16
- <glide-core-modal-icon-button>Test</glide-core-modal-icon-button>
17
- `);
18
- expect(component).to.be.ok;
19
- const buttonElement = component.shadowRoot?.querySelector('glide-core-icon-button');
20
- expect(buttonElement).to.be.not.null;
21
- expect(buttonElement?.getAttribute('variant')).to.equal('tertiary');
22
- });
23
- it('adds an accessible label when given', async () => {
24
- const component = await fixture(html `<glide-core-modal-icon-button label="test-label"
25
- >Test</glide-core-modal-icon-button
26
- >`);
27
- const buttonElement = component.shadowRoot?.querySelector('glide-core-icon-button');
28
- expect(buttonElement?.getAttribute('label')).to.equal('test-label');
29
- });
30
- it('does not add an acceessible label when not given', async () => {
31
- const component = await fixture(html `<glide-core-modal-icon-button>Test</glide-core-modal-icon-button>`);
32
- const buttonElement = component.shadowRoot?.querySelector('glide-core-icon-button');
33
- expect(buttonElement?.getAttribute('label')).to.equal('');
34
- });
35
- it('throws if it does not have a default slot', async () => {
36
- const spy = sinon.spy();
37
- try {
38
- await fixture(html `<glide-core-modal-icon-button></glide-core-modal-icon-button>`);
39
- }
40
- catch (error) {
41
- if (error instanceof ArgumentError) {
42
- spy();
43
- }
44
- }
45
- expect(spy.callCount).to.equal(1);
46
- });
@@ -1,13 +0,0 @@
1
- import './button.js';
2
- import './icons/storybook.js';
3
- import './modal.js';
4
- import './modal.js';
5
- import './modal.tertiary-icon.js';
6
- import './tooltip.js';
7
- import type { Meta, StoryObj } from '@storybook/web-components';
8
- declare const meta: Meta;
9
- export default meta;
10
- export declare const Modal: StoryObj;
11
- export declare const WithHeaderActions: StoryObj;
12
- export declare const WithTertiaryButton: StoryObj;
13
- export declare const WithTertiaryIconAndButton: StoryObj;
@@ -1 +0,0 @@
1
- import './button.js';
@@ -1,60 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import './button.js';
3
- import { ArgumentError } from 'ow';
4
- import { expect, fixture, html } from '@open-wc/testing';
5
- import GlideCoreModalTertiaryIcon from './modal.tertiary-icon.js';
6
- import sinon from 'sinon';
7
- GlideCoreModalTertiaryIcon.shadowRootOptions.mode = 'open';
8
- it('registers', async () => {
9
- expect(window.customElements.get('glide-core-modal-tertiary-icon')).to.equal(GlideCoreModalTertiaryIcon);
10
- });
11
- it('is accessible', async () => {
12
- const component = await fixture(html `<glide-core-modal-tertiary-icon>Test</glide-core-modal-tertiary-icon>`);
13
- await expect(component).to.be.accessible();
14
- });
15
- it('renders and sets default attributes', async () => {
16
- const component = await fixture(html `
17
- <glide-core-modal-tertiary-icon>Test</glide-core-modal-tertiary-icon>
18
- `);
19
- expect(component).to.be.ok;
20
- const spanTag = component.shadowRoot?.querySelector('span');
21
- expect(spanTag?.getAttribute('tabindex')).to.equal('0');
22
- const tooltip = component.shadowRoot?.querySelector('glide-core-tooltip');
23
- expect(tooltip).to.not.be.null;
24
- });
25
- it('adds an accessible label when given', async () => {
26
- const component = await fixture(html `<glide-core-modal-tertiary-icon label="test-label"
27
- >Test</glide-core-modal-tertiary-icon
28
- >`);
29
- const spanElement = component.shadowRoot?.querySelector('span');
30
- expect(spanElement?.getAttribute('aria-label')).to.equal('test-label');
31
- });
32
- it('does not add an acceessible label when not given', async () => {
33
- const component = await fixture(html `<glide-core-modal-tertiary-icon>Test</glide-core-modal-tertiary-icon>`);
34
- const spanElement = component.shadowRoot?.querySelector('span');
35
- expect(spanElement).to.not.have.attribute('aria-label');
36
- });
37
- it('sets the tooltip placement when attribute "tooltip-placement" is given', async () => {
38
- const component = await fixture(html `<glide-core-modal-tertiary-icon tooltip-placement="right"
39
- >Test</glide-core-modal-tertiary-icon
40
- >`);
41
- const toolTip = component.shadowRoot?.querySelector('glide-core-tooltip');
42
- expect(toolTip?.getAttribute('placement')).to.equal('right');
43
- });
44
- it('sets the tooltip placement to "bottom" when attribute "tooltip-placement" is not given', async () => {
45
- const component = await fixture(html `<glide-core-modal-tertiary-icon>Test</glide-core-modal-tertiary-icon>`);
46
- const toolTip = component.shadowRoot?.querySelector('glide-core-tooltip');
47
- expect(toolTip?.getAttribute('placement')).to.equal('bottom');
48
- });
49
- it('throws if it does not have a default slot', async () => {
50
- const spy = sinon.spy();
51
- try {
52
- await fixture(html `<glide-core-modal-tertiary-icon></glide-core-modal-tertiary-icon>`);
53
- }
54
- catch (error) {
55
- if (error instanceof ArgumentError) {
56
- spy();
57
- }
58
- }
59
- expect(spy.callCount).to.equal(1);
60
- });
@@ -1 +0,0 @@
1
- export {};
@@ -1,38 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import { expect, fixture, html } from '@open-wc/testing';
3
- import GlideCoreModal from './modal.js';
4
- GlideCoreModal.shadowRootOptions.mode = 'open';
5
- it('is accessible', async () => {
6
- const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
7
- await expect(component).to.be.accessible();
8
- });
9
- it('focuses the dialog upon opening', async () => {
10
- const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
11
- component.showModal();
12
- const dialogElement = component.shadowRoot?.querySelector('dialog');
13
- expect(component.shadowRoot?.activeElement).to.equal(dialogElement);
14
- });
15
- it('sets the tabindex on the dialog to "-1"', async () => {
16
- const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
17
- component.showModal();
18
- const dialogElement = component.shadowRoot?.querySelector('dialog');
19
- expect(dialogElement?.getAttribute('tabindex')).to.equal('-1');
20
- });
21
- it('sets the "toolbar" role on the header-actions section', async () => {
22
- const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
23
- component.showModal();
24
- const toolbar = component.shadowRoot?.querySelector('[role="toolbar"');
25
- expect(toolbar).to.be.ok;
26
- });
27
- it('sets proper aria attributes and roles on the article', async () => {
28
- const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
29
- component.showModal();
30
- const content = component.shadowRoot?.querySelector('[role="region"');
31
- expect(content).to.be.ok;
32
- expect(content?.tagName).to.equal('ARTICLE');
33
- expect(content?.getAttribute('aria-labelledby')).to.equal('heading');
34
- expect(content?.getAttribute('tabindex')).to.equal('0');
35
- const label = component.shadowRoot?.querySelector('#heading');
36
- expect(label).to.be.ok;
37
- expect(label?.tagName).to.equal('H2');
38
- });
@@ -1,3 +0,0 @@
1
- import './button.js';
2
- import './modal.icon-button.js';
3
- import './modal.js';
@@ -1,204 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import './button.js';
3
- import './modal.icon-button.js';
4
- import './modal.js';
5
- import { ArgumentError } from 'ow';
6
- import { expect, fixture, html } from '@open-wc/testing';
7
- import GlideCoreModal from './modal.js';
8
- import expectArgumentError from './library/expect-argument-error.js';
9
- import sinon from 'sinon';
10
- GlideCoreModal.shadowRootOptions.mode = 'open';
11
- it('registers', async () => {
12
- expect(window.customElements.get('glide-core-modal')).to.equal(GlideCoreModal);
13
- });
14
- it('has defaults', async () => {
15
- const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
16
- const dialog = component.shadowRoot?.querySelector('dialog');
17
- expect(dialog).to.be.ok;
18
- expect(dialog?.hasAttribute('open')).to.be.false;
19
- expect(component.size).to.equal('medium');
20
- expect(component.getAttribute('size')).to.equal('medium');
21
- expect(component.backButton).to.be.false;
22
- expect(component.hasAttribute('back-button')).to.be.false;
23
- });
24
- it('renders the provided "label"', async () => {
25
- const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
26
- component.showModal();
27
- const label = component.shadowRoot?.querySelector('[data-test="heading"]');
28
- expect(label).to.be.ok;
29
- expect(label?.textContent?.trim()).to.equal('Label');
30
- });
31
- it('does not render the show back button in the label by default', async () => {
32
- const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
33
- component.showModal();
34
- expect(component.shadowRoot?.querySelector('[data-test="back-button"]')).to.be.null;
35
- });
36
- it('renders the show back button in the label when provided with "back-button"', async () => {
37
- const component = await fixture(html `<glide-core-modal label="Label" back-button>
38
- Content
39
- </glide-core-modal>`);
40
- component.showModal();
41
- expect(component.shadowRoot?.querySelector('[data-test="back-button"]')).to.be.ok;
42
- });
43
- it('renders the provided default slotted content', async () => {
44
- const component = await fixture(html `<glide-core-modal label="Label">
45
- <p data-body>Inner content</p>
46
- </glide-core-modal>`);
47
- component.showModal();
48
- const body = component.querySelector('[data-body]');
49
- expect(body).to.be.ok;
50
- });
51
- it('renders the provided primary slot content', async () => {
52
- const component = await fixture(html `<glide-core-modal label="Label">
53
- Content
54
- <glide-core-button
55
- label="Primary"
56
- slot="primary"
57
- data-primary
58
- ></glide-core-button>
59
- </glide-core-modal>`);
60
- component.showModal();
61
- const slotContent = component.querySelector('[data-primary]');
62
- expect(slotContent).to.be.ok;
63
- const slotNodes = component.shadowRoot
64
- ?.querySelector('slot[name="primary"]')
65
- ?.assignedNodes();
66
- expect(slotNodes?.length).to.equal(1);
67
- });
68
- it('renders the provided secondary slot content', async () => {
69
- const component = await fixture(html `<glide-core-modal label="Label">
70
- Content
71
- <glide-core-button slot="secondary" data-secondary
72
- >Secondary</glide-core-button
73
- >
74
- </glide-core-modal>`);
75
- component.showModal();
76
- const slotContent = component.querySelector('[data-secondary]');
77
- expect(slotContent).to.be.ok;
78
- const slotNodes = component.shadowRoot
79
- ?.querySelector('slot[name="secondary"]')
80
- ?.assignedNodes();
81
- expect(slotNodes?.length).to.equal(1);
82
- });
83
- it('renders the provided tertiary slot content', async () => {
84
- const component = await fixture(html `<glide-core-modal label="Label">
85
- Content
86
- <glide-core-button slot="tertiary" data-tertiary
87
- >Tertiary</glide-core-button
88
- >
89
- </glide-core-modal>`);
90
- component.showModal();
91
- const slotContent = component.querySelector('[data-tertiary]');
92
- expect(slotContent).to.be.ok;
93
- const slotNodes = component.shadowRoot
94
- ?.querySelector('slot[name="tertiary"]')
95
- ?.assignedNodes();
96
- expect(slotNodes?.length).to.equal(1);
97
- });
98
- it('renders the provided header-actions slot content', async () => {
99
- const component = await fixture(html `<glide-core-modal label="Label">
100
- Content
101
-
102
- <glide-core-modal-icon-button slot="header-actions" data-actions="1"
103
- >action1</glide-core-modal-icon-button
104
- >
105
-
106
- <glide-core-modal-icon-button slot="header-actions" data-actions="2"
107
- >action2</glide-core-modal-icon-button
108
- >
109
- </glide-core-modal>`);
110
- component.showModal();
111
- const slotContent = component.querySelector('[data-actions]');
112
- expect(slotContent).to.be.ok;
113
- const slotNodes = component.shadowRoot
114
- ?.querySelector('slot[name="header-actions"]')
115
- ?.assignedNodes();
116
- expect(slotNodes?.length).to.equal(2);
117
- });
118
- it('defaults the size to "medium"', async () => {
119
- const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
120
- expect([
121
- ...component.shadowRoot.querySelector('dialog')
122
- .classList,
123
- ]).to.deep.equal(['component', 'medium']);
124
- });
125
- it('sets the size to "small"', async () => {
126
- const component = await fixture(html `<glide-core-modal label="Label" size="small">
127
- Content
128
- </glide-core-modal>`);
129
- expect([
130
- ...component.shadowRoot.querySelector('dialog')
131
- .classList,
132
- ]).to.deep.equal(['component', 'small']);
133
- });
134
- it('sets the size to "medium"', async () => {
135
- const component = await fixture(html `<glide-core-modal label="Label" size="medium">
136
- Content
137
- </glide-core-modal>`);
138
- expect([
139
- ...component.shadowRoot.querySelector('dialog')
140
- .classList,
141
- ]).to.deep.equal(['component', 'medium']);
142
- });
143
- it('sets the size to "large"', async () => {
144
- const component = await fixture(html `<glide-core-modal label="Label" size="large">
145
- Content
146
- </glide-core-modal>`);
147
- expect([
148
- ...component.shadowRoot.querySelector('dialog')
149
- .classList,
150
- ]).to.deep.equal(['component', 'large']);
151
- });
152
- it('sets the size to "xlarge"', async () => {
153
- const component = await fixture(html `<glide-core-modal label="Label" size="xlarge">
154
- Content
155
- </glide-core-modal>`);
156
- expect([
157
- ...component.shadowRoot.querySelector('dialog')
158
- .classList,
159
- ]).to.deep.equal(['component', 'xlarge']);
160
- });
161
- it('throws if it does not have a default slot', async () => {
162
- const spy = sinon.spy();
163
- try {
164
- await fixture(html `<glide-core-modal label="Label"></glide-core-modal>`);
165
- }
166
- catch (error) {
167
- if (error instanceof ArgumentError) {
168
- spy();
169
- }
170
- }
171
- expect(spy.callCount).to.equal(1);
172
- });
173
- it('throws an error when the "primary" footer slot has the incorrect type', async () => {
174
- await expectArgumentError(() => {
175
- return fixture(html `<glide-core-modal label="Label">
176
- Content
177
- <span slot="primary">Primary</span>
178
- </glide-core-modal>`);
179
- });
180
- });
181
- it('throws an error when the "secondary" footer slot has the incorrect type', async () => {
182
- await expectArgumentError(() => {
183
- return fixture(html `<glide-core-modal label="Label">
184
- Content
185
- <span slot="secondary">Secondary</span>
186
- </glide-core-modal>`);
187
- });
188
- });
189
- it('throws an error when the "header actions" slot has the incorrect type', async () => {
190
- await expectArgumentError(() => {
191
- return fixture(html `<glide-core-modal label="Label">
192
- Content
193
- <span slot="header-actions">Header Action</span>
194
- </glide-core-modal>`);
195
- });
196
- });
197
- it('throws an error when the "tertiary" footer slot has the incorrect type', async () => {
198
- await expectArgumentError(() => {
199
- return fixture(html `<glide-core-modal label="Label">
200
- Content
201
- <span slot="tertiary">Tertiary</span>
202
- </glide-core-modal>`);
203
- });
204
- });
@@ -1 +0,0 @@
1
- export {};
@@ -1,35 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import { expect, fixture, html } from '@open-wc/testing';
3
- import { sendKeys } from '@web/test-runner-commands';
4
- import GlideCoreModal from './modal.js';
5
- GlideCoreModal.shadowRootOptions.mode = 'open';
6
- it('closes the modal when the close button is clicked', async () => {
7
- const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
8
- component.showModal();
9
- const button = component.shadowRoot.querySelector('[data-test="close-button"]');
10
- expect(button).to.be.ok;
11
- button?.click();
12
- expect(component
13
- .shadowRoot.querySelector('dialog')
14
- ?.hasAttribute('open')).to.be.false;
15
- });
16
- it('closes the modal when the escape key is pressed', async () => {
17
- const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
18
- component.showModal();
19
- const dialogElement = component.shadowRoot.querySelector('dialog');
20
- expect(dialogElement?.hasAttribute('open')).to.be.true;
21
- await sendKeys({ press: 'Escape' });
22
- expect(dialogElement?.hasAttribute('open')).to.be.false;
23
- });
24
- it('closes the modal via "back-button"', async () => {
25
- const component = await fixture(html `<glide-core-modal label="Label" back-button>
26
- Content
27
- </glide-core-modal>`);
28
- component.showModal();
29
- const dialogElement = component.shadowRoot.querySelector('dialog');
30
- expect(dialogElement?.hasAttribute('open')).to.be.true;
31
- const button = component.shadowRoot.querySelector('[data-test="back-button"]');
32
- expect(button).to.be.ok;
33
- button?.click();
34
- expect(dialogElement?.hasAttribute('open')).to.be.false;
35
- });
@@ -1 +0,0 @@
1
- import './modal.js';
@@ -1,99 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import './modal.js';
3
- import { expect, fixture, html } from '@open-wc/testing';
4
- import { sendKeys, sendMouse } from '@web/test-runner-commands';
5
- import GlideCoreModal from './modal.js';
6
- import sinon from 'sinon';
7
- GlideCoreModal.shadowRootOptions.mode = 'open';
8
- it('dispatches a "close" event when the modal is closed via the "close" method', async () => {
9
- const spy = sinon.spy();
10
- const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
11
- component.addEventListener('close', spy);
12
- component.showModal();
13
- expect(spy.callCount).to.equal(0);
14
- component.close();
15
- expect(spy.callCount).to.equal(1);
16
- });
17
- it('dispatches a "close" event when the modal is closed via the close button', async () => {
18
- const spy = sinon.spy();
19
- const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
20
- component.addEventListener('close', spy);
21
- component.showModal();
22
- const button = component.shadowRoot?.querySelector('[data-test="close-button"]');
23
- expect(button).to.be.ok;
24
- button?.click();
25
- expect(spy.callCount).to.equal(1);
26
- });
27
- it('dispatches a "close" event when the modal is closed via the escape key', async () => {
28
- const spy = sinon.spy();
29
- const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
30
- component.addEventListener('close', spy);
31
- component.showModal();
32
- await sendKeys({ press: 'Escape' });
33
- expect(spy.callCount).to.equal(1);
34
- });
35
- it('does not dispatch a "close" event when the modal is open and non-escape keys are pressed', async () => {
36
- const spy = sinon.spy();
37
- const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
38
- component.addEventListener('close', spy);
39
- component.showModal();
40
- // Tests only a couple keys.
41
- await sendKeys({ press: ' ' });
42
- expect(spy.callCount).to.equal(0);
43
- await sendKeys({ press: 'Enter' });
44
- expect(spy.callCount).to.equal(0);
45
- });
46
- it('dispatches a "close" event when the modal is closed via "back-button"', async () => {
47
- const spy = sinon.spy();
48
- const component = await fixture(html `<glide-core-modal label="Label" back-button>
49
- Content
50
- </glide-core-modal>`);
51
- component.addEventListener('close', spy);
52
- component.showModal();
53
- const button = component.shadowRoot?.querySelector('[data-test="back-button"]');
54
- expect(button).to.be.ok;
55
- button?.click();
56
- expect(spy.callCount).to.equal(1);
57
- });
58
- it('does not emit a "close" event when clicking inside the dialog and the mouse is not positioned on a "close" button', async () => {
59
- const spy = sinon.spy();
60
- const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
61
- component.showModal();
62
- component.addEventListener('close', spy);
63
- const dialogElement = component?.shadowRoot?.querySelector('dialog');
64
- const boundingRectangle = dialogElement?.getBoundingClientRect();
65
- expect(boundingRectangle).is.not.null;
66
- const { top, left } = boundingRectangle;
67
- await sendMouse({
68
- type: 'click',
69
- position: [Math.ceil(left + 1), Math.ceil(top + 1)],
70
- });
71
- expect(spy.callCount).to.equal(0);
72
- });
73
- it(`does not emit a "close" event if a mousedown event's origin does not come from the dialog component`, async () => {
74
- const spy = sinon.spy();
75
- const component = await fixture(html `<glide-core-modal label="Label">
76
- <button data-test="target">Inside Body</button>
77
- </glide-core-modal>`);
78
- component.showModal();
79
- component.addEventListener('close', spy);
80
- const button = component.querySelector('[data-test="target"]');
81
- expect(button).to.be.ok;
82
- button?.dispatchEvent(new Event('mousedown', { bubbles: true }));
83
- expect(spy.callCount).to.equal(0);
84
- });
85
- it('emits a "close" event when clicking outside the dialog', async () => {
86
- const spy = sinon.spy();
87
- const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
88
- component.showModal();
89
- component.addEventListener('close', spy);
90
- const dialogElement = component?.shadowRoot?.querySelector('dialog');
91
- const boundingRectangle = dialogElement?.getBoundingClientRect();
92
- expect(boundingRectangle).is.not.null;
93
- const { top, left } = boundingRectangle;
94
- await sendMouse({
95
- type: 'click',
96
- position: [Math.floor(left - 1), Math.floor(top - 1)],
97
- });
98
- expect(spy.callCount).to.equal(1);
99
- });
@@ -1 +0,0 @@
1
- export {};
@@ -1,67 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import * as sinon from 'sinon';
3
- import { expect, fixture, html } from '@open-wc/testing';
4
- import { sendKeys, sendMouse } from '@web/test-runner-commands';
5
- import GlideCoreModal from './modal.js';
6
- GlideCoreModal.shadowRootOptions.mode = 'open';
7
- const addSpy = sinon.spy(document.documentElement.classList, 'add');
8
- const removeSpy = sinon.spy(document.documentElement.classList, 'remove');
9
- afterEach(() => {
10
- addSpy.resetHistory();
11
- removeSpy.resetHistory();
12
- });
13
- after(() => {
14
- addSpy.restore();
15
- removeSpy.restore();
16
- });
17
- it('adds the "private-glide-core-modal-lock-scroll" class to the documentElement when opened and removes it when closed', async () => {
18
- const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
19
- component.showModal();
20
- expect(addSpy.callCount).to.equal(1);
21
- expect(addSpy.calledWith('private-glide-core-modal-lock-scroll')).to.be.ok;
22
- expect(removeSpy.callCount).to.equal(0);
23
- component.close();
24
- expect(removeSpy.callCount).to.equal(1);
25
- expect(removeSpy.calledWith('private-glide-core-modal-lock-scroll')).to.be.ok;
26
- // Verify `add` was not called again for some reason
27
- expect(addSpy.callCount).to.equal(1);
28
- });
29
- it('removes the "private-glide-core-modal-lock-scroll" class when the close button is clicked', async () => {
30
- const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
31
- component.showModal();
32
- expect(removeSpy.callCount).to.equal(0);
33
- const button = component.shadowRoot.querySelector('[data-test="close-button"]');
34
- expect(button).to.be.ok;
35
- button?.click();
36
- expect(removeSpy.callCount).to.equal(1);
37
- });
38
- it('removes the "private-glide-core-modal-lock-scroll" class when the "close" method is called', async () => {
39
- const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
40
- component.showModal();
41
- expect(removeSpy.callCount).to.equal(0);
42
- const dialogElement = component.shadowRoot.querySelector('dialog');
43
- expect(dialogElement?.hasAttribute('open')).to.be.true;
44
- component.close();
45
- expect(removeSpy.callCount).to.equal(1);
46
- });
47
- it('removes the "private-glide-core-modal-lock-scroll" class when the escape key is pressed', async () => {
48
- const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
49
- component.showModal();
50
- expect(removeSpy.callCount).to.equal(0);
51
- await sendKeys({ press: 'Escape' });
52
- expect(removeSpy.callCount).to.equal(1);
53
- });
54
- it('removes class "private-glide-core-modal-lock-scroll" from document when click is outside dialog', async () => {
55
- const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
56
- component.showModal();
57
- const dialogElement = component?.shadowRoot?.querySelector('dialog');
58
- const boundingRectangle = dialogElement?.getBoundingClientRect();
59
- expect(boundingRectangle).is.not.null;
60
- expect(document.documentElement.classList.contains('private-glide-core-modal-lock-scroll')).to.be.true;
61
- const { top, left } = boundingRectangle;
62
- await sendMouse({
63
- type: 'click',
64
- position: [Math.floor(left - 1), Math.floor(top - 1)],
65
- });
66
- expect(document.documentElement.classList.contains('private-glide-core-modal-lock-scroll')).to.be.false;
67
- });
@@ -1 +0,0 @@
1
- export {};
@@ -1,20 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import { expect, fixture, html } from '@open-wc/testing';
3
- import GlideCoreModal from './modal.js';
4
- GlideCoreModal.shadowRootOptions.mode = 'open';
5
- it('opens the modal when the "showModal" method is called and closes it when "close" is called', async () => {
6
- const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
7
- component.showModal();
8
- const dialogElement = component.shadowRoot?.querySelector('dialog');
9
- expect(dialogElement?.hasAttribute('open')).to.be.true;
10
- component.close();
11
- expect(dialogElement?.hasAttribute('open')).to.be.false;
12
- });
13
- it('remains open when the "showModal" method is called twice', async () => {
14
- const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
15
- component.showModal();
16
- const dialogElement = component.shadowRoot?.querySelector('dialog');
17
- expect(dialogElement?.hasAttribute('open')).to.be.true;
18
- component.showModal();
19
- expect(dialogElement?.hasAttribute('open')).to.be.true;
20
- });
@@ -1 +0,0 @@
1
- import './modal.js';
@@ -1,18 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import './modal.js';
3
- import * as sinon from 'sinon';
4
- import { expect, fixture, html } from '@open-wc/testing';
5
- import GlideCoreModal from './modal.js';
6
- GlideCoreModal.shadowRootOptions.mode = 'open';
7
- const cssSupportsStub = sinon.stub(window.CSS, 'supports').returns(false);
8
- const setPropertySpy = sinon.spy(document.documentElement.style, 'setProperty');
9
- afterEach(() => {
10
- cssSupportsStub.restore();
11
- setPropertySpy.restore();
12
- });
13
- it('sets the "--glide-scroll-size" variable when the browser does not support scrollbar-gutter', async () => {
14
- const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
15
- component.showModal();
16
- expect(cssSupportsStub.calledWith('scrollbar-gutter')).to.be.ok;
17
- expect(setPropertySpy.callCount).to.equal(1);
18
- });
@@ -1,6 +0,0 @@
1
- import './radio-group.js';
2
- import type { Meta, StoryObj } from '@storybook/web-components';
3
- declare const meta: Meta;
4
- export default meta;
5
- export declare const RadioGroup: StoryObj;
6
- export declare const WithError: StoryObj;
@@ -1,2 +0,0 @@
1
- import './radio-group.js';
2
- import './radio.js';