@salesforcedevs/dx-components 0.26.1-alpha.12 → 0.26.1-alpha.17

package/src/modules/dx/interactiveImage/interactiveImage.stories.ts

@@ -1,31 +0,0 @@
-import { html } from "lit-html";
-import { mockMultipleDownloadProps } from "./__tests__/mockProps";
-
-export default {
-    title: "dx/dx-interactive-image",
-    component: "dx-interactive-image"
-};
-
-// prettier-ignore
-const createStyles = () => html `
-    <style>
-        #root {
-            max-width: 800px;
-        }
-    </style>`;
-
-const urls = JSON.stringify(mockMultipleDownloadProps.downloadUrls);
-
-export const SingleDownload = () => html` ${createStyles()}
-    <dx-interactive-image
-        title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. "
-        featured-src="https://i.imgur.com/FUsyxR5.jpg"
-        download-urls="https://i.imgur.com/FUsyxR5.jpg"
-    ></dx-interactive-image>`;
-
-export const MultipleDownloads = () => html` ${createStyles()}
-    <dx-interactive-image
-        title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. "
-        featured-src="https://i.imgur.com/FUsyxR5.jpg"
-        download-urls="${urls}"
-    ></dx-interactive-image>`;

package/src/modules/dx/lazy/__tests__/lazy.test.ts

@@ -1,43 +0,0 @@
-import Lazy from "dx/lazy";
-import { createRenderComponent } from "utils-internal/tests";
-
-const TAG = "dx-lazy";
-const renderComponent = createRenderComponent(TAG, Lazy);
-
-function mockIntersectionObserver() {
-    return jest.fn().mockImplementation(() => {
-        return {
-            observe: jest.fn(),
-            disconnect: jest.fn()
-        };
-    });
-}
-
-describe(TAG, () => {
-    beforeAll(() => {
-        global.IntersectionObserver = mockIntersectionObserver();
-    });
-
-    describe("component render", () => {
-        it("should render with default mode of 'idle'", () => {
-            const component = renderComponent({});
-
-            expect(component.mode).toEqual("idle");
-
-            return expect(component).toBeAccessible();
-        });
-
-        it("should render with default intersection observer options", () => {
-            const component = renderComponent({
-                mode: "intersection"
-            });
-
-            expect(component.mode).toEqual("intersection");
-            expect(component.rootId).toBeUndefined();
-            expect(component.rootMargin).toEqual("0px");
-            expect(component.threshold).toEqual(0);
-
-            return expect(component).toBeAccessible();
-        });
-    });
-});

package/src/modules/dx/lazy/lazy.stories.ts

@@ -1,132 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-lazy",
-    component: "dx-lazy"
-};
-
-export const IdleCallback = () => html`
-    <style>
-        dx-lazy {
-            border: 1px dashed;
-            width: 300px;
-            height: 300px;
-            display: block;
-        }
-    </style>
-    <dx-lazy mode="idle">
-        <div>
-            <span>Idle Child DOM rendered</span>
-            <dx-icon
-                sprite="salesforcebrand"
-                symbol="learning"
-                size="2xlarge"
-            ></dx-icon>
-        </div>
-    </dx-lazy>
-`;
-
-export const IntersectionCallback = () => html`
-    <style>
-        .lazy-container {
-            padding: 10px;
-            height: 1000px;
-            display: flex;
-            flex-direction: column;
-            justify-content: flex-end;
-            border: 1px solid;
-        }
-
-        dx-lazy {
-            border: 1px dashed;
-            width: 300px;
-            height: 300px;
-            display: block;
-        }
-    </style>
-    <span>scroll down 👇</span>
-    <div class="lazy-container">
-        <span>dx-lazy</span>
-        <dx-lazy mode="intersection" threshold="1">
-            <div>
-                <span>Child DOM rendered</span>
-                <dx-icon
-                    sprite="salesforcebrand"
-                    symbol="learning"
-                    size="2xlarge"
-                ></dx-icon>
-            </div>
-        </dx-lazy>
-    </div>
-`;
-
-export const IntersectionCallbackWithRootElementMarginAndThreshold = () => html`
-    <style>
-        .scrollable-ancestor {
-            padding: 10px;
-            border: 1px solid;
-            height: 400px;
-            overflow: scroll;
-        }
-
-        .top-margin {
-            position: absolute;
-            height: 100px;
-            width: 100%;
-            left: 0;
-            top: 0;
-            background-color: rgb(173 216 230 / 20%);
-        }
-
-        .bottom-margin {
-            position: absolute;
-            height: 100px;
-            width: 100%;
-            left: 0;
-            bottom: 0;
-            background-color: rgb(173 216 230 / 20%);
-        }
-
-        .lazy-container {
-            padding: 10px;
-            margin: 100px 0 100px 0;
-            height: 400px;
-            display: flex;
-            flex-direction: column;
-            justify-content: flex-end;
-            border: 1px dotted;
-        }
-
-        dx-lazy {
-            border: 1px dashed;
-            width: 150px;
-            height: 150px;
-            display: block;
-        }
-    </style>
-    <span>scroll down 👇</span>
-    <div style="position: relative;">
-        <div class="top-margin"></div>
-        <div class="bottom-margin"></div>
-        <div id="scrollable-ancestor" class="scrollable-ancestor">
-            <div class="lazy-container">
-                <span>dx-lazy</span>
-                <dx-lazy
-                    mode="intersection"
-                    root-id="scrollable-ancestor"
-                    root-margin="-100px 0px -100px 0px"
-                    threshold="1"
-                >
-                    <div>
-                        <span>Child DOM rendered</span>
-                        <dx-icon
-                            sprite="salesforcebrand"
-                            symbol="learning"
-                            size="2xlarge"
-                        ></dx-icon>
-                    </div>
-                </dx-lazy>
-            </div>
-        </div>
-    </div>
-`;

package/src/modules/dx/pagination/__tests__/pagination.test.ts

@@ -1,121 +0,0 @@
-import Pagination from "dx/pagination";
-import { createRenderComponent } from "utils-internal/tests";
-
-const TAG = "dx-pagination";
-const render = createRenderComponent(TAG, Pagination);
-
-describe(TAG, () => {
-    it("renders with passed in props", () => {
-        const element = render({
-            currentPage: "1",
-            totalPages: "10",
-            pagesToShow: "5"
-        });
-
-        const pageButtons = element.shadowRoot.querySelectorAll(
-            "button[data-page-id]"
-        );
-        expect(pageButtons.length).toEqual(5);
-
-        const activeButton = element.shadowRoot.querySelector(
-            "button.current-page"
-        );
-        expect(activeButton.textContent).toEqual("1");
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("doesn't render past totalPages", () => {
-        const element = render({
-            currentPage: "10",
-            totalPages: "10",
-            pagesToShow: "5"
-        });
-
-        const pageButtons = element.shadowRoot.querySelectorAll(
-            "button[data-page-id]"
-        );
-        for (const button of pageButtons) {
-            expect(parseInt(button.dataset.pageId, 10)).toBeLessThanOrEqual(10);
-        }
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("only renders up to totalPages", () => {
-        const element = render({
-            currentPage: "1",
-            totalPages: "3",
-            pagesToShow: "5"
-        });
-
-        const pageButtons = element.shadowRoot.querySelectorAll(
-            "button[data-page-id]"
-        );
-        for (const button of pageButtons) {
-            expect(parseInt(button.dataset.pageId, 10)).toBeLessThanOrEqual(3);
-        }
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("triggers custom event on previous button", () => {
-        const element = render({
-            currentPage: "3",
-            totalPages: "3",
-            pagesToShow: "5"
-        });
-
-        const handler = jest.fn();
-        element.addEventListener("pagechange", handler);
-
-        const previousButton: HTMLElement = element.shadowRoot.querySelector(
-            "[data-part-id=previous]"
-        );
-        previousButton.click();
-        expect(handler).toHaveBeenCalled();
-        expect(handler.mock.calls[0][0].detail).toEqual(2);
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("triggers custom event on next button", () => {
-        const element = render({
-            currentPage: "3",
-            totalPages: "3",
-            pagesToShow: "5"
-        });
-
-        const handler = jest.fn();
-        element.addEventListener("pagechange", handler);
-
-        const nextButton: HTMLElement = element.shadowRoot.querySelector(
-            "[data-part-id=next]"
-        );
-        nextButton.click();
-        expect(handler).toHaveBeenCalled();
-        expect(handler.mock.calls[0][0].detail).toEqual(4);
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("triggers custom event clicking on any page", () => {
-        const element = render({
-            currentPage: "3",
-            totalPages: "3",
-            pagesToShow: "5"
-        });
-
-        const handler = jest.fn();
-        element.addEventListener("pagechange", handler);
-
-        const activeButton = element.shadowRoot.querySelector(
-            "button.current-page"
-        );
-        activeButton.click();
-        expect(handler).toHaveBeenCalled();
-        expect(handler.mock.calls[0][0].detail).toEqual(3);
-
-        return expect(element).toBeAccessible();
-    });
-});

package/src/modules/dx/pagination/pagination.stories.ts

@@ -1,88 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-pagination",
-    component: "dx-pagination"
-};
-
-const createStyles = () => html`
-    <style>
-        body {
-            padding: 12px 0 0 0 !important;
-        }
-        .title {
-            font-weight: bold;
-            margin: 24px;
-        }
-    </style>
-`;
-
-const title = (value: string) => html`<p class="title">${value}</p>`;
-
-export const Base = () => html`
-    ${createStyles()}
-    ${title("Current page: 1, total pages: 10, pages to show: 5")}
-    <dx-pagination
-        current-page="1"
-        total-pages="10"
-        pages-to-show="5"
-    ></dx-pagination>
-
-    ${title("Current page: 3, total pages: 10, pages to show: 5")}
-    <dx-pagination
-        current-page="3"
-        total-pages="10"
-        pages-to-show="5"
-    ></dx-pagination>
-
-    ${title("Current page: 3, total pages: 3, pages to show: 5")}
-    <dx-pagination
-        current-page="3"
-        total-pages="3"
-        pages-to-show="5"
-    ></dx-pagination>
-
-    ${title(
-        "Current page: 3, total pages: 10, pages to show: 6 (rounded down to 5)"
-    )}
-    <dx-pagination
-        current-page="3"
-        total-pages="10"
-        pages-to-show="6"
-    ></dx-pagination>
-
-    ${title("Current page: 3, total pages: 10, pages to show: 3")}
-    <dx-pagination
-        current-page="3"
-        total-pages="10"
-        pages-to-show="3"
-    ></dx-pagination>
-
-    ${title("Current page: 6, total pages: 20, pages to show: 11")}
-    <dx-pagination
-        current-page="6"
-        total-pages="20"
-        pages-to-show="11"
-    ></dx-pagination>
-
-    ${title("Current page: 20, total pages: 20, pages to show: 11")}
-    <dx-pagination
-        current-page="20"
-        total-pages="20"
-        pages-to-show="11"
-    ></dx-pagination>
-
-    ${title("Current page: 10, total pages: 10, pages to show: 5")}
-    <dx-pagination
-        current-page="10"
-        total-pages="10"
-        pages-to-show="5"
-    ></dx-pagination>
-
-    ${title("Current page: 1, total pages: 3, pages to show: 2")}
-    <dx-pagination
-        current-page="1"
-        total-pages="3"
-        pages-to-show="2"
-    ></dx-pagination>
-`;

package/src/modules/dx/podcastHost/__tests__/mockProps.ts

@@ -1,8 +0,0 @@
-export default {
-    firstName: "Maynard",
-    lastName: "Maynard James Keenan",
-    imgSrc: "https://placekitten.com/96/96",
-    twitterHref: "https://twitter.com/puscifer",
-    bio:
-        "Maynard James Keenan (born James Herbert Keenan; April 17, 1964) is an American singer, songwriter, musician, record producer, actor, martial artist, and winemaker. He is best known as the lead singer and primary lyricist of the rock band Tool, with whom he has released five studio albums, A Perfect Circle, with whom he has released four studio albums, and Puscifer, with whom he has released four studio albums."
-};

package/src/modules/dx/podcastHost/__tests__/podcastHost.test.ts

@@ -1,21 +0,0 @@
-import PodcastHost from "dx/podcastHost";
-import { createRenderComponent } from "utils-internal/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-podcast-host";
-const render = createRenderComponent(TAG, PodcastHost);
-
-describe(TAG, () => {
-    it("renders the image, host, bio and link", () => {
-        const element = render(mockProps);
-
-        const els = [
-            ".host-img > img",
-            ".dx-text-heading-4",
-            ".host-bio p",
-            "dx-button"
-        ].map((query) => element.shadowRoot.querySelector(query));
-        expect(els).not.toContain(null);
-        return expect(element).toBeAccessible();
-    });
-});

package/src/modules/dx/podcastHost/podcastHost.stories.ts

@@ -1,17 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-podcast-host",
-    component: "dx-podcast-host"
-};
-
-export const Base = () => html`
-    <dx-podcast-host
-        first-name="Maynard"
-        last-name="James Keenan"
-        img-src="https://placekitten.com/96/96"
-        twitter-href="https://twitter.com/puscifer"
-        bio="Maynard James Keenan (born James Herbert Keenan; April 17, 1964) is an American singer, songwriter, musician, record producer, actor, martial artist, and winemaker. He is best known as the lead singer and primary lyricist of the rock band Tool, with whom he has released five studio albums, A Perfect Circle, with whom he has released four studio albums, and Puscifer, with whom he has released four studio albums."
-    >
-    </dx-podcast-host>
-`;

package/src/modules/dx/podcastPlayer/__tests__/podcastPlayer.test.ts

@@ -1,20 +0,0 @@
-import PodcastPlayer from "dx/podcastPlayer";
-import { createRenderComponent } from "utils-internal/tests";
-
-const TAG = "dx-podcast-player";
-const render = createRenderComponent(TAG, PodcastPlayer);
-
-const src =
-    "https://www3.assets.heroku.com/podcasts/codeish/Codeish_Episode_108_Wicked_CoolKit.mp3";
-
-describe(TAG, () => {
-    it("renders <audio> with provided src", () => {
-        const component = render({ src });
-
-        const player = component.shadowRoot.querySelector("audio");
-        expect(player).not.toBe(null);
-        expect(player.getAttribute("src")).toEqual(src);
-
-        return expect(component).toBeAccessible();
-    });
-});

package/src/modules/dx/podcastPlayer/podcastPlayer.stories.ts

@@ -1,13 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-podcast-player",
-    component: "dx-podcast-player"
-};
-
-export const Base = () => html`
-    <dx-podcast-player
-        src="https://www3.assets.heroku.com/podcasts/codeish/Codeish_Episode_108_Wicked_CoolKit.mp3"
-    >
-    </dx-podcast-player>
-`;

package/src/modules/dx/podcastSubscription/__tests__/podcastSubscription.test.ts

@@ -1,16 +0,0 @@
-import podcastSubscription from "dx/podcastSubscription";
-import { createRenderComponent } from "utils-internal/tests";
-
-const TAG = "dx-podcast-subscription";
-const render = createRenderComponent(TAG, podcastSubscription);
-
-describe(TAG, () => {
-    it("renders the badges linking to main podcast platforms", () => {
-        const element = render();
-
-        const badges = element.shadowRoot.querySelectorAll(".badges a");
-        expect(badges).not.toBe(undefined);
-        expect(badges.length).toBeGreaterThan(0);
-        return expect(element).toBeAccessible();
-    });
-});

package/src/modules/dx/podcastSubscription/podcastSubscription.stories.ts

@@ -1,23 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-podcast-subscription",
-    component: "dx-podcast-subscription"
-};
-
-const createStyles = () => html`
-    <style>
-        h2 {
-            font-weight: bold;
-            font-size: 24px;
-            margin: 10px 0 30px 0;
-        }
-    </style>
-`;
-
-export const Base = () => html`
-    ${createStyles()}
-    <h2>Podcast Subscription</h2>
-
-    <dx-podcast-subscription>eo!</dx-podcast-subscription>
-`;

package/src/modules/dx/popover/__tests__/mockProps.ts

@@ -1,8 +0,0 @@
-export default {
-    ariaLabel: "Label Test",
-    offset: "medium",
-    pagePadding: 20,
-    placement: "top-start",
-    small: true,
-    width: "300px"
-};