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

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

@@ -1,381 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-section",
-    component: "dx-section"
-};
-
-const createStyles = () => html`
-    <style>
-        body {
-            padding: 0 !important;
-        }
-        .placeholder {
-            background-color: #ababab;
-            border-radius: 8px;
-            height: 200px;
-        }
-        dx-section.products {
-            --dx-c-section-padding-bottom: 0;
-        }
-        dx-section.videos {
-            --dx-c-section-padding-top: 160px;
-        }
-        dx-section:last-child {
-            --dx-c-section-padding-bottom: var(--dx-g-spacing-md);
-        }
-    </style>
-`;
-
-const date = new Date().toISOString();
-const startDatetime = new Date(0, 0, 1, 9, 0, 0).toISOString();
-const endDatetime = new Date(0, 0, 1, 12, 0, 0).toISOString();
-
-// prettier-ignore
-export const Base = () => html`
-    ${createStyles()}
-    <dx-section
-        title="Explore our Products"
-        subtitle="Browse resources, tutorials, and everything you need to start building right away."
-        text-align="center"
-    >
-        <dx-grid columns="one">
-            <dx-grid columns="two-slim-right" class="most-recent-blogs">
-                <dx-card-news
-                    href="https://salesforce.com"
-                    img-alt="Vector image of a lake and a mountain."
-                    img-src="/assets/svg/dsc-home-news-bear.svg"
-                    title="Salesforce Developer Survey"
-                    body="Share your insights to help us improve your developer experience"
-                    background-color="indigo-vibrant-20"
-                    size="large"
-                    button-text="Take the Survey"
-                    button-type="large"
-                    img-placement="right"
-                ></dx-card-news>
-                <dx-card-news
-                    href="https://salesforce.com"
-                    img-alt="Vector image of a lake and a mountain."
-                    img-src="/assets/svg/lake-mountain.svg"
-                    title="LEARN MOAR"
-                    body="Discover what's new for Admins and Developers in the Spring'21 Release"
-                    background-color="cloud-blue-vibrant-90"
-                    color="cloud-blue-vibrant-20"
-                    button-text="Learn moar"
-                    button-type="inline"
-                    img-placement="top"
-                ></dx-card-news>
-            </dx-grid>
-            <dx-grid columns="three">
-                <dx-card-news
-                    href="https://salesforce.com"
-                    img-alt="Vector image of a lake and a mountain."
-                    img-src="/assets/svg/lake-mountain.svg"
-                    title="LEARN MOAR"
-                    body="Discover what's new for Admins and Developers in the Spring'21 Release"
-                    background-color="cloud-blue-vibrant-90"
-                    color="cloud-blue-vibrant-20"
-                    button-text="Learn moar"
-                    button-type="inline"
-                    img-placement="top"
-                ></dx-card-news>
-                <dx-card-news
-                    href="https://salesforce.com"
-                    img-alt="Vector image of a lake and a mountain."
-                    img-src="/assets/svg/lake-mountain.svg"
-                    title="LEARN MOAR"
-                    body="Discover what's new for Admins and Developers in the Spring'21 Release"
-                    background-color="cloud-blue-vibrant-90"
-                    color="cloud-blue-vibrant-20"
-                    button-text="Learn moar"
-                    button-type="inline"
-                    img-placement="top"
-                ></dx-card-news>
-                <dx-card-news
-                    href="https://salesforce.com"
-                    img-alt="Vector image of a lake and a mountain."
-                    img-src="/assets/svg/lake-mountain.svg"
-                    title="LEARN MOAR"
-                    body="Discover what's new for Admins and Developers in the Spring'21 Release"
-                    background-color="cloud-blue-vibrant-90"
-                    color="cloud-blue-vibrant-20"
-                    button-text="Learn moar"
-                    button-type="inline"
-                    img-placement="top"
-                ></dx-card-news>
-            </dx-grid>
-        </dx-grid>
-    </dx-section>
-    <dx-section
-        title="Explore our Products"
-        subtitle="Browse resources, tutorials, and everything you need to start building right away."
-        text-align="center"
-        class="products"
-}
-    >
-        <dx-grid columns="three">
-            <dx-card-small
-                href="/test-href"
-                target="_blank"
-                title="Marketplaces"
-                body="This is a pretty long card body. It could say just about anything regarding the content of this card. This is a pretty long card body. It could say just about anything regarding the content of this card. This is a pretty long card body. It could say just about anything regarding the content of this card."
-                badge-symbol="bucket"
-            >
-            </dx-card-small>
-            <dx-card-small
-                href="/test-href"
-                target="_blank"
-                title="Marketplaces"
-                body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-                badge-symbol="bucket"
-            >
-            </dx-card-small>
-            <dx-card-small
-                href="/test-href"
-                target="_blank"
-                title="Marketplaces"
-                body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-                badge-symbol="bucket"
-            >
-            </dx-card-small>
-            <dx-card-small
-                href="/test-href"
-                target="_blank"
-                title="Marketplaces"
-                body="This is a pretty long card body. It could say just about anything regarding the content of this card. This is a pretty long card body. It could say just about anything regarding the content of this card. This is a pretty long card body. It could say just about anything regarding the content of this card."
-                badge-symbol="bucket"
-            >
-            </dx-card-small>
-            <dx-card-small
-                href="/test-href"
-                target="_blank"
-                title="Marketplaces"
-                body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-                badge-symbol="bucket"
-            >
-            </dx-card-small>
-            <dx-card-small
-                href="/test-href"
-                target="_blank"
-                title="Marketplaces"
-                body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-                badge-symbol="bucket"
-            >
-            </dx-card-small>
-            <dx-card-small
-                href="/test-href"
-                target="_blank"
-                title="Marketplaces"
-                body="This is a pretty long card body. It could say just about anything regarding the content of this card. This is a pretty long card body. It could say just about anything regarding the content of this card. This is a pretty long card body. It could say just about anything regarding the content of this card."
-                badge-symbol="bucket"
-            >
-            </dx-card-small>
-            <dx-card-small
-                href="/test-href"
-                target="_blank"
-                title="Marketplaces"
-                body="This is a pretty long card body. It could say just about anything regarding the content of this card. This is a pretty long card body. It could say just about anything regarding the content of this card. This is a pretty long card body. It could say just about anything regarding the content of this card."
-                badge-symbol="bucket"
-            >
-            </dx-card-small>
-            <dx-card-callout
-                background-color="indigo-vibrant-30"
-                href="/build-stuff"
-                title="Find an upcoming event"
-                label="Calendar"
-            ></dx-card-callout>
-        </dx-grid>
-    </dx-section>
-    <dx-section
-        title="Discover Salesforce APIs and see how you can put them to work"
-        label="APIs"
-        background-color="cloud-blue-vibrant-95"
-        top-graphic="true"
-        bottom-graphic="true"
-        graphic-overlap="true"
-    >
-        <dx-grid columns="four">
-            <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/"
-                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-callout
-                background-color="indigo-vibrant-30"
-                href="/build-stuff"
-                title="Find an upcoming event"
-                label="Calendar"
-            ></dx-card-callout>
-        </dx-grid>
-    </dx-section>
-    <dx-section
-        class="videos"
-        title="Watch Salesforce development in action"
-        label="Videos"
-        background-color="blue-vibrant-10"
-        dark="${true}"
-    >
-        <dx-grid columns="two-slim-right">
-            <dx-card-video-preview
-                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="How to Harness Einstein Vision and Language in Any App"
-                featured="${true}"
-            >
-            </dx-card-video-preview>
-            <dx-grid columns="one">
-                <dx-card-video-preview
-                    datetime="${date}"
-                    href="https://developer.salesforce.com/"
-                    img-alt="Scenic view of a mountain."
-                    img-src="https://i.imgur.com/FUsyxR5.jpg"
-                    title="How to Harness Einstein Vision and Language in Any App"
-                >
-                </dx-card-video-preview>
-                <dx-card-video-preview
-                    datetime="${date}"
-                    href="https://developer.salesforce.com/"
-                    img-alt="Scenic view of a mountain."
-                    img-src="https://i.imgur.com/FUsyxR5.jpg"
-                    title="How to Harness Einstein Vision and Language in Any App"
-                >
-                </dx-card-video-preview>
-            </dx-grid>
-        </dx-grid>
-    </dx-section>
-    <dx-section
-        title="Attend Salesforce virtual events. Now inspiration comes to you."
-    >
-        <dx-grid columns="two-slim-right">
-            <dx-card-event
-                end-datetime="${endDatetime}"
-                location="San Francisco"
-                start-datetime="${startDatetime}"
-                title="Virtual Event: Salesforce Life for Financial Services"
-                img-alt="Scenic view of a mountain."
-                img-src="https://i.imgur.com/FUsyxR5.jpg"
-                featured="${true}"
-            ></dx-card-event>
-            <dx-grid columns="one">
-                <dx-card-event
-                    end-datetime="${endDatetime}"
-                    start-datetime="${startDatetime}"
-                    title="Virtual Event: Salesforce Life for Financial Services"
-                    img-alt="Scenic view of a mountain."
-                    img-src="https://i.imgur.com/FUsyxR5.jpg"
-                ></dx-card-event>
-                <dx-card-event
-                    end-datetime="${endDatetime}"
-                    start-datetime="${startDatetime}"
-                    title="Virtual Event: Salesforce Life for Financial Services"
-                ></dx-card-event>
-            </dx-grid>
-        </dx-grid>
-    </dx-section>
-`;
-
-export const NoText = () => html`
-    <style>
-        dx-section.no-text {
-            --dx-c-section-padding-bottom: var(--dx-g-spacing-md);
-            --dx-c-section-padding-top: var(--dx-g-spacing-md);
-        }
-    </style>
-    <dx-section class="no-text">
-        <dx-grid columns="two-slim-right">
-            <dx-card-event
-                end-datetime="${endDatetime}"
-                location="San Francisco"
-                start-datetime="${startDatetime}"
-                title="Virtual Event: Salesforce Life for Financial Services"
-                img-alt="Scenic view of a mountain."
-                img-src="https://i.imgur.com/FUsyxR5.jpg"
-                featured="${true}"
-            ></dx-card-event>
-            <dx-grid columns="one">
-                <dx-card-event
-                    end-datetime="${endDatetime}"
-                    start-datetime="${startDatetime}"
-                    title="Virtual Event: Salesforce Life for Financial Services"
-                    img-alt="Scenic view of a mountain."
-                    img-src="https://i.imgur.com/FUsyxR5.jpg"
-                ></dx-card-event>
-                <dx-card-event
-                    end-datetime="${endDatetime}"
-                    start-datetime="${startDatetime}"
-                    title="Virtual Event: Salesforce Life for Financial Services"
-                ></dx-card-event>
-            </dx-grid>
-        </dx-grid>
-        <legend>This is a section with no label, title or subtitle</legend>
-    </dx-section>
-`;

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

@@ -1,66 +0,0 @@
-import SectionSignup from "dx/sectionSignup";
-import { createRenderComponent } from "utils/tests";
-
-const TAG = "dx-section-signup";
-const render = createRenderComponent(TAG, SectionSignup);
-
-describe(TAG, () => {
-    it("renders", () => {
-        const element = render({ inputPlaceholder: "email" });
-        return expect(element).toBeAccessible();
-    });
-
-    it("fires subscription", () => {
-        const mockSubscribeHandler = jest.fn();
-        const component = render({
-            inputTitle: "sample title",
-            inputPlaceholder: "sample placehoder",
-            inputSubmitLabel: "sample label"
-        });
-
-        component.addEventListener("subscribe", mockSubscribeHandler);
-        expect(mockSubscribeHandler).not.toHaveBeenCalled();
-        component.shadowRoot
-            .querySelector("dx-input")
-            .dispatchEvent(
-                new CustomEvent("submit", { detail: "sample@email.com" })
-            );
-        expect(mockSubscribeHandler).toHaveBeenCalledTimes(1);
-        return expect(component).toBeAccessible();
-    });
-
-    it("correctly binds all properties", () => {
-        const component = render({
-            inputTitle: "sample title",
-            inputPlaceholder: "sample placehoder",
-            inputSubmitLabel: "sample label"
-        });
-
-        expect(component.inputTitle).toBe("sample title");
-        expect(component.inputPlaceholder).toBe("sample placehoder");
-        expect(component.inputSubmitLabel).toBe("sample label");
-
-        const dxinput = component.shadowRoot.querySelector("dx-input");
-        expect(dxinput.placeholder).toBe("sample placehoder");
-        expect(dxinput.submitLabel).toBe("sample label");
-        return expect(component).toBeAccessible();
-    });
-
-    it("check for assigned elements", () => {
-        const component = render({
-            inputTitle: "sample title",
-            inputPlaceholder: "sample placehoder",
-            inputSubmitLabel: "sample label"
-        });
-
-        const slot = component.shadowRoot.querySelector("slot");
-        const div = document.createElement("div");
-        slot.assignedElements = jest.fn().mockReturnValue([div]);
-        slot.dispatchEvent(new Event("slotchange"));
-
-        const elements = slot.assignedElements();
-
-        expect(elements.length).not.toBeUndefined();
-        return expect(component).toBeAccessible();
-    });
-});

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

@@ -1,49 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-section-signup",
-    component: "dx-section-signup"
-};
-
-const createStyles = () => html` <style>
-    dx-section-signup {
-        margin-top: 25px;
-        margin-bottom: 25px;
-        display: block;
-    }
-</style>`;
-
-const ARGS = {
-    title: "Get the lastest posts from Developers Blog every week.",
-    placeholder: "Email",
-    label: "Subscribe"
-};
-
-export const Default = () => html` ${createStyles()}
-    <dx-section-signup></dx-section-signup>`;
-
-export const WithSlot = ({
-    title,
-    placeholder,
-    label
-}: any) => html` ${createStyles()}
-    <dx-section-signup
-        input-title="${title}"
-        input-placeholder="${placeholder}"
-        input-submit-label="${label}"
-    >
-        <h1>Slot Content</h1>
-    </dx-section-signup>`;
-WithSlot.args = ARGS;
-
-export const WithParameters = ({
-    title,
-    placeholder,
-    label
-}: any) => html` ${createStyles()}
-    <dx-section-signup
-        input-title="${title}"
-        input-placeholder="${placeholder}"
-        input-submit-label="${label}"
-    ></dx-section-signup>`;
-WithParameters.args = ARGS;

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

@@ -1,181 +0,0 @@
-import { TreeNode } from "typings/custom";
-
-export const SAMPLE_TREES: TreeNode[] = [
-    {
-        label: "Getting started",
-        name: "started",
-        isExpanded: true,
-        children: [
-            {
-                label: "Introduction",
-                name: "introduction"
-            },
-            {
-                label: "Getting started",
-                name: "started-child"
-            },
-            {
-                label: "Authentication",
-                name: "authentication"
-            },
-            {
-                label: "Token",
-                name: "token"
-            },
-            {
-                label: "Error",
-                name: "error"
-            },
-            {
-                label: "Limits",
-                name: "limit"
-            },
-            {
-                label: "Release note",
-                name: "release-note"
-            }
-        ]
-    },
-    {
-        label: "Einstein Vision",
-        name: "einstein-vision",
-        children: [
-            {
-                label: "Introduction",
-                name: "einstein-introduction"
-            },
-            {
-                label: "Terminology",
-                name: "terminology"
-            },
-            {
-                label: "Object detection quickstart for beginner",
-                name: "object-quickstart",
-                isExpanded: true,
-                children: [
-                    {
-                        label:
-                            "Scenario: this block is intended to show how a large text looks like in the sidebar",
-                        name: "scenario",
-                        isExpanded: true,
-                        children: [
-                            {
-                                label:
-                                    "Scenario A: this block is intended to show how a large text looks like in the sidebar",
-                                name: "scenario-a"
-                            },
-                            {
-                                label: "Scenario B",
-                                name: "scenario-b"
-                            }
-                        ]
-                    },
-                    {
-                        label: "Prerequisites",
-                        name: "prerequisites"
-                    }
-                ]
-            },
-            {
-                label: "Best Practices",
-                name: "best-practices"
-            }
-        ]
-    }
-];
-
-export const SAMPLE_TREES_WITH_METHODS: TreeNode[] = [
-    {
-        label: "Getting started",
-        name: "started",
-        isExpanded: true,
-        children: [
-            {
-                label: "Introduction",
-                name: "introduction",
-                method: "post"
-            },
-            {
-                label: "Getting started",
-                name: "started-child",
-                method: "get"
-            },
-            {
-                label: "Authentication",
-                name: "authentication",
-                method: "delete"
-            },
-            {
-                label: "Token",
-                name: "token",
-                method: "patch"
-            },
-            {
-                label: "Error",
-                name: "error",
-                method: "put"
-            },
-            {
-                label: "Limits",
-                name: "limit",
-                method: "get"
-            },
-            {
-                label: "Release note",
-                name: "release-note",
-                method: "post"
-            }
-        ]
-    },
-    {
-        label: "Einstein Vision",
-        name: "einstein-vision",
-        children: [
-            {
-                label: "Introduction",
-                name: "einstein-introduction",
-                method: "get"
-            },
-            {
-                label: "Terminology",
-                name: "terminology",
-                method: "get"
-            },
-            {
-                label: "Object detection quickstart for beginner",
-                name: "object-quickstart",
-                isExpanded: true,
-                children: [
-                    {
-                        label: "Scenario",
-                        name: "scenario",
-                        isExpanded: true,
-                        children: [
-                            {
-                                label:
-                                    "Scenario A: this block is intended to show how a large text looks like in the sidebar",
-                                name: "scenario-a",
-                                method: "post"
-                            },
-                            {
-                                label: "Scenario B",
-                                name: "scenario-b",
-                                method: "put"
-                            }
-                        ]
-                    },
-                    {
-                        label: "Prerequisites",
-                        name: "prerequisites",
-                        method: "delete"
-                    }
-                ]
-            },
-            {
-                label: "Best Practices",
-                name: "best-practices",
-                method: "patch"
-            }
-        ]
-    }
-];