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

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

@@ -1,31 +0,0 @@
-import Banner from "dx/banner";
-import { createRenderComponent } from "utils/tests";
-
-const TAG = "dx-banner";
-const render = createRenderComponent(TAG, Banner);
-
-describe(TAG, () => {
-    it("renders banner component", () => {
-        const element = render();
-
-        const innerContainer = element.shadowRoot.querySelectorAll(
-            ".container_inner"
-        );
-
-        expect(innerContainer).not.toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders custom banner markup in the banner", () => {
-        const element = render({ bannerMarkup: "Give feedback about our new site" });
-
-        const bannerContainer = element.shadowRoot.querySelector(
-            ".info-container"
-        );
-
-        return Promise.resolve().then(() => {
-            expect(bannerContainer.innerHTML).toContain('Give feedback about our new site')
-        });
-    });
-});

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

@@ -1,49 +0,0 @@
-import BrandThemeProvider, { toCss } from "dx/brandThemeProvider";
-import { createRenderComponent } from "utils/tests";
-import brandCssVars from "../brandCssVars";
-
-const TAG = "dx-brand-theme-provider";
-const render = createRenderComponent(TAG, BrandThemeProvider);
-
-describe(TAG, () => {
-    it("renders", () => {
-        const element = render();
-        return expect(element).toBeAccessible();
-    });
-
-    it("all css variables are accounted for", () => {
-        const brand = "commerce";
-        const element = render({ brand });
-
-        const style = element.shadowRoot.querySelector("style");
-        const { textContent } = style.childNodes[0];
-        brandCssVars.forEach((v: string) => {
-            expect(textContent).toContain(
-                `${v}: var(${v.replace("current", brand)});`
-            );
-        });
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders a style element with textcontent that matches the output from the tocss fn()", () => {
-        const brand = "commerce";
-        const element = render({ brand });
-
-        const expectedTextContent = toCss(brand);
-        const style = element.shadowRoot.querySelector("style");
-        const { textContent } = style.childNodes[0];
-        expect(textContent).toEqual(expectedTextContent);
-        return expect(element).toBeAccessible();
-    });
-
-    it("keeps one style element with one childnode at a time", () => {
-        const brand = "commerce";
-        const element = render({ brand });
-
-        const styles = element.shadowRoot.querySelectorAll("style");
-        expect(styles.length).toEqual(1);
-        expect(Array.from(styles[0].childNodes).length).toEqual(1);
-        return expect(element).toBeAccessible();
-    });
-});

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

@@ -1,321 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-brand-theme-provider",
-    component: "dx-brand-theme-provider"
-};
-
-const style = () => html` <style>
-    body {
-        padding: 0 !important;
-    }
-    #block {
-        padding: 16px;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: flex-start;
-        font-size: 12px;
-        margin-bottom: 4px;
-        box-shadow: 0 2px 2px 0px rgba(0, 0, 0, 0.07);
-    }
-    #block > span > span {
-        color: grey;
-    }
-</style>`;
-
-// prettier-ignore
-export const Service = () => html` ${style()}
-    <dx-brand-theme-provider brand="service">
-        <div id="block" style="background: var(--dx-g-brand-current-color)">
-            <span>
-                --dx-g-brand-current-color:
-                <span>--dx-g-brand-service-color</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-color-background)"
-        >
-            <span>
-                --dx-g-brand-current-color-background:
-                <span>--dx-g-brand-service-color-background</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-color-background-2)"
-        >
-            <span>
-                --dx-g-brand-current-color-background-2:
-                <span>--dx-g-brand-service-color-background-2</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-button-color-background-inactive)"
-        >
-            <span>
-                --dx-g-brand-current-button-color-background-inactive:
-                <span>--dx-g-brand-service-button-color-background-inactive</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-button-color-background-inactive-hover)"
-        >
-            <span>
-                --dx-g-brand-current-button-color-background-inactive-hover:
-                <span>--dx-g-brand-service-button-color-background-inactive-hover</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-button-color-background-active)"
-        >
-            <span>
-                --dx-g-brand-current-button-color-background-active:
-                <span>--dx-g-brand-service-button-color-background-active</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-color-border)"
-        >
-            <span>
-                --dx-g-brand-current-color-border:
-                <span>--dx-g-brand-service-color-border</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-color-border-2)"
-        >
-            <span>
-                --dx-g-brand-current-color-border-2:
-                <span>--dx-g-brand-service-color-border-2</span>
-            </span>
-        </div>
-    </dx-brand-theme-provider>`;
-
-// prettier-ignore
-export const Partners = () => html` ${style()}
-    <dx-brand-theme-provider brand="partners">
-        <div id="block" style="background: var(--dx-g-brand-current-color)">
-            <span>
-                --dx-g-brand-current-color:
-                <span>--dx-g-brand-partners-color</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-color-background)"
-        >
-            <span>
-                --dx-g-brand-current-color-background:
-                <span>--dx-g-brand-partners-color-background</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-color-background-2)"
-        >
-            <span>
-                --dx-g-brand-current-color-background-2:
-                <span>--dx-g-brand-partners-color-background-2</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-button-color-background-inactive)"
-        >
-            <span>
-                --dx-g-brand-current-button-color-background-inactive:
-                <span>--dx-g-brand-partners-button-color-background-inactive</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-button-color-background-inactive-hover)"
-        >
-            <span>
-                --dx-g-brand-current-button-color-background-inactive-hover:
-                <span>--dx-g-brand-partners-button-color-background-inactive-hover</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-button-color-background-active)"
-        >
-            <span>
-                --dx-g-brand-current-button-color-background-active:
-                <span>--dx-g-brand-partners-button-color-background-active</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-color-border)"
-        >
-            <span>
-                --dx-g-brand-current-color-border:
-                <span>--dx-g-brand-partners-color-border</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-color-border-2)"
-        >
-            <span>
-                --dx-g-brand-current-color-border-2:
-                <span>--dx-g-brand-partners-color-border-2</span>
-            </span>
-        </div>
-    </dx-brand-theme-provider>`;
-
-// prettier-ignore
-export const Industries = () => html` ${style()}
-    <dx-brand-theme-provider brand="industries">
-        <div id="block" style="background: var(--dx-g-brand-current-color)">
-            <span>
-                --dx-g-brand-current-color:
-                <span>--dx-g-brand-industries-color</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-color-background)"
-        >
-            <span>
-                --dx-g-brand-current-color-background:
-                <span>--dx-g-brand-industries-color-background</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-color-background-2)"
-        >
-            <span>
-                --dx-g-brand-current-color-background-2:
-                <span>--dx-g-brand-industries-color-background-2</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-button-color-background-inactive)"
-        >
-            <span>
-                --dx-g-brand-current-button-color-background-inactive:
-                <span>--dx-g-brand-industries-button-color-background-inactive</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-button-color-background-inactive-hover)"
-        >
-            <span>
-                --dx-g-brand-current-button-color-background-inactive-hover:
-                <span>--dx-g-brand-industries-button-color-background-inactive-hover</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-button-color-background-active)"
-        >
-            <span>
-                --dx-g-brand-current-button-color-background-active:
-                <span>--dx-g-brand-industries-button-color-background-active</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-color-border)"
-        >
-            <span>
-                --dx-g-brand-current-color-border:
-                <span>--dx-g-brand-industries-color-border</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-color-border-2)"
-        >
-            <span>
-                --dx-g-brand-current-color-border-2:
-                <span>--dx-g-brand-industries-color-border-2</span>
-            </span>
-        </div>
-    </dx-brand-theme-provider>`;
-
-// prettier-ignore
-export const Sales = () => html ` ${style()}
-    <dx-brand-theme-provider>
-        <div id="block" style="background: var(--dx-g-brand-current-color)">
-            <span>
-                --dx-g-brand-current-color:
-                <span>--dx-g-brand-sales-color</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-color-background)"
-        >
-            <span>
-                --dx-g-brand-current-color-background:
-                <span>--dx-g-brand-sales-color-background</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-color-background-2)"
-        >
-            <span>
-                --dx-g-brand-current-color-background-2:
-                <span>--dx-g-brand-sales-color-background-2</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-button-color-background-inactive)"
-        >
-            <span>
-                --dx-g-brand-current-button-color-background-inactive:
-                <span>--dx-g-brand-sales-button-color-background-inactive</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-button-color-background-inactive-hover)"
-        >
-            <span>
-                --dx-g-brand-current-button-color-background-inactive-hover:
-                <span>--dx-g-brand-sales-button-color-background-inactive-hover</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-button-color-background-active)"
-        >
-            <span>
-                --dx-g-brand-current-button-color-background-active:
-                <span>--dx-g-brand-sales-button-color-background-active</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-color-border)"
-        >
-            <span>
-                --dx-g-brand-current-color-border:
-                <span>--dx-g-brand-sales-color-border</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-color-border-2)"
-        >
-            <span>
-                --dx-g-brand-current-color-border-2:
-                <span>--dx-g-brand-sales-color-border-2</span>
-            </span>
-        </div>
-    </dx-brand-theme-provider>`;

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

@@ -1,143 +0,0 @@
-import Breadcrumbs from "dx/breadcrumbs";
-import Dropdown from "dx/dropdown";
-import { createRenderComponent } from "utils/tests";
-import { mockPathname, mockBreadcrumbs, mockNavItems } from "./mockProps";
-
-const TAG = "dx-breadcrumbs";
-const render = createRenderComponent(TAG, Breadcrumbs);
-
-describe(TAG, () => {
-    it("renders the correct number of crumbs", () => {
-        const expectedOptionsLength = mockBreadcrumbs.length - 1;
-
-        const element = render({ breadcrumbs: mockBreadcrumbs });
-
-        const navElement: HTMLElement = element.shadowRoot.querySelector("nav");
-        expect(navElement).not.toBeNull();
-        expect(navElement.classList).toHaveLength(0);
-
-        const breadcrumbs: Array<HTMLElement> = element.shadowRoot.querySelectorAll(
-            ".breadcrumb"
-        );
-        const { length } = breadcrumbs;
-        expect(breadcrumbs).toHaveLength(length);
-        expect(
-            Array.from(breadcrumbs)
-                .splice(0, length - 1)
-                .every(({ tagName }) => tagName === "A")
-        ).toBe(true);
-        expect(breadcrumbs[length - 1].tagName).toBe("SPAN");
-
-        const dropdown: Dropdown = element.shadowRoot.querySelector(
-            "dx-dropdown"
-        );
-        expect(dropdown).not.toBeNull();
-        expect(dropdown.options).toHaveLength(expectedOptionsLength);
-
-        dropdown.options.forEach((option, index) => {
-            const { href, label } = mockBreadcrumbs[index];
-            expect(option.label).toBe(label);
-            expect(option.id).toBe(href);
-            expect(option.link?.href).toBe(href);
-        });
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders with current location hidden", () => {
-        const element = render({
-            breadcrumbs: mockBreadcrumbs,
-            hideCurrentLocation: true
-        });
-
-        const navElement: HTMLElement = element.shadowRoot.querySelector("nav");
-        expect(navElement).not.toBeNull();
-        expect(navElement.classList).toHaveLength(1);
-        expect(navElement.classList).toContain("hide-current-location");
-
-        const breadcrumbs: Array<HTMLElement> = element.shadowRoot.querySelectorAll(
-            ".breadcrumb"
-        );
-        expect(breadcrumbs).toHaveLength(mockBreadcrumbs.length - 1);
-        expect(
-            Array.from(breadcrumbs).every(({ tagName }) => tagName === "A")
-        ).toBe(true);
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders with state-long class when passing truncate as true and has to many breadcrumbs", () => {
-        const element = render({
-            breadcrumbs: mockBreadcrumbs,
-            truncate: true
-        });
-
-        const navElement: HTMLElement = element.shadowRoot.querySelector("nav");
-        expect(navElement).not.toBeNull();
-        expect(navElement.classList).toHaveLength(1);
-        expect(navElement.classList[0]).toBe("state-long");
-    });
-
-    it("sets base href and title correctly", () => {
-        const baseHref = "/test";
-        const title = "testtitle";
-        const element = render({ baseHref, title, logo: true });
-
-        const logo = element.shadowRoot.querySelector("dx-logo");
-        expect(logo).not.toBeNull();
-        expect(logo.href).toEqual(baseHref);
-        expect(logo.label).toEqual(title);
-    });
-
-    it("if not given breadcrumbs, parses the pathname and renders the correct number of links, each with the correct href", () => {
-        const element = render({
-            navItems: mockNavItems,
-            pathname: mockPathname
-        });
-
-        const breadcrumbs = element.shadowRoot.querySelectorAll(".breadcrumb");
-        expect(breadcrumbs.length).toEqual(mockBreadcrumbs.length);
-
-        breadcrumbs.forEach((breadcrumb: HTMLLinkElement, i: number) => {
-            const mockBreadcrumb = mockBreadcrumbs[i];
-            if (i < breadcrumbs.length - 1) {
-                const href = breadcrumb.getAttribute("href");
-                expect(breadcrumb.tagName).toEqual("A");
-                expect(href).toEqual(mockBreadcrumb.href);
-            } else {
-                expect(breadcrumb.tagName).toEqual("SPAN");
-            }
-        });
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders no links or spans when given an empty pathname", () => {
-        const element = render({ pathname: "/" });
-
-        const els = element.shadowRoot.querySelectorAll(
-            ".breadcrumb .breadcrumb-slash span"
-        );
-        expect(els.length).toEqual(0);
-
-        expect(element.shadowRoot.querySelector("dx-dropdown")).toBeNull();
-        return expect(element).toBeAccessible();
-    });
-
-    it("Successfully sets a breadcrumb label", () => {
-        const element = render({
-            pathname: mockPathname,
-            navItems: mockNavItems
-        });
-        const breadcrumbs = element.shadowRoot.querySelectorAll(".breadcrumb");
-        expect(breadcrumbs[breadcrumbs.length - 1].textContent).toEqual(
-            "New Label"
-        );
-    });
-
-    it("renders correctly with duplicate path segments", async () => {
-        const element = render({ pathname: "/home/home/home.html" });
-
-        const breadcrumbs = element.shadowRoot.querySelectorAll(".breadcrumb");
-        expect(breadcrumbs.length).toEqual(3);
-    });
-});

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

@@ -1,28 +0,0 @@
-import { Option } from "typings/custom";
-
-export const mockPathname = "/piece1/piece2/piece3/piece4/piece5";
-
-export const mockBreadcrumbs = [
-    { href: "/piece1", label: "Piece 1" },
-    { href: "/piece1/piece2", label: "Piece 2" },
-    { href: "/piece1/piece2/piece3", label: "Piece 3" },
-    { href: "/piece1/piece2/piece3/piece4", label: "Piece 4" },
-    { href: "/piece1/piece2/piece3/piece4/piece5", label: "Piece 5" }
-];
-
-export const mockNavItems: Option[] = [
-    { id: "1", label: "Label 1" },
-    { id: "2", label: "Label 2" },
-    {
-        id: "3",
-        label: "New Label",
-        link: { href: mockPathname, target: "_blank" }
-    },
-    { id: "4", label: "Label 4" },
-    {
-        id: "5",
-        label: "Label 5",
-        link: { href: "https://www.heroku.com/", target: "_parent" },
-        options: [{ id: "5.1", label: "Label 5.1", options: [] }]
-    }
-];

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

@@ -1,39 +0,0 @@
-import { html } from "lit-html";
-import { mockBreadcrumbs } from "./__tests__/mockProps";
-
-export default {
-    title: "dx/dx-breadcrumbs",
-    component: "dx-breadcrumbs",
-    argTypes: {
-        breadcrumbs: {
-            defaultValue: JSON.stringify(mockBreadcrumbs),
-            control: {
-                type: "text"
-            }
-        }
-    }
-};
-
-export const Base = (args: any) => html`
-    <dx-breadcrumbs breadcrumbs="${args.breadcrumbs}"></dx-breadcrumbs>
-`;
-
-export const HideCurrentLocation = (args: any) => html`
-    <dx-breadcrumbs
-        breadcrumbs="${args.breadcrumbs}"
-        hide-current-location="true"
-        truncate="true"
-    ></dx-breadcrumbs>
-`;
-
-export const autoBreadcrumbs = () => html`
-    <dx-breadcrumbs logo="true"></dx-breadcrumbs>
-`;
-
-export const WithLogo = (args: any) => html`
-    <dx-breadcrumbs
-        breadcrumbs="${args.breadcrumbs}"
-        logo="true"
-        truncate="true"
-    ></dx-breadcrumbs>
-`;