@salesforcedevs/dx-components 0.26.2 → 0.28.0

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,140 +0,0 @@
-import Breadcrumbs from "dx/breadcrumbs";
-import Dropdown from "dx/dropdown";
-import { createRenderComponent } from "utils-internal/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>
-`;

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

@@ -1,107 +0,0 @@
-import Button from "dx/button";
-import ButtonTest from "test-components/buttonTest";
-import { createRenderComponent } from "utils-internal/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();
-    });
-});