@salesforcedevs/dx-components 0.26.1-alpha.12 → 0.26.1-alpha.17

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-internal/tests";
-import { stopPropagationOnSlotted } from "utils-internal/slot";
-import mockProps from "./mockProps";
-
-const TAG = "dx-card";
-const render = createRenderComponent(TAG, Card);
-
-jest.mock("utils-internal/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"
-};

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

@@ -1,299 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-card-docs",
-    component: "dx-card-docs"
-};
-
-const createStyles = () => html`
-    <style>
-        span {
-            color: grey;
-        }
-        dx-card-docs {
-            margin-top: 25px;
-            margin-bottom: 25px;
-            width: 400px;
-            max-width: 100%;
-            min-width: 240px;
-        }
-    </style>
-`;
-
-export const Base = () => html`
-    ${createStyles()}
-    <span>With image</span>
-
-    <dx-card-docs
-        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"
-    >
-        <dx-button
-            href="http://tweetflight.wearebrightly.com/"
-            target="_blank"
-            variant="inline"
-            icon-symbol="forward"
-        >
-            Read Guide
-        </dx-button>
-    </dx-card-docs>
-
-    <span>Without image</span>
-
-    <dx-card-docs
-        body="Quip SCIM API is a specification designed to make it easier to manage user identities in cloud-based applications and services."
-        href="https://developer.salesforce.com/"
-        label="API"
-        title="Quip SCIM API Documentation"
-    >
-        <dx-button
-            href="http://tweetflight.wearebrightly.com/"
-            target="_blank"
-            variant="inline"
-        >
-            Overview
-        </dx-button>
-        <dx-button
-            href="http://tweetflight.wearebrightly.com/"
-            target="_blank"
-            variant="inline"
-        >
-            Guides
-        </dx-button>
-        <dx-button
-            href="http://tweetflight.wearebrightly.com/"
-            target="_blank"
-            variant="inline"
-        >
-            Reference
-        </dx-button>
-    </dx-card-docs>
-
-    <span>With new window icon and target set to '_blank'</span>
-
-    <dx-card-docs
-        body="Quip SCIM API is a specification designed to make it easier to manage user identities in cloud-based applications and services."
-        href="https://developer.salesforce.com/"
-        label="API"
-        title="Quip SCIM API Documentation"
-        target="_blank"
-    >
-        <dx-button
-            href="http://tweetflight.wearebrightly.com/"
-            target="_blank"
-            variant="inline"
-        >
-            Overview
-        </dx-button>
-        <dx-button
-            href="http://tweetflight.wearebrightly.com/"
-            target="_blank"
-            variant="inline"
-        >
-            Guides
-        </dx-button>
-        <dx-button
-            href="http://tweetflight.wearebrightly.com/"
-            target="_blank"
-            variant="inline"
-        >
-            Reference
-        </dx-button>
-    </dx-card-docs>
-`;
-
-// prettier-ignore
-export const Grid = () => html`
-    <dx-grid columns="three">
-        <dx-card-docs
-            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"
-        >
-            <dx-button
-                href="http://tweetflight.wearebrightly.com/"
-                target="_blank"
-                variant="inline"
-                icon-symbol="forward"
-            >
-                Read Guide
-            </dx-button>
-        </dx-card-docs>
-        <dx-card-docs
-            body="Quip SCIM API is a specification designed to make it easier to manage user identities in cloud-based applications and services."
-            href="https://developer.salesforce.com/"
-            label="API"
-            title="Quip SCIM API"
-        >
-            <dx-button
-                href="http://tweetflight.wearebrightly.com/"
-                target="_blank"
-                variant="inline"
-            >
-                Overview
-            </dx-button>
-            <dx-button
-                href="http://tweetflight.wearebrightly.com/"
-                target="_blank"
-                variant="inline"
-            >
-                Guides
-            </dx-button>
-            <dx-button
-                href="http://tweetflight.wearebrightly.com/"
-                target="_blank"
-                variant="inline"
-            >
-                Reference
-            </dx-button>
-        </dx-card-docs>
-        <dx-card-docs
-            body="Quip SCIM API is a specification designed to make it easier to manage user identities in cloud-based applications and services."
-            href="https://developer.salesforce.com/"
-            label="API"
-            title="Quip SCIM API"
-        >
-            <dx-button
-                href="http://tweetflight.wearebrightly.com/"
-                target="_blank"
-                variant="inline"
-            >
-                Overview
-            </dx-button>
-            <dx-button
-                href="http://tweetflight.wearebrightly.com/"
-                target="_blank"
-                variant="inline"
-            >
-                Guides
-            </dx-button>
-            <dx-button
-                href="http://tweetflight.wearebrightly.com/"
-                target="_blank"
-                variant="inline"
-            >
-                Reference
-            </dx-button>
-        </dx-card-docs>
-        <dx-card-docs
-            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"
-        >
-            <dx-button
-                href="http://tweetflight.wearebrightly.com/"
-                target="_blank"
-                variant="inline"
-                icon-symbol="forward"
-            >
-                Read Guide
-            </dx-button>
-        </dx-card-docs>
-        <dx-card-docs
-            body="Quip SCIM API is a specification designed to make it easier to manage user identities in cloud-based applications and services."
-            href="https://developer.salesforce.com/"
-            label="API"
-            title="Quip SCIM API"
-        >
-            <dx-button
-                href="http://tweetflight.wearebrightly.com/"
-                target="_blank"
-                variant="inline"
-            >
-                Overview
-            </dx-button>
-            <dx-button
-                href="http://tweetflight.wearebrightly.com/"
-                target="_blank"
-                variant="inline"
-            >
-                Guides
-            </dx-button>
-            <dx-button
-                href="http://tweetflight.wearebrightly.com/"
-                target="_blank"
-                variant="inline"
-            >
-                Reference
-            </dx-button>
-        </dx-card-docs>
-        <dx-card-docs
-            body="Quip SCIM API is a specification designed to make it easier to manage user identities in cloud-based applications and services."
-            href="https://developer.salesforce.com/"
-            label="API"
-            title="Quip SCIM API"
-        >
-            <dx-button
-                href="http://tweetflight.wearebrightly.com/"
-                target="_blank"
-                variant="inline"
-            >
-                Overview
-            </dx-button>
-            <dx-button
-                href="http://tweetflight.wearebrightly.com/"
-                target="_blank"
-                variant="inline"
-            >
-                Guides
-            </dx-button>
-            <dx-button
-                href="http://tweetflight.wearebrightly.com/"
-                target="_blank"
-                variant="inline"
-            >
-                Reference
-            </dx-button>
-        </dx-card-docs>
-        <dx-card-docs
-            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"
-        >
-            <dx-button
-                href="http://tweetflight.wearebrightly.com/"
-                target="_blank"
-                variant="inline"
-                icon-symbol="forward"
-            >
-                Read Guide
-            </dx-button>
-        </dx-card-docs>
-        <dx-card-docs
-            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"
-        >
-            <dx-button
-                href="http://tweetflight.wearebrightly.com/"
-                target="_blank"
-                variant="inline"
-                icon-symbol="forward"
-            >
-                Read Guide
-            </dx-button>
-        </dx-card-docs>
-        <dx-card-callout
-            background-color="indigo-vibrant-30"
-            href="/build-stuff"
-            title="Find an upcoming event"
-            label="Calendar"
-        ></dx-card-callout>
-    </dx-grid>
-`;