@salesforcedevs/dx-components 0.17.0 → 0.17.1-review-diff1

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,70 +0,0 @@
-import CardPodcastEpisode from "dx/cardPodcastEpisode";
-import { createRenderComponent } from "utils/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/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/cardPodcastEpisodeProvider/cardPodcastEpisodeProvider.css

@@ -1,3 +0,0 @@
-:host {
-    display: contents;
-}

package/src/modules/dx/cardPodcastEpisodeProvider/cardPodcastEpisodeProvider.html

@@ -1,12 +0,0 @@
-<template>
-    <template for:each={episodes} for:item="episode">
-        <dx-card-podcast-episode
-            body={episode.body}
-            datetime={episode.datetime}
-            href={episode.href}
-            key={episode.id}
-            length={episode.length}
-            title={episode.title}
-        ></dx-card-podcast-episode>
-    </template>
-</template>

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

@@ -1,29 +0,0 @@
-import { LightningElement, api, track } from "lwc";
-import { fetchWordpressPosts } from "utils/wordpress";
-import { normalizeEpisode } from "utils/normalizers";
-
-type PodcastEpisode = {
-    body: string;
-    datetime: string;
-    href: string;
-    id: string;
-    length: string;
-    title: string;
-};
-export default class CardPodcastEpisodeProvider extends LightningElement {
-    @api count?: string;
-
-    @track episodes: PodcastEpisode[] = [];
-
-    private fetchEpisodes = async () => {
-        this.episodes = await fetchWordpressPosts(
-            "/podcast/api",
-            normalizeEpisode,
-            this.count
-        );
-    };
-
-    connectedCallback() {
-        this.fetchEpisodes();
-    }
-}

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

@@ -1,70 +0,0 @@
-import CardSmall from "dx/cardSmall";
-import { createRenderComponent } from "utils/tests";
-import mockProps from "./mockProps";
-import { isSlotEmpty, stopPropagationOnSlotted } from "utils/slot";
-
-const TAG = "dx-card-small";
-const render = createRenderComponent(TAG, CardSmall);
-
-jest.mock("utils/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>
-`;

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

@@ -1,46 +0,0 @@
-import CardTitle from "dx/cardTitle";
-import { createRenderComponent } from "utils/tests";
-
-const TAG = "dx-card-title";
-const render = createRenderComponent(TAG, CardTitle);
-
-describe(TAG, () => {
-    it("renders the link and title", () => {
-        const title = "Title";
-        const element = render({ href: "/test", title });
-
-        const el = element.shadowRoot.querySelector("a");
-        const nowrap = element.shadowRoot.querySelector(".nowrap");
-
-        expect(el.textContent).toEqual(title);
-        expect(nowrap).toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders a the last word grouped with a new window icon when target is blank", () => {
-        const title = "Title with multiple words";
-        const element = render({ href: "/test", title, target: "_blank" });
-
-        const nowrap = element.shadowRoot.querySelector(".nowrap");
-        const newWindowIcon = element.shadowRoot.querySelector("dx-icon");
-
-        expect(nowrap.textContent).toContain("words");
-        expect(newWindowIcon).not.toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders no link when no href", () => {
-        const title = "Title with multiple words";
-        const element = render({ title });
-
-        const el = element.shadowRoot.querySelector("h3");
-        const link = element.shadowRoot.querySelector("a");
-
-        expect(el.textContent).toEqual(title);
-        expect(link).toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-});

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

@@ -1,18 +0,0 @@
-import CardTrailheadModule from "dx/cardTrailheadModule";
-import { createRenderComponent } from "utils/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-card-trailhead-module";
-const render = createRenderComponent(TAG, CardTrailheadModule);
-
-describe(TAG, () => {
-    it("renders", () => {
-        const element = render(mockProps);
-
-        const cardContent = element.shadowRoot.querySelector("dx-card-content");
-        expect(cardContent).not.toBeNull();
-
-        expect(cardContent.subtitle).toEqual("1000 Points");
-        return expect(element).toBeAccessible();
-    });
-});

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

@@ -1,11 +0,0 @@
-export default {
-    badgeImgAlt: "Scenic view of a mountain.",
-    badgeImgSrc:
-        "https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/service_lex/b677a8a9a27fbc8a41414576453eb16f_badge.png",
-    body:
-        "Get to know the Salesforce Lightning Platform APIs and learn to integrate your data. Get to know the Salesforce Lightning Platform APIs and learn to integrate your data.",
-    href: "https://developer.salesforce.com/",
-    length: "1 hr",
-    points: "1000",
-    title: "Lightning Platform API Basics With Extra Title"
-};