@salesforcedevs/dx-components 0.26.1-alpha.12 → 0.26.1-alpha.17

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

@@ -1,129 +0,0 @@
-import Tab from "dx/tab";
-import Icon from "dx/icon";
-import { track } from "dx/instrumentation";
-import { createRenderComponent } from "utils-internal/tests";
-
-jest.mock("dx/instrumentation");
-
-const TAG = "dx-tab";
-const render = createRenderComponent(TAG, Tab);
-
-const PROPS = {
-    label: "documentation",
-    href: "/test"
-};
-
-describe(TAG, () => {
-    it("renders a single link with a label", () => {
-        const element = render(PROPS);
-
-        const links: Array<HTMLAnchorElement> =
-            element.shadowRoot.querySelectorAll("a");
-
-        expect(links.length).toEqual(1);
-        const [singleLink] = links;
-        expect(singleLink.href).toMatch(PROPS.href);
-        expect(singleLink.classList).toHaveLength(2);
-        expect(singleLink.classList).toContain("nav-list-item");
-        expect(singleLink.classList).toContain("nav-list-item_default");
-
-        const span: HTMLElement = singleLink.querySelector("span")!;
-        expect(span.textContent).toBe(PROPS.label);
-
-        expect(element.shadowRoot.querySelector("button")).toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders a link as active and small variant", () => {
-        const element = render({ ...PROPS, isActive: true, variant: "small" });
-
-        const link: HTMLAnchorElement = element.shadowRoot.querySelector("a");
-
-        expect(link.href).toMatch(PROPS.href);
-        expect(link.classList).toHaveLength(3);
-        expect(link.classList).toContain("nav-list-item");
-        expect(link.classList).toContain("nav-list-item_small");
-        expect(link.classList).toContain("state-active");
-
-        expect(element.shadowRoot.querySelector("button")).toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders a button if no href provided", () => {
-        const label = "test button";
-        const element = render({ label });
-
-        const buttons: Array<HTMLButtonElement> =
-            element.shadowRoot.querySelectorAll("button");
-
-        expect(buttons).toHaveLength(1);
-        const [singleButton] = buttons;
-
-        expect(singleButton.classList).toHaveLength(2);
-        expect(singleButton.classList).toContain("nav-list-item");
-        expect(singleButton.classList).toContain("nav-list-item_default");
-
-        const span: HTMLElement = singleButton.querySelector("span")!;
-        expect(span.textContent).toBe(label);
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders a button with an icon if useIcon is passed as true", () => {
-        const label = "test button";
-        const element = render({ label, useIcon: true });
-
-        const buttons: Array<HTMLButtonElement> =
-            element.shadowRoot.querySelectorAll("button");
-
-        expect(buttons).toHaveLength(1);
-        const [singleButton] = buttons;
-
-        const span: HTMLElement = singleButton.querySelector("span")!;
-        expect(span.textContent).toBe(label);
-
-        const icon: Element & Icon = singleButton.querySelector("dx-icon")!;
-        expect(icon).not.toBeNull();
-        expect(icon.size).toBe("small");
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders a button with label only if variant is small", () => {
-        const label = "test button";
-        const element = render({ label, variant: "small", useIcon: "true" });
-
-        const button: HTMLButtonElement =
-            element.shadowRoot.querySelector("button");
-
-        expect(button.classList).toHaveLength(2);
-        expect(button.classList).toContain("nav-list-item");
-        expect(button.classList).toContain("nav-list-item_small");
-
-        const span: HTMLElement = button.querySelector("span")!;
-        expect(span.textContent).toBe(label);
-
-        const icon: Element & Icon = button.querySelector("dx-icon")!;
-        expect(icon).not.toBeNull();
-        expect(icon.size).toBe("xsmall");
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("calls track when the link is clicked", () => {
-        const element = render(PROPS);
-
-        const link: HTMLElement = element.shadowRoot.querySelector("a");
-        expect(link).not.toBeNull();
-        link.click();
-
-        expect(track).toHaveBeenCalledTimes(1);
-        expect(track).toBeCalledWith(link, "custEv_topNavLinkClick", {
-            navHeading: PROPS.label,
-            clickText: PROPS.href,
-            pageLocation: window.location.pathname
-        });
-    });
-});

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

@@ -1,57 +0,0 @@
-import { html } from "lit-html";
-import { TabVariant } from "typings/custom";
-
-type StoryArgs = {
-    isActive: boolean;
-    label: string;
-    useIcon: boolean;
-    variant: TabVariant;
-};
-const VARIANT_OPTIONS: Array<TabVariant> = ["default", "small"];
-
-export default {
-    title: "dx/dx-tab",
-    component: "dx-tab",
-    argTypes: {
-        variant: {
-            control: {
-                type: "select",
-                options: VARIANT_OPTIONS
-            }
-        }
-    }
-};
-
-const Template = ({ variant, label, isActive, useIcon }: StoryArgs) => html`
-    <dx-tab
-        label="${label}"
-        is-active="${isActive}"
-        variant="${variant}"
-        use-icon="${useIcon}"
-    ></dx-tab>
-`;
-
-export const Base = (args: StoryArgs) => Template(args);
-Base.args = {
-    isActive: false,
-    useIcon: false,
-    label: "Banana",
-    variant: VARIANT_OPTIONS[0]
-};
-
-export const TabGroup = ({ variant }: { variant: TabVariant }) => html`
-    <style>
-        .container {
-            display: flex;
-            --dx-c-tab-horizontal-spacing: var(--dx-g-spacing-xs);
-        }
-    </style>
-    <nav class="container">
-        <dx-tab label="Banana" variant="${variant}"></dx-tab>
-        <dx-tab label="Apple" variant="${variant}"></dx-tab>
-    </nav>
-`;
-
-TabGroup.args = {
-    variant: VARIANT_OPTIONS[0]
-};

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

@@ -1,28 +0,0 @@
-export default {
-    title: "In this guide",
-    value: "intro",
-    options: [
-        {
-            label: "Introduction",
-            id: "intro",
-            anchor: "#test1"
-        },
-        {
-            label: "Deep dive: Registering the Record Class",
-            id: "deepdive",
-            anchor: "#test2"
-        },
-        {
-            label:
-                "Why build on Quip? This is an extra long blurb to test the toc wrapping ability",
-            id: "quip",
-            anchor: "#test3"
-        },
-        {
-            label:
-                "SomeLongExampleWordWithoutAnyBreaks and Then a Word",
-            id: "long-word",
-            anchor: "#test4"
-        }
-    ]
-};

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

@@ -1,109 +0,0 @@
-import Button from "dx/button";
-import Toc from "dx/toc";
-import { createRenderComponent } from "utils-internal/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-toc";
-const render = createRenderComponent(TAG, Toc);
-
-describe(TAG, () => {
-    it("renders", () => {
-        const element = render(mockProps);
-
-        const container: HTMLElement = element.shadowRoot.querySelector(".toc");
-        const renderedTitle: HTMLElement =
-            element.shadowRoot.querySelector("h2");
-        const button: Button =
-            element.shadowRoot.querySelector(".toggle-button");
-        expect(renderedTitle).not.toBeNull();
-        expect(container).not.toBeNull();
-        expect(renderedTitle.textContent).toEqual(mockProps.title);
-        expect(button.iconSymbol).toEqual("open_panel");
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders table of contents buttons, and the first one is selected", () => {
-        const element = render(mockProps);
-
-        const optionsListComponent: Array<HTMLElement> =
-            element.shadowRoot.querySelectorAll("a");
-        expect(optionsListComponent).toHaveLength(mockProps.options.length);
-        expect(optionsListComponent[0].className).toEqual(
-            "content-button selected"
-        );
-        return expect(element).toBeAccessible();
-    });
-
-    it('sends custom event "selectedcontent" with id on click', () => {
-        const element = render(mockProps);
-
-        const EVENT_DETAIL_PARAMETER = { name: mockProps.options[0].id };
-        const handler = jest.fn();
-        element.addEventListener("selectedcontent", handler);
-
-        return Promise.resolve().then(() => {
-            const linkEl = element.shadowRoot.querySelector("a");
-            linkEl.click();
-            expect(handler).toHaveBeenCalled();
-            expect(handler.mock.calls[0][0].detail).toEqual(
-                EVENT_DETAIL_PARAMETER
-            );
-            return expect(element).toBeAccessible();
-        });
-    });
-
-    it('Validate "value" recieved ', () => {
-        const element = render({ ...mockProps });
-
-        return Promise.resolve().then(() => {
-            const optionsListComponent: Array<HTMLElement> =
-                element.shadowRoot.querySelectorAll("a");
-            optionsListComponent.forEach((e) => {
-                if (e.getAttribute("contentid") === mockProps.value) {
-                    expect(e.className).toEqual("content-button selected");
-                }
-            });
-            return expect(element).toBeAccessible();
-        });
-    });
-
-    it('Validate no "value" recieved', () => {
-        const element = render({ ...mockProps, value: undefined });
-
-        return Promise.resolve().then(() => {
-            const buttons: Array<HTMLElement> =
-                element.shadowRoot.querySelectorAll("a");
-            expect(buttons[0].className).toEqual("content-button selected");
-            return expect(element).toBeAccessible();
-        });
-    });
-
-    it("toggles the hidden className on click of toggle button", () => {
-        const element = render(mockProps);
-
-        const linkToggle = element.shadowRoot.querySelector(".toggle-button");
-        linkToggle.click();
-        return Promise.resolve().then(() => {
-            const container = element.shadowRoot.querySelector(".toc_content");
-            expect(container).toBe(null);
-            return expect(element).toBeAccessible();
-        });
-    });
-
-    it("test list recieved as string ", () => {
-        const optionsListParameter = [
-            { label: "Introduction", id: "12312", anchor: "#test" }
-        ];
-        const element = render({
-            ...mockProps,
-            options: JSON.stringify(optionsListParameter)
-        });
-
-        return Promise.resolve().then(() => {
-            const optionListComponent: Array<HTMLElement> =
-                element.shadowRoot.querySelectorAll("a");
-            expect(optionListComponent).toHaveLength(element.options.length);
-            return expect(element).toBeAccessible();
-        });
-    });
-});

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

@@ -1,26 +0,0 @@
-import { html } from "lit-html";
-import mockProps from "./__tests__/mockProps";
-
-export default {
-    title: "dx/dx-toc",
-    component: "dx-toc"
-};
-
-const options = JSON.stringify(mockProps.options);
-// prettier-ignore
-export const Base = () => html`
-    <dx-toc
-        title="In this guide"
-        options="${options}"
-        value="intro"
-    >
-        <dx-button
-            slot="view-pdf"
-            href="http://www.google.com"
-            target="_blank"
-            variant="inline"
-            icon-symbol="new_window"
-        >
-            View PDF
-        </dx-button>
-    </dx-toc>`;

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

@@ -1,22 +0,0 @@
-import Tooltip from "dx/tooltip";
-import { createRenderComponent } from "utils-internal/tests";
-
-const TAG = "dx-tooltip";
-const render = createRenderComponent(TAG, Tooltip);
-
-describe(TAG, () => {
-    it("calls tippy constructor with correct parameters", () => {
-        const element = render({ label: "First Label", placement: "top" });
-
-        const slotContainer: HTMLElement =
-            element.shadowRoot.querySelector("div");
-
-        expect(slotContainer).not.toBeNull();
-        expect(slotContainer.getAttribute("data-microtip-position")).toEqual(
-            "top"
-        );
-        expect(slotContainer.getAttribute("aria-label")).toEqual("First Label");
-
-        return expect(element).toBeAccessible();
-    });
-});

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

@@ -1,46 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-tooltip",
-    component: "dx-tooltip",
-    argTypes: {
-        placement: {
-            defaultValue: "top",
-            control: {
-                type: "select",
-                options: [
-                    "top",
-                    "top-left",
-                    "top-right",
-                    "bottom",
-                    "bottom-left",
-                    "bottom-right",
-                    "left",
-                    "right"
-                ]
-            }
-        },
-        label: {
-            defaultValue: "Hello, world!",
-            control: {
-                type: "text"
-            }
-        }
-    }
-};
-
-// prettier-ignore
-const createStyles = () => html `
-    <style>
-        .story-container {
-            margin: 100px;
-        }
-    </style>`;
-
-// prettier-ignore
-export const Default = (args: any) => html `${createStyles()}
-    <div class="story-container">
-        <dx-tooltip label="${args.label}" placement="${args.placement}">
-            <button>Hover</button>
-        </dx-tooltip>
-    </div>`;

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

@@ -1,3 +0,0 @@
-export default {
-    topics: ["mobile", "performance"]
-};

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

@@ -1,31 +0,0 @@
-import Topics from "dx/topics";
-import { createRenderComponent } from "utils-internal/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-topics";
-const render = createRenderComponent(TAG, Topics);
-describe(TAG, () => {
-    it("renders", () => {
-        const component = render(mockProps);
-        expect(component.topics).toEqual(mockProps.topics);
-
-        const spans: Array<HTMLElement> =
-            component.shadowRoot.querySelectorAll("span");
-        expect(spans).toHaveLength(3);
-
-        const [expectedFirst, expectedSecond] = mockProps.topics;
-        const [first, dot, second] = spans;
-        expect(first.textContent).toBe(expectedFirst);
-        expect(second.textContent).toBe(expectedSecond);
-        expect(dot.classList).toContain("dot-separator");
-
-        return expect(component).toBeAccessible();
-    });
-
-    it("doesn't render any span if list is empty", () => {
-        const component = render();
-        const spans: Array<HTMLElement> =
-            component.shadowRoot.querySelectorAll("span");
-        expect(spans).toHaveLength(0);
-    });
-});

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

@@ -1,215 +0,0 @@
-import { InternalTreeNode, TreeNode } from "typings/custom";
-
-export const SAMPLE_TREE_ONE_LEVEL: TreeNode = {
-    label: "Getting started",
-    name: "started",
-    isExpanded: true,
-    children: [
-        {
-            label: "Introduction",
-            name: "introduction"
-        },
-        {
-            label: "Getting started",
-            name: "started-child"
-        },
-        {
-            label: "Authentication",
-            name: "authentication"
-        },
-        {
-            label: "Token",
-            name: "token"
-        },
-        {
-            label: "Error",
-            name: "error"
-        },
-        {
-            label: "Limits",
-            name: "limit"
-        },
-        {
-            label: "Release note",
-            name: "release-note"
-        }
-    ]
-};
-
-export const SAMPLE_TREE_MULTIPLE_LEVELS: TreeNode = {
-    label: "Einstein Vision",
-    name: "einstein-vision",
-    children: [
-        {
-            label: "Introduction",
-            name: "introduction"
-        },
-        {
-            label: "Terminology",
-            name: "terminology"
-        },
-        {
-            label: "Object detection quickstart for beginner",
-            name: "object-quickstart",
-            children: [
-                {
-                    label: "Scenario",
-                    name: "scenario",
-                    children: [
-                        {
-                            label: "Scenario A",
-                            name: "scenario-a"
-                        },
-                        {
-                            label: "Scenario B",
-                            name: "scenario-b"
-                        }
-                    ]
-                },
-                {
-                    label: "Prerequisites",
-                    name: "prerequisites"
-                }
-            ]
-        },
-        {
-            label: "Best Practices",
-            name: "best-practices"
-        }
-    ]
-};
-
-export const SAMPLE_TREE_WITH_LINKS: TreeNode = {
-    label: "Introduction",
-    name: "introduction",
-    isExpanded: true,
-    children: [
-        {
-            label: "Generate an OAuth Token",
-            name: "oauth-token",
-            link: {
-                href: "/oauth"
-            }
-        },
-        {
-            label: "Delete a Refresh Token",
-            name: "refresh-token",
-            link: {
-                href: "/refresh"
-            }
-        },
-        {
-            label: "Get API Usage",
-            name: "api-usage",
-            link: {
-                href: "/usage"
-            }
-        },
-        {
-            label: "Error",
-            name: "error",
-            link: {
-                href: "/error"
-            }
-        },
-        {
-            label: "External",
-            name: "external",
-            children: [
-                {
-                    label: "Salesforce",
-                    name: "salesforce",
-                    link: {
-                        href: "https://www.salesforce.com/",
-                        target: "_blank"
-                    }
-                },
-                {
-                    label: "Google",
-                    name: "google",
-                    link: {
-                        href: "https://www.google.com/",
-                        target: "_blank"
-                    }
-                }
-            ]
-        }
-    ]
-};
-
-export const SAMPLE_TREE_WITH_BADGES: TreeNode = {
-    label: "Getting started",
-    name: "started",
-    isExpanded: true,
-    children: [
-        {
-            label: "Introduction",
-            name: "introduction",
-            method: "post"
-        },
-        {
-            label: "Getting started",
-            name: "started-child",
-            method: "get"
-        },
-        {
-            label: "Authentication",
-            name: "authentication",
-            method: "delete"
-        },
-        {
-            label: "Token",
-            name: "token",
-            method: "patch"
-        },
-        {
-            label: "Error",
-            name: "error",
-            method: "put"
-        },
-        {
-            label: "Limits",
-            name: "limit",
-            method: "get"
-        },
-        {
-            label: "Release note",
-            name: "release-note",
-            method: "post"
-        }
-    ]
-};
-
-export const INITIALIZE_MOCK_PARAMETER: TreeNode = {
-    label: "Test Label",
-    name: "test-name",
-    isExpanded: true,
-    link: {
-        href: "https://salesforce.com",
-        target: "_blank"
-    }
-};
-
-export const INITIALIZE_MOCK_RESULT: InternalTreeNode = {
-    ...INITIALIZE_MOCK_PARAMETER,
-    key: "0",
-    level: 0,
-    children: []
-};
-
-export const MOCK_TILE_DETAIL = {
-    detail: {
-        key: "0.1",
-        name: "test name"
-    },
-    composed: true,
-    bubble: true
-};
-
-export const MOCK_ICON_DETAIL = {
-    detail: {
-        key: "0.1"
-    },
-    composed: true,
-    bubble: true
-};