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

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

@@ -1,83 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-relative-date-time",
-    component: "dx-relative-date-time"
-};
-
-// prettier-ignore
-const createStyles = () => html `
-    <style>
-        span.date-label {
-            color: grey;
-        }
-
-        dx-relative-date-time {
-            display: block;
-            margin-bottom: 12px;
-        }
-    </style>
-`;
-
-const twoWeeks = new Date(Date.now() - 1.21e9).toISOString();
-const fourDays = new Date(Date.now() - 3.456e8).toISOString();
-const threeMonths = new Date(Date.now() - 7.884e9).toISOString();
-const twoYears = new Date(Date.now() - 6.307e10).toISOString();
-const fourHours = new Date(Date.now() - 1.44e7).toISOString();
-const oneHour = new Date(Date.now() - 3600000).toISOString();
-
-// prettier-ignore
-export const DefaultMessage = () => html ` ${createStyles()}
-
-    <span class="date-label">4 hours</span>
-    <dx-relative-date-time value="${fourHours}"></dx-relative-date-time>
-
-    <span class="date-label">4 days</span>
-    <dx-relative-date-time value="${fourDays}"></dx-relative-date-time>
-
-    <span class="date-label">2 weeks</span>
-    <dx-relative-date-time value="${twoWeeks}"></dx-relative-date-time>
-
-    <span class="date-label">3 Months</span>
-    <dx-relative-date-time value="${threeMonths}"></dx-relative-date-time>
-
-    <span class="date-label">2 Years</span>
-    <dx-relative-date-time value="${twoYears}"></dx-relative-date-time>
-
-    <span class="date-label">1 Hour</span>
-    <dx-relative-date-time value="${oneHour}"></dx-relative-date-time>
-`;
-
-export const CustomMessage = () => html`
-    ${createStyles()}
-
-    <span class="date-label">4 hours</span>
-    <dx-relative-date-time
-        value="${fourHours}"
-        message-when-hours-past="hours since upload"
-    ></dx-relative-date-time>
-
-    <span class="date-label">4 days</span>
-    <dx-relative-date-time
-        value="${fourDays}"
-        message-when-days-past="days since broadcast"
-    ></dx-relative-date-time>
-
-    <span class="date-label">2 weeks</span>
-    <dx-relative-date-time
-        value="${twoWeeks}"
-        message-when-weeks-past="weeks since last broadcast"
-    ></dx-relative-date-time>
-
-    <span class="date-label">3 Months</span>
-    <dx-relative-date-time
-        value="${threeMonths}"
-        message-when-months-past="months since the event"
-    ></dx-relative-date-time>
-
-    <span class="date-label">2 Years</span>
-    <dx-relative-date-time
-        value="${twoYears}"
-        message-when-years-past="years ago"
-    ></dx-relative-date-time>
-`;

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

@@ -1,36 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-search-results",
-    component: "dx-search-results",
-    argTypes: {
-        searchQuery: {
-            defaultValue: "deploy apex",
-            control: {
-                type: "text"
-            }
-        }
-    }
-};
-
-// prettier-ignore
-const createStyles = () => html ``;
-
-// prettier-ignore
-export const WithQuery = (args: any) => html ` ${createStyles()}
-    <dx-search-results
-        search-query="${args.searchQuery}"
-        coveo-organization-id="fullsalesforce"
-        coveo-public-access-token="xx4b2b651b-95db-4974-adef-218a1124f739"
-        coveo-search-pipeline="salesforcedevdoc">
-    </dx-search-results>
-`;
-
-// prettier-ignore
-export const WithoutQuery = () => html ` ${createStyles()}
-    <dx-search-results
-        coveo-organization-id="fullsalesforce"
-        coveo-public-access-token="xx4b2b651b-95db-4974-adef-218a1124f739"
-        coveo-search-pipeline="salesforcedevdoc">
-    </dx-search-results>
-`;

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

@@ -1,17 +0,0 @@
-import Section from "dx/section";
-import { createRenderComponent } from "utils/tests";
-
-const TAG = "dx-section";
-const render = createRenderComponent(TAG, Section);
-
-describe(TAG, () => {
-    it("renders the container", () => {
-        const element = render();
-        const el = element.shadowRoot.querySelector(".section");
-        expect(el).not.toBeNull();
-
-        const textDiv = element.shadowRoot.querySelector("div.text");
-        expect(textDiv).toBeNull();
-        return expect(element).toBeAccessible();
-    });
-});

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;