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

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/section/section.ts

@@ -1,41 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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

@@ -1,43 +0,0 @@
-: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

@@ -1,23 +0,0 @@
-<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

@@ -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/sectionSignup/sectionSignup.ts

@@ -1,44 +0,0 @@
-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);
-}