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

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

@@ -1,139 +0,0 @@
-import { SAMPLE_TREES, SAMPLE_TREES_WITH_METHODS } from "./__tests__/mockProps";
-
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-sidebar",
-    component: "dx-sidebar",
-    argTypes: {
-        header: {
-            defaultValue: "Guides",
-            control: {
-                type: "text"
-            }
-        },
-        trees: {
-            defaultValue: SAMPLE_TREES,
-            control: {
-                type: "object"
-            }
-        },
-        value: {
-            defaultValue: "terminology",
-            control: {
-                type: "text"
-            }
-        }
-    }
-};
-
-const styles = (addStyles: string = "") => html`
-    <style>
-        dx-sidebar {
-            ${addStyles}
-        }
-
-        body.sb-main-padded.sb-show-main {
-            padding: 0;
-        }
-    </style>
-`;
-
-export const Base = (args: any) => html`
-    ${styles("--dx-c-sidebar-min-height: 100vh;")}
-
-    <dx-sidebar
-        header="${args.header}"
-        trees="${JSON.stringify(args.trees)}"
-    ></dx-sidebar>
-`;
-
-export const WidthAndMinHeightVariables = (args: any) => html`
-    ${styles(`
-        min-height: 500px;
-        --dx-c-sidebar-width: 400px;
-        --dx-c-sidebar-min-height: 500px;
-    `)}
-
-    <dx-sidebar
-        header="${args.header}"
-        trees="${JSON.stringify(args.trees)}"
-    ></dx-sidebar>
-`;
-
-export const WidthDrivenByContainer = (args: any) => html`
-    ${styles(`
-        display: block;
-        --dx-c-sidebar-min-height: 500px;
-        --dx-c-sidebar-width: unset;
-    `)}
-
-    <style>
-        @media screen and (min-width: 768px) {
-            .container {
-                width: 40%;
-            }
-        }
-    </style>
-    <div class="container">
-        <dx-sidebar
-            header="${args.header}"
-            trees="${JSON.stringify(args.trees)}"
-            value="${args.value}"
-        ></dx-sidebar>
-    </div>
-`;
-
-export const WithBadges = (args: any) => html`
-    ${styles("--dx-c-sidebar-min-height: 500px;")}
-
-    <div class="container">
-        <dx-sidebar
-            header="${args.header}"
-            trees="${JSON.stringify(SAMPLE_TREES_WITH_METHODS)}"
-            value="${args.value}"
-        ></dx-sidebar>
-    </div>
-`;
-
-export const PositionSticky = ({ header, trees, value }: any) => html`
-    ${styles(`
-        display: block;
-        position: sticky;
-        height: 100vh;
-
-        --dx-c-sidebar-height: 100%;
-        --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-lg);
-    `)}
-    <dx-sidebar
-        header="${header}"
-        trees="${JSON.stringify(trees)}"
-        value="${value}"
-    ></dx-sidebar>
-`;
-
-export const UseSlot = ({ header, trees, value }: any) => html`
-    ${styles(`
-        display: block;
-        position: sticky;
-        height: 100vh;
-
-        --dx-c-sidebar-height: 100%;
-        --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-lg);
-        --dx-c-sidebar-width: 300px;
-    `)}
-
-    <style>
-        span {
-            margin-left: auto;
-        }
-    </style>
-
-    <dx-sidebar
-        header="${header}"
-        trees="${JSON.stringify(trees)}"
-        value="${value}"
-    >
-        <span slot="header">I'm in the sidebar</span>
-    </dx-sidebar>
-`;

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

@@ -1,124 +0,0 @@
-import Socials from "dx/socials";
-import IconBadge from "dx/iconBadge";
-import { createRenderComponent } from "utils/tests";
-
-const TAG = "dx-socials";
-const render = createRenderComponent(TAG, Socials);
-
-const TEST_URL = encodeURIComponent(window.location.href);
-
-describe(TAG, () => {
-    const originalConsole = global.console;
-
-    beforeAll(() => {
-        global.console = { ...global.console, error: jest.fn() };
-    });
-
-    afterEach(() => {
-        jest.clearAllMocks();
-    });
-
-    afterAll(() => {
-        global.console = originalConsole;
-    });
-
-    it("renders dx-icon-badge for each social link", () => {
-        const component = render();
-
-        const links: Array<HTMLAnchorElement> = component.shadowRoot.querySelectorAll(
-            "a"
-        );
-        expect(links).toHaveLength(3);
-
-        const [facebookLink, twitterLink, linkedinLink] = links;
-
-        expect(facebookLink.href).toBe(
-            `https://www.facebook.com/sharer/sharer.php?u=${TEST_URL}`
-        );
-        expect(facebookLink.target).toBe("_blank");
-        expect(facebookLink.title).toBe("Facebook");
-
-        expect(twitterLink.href).toBe(
-            `https://twitter.com/intent/tweet?url=${TEST_URL}&text=${document.title}`
-        );
-        expect(twitterLink.target).toBe("_blank");
-        expect(twitterLink.title).toBe("Twitter");
-
-        expect(linkedinLink.href).toBe(
-            `http://www.linkedin.com/sharing/share-offsite/?url=${TEST_URL}`
-        );
-        expect(linkedinLink.target).toBe("_blank");
-        expect(linkedinLink.title).toBe("Linkedin");
-
-        const iconBadge: Array<IconBadge> = component.shadowRoot.querySelectorAll(
-            "dx-icon-badge"
-        );
-        expect(iconBadge).toHaveLength(3);
-
-        const [facebookIcon, twitterIcon, linkedinIcon] = iconBadge;
-
-        expect(facebookIcon.sprite).toBe("brand");
-        expect(facebookIcon.symbol).toBe("facebook-f");
-
-        expect(twitterIcon.sprite).toBe("brand");
-        expect(twitterIcon.symbol).toBe("twitter");
-
-        expect(linkedinIcon.sprite).toBe("brand");
-        expect(linkedinIcon.symbol).toBe("linkedin-in");
-
-        const detailSection = component.shadowRoot.querySelector(
-            ".details-section"
-        );
-        expect(detailSection).toBeNull();
-
-        return expect(component).toBeAccessible();
-    });
-
-    it("renders the specified target for each 'a' tag", () => {
-        const expectedTarget = "_self";
-        const component = render({ linksTarget: expectedTarget });
-
-        const links: Array<HTMLAnchorElement> = component.shadowRoot.querySelectorAll(
-            "a"
-        );
-        expect(links).toHaveLength(3);
-        links.forEach(({ target }) => expect(target).toBe(expectedTarget));
-
-        expect(global.console.error).not.toBeCalled();
-
-        return expect(component).toBeAccessible();
-    });
-
-    it("doesn't update target if not valid", () => {
-        const testTarget = "not_valid_at_all";
-        const component = render({ linksTarget: testTarget });
-
-        const links: Array<HTMLAnchorElement> = component.shadowRoot.querySelectorAll(
-            "a"
-        );
-        expect(links).toHaveLength(3);
-        links.forEach(({ target }) => expect(target).toBe("_blank"));
-
-        expect(global.console.error).toBeCalledTimes(1);
-        expect(global.console.error).toBeCalledWith(
-            "Invalid links target, valid options are: _self, _blank, _parent, _top, framename"
-        );
-
-        return expect(component).toBeAccessible();
-    });
-
-    it("renders details section", () => {
-        const component = render({ details: "Test|Another Test" });
-
-        const details: Array<HTMLElement> = component.shadowRoot.querySelectorAll(
-            ".details-section span"
-        );
-        expect(details).toHaveLength(2);
-
-        const [testDetail, anotherTestDetail] = details;
-        expect(testDetail.textContent).toBe("Test");
-        expect(anotherTestDetail.textContent).toBe("Another Test");
-
-        return expect(component).toBeAccessible();
-    });
-});

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

@@ -1,24 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-socials",
-    component: "dx-socials"
-};
-
-export const Base = () => html` <dx-socials></dx-socials> `;
-
-export const SocialWithTarget = ({ target }: any) => html`
-    <dx-socials links-target="${target}"></dx-socials>
-`;
-
-SocialWithTarget.args = {
-    target: "_top"
-};
-
-export const SocialWithDetails = ({ details }: any) => html`
-    <dx-socials details="${details}"></dx-socials>
-`;
-
-SocialWithDetails.args = {
-    details: "jan 18, 2021|12 min read"
-};

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

@@ -1,37 +0,0 @@
-import Spinner from "dx/spinner";
-import { createRenderComponent } from "utils/tests";
-
-const TAG = "dx-spinner";
-const render = createRenderComponent(TAG, Spinner);
-
-describe(TAG, () => {
-    it("renders", () => {
-        const component: HTMLElement = render();
-
-        expect(component.classList).toHaveLength(1);
-        expect(component.classList).toContain("spinner_container");
-        const container = component.shadowRoot!.querySelector(".spinner");
-
-        expect(container).not.toBeNull();
-        expect(container?.classList).toHaveLength(2);
-        expect(container?.classList).toContain(`spinner_medium`);
-
-        return expect(component).toBeAccessible();
-    });
-
-    it("renders with size and variant", () => {
-        const size = "large";
-        const variant = "inverse";
-        const component: HTMLElement = render({
-            size,
-            variant
-        });
-
-        const container = component.shadowRoot?.querySelector(".spinner");
-        expect(container?.classList).toHaveLength(3);
-        expect(container?.classList).toContain(`spinner_${size}`);
-        expect(container?.classList).toContain(`spinner_${variant}`);
-
-        return expect(component).toBeAccessible();
-    });
-});

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

@@ -1,69 +0,0 @@
-import { html } from "lit-html";
-import { SpinnerSize, SpinnerVariant } from "typings/custom";
-
-type SpinnerStoryArgs = {
-    size: SpinnerSize;
-    variant: SpinnerVariant;
-};
-
-const sizeOptions: Array<SpinnerSize> = ["medium", "x-small", "small", "large"];
-const variantOptions: Array<SpinnerVariant> = ["base", "brand", "inverse"];
-const variantToBackgroundColor: { [key: string]: string } = {
-    inverse: "black"
-};
-
-export default {
-    title: "dx/dx-spinner",
-    component: "dx-spinner",
-    argTypes: {
-        size: {
-            control: {
-                type: "select",
-                options: sizeOptions
-            }
-        },
-        variant: {
-            control: {
-                type: "select",
-                options: variantOptions
-            }
-        }
-    }
-};
-
-const style = (variant: SpinnerVariant = "base") => html`
-    <style>
-        .spinner-wrapper {
-            position: relative;
-            height: 100vh;
-            background-color: ${variantToBackgroundColor[variant] || "white"};
-        }
-    </style>
-`;
-
-const [defaultSize] = sizeOptions;
-const [defaultVariant] = variantOptions;
-
-const Template = ({ size, variant }: SpinnerStoryArgs) => html`
-    ${style(variant)}
-    <div class="spinner-wrapper">
-        <dx-spinner
-            size="${size || defaultSize}"
-            variant="${variant || defaultVariant}"
-        ></dx-spinner>
-    </div>
-`;
-
-export const Base = Template;
-
-export const BrandLarge = (args: SpinnerStoryArgs) => Template(args);
-BrandLarge.args = {
-    size: "large",
-    variant: "brand"
-};
-
-export const InverseSmall = (args: SpinnerStoryArgs) => Template(args);
-InverseSmall.args = {
-    size: "small",
-    variant: "inverse"
-};

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/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,22 +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"
-        }
-    ]
-};