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

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("");
-    });
-});

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

@@ -1,13 +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.",
-    authorImgSrc: "https://placekitten.com/300/300",
-    authorLabel: "Test",
-    body: "Set up, create, and customize a sample app using the Commerce API.",
-    imgAlt: "Test Cat",
-    imgSrc: "https://i.imgur.com/FUsyxR5.jpg",
-    subtitle: "Test"
-};

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

@@ -1,127 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-card-content",
-    component: "dx-card-content"
-};
-
-const createStyles = () => html`
-    <style>
-        .label {
-            color: grey;
-        }
-
-        dx-card-content {
-            margin-top: 25px;
-            margin-bottom: 25px;
-            max-width: 500px;
-            min-width: 240px;
-        }
-
-        #horiz {
-            max-width: 800px;
-        }
-    </style>
-`;
-
-export const Base = () => html`
-    ${createStyles()}
-    <span class="label">With image</span>
-
-    <dx-card-content
-        body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-        href="https://developer.salesforce.com/"
-        img-alt="Scenic view of a mountain."
-        img-src="https://i.imgur.com/FUsyxR5.jpg"
-        subtitle="Subtitle"
-        label="Documentation"
-        title="Einstein Platform Services Developer Guide"
-    >
-        <span slot="datetime">Feb 9th 2020</span>
-    </dx-card-content>
-
-    <br />
-    <br />
-    <span class="label">With Author link</span>
-
-    <dx-card-content
-        author-label="Mr. Mistoffelees"
-        author-img-src="https://placekitten.com/300/300"
-        author-href="https://developer.salesforce.com/blogs/author/josh-birk"
-        body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-        href="https://developer.salesforce.com/"
-        img-alt="Scenic view of a mountain."
-        img-src="https://i.imgur.com/FUsyxR5.jpg"
-        label="Documentation"
-        title="Einstein Platform Services Developer Guide"
-    >
-        <span slot="datetime">Feb 9th 2020</span>
-    </dx-card-content>
-
-    <br />
-    <br />
-    <span class="label">With Author only</span>
-
-    <dx-card-content
-        author-label="Mr. Mistoffelees"
-        author-img-src="https://placekitten.com/300/300"
-        body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-        href="https://developer.salesforce.com/"
-        img-alt="Scenic view of a mountain."
-        img-src="https://i.imgur.com/FUsyxR5.jpg"
-        label="Documentation"
-        title="Einstein Platform Services Developer Guide"
-    >
-        <span slot="datetime">Feb 9th 2020</span>
-    </dx-card-content>
-
-    <br />
-    <br />
-    <span class="label">Without image</span>
-
-    <dx-card-content
-        body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-        href="https://developer.salesforce.com/"
-        label="Documentation"
-        title="Einstein Platform Services Developer Guide"
-    >
-        <span slot="datetime">Feb 9th 2020</span>
-    </dx-card-content>
-
-    <br />
-    <br />
-    <span class="label">Minimum content</span>
-
-    <dx-card-content
-        body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-        href="https://developer.salesforce.com/"
-        title="Einstein Platform Services Developer Guide"
-    >
-    </dx-card-content>
-
-    <br />
-    <br />
-    <span class="label">Really large body</span>
-    <dx-card-content
-        body="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean placerat urna eu velit congue scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla vulputate nulla non mauris tempor, at molestie ex efficitur. Nunc egestas posuere luctus. Nam ligula sapien, mattis pretium dapibus et, convallis a enim. Aliquam et sem volutpat, dignissim sapien non, faucibus nunc. Integer vitae enim et lectus volutpat scelerisque. Vestibulum elementum sapien at semper ornare. Suspendisse potenti. Donec tincidunt euismod porttitor."
-        href="https://developer.salesforce.com/"
-        img-alt="Scenic view of a mountain."
-        img-src="https://i.imgur.com/FUsyxR5.jpg"
-        title="Lorem Ipsum"
-    >
-    </dx-card-content>
-
-    <br />
-    <br />
-    <span class="label">Horizontal Layout</span>
-    <dx-card-content
-        id="horiz"
-        body="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean placerat urna eu velit congue scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla vulputate nulla non mauris tempor, at molestie ex efficitur. Nunc egestas posuere luctus. Nam ligula sapien, mattis pretium dapibus et, convallis a enim. Aliquam et sem volutpat, dignissim sapien non, faucibus nunc. Integer vitae enim et lectus volutpat scelerisque. Vestibulum elementum sapien at semper ornare. Suspendisse potenti. Donec tincidunt euismod porttitor."
-        href="https://developer.salesforce.com/"
-        img-alt="Scenic view of a mountain."
-        img-src="https://i.imgur.com/FUsyxR5.jpg"
-        title="Lorem Ipsum"
-        layout="horizontal"
-    >
-    </dx-card-content>
-`;

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

@@ -1,115 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-card-demo",
-    component: "dx-card-demo"
-};
-
-const createStyles = () => html`
-    <style>
-        dx-card-demo {
-            margin-top: 25px;
-            margin-bottom: 25px;
-            width: 400px;
-        }
-    </style>
-`;
-
-export const Base = () => html`
-    ${createStyles()}
-
-    <dx-card-demo
-        body="Sample retail application. This application helps E-Bikes, a fictitious electric bicycle manufacturer, manage their products and reseller orders using a rich User Experience. Explore this application, integrating with Salesfoce Communities, and learn stuff. Sample retail application. This application helps E-Bikes, a fictitious electric bicycle manufacturer, manage their products and reseller orders using a rich User Experience. Explore this application, integrating with Salesfoce Communities, and learn stuff."
-        href="https://developer.salesforce.com/"
-        img-alt="Scenic view of a mountain."
-        img-src="https://i.imgur.com/FUsyxR5.jpg"
-        title="E-Bikes"
-    >
-    </dx-card-demo>
-
-    <br />
-    <br />
-
-    <dx-card-demo
-        body="Sample retail application. This application helps E-Bikes, a fictitious electric bicycle manufacturer, manage their products and reseller orders using a rich User Experience. Explore this application, integrating with Salesfoce Communities, and learn stuff. Sample retail application. This application helps E-Bikes, a fictitious electric bicycle manufacturer, manage their products and reseller orders using a rich User Experience. Explore this application, integrating with Salesfoce Communities, and learn stuff."
-        href="https://developer.salesforce.com/"
-        title="E-Bikes"
-    >
-    </dx-card-demo>
-`;
-
-// prettier-ignore
-export const Grid = () => html`
-    <dx-grid columns="three">
-        <dx-card-demo
-            body="Sample retail application. This application helps E-Bikes, a fictitious electric bicycle manufacturer, manage their products and reseller orders using a rich User Experience. Explore this application, integrating with Salesfoce Communities, and learn stuff. Sample retail application. This application helps E-Bikes, a fictitious electric bicycle manufacturer, manage their products and reseller orders using a rich User Experience. Explore this application, integrating with Salesfoce Communities, and learn stuff."
-            href="https://developer.salesforce.com/"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-            title="E-Bikes"
-        >
-        </dx-card-demo>
-        <dx-card-demo
-            body="Sample retail application. Explore this application, integrating with Salesfoce Communities, and learn stuff."
-            href="https://developer.salesforce.com/"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-            title="E-Bikes"
-        >
-        </dx-card-demo>
-        <dx-card-demo
-            body="Sample retail application. This application helps E-Bikes, a fictitious electric bicycle manufacturer, manage their products and reseller orders using a rich User Experience. Explore this application, integrating with Salesfoce Communities, and learn stuff. Sample retail application. This application helps E-Bikes, a fictitious electric bicycle manufacturer, manage their products and reseller orders using a rich User Experience. Explore this application, integrating with Salesfoce Communities, and learn stuff. Sample retail application. This application helps E-Bikes, a fictitious electric bicycle manufacturer, manage their products and reseller orders using a rich User Experience. Explore this application, integrating with Salesfoce Communities, and learn stuff. Sample retail application. This application helps E-Bikes, a fictitious electric bicycle manufacturer, manage their products and reseller orders using a rich User Experience. Explore this application, integrating with Salesfoce Communities, and learn stuff."
-            href="https://developer.salesforce.com/"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-            title="E-Bikes"
-        >
-        </dx-card-demo>
-        <dx-card-demo
-            body="Sample retail application. This application helps E-Bikes, a fictitious electric bicycle manufacturer, manage their products and reseller orders using a rich User Experience. Explore this application, integrating with Salesfoce Communities, and learn stuff. Sample retail application. This application helps E-Bikes, a fictitious electric bicycle manufacturer, manage their products and reseller orders using a rich User Experience. Explore this application, integrating with Salesfoce Communities, and learn stuff."
-            href="https://developer.salesforce.com/"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-            title="E-Bikes"
-        >
-        </dx-card-demo>
-        <dx-card-demo
-            body="Sample retail application. This application helps E-Bikes, a fictitious electric bicycle manufacturer, manage their products and reseller orders using a rich User Experience. Explore this application, integrating with Salesfoce Communities, and learn stuff. Sample retail application. This application helps E-Bikes, a fictitious electric bicycle manufacturer, manage their products and reseller orders using a rich User Experience. Explore this application, integrating with Salesfoce Communities, and learn stuff. Sample retail application. This application helps E-Bikes, a fictitious electric bicycle manufacturer, manage their products and reseller orders using a rich User Experience. Explore this application, integrating with Salesfoce Communities, and learn stuff. Sample retail application. This application helps E-Bikes, a fictitious electric bicycle manufacturer, manage their products and reseller orders using a rich User Experience. Explore this application, integrating with Salesfoce Communities, and learn stuff."
-            href="https://developer.salesforce.com/"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-            title="E-Bikes"
-        >
-        </dx-card-demo>
-        <dx-card-demo
-            body="Sample retail application. Explore this application, integrating with Salesfoce Communities, and learn stuff."
-            href="https://developer.salesforce.com/"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-            title="E-Bikes"
-        >
-        </dx-card-demo>
-        <dx-card-demo
-            body="Sample retail application. This application helps E-Bikes, a fictitious electric bicycle manufacturer, manage their products and reseller orders using a rich User Experience. Explore this application, integrating with Salesfoce Communities, and learn stuff. Sample retail application. This application helps E-Bikes, a fictitious electric bicycle manufacturer, manage their products and reseller orders using a rich User Experience. Explore this application, integrating with Salesfoce Communities, and learn stuff."
-            href="https://developer.salesforce.com/"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-            title="E-Bikes"
-        >
-        </dx-card-demo>
-        <dx-card-demo
-            body="Sample retail application. Explore this application, integrating with Salesfoce Communities, and learn stuff."
-            href="https://developer.salesforce.com/"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-            title="E-Bikes"
-        >
-        </dx-card-demo>
-        <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/cardDocs/__tests__/cardDocs.test.ts

@@ -1,48 +0,0 @@
-import Card from "dx/cardDocs";
-import { createRenderComponent } from "utils/tests";
-import { stopPropagationOnSlotted } from "utils/slot";
-import mockProps from "./mockProps";
-
-const TAG = "dx-card";
-const render = createRenderComponent(TAG, Card);
-
-jest.mock("utils/slot", () => {
-    return {
-        stopPropagationOnSlotted: jest.fn()
-    };
-});
-
-describe(TAG, () => {
-    it("renders the image, label, title, body", () => {
-        const element = render(mockProps);
-
-        const els = [
-            ".image",
-            ".dx-text-label-3",
-            "dx-card-title",
-            ".dx-text-body-2"
-        ].map((query) => element.shadowRoot.querySelector(query));
-        expect(els).not.toContain(null);
-        return expect(element).toBeAccessible();
-    });
-
-    it("doesn't render the image when it doesn't need to", () => {
-        const element = render({
-            title: mockProps.title,
-            body: mockProps.body
-        });
-        const els = [".image"].map((query) =>
-            element.shadowRoot.querySelector(query)
-        );
-        els.forEach((el) => expect(el).toBeNull());
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders slot and calls stopPropagation", () => {
-        const element = render(mockProps);
-        const slot: HTMLSlotElement = element.shadowRoot.querySelector("slot");
-        slot.dispatchEvent(new Event("slotchange"));
-        expect(stopPropagationOnSlotted).toBeCalledTimes(1);
-    });
-});

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

@@ -1,9 +0,0 @@
-export default {
-    body:
-        "This is a pretty long card body. It could say just about anything regarding the content of this card.",
-    href: "https://developer.salesforce.com/",
-    imgAlt: "Scenic view of a mountain.",
-    imgSrc: "https://i.imgur.com/FUsyxR5.jpg",
-    label: "Documentation",
-    title: "Example Name"
-};