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

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

@@ -1,107 +0,0 @@
-import Button from "dx/button";
-import ButtonTest from "tests/buttonTest";
-import { createRenderComponent } from "utils/tests";
-
-const TAG = "dx-button";
-const render = createRenderComponent(TAG, Button);
-const renderSlotted = createRenderComponent("dx-button-test", ButtonTest);
-
-describe(TAG, () => {
-    it("renders an empty button element with no icon", () => {
-        const element = render({ ariaLabel: "Default" });
-        const buttonEl = element.shadowRoot.querySelector("button");
-        const iconEl = element.shadowRoot.querySelector("dx-icon");
-        expect(buttonEl).not.toBeNull();
-        expect(iconEl).toBeNull();
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders button defaults if no overrides are specified", () => {
-        const element = render({ ariaLabel: "Default" });
-
-        const buttonEl = element.shadowRoot.querySelector("button");
-        const buttonElClasses = buttonEl.getAttribute("class");
-        expect(buttonEl.getAttribute("disabled")).toBeFalsy();
-        expect(buttonEl.getAttribute("type")).toBe("button");
-        expect(buttonElClasses).toContain("variant_primary");
-        expect(buttonElClasses).toContain("size-small");
-        expect(buttonElClasses).not.toContain("style-full");
-        expect(buttonElClasses).not.toContain("style-icon");
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("is accessible when the slot is used", () => {
-        const element = renderSlotted();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("can focus itself", () => {
-        const element = render({ ariaLabel: "Default" });
-
-        const buttonEl = element.shadowRoot.querySelector("button");
-
-        element.focus();
-
-        expect(element.shadowRoot.activeElement.isSameNode(buttonEl)).toEqual(
-            true
-        );
-    });
-
-    it("only shows a loading message when the component is in `loading` state", () => {
-        const element = render({ loading: true, iconSymbol: "search" });
-        const loadingEl = element.shadowRoot.querySelector(
-            ".temp-loading-message"
-        );
-        expect(loadingEl).not.toBeNull();
-        const spans = element.shadowRoot.querySelectorAll("span");
-        expect(spans.length).toEqual(1);
-        const icon = element.shadowRoot.querySelector("dx-icon");
-        expect(icon).toBeNull();
-        return expect(element).toBeAccessible();
-    });
-
-    it("can display an icon with the expected settings", () => {
-        const iconSize = "large";
-        const iconSymbol = "automate";
-        const ariaLabel = "Automate";
-        const element = render({
-            ariaLabel,
-            iconSize,
-            iconSymbol,
-            loading: false
-        });
-        const iconEl = element.shadowRoot.querySelector("dx-icon");
-        expect(iconEl).not.toBeNull();
-        expect(iconEl.sprite).toBe("utility");
-        expect(iconEl.size).toBe(iconSize);
-        expect(iconEl.symbol).toBe(iconSymbol);
-        return expect(element).toBeAccessible();
-    });
-
-    it("displays a link when given an href", () => {
-        const element = render({
-            ariaLabel: "Google",
-            href: "https://www.google.com"
-        });
-        expect(element.shadowRoot.querySelector("a")).toBeDefined();
-        expect(element.shadowRoot.querySelector("button")).toBeFalsy();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("applies correct font family class", () => {
-        const element = render({ ariaLabel: "Default" });
-        const buttonEl = element.shadowRoot.querySelector(".button");
-        const className = buttonEl.getAttribute("class");
-        expect(className.includes("font-display")).toBeTruthy();
-
-        const elementOther = render({ font: "sans" });
-        const buttonElOther = elementOther.shadowRoot.querySelector(".button");
-        const classNameOther = buttonElOther.getAttribute("class");
-        expect(classNameOther.includes("font-sans")).toBeTruthy();
-
-        return expect(element).toBeAccessible();
-    });
-});

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>
-`;