q2-tecton-elements 1.44.0 → 1.45.0

package/dist/test/elements/q2-carousel-pane-test.e2e.js

@@ -1,92 +1,22 @@
 import { setup } from "../helpers";
 describe('q2-carousel-pane', () => {
-    it('displays slotted content as expected', async function () {
-        const page = await setup({
-            html: `
-                <q2-carousel-pane>
-                    <h2>Hello</h2>
-                    <p>World</p>
-                </q2-carousel-pane>
-            `,
-        });
-        const paneHeader = await page.find('h2');
-        const paneText = await page.find('p');
-        expect(paneHeader).toEqualText('Hello');
-        expect(paneText).toEqualText('World');
-    });
-    describe('@Props', () => {
-        describe('label', () => {
-            describe('when not provided', () => {
-                it('renders default value', async () => {
-                    const page = await setup({
-                        html: `
-                            <q2-carousel-pane>
-                                <h2>Hello</h2>
-                                <p>World</p>
-                            </q2-carousel-pane>
-                        `,
-                    });
-                    const carouselPane = await page.find('q2-carousel-pane');
-                    expect(carouselPane).toEqualAttribute('aria-label', 'tecton.element.carousel.itemDescription');
-                });
-            });
-            describe('when provided', () => {
-                it('renders the autoplay button', async function () {
-                    const page = await setup({
-                        html: `
-                            <q2-carousel-pane label="Hello">
-                                <h2>Hello</h2>
-                                <p>World</p>
-                            </q2-carousel-pane>
-                        `,
-                    });
-                    const carouselPane = await page.find('q2-carousel-pane');
-                    expect(carouselPane).toEqualAttribute('aria-label', 'Hello');
-                });
-            });
-        });
-        describe('isActivePane', () => {
-            describe('when not provided', () => {
-                it('renders default value', async () => {
-                    const page = await setup({
-                        html: `
-                            <q2-carousel-pane>
-                                <h2>Hello</h2>
-                                <p>World</p>
-                                <a href="#">Link</a>
-                                <button>Button 1</button>
-                                <button tabindex="2">Button 2</button>
-                            </q2-carousel-pane>
-                        `,
-                    });
-                    const focusableElements = await page.findAll('q2-btn, a[href], button, [tabindex]:not([tabindex="-1"])');
-                    expect(focusableElements).toHaveLength(3);
-                    expect(focusableElements[0]).toEqualAttribute('tabindex', '-1');
-                    expect(focusableElements[1]).toEqualAttribute('tabindex', '-1');
-                    expect(focusableElements[2]).toEqualAttribute('tabindex', '-1');
-                    expect(focusableElements[2]).toEqualAttribute('data-q2-tabindex', '2');
-                    const pane = await page.find('q2-carousel-pane');
-                    await pane.setAttribute('is-active-pane', 'true');
-                    await page.waitForChanges();
-                    expect(focusableElements[0]).not.toHaveAttribute('tabindex');
-                    expect(focusableElements[1]).not.toHaveAttribute('tabindex');
-                    expect(focusableElements[2]).not.toHaveAttribute('data-q2-tabindex');
-                    expect(focusableElements[2]).toEqualAttribute('tabindex', '2');
-                });
-            });
-            describe('when provided', () => {
-                it('renders the autoplay button', async function () {
-                    const page = await setup({
-                        html: `
-                            <q2-carousel-pane label="Hello">
-                                <h2>Hello</h2>
-                                <p>World</p>
-                            </q2-carousel-pane>
-                        `,
-                    });
-                    const carouselPane = await page.find('q2-carousel-pane');
-                    expect(carouselPane).toEqualAttribute('aria-label', 'Hello');
+    describe('Props', () => {
+        describe('slotFrameless', () => {
+            it('applies the necessary styles when true', async () => {
+                const page = await setup({
+                    html: `
+                        <q2-carousel-pane slot-frameless>
+                            <h2>Hello</h2>
+                            <p>World</p>
+                        </q2-carousel-pane>
+                    `,
                 });
+                const content = await page.find('.q2-carousel-pane-main-content');
+                const contentComputedStyle = content.getComputedStyle();
+                expect((await contentComputedStyle).boxShadow).toBe('none');
+                expect((await contentComputedStyle).border).toBe('0px none rgb(0, 0, 0)');
+                expect((await contentComputedStyle).borderRadius).toBe('0px');
+                expect((await contentComputedStyle).padding).toBe('0px');
             });
         });
     });

package/dist/test/elements/q2-carousel-pane-test.e2e.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-carousel-pane-test.e2e.js","sourceRoot":"","sources":["../../../test/elements/q2-carousel-pane-test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { setup } from '../helpers';\n\ndescribe('q2-carousel-pane', () => {\n    it('displays slotted content as expected', async function (): Promise<void> {\n        const page = await setup({\n            html: `\n                <q2-carousel-pane>\n                    <h2>Hello</h2>\n                    <p>World</p>\n                </q2-carousel-pane>\n            `,\n        });\n\n        const paneHeader = await page.find('h2');\n        const paneText = await page.find('p');\n        expect(paneHeader).toEqualText('Hello');\n        expect(paneText).toEqualText('World');\n    });\n\n    describe('@Props', () => {\n        describe('label', () => {\n            describe('when not provided', () => {\n                it('renders default value', async () => {\n                    const page = await setup({\n                        html: `\n                            <q2-carousel-pane>\n                                <h2>Hello</h2>\n                                <p>World</p>\n                            </q2-carousel-pane>\n                        `,\n                    });\n\n                    const carouselPane = await page.find('q2-carousel-pane');\n                    expect(carouselPane).toEqualAttribute('aria-label', 'tecton.element.carousel.itemDescription');\n                });\n            });\n\n            describe('when provided', () => {\n                it('renders the autoplay button', async function (): Promise<void> {\n                    const page = await setup({\n                        html: `\n                            <q2-carousel-pane label=\"Hello\">\n                                <h2>Hello</h2>\n                                <p>World</p>\n                            </q2-carousel-pane>\n                        `,\n                    });\n\n                    const carouselPane = await page.find('q2-carousel-pane');\n                    expect(carouselPane).toEqualAttribute('aria-label', 'Hello');\n                });\n            });\n        });\n\n        describe('isActivePane', () => {\n            describe('when not provided', () => {\n                it('renders default value', async () => {\n                    const page = await setup({\n                        html: `\n                            <q2-carousel-pane>\n                                <h2>Hello</h2>\n                                <p>World</p>\n                                <a href=\"#\">Link</a>\n                                <button>Button 1</button>\n                                <button tabindex=\"2\">Button 2</button>\n                            </q2-carousel-pane>\n                        `,\n                    });\n\n                    const focusableElements = await page.findAll(\n                        'q2-btn, a[href], button, [tabindex]:not([tabindex=\"-1\"])'\n                    );\n                    expect(focusableElements).toHaveLength(3);\n                    expect(focusableElements[0]).toEqualAttribute('tabindex', '-1');\n                    expect(focusableElements[1]).toEqualAttribute('tabindex', '-1');\n                    expect(focusableElements[2]).toEqualAttribute('tabindex', '-1');\n                    expect(focusableElements[2]).toEqualAttribute('data-q2-tabindex', '2');\n\n                    const pane = await page.find('q2-carousel-pane');\n                    await pane.setAttribute('is-active-pane', 'true');\n                    await page.waitForChanges();\n\n                    expect(focusableElements[0]).not.toHaveAttribute('tabindex');\n                    expect(focusableElements[1]).not.toHaveAttribute('tabindex');\n                    expect(focusableElements[2]).not.toHaveAttribute('data-q2-tabindex');\n                    expect(focusableElements[2]).toEqualAttribute('tabindex', '2');\n                });\n            });\n\n            describe('when provided', () => {\n                it('renders the autoplay button', async function (): Promise<void> {\n                    const page = await setup({\n                        html: `\n                            <q2-carousel-pane label=\"Hello\">\n                                <h2>Hello</h2>\n                                <p>World</p>\n                            </q2-carousel-pane>\n                        `,\n                    });\n\n                    const carouselPane = await page.find('q2-carousel-pane');\n                    expect(carouselPane).toEqualAttribute('aria-label', 'Hello');\n                });\n            });\n        });\n    });\n});\n"]}
+{"version":3,"file":"q2-carousel-pane-test.e2e.js","sourceRoot":"","sources":["../../../test/elements/q2-carousel-pane-test.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAC9B,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;QACnB,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;YAC3B,EAAE,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;gBACpD,MAAM,IAAI,GAAG,MAAM,KAAK,CAAC;oBACrB,IAAI,EAAE;;;;;qBAKL;iBACJ,CAAC,CAAC;gBAEH,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,gCAAgC,CAAC,CAAC;gBAClE,MAAM,oBAAoB,GAAG,OAAO,CAAC,gBAAgB,EAAE,CAAC;gBACxD,MAAM,CAAC,CAAC,MAAM,oBAAoB,CAAC,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;gBAC5D,MAAM,CAAC,CAAC,MAAM,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;gBAC1E,MAAM,CAAC,CAAC,MAAM,oBAAoB,CAAC,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBAC9D,MAAM,CAAC,CAAC,MAAM,oBAAoB,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC7D,CAAC,CAAC,CAAC;QACP,CAAC,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC","sourcesContent":["import { setup } from '../helpers';\n\ndescribe('q2-carousel-pane', () => {\n    describe('Props', () => {\n        describe('slotFrameless', () => {\n            it('applies the necessary styles when true', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-carousel-pane slot-frameless>\n                            <h2>Hello</h2>\n                            <p>World</p>\n                        </q2-carousel-pane>\n                    `,\n                });\n\n                const content = await page.find('.q2-carousel-pane-main-content');\n                const contentComputedStyle = content.getComputedStyle();\n                expect((await contentComputedStyle).boxShadow).toBe('none');\n                expect((await contentComputedStyle).border).toBe('0px none rgb(0, 0, 0)');\n                expect((await contentComputedStyle).borderRadius).toBe('0px');\n                expect((await contentComputedStyle).padding).toBe('0px');\n            });\n        });\n    });\n});\n"]}

package/dist/test/elements/q2-carousel-pane-test.spec.js

@@ -0,0 +1,113 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Q2CarouselPane } from "../../collection/components/q2-carousel-pane/q2-carousel-pane";
+describe('q2-carousel-pane', () => {
+    let carouselPane;
+    let specPage;
+    describe('Props', () => {
+        describe('label', () => {
+            describe('when not provided', () => {
+                it('provides a default aria-label', async () => {
+                    specPage = await newSpecPage({
+                        components: [Q2CarouselPane],
+                        html: `
+                            <q2-carousel-pane>
+                                <h1>Tony Stark</h1>
+                            </q2-carousel-pane>
+                        `,
+                    });
+                    expect(specPage.root).toEqualAttribute('aria-label', 'tecton.element.carousel.itemDescription');
+                });
+            });
+            describe('when provided', () => {
+                it('set the label as the aria-label', async () => {
+                    specPage = await newSpecPage({
+                        components: [Q2CarouselPane],
+                        html: `
+                            <q2-carousel-pane label="My Pane">
+                                <h1>Tony Stark</h1>
+                            </q2-carousel-pane>
+                        `,
+                    });
+                    expect(specPage.root).toEqualAttribute('aria-label', 'My Pane');
+                });
+            });
+        });
+        describe('isActivePane', () => {
+            let link;
+            let button;
+            let buttonWithTabIndex;
+            describe('when not provided', () => {
+                beforeEach(async () => {
+                    specPage = await newSpecPage({
+                        components: [Q2CarouselPane],
+                        html: `
+                            <q2-carousel-pane>
+                                <h2>Hello</h2>
+                                <p>World</p>
+                                <a href="#">Link</a>
+                                <button id="simple">Button 1</button>
+                                <button id="with-tabindex" tabindex="2">Button 2</button>
+                            </q2-carousel-pane>
+                        `,
+                    });
+                    link = specPage.root.querySelector('a[href]');
+                    button = specPage.root.querySelector('button#simple');
+                    buttonWithTabIndex = specPage.root.querySelector('button#with-tabindex');
+                });
+                it('sets tabindex of focusable elements to -1', async () => {
+                    expect(link).toEqualAttribute('tabindex', '-1');
+                    expect(button).toEqualAttribute('tabindex', '-1');
+                    expect(buttonWithTabIndex).toEqualAttribute('tabindex', '-1');
+                    expect(buttonWithTabIndex).toEqualAttribute('data-q2-tabindex', '2');
+                });
+                it('updates tabindex when isActivePane changes', async () => {
+                    await specPage.root.setAttribute('is-active-pane', 'true');
+                    expect(link).not.toHaveAttribute('tabindex');
+                    expect(button).not.toHaveAttribute('tabindex');
+                    expect(buttonWithTabIndex).not.toHaveAttribute('data-q2-tabindex');
+                    expect(buttonWithTabIndex).toEqualAttribute('tabindex', '2');
+                });
+            });
+            describe('when provided', () => {
+                beforeEach(async () => {
+                    specPage = await newSpecPage({
+                        components: [Q2CarouselPane],
+                        html: `
+                            <q2-carousel-pane is-active-pane>
+                                <h2>Hello</h2>
+                                <p>World</p>
+                                <a href="#">Link</a>
+                                <button id="simple">Button 1</button>
+                                <button id="with-tabindex" tabindex="2">Button 2</button>
+                            </q2-carousel-pane>
+                        `,
+                    });
+                    link = specPage.root.querySelector('a[href]');
+                    button = specPage.root.querySelector('button#simple');
+                    buttonWithTabIndex = specPage.root.querySelector('button#with-tabindex');
+                });
+                it('sets tabindex of focusable elements', async () => {
+                    expect(link).not.toHaveAttribute('tabindex');
+                    expect(button).not.toHaveAttribute('tabindex');
+                    expect(buttonWithTabIndex).not.toHaveAttribute('data-q2-tabindex');
+                    expect(buttonWithTabIndex).toEqualAttribute('tabindex', '2');
+                    expect(buttonWithTabIndex).not.toHaveAttribute('data-q2-tabindex');
+                });
+                it('updates tabindex when isActivePane changes', async () => {
+                    await specPage.root.setAttribute('is-active-pane', 'false');
+                    expect(link).toEqualAttribute('tabindex', '-1');
+                    expect(button).toEqualAttribute('tabindex', '-1');
+                    expect(buttonWithTabIndex).toEqualAttribute('tabindex', '-1');
+                    expect(buttonWithTabIndex).toEqualAttribute('data-q2-tabindex', '2');
+                });
+            });
+        });
+    });
+    describe('generatePaneClass', () => {
+        it('returns the correct class', async () => {
+            carouselPane = new Q2CarouselPane();
+            expect(carouselPane.generatePaneClass(5)).toBe('q2-carousel-pane swiper-slide q2-carousel-pane-5');
+        });
+    });
+});
+//# sourceMappingURL=q2-carousel-pane-test.spec.js.map

package/dist/test/elements/q2-carousel-pane-test.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"q2-carousel-pane-test.spec.js","sourceRoot":"","sources":["../../../test/elements/q2-carousel-pane-test.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { SpecPage, newSpecPage } from '@stencil/core/testing';\nimport { Q2CarouselPane } from 'src/components/q2-carousel-pane/q2-carousel-pane';\n\ndescribe('q2-carousel-pane', () => {\n    let carouselPane: Q2CarouselPane;\n    let specPage: SpecPage;\n\n    describe('Props', () => {\n        describe('label', () => {\n            describe('when not provided', () => {\n                it('provides a default aria-label', async () => {\n                    specPage = await newSpecPage({\n                        components: [Q2CarouselPane],\n                        html: `\n                            <q2-carousel-pane>\n                                <h1>Tony Stark</h1>\n                            </q2-carousel-pane>\n                        `,\n                    });\n                    expect(specPage.root).toEqualAttribute('aria-label', 'tecton.element.carousel.itemDescription');\n                });\n            });\n\n            describe('when provided', () => {\n                it('set the label as the aria-label', async () => {\n                    specPage = await newSpecPage({\n                        components: [Q2CarouselPane],\n                        html: `\n                            <q2-carousel-pane label=\"My Pane\">\n                                <h1>Tony Stark</h1>\n                            </q2-carousel-pane>\n                        `,\n                    });\n                    expect(specPage.root).toEqualAttribute('aria-label', 'My Pane');\n                });\n            });\n        });\n\n        describe('isActivePane', () => {\n            let link: HTMLElement;\n            let button: HTMLElement;\n            let buttonWithTabIndex: HTMLElement;\n\n            describe('when not provided', () => {\n                beforeEach(async () => {\n                    specPage = await newSpecPage({\n                        components: [Q2CarouselPane],\n                        html: `\n                            <q2-carousel-pane>\n                                <h2>Hello</h2>\n                                <p>World</p>\n                                <a href=\"#\">Link</a>\n                                <button id=\"simple\">Button 1</button>\n                                <button id=\"with-tabindex\" tabindex=\"2\">Button 2</button>\n                            </q2-carousel-pane>\n                        `,\n                    });\n\n                    link = specPage.root.querySelector('a[href]');\n                    button = specPage.root.querySelector('button#simple');\n                    buttonWithTabIndex = specPage.root.querySelector('button#with-tabindex');\n                });\n\n                it('sets tabindex of focusable elements to -1', async () => {\n                    expect(link).toEqualAttribute('tabindex', '-1');\n                    expect(button).toEqualAttribute('tabindex', '-1');\n                    expect(buttonWithTabIndex).toEqualAttribute('tabindex', '-1');\n                    expect(buttonWithTabIndex).toEqualAttribute('data-q2-tabindex', '2');\n                });\n\n                it('updates tabindex when isActivePane changes', async () => {\n                    await specPage.root.setAttribute('is-active-pane', 'true');\n\n                    expect(link).not.toHaveAttribute('tabindex');\n                    expect(button).not.toHaveAttribute('tabindex');\n                    expect(buttonWithTabIndex).not.toHaveAttribute('data-q2-tabindex');\n                    expect(buttonWithTabIndex).toEqualAttribute('tabindex', '2');\n                });\n            });\n\n            describe('when provided', () => {\n                beforeEach(async () => {\n                    specPage = await newSpecPage({\n                        components: [Q2CarouselPane],\n                        html: `\n                            <q2-carousel-pane is-active-pane>\n                                <h2>Hello</h2>\n                                <p>World</p>\n                                <a href=\"#\">Link</a>\n                                <button id=\"simple\">Button 1</button>\n                                <button id=\"with-tabindex\" tabindex=\"2\">Button 2</button>\n                            </q2-carousel-pane>\n                        `,\n                    });\n\n                    link = specPage.root.querySelector('a[href]');\n                    button = specPage.root.querySelector('button#simple');\n                    buttonWithTabIndex = specPage.root.querySelector('button#with-tabindex');\n                });\n\n                it('sets tabindex of focusable elements', async () => {\n                    expect(link).not.toHaveAttribute('tabindex');\n                    expect(button).not.toHaveAttribute('tabindex');\n                    expect(buttonWithTabIndex).not.toHaveAttribute('data-q2-tabindex');\n                    expect(buttonWithTabIndex).toEqualAttribute('tabindex', '2');\n                    expect(buttonWithTabIndex).not.toHaveAttribute('data-q2-tabindex');\n                });\n\n                it('updates tabindex when isActivePane changes', async () => {\n                    await specPage.root.setAttribute('is-active-pane', 'false');\n                    expect(link).toEqualAttribute('tabindex', '-1');\n                    expect(button).toEqualAttribute('tabindex', '-1');\n                    expect(buttonWithTabIndex).toEqualAttribute('tabindex', '-1');\n                    expect(buttonWithTabIndex).toEqualAttribute('data-q2-tabindex', '2');\n                });\n            });\n        });\n    });\n\n    describe('generatePaneClass', () => {\n        it('returns the correct class', async () => {\n            carouselPane = new Q2CarouselPane();\n            expect(carouselPane.generatePaneClass(5)).toBe('q2-carousel-pane swiper-slide q2-carousel-pane-5');\n        });\n    });\n});\n"]}

package/dist/test/elements/q2-carousel-test.e2e.js

@@ -1,16 +1,18 @@
 import { setup, dispatchEvent, testDeprecatedAriaLabel } from "../helpers";
 describe('q2-carousel', () => {
     const renderCarousel = (numberOfPanes, config) => {
-        const { showNavigation, hidePagination, fullWidthPanes, autoPlay, index } = Object.assign({
+        const { showNavigation, hidePagination, fullWidthPanes, framelessPanes, autoPlay, index } = Object.assign({
             showNavigation: false,
             hidePagination: false,
             fullWidthPanes: false,
+            framelessPanes: false,
             autoPlay: false,
         }, config);
         return `<q2-carousel
                     ${showNavigation ? `show-navigation-arrows` : ''}
                     ${hidePagination ? `hide-pagination` : ''}
                     ${fullWidthPanes ? `full-width-panes` : ''}
+                    ${framelessPanes ? `frameless-panes` : ''}
                     ${autoPlay ? `auto-play` : ''}
                     ${index ? `index="${index}"` : ''}
                 >
@@ -414,6 +416,30 @@ describe('q2-carousel', () => {
         expect(activeElementClasses.length).toEqual(0); // shift+tab from a pane should land focus outside of the carousel element
     });
     describe('@Props', () => {
+        describe('framelessPanes', () => {
+            describe('when not provided', () => {
+                it('does not set slot-frameless on panes', async () => {
+                    const page = await setup({
+                        html: renderCarousel(3, { framelessPanes: false }),
+                    });
+                    const swiperContainer = await page.find('.q2-carousel-swiper-container');
+                    expect(swiperContainer).not.toHaveClass('frameless-display');
+                    const panes = await page.findAll('q2-carousel-pane');
+                    expect(panes.every(async (pane) => (await pane.getProperty('slotFrameless')) === false)).toBeTruthy();
+                });
+            });
+            describe('when provided', () => {
+                it('sets slot-frameless on panes', async () => {
+                    const page = await setup({
+                        html: renderCarousel(3, { framelessPanes: true }),
+                    });
+                    const swiperContainer = await page.find('.q2-carousel-swiper-container');
+                    expect(swiperContainer).toHaveClass('frameless-display');
+                    const panes = await page.findAll('q2-carousel-pane');
+                    expect(panes.every(async (pane) => (await pane.getProperty('slotFrameless')) === true)).toBeTruthy();
+                });
+            });
+        });
         describe('autoPlay', () => {
             describe('when not provided', () => {
                 it('does not render autoplay button', async function () {