@salesforcedevs/dx-components 0.26.1-alpha0.4 → 0.26.2

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

@@ -0,0 +1,115 @@
+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/cardNews/cardNews.ts

@@ -0,0 +1,62 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { toDxColor } from "utils-internal/css";
+import {
+    CardNewsButtonType,
+    CardNewsImagePlacement,
+    CardNewsImageVerticalAlignment,
+    CardNewsSize,
+    CardNewsTextContainerSize
+} from "typings/custom";
+
+export default class CardNews extends LightningElement {
+    @api backgroundColor?: string = "indigo-vibrant-40";
+    @api body!: string;
+    @api buttonText?: string = "";
+    @api buttonType!: CardNewsButtonType;
+    @api color?: string = "white";
+    @api dark?: boolean = false;
+    @api size?: CardNewsSize = "normal";
+    @api href!: string;
+    @api imgAlt?: string = "";
+    @api imgSrc?: string | null = null;
+    @api imgPlacement?: CardNewsImagePlacement = "top";
+    @api imgVerticalAlign?: CardNewsImageVerticalAlignment | null = null;
+    @api target?: string | null = null;
+    @api title!: string;
+    @api textContainerWidth?: CardNewsTextContainerSize = "small";
+
+    private get style(): string {
+        const background = `background-color: ${toDxColor(
+            this.backgroundColor
+        )};`;
+        const color = `color: ${toDxColor(this.color)};`;
+        return [background, color].join(" ");
+    }
+
+    private get className(): string {
+        return cx(
+            "dx-card-news",
+            "dx-card-base",
+            `dx-card-size-${this.size}`,
+            this.dark && `is-dark`,
+            this.imgSrc && `dx-card-news-img-placement-${this.imgPlacement}`
+        );
+    }
+
+    private get hasLargeButton(): boolean {
+        return this.buttonType === "large";
+    }
+
+    private get textContainerClassName(): string {
+        return cx("text", this.textContainerWidth);
+    }
+
+    private get imgClassName(): string {
+        return cx(
+            this.imgVerticalAlign &&
+                `dx-card-news-img-vertical-align-${this.imgVerticalAlign}`,
+            this.textContainerWidth === "large" && `dx-card-news-img-small`
+        );
+    }
+}

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

@@ -0,0 +1,68 @@
+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.css

@@ -0,0 +1,19 @@
+@import "helpers/reset";
+@import "helpers/text";
+@import "helpers/card";
+
+.card-podcast-episode {
+    display: flex;
+    flex-direction: row;
+}
+
+@media (max-width: 1024px) {
+    .datetime {
+        margin-bottom: 0 !important;
+    }
+
+    .body,
+    .length {
+        display: none;
+    }
+}

package/src/modules/dx/cardPodcastEpisode/cardPodcastEpisode.html

@@ -0,0 +1,36 @@
+<template>
+    <div class={className}>
+        <div class="dx-card-base_section-horizontal">
+            <a
+                aria-label="Go To Article"
+                href={href}
+                target={target}
+                onmouseenter={setLinkHovered}
+                onmouseleave={setLinkInactive}
+            >
+                <dx-icon-badge
+                    class="dx-play-button"
+                    symbol="play"
+                    background-color="white"
+                    slot="image-badge"
+                ></dx-icon-badge>
+            </a>
+        </div>
+        <div class="dx-card-base_section-horizontal dx-card-base_column">
+            <dx-card-title
+                href={href}
+                target={target}
+                onmouseenter={setLinkHovered}
+                onmouseleave={setLinkInactive}
+                title={title}
+            ></dx-card-title>
+            <span class="datetime dx-text-label-1-dark">
+                <dx-relative-date-time
+                    value={_datetime}
+                ></dx-relative-date-time>
+            </span>
+            <span class="body dx-text-body-2">{body}</span>
+            <span class="length dx-text-body-3">{length}</span>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,31 @@
+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/cardPodcastEpisode/cardPodcastEpisode.ts

@@ -0,0 +1,36 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+
+export default class CardPodcastEpisode extends LightningElement {
+    @api body!: string;
+    @api datetime!: string;
+    @api dateTime?: string | null = null;
+    @api href!: string;
+    @api length!: string;
+    @api target?: string | null = null;
+    @api title!: string;
+
+    private isLinkHovered: boolean = false;
+
+    // LWC is being compiled so that datetime is being interpreted as date-time
+    // ONLY from from the implementation in dx-card-podcast-episode-provider
+    private get _datetime() {
+        return this.datetime || this.dateTime;
+    }
+
+    private get className() {
+        return cx(
+            "card-podcast-episode",
+            "dx-card-base_borderless",
+            this.isLinkHovered && "dx-card-base_link-hovered"
+        );
+    }
+
+    private setLinkHovered() {
+        this.isLinkHovered = true;
+    }
+
+    private setLinkInactive() {
+        this.isLinkHovered = false;
+    }
+}

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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,50 @@
+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

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

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

@@ -0,0 +1,12 @@
+<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

@@ -0,0 +1,29 @@
+import { LightningElement, api, track } from "lwc";
+import { fetchWordpressPosts } from "utils-internal/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

@@ -0,0 +1,66 @@
+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

@@ -0,0 +1,8 @@
+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.css

@@ -0,0 +1,32 @@
+@import "helpers/reset";
+@import "helpers/text";
+@import "helpers/card";
+
+:host {
+    --heading-offset: var(--dx-g-spacing-sm);
+}
+
+.has-icon .dx-card-base_section-horizontal:last-of-type > *:first-child {
+    margin-top: var(--heading-offset);
+}
+
+.card-small {
+    display: flex;
+    flex-direction: row;
+}
+
+.dx-text-body-2 {
+    flex: 1;
+}
+
+/* mobile responsiveness */
+@media screen and (max-width: 1024px) {
+    :host {
+        --heading-offset: var(--dx-g-spacing-xs);
+    }
+
+    dx-icon-badge {
+        --dx-c-icon-badge-size: var(--dx-g-spacing-lg);
+        --dx-c-icon-badge-icon-size: var(--dx-g-icon-size-xs);
+    }
+}

package/src/modules/dx/cardSmall/cardSmall.html

@@ -0,0 +1,42 @@
+<template>
+    <div if:true={borderless} class={className}>
+        <div if:true={badgeSymbol} class="dx-card-base_section-horizontal">
+            <dx-icon-badge
+                color={badgeColor}
+                background-color={badgeBackgroundColor}
+                symbol={badgeSymbol}
+                shape={badgeShape}
+                sprite={badgeSprite}
+            ></dx-icon-badge>
+        </div>
+        <div class="dx-card-base_section-horizontal dx-card-base_column">
+            <dx-card-title
+                href={href}
+                target={target}
+                title={title}
+            ></dx-card-title>
+            <span class="dx-text-body-2">{body}</span>
+            <div if:false={isSlotEmpty} class="dx-card-base_ctas">
+                <slot onslotchange={onSlotChange}></slot>
+            </div>
+        </div>
+    </div>
+    <a if:false={borderless} class={className} href={href} target={target}>
+        <div if:true={badgeSymbol} class="dx-card-base_section-horizontal">
+            <dx-icon-badge
+                color={badgeColor}
+                background-color={badgeBackgroundColor}
+                symbol={badgeSymbol}
+                shape={badgeShape}
+                sprite={badgeSprite}
+            ></dx-icon-badge>
+        </div>
+        <div class="dx-card-base_section-horizontal dx-card-base_column">
+            <dx-card-title target={target} title={title}></dx-card-title>
+            <span class="dx-text-body-2">{body}</span>
+            <div if:false={isSlotEmpty} class="dx-card-base_ctas">
+                <slot onslotchange={onSlotChange}></slot>
+            </div>
+        </div>
+    </a>
+</template>