@patternfly/elements 2.0.0-rc.4 → 2.0.0-rc.5

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 (225) hide show
  1. package/package.json +2 -1
  2. package/pf-accordion/BaseAccordion.js +1 -1
  3. package/pf-accordion/BaseAccordionHeader.js +1 -1
  4. package/pf-accordion/BaseAccordionPanel.js +1 -1
  5. package/pf-accordion/README.md +44 -0
  6. package/pf-accordion/pf-accordion-header.js +1 -1
  7. package/pf-accordion/pf-accordion-panel.js +1 -1
  8. package/pf-accordion/pf-accordion.js +1 -1
  9. package/pf-avatar/BaseAvatar.js +1 -1
  10. package/pf-avatar/README.md +31 -0
  11. package/pf-avatar/pf-avatar.js +1 -1
  12. package/pf-badge/BaseBadge.js +1 -1
  13. package/pf-badge/README.md +57 -0
  14. package/pf-badge/pf-badge.js +1 -1
  15. package/pf-button/BaseButton.js +1 -1
  16. package/pf-button/README.md +61 -0
  17. package/pf-button/pf-button.js +1 -1
  18. package/pf-card/BaseCard.js +1 -1
  19. package/pf-card/README.md +34 -0
  20. package/pf-card/pf-card.js +1 -1
  21. package/pf-clipboard-copy/BaseClipboardCopy.js +1 -1
  22. package/pf-clipboard-copy/README.md +8 -0
  23. package/pf-clipboard-copy/pf-clipboard-copy.js +1 -1
  24. package/pf-code-block/BaseCodeBlock.js +1 -1
  25. package/pf-code-block/README.md +77 -0
  26. package/pf-code-block/pf-code-block.js +1 -1
  27. package/pf-icon/BaseIcon.js +1 -1
  28. package/pf-icon/README.md +86 -0
  29. package/pf-icon/pf-icon.js +1 -1
  30. package/pf-jump-links/README.md +27 -0
  31. package/pf-jump-links/pf-jump-links-item.js +1 -1
  32. package/pf-jump-links/pf-jump-links-list.js +1 -1
  33. package/pf-jump-links/pf-jump-links.js +1 -1
  34. package/pf-label/BaseLabel.js +1 -1
  35. package/pf-label/README.md +61 -0
  36. package/pf-label/pf-label.js +1 -1
  37. package/pf-modal/README.md +63 -0
  38. package/pf-modal/pf-modal.js +1 -1
  39. package/pf-panel/README.md +10 -0
  40. package/pf-panel/pf-panel.js +1 -1
  41. package/pf-progress-stepper/README.md +41 -0
  42. package/pf-progress-stepper/pf-progress-step.js +1 -1
  43. package/pf-progress-stepper/pf-progress-stepper.js +1 -1
  44. package/pf-spinner/BaseSpinner.js +1 -1
  45. package/pf-spinner/README.md +46 -0
  46. package/pf-spinner/pf-spinner.js +1 -1
  47. package/pf-switch/BaseSwitch.js +1 -1
  48. package/pf-switch/README.md +91 -0
  49. package/pf-switch/pf-switch.js +1 -1
  50. package/pf-tabs/BaseTab.js +1 -1
  51. package/pf-tabs/BaseTabPanel.js +1 -1
  52. package/pf-tabs/BaseTabs.js +1 -1
  53. package/pf-tabs/README.md +40 -0
  54. package/pf-tabs/pf-tab-panel.js +1 -1
  55. package/pf-tabs/pf-tab.js +1 -1
  56. package/pf-tabs/pf-tabs.js +1 -1
  57. package/pf-tile/README.md +12 -0
  58. package/pf-tile/pf-tile.js +1 -1
  59. package/pf-timestamp/README.md +64 -0
  60. package/pf-timestamp/pf-timestamp.js +1 -1
  61. package/pf-tooltip/BaseTooltip.js +1 -1
  62. package/pf-tooltip/README.md +64 -0
  63. package/pf-tooltip/pf-tooltip.js +1 -1
  64. package/pf-accordion/demo/demo.css +0 -9
  65. package/pf-accordion/demo/pf-accordion.js +0 -10
  66. package/pf-accordion/test/pf-accordion.e2e.d.ts +0 -1
  67. package/pf-accordion/test/pf-accordion.e2e.js +0 -11
  68. package/pf-accordion/test/pf-accordion.e2e.js.map +0 -1
  69. package/pf-accordion/test/pf-accordion.spec.d.ts +0 -1
  70. package/pf-accordion/test/pf-accordion.spec.js +0 -971
  71. package/pf-accordion/test/pf-accordion.spec.js.map +0 -1
  72. package/pf-avatar/demo/demo.css +0 -18
  73. package/pf-avatar/demo/pf-avatar.js +0 -1
  74. package/pf-avatar/test/pf-avatar.e2e.d.ts +0 -1
  75. package/pf-avatar/test/pf-avatar.e2e.js +0 -11
  76. package/pf-avatar/test/pf-avatar.e2e.js.map +0 -1
  77. package/pf-avatar/test/pf-avatar.spec.d.ts +0 -1
  78. package/pf-avatar/test/pf-avatar.spec.js +0 -42
  79. package/pf-avatar/test/pf-avatar.spec.js.map +0 -1
  80. package/pf-badge/demo/demo.css +0 -9
  81. package/pf-badge/demo/pf-badge.js +0 -8
  82. package/pf-badge/test/pf-badge.e2e.d.ts +0 -1
  83. package/pf-badge/test/pf-badge.e2e.js +0 -11
  84. package/pf-badge/test/pf-badge.e2e.js.map +0 -1
  85. package/pf-badge/test/pf-badge.spec.d.ts +0 -1
  86. package/pf-badge/test/pf-badge.spec.js +0 -49
  87. package/pf-badge/test/pf-badge.spec.js.map +0 -1
  88. package/pf-button/demo/demo.css +0 -11
  89. package/pf-button/demo/form-control.js +0 -15
  90. package/pf-button/demo/pf-button.js +0 -28
  91. package/pf-button/test/pf-button.e2e.d.ts +0 -1
  92. package/pf-button/test/pf-button.e2e.js +0 -11
  93. package/pf-button/test/pf-button.e2e.js.map +0 -1
  94. package/pf-button/test/pf-button.spec.d.ts +0 -1
  95. package/pf-button/test/pf-button.spec.js +0 -94
  96. package/pf-button/test/pf-button.spec.js.map +0 -1
  97. package/pf-card/demo/demo.css +0 -44
  98. package/pf-card/demo/pf-card.js +0 -23
  99. package/pf-card/test/pf-card.e2e.d.ts +0 -1
  100. package/pf-card/test/pf-card.e2e.js +0 -11
  101. package/pf-card/test/pf-card.e2e.js.map +0 -1
  102. package/pf-card/test/pf-card.spec.d.ts +0 -1
  103. package/pf-card/test/pf-card.spec.js +0 -153
  104. package/pf-card/test/pf-card.spec.js.map +0 -1
  105. package/pf-clipboard-copy/demo/demo.css +0 -12
  106. package/pf-clipboard-copy/demo/pf-clipboard-copy.js +0 -1
  107. package/pf-clipboard-copy/test/pf-clipboard-copy.e2e.d.ts +0 -1
  108. package/pf-clipboard-copy/test/pf-clipboard-copy.e2e.js +0 -11
  109. package/pf-clipboard-copy/test/pf-clipboard-copy.e2e.js.map +0 -1
  110. package/pf-clipboard-copy/test/pf-clipboard-copy.spec.d.ts +0 -1
  111. package/pf-clipboard-copy/test/pf-clipboard-copy.spec.js +0 -100
  112. package/pf-clipboard-copy/test/pf-clipboard-copy.spec.js.map +0 -1
  113. package/pf-code-block/demo/demo.css +0 -4
  114. package/pf-code-block/demo/pf-code-block.js +0 -2
  115. package/pf-code-block/test/pf-code-block.e2e.d.ts +0 -1
  116. package/pf-code-block/test/pf-code-block.e2e.js +0 -11
  117. package/pf-code-block/test/pf-code-block.e2e.js.map +0 -1
  118. package/pf-code-block/test/pf-code-block.spec.d.ts +0 -1
  119. package/pf-code-block/test/pf-code-block.spec.js +0 -86
  120. package/pf-code-block/test/pf-code-block.spec.js.map +0 -1
  121. package/pf-icon/demo/custom-icon-sets.js +0 -5
  122. package/pf-icon/demo/demo.css +0 -53
  123. package/pf-icon/demo/icons/rh/boba-tea.js +0 -5
  124. package/pf-icon/demo/icons/rh/lifecycle.js +0 -3
  125. package/pf-icon/demo/pf-icon.js +0 -68
  126. package/pf-icon/test/pf-icon.e2e.d.ts +0 -1
  127. package/pf-icon/test/pf-icon.e2e.js +0 -11
  128. package/pf-icon/test/pf-icon.e2e.js.map +0 -1
  129. package/pf-icon/test/pf-icon.spec.d.ts +0 -1
  130. package/pf-icon/test/pf-icon.spec.js +0 -127
  131. package/pf-icon/test/pf-icon.spec.js.map +0 -1
  132. package/pf-icon/test/rh-icon-aed.js +0 -2
  133. package/pf-icon/test/rh-icon-api.js +0 -2
  134. package/pf-icon/test/rh-icon-atom.js +0 -2
  135. package/pf-icon/test/rh-icon-bike.js +0 -2
  136. package/pf-jump-links/demo/demo.css +0 -4
  137. package/pf-jump-links/demo/pf-jump-links.js +0 -4
  138. package/pf-jump-links/demo/scrollspy-with-subsections.css +0 -60
  139. package/pf-jump-links/demo/scrollspy-with-subsections.js +0 -34
  140. package/pf-jump-links/test/pf-jump-links.e2e.d.ts +0 -1
  141. package/pf-jump-links/test/pf-jump-links.e2e.js +0 -11
  142. package/pf-jump-links/test/pf-jump-links.e2e.js.map +0 -1
  143. package/pf-jump-links/test/pf-jump-links.spec.d.ts +0 -1
  144. package/pf-jump-links/test/pf-jump-links.spec.js +0 -88
  145. package/pf-jump-links/test/pf-jump-links.spec.js.map +0 -1
  146. package/pf-label/demo/demo.css +0 -37
  147. package/pf-label/demo/pf-label.js +0 -10
  148. package/pf-label/test/pf-label.e2e.d.ts +0 -1
  149. package/pf-label/test/pf-label.e2e.js +0 -11
  150. package/pf-label/test/pf-label.e2e.js.map +0 -1
  151. package/pf-label/test/pf-label.spec.d.ts +0 -1
  152. package/pf-label/test/pf-label.spec.js +0 -108
  153. package/pf-label/test/pf-label.spec.js.map +0 -1
  154. package/pf-modal/demo/demo.css +0 -32
  155. package/pf-modal/demo/pf-modal.js +0 -10
  156. package/pf-modal/test/pf-modal.e2e.d.ts +0 -1
  157. package/pf-modal/test/pf-modal.e2e.js +0 -13
  158. package/pf-modal/test/pf-modal.e2e.js.map +0 -1
  159. package/pf-modal/test/pf-modal.spec.d.ts +0 -1
  160. package/pf-modal/test/pf-modal.spec.js +0 -209
  161. package/pf-modal/test/pf-modal.spec.js.map +0 -1
  162. package/pf-panel/demo/demo.css +0 -7
  163. package/pf-panel/demo/pf-panel.js +0 -1
  164. package/pf-panel/test/pf-panel.e2e.d.ts +0 -1
  165. package/pf-panel/test/pf-panel.e2e.js +0 -11
  166. package/pf-panel/test/pf-panel.e2e.js.map +0 -1
  167. package/pf-panel/test/pf-panel.spec.d.ts +0 -1
  168. package/pf-panel/test/pf-panel.spec.js +0 -19
  169. package/pf-panel/test/pf-panel.spec.js.map +0 -1
  170. package/pf-progress-stepper/demo/demo.css +0 -10
  171. package/pf-progress-stepper/demo/pf-progress-stepper.js +0 -13
  172. package/pf-progress-stepper/test/pf-progress-stepper.e2e.d.ts +0 -1
  173. package/pf-progress-stepper/test/pf-progress-stepper.e2e.js +0 -11
  174. package/pf-progress-stepper/test/pf-progress-stepper.e2e.js.map +0 -1
  175. package/pf-progress-stepper/test/pf-progress-stepper.spec.d.ts +0 -1
  176. package/pf-progress-stepper/test/pf-progress-stepper.spec.js +0 -13
  177. package/pf-progress-stepper/test/pf-progress-stepper.spec.js.map +0 -1
  178. package/pf-spinner/demo/demo.css +0 -2
  179. package/pf-spinner/demo/pf-spinner.js +0 -2
  180. package/pf-spinner/test/pf-spinner.e2e.d.ts +0 -1
  181. package/pf-spinner/test/pf-spinner.e2e.js +0 -11
  182. package/pf-spinner/test/pf-spinner.e2e.js.map +0 -1
  183. package/pf-spinner/test/pf-spinner.spec.d.ts +0 -1
  184. package/pf-spinner/test/pf-spinner.spec.js +0 -52
  185. package/pf-spinner/test/pf-spinner.spec.js.map +0 -1
  186. package/pf-switch/demo/demo.css +0 -32
  187. package/pf-switch/demo/pf-switch.js +0 -13
  188. package/pf-switch/test/pf-switch.e2e.d.ts +0 -1
  189. package/pf-switch/test/pf-switch.e2e.js +0 -11
  190. package/pf-switch/test/pf-switch.e2e.js.map +0 -1
  191. package/pf-switch/test/pf-switch.spec.d.ts +0 -1
  192. package/pf-switch/test/pf-switch.spec.js +0 -164
  193. package/pf-switch/test/pf-switch.spec.js.map +0 -1
  194. package/pf-tabs/demo/demo.css +0 -62
  195. package/pf-tabs/demo/pf-tabs.js +0 -44
  196. package/pf-tabs/test/pf-tabs.e2e.d.ts +0 -1
  197. package/pf-tabs/test/pf-tabs.e2e.js +0 -13
  198. package/pf-tabs/test/pf-tabs.e2e.js.map +0 -1
  199. package/pf-tabs/test/pf-tabs.spec.d.ts +0 -1
  200. package/pf-tabs/test/pf-tabs.spec.js +0 -234
  201. package/pf-tabs/test/pf-tabs.spec.js.map +0 -1
  202. package/pf-tile/demo/demo.css +0 -59
  203. package/pf-tile/demo/pf-tile.js +0 -21
  204. package/pf-tile/test/pf-tile.e2e.d.ts +0 -1
  205. package/pf-tile/test/pf-tile.e2e.js +0 -11
  206. package/pf-tile/test/pf-tile.e2e.js.map +0 -1
  207. package/pf-tile/test/pf-tile.spec.d.ts +0 -1
  208. package/pf-tile/test/pf-tile.spec.js +0 -51
  209. package/pf-tile/test/pf-tile.spec.js.map +0 -1
  210. package/pf-timestamp/demo/pf-timestamp.js +0 -3
  211. package/pf-timestamp/test/pf-timestamp.e2e.d.ts +0 -1
  212. package/pf-timestamp/test/pf-timestamp.e2e.js +0 -12
  213. package/pf-timestamp/test/pf-timestamp.e2e.js.map +0 -1
  214. package/pf-timestamp/test/pf-timestamp.spec.d.ts +0 -1
  215. package/pf-timestamp/test/pf-timestamp.spec.js +0 -139
  216. package/pf-timestamp/test/pf-timestamp.spec.js.map +0 -1
  217. package/pf-tooltip/demo/demo.css +0 -39
  218. package/pf-tooltip/demo/performance.js +0 -45
  219. package/pf-tooltip/demo/pf-tooltip.js +0 -7
  220. package/pf-tooltip/test/pf-tooltip.e2e.d.ts +0 -1
  221. package/pf-tooltip/test/pf-tooltip.e2e.js +0 -11
  222. package/pf-tooltip/test/pf-tooltip.e2e.js.map +0 -1
  223. package/pf-tooltip/test/pf-tooltip.spec.d.ts +0 -1
  224. package/pf-tooltip/test/pf-tooltip.spec.js +0 -50
  225. package/pf-tooltip/test/pf-tooltip.spec.js.map +0 -1
@@ -1 +0,0 @@
1
- {"version":3,"file":"pf-spinner.e2e.js","sourceRoot":"","sources":["pf-spinner.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,YAAY,CAAC;AAE7B,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAC/B,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\n\nconst tagName = 'pf-spinner';\n\ntest.describe(tagName, () => {\n test('snapshot', async ({ page }) => {\n const componentPage = new PfeDemoPage(page, tagName);\n await componentPage.navigate();\n await componentPage.snapshot();\n });\n});\n"]}
@@ -1 +0,0 @@
1
- export {};
@@ -1,52 +0,0 @@
1
- import { expect, html } from '@open-wc/testing';
2
- import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
3
- import { PfSpinner } from '@patternfly/elements/pf-spinner/pf-spinner.js';
4
- describe('<pf-spinner>', function () {
5
- it('should upgrade', async function () {
6
- const element = await createFixture(html `<pf-spinner>Loading...</pf-spinner>`);
7
- expect(element, 'pf-spinner should be an instance of PfeSpinner')
8
- .to.be.an.instanceOf(customElements.get('pf-spinner'))
9
- .and
10
- .to.be.an.instanceOf(PfSpinner);
11
- });
12
- it('should properly initialize the component', async function () {
13
- const element = await createFixture(html `
14
- <pf-spinner>Loading...</pf-spinner>
15
- `);
16
- expect(element.getAttribute('size')).to.equal('xl');
17
- });
18
- describe('size attribute', function () {
19
- let element;
20
- function convertRemToPixels(rem) {
21
- const { fontSize } = getComputedStyle(document.documentElement);
22
- return parseFloat(rem) * parseFloat(fontSize);
23
- }
24
- beforeEach(async function () {
25
- element = await createFixture(html `
26
- <pf-spinner>Loading...</pf-spinner>
27
- `);
28
- });
29
- for (const [size, expected] of [
30
- ['sm', '0.625rem'],
31
- ['md', '1.125rem'],
32
- ['lg', '1.5rem'],
33
- ['xl', '3.375rem'],
34
- ]) {
35
- it(size, async function () {
36
- element.size = size;
37
- await element.updateComplete;
38
- expect(element.offsetWidth).to.equal(convertRemToPixels(expected));
39
- });
40
- }
41
- });
42
- describe('diameter attribute', function () {
43
- it('sets the element diameter', async function () {
44
- const customDiameterValue = 80;
45
- const element = await createFixture(html `
46
- <pf-spinner diameter="${customDiameterValue}px">Loading...</pf-spinner>
47
- `);
48
- expect(element.offsetWidth).to.equal(customDiameterValue);
49
- });
50
- });
51
- });
52
- //# sourceMappingURL=pf-spinner.spec.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"pf-spinner.spec.js","sourceRoot":"","sources":["pf-spinner.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAE,MAAM,+CAA+C,CAAC;AAE1E,QAAQ,CAAC,cAAc,EAAE;IACvB,EAAE,CAAC,gBAAgB,EAAE,KAAK;QACxB,MAAM,OAAO,GAAG,MAAM,aAAa,CAAY,IAAI,CAAA,qCAAqC,CAAC,CAAC;QAC1F,MAAM,CAAC,OAAO,EAAE,gDAAgD,CAAC;aAC9D,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;aACrD,GAAG;aACH,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;IACpC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0CAA0C,EAAE,KAAK;QAClD,MAAM,OAAO,GAAG,MAAM,aAAa,CAAY,IAAI,CAAA;;KAElD,CAAC,CAAC;QAEH,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,gBAAgB,EAAE;QACzB,IAAI,OAAkB,CAAC;QAEvB,SAAS,kBAAkB,CAAC,GAAmB;YAC7C,MAAM,EAAE,QAAQ,EAAE,GAAG,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;YAChE,OAAO,UAAU,CAAC,GAAG,CAAC,GAAG,UAAU,CAAC,QAAQ,CAAC,CAAC;QAChD,CAAC;QAED,UAAU,CAAC,KAAK;YACd,OAAO,GAAG,MAAM,aAAa,CAAY,IAAI,CAAA;;OAE5C,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,KAAK,MAAM,CAAC,IAAI,EAAE,QAAQ,CAAC,IAAI;YAC7B,CAAC,IAAI,EAAE,UAAU,CAAC;YAClB,CAAC,IAAI,EAAE,UAAU,CAAC;YAClB,CAAC,IAAI,EAAE,QAAQ,CAAC;YAChB,CAAC,IAAI,EAAE,UAAU,CAAC;SACV,EAAE;YACV,EAAE,CAAC,IAAI,EAAE,KAAK;gBACZ,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC;gBACpB,MAAM,OAAO,CAAC,cAAc,CAAC;gBAC7B,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC,CAAC;YACrE,CAAC,CAAC,CAAC;SACJ;IACH,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,oBAAoB,EAAE;QAC7B,EAAE,CAAC,2BAA2B,EAAE,KAAK;YACnC,MAAM,mBAAmB,GAAG,EAAE,CAAC;YAC/B,MAAM,OAAO,GAAG,MAAM,aAAa,CAAY,IAAI,CAAA;gCACzB,mBAAmB;OAC5C,CAAC,CAAC;YAEH,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;QAC5D,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { expect, html } from '@open-wc/testing';\nimport { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';\nimport { PfSpinner } from '@patternfly/elements/pf-spinner/pf-spinner.js';\n\ndescribe('<pf-spinner>', function() {\n it('should upgrade', async function() {\n const element = await createFixture<PfSpinner>(html`<pf-spinner>Loading...</pf-spinner>`);\n expect(element, 'pf-spinner should be an instance of PfeSpinner')\n .to.be.an.instanceOf(customElements.get('pf-spinner'))\n .and\n .to.be.an.instanceOf(PfSpinner);\n });\n\n it('should properly initialize the component', async function() {\n const element = await createFixture<PfSpinner>(html`\n <pf-spinner>Loading...</pf-spinner>\n `);\n\n expect(element.getAttribute('size')).to.equal('xl');\n });\n\n describe('size attribute', function() {\n let element: PfSpinner;\n\n function convertRemToPixels(rem: `${number}rem`) {\n const { fontSize } = getComputedStyle(document.documentElement);\n return parseFloat(rem) * parseFloat(fontSize);\n }\n\n beforeEach(async function() {\n element = await createFixture<PfSpinner>(html`\n <pf-spinner>Loading...</pf-spinner>\n `);\n });\n\n for (const [size, expected] of [\n ['sm', '0.625rem'],\n ['md', '1.125rem'],\n ['lg', '1.5rem'],\n ['xl', '3.375rem'],\n ] as const) {\n it(size, async function() {\n element.size = size;\n await element.updateComplete;\n expect(element.offsetWidth).to.equal(convertRemToPixels(expected));\n });\n }\n });\n\n describe('diameter attribute', function() {\n it('sets the element diameter', async function() {\n const customDiameterValue = 80;\n const element = await createFixture<PfSpinner>(html`\n <pf-spinner diameter=\"${customDiameterValue}px\">Loading...</pf-spinner>\n `);\n\n expect(element.offsetWidth).to.equal(customDiameterValue);\n });\n });\n});\n"]}
@@ -1,32 +0,0 @@
1
- section {
2
- margin: 2rem;
3
- }
4
-
5
- fieldset {
6
- display: grid;
7
- grid-template-columns: min-content max-content;
8
- gap: var(--pf-c-switch--ColumnGap, var(--pf-c-switch__label--PaddingLeft, 1rem));
9
- }
10
-
11
- fieldset:has(#reversed) {
12
- grid-template-columns: max-content min-content;
13
- }
14
-
15
- label {
16
- color: var(--pf-c-switch__label--Color, var(--pf-global--Color--dark-100, #151515));
17
- }
18
-
19
- pf-switch:not([checked]) ~ label,
20
- label:has(~ pf-switch:not([checked])) {
21
- color: var(--pf-c-switch__input--not-checked__label--Color, var(--pf-global--disabled-color--100, #6a6e73));
22
- }
23
-
24
- #nested-label fieldset {
25
- display: flex;
26
- flex-wrap: wrap;
27
- align-items: center;
28
- }
29
-
30
- #nested-label output {
31
- width: 100%;
32
- }
@@ -1,13 +0,0 @@
1
- import 'element-internals-polyfill';
2
- import '@patternfly/elements/pf-switch/pf-switch.js';
3
- import '@patternfly/elements/pf-button/pf-button.js';
4
-
5
- document.getElementById('form-disabled').addEventListener('change', /** @this{HTMLFieldsetElement}*/function(event) {
6
- const controls = document.getElementById(event.target.getAttribute('aria-controls'));
7
- controls.toggleAttribute('disabled', event.target.checked);
8
- });
9
-
10
- document.getElementById('nested-label').addEventListener('submit', /** @this {HTMLFormElement} */function(event) {
11
- event.preventDefault();
12
- this.querySelector('output').textContent = `Dark mode ${this.elements.status.checked ? 'on' : 'off'}`;
13
- });
@@ -1 +0,0 @@
1
- export {};
@@ -1,11 +0,0 @@
1
- import { test } from '@playwright/test';
2
- import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
3
- const tagName = 'pf-switch';
4
- test.describe(tagName, () => {
5
- test('snapshot', async ({ page }) => {
6
- const componentPage = new PfeDemoPage(page, tagName);
7
- await componentPage.navigate();
8
- await componentPage.snapshot();
9
- });
10
- });
11
- //# sourceMappingURL=pf-switch.e2e.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"pf-switch.e2e.js","sourceRoot":"","sources":["pf-switch.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,WAAW,CAAC;AAE5B,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAC/B,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\n\nconst tagName = 'pf-switch';\n\ntest.describe(tagName, () => {\n test('snapshot', async ({ page }) => {\n const componentPage = new PfeDemoPage(page, tagName);\n await componentPage.navigate();\n await componentPage.snapshot();\n });\n});\n"]}
@@ -1 +0,0 @@
1
- export {};
@@ -1,164 +0,0 @@
1
- import { expect, html, nextFrame } from '@open-wc/testing';
2
- import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
3
- import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
4
- import { PfSwitch } from '@patternfly/elements/pf-switch/pf-switch.js';
5
- describe('<pf-switch>', function () {
6
- describe('simply instantiating', function () {
7
- let element;
8
- let snapshot;
9
- beforeEach(async function () {
10
- const container = await createFixture(html `
11
- <div>
12
- <pf-switch></pf-switch>
13
- </div>
14
- `);
15
- element = container.querySelector('pf-switch');
16
- snapshot = await a11ySnapshot({ selector: 'pf-switch' });
17
- });
18
- it('should upgrade', async function () {
19
- const klass = customElements.get('pf-switch');
20
- expect(element)
21
- .to.be.an.instanceOf(klass)
22
- .and
23
- .to.be.an.instanceOf(PfSwitch);
24
- });
25
- it('has accessible role', function () {
26
- expect(snapshot.role).to.equal('checkbox');
27
- });
28
- it('has accessible checked field', function () {
29
- expect(snapshot.role).to.equal('checkbox');
30
- });
31
- it('requires accessible name', function () {
32
- // Double negative - this would fail an accessibility audit,
33
- // but that failure would be correct, because the template instantiated
34
- // in this test's beforeeach hook does not have an accessible name
35
- expect(snapshot.name).to.not.be.ok;
36
- });
37
- });
38
- describe('with labels for on and off state', function () {
39
- let element;
40
- let snapshot;
41
- beforeEach(async function () {
42
- const container = await createFixture(html `
43
- <div>
44
- <pf-switch id="switch"></pf-switch>
45
- <label for="switch" data-state="on">Message when on</label>
46
- <label for="switch" data-state="off" hidden>Message when off</label>
47
- </div>
48
- `);
49
- element = container.querySelector('pf-switch');
50
- snapshot = await a11ySnapshot({ selector: '#switch' });
51
- });
52
- it('is accessible', function () {
53
- expect(snapshot.role).to.equal('checkbox');
54
- expect(snapshot.name).to.be.ok;
55
- expect(snapshot.checked).to.be.false;
56
- });
57
- it('should show the label for the unchecked state', function () {
58
- expect(snapshot.name).to.equal('Message when off');
59
- });
60
- describe('clicking the checkbox', function () {
61
- beforeEach(async function () {
62
- element.click();
63
- await element.updateComplete;
64
- await nextFrame();
65
- snapshot = await a11ySnapshot({ selector: '#switch' });
66
- });
67
- it('should be checked', function () {
68
- expect(element.checked).to.be.true;
69
- expect(snapshot.checked).to.be.true;
70
- });
71
- it('should show the label for the checked state', function () {
72
- expect(snapshot.name).to.equal('Message when on');
73
- });
74
- });
75
- });
76
- describe('when checked attr is present', function () {
77
- let element;
78
- beforeEach(async function () {
79
- element = await createFixture(html `
80
- <pf-switch checked></pf-switch>
81
- `);
82
- });
83
- it('should display a check icon', async function () {
84
- // TODO: can we test this without inspecting the private shadowRoot?
85
- const svg = element.shadowRoot.querySelector('svg');
86
- expect(svg).to.be.ok;
87
- expect(svg?.hasAttribute('hidden')).to.be.false;
88
- });
89
- });
90
- describe('when checked and show-check-icon attrs are present', function () {
91
- let element;
92
- beforeEach(async function () {
93
- const container = await createFixture(html `
94
- <div>
95
- <pf-switch id="switch" show-check-icon checked></pf-switch>
96
- <label for="switch" data-state="on">Message when on</label>
97
- <label for="switch" data-state="off">Message when off</label>
98
- </div>
99
- `);
100
- element = container.querySelector('pf-switch');
101
- });
102
- it('should display a check icon', async function () {
103
- // TODO: can we test this without inspecting the private shadowRoot?
104
- const svg = element.shadowRoot.querySelector('svg');
105
- expect(svg).to.be.ok;
106
- expect(svg?.hasAttribute('hidden')).to.be.false;
107
- });
108
- });
109
- describe('when checked and show-check-icon attrs are present', function () {
110
- let element;
111
- beforeEach(async function () {
112
- element = await createFixture(html `
113
- <pf-switch id="switch" show-check-icon checked></pf-switch>
114
- <label for="switch" data-state="on">Message when on</label>
115
- <label for="switch" data-state="off">Message when off</label>
116
- `);
117
- });
118
- it('should display a check icon', async function () {
119
- // TODO: can we test this without inspecting the private shadowRoot?
120
- const svg = element.shadowRoot.querySelector('svg');
121
- expect(svg).to.be.ok;
122
- expect(svg?.hasAttribute('hidden')).to.be.false;
123
- });
124
- });
125
- describe('when nested inside a label element', function () {
126
- let label;
127
- let element;
128
- let snapshot;
129
- beforeEach(async function () {
130
- label = await createFixture(html `
131
- <label>
132
- <span>Dark Mode</span>
133
- <pf-switch id="switch"></pf-switch>
134
- </label>
135
- `);
136
- element = label.querySelector('pf-switch');
137
- snapshot = await a11ySnapshot({ selector: 'pf-switch' });
138
- });
139
- it('does not hide label', function () {
140
- expect(label.hidden).to.be.false;
141
- });
142
- it('has an accessible name', function () {
143
- expect(snapshot.name).to.equal('Dark Mode');
144
- });
145
- describe('clicking the label', function () {
146
- beforeEach(function () {
147
- label.click();
148
- });
149
- it('toggles the state', function () {
150
- expect(element.checked).to.be.true;
151
- });
152
- });
153
- describe('clicking the switch', function () {
154
- beforeEach(function () {
155
- element.click();
156
- });
157
- it('toggles the state', function () {
158
- expect(element.checked).to.be.true;
159
- });
160
- });
161
- });
162
- // TODO: test keyboard a11y with wtr sendKeys
163
- });
164
- //# sourceMappingURL=pf-switch.spec.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"pf-switch.spec.js","sourceRoot":"","sources":["pf-switch.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import type { A11yTreeSnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';\nimport { expect, html, nextFrame } from '@open-wc/testing';\nimport { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';\nimport { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';\n\nimport { PfSwitch } from '@patternfly/elements/pf-switch/pf-switch.js';\n\ndescribe('<pf-switch>', function() {\n describe('simply instantiating', function() {\n let element: PfSwitch;\n let snapshot: A11yTreeSnapshot;\n beforeEach(async function() {\n const container = await createFixture<PfSwitch>(html`\n <div>\n <pf-switch></pf-switch>\n </div>\n `);\n element = container.querySelector('pf-switch')!;\n snapshot = await a11ySnapshot({ selector: 'pf-switch' });\n });\n it('should upgrade', async function() {\n const klass = customElements.get('pf-switch');\n expect(element)\n .to.be.an.instanceOf(klass)\n .and\n .to.be.an.instanceOf(PfSwitch);\n });\n it('has accessible role', function() {\n expect(snapshot.role).to.equal('checkbox');\n });\n it('has accessible checked field', function() {\n expect(snapshot.role).to.equal('checkbox');\n });\n it('requires accessible name', function() {\n // Double negative - this would fail an accessibility audit,\n // but that failure would be correct, because the template instantiated\n // in this test's beforeeach hook does not have an accessible name\n expect(snapshot.name).to.not.be.ok;\n });\n });\n\n describe('with labels for on and off state', function() {\n let element: PfSwitch;\n let snapshot: A11yTreeSnapshot;\n beforeEach(async function() {\n const container = await createFixture<PfSwitch>(html`\n <div>\n <pf-switch id=\"switch\"></pf-switch>\n <label for=\"switch\" data-state=\"on\">Message when on</label>\n <label for=\"switch\" data-state=\"off\" hidden>Message when off</label>\n </div>\n `);\n element = container.querySelector('pf-switch')!;\n snapshot = await a11ySnapshot({ selector: '#switch' });\n });\n\n it('is accessible', function() {\n expect(snapshot.role).to.equal('checkbox');\n expect(snapshot.name).to.be.ok;\n expect(snapshot.checked).to.be.false;\n });\n\n it('should show the label for the unchecked state', function() {\n expect(snapshot.name).to.equal('Message when off');\n });\n\n describe('clicking the checkbox', function() {\n beforeEach(async function() {\n element.click();\n await element.updateComplete;\n await nextFrame();\n snapshot = await a11ySnapshot({ selector: '#switch' });\n });\n it('should be checked', function() {\n expect(element.checked).to.be.true;\n expect(snapshot.checked).to.be.true;\n });\n it('should show the label for the checked state', function() {\n expect(snapshot.name).to.equal('Message when on');\n });\n });\n });\n\n describe('when checked attr is present', function() {\n let element: PfSwitch;\n beforeEach(async function() {\n element = await createFixture<PfSwitch>(html`\n <pf-switch checked></pf-switch>\n `);\n });\n it('should display a check icon', async function() {\n // TODO: can we test this without inspecting the private shadowRoot?\n const svg = element.shadowRoot.querySelector('svg');\n expect(svg).to.be.ok;\n expect(svg?.hasAttribute('hidden')).to.be.false;\n });\n });\n\n describe('when checked and show-check-icon attrs are present', function() {\n let element: PfSwitch;\n beforeEach(async function() {\n const container = await createFixture<PfSwitch>(html`\n <div>\n <pf-switch id=\"switch\" show-check-icon checked></pf-switch>\n <label for=\"switch\" data-state=\"on\">Message when on</label>\n <label for=\"switch\" data-state=\"off\">Message when off</label>\n </div>\n `);\n element = container.querySelector('pf-switch')!;\n });\n it('should display a check icon', async function() {\n // TODO: can we test this without inspecting the private shadowRoot?\n const svg = element.shadowRoot.querySelector('svg');\n expect(svg).to.be.ok;\n expect(svg?.hasAttribute('hidden')).to.be.false;\n });\n });\n\n describe('when checked and show-check-icon attrs are present', function() {\n let element: PfSwitch;\n beforeEach(async function() {\n element = await createFixture<PfSwitch>(html`\n <pf-switch id=\"switch\" show-check-icon checked></pf-switch>\n <label for=\"switch\" data-state=\"on\">Message when on</label>\n <label for=\"switch\" data-state=\"off\">Message when off</label>\n `);\n });\n it('should display a check icon', async function() {\n // TODO: can we test this without inspecting the private shadowRoot?\n const svg = element.shadowRoot.querySelector('svg');\n expect(svg).to.be.ok;\n expect(svg?.hasAttribute('hidden')).to.be.false;\n });\n });\n\n describe('when nested inside a label element', function() {\n let label: HTMLLabelElement;\n let element: PfSwitch;\n let snapshot: A11yTreeSnapshot;\n beforeEach(async function() {\n label = await createFixture<HTMLLabelElement>(html`\n <label>\n <span>Dark Mode</span>\n <pf-switch id=\"switch\"></pf-switch>\n </label>\n `);\n element = label.querySelector('pf-switch')!;\n snapshot = await a11ySnapshot({ selector: 'pf-switch' });\n });\n it('does not hide label', function() {\n expect(label.hidden).to.be.false;\n });\n it('has an accessible name', function() {\n expect(snapshot.name).to.equal('Dark Mode');\n });\n describe('clicking the label', function() {\n beforeEach(function() {\n label.click();\n });\n it('toggles the state', function() {\n expect(element.checked).to.be.true;\n });\n });\n describe('clicking the switch', function() {\n beforeEach(function() {\n element.click();\n });\n it('toggles the state', function() {\n expect(element.checked).to.be.true;\n });\n });\n });\n\n // TODO: test keyboard a11y with wtr sendKeys\n});\n"]}
@@ -1,62 +0,0 @@
1
- main {
2
- display: block;
3
- grid: unset;
4
- }
5
-
6
- .example {
7
- margin: 0 auto;
8
- padding: 0 16px 32px;
9
- width: 100%;
10
- max-width: 1008px;
11
- }
12
-
13
- .example:last-of-type {
14
- padding-block-end: 64px;
15
- }
16
-
17
- .input {
18
- margin-block-start: 16px;
19
- }
20
-
21
- @media screen and (min-width: 768px) {
22
- .example {
23
- padding: 0 32px 32px;
24
- }
25
- }
26
-
27
- /*
28
- Inset Examples set class on host::part(tabs-container)
29
- */
30
- .inset-sm::part(tabs-container) {
31
- --pf-c-tabs--inset: var(--pf-global--spacer--sm, 0.5rem);
32
- --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--sm, 0.5rem);
33
- --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--sm, 0.5rem);
34
- }
35
-
36
- .inset-md::part(tabs-container) {
37
- --pf-c-tabs--inset: var(--pf-global--spacer--md, 1rem);
38
- --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--md, 1rem);
39
- --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--md, 1rem);
40
- }
41
-
42
- .inset-lg::part(tabs-container) {
43
- --pf-c-tabs--inset: var(--pf-global--spacer--lg, 1.5rem);
44
- --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--lg, 1.5rem);
45
- --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--lg, 1.5rem);
46
- }
47
-
48
- .inset-xl::part(tabs-container) {
49
- --pf-c-tabs--inset: var(--pf-global--spacer--xl, 2rem);
50
- --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--xl, 2rem);
51
- --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--xl, 2rem);
52
- }
53
-
54
- .inset-2xl::part(tabs-container) {
55
- --pf-c-tabs--inset: var(--pf-global--spacer--2xl, 3rem);
56
- --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--2xl, 3rem);
57
- --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--2xl, 3rem);
58
- }
59
-
60
- .inset-page::part(tabs-container) {
61
- --pf-c-tabs--inset: var(--pf-c-tabs--m-page-insets--inset, var(--pf-global--spacer--md, 1rem));
62
- }
@@ -1,44 +0,0 @@
1
- import 'element-internals-polyfill';
2
- import '@patternfly/elements/pf-icon/pf-icon.js';
3
- import '@patternfly/elements/pf-switch/pf-switch.js';
4
- import '@patternfly/elements/pf-tabs/pf-tabs.js';
5
-
6
- const toggleVariant = document.getElementById('toggle-variant');
7
- const resize = document.getElementById('overflow');
8
- const verticalInput = document.getElementById('toggle-vertical');
9
- const resizeInput = document.getElementById('toggle-resize');
10
- const verticalVariant = document.querySelector('pf-tabs[vertical]');
11
- const boxVariant = document.querySelector('pf-tabs[box]');
12
- const inset = document.querySelector('#inset');
13
-
14
- function variantToggle() {
15
- boxVariant.setAttribute('box', toggleVariant.checked ? 'dark' : 'light');
16
- }
17
-
18
- function verticalToggle() {
19
- if (verticalInput.checked) {
20
- verticalVariant.setAttribute('box', 'dark');
21
- } else {
22
- verticalVariant.removeAttribute('box');
23
- }
24
- }
25
-
26
- function resizeToggle() {
27
- if (resizeInput.checked) {
28
- resize.setAttribute('box', 'dark');
29
- } else {
30
- resize.removeAttribute('box');
31
- }
32
- }
33
-
34
- function insetToggle(event) {
35
- inset.classList = event.target.value;
36
- }
37
-
38
- for (const input of document.querySelectorAll('input[name="toggle-inset"]')) {
39
- input.addEventListener('change', insetToggle);
40
- }
41
-
42
- toggleVariant.addEventListener('change', variantToggle);
43
- resizeInput.addEventListener('change', resizeToggle);
44
- verticalInput.addEventListener('change', verticalToggle);
@@ -1 +0,0 @@
1
- export {};
@@ -1,13 +0,0 @@
1
- import { test } from '@playwright/test';
2
- import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
3
- const tagName = 'pf-tabs';
4
- test.describe(tagName, () => {
5
- // Run tests in this file with portrait-like viewport.
6
- test.use({ viewport: { width: 1200, height: 1000 } });
7
- test('snapshot', async ({ page }) => {
8
- const componentPage = new PfeDemoPage(page, tagName);
9
- await componentPage.navigate();
10
- await componentPage.snapshot();
11
- });
12
- });
13
- //# sourceMappingURL=pf-tabs.e2e.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"pf-tabs.e2e.js","sourceRoot":"","sources":["pf-tabs.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,SAAS,CAAC;AAE1B,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,sDAAsD;IACtD,IAAI,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;IACtD,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAC/B,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\n\nconst tagName = 'pf-tabs';\n\ntest.describe(tagName, () => {\n // Run tests in this file with portrait-like viewport.\n test.use({ viewport: { width: 1200, height: 1000 } });\n test('snapshot', async ({ page }) => {\n const componentPage = new PfeDemoPage(page, tagName);\n await componentPage.navigate();\n await componentPage.snapshot();\n });\n});\n"]}
@@ -1 +0,0 @@
1
- import '@patternfly/pfe-tools/test/stub-logger.js';