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

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

@@ -1,122 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-card-trailhead-module",
-    component: "dx-card-trailhead-module"
-};
-
-const createStyles = () => html`
-    <style>
-        dx-card-trailhead-module {
-            width: 400px;
-            max-width: 100%;
-            min-width: 240px;
-        }
-    </style>
-`;
-
-export const Base = () => html`
-    ${createStyles()}
-
-    <dx-card-trailhead-module
-        badge-img-alt="Scenic view of a mountain."
-        badge-img-src="https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/service_lex/b677a8a9a27fbc8a41414576453eb16f_badge.png"
-        body="Get to know the Salesforce Lightning Platform APIs and learn to integrate your data."
-        href="https://developer.salesforce.com/"
-        length="1 hr"
-        points="1000"
-        title="Lightning Platform API Basics"
-    >
-    </dx-card-trailhead-module>
-`;
-
-export const Grid = () => html`
-    <dx-grid columns="three">
-        <dx-card-trailhead-module
-            badge-img-alt="Scenic view of a mountain."
-            badge-img-src="https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/service_lex/b677a8a9a27fbc8a41414576453eb16f_badge.png"
-            body="Get to know the Salesforce Lightning Platform APIs and learn to integrate your data."
-            href="https://developer.salesforce.com/"
-            length="1 hr"
-            points="1000"
-            title="Lightning Platform API Basics"
-        >
-        </dx-card-trailhead-module>
-        <dx-card-trailhead-module
-            badge-img-alt="Scenic view of a mountain."
-            badge-img-src="https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/service_lex/b677a8a9a27fbc8a41414576453eb16f_badge.png"
-            body="Get to know the Salesforce Lightning Platform APIs and learn to integrate your data. Get to know the Salesforce Lightning Platform APIs and learn to integrate your data."
-            href="https://developer.salesforce.com/"
-            length="1 hr"
-            points="1000"
-            title="Lightning Platform API Basics With Extra Title"
-        >
-        </dx-card-trailhead-module>
-        <dx-card-trailhead-module
-            badge-img-alt="Scenic view of a mountain."
-            badge-img-src="https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/service_lex/b677a8a9a27fbc8a41414576453eb16f_badge.png"
-            body="Get to know the Salesforce Lightning Platform APIs and learn to integrate your data. Get to know the Salesforce Lightning Platform APIs and learn to integrate your data."
-            href="https://developer.salesforce.com/"
-            length="1 hr"
-            points="1000"
-            title="Lightning Platform API Basics With Extra Title"
-        >
-        </dx-card-trailhead-module>
-        <dx-card-trailhead-module
-            badge-img-alt="Scenic view of a mountain."
-            badge-img-src="https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/service_lex/b677a8a9a27fbc8a41414576453eb16f_badge.png"
-            body="Get to know the Salesforce Lightning Platform APIs and learn to integrate your data."
-            href="https://developer.salesforce.com/"
-            length="1 hr"
-            points="1000"
-            title="Lightning Platform API Basics"
-        >
-        </dx-card-trailhead-module>
-        <dx-card-trailhead-module
-            badge-img-alt="Scenic view of a mountain."
-            badge-img-src="https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/service_lex/b677a8a9a27fbc8a41414576453eb16f_badge.png"
-            body="Get to know the Salesforce Lightning Platform APIs and learn to integrate your data. Get to know the Salesforce Lightning Platform APIs and learn to integrate your data."
-            href="https://developer.salesforce.com/"
-            length="1 hr"
-            points="1000"
-            title="Lightning Platform API Basics With Extra Title"
-        >
-        </dx-card-trailhead-module>
-        <dx-card-trailhead-module
-            badge-img-alt="Scenic view of a mountain."
-            badge-img-src="https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/service_lex/b677a8a9a27fbc8a41414576453eb16f_badge.png"
-            body="Get to know the Salesforce Lightning Platform APIs and learn to integrate your data. Get to know the Salesforce Lightning Platform APIs and learn to integrate your data."
-            href="https://developer.salesforce.com/"
-            length="1 hr"
-            points="1000"
-            title="Lightning Platform API Basics With Extra Title"
-        >
-        </dx-card-trailhead-module>
-        <dx-card-trailhead-module
-            badge-img-alt="Scenic view of a mountain."
-            badge-img-src="https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/service_lex/b677a8a9a27fbc8a41414576453eb16f_badge.png"
-            body="Get to know the Salesforce Lightning Platform APIs and learn to integrate your data."
-            href="https://developer.salesforce.com/"
-            length="1 hr"
-            points="1000"
-            title="Lightning Platform API Basics"
-        >
-        </dx-card-trailhead-module>
-        <dx-card-trailhead-module
-            badge-img-alt="Scenic view of a mountain."
-            badge-img-src="https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/service_lex/b677a8a9a27fbc8a41414576453eb16f_badge.png"
-            body="Get to know the Salesforce Lightning Platform APIs and learn to integrate your data."
-            href="https://developer.salesforce.com/"
-            length="1 hr"
-            points="1000"
-            title="Lightning Platform API Basics"
-        >
-        </dx-card-trailhead-module>
-        <dx-card-callout
-            background-color="indigo-vibrant-30"
-            href="/build-stuff"
-            title="Find an upcoming event"
-            label="Calendar"
-        ></dx-card-callout>
-    </dx-grid>
-`;

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

@@ -1,22 +0,0 @@
-import CardVideoPreview from "dx/cardVideoPreview";
-import { createRenderComponent } from "utils/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-card-video-preview";
-const render = createRenderComponent(TAG, CardVideoPreview);
-
-describe(TAG, () => {
-    it("renders the content card, play button & date", () => {
-        const element = render(mockProps);
-
-        const els = [
-            "dx-card-content",
-            ".dx-play-button",
-            "dx-formatted-date-time"
-        ].map((query) => element.shadowRoot.querySelector(query));
-
-        expect(els).not.toContain(null);
-
-        return expect(element).toBeAccessible();
-    });
-});

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

@@ -1,11 +0,0 @@
-const fourDaysAgo = new Date(Date.now() - 3.456e8).toISOString();
-
-export default {
-    datetime: fourDaysAgo,
-    title: "This is a cool video about driving up to estes park to go skiing",
-    body: "This is a cool video about driving up to estes park to go skiing",
-    href: "/test-href",
-    imgSrc: "https://i.imgur.com/FUsyxR5.jpg",
-    imgAlt: "Scenic view of a mountain",
-    target: "_blank"
-};

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

@@ -1,147 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-card-video-preview",
-    component: "dx-card-video-preview"
-};
-
-const date = new Date().toISOString();
-
-const createStyles = () => html`
-    <style>
-        dx-card-video-preview {
-            width: 400px;
-            max-width: 100%;
-            min-width: 240px;
-            margin-botom: 48px;
-        }
-    </style>
-`;
-
-export const Base = () => html`
-    ${createStyles()}
-
-    <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"
-        target="_blank"
-    >
-    </dx-card-video-preview>
-
-    <br />
-    horizontal layout
-    <br />
-    <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"
-        target="_blank"
-        layout="horizontal"
-    >
-    </dx-card-video-preview>
-
-    <br />
-    featured
-    <br />
-    <dx-card-video-preview
-        body="Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
-        datetime="${date}"
-        featured="true"
-        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"
-        target="_blank"
-    >
-    </dx-card-video-preview>
-`;
-
-export const Grid = () => html`
-    <dx-grid columns="three">
-        <dx-card-video-preview
-            body="Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned. Confidence is hard-earned. 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"
-        >
-        </dx-card-video-preview>
-        <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"
-        >
-        </dx-card-video-preview>
-        <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"
-        >
-        </dx-card-video-preview>
-        <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"
-        >
-        </dx-card-video-preview>
-        <dx-card-video-preview
-            body="Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned. Do you know how your customizations will perform when the crowds show up?"
-            datetime="${date}"
-            href="https://developer.salesforce.com/"
-            img-alt="Scenic view of a banana."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-            title="How to Harness Einstein Vision and Language in Any App Banana"
-        >
-        </dx-card-video-preview>
-        <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"
-        >
-        </dx-card-video-preview>
-        <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"
-        >
-        </dx-card-video-preview>
-        <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"
-        >
-        </dx-card-video-preview>
-        <dx-card-callout
-            background-color="indigo-vibrant-30"
-            href="/build-stuff"
-            title="Find an upcoming event"
-            label="Calendar"
-        ></dx-card-callout>
-    </dx-grid>
-`;

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

@@ -1,86 +0,0 @@
-import Checkbox from "dx/checkbox";
-import { createRenderComponent } from "utils/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-checkbox";
-const render = createRenderComponent(TAG, Checkbox);
-
-describe(TAG, () => {
-    it("renders with the correct defaults", () => {
-        const element = render({ ...mockProps, type: "radio" });
-
-        const input = element.shadowRoot.querySelector("input");
-        const span = element.shadowRoot.querySelector("span");
-
-        expect(input).not.toBeNull();
-        expect(input.type).toBe("radio");
-        expect(input.checked).toBe(true);
-        expect(input.value).toBe(mockProps.value);
-        expect(span.textContent).toBe(mockProps.label);
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("passes disabled through correctly", () => {
-        const element = render({ ...mockProps, disabled: true });
-
-        const input = element.shadowRoot.querySelector("input");
-
-        expect(input.disabled).toBe(true);
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("shows error messaging when showValidity is called and is invalid", () => {
-        const element = render({
-            ...mockProps,
-            required: true,
-            checked: false
-        });
-
-        const valid = element.reportValidity();
-        expect(valid).toBe(false);
-
-        return Promise.resolve().then(() => {
-            const err = element.shadowRoot.querySelector(".show-error");
-            expect(err).not.toBeNull();
-
-            return expect(element).toBeAccessible();
-        });
-    });
-
-    it("doesn't show error messaging when showValidity called and not required", () => {
-        const element = render({ ...mockProps, checked: false });
-
-        const valid = element.reportValidity();
-        expect(valid).toBe(true);
-
-        return Promise.resolve().then(() => {
-            expect(element.className).not.toContain("show-error");
-            return expect(element).toBeAccessible();
-        });
-    });
-
-    it("fires the correct event onclick", () => {
-        const mockChange = jest.fn();
-
-        const element = render(mockProps);
-
-        element.addEventListener("change", mockChange);
-
-        const input: HTMLInputElement = element.shadowRoot.querySelector(
-            "input"
-        );
-        input.checked = false;
-        input.dispatchEvent(new InputEvent("change"));
-
-        expect(mockChange.mock.calls[0][0].detail).toEqual(
-            expect.objectContaining({
-                value: mockProps.value,
-                checked: false
-            })
-        );
-
-        return expect(element).toBeAccessible();
-    });
-});

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

@@ -1,5 +0,0 @@
-export default {
-    value: "industries",
-    label: "Industries",
-    checked: true
-};

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

@@ -1,38 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-checkbox",
-    component: "dx-checkbox"
-};
-
-const styles = () => html`
-    <style>
-        .terms {
-            --dx-c-checkbox-text-line-height: 20px;
-            --dx-c-checkbox-font-size: 14px;
-        }
-    </style>
-`;
-
-export const Base = () => html`
-    ${styles()}
-    <dx-checkbox value="industries" label="Industries"> </dx-checkbox>
-    <br />
-    <dx-checkbox value="industries" label="Industries" type="radio">
-    </dx-checkbox>
-    <br />
-    <dx-checkbox value="terms" required="true" class="terms">
-        By registering, you confirm you have read and agree to the
-        <dx-button variant="inline-inherit" href="https://www.google.com"
-            >Terms of Use</dx-button
-        >
-        and the
-        <dx-button variant="inline-inherit" href="https://www.google.com"
-            >Master Subscription Agreement</dx-button
-        >
-        and agree that my data is subject to the
-        <dx-button variant="inline-inherit" href="https://www.google.com"
-            >Privacy Statement</dx-button
-        >, including use for marketing purposes.
-    </dx-checkbox>
-`;

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

@@ -1,80 +0,0 @@
-import CheckboxGroup from "dx/checkboxGroup";
-import { createRenderComponent } from "utils/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-checkbox-group";
-const render = createRenderComponent(TAG, CheckboxGroup);
-
-describe(TAG, () => {
-    it("renders the correct number of checkboxes and renders the legend", () => {
-        const element = render(mockProps);
-
-        const checkboxes = element.shadowRoot.querySelectorAll("dx-checkbox");
-        const legend = element.shadowRoot.querySelector("legend");
-
-        expect(checkboxes.length).toBe(mockProps.options.length);
-        expect(legend.textContent).toBe(mockProps.legend);
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("accepts a value", () => {
-        const element = render({
-            options: mockProps.options,
-            legend: mockProps.legend,
-            value: mockProps.defaultValue
-        });
-
-        expect(element.value).toEqual(mockProps.defaultValue);
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("disables all checkboxes when disabled is true", () => {
-        const element = render({ ...mockProps, disabled: true });
-
-        const checkboxes = element.shadowRoot.querySelectorAll("dx-checkbox");
-
-        const allChecked = Array.from(checkboxes).every(
-            (checkbox: any) => checkbox.disabled
-        );
-
-        expect(allChecked).toBe(true);
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("adds and removes option value from the callback payload's value", async () => {
-        const mockChange = jest.fn();
-
-        const element = render(mockProps);
-
-        element.addEventListener("change", mockChange);
-
-        const checkbox = element.shadowRoot.querySelector("dx-checkbox");
-
-        const dispatchOnChange = () =>
-            checkbox.dispatchEvent(
-                new CustomEvent("change", { detail: { value: checkbox.value } })
-            );
-
-        dispatchOnChange();
-
-        await Promise.resolve();
-
-        expect(mockChange.mock.calls[0][0].detail.value).toEqual([
-            ...mockProps.defaultValue,
-            checkbox.value
-        ]);
-
-        dispatchOnChange();
-
-        await Promise.resolve();
-
-        expect(mockChange.mock.calls[1][0].detail.value).toEqual(
-            mockProps.defaultValue
-        );
-
-        return expect(element).toBeAccessible();
-    });
-});

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

@@ -1,14 +0,0 @@
-export const options = [
-    { value: "analytics", label: "Analytics" },
-    { value: "collaboration", label: "Collaboration" },
-    { value: "commerce", label: "Commerce", disabled: true },
-    { value: "marketing", label: "Marketing", disabled: true },
-    { value: "heroku", label: "Heroku" },
-    { value: "sales", label: "Sales" }
-];
-
-export default {
-    defaultValue: ["sales", "heroku", "marketing"],
-    legend: "products",
-    options
-};

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

@@ -1,33 +0,0 @@
-import { html } from "lit-html";
-import mockProps from "./__tests__/mockProps";
-
-export default {
-    title: "dx/dx-checkbox-group",
-    component: "dx-checkbox-group"
-};
-
-export const Base = (args: any) => html`
-    <dx-checkbox-group
-        legend="${args.legend}"
-        options="${args.options}"
-        default-value="${args.defaultValue}"
-    ></dx-checkbox-group>
-`;
-
-export const Controlled = (args: any) => html`
-    <dx-checkbox-group
-        legend="${args.legend}"
-        options="${args.options}"
-        value="${args.defaultValue}"
-    ></dx-checkbox-group>
-`;
-
-const args = {
-    ...mockProps,
-    options: JSON.stringify(mockProps.options),
-    defaultValue: JSON.stringify(mockProps.defaultValue)
-};
-
-Base.args = args;
-
-Controlled.args = args;