@salesforcedevs/dx-components 0.3.12 → 0.3.14-banner-alpha1

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/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/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/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.css

@@ -1,92 +0,0 @@
-@import "helpers/reset";
-@import "helpers/text";
-
-.container {
-    background-repeat: no-repeat;
-    background-position: center;
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-}
-
-@media screen and (max-width: 768px) {
-    .container {
-        background-image: url("/assets/svg/podcast-subscription-clouds-small.svg");
-        background-size: auto 200px;
-    }
-
-    .dx-text-heading-4 {
-        max-width: 28ex;
-        font-size: var(--dx-g-text-lg);
-    }
-
-    .badges {
-        margin: 8px auto 6px auto;
-        text-align: center;
-    }
-
-    .badges a {
-        display: inline-block;
-        margin: 4px auto;
-    }
-
-    .badges img {
-        width: 164px;
-    }
-
-    .secondary-links {
-        display: none;
-    }
-
-    .or-wherever {
-        margin-top: 2px;
-    }
-}
-
-@media screen and (min-width: 768px) {
-    .container {
-        background-image: url("/assets/svg/podcast-subscription-clouds.svg");
-        min-height: 242px;
-        padding-top: 22px;
-    }
-
-    .badges {
-        display: flex;
-        flex-direction: row;
-    }
-
-    .badges a {
-        display: inline-block;
-        margin: 22px 13px 8px 13px;
-    }
-
-    .badges img {
-        height: 40px;
-    }
-
-    .or-wherever {
-        display: none;
-    }
-
-    .secondary-links {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-    }
-
-    .secondary-links li {
-        margin: 9px 6px;
-    }
-
-    .secondary-links a {
-        color: var(--dx-g-blue-vibrant-50);
-        text-decoration: none;
-    }
-
-    .secondary-links a:hover {
-        text-decoration: underline;
-    }
-}

package/src/modules/dx/podcastSubscription/podcastSubscription.html

@@ -1,24 +0,0 @@
-<template>
-    <div class="container">
-        <h4 class="dx-text-heading-4">
-            Tune in to the Salesforce Developer Podcast
-        </h4>
-        <ul class="badges">
-            <template for:each={badgeLinks} for:item="badgeLink">
-                <li key={badgeLink.href}>
-                    <a href={badgeLink.href}>
-                        <img src={badgeLink.imgSrc} alt={badgeLink.imgAlt} />
-                    </a>
-                </li>
-            </template>
-        </ul>
-        <p class="or-wherever">Or wherever you listen to podcasts!</p>
-        <ul class="secondary-links">
-            <template for:each={secondaryLinks} for:item="secondaryLink">
-                <li key={secondaryLink.href}>
-                    <a href={secondaryLink.href}>{secondaryLink.text}</a>
-                </li>
-            </template>
-        </ul>
-    </div>
-</template>

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/podcastSubscription/podcastSubscription.ts

@@ -1,58 +0,0 @@
-import { LightningElement } from "lwc";
-
-export default class PodcastSubscription extends LightningElement {
-    badgeLinks = [
-        {
-            href:
-                "https://podcasts.apple.com/us/podcast/salesforce-developer-podcast/id1482325260",
-            imgAlt: "Listen on Apple Podcasts",
-            imgSrc: "/assets/svg/podcasts-subscription-apple.svg"
-        },
-        {
-            href:
-                "https://www.google.com/podcasts?feed=aHR0cHM6Ly9zYWxlc2ZvcmNlZGV2cG9kY2FzdC5saWJzeW4uY29tL3Jzcw%3D%3D",
-            imgAlt: "Listen on Google Podcasts",
-            imgSrc: "/assets/svg/podcasts-subscription-google.svg"
-        },
-        {
-            imgSrc: "/assets/svg/podcasts-subscription-spotify.svg",
-            imgAlt: "Listen on Spotify",
-            href: "https://open.spotify.com/show/75y378cB3FM6RQ8MGUDJ5M"
-        }
-    ];
-
-    secondaryLinks = [
-        {
-            href: "https://app.stitcher.com/browse/feed/470480/details",
-            text: "Stitcher"
-        },
-        {
-            href:
-                "https://www.amazon.com/Emerald-City-Productions-Salesforce-Developer/dp/B082PPXMLN/",
-            text: "Alexa"
-        },
-        {
-            href:
-                "https://www.pandora.com/podcast/salesforce-developer-podcast/PC:34746",
-            text: "Pandora"
-        },
-        {
-            href:
-                "https://www.iheart.com/podcast/263-salesforce-developer-podca-56252827",
-            text: "iHeartRadio"
-        },
-        {
-            href:
-                "https://tunein.com/podcasts/Technology-Podcasts/Salesforce-Developer-Podcast-p1255006/",
-            text: "Tune-in"
-        },
-        {
-            href: "https://www.breaker.audio/salesforce-developer-podcast",
-            text: "Breaker"
-        },
-        {
-            href: "https://dev.to/salesforce_developers_podcast",
-            text: "dev.to"
-        }
-    ];
-}

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

@@ -1,207 +0,0 @@
-import Popover from "dx/popover";
-import PopoverTest from "tests/popoverTest";
-import { createRenderComponent } from "utils/tests";
-
-const TAG = "dx-popover";
-const render = createRenderComponent(TAG, Popover);
-
-const renderWithSlot = createRenderComponent("dx-popover-test", PopoverTest);
-
-describe(TAG, () => {
-    it("renders the container div when a targetElement is set", () => {
-        const component = render();
-        const menuEl = component.shadowRoot.querySelector(".popover-container");
-        expect(menuEl).not.toBeNull();
-        return expect(component).toBeAccessible();
-    });
-
-    it("is accessible with its slotted control", async () => {
-        const component = renderWithSlot();
-
-        return expect(component).toBeAccessible();
-    });
-
-    it("correctly onboards its slotted control", async () => {
-        const component = renderWithSlot();
-
-        await Promise.resolve();
-
-        const button = component.shadowRoot.querySelector("dx-button");
-        const hasPopup = button.getAttribute("aria-haspopup");
-        expect(hasPopup).toEqual("true");
-    });
-
-    it("doesn't render menu content before interaction", async () => {
-        const component: Popover = render();
-        const content = component.shadowRoot.querySelector(".popover-content");
-
-        expect(content).toBeNull();
-
-        component.openPopover();
-
-        await Promise.resolve();
-
-        const contentAfterOpen = component.shadowRoot.querySelector(
-            ".popover-content"
-        );
-
-        expect(contentAfterOpen).not.toBeNull();
-
-        return expect(component).toBeAccessible();
-    });
-
-    it("fires open and close callbacks on interaction with its slotted control", async () => {
-        const component = renderWithSlot();
-        const mockOpen = jest.fn();
-        const mockClose = jest.fn();
-
-        await Promise.resolve();
-
-        const button = component.shadowRoot.querySelector("dx-button");
-        const popover = component.shadowRoot.querySelector("dx-popover");
-        popover.addEventListener("open", mockOpen);
-        popover.addEventListener("close", mockClose);
-
-        expect(mockOpen).not.toHaveBeenCalled();
-
-        button.click();
-
-        expect(mockOpen).toHaveBeenCalledTimes(1);
-
-        button.click();
-
-        expect(mockOpen).toHaveBeenCalledTimes(1);
-        expect(mockClose).toHaveBeenCalledTimes(1);
-
-        return expect(component).toBeAccessible();
-    });
-
-    it("doesn't fire open if passed control is disabled", () => {
-        const element = render();
-
-        const controlSlot: HTMLSlotElement = element.shadowRoot.querySelector(
-            "slot[name='control']"
-        );
-        expect(controlSlot).not.toBeNull();
-
-        const testButton = document.createElement("button");
-        testButton.disabled = true;
-        controlSlot.assignedElements = jest.fn(() => [testButton]);
-        controlSlot.dispatchEvent(new Event("slotchange"));
-
-        expect(controlSlot.assignedElements).toBeCalledTimes(1);
-
-        const mockOpen = jest.fn();
-        element.addEventListener("open", mockOpen);
-        element.open = true;
-
-        expect(element.open).toBe(false);
-        expect(mockOpen).not.toBeCalled();
-    });
-
-    it("fires open on slotted control ArrowDown", async () => {
-        const component = renderWithSlot();
-        const mockOpen = jest.fn();
-
-        await Promise.resolve();
-
-        const button = component.shadowRoot.querySelector("dx-button");
-        const popover = component.shadowRoot.querySelector("dx-popover");
-        popover.addEventListener("open", mockOpen);
-
-        expect(mockOpen).not.toHaveBeenCalled();
-
-        button.dispatchEvent(
-            new KeyboardEvent("keydown", { key: "ArrowDown" })
-        );
-
-        expect(mockOpen).toHaveBeenCalledTimes(1);
-    });
-
-    it.skip("calls onchange with correct value and closes afterwards, returning focus to the control", async () => {
-        const component = renderWithSlot();
-        const mockChange = jest.fn();
-        const mockClose = jest.fn();
-
-        await Promise.resolve();
-
-        const button = component.shadowRoot.querySelector("dx-button");
-        const popover = component.shadowRoot.querySelector("dx-popover");
-        popover.addEventListener("change", mockChange);
-        popover.addEventListener("close", mockClose);
-
-        const options = popover.shadowRoot.querySelectorAll(
-            "dx-popover-option"
-        );
-        const option = options[0];
-        // @ts-ignore
-        const id = option.option.id;
-
-        // @ts-ignore
-        option.dispatchEvent(new CustomEvent("select", { detail: id }));
-
-        expect(mockChange.mock.calls[0][0].detail).toEqual(id);
-        expect(mockClose).toBeCalledTimes(1);
-
-        expect(button.isSameNode(component.shadowRoot.activeElement)).toEqual(
-            true
-        );
-
-        return expect(component).toBeAccessible();
-    });
-
-    it.skip("fires close on click of Escape", async () => {
-        const component = renderWithSlot();
-        const mockOpen = jest.fn();
-        const mockClose = jest.fn();
-
-        await Promise.resolve();
-
-        const button = component.shadowRoot.querySelector("dx-button");
-        const popover = component.shadowRoot.querySelector("dx-popover");
-        const popoverMenu = popover.shadowRoot.querySelector(".popover_list");
-        popover.addEventListener("open", mockOpen);
-        popover.addEventListener("close", mockClose);
-
-        expect(mockOpen).not.toHaveBeenCalled();
-
-        button.click();
-
-        expect(mockOpen).toHaveBeenCalledTimes(1);
-
-        popoverMenu.dispatchEvent(
-            new KeyboardEvent("keydown", { key: "Escape" })
-        );
-
-        expect(mockOpen).toHaveBeenCalledTimes(1);
-        expect(mockClose).toHaveBeenCalledTimes(1);
-
-        return expect(component).toBeAccessible();
-    });
-
-    it.skip("fires open and close callbacks on mouseover/mouseleave of its slotted control", async () => {
-        const component = renderWithSlot({ openOnHover: true });
-        const mockOpen = jest.fn();
-        const mockClose = jest.fn();
-
-        await Promise.resolve();
-
-        const button = component.shadowRoot.querySelector("dx-button");
-        const popover = component.shadowRoot.querySelector("dx-popover");
-        popover.addEventListener("open", mockOpen);
-        popover.addEventListener("close", mockClose);
-
-        expect(mockOpen).not.toHaveBeenCalled();
-
-        button.dispatchEvent(new Event("mouseenter"));
-
-        expect(mockOpen).toHaveBeenCalledTimes(1);
-
-        document.dispatchEvent(new Event("mousemove"));
-
-        expect(mockOpen).toHaveBeenCalledTimes(1);
-        expect(mockClose).toHaveBeenCalledTimes(1);
-
-        return expect(component).toBeAccessible();
-    });
-});

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

@@ -1,82 +0,0 @@
-import { html } from "lit-html";
-import mockProps from "../checkboxGroup/__tests__/mockProps";
-
-export default {
-    title: "dx/dx-popover",
-    component: "dx-popover"
-};
-
-// prettier-ignore
-const styles = () => html `
-    <style>
-        #root {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            grid-gap: 20px;
-            justify-items: center;
-        }
-    </style>
-`;
-
-// prettier-ignore
-export const Base = () => html ` ${styles()}
-    <dx-popover>
-      <dx-button slot="control" icon-symbol="chevrondown">
-        Default
-      </dx-button>
-      <dx-checkbox-group
-          legend='${JSON.stringify(mockProps.legend)}'
-          options='${JSON.stringify(mockProps.options)}'
-          default-value='${JSON.stringify(mockProps.defaultValue)}'
-          slot="content"
-      ></dx-checkbox-group>
-    </dx-popover>
-
-    <br />
-
-    <dx-popover small="true">
-      <dx-button slot="control" icon-symbol="chevrondown">
-          Small
-      </dx-button>
-      <div slot="content">
-        Custom Content
-      </div>
-    </dx-popover>
-
-    <br />
-
-    <dx-popover offset="small">
-      <dx-button slot="control" icon-symbol="chevrondown">
-          Offset
-      </dx-button>
-      <div slot="content">
-          Custom Content
-      </div>
-    </dx-popover>
-
-    <br />
-
-    <dx-popover open-on-hover="true">
-      <dx-button slot="control" icon-symbol="chevrondown">
-          Open On Hover
-      </dx-button>
-      <div slot="content">
-          Custom Content
-      </div>
-    </dx-popover>
-`;
-
-export const DisabledControl = () => html`
-    ${styles()}
-    <dx-popover>
-        <dx-button slot="control" icon-symbol="chevrondown" disabled="true">
-            I'm disabled
-        </dx-button>
-        <dx-checkbox-group
-            legend="${JSON.stringify(mockProps.legend)}"
-            options="${JSON.stringify(mockProps.options)}"
-            default-value="${JSON.stringify(mockProps.defaultValue)}"
-            slot="content"
-        ></dx-checkbox-group>
-    </dx-popover>
-`;