@salesforcedevs/dx-components 0.26.2 → 0.26.3-alpha.1

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

@@ -1,88 +0,0 @@
-import { html } from "lit-html";
-import mockLocales from "./__tests__/mockLocales";
-
-export default {
-    title: "dx/dx-footer",
-    component: "dx-footer"
-};
-
-const mockState = () => {
-    window.addEventListener("DOMContentLoaded", () => {
-        const footer = document.documentElement.querySelector("dx-footer");
-
-        if (footer) {
-            // @ts-ignore
-            footer.addEventListener("localechange", (e: CustomEvent) => {
-                footer.setAttribute("locale", e.detail);
-            });
-        }
-    });
-};
-
-export const Base = (args: any) => {
-    mockState();
-    return html`
-        <style>
-            body {
-                padding: 0 !important;
-            }
-        </style>
-        <dx-footer locales="${args.locales}" locale="en"></dx-footer>
-    `;
-};
-
-Base.args = { locales: JSON.stringify(mockLocales) };
-
-export const LargeNewsletter = (args: any) => {
-    mockState();
-    return html`
-        <style>
-            body {
-                padding: 0 !important;
-            }
-        </style>
-        <dx-footer
-            variant="large-signup"
-            locales="${args.locales}"
-            locale="en"
-        ></dx-footer>
-    `;
-};
-
-LargeNewsletter.args = { locales: JSON.stringify(mockLocales) };
-
-export const NoNewsletter = (args: any) => {
-    mockState();
-    return html`
-        <style>
-            body {
-                padding: 0 !important;
-            }
-        </style>
-        <dx-footer
-            variant="no-signup"
-            locales="${args.locales}"
-            locale="en"
-        ></dx-footer>
-    `;
-};
-
-NoNewsletter.args = { locales: JSON.stringify(mockLocales) };
-
-export const TermsOnly = (args: any) => {
-    mockState();
-    return html`
-        <style>
-            body {
-                padding: 0 !important;
-            }
-        </style>
-        <dx-footer
-            variant="terms-only"
-            locales="${args.locales}"
-            locale="en"
-        ></dx-footer>
-    `;
-};
-
-TermsOnly.args = { locales: JSON.stringify(mockLocales) };

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

@@ -1,34 +0,0 @@
-import FooterOption from "dx/footerOption";
-import { createRenderComponent } from "utils-internal/tests";
-import { MOCK_BUTTON_PROPS } from "./mockProps";
-
-const TAG = "dx-footer-option";
-const render = createRenderComponent(TAG, FooterOption);
-
-describe(TAG, () => {
-    it("renders a single dx-button component", () => {
-        const element = render(MOCK_BUTTON_PROPS);
-
-        const button = element.shadowRoot.querySelectorAll("dx-button");
-
-        expect(button.length).toEqual(1);
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("fires sendGtm function when button is clicked", () => {
-        const sendGtmMock = jest.fn();
-        const element = render({
-            ...MOCK_BUTTON_PROPS,
-            onclick: sendGtmMock
-        });
-
-        const button = element.shadowRoot.querySelector("dx-button");
-
-        button.click();
-
-        expect(sendGtmMock).toHaveBeenCalled();
-
-        return expect(element).toBeAccessible();
-    });
-});

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

@@ -1,7 +0,0 @@
-export const MOCK_BUTTON_PROPS = {
-    generalLabel: "Popular Resources",
-    label: "Trailhead",
-    href: "https://trailhead.salesforce.com/",
-    iconSymbol: "learning",
-    iconSprite: "salesforcebrand"
-};

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

@@ -1,25 +0,0 @@
-/* eslint-disable jest/no-mocks-import */
-import FormattedDateTime from "dx/formattedDateTime";
-import { createRenderComponent } from "utils-internal/tests";
-import mockProps from "./mockProps";
-const TAG = "dx-formatted-date-time";
-const render = createRenderComponent(TAG, FormattedDateTime);
-
-describe(TAG, () => {
-    it("renders the date", () => {
-        const expectedDate = "Sunday, December 31, 1899, 12:00:00am GMT";
-        const component = render(mockProps);
-
-        expect(component).not.toBeNull();
-        expect(component.shadowRoot.textContent).toMatch(expectedDate);
-        return expect(component).toBeAccessible();
-    });
-
-    it("logs an error if value provided is an error", () => {
-        console.error = jest.fn();
-        const component = render({ value: undefined });
-
-        expect(component).not.toBeNull();
-        expect(console.error).toHaveBeenCalled();
-    });
-});

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

@@ -1,13 +0,0 @@
-const date = new Date(Date.UTC(0, 0, 0, 0, 0, 0));
-
-export default {
-    value: date,
-    day: "2-digit",
-    hour: "numeric",
-    minute: "numeric",
-    month: "long",
-    second: "numeric",
-    weekday: "long",
-    year: "numeric",
-    timeZoneName: "short"
-};

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

@@ -1,103 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-formatted-date-time",
-    component: "dx-formatted-date-time"
-};
-
-const date = new Date().toISOString();
-
-const createStyles = () => html`
-    <style>
-        span.date-label {
-            color: grey;
-        }
-
-        dx-formatted-date-time {
-            display: block;
-            margin-bottom: 25px;
-        }
-    </style>
-`;
-
-export const Base = () => html`
-    ${createStyles()}
-    <span class="date-label">Date with Time</span>
-    <dx-formatted-date-time
-        value="${date}"
-        day="2-digit"
-        hour="2-digit"
-        minute="2-digit"
-        month="long"
-        second="2-digit"
-        time-zone-name="short"
-        weekday="long"
-        year="numeric"
-    ></dx-formatted-date-time>
-
-    <span class="date-label">Date with "long" Month</span>
-    <dx-formatted-date-time
-        value="${date}"
-        day="2-digit"
-        month="long"
-        year="numeric"
-    ></dx-formatted-date-time>
-
-    <span class="date-label">Date with Short Month</span>
-    <dx-formatted-date-time
-        value="${date}"
-        day="2-digit"
-        month="short"
-        year="numeric"
-    ></dx-formatted-date-time>
-
-    <span>Date all Digits</span>
-    <dx-formatted-date-time
-        value="${date}"
-        day="2-digit"
-        month="2-digit"
-        year="numeric"
-    ></dx-formatted-date-time>
-
-    <span class="date-label">Date with Day of Week</span>
-    <dx-formatted-date-time
-        value="${date}"
-        day="2-digit"
-        month="long"
-        weekday="long"
-        year="numeric"
-    ></dx-formatted-date-time>
-
-    <span class="date-label">Time</span>
-    <dx-formatted-date-time
-        value="${date}"
-        hour="2-digit"
-        minute="2-digit"
-        second="2-digit"
-    ></dx-formatted-date-time>
-
-    <span class="date-label">Time as Numeric without Seconds</span>
-    <dx-formatted-date-time
-        value="${date}"
-        hour="numeric"
-        minute="2-digit"
-    ></dx-formatted-date-time>
-
-    <span class="date-label">Time with Timezone</span>
-    <dx-formatted-date-time
-        value="${date}"
-        hour="2-digit"
-        minute="2-digit"
-        second="2-digit"
-        time-zone-name="short"
-        weekday="long"
-    ></dx-formatted-date-time>
-
-    <span class="date-label">Day of Week with Time</span>
-    <dx-formatted-date-time
-        value="${date}"
-        hour="2-digit"
-        minute="2-digit"
-        weekday="long"
-    ></dx-formatted-date-time>
-`;

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

@@ -1,32 +0,0 @@
-import Grid from "dx/grid";
-import { createRenderComponent } from "utils-internal/tests";
-
-const TAG = "dx-grid";
-const render = createRenderComponent(TAG, Grid);
-
-describe(TAG, () => {
-    [
-        [4, "four", "dynamic"],
-        [8, "four", "dynamic"],
-        [7, "four", "dynamic"],
-        [3, "three", "dynamic"],
-        [6, "three", "dynamic"],
-        [5, "three", "dynamic"],
-        [2, "three", "dynamic"],
-        [1, "three", "dynamic"]
-    ].forEach(([numElements, calculatedColumns, columns]) =>
-        it(`choses ${calculatedColumns} columns when there are ${numElements} elements`, () => {
-            const element = render({ columns });
-            const slot: HTMLSlotElement =
-                element.shadowRoot.querySelector("slot");
-            const div = document.createElement("div");
-            slot.assignedElements = jest
-                .fn()
-                // @ts-ignore
-                .mockReturnValue(new Array(numElements).fill(div));
-            slot.dispatchEvent(new Event("slotchange"));
-
-            return expect(element.columns).toEqual(calculatedColumns);
-        })
-    );
-});

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

@@ -1,134 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-grid",
-    component: "dx-grid"
-};
-
-const createStyles = () => html`
-    <style>
-        h2 {
-            font-weight: bold;
-            font-size: 24px;
-            margin: 10px 0;
-        }
-        .placeholder {
-            background-color: #ababab;
-            border-radius: 8px;
-            height: 200px;
-        }
-    </style>
-`;
-
-export const Base = () => html`
-    ${createStyles()}
-    <h2>One Column</h2>
-
-    <dx-grid columns="one">
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-    </dx-grid>
-
-    <h2>Two Columns</h2>
-
-    <dx-grid columns="two">
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-    </dx-grid>
-
-    <h2>Two Columns (Slim Left)</h2>
-
-    <dx-grid columns="two-slim-left">
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-    </dx-grid>
-
-    <h2>Two Columns (Slim Right)</h2>
-
-    <dx-grid columns="two-slim-right">
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-    </dx-grid>
-
-    <h2>Three Columns</h2>
-
-    <dx-grid columns="three">
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-    </dx-grid>
-
-    <h2>Four Columns</h2>
-
-    <dx-grid columns="four">
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-    </dx-grid>
-
-    <h2>Dynamic (6 cards / 3 columns)</h2>
-
-    <dx-grid columns="dynamic">
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-    </dx-grid>
-
-    <h2>Dynamic (8 cards / 4 columns)</h2>
-
-    <dx-grid columns="dynamic">
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-    </dx-grid>
-
-    <h2>Dynamic (5 cards / 3 columns)</h2>
-
-    <dx-grid columns="dynamic">
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-    </dx-grid>
-
-    <h2>Dynamic (7 cards / 4 columns)</h2>
-
-    <dx-grid columns="dynamic">
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-    </dx-grid>
-
-    <h2>Dynamic (1 card / 3 columns)</h2>
-
-    <dx-grid columns="dynamic">
-        <div class="placeholder"></div>
-    </dx-grid>
-`;

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

@@ -1,82 +0,0 @@
-import GroupBio from "dx/groupBio";
-import { createRenderComponent } from "utils-internal/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-group-bio";
-const render = createRenderComponent(TAG, GroupBio);
-
-describe(TAG, () => {
-    it("renders with passed in props", () => {
-        const element = render(mockProps);
-
-        const img = element.shadowRoot.querySelector("img");
-        expect(img.getAttribute("src")).toEqual(mockProps.imgSrc);
-        expect(img.getAttribute("alt")).toEqual(mockProps.imgAlt);
-
-        const name = element.shadowRoot.querySelector(".name");
-        expect(name.textContent).toEqual(mockProps.name);
-
-        const position = element.shadowRoot.querySelector(".position");
-        expect(position.textContent).toEqual(mockProps.position);
-
-        const descriptors = element.shadowRoot.querySelector(".descriptors");
-        expect(descriptors.textContent).toContain(
-            mockProps.descriptor1 +
-                mockProps.descriptor2 +
-                mockProps.descriptor3
-        );
-
-        const profileLink = element.shadowRoot.querySelector("dx-button");
-        expect(profileLink).not.toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("doesn't render <img> when imgSrc is falsy", () => {
-        const element = render({
-            ...mockProps,
-            imgSrc: ""
-        });
-
-        const img = element.shadowRoot.querySelector("img");
-        expect(img).toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("doesn't render name when name is falsy", () => {
-        const element = render({
-            ...mockProps,
-            name: ""
-        });
-
-        const name = element.shadowRoot.querySelector(".name");
-        expect(name).toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("doesn't render position when position is falsy", () => {
-        const element = render({
-            ...mockProps,
-            position: ""
-        });
-
-        const position = element.shadowRoot.querySelector(".position");
-        expect(position).toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("doesn't render descriptors when variant is condensed", () => {
-        const element = render({
-            ...mockProps,
-            variant: "condensed"
-        });
-
-        const descriptors = element.shadowRoot.querySelector(".descriptors");
-        expect(descriptors).toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-});

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

@@ -1,15 +0,0 @@
-export default {
-    imgSrc: "https://placekitten.com/300/300",
-    imgAlt: "an adorable kitten",
-    imgSize: "large",
-    variant: "default",
-    name: "Mr. Mistoffelees",
-    position: "Chief Yarn Inspector",
-    descriptor1: "Lorem ipsum",
-    descriptor2: "Dolor sit",
-    descriptor3: "Amet",
-    profileHref: "https://salesforce.com",
-    profileText: "https://salesforce.com",
-    profileTarget: "_blank",
-    profileRel: "noopener"
-};

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

@@ -1,66 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-group-bio",
-    component: "dx-group-bio",
-    argTypes: {
-        imgSize: {
-            control: {
-                type: "select",
-                options: ["small", "medium", "large"]
-            }
-        },
-        variant: {
-            control: {
-                type: "select",
-                options: ["default", "condensed"]
-            }
-        }
-    }
-};
-
-const createStyles = () => html`
-    <style>
-        #root {
-            float: left;
-        }
-    </style>
-`;
-
-export const Base = () => html`
-    ${createStyles()}
-    <dx-group-bio
-        img-src="https://placekitten.com/300/300"
-        img-alt="an adorable kitten"
-        img-size="large"
-        variant="default"
-        name="mr. mistoffelees"
-        position="chief yarn inspector"
-        descriptor1="lorem ipsum"
-        descriptor2="dolor sit"
-        descriptor3="amet"
-        profile-href="https://salesforce.com"
-        profile-text="https://salesforce.com"
-        profile-target="_blank"
-        profile-rel="noopener"
-    ></dx-group-bio>
-`;
-
-export const Condensed = () => html`
-    ${createStyles()}
-    <dx-group-bio
-        img-src="https://placekitten.com/300/300"
-        img-alt="an adorable kitten"
-        img-size="large"
-        variant="condensed"
-        name="mr. mistoffelees"
-        position="chief yarn inspector"
-        descriptor1="lorem ipsum"
-        descriptor2="dolor sit"
-        descriptor3="amet"
-        profile-href="https://salesforce.com"
-        profile-text="https://salesforce.com"
-        profile-target="_blank"
-        profile-rel="noopener"
-    ></dx-group-bio>
-`;

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

@@ -1,69 +0,0 @@
-import GroupText from "dx/groupText";
-import { createRenderComponent } from "utils-internal/tests";
-import mockProps from "./mockProps";
-import Button from "dx/button";
-
-const TAG = "dx-group-text";
-const render = createRenderComponent(TAG, GroupText);
-
-describe(TAG, () => {
-    it("renders with no optional props", () => {
-        const element = render({
-            title: mockProps.title
-        });
-        const el: HTMLElement = element.shadowRoot.querySelector(".text-group");
-        expect(el).not.toBeNull();
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders with all props", () => {
-        const element = render(mockProps);
-
-        const el: HTMLElement = element.shadowRoot.querySelector(".text-group");
-        const titleEl: HTMLElement =
-            element.shadowRoot.querySelector(".text-group .title");
-        const titleAriaLevel = titleEl.getAttribute("aria-level");
-        const labelEl: HTMLElement = element.shadowRoot.querySelector(".label");
-        const subtitleEl: HTMLElement = element.shadowRoot.querySelector(
-            ".text-group span.subtitle"
-        );
-        const formattedDateTimeEl: HTMLElement =
-            element.shadowRoot.querySelector("dx-formatted-date-time");
-        const bodyEl: HTMLElement =
-            element.shadowRoot.querySelector(".text-group .body");
-        const buttonGroupEl: HTMLElement = element.shadowRoot.querySelector(
-            ".text-group .button-group"
-        );
-        const buttonEls: Array<Button> = element.shadowRoot.querySelectorAll(
-            ".button-group dx-button"
-        );
-
-        expect(el).not.toBeNull();
-        expect(titleEl).not.toBeNull();
-        expect(titleEl.textContent).toEqual(element.title);
-        expect(titleAriaLevel).toEqual("2");
-        expect(labelEl).not.toBeNull();
-        expect(subtitleEl).not.toBeNull();
-        expect(formattedDateTimeEl).not.toBeNull();
-        expect(bodyEl).not.toBeNull();
-        expect(bodyEl.textContent).toEqual(element.body);
-        expect(buttonGroupEl).not.toBeNull();
-        expect(buttonEls).toHaveLength(3);
-        expect(buttonEls[0].variant).toEqual("primary");
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders title with specified aria-level", () => {
-        const ariaLevel = "1";
-        const element = render({ ...mockProps, titleAriaLevel: ariaLevel });
-
-        const titleEl: HTMLElement =
-            element.shadowRoot.querySelector(".text-group .title");
-        const titleAriaLevel = titleEl.getAttribute("aria-level");
-
-        expect(titleAriaLevel).toEqual(ariaLevel);
-
-        return expect(element).toBeAccessible();
-    });
-});