@salesforcedevs/dx-components 0.26.1-alpha.10 → 0.26.1-alpha.14

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

@@ -1,32 +0,0 @@
-import { html } from "lit-html";
-import { blogPostMock, podcastEpisodeMock } from "./__tests__/mockProps";
-
-export default {
-    title: "dx/dx-card-minimal",
-    component: "dx-card-minimal"
-};
-
-export const BlogPost = (args: { title: string; href: string }) => html`
-    <dx-card-minimal
-        title="${args.title}"
-        href="${args.href}"
-    ></dx-card-minimal>
-`;
-
-BlogPost.args = {
-    title: blogPostMock.title,
-    href: blogPostMock.href
-};
-
-export const PodcastEpisode = (args: { title: string; href: string }) => html`
-    <dx-card-minimal
-        title="${args.title}"
-        href="${args.href}"
-        content-type="${podcastEpisodeMock.contentType}"
-    ></dx-card-minimal>
-`;
-
-PodcastEpisode.args = {
-    title: podcastEpisodeMock.title,
-    href: podcastEpisodeMock.href
-};

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

@@ -1,58 +0,0 @@
-import CardNews from "dx/cardNews";
-import { createRenderComponent } from "utils-internal/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-card-news";
-const render = createRenderComponent(TAG, CardNews);
-
-describe(TAG, () => {
-    it("renders the link, title, body and button", () => {
-        const element = render(mockProps);
-
-        const els = ["a", "h3", "p", "dx-button"].map((query) =>
-            element.shadowRoot.querySelector(query)
-        );
-
-        expect(els).not.toContain(null);
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders the image when present", () => {
-        const props = mockProps;
-        props.imgAlt = "Vector image of a lake and a mountain.";
-        props.imgSrc = "/assets/svg/dsc-home-news-bear.svg";
-
-        const element = render(props);
-
-        const els = ["img"].map((query) =>
-            element.shadowRoot.querySelector(query)
-        );
-
-        expect(els).not.toContain(null);
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders with vertical align and container width large", () => {
-        const element = render({
-            ...mockProps,
-            dark: true,
-            imgAlt: "Vector image of a lake and a mountain.",
-            imgSrc: "/assets/svg/dsc-home-news-bear.svg",
-            textContainerWidth: "large",
-            imgVerticalAlign: "bottom"
-        });
-
-        const link: HTMLElement =
-            element.shadowRoot.querySelector(".dx-card-news");
-        const image: HTMLElement = element.shadowRoot.querySelector("img");
-        expect(link.classList).toContain("is-dark");
-        expect(image.classList).toContain(
-            "dx-card-news-img-vertical-align-bottom"
-        );
-        expect(image.classList).toContain("dx-card-news-img-small");
-
-        return expect(element).toBeAccessible();
-    });
-});

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

@@ -1,7 +0,0 @@
-export default {
-    href: "https://salesforce.com",
-    title: "Salesforce Developer Survey",
-    body: "Share your insights to help us improve your developer experience",
-    backgroundColor: "indigo-vibrant-20",
-    buttonText: "Take the Survey"
-};

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

@@ -1,115 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-card-news",
-    component: "dx-card-news"
-};
-
-const createStyles = () => html`
-    <style>
-        #large {
-            width: 700px;
-        }
-        dx-card-news {
-            width: 400px;
-            max-width: 100%;
-            min-width: 240px;
-            margin-bottom: 16px;
-        }
-        @media screen and (min-width: 1024px) {
-            dx-card-news {
-                margin-bottom: 24px;
-            }
-        }
-        .title {
-            margin: 1rem 0;
-        }
-    </style>
-`;
-
-const title = (value: string) => html`<div class="title">${value}</div>`;
-
-export const Base = () => html`
-    ${createStyles()} ${title("Large size, image in right side")}
-
-    <dx-card-news
-        id="large"
-        href="https://salesforce.com"
-        img-alt="Vector image of a lake and a mountain."
-        img-src="/assets/svg/dsc-home-news-bear.svg"
-        title="Salesforce Developer Survey"
-        body="Share your insights to help us improve your developer experience"
-        background-color="indigo-vibrant-20"
-        size="large"
-        button-text="Take the Survey"
-        button-type="large"
-        img-placement="right"
-    ></dx-card-news>
-
-    ${title("Regular size, no image")}
-    <dx-card-news
-        href="https://salesforce.com"
-        title="Sample Gallery"
-        body="Get hands-on with code by exploring our Sample Gallery, updated for Spring'21"
-        background-color="indigo-vibrant-90"
-        color="cloud-blue-vibrant-20"
-        button-text="Check It Out"
-        button-type="inline"
-    ></dx-card-news>
-
-    ${title("Regular size, with image at the bottom")}
-    <dx-card-news
-        href="https://salesforce.com"
-        img-alt="Vector image of a lake and a mountain."
-        img-src="/assets/svg/lake-mountain.svg"
-        title="LEARN MOAR"
-        body="Discover what's new for Admins and Developers in the Spring'21 Release"
-        background-color="cloud-blue-vibrant-90"
-        color="cloud-blue-vibrant-20"
-        button-text="Learn moar"
-        button-type="inline"
-        img-placement="bottom"
-    ></dx-card-news>
-
-    ${title("Regular size, with image at the top")}
-    <dx-card-news
-        href="https://salesforce.com"
-        img-alt="Vector image of a lake and a mountain."
-        img-src="/assets/svg/lake-mountain.svg"
-        title="LEARN MOAR"
-        body="Discover what's new for Admins and Developers in the Spring'21 Release"
-        background-color="cloud-blue-vibrant-90"
-        color="cloud-blue-vibrant-20"
-        button-text="Learn moar"
-        button-type="inline"
-        img-placement="top"
-    ></dx-card-news>
-
-    ${title("Regular size, with image at the top and longer text")}
-
-    <dx-card-news
-        img-alt="Vector image of a lake and a mountain."
-        img-src="/assets/svg/lake-mountain.svg"
-        title="Support the Black Community"
-        body="This is a longer text than usual. The image should scale down. Global President of BOLDForce, our employee resource group, shares 8 things you can do to act against racial injustice."
-        background-color="gray-10"
-        dark="true"
-        img-placement="top"
-        button-text="Learn more"
-        button-type="inline"
-    ></dx-card-news>
-
-    ${title("Regular size, with image at the bottom and longer text")}
-
-    <dx-card-news
-        img-alt="Vector image of a lake and a mountain."
-        img-src="/assets/svg/lake-mountain.svg"
-        title="Support the Black Community"
-        body="This is a longer text than usual. The image should scale down. Global President of BOLDForce, our employee resource group, shares 8 things you can do to act against racial injustice."
-        background-color="gray-10"
-        dark="true"
-        img-placement="bottom"
-        button-text="Learn more"
-        button-type="inline"
-    ></dx-card-news>
-`;

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

@@ -1,68 +0,0 @@
-import CardPodcastEpisode from "dx/cardPodcastEpisode";
-import { createRenderComponent } from "utils-internal/tests";
-
-const TAG = "dx-card-content";
-const render = createRenderComponent(TAG, CardPodcastEpisode);
-const fourHours = new Date(Date.now() - 1.44e7).toISOString();
-const mockProps = {
-    body: "Test Body",
-    href: "https://developer.salesforce.com/",
-    length: "32 min",
-    number: "6",
-    title: "Becoming a Developer"
-};
-
-describe(TAG, () => {
-    it("renders", () => {
-        const element = render({ ...mockProps, datetime: fourHours });
-
-        const title: HTMLElement =
-            element.shadowRoot.querySelector("dx-card-title");
-        const body: HTMLElement = element.shadowRoot.querySelector(".body");
-        const dateTime: HTMLElement = element.shadowRoot.querySelector(
-            "dx-relative-date-time"
-        );
-        const length: HTMLElement = element.shadowRoot.querySelector(".length");
-
-        expect(title).not.toBeNull();
-        expect(body).not.toBeNull();
-        expect(dateTime).not.toBeNull();
-        expect(length).not.toBeNull();
-
-        expect(title.title).toEqual("Becoming a Developer");
-        expect(body.textContent).toEqual("Test Body");
-        expect(length.textContent).toEqual("32 min");
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("fires events", () => {
-        const element = render(mockProps);
-
-        const link: HTMLElement = element.shadowRoot.querySelector("a");
-        const containerDiv: HTMLElement =
-            element.shadowRoot.querySelector("div");
-        link.dispatchEvent(new CustomEvent("mouseenter"));
-
-        return Promise.resolve()
-            .then(() => {
-                expect(containerDiv.classList).toContain(
-                    "dx-card-base_link-hovered"
-                );
-                link.dispatchEvent(new CustomEvent("mouseleave"));
-            })
-            .then(() => {
-                expect(containerDiv.classList).not.toContain(
-                    "dx-card-base_link-hovered"
-                );
-            });
-    });
-
-    it("renders with Datetime", () => {
-        const element = render({ ...mockProps, dateTime: fourHours });
-        const formatedDate = element.shadowRoot.querySelector(
-            "dx-relative-date-time"
-        );
-        expect(formatedDate.value).not.toBeNull();
-    });
-});

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

@@ -1,31 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-card-podcast-episode",
-    component: "dx-card-podcast-episode"
-};
-
-const fourHours = new Date(Date.now() - 1.44e7).toISOString();
-
-const createStyles = () => html`
-    <style>
-        dx-card-podcast-episode {
-            width: 440px;
-            max-width: 100%;
-            min-width: 240px;
-        }
-    </style>
-`;
-
-export const Base = () => html`
-    ${createStyles()}
-    <dx-card-podcast-episode
-        body="Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
-        datetime="${fourHours}"
-        href="https://developer.salesforce.com/"
-        length="32 min"
-        number="6"
-        title="Becoming a Developer with Lexis Hanson"
-    >
-    </dx-card-podcast-episode>
-`;

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

@@ -1,36 +0,0 @@
-import CardPodcastEpisodeProvider from "dx/cardPodcastEpisodeProvider";
-import { createRenderComponent } from "utils-internal/tests";
-import mockWordpressEpisodes from "./mockWordpressEpisodes";
-
-const delay = () => new Promise((res) => setTimeout(res, 0));
-
-const TAG = "dx-card-podcast-episode-provider";
-const render = createRenderComponent(TAG, CardPodcastEpisodeProvider);
-
-beforeEach(() => {
-    const mockFetchPromise = Promise.resolve({
-        json: () => Promise.resolve(mockWordpressEpisodes),
-        status: 200
-    });
-    // @ts-ignore
-    jest.spyOn(global, "fetch").mockImplementation(() => mockFetchPromise);
-});
-
-describe(TAG, () => {
-    it("renders the correct number of posts", async () => {
-        const element = render();
-
-        expect(global.fetch).toHaveBeenCalledTimes(1);
-        expect(global.fetch).toHaveBeenCalledWith("/podcast/api?maxResults=6");
-
-        await delay();
-
-        const els = element.shadowRoot.querySelectorAll(
-            "dx-card-podcast-episode"
-        );
-
-        expect(els.length).toEqual(mockWordpressEpisodes.posts.length);
-
-        return expect(element).toBeAccessible();
-    });
-});

package/src/modules/dx/cardPodcastEpisodeProvider/__tests__/mockWordpressEpisodes.ts

@@ -1,50 +0,0 @@
-export default {
-    posts: [
-        {
-            date: "2021-02-22T08:45:10",
-            description:
-                "    Marisa Hambleton is a Managing Partner at MH2X. In this episode, we are discussing the Cactusforce conference. We talk about its origins and the recent virtual version of it. Marisa was introduced to Salesforce after both she and her husband lost their jobs at IBM.",
-            id: 233,
-            originalUrl:
-                "https://developer.salesforce.com/podcast/2021/02/episode-70-cactusforce-with-marisa-hambleton.html",
-            title: "Episode 70: Cactusforce with Marisa Hambleton",
-            url:
-                "/podcast/2021/02/episode-70-cactusforce-with-marisa-hambleton.html",
-            podcastDuration: "00:00:00"
-        },
-        {
-            date: "2021-02-22T08:45:10",
-            description:
-                "    Marisa Hambleton is a Managing Partner at MH2X. In this episode, we are discussing the Cactusforce conference. We talk about its origins and the recent virtual version of it. Marisa was introduced to Salesforce after both she and her husband lost their jobs at IBM.",
-            id: 234,
-            originalUrl:
-                "https://developer.salesforce.com/podcast/2021/02/episode-70-cactusforce-with-marisa-hambleton.html",
-            title: "Episode 70: Cactusforce with Marisa Hambleton",
-            url:
-                "/podcast/2021/02/episode-70-cactusforce-with-marisa-hambleton.html",
-            podcastDuration: "00:00:00"
-        },
-        {
-            date: "2021-02-22T08:45:10",
-            description:
-                "    Marisa Hambleton is a Managing Partner at MH2X. In this episode, we are discussing the Cactusforce conference. We talk about its origins and the recent virtual version of it. Marisa was introduced to Salesforce after both she and her husband lost their jobs at IBM.",
-            id: 235,
-            originalUrl:
-                "https://developer.salesforce.com/podcast/2021/02/episode-70-cactusforce-with-marisa-hambleton.html",
-            title: "Episode 70: Cactusforce with Marisa Hambleton",
-            url:
-                "/podcast/2021/02/episode-70-cactusforce-with-marisa-hambleton.html"
-        },
-        {
-            date: "2021-02-22T08:45:10",
-            description:
-                "    Marisa Hambleton is a Managing Partner at MH2X. In this episode, we are discussing the Cactusforce conference. We talk about its origins and the recent virtual version of it. Marisa was introduced to Salesforce after both she and her husband lost their jobs at IBM.",
-            id: 236,
-            originalUrl:
-                "https://developer.salesforce.com/podcast/2021/02/episode-70-cactusforce-with-marisa-hambleton.html",
-            title: "Episode 70: Cactusforce with Marisa Hambleton",
-            url:
-                "/podcast/2021/02/episode-70-cactusforce-with-marisa-hambleton.html"
-        }
-    ]
-};

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

@@ -1,66 +0,0 @@
-import CardSmall from "dx/cardSmall";
-import { createRenderComponent } from "utils-internal/tests";
-import mockProps from "./mockProps";
-import { isSlotEmpty, stopPropagationOnSlotted } from "utils-internal/slot";
-
-const TAG = "dx-card-small";
-const render = createRenderComponent(TAG, CardSmall);
-
-jest.mock("utils-internal/slot", () => {
-    return {
-        isSlotEmpty: jest.fn(),
-        stopPropagationOnSlotted: jest.fn()
-    };
-});
-
-describe(TAG, () => {
-    it("renders the link, title & body; also renders card as a link by default", () => {
-        const element = render(mockProps);
-
-        const els = ["dx-card-title", ".dx-text-body-2", "dx-icon-badge"].map(
-            (query) => element.shadowRoot.querySelector(query)
-        );
-        const card = element.shadowRoot.querySelector(".dx-card-base");
-
-        expect(els).not.toContain(null);
-        expect(card.tagName).toEqual("A");
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("sets proper styles", () => {
-        const element = render({
-            ...mockProps,
-            badgeSymbol: "circle",
-            borderless: true
-        });
-
-        const containerDiv: HTMLElement =
-            element.shadowRoot.querySelector("div");
-
-        expect(containerDiv.classList).toContain("has-icon");
-        expect(containerDiv.classList).toContain("dx-card-base_borderless");
-    });
-
-    it("renders slot", () => {
-        (isSlotEmpty as jest.Mock).mockReturnValue(false);
-        const element = render(mockProps);
-        const slot: HTMLSlotElement = element.shadowRoot.querySelector("slot");
-        const containerDiv: HTMLElement =
-            element.shadowRoot.querySelector(".dx-card-base_ctas");
-        slot.dispatchEvent(new Event("slotchange"));
-        expect(isSlotEmpty).toBeCalledTimes(1);
-        expect(stopPropagationOnSlotted).toBeCalledTimes(1);
-
-        return Promise.resolve().then(() => {
-            expect(containerDiv).not.toBeNull();
-        });
-    });
-
-    it("doesn't render whole card as a link when borderless", () => {
-        const element = render({ ...mockProps, borderless: true });
-        const card = element.shadowRoot.querySelector(".dx-card-base");
-
-        expect(card.tagName).toEqual("DIV");
-    });
-});

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

@@ -1,8 +0,0 @@
-export default {
-    body:
-        "This is a pretty long card body. It could say just about anything regarding the content of this card.",
-    title: "This Is A Test Title",
-    href: "/test-href",
-    badgeSymbol: "bucket",
-    target: "_blank"
-};

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

@@ -1,166 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-card-small",
-    component: "dx-card-small"
-};
-
-const createStyles = () => html`
-    <style>
-        dx-card-small {
-            margin-top: 25px;
-            margin-bottom: 25px;
-            width: 400px;
-            max-width: 100%;
-            min-width: 240px;
-        }
-    </style>
-`;
-
-export const Base = () => html`
-    ${createStyles()}
-
-    <dx-card-small
-        href="/test-href"
-        target="_blank"
-        title="Marketplaces"
-        body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-        badge-symbol="bucket"
-    >
-        <dx-button
-            href="http://tweetflight.wearebrightly.com/"
-            target="_blank"
-            variant="inline"
-            icon-symbol="forward"
-        >
-            Visit AppExchange
-        </dx-button>
-    </dx-card-small>
-
-    <dx-card-small
-        href="/test-href"
-        target="_blank"
-        title="Marketplaces"
-        body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-    >
-        <dx-button
-            href="http://tweetflight.wearebrightly.com/"
-            target="_blank"
-            variant="inline"
-            icon-symbol="forward"
-        >
-            Visit AppExchange
-        </dx-button>
-    </dx-card-small>
-
-    <dx-card-small
-        href="/test-href"
-        target="_blank"
-        title="Marketplaces"
-        body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-    >
-    </dx-card-small>
-
-    <dx-card-small
-        borderless="${true}"
-        href="/test-href"
-        target="_blank"
-        title="Marketplaces"
-        body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-        badge-symbol="bucket"
-    >
-        <dx-button
-            href="http://tweetflight.wearebrightly.com/"
-            target="_blank"
-            variant="inline"
-            icon-symbol="forward"
-        >
-            Visit AppExchange
-        </dx-button>
-    </dx-card-small>
-
-    <dx-card-small
-        borderless="${true}"
-        href="/test-href"
-        target="_blank"
-        title="Marketplaces"
-        body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-    >
-    </dx-card-small>
-`;
-
-// prettier-ignore
-export const Grid = () => html`
-    <dx-grid columns="three">
-        <dx-card-small
-            href="/test-href"
-            target="_blank"
-            title="Marketplaces"
-            body="This is a pretty long card body. It could say just about anything regarding the content of this card. This is a pretty long card body. It could say just about anything regarding the content of this card. This is a pretty long card body. It could say just about anything regarding the content of this card."
-            badge-symbol="bucket"
-        >
-        </dx-card-small>
-        <dx-card-small
-            href="/test-href"
-            target="_blank"
-            title="Marketplaces"
-            body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-            badge-symbol="bucket"
-        >
-        </dx-card-small>
-        <dx-card-small
-            href="/test-href"
-            target="_blank"
-            title="Marketplaces"
-            body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-            badge-symbol="bucket"
-        >
-        </dx-card-small>
-        <dx-card-small
-            href="/test-href"
-            target="_blank"
-            title="Marketplaces"
-            body="This is a pretty long card body. It could say just about anything regarding the content of this card. This is a pretty long card body. It could say just about anything regarding the content of this card. This is a pretty long card body. It could say just about anything regarding the content of this card."
-            badge-symbol="bucket"
-        >
-        </dx-card-small>
-        <dx-card-small
-            href="/test-href"
-            target="_blank"
-            title="Marketplaces"
-            body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-            badge-symbol="bucket"
-        >
-        </dx-card-small>
-        <dx-card-small
-            href="/test-href"
-            target="_blank"
-            title="Marketplaces"
-            body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-            badge-symbol="bucket"
-        >
-        </dx-card-small>
-        <dx-card-small
-            href="/test-href"
-            target="_blank"
-            title="Marketplaces"
-            body="This is a pretty long card body. It could say just about anything regarding the content of this card. This is a pretty long card body. It could say just about anything regarding the content of this card. This is a pretty long card body. It could say just about anything regarding the content of this card."
-            badge-symbol="bucket"
-        >
-        </dx-card-small>
-        <dx-card-small
-            href="/test-href"
-            target="_blank"
-            title="Marketplaces"
-            body="This is a pretty long card body. It could say just about anything regarding the content of this card. This is a pretty long card body. It could say just about anything regarding the content of this card. This is a pretty long card body. It could say just about anything regarding the content of this card."
-            badge-symbol="bucket"
-        >
-        </dx-card-small>
-        <dx-card-callout
-            background-color="indigo-vibrant-30"
-            href="/build-stuff"
-            title="Find an upcoming event"
-            label="Calendar"
-        ></dx-card-callout>
-    </dx-grid>
-`;