@salesforcedevs/dx-components 0.3.12 → 0.3.14-banner-alpha1

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,82 +0,0 @@
-import Breadcrumbs from "dx/breadcrumbs";
-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 element = render({ breadcrumbs: mockBreadcrumbs });
-
-        const breadcrumbs = element.shadowRoot.querySelectorAll(".breadcrumb");
-        expect(breadcrumbs.length).toEqual(mockBreadcrumbs.length);
-        return expect(element).toBeAccessible();
-    });
-
-    it("sets base href correctly", () => {
-        const baseHref = "/test";
-        const element = render({ baseHref });
-
-        const homeLink = element.shadowRoot.querySelector(".home-link");
-        expect(homeLink.href).toEqual(`http://localhost${baseHref}`);
-    });
-
-    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);
-        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 text content according to the api", async () => {
-        const title = "testtitle";
-        const element = render({ breadcrumbs: mockBreadcrumbs, title });
-
-        const titleEl = element.shadowRoot.querySelector("h7");
-        expect(titleEl.textContent).toEqual(title);
-    });
-
-    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,13 +0,0 @@
-import { html } from "lit-html";
-import { mockBreadcrumbs } from "./__tests__/mockProps";
-
-export default {
-    title: "dx/dx-breadcrumbs",
-    component: "dx-breadcrumbs"
-};
-
-export const Base = (args: any) => html`
-    <dx-breadcrumbs breadcrumbs="${args.breadcrumbs}"></dx-breadcrumbs>
-`;
-
-Base.args = { breadcrumbs: JSON.stringify(mockBreadcrumbs) };

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

@@ -1,107 +0,0 @@
-import Button from "dx/button";
-import ButtonTest from "tests/buttonTest";
-import { createRenderComponent } from "utils/tests";
-
-const TAG = "dx-button";
-const render = createRenderComponent(TAG, Button);
-const renderSlotted = createRenderComponent("dx-button-test", ButtonTest);
-
-describe(TAG, () => {
-    it("renders an empty button element with no icon", () => {
-        const element = render({ ariaLabel: "Default" });
-        const buttonEl = element.shadowRoot.querySelector("button");
-        const iconEl = element.shadowRoot.querySelector("dx-icon");
-        expect(buttonEl).not.toBeNull();
-        expect(iconEl).toBeNull();
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders button defaults if no overrides are specified", () => {
-        const element = render({ ariaLabel: "Default" });
-
-        const buttonEl = element.shadowRoot.querySelector("button");
-        const buttonElClasses = buttonEl.getAttribute("class");
-        expect(buttonEl.getAttribute("disabled")).toBeFalsy();
-        expect(buttonEl.getAttribute("type")).toBe("button");
-        expect(buttonElClasses).toContain("variant_primary");
-        expect(buttonElClasses).toContain("size-small");
-        expect(buttonElClasses).not.toContain("style-full");
-        expect(buttonElClasses).not.toContain("style-icon");
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("is accessible when the slot is used", () => {
-        const element = renderSlotted();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("can focus itself", () => {
-        const element = render({ ariaLabel: "Default" });
-
-        const buttonEl = element.shadowRoot.querySelector("button");
-
-        element.focus();
-
-        expect(element.shadowRoot.activeElement.isSameNode(buttonEl)).toEqual(
-            true
-        );
-    });
-
-    it("only shows a loading message when the component is in `loading` state", () => {
-        const element = render({ loading: true, iconSymbol: "search" });
-        const loadingEl = element.shadowRoot.querySelector(
-            ".temp-loading-message"
-        );
-        expect(loadingEl).not.toBeNull();
-        const spans = element.shadowRoot.querySelectorAll("span");
-        expect(spans.length).toEqual(1);
-        const icon = element.shadowRoot.querySelector("dx-icon");
-        expect(icon).toBeNull();
-        return expect(element).toBeAccessible();
-    });
-
-    it("can display an icon with the expected settings", () => {
-        const iconSize = "large";
-        const iconSymbol = "automate";
-        const ariaLabel = "Automate";
-        const element = render({
-            ariaLabel,
-            iconSize,
-            iconSymbol,
-            loading: false
-        });
-        const iconEl = element.shadowRoot.querySelector("dx-icon");
-        expect(iconEl).not.toBeNull();
-        expect(iconEl.sprite).toBe("utility");
-        expect(iconEl.size).toBe(iconSize);
-        expect(iconEl.symbol).toBe(iconSymbol);
-        return expect(element).toBeAccessible();
-    });
-
-    it("displays a link when given an href", () => {
-        const element = render({
-            ariaLabel: "Google",
-            href: "https://www.google.com"
-        });
-        expect(element.shadowRoot.querySelector("a")).toBeDefined();
-        expect(element.shadowRoot.querySelector("button")).toBeFalsy();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("applies correct font family class", () => {
-        const element = render({ ariaLabel: "Default" });
-        const buttonEl = element.shadowRoot.querySelector(".button");
-        const className = buttonEl.getAttribute("class");
-        expect(className.includes("font-display")).toBeTruthy();
-
-        const elementOther = render({ font: "sans" });
-        const buttonElOther = elementOther.shadowRoot.querySelector(".button");
-        const classNameOther = buttonElOther.getAttribute("class");
-        expect(classNameOther.includes("font-sans")).toBeTruthy();
-
-        return expect(element).toBeAccessible();
-    });
-});