@salesforcedevs/dx-components 0.26.1-alpha0.4 → 0.26.2

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

@@ -0,0 +1,381 @@
+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/section/section.ts

@@ -0,0 +1,41 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { toDxColor } from "utils-internal/css";
+
+export default class Section extends LightningElement {
+    @api backgroundColor?: string | null = "transparent";
+    @api dark?: boolean = false;
+    @api headingLevel: "1" | "2" | "3" | "4" | "5" = "3";
+    @api label?: string | null = null;
+    @api subtitle?: string | null = null;
+    @api textAlign?: "center" | "left" = "left";
+    @api title?: string | null = null;
+    @api topGraphic?: boolean = false;
+    @api graphicOverlap?: boolean = false;
+    @api bottomGraphic?: boolean = false;
+
+    private get style(): string {
+        return `--dx-c-section-background-color: ${toDxColor(
+            this.backgroundColor
+        )};`;
+    }
+
+    private get className() {
+        return cx(
+            "section",
+            this.dark && "section-dark",
+            `align-${this.textAlign}`,
+            this.graphicOverlap && "graphic-overlap",
+            this.bottomGraphic && "graphic-bottom",
+            this.topGraphic && "graphic-top"
+        );
+    }
+
+    private get headingClassName() {
+        return cx("heading", `dx-text-heading-${this.headingLevel}`);
+    }
+
+    private get hasText(): boolean {
+        return !!(this.title || this.label || this.subtitle);
+    }
+}

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

@@ -0,0 +1,66 @@
+import SectionSignup from "dx/sectionSignup";
+import { createRenderComponent } from "utils-internal/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.css

@@ -0,0 +1,43 @@
+:host {
+    --dx-c-section-signup-width: 606px;
+}
+
+.title-container {
+    width: 100%;
+}
+
+.title {
+    font-family: var(--dx-g-font-display);
+    color: var(--dx-g-blue-vibrant-20);
+    text-align: center;
+    line-height: var(--dx-g-text-2xl);
+    letter-spacing: -0.12px;
+    font-weight: var(--dx-g-font-demi);
+    font-size: var(--dx-g-text-lg);
+}
+
+.input-button-container {
+    --dx-c-button-container-width: 83.5%;
+
+    margin: 0 auto;
+    width: var(--dx-c-button-container-width);
+}
+
+.email-box-button {
+    --dx-c-input-width: 100%;
+}
+
+.section-signup {
+    width: var(--dx-c-section-signup-width);
+    padding-bottom: var(--dx-g-spacing-xl);
+}
+
+@media screen and (max-width: 640px) {
+    :host {
+        --dx-c-section-signup-width: 100%;
+    }
+
+    .input-button-container {
+        --dx-c-button-container-width: 88.8%;
+    }
+}

package/src/modules/dx/sectionSignup/sectionSignup.html

@@ -0,0 +1,23 @@
+<template>
+    <div class="section-signup">
+        <template if:true={inputTitle}>
+            <div class="title-container">
+                <h2 class="title">{inputTitle}</h2>
+            </div>
+        </template>
+
+        <slot onslotchange={onSlotChange}></slot>
+
+        <template if:true={isSlotEmpty}>
+            <div class="input-button-container">
+                <dx-input
+                    class="email-box-button"
+                    placeholder={inputPlaceholder}
+                    submit-label={inputSubmitLabel}
+                    onsubmit={onSubmit}
+                    size={size}
+                ></dx-input>
+            </div>
+        </template>
+    </div>
+</template>

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

@@ -0,0 +1,49 @@
+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/sectionSignup/sectionSignup.ts

@@ -0,0 +1,44 @@
+import { LightningElement, api } from "lwc";
+import { LightningSlotElement } from "typings/custom";
+import debounce from "debounce";
+const MOBILE_SIZE = 640;
+const getInputSize = () =>
+    (window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth) < MOBILE_SIZE
+        ? "small"
+        : "large";
+export default class SectionSignup extends LightningElement {
+    @api inputTitle?: string = "";
+    @api inputPlaceholder?: string = "";
+    @api inputSubmitLabel?: string = "Subscribe";
+
+    private isSlotEmpty: boolean = true;
+    private size: string = getInputSize();
+
+    connectedCallback() {
+        window.addEventListener("resize", this.onResize.bind(this));
+    }
+
+    disconnectedCallback() {
+        window.removeEventListener("resize", this.onResize.bind(this));
+    }
+
+    private onSubmit(e: CustomEvent) {
+        e.stopPropagation();
+        this.dispatchEvent(new CustomEvent("subscribe", { detail: e.detail }));
+    }
+
+    private onSlotChange(e: LightningSlotElement) {
+        // @ts-ignore
+        this.isSlotEmpty = e.target.assignedElements().length === 0;
+    }
+
+    private _updateSize = () => {
+        this.size = getInputSize();
+    };
+
+    private onResize = () =>
+        // @ts-ignore something weird happening here with debounce types
+        debounce(this._updateSize.bind(this)(), 600);
+}