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

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

@@ -1,150 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-button",
-    component: "dx-button"
-};
-
-// prettier-ignore
-const createStyles = () => html `
-    <style>
-        dx-button {
-            display: block;
-        }
-    </style>`;
-
-// prettier-ignore
-export const Inline = () => html ` ${createStyles()}
-
-    <dx-button variant="inline"> Inline Button </dx-button>
-
-    <dx-button
-        href="http://tweetflight.wearebrightly.com/"
-        target="_blank"
-        variant="inline"
-        icon-symbol="link"
-    >
-        Inline Link
-    </dx-button>`;
-
-// prettier-ignore
-export const Primary = () => html ` ${createStyles()}
-
-    <dx-button icon-symbol="magicwand"> Primary Button </dx-button>
-
-    <dx-button icon-symbol="chevronright"></dx-button>
-
-    <dx-button icon-symbol="magicwand" size="large">
-        Large Primary Button
-    </dx-button>
-
-    <dx-button icon-symbol="chevronright" size="large"></dx-button>
-
-    <dx-button icon-symbol="chevronright" icon-position="left">
-        Primary Button
-    </dx-button>
-
-    <dx-button
-        href="http://tweetflight.wearebrightly.com/"
-        target="_blank"
-        icon-symbol="link"
-    >
-        Primary Link
-    </dx-button>
-
-    <dx-button
-        href="http://tweetflight.wearebrightly.com/"
-        target="_blank"
-        icon-symbol="link"
-        size="large"
-    >
-        Large Primary Link
-    </dx-button>
-
-    <dx-button
-        href="/assets/svg/salesforce-logo.svg"
-        download="salesforce-logo"
-        icon-symbol="download"
-        size="large"
-    >
-        Download Link
-    </dx-button>
-`;
-
-// prettier-ignore
-export const Secondary = () => html ` ${createStyles()}
-    
-    <dx-button variant="secondary" icon-symbol="magicwand">
-        Secondary Button
-    </dx-button>
-
-    <dx-button variant="secondary" icon-symbol="chevronright"> </dx-button>
-
-    <dx-button
-        variant="secondary"
-        icon-symbol="magicwand"
-        size="large"
-    >
-        Large Secondary Button
-    </dx-button>
-
-    <dx-button
-        variant="secondary"
-        icon-symbol="chevronright"
-        size="large"
-    ></dx-button>
-
-    <dx-button
-        href="http://tweetflight.wearebrightly.com/"
-        target="_blank"
-        variant="secondary"
-        icon-symbol="link"
-    >
-        Secondary Link
-    </dx-button>
-
-    <dx-button
-        href="http://tweetflight.wearebrightly.com/"
-        target="_blank"
-        variant="secondary"
-        icon-symbol="link"
-        size="large"
-    >
-        Large Secondary Link
-    </dx-button>
-`;
-
-// prettier-ignore
-export const Tertiary = () => html ` ${createStyles()}
-
-    <dx-button variant="tertiary" icon-symbol="chevronright">
-        Tertiary Button
-    </dx-button>
-
-    <dx-button
-        variant="tertiary"
-        icon-symbol="chevronright"
-        size="large"
-    >
-        Large Tertiary Button
-    </dx-button>
-
-    <dx-button
-        href="http://tweetflight.wearebrightly.com/"
-        target="_blank"
-        variant="tertiary"
-        icon-symbol="link"
-    >
-        Tertiary Link
-    </dx-button>
-
-    <dx-button
-        href="http://tweetflight.wearebrightly.com/"
-        target="_blank"
-        variant="tertiary"
-        icon-symbol="link"
-        size="large"
-    >
-        Large Tertiary Link
-    </dx-button>
-`;

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

@@ -1,27 +0,0 @@
-import CardBlogPost from "dx/cardBlogPost";
-import { createRenderComponent } from "utils/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-card-blog-post";
-const render = createRenderComponent(TAG, CardBlogPost);
-const date = new Date().toISOString();
-
-describe(TAG, () => {
-    it("renders without datetime", () => {
-        const element = render(mockProps);
-
-        const cardContent: HTMLElement = element.shadowRoot.querySelector(
-            "dx-card-content"
-        );
-        expect(cardContent).not.toBeNull();
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders with Datetime", () => {
-        const element = render({ ...mockProps, datetime: date });
-        const formatedDate = element.shadowRoot.querySelector(
-            "dx-formatted-date-time"
-        );
-        expect(formatedDate.value).not.toBeNull();
-    });
-});

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

@@ -1,12 +0,0 @@
-export default {
-    authorHref: "https://developer.salesforce.com/blogs/author/josh-birk",
-    authorImgSrc: "https://placekitten.com/300/300",
-    authorLabel: "Mr. Mistoffelees",
-    body:
-        "Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned.",
-    href: "https://developer.salesforce.com/",
-    imgAlt: "Scenic view of a mountain.",
-    imgSrc: "https://i.imgur.com/FUsyxR5.jpg",
-    label: "Blog Post",
-    title: "Performance Testing on the Lightning Platform"
-};

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

@@ -1,164 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-card-blog-post",
-    component: "dx-card-blog-post"
-};
-
-const date = new Date().toISOString();
-
-const createStyles = () => html`
-    <style>
-        dx-card-blog-post {
-            margin-top: 25px;
-            margin-bottom: 25px;
-            width: 400px;
-        }
-    </style>
-`;
-
-export const Base = () => html`
-    ${createStyles()}
-    <dx-card-blog-post
-        author-href="https://developer.salesforce.com/blogs/author/josh-birk"
-        author-img-src="https://placekitten.com/300/300"
-        author-label="Mr. Mistoffelees"
-        body="Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
-        datetime="${date}"
-        href="https://developer.salesforce.com/"
-        img-alt="Scenic view of a mountain."
-        img-src="https://i.imgur.com/FUsyxR5.jpg"
-        label="Blog Post"
-        title="Performance Testing on the Lightning Platform"
-    >
-    </dx-card-blog-post>
-    <dx-card-blog-post
-        author-href="https://developer.salesforce.com/blogs/author/josh-birk"
-        author-img-src="https://placekitten.com/300/300"
-        author-label="Mr. Mistoffelees"
-        body="Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
-        datetime="${date}"
-        href="https://developer.salesforce.com/"
-        title="Performance Testing on the Lightning Platform"
-    >
-    </dx-card-blog-post>
-    <dx-card-blog-post
-        author-href="https://developer.salesforce.com/blogs/author/josh-birk"
-        author-img-src="https://placekitten.com/300/300"
-        author-label="Mr. Mistoffelees"
-        body="Every year the Ecma International Technical Committee 39 (TC39), which Salesforce is a member of, releases a new edition of ECMA-262, the ECMAScript Language Specification standards, which JavaScript is based on. The next edition is ES2021 (ES12), which is currently in draft and planned to be released in June."
-        href="https://developer.salesforce.com/"
-        img-alt="Scenic view of a mountain."
-        img-src="https://i.imgur.com/FUsyxR5.jpg"
-        title="Performance Testing on the Lightning Platform"
-    >
-    </dx-card-blog-post>
-`;
-
-// prettier-ignore
-export const Grid = () => html`
-    <dx-grid columns="three">
-        <dx-card-blog-post
-            author-href="https://developer.salesforce.com/blogs/author/josh-birk"
-            author-img-src="https://placekitten.com/300/300"
-            author-label="Mr. Mistoffelees"
-            body="Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
-            datetime="${date}"
-            href="https://developer.salesforce.com/"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-            title="Performance Testing on the Lightning Platform"
-        >
-        </dx-card-blog-post>
-        <dx-card-blog-post
-            author-href="https://developer.salesforce.com/blogs/author/josh-birk"
-            author-img-src="https://placekitten.com/300/300"
-            author-label="Mr. Mistoffelees"
-            body="This is a totally random sentence to make this longer. Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
-            datetime="${date}"
-            href="https://developer.salesforce.com/"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-            title="Performance Testing on the Lightning Platform"
-        >
-        </dx-card-blog-post>
-        <dx-card-blog-post
-            author-href="https://developer.salesforce.com/blogs/author/josh-birk"
-            author-img-src="https://placekitten.com/300/300"
-            author-label="Mr. Mistoffelees"
-            body="This is a totally random sentence to make this longer. Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
-            datetime="${date}"
-            href="https://developer.salesforce.com/"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-            title="Performance Testing on the Lightning Platform"
-        >
-        </dx-card-blog-post>
-        <dx-card-blog-post
-            author-href="https://developer.salesforce.com/blogs/author/josh-birk"
-            author-img-src="https://placekitten.com/300/300"
-            author-label="Mr. Mistoffelees"
-            body="Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
-            datetime="${date}"
-            href="https://developer.salesforce.com/"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-            title="Performance Testing on the Lightning Platform"
-        >
-        </dx-card-blog-post>
-        <dx-card-blog-post
-            author-href="https://developer.salesforce.com/blogs/author/josh-birk"
-            author-img-src="https://placekitten.com/300/300"
-            author-label="Mr. Mistoffelees"
-            body="This is a totally random sentence to make this longer. Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
-            datetime="${date}"
-            href="https://developer.salesforce.com/"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-            title="Performance Testing on the Lightning Platform"
-        >
-        </dx-card-blog-post>
-        <dx-card-blog-post
-            author-href="https://developer.salesforce.com/blogs/author/josh-birk"
-            author-img-src="https://placekitten.com/300/300"
-            author-label="Mr. Mistoffelees"
-            body="This is a totally random sentence to make this longer. Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
-            datetime="${date}"
-            href="https://developer.salesforce.com/"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-            title="Performance Testing on the Lightning Platform"
-        >
-        </dx-card-blog-post>
-        <dx-card-blog-post
-            author-href="https://developer.salesforce.com/blogs/author/josh-birk"
-            author-img-src="https://placekitten.com/300/300"
-            author-label="Mr. Mistoffelees"
-            body="Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
-            datetime="${date}"
-            href="https://developer.salesforce.com/"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-            title="Performance Testing on the Lightning Platform"
-        >
-        </dx-card-blog-post>
-        <dx-card-blog-post
-            author-href="https://developer.salesforce.com/blogs/author/josh-birk"
-            author-img-src="https://placekitten.com/300/300"
-            author-label="Mr. Mistoffelees"
-            body="Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
-            datetime="${date}"
-            href="https://developer.salesforce.com/"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-            title="Performance Testing on the Lightning Platform"
-        >
-        </dx-card-blog-post>
-        <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/cardBlogPostProvider/__tests__/cardBlogPostProvider.test.ts

@@ -1,34 +0,0 @@
-import CardBlogPostProvider from "dx/cardBlogPostProvider";
-import { createRenderComponent } from "utils/tests";
-import mockWordpressPosts from "./mockWordpressPosts";
-
-const delay = () => new Promise((res) => setTimeout(res, 0));
-
-const TAG = "dx-card-blog-post-provider";
-const render = createRenderComponent(TAG, CardBlogPostProvider);
-
-beforeEach(() => {
-    const mockFetchPromise = Promise.resolve({
-        json: () => Promise.resolve(mockWordpressPosts),
-        status: 200
-    });
-    // @ts-ignore
-    jest.spyOn(global, "fetch").mockImplementation(() => mockFetchPromise);
-});
-
-describe(TAG, () => {
-    it("renders the correct number of posts (and doesnt blow up with a payload missing deeply nested items)", async () => {
-        const element = render();
-
-        expect(global.fetch).toHaveBeenCalledTimes(1);
-        expect(global.fetch).toHaveBeenCalledWith("/blogs/api?maxResults=6");
-
-        await delay();
-
-        const els = element.shadowRoot.querySelectorAll("dx-card-blog-post");
-
-        expect(els.length).toEqual(mockWordpressPosts.posts.length);
-
-        return expect(element).toBeAccessible();
-    });
-});

package/src/modules/dx/cardBlogPostProvider/__tests__/mockWordpressPosts.ts

@@ -1,44 +0,0 @@
-export default {
-    posts: [
-        {
-            date: "2021-03-04T17:00:05",
-            description:
-                "In Winter ‘20 we introduced the ability to schedule a flow, which allows you to run a certain flow on a daily basis, for example. With Spring ’21, we take it a step further by introducing scheduled paths inside of a flow.",
-            id: 19554,
-            originalUrl:
-                "https://developer.salesforce.com/blogs/2021/03/schedule-your-path-in-salesforce-flow.html",
-            title: "Schedule Your Path in Salesforce Flow",
-            url: "/blogs/2021/03/schedule-your-path-in-salesforce-flow.html"
-        },
-        {
-            date: "2021-03-04T17:00:05",
-            description:
-                "In Winter ‘20 we introduced the ability to schedule a flow, which allows you to run a certain flow on a daily basis, for example. With Spring ’21, we take it a step further by introducing scheduled paths inside of a flow.",
-            id: 1954,
-            originalUrl:
-                "https://developer.salesforce.com/blogs/2021/03/schedule-your-path-in-salesforce-flow.html",
-            title: "Schedule Your Path in Salesforce Flow",
-            url: "/blogs/2021/03/schedule-your-path-in-salesforce-flow.html"
-        },
-        {
-            date: "2021-03-04T17:00:05",
-            description:
-                "In Winter ‘20 we introduced the ability to schedule a flow, which allows you to run a certain flow on a daily basis, for example. With Spring ’21, we take it a step further by introducing scheduled paths inside of a flow.",
-            id: 14,
-            originalUrl:
-                "https://developer.salesforce.com/blogs/2021/03/schedule-your-path-in-salesforce-flow.html",
-            title: "Schedule Your Path in Salesforce Flow",
-            url: "/blogs/2021/03/schedule-your-path-in-salesforce-flow.html"
-        },
-        {
-            date: "2021-03-04T17:00:05",
-            description:
-                "In Winter ‘20 we introduced the ability to schedule a flow, which allows you to run a certain flow on a daily basis, for example. With Spring ’21, we take it a step further by introducing scheduled paths inside of a flow.",
-            id: 4,
-            originalUrl:
-                "https://developer.salesforce.com/blogs/2021/03/schedule-your-path-in-salesforce-flow.html",
-            title: "Schedule Your Path in Salesforce Flow",
-            url: "/blogs/2021/03/schedule-your-path-in-salesforce-flow.html"
-        }
-    ]
-};

package/src/modules/dx/cardBlogPostProvider/cardBlogPostProvider.css

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

package/src/modules/dx/cardBlogPostProvider/cardBlogPostProvider.html

@@ -1,16 +0,0 @@
-<template>
-    <template for:each={posts} for:item="post">
-        <dx-card-blog-post
-            label="BLOG POST"
-            author-img-src={post.authorImgSrc}
-            author-label={post.authorName}
-            body={post.body}
-            datetime={post.datetime}
-            href={post.href}
-            img-alt={post.imgAlt}
-            img-src={post.imgSrc}
-            key={post.id}
-            title={post.title}
-        ></dx-card-blog-post>
-    </template>
-</template>

package/src/modules/dx/cardBlogPostProvider/cardBlogPostProvider.ts

@@ -1,29 +0,0 @@
-import { LightningElement, api, track } from "lwc";
-import { fetchWordpressPosts } from "utils/wordpress";
-import { normalizePost } from "utils/normalizers";
-
-type BlogPost = {
-    body: string;
-    datetime: string;
-    href: string;
-    id: string;
-    title: string;
-};
-
-export default class CardBlogPostProvider extends LightningElement {
-    @api count?: string;
-
-    @track posts: BlogPost[] = [];
-
-    private fetchPosts = async () => {
-        this.posts = await fetchWordpressPosts(
-            "/blogs/api",
-            normalizePost,
-            this.count
-        );
-    };
-
-    connectedCallback() {
-        this.fetchPosts();
-    }
-}

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

@@ -1,23 +0,0 @@
-import CardCallout from "dx/cardCallout";
-import { createRenderComponent } from "utils/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-card-callout";
-const render = createRenderComponent(TAG, CardCallout);
-
-describe(TAG, () => {
-    it("renders the link, arrow icon, title, & label", () => {
-        const element = render(mockProps);
-
-        const els = [
-            "a",
-            "dx-icon",
-            "h3",
-            ".dx-text-button-light"
-        ].map((query) => element.shadowRoot.querySelector(query));
-
-        expect(els).not.toContain(null);
-
-        return expect(element).toBeAccessible();
-    });
-});

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

@@ -1,7 +0,0 @@
-export default {
-    backgroundColor: "indigo-vibrant-30",
-    color: "blue-vibrant-20",
-    href: "/build-stuff",
-    label: "Browse all build guides",
-    title: "Build exactly what you need."
-};

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

@@ -1,33 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-card-callout",
-    component: "dx-card-callout"
-};
-
-const createStyles = () => html`
-    <style>
-        dx-card-callout {
-            width: 400px;
-            max-width: 100%;
-            min-width: 240px;
-        }
-    </style>
-`;
-
-export const Base = () => html`
-    ${createStyles()}
-    <dx-card-callout
-        href="/build-stuff"
-        title="Find an upcoming event"
-        label="Calendar"
-    ></dx-card-callout>
-    <br />
-    <dx-card-callout
-        background-color="cloud-blue-vibrant-80"
-        color="blue-vibrant-20"
-        href="/build-stuff"
-        title="Find an upcoming event"
-        label="Calendar"
-    ></dx-card-callout>
-`;

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

@@ -1,112 +0,0 @@
-import CardContent from "dx/cardContent";
-import { createRenderComponent } from "utils/tests";
-import mockProps from "./mockProps";
-import { isSlotEmpty } from "utils/slot";
-
-const TAG = "dx-card-content";
-const render = createRenderComponent(TAG, CardContent);
-
-jest.mock("utils/slot", () => {
-    return {
-        isSlotEmpty: jest.fn()
-    };
-});
-
-describe(TAG, () => {
-    it("renders", () => {
-        const element = render(mockProps);
-
-        const imagelink: HTMLElement = element.shadowRoot.querySelector(
-            ".image-link"
-        );
-        const renderedLabel: HTMLElement = element.shadowRoot.querySelector(
-            ".label"
-        );
-        const renderedTitle: HTMLElement = element.shadowRoot.querySelector(
-            "dx-card-title"
-        );
-        const renderedSubtitle: HTMLElement = element.shadowRoot.querySelector(
-            ".subtitle"
-        );
-        const renderedAuthor: HTMLElement = element.shadowRoot.querySelector(
-            "dx-image-and-label"
-        );
-        const renderedBody: HTMLElement = element.shadowRoot.querySelector(
-            ".body"
-        );
-
-        expect(imagelink).not.toBeNull();
-        expect(renderedLabel).not.toBeNull();
-        expect(renderedTitle).not.toBeNull();
-        expect(renderedSubtitle).not.toBeNull();
-        expect(renderedAuthor).not.toBeNull();
-        expect(renderedBody).not.toBeNull();
-
-        expect(renderedLabel.textContent).toEqual(mockProps.label);
-        expect(renderedTitle.title).toEqual(mockProps.title);
-        expect(renderedSubtitle.textContent).toEqual(mockProps.subtitle);
-        expect(renderedBody.textContent).toEqual(mockProps.body);
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("fires events", () => {
-        const element = render(mockProps);
-
-        const imagelink: HTMLElement = element.shadowRoot.querySelector(
-            ".image-link"
-        );
-        const containerDiv: HTMLElement = element.shadowRoot.querySelector(
-            "div"
-        );
-        imagelink.dispatchEvent(new CustomEvent("mouseenter"));
-
-        return Promise.resolve()
-            .then(() => {
-                expect(containerDiv.classList).toContain(
-                    "dx-card-base_link-hovered"
-                );
-                imagelink.dispatchEvent(new CustomEvent("mouseleave"));
-            })
-            .then(() => {
-                expect(containerDiv.classList).not.toContain(
-                    "dx-card-base_link-hovered"
-                );
-            });
-    });
-
-    it("renders datetime slot", () => {
-        (isSlotEmpty as jest.Mock).mockReturnValue(false);
-        const element = render(mockProps);
-        const slot: HTMLSlotElement = element.shadowRoot.querySelector(
-            "[name=datetime]"
-        );
-        const containerDiv: HTMLElement = element.shadowRoot.querySelector(
-            "div"
-        );
-        slot.dispatchEvent(new Event("slotchange"));
-        expect(isSlotEmpty).toBeCalledTimes(1);
-
-        return Promise.resolve().then(() => {
-            expect(containerDiv.classList).not.toContain("hide-datetime");
-        });
-    });
-
-    it("set properly style classes", () => {
-        const element = render({
-            ...mockProps,
-            featured: true,
-            backgroundColor: "red"
-        });
-
-        const containerDiv: HTMLElement = element.shadowRoot.querySelector(
-            "div"
-        );
-        const link: HTMLElement = element.shadowRoot.querySelector(
-            "[part=image]"
-        );
-
-        expect(containerDiv.classList).toContain("dx-card-base_featured");
-        expect(link.getAttribute("style")).toContain("");
-    });
-});