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

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/tab/__tests__/mockProps.ts

@@ -1,4 +0,0 @@
-export default {
-    index: 0,
-    groupId: "1"
-};

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

@@ -1,71 +0,0 @@
-import Tab from "dx/tab";
-import { createRenderComponent } from "utils/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-tab";
-const render = createRenderComponent(TAG, Tab);
-
-const makeAccessibleTab = (element: HTMLElement) => {
-    const tablist = document.createElement("div");
-    document.body.appendChild(tablist);
-    tablist.setAttribute("role", "tablist");
-    tablist.appendChild(element);
-
-    const shadowRoot = element.shadowRoot;
-    const button = shadowRoot && shadowRoot.querySelector("button");
-    if (button) {
-        button.setAttribute("aria-label", "Label");
-    }
-};
-
-describe(TAG, () => {
-    it("renders an active tab", () => {
-        const element = render({
-            ...mockProps,
-            active: true
-        });
-        makeAccessibleTab(element);
-
-        const buttonEl = element.shadowRoot.querySelector("button");
-        expect(buttonEl).not.toBeNull();
-        // Using `startsWith` here instead of exactly matching the attribute
-        // because something is auto-suffixing the id with `-${nextIndex}`
-        expect(
-            buttonEl.getAttribute("id").startsWith("tabs--1--tab--0")
-        ).toEqual(true);
-        expect(
-            buttonEl
-                .getAttribute("aria-controls")
-                .startsWith("tabs--1--panel--0")
-        ).toEqual(true);
-        expect(buttonEl.getAttribute("aria-selected")).toEqual("true");
-        expect(buttonEl.getAttribute("tabindex")).toEqual("0");
-        expect(buttonEl.getAttribute("class")).toContain("tab-active");
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders an inactive panel", () => {
-        const element = render({
-            ...mockProps,
-            active: false
-        });
-        makeAccessibleTab(element);
-
-        const buttonEl = element.shadowRoot.querySelector("button");
-        expect(buttonEl).not.toBeNull();
-        expect(
-            buttonEl.getAttribute("id").startsWith("tabs--1--tab--0")
-        ).toEqual(true);
-        expect(
-            buttonEl
-                .getAttribute("aria-controls")
-                .startsWith("tabs--1--panel--0")
-        ).toEqual(true);
-        expect(buttonEl.getAttribute("aria-selected")).toEqual("false");
-        expect(buttonEl.getAttribute("tabindex")).toEqual("-1");
-        expect(buttonEl.getAttribute("class")).not.toContain("tab-active");
-
-        return expect(element).toBeAccessible();
-    });
-});

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

@@ -1,4 +0,0 @@
-export default {
-    index: 0,
-    groupId: "1"
-};

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

@@ -1,46 +0,0 @@
-import TabPanel from "dx/tabPanel";
-import { createRenderComponent } from "utils/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-tab-panel";
-const render = createRenderComponent(TAG, TabPanel);
-
-describe(TAG, () => {
-    it("renders an active panel", () => {
-        const element = render({
-            ...mockProps,
-            active: true
-        });
-
-        const divEl = element.shadowRoot.querySelector("div");
-        expect(divEl).not.toBeNull();
-        // Using `startsWith` here instead of exactly matching the attribute
-        // because something is auto-suffixing the id an incrementing `-${index}`
-        expect(
-            divEl.getAttribute("id").startsWith("tabs--1--panel--0")
-        ).toEqual(true);
-        expect(
-            divEl.getAttribute("aria-labelledby").startsWith("tabs--1--tab--0")
-        ).toEqual(true);
-        expect(divEl.hasAttribute("hidden")).toEqual(false);
-        expect(divEl.getAttribute("tabindex")).toEqual("0");
-        expect(divEl.getAttribute("class")).toContain("tabpanel-active");
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders an inactive panel", () => {
-        const element = render({
-            ...mockProps,
-            active: false
-        });
-
-        const divEl = element.shadowRoot.querySelector("div");
-        expect(divEl).not.toBeNull();
-        expect(divEl.hasAttribute("hidden")).toEqual(true);
-        expect(divEl.getAttribute("tabindex")).toEqual("-1");
-        expect(divEl.getAttribute("class")).not.toContain("tabpanel-active");
-
-        return expect(element).toBeAccessible();
-    });
-});

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

@@ -1,3 +0,0 @@
-export default {
-    tabs: [{ label: "Tab 1" }, { label: "Tab 2" }]
-};

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

@@ -1,47 +0,0 @@
-import Tabs from "dx/tabs";
-import { createRenderComponent } from "utils/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-tabs";
-const render = createRenderComponent(TAG, Tabs);
-
-describe(TAG, () => {
-    it("renders the container div", () => {
-        const component = render(mockProps);
-        const tabs = component.shadowRoot.querySelector("div");
-        expect(tabs).not.toBeNull();
-        return expect(component).toBeAccessible();
-    });
-
-    it("renders all tabs with correct active property", () => {
-        const component = render(mockProps);
-        const tabs = component.shadowRoot.querySelectorAll("dx-tab");
-        expect(tabs[0].active).toEqual(true);
-        expect(tabs[1].active).toEqual(false);
-        expect(tabs.length).toEqual(mockProps.tabs.length);
-        return expect(component).toBeAccessible();
-    });
-
-    it("renders with the initial index visible", () => {
-        const component = render({ ...mockProps, initialIndex: 1 });
-        const tabs = component.shadowRoot.querySelectorAll("dx-tab");
-        expect(tabs[0].active).toEqual(false);
-        expect(tabs[1].active).toEqual(true);
-        expect(tabs.length).toEqual(mockProps.tabs.length);
-        return expect(component).toBeAccessible();
-    });
-
-    it("changes active property on click", () => {
-        const component = render(mockProps);
-        const tabs = component.shadowRoot.querySelectorAll("dx-tab");
-        expect(tabs[0].active).toEqual(true);
-        expect(tabs[1].active).toEqual(false);
-        const mockChange = jest.fn();
-        component.addEventListener("change", mockChange);
-        tabs[1].dispatchEvent(new CustomEvent("select", { detail: 1 }));
-
-        expect(mockChange).toHaveBeenCalledTimes(1);
-        expect(mockChange.mock.calls[0][0].detail).toEqual(1);
-        return expect(component).toBeAccessible();
-    });
-});

package/src/modules/dx/tabs/tabs.css

@@ -1,7 +0,0 @@
-dx-tab {
-    margin-right: var(--dx-g-spacing-md);
-}
-
-dx-tab:last-of-type {
-    margin-right: 0;
-}

package/src/modules/dx/tabs/tabs.html

@@ -1,21 +0,0 @@
-<template>
-    <div>
-        <div role="tablist" part="tablist">
-            <template for:each={tabs} for:item="tab">
-                <dx-tab
-                    key={tab.index}
-                    onselect={onTabClick}
-                    group-id={groupId}
-                    index={tab.index}
-                    active={tab.active}
-                    small={tab.small}
-                >
-                    {tab.label}
-                </dx-tab>
-            </template>
-        </div>
-        <div part="tabpanels">
-            <slot onslotchange={onSlotChange}></slot>
-        </div>
-    </div>
-</template>

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

@@ -1,74 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-tabs",
-    component: "dx-tabs"
-};
-
-const tabsGen = (options = {}) => [
-    { label: "Label 1", ...options },
-    { label: "Label 2", ...options },
-    { label: "Label 3", ...options }
-];
-const tabs = JSON.stringify(tabsGen());
-const smallTabs = JSON.stringify(tabsGen({ small: true }));
-
-// prettier-ignore
-export const Base = () => html `
-    <dx-tabs tabs='${tabs}'>
-        <dx-tab-panel>
-            <h3>Title 1</h3>
-            <p>Content 1</p>
-        </dx-tab-panel>
-
-        <dx-tab-panel>
-            <h3>Title 2</h3>
-            <p>Content 2</p>
-        </dx-tab-panel>
-
-        <dx-tab-panel>
-            <h3>Title 3</h3>
-            <p>Content 3</p>
-        </dx-tab-panel>
-    </dx-tabs>
-
-    <br/>
-
-    <dx-tabs
-        tabs='${tabs}'
-        initial-index=2
-    >
-        <dx-tab-panel>
-            <h3>Title 1</h3>
-            <p>Content 1</p>
-        </dx-tab-panel>
-
-        <dx-tab-panel>
-            <h3>Title 2</h3>
-            <p>Content 2</p>
-        </dx-tab-panel>
-
-        <dx-tab-panel>
-            <h3>Title 3</h3>
-            <p>Content 3</p>
-        </dx-tab-panel>
-    </dx-tabs>
-
-    <br/>
-
-    <dx-tabs tabs='${smallTabs}'>
-        <dx-tab-panel>
-            <h3>Title 1</h3>
-            <p>Content 1</p>
-        </dx-tab-panel>
-
-        <dx-tab-panel>
-            <h3>Title 2</h3>
-            <p>Content 2</p>
-        </dx-tab-panel>
-
-        <dx-tab-panel>
-            <h3>Title 3</h3>
-            <p>Content 3</p>
-        </dx-tab-panel>
-    </dx-tabs>`;

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"
-        }
-    ]
-};

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

@@ -1,116 +0,0 @@
-import Button from "dx/button";
-import Toc from "dx/toc";
-import { createRenderComponent } from "utils/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) {
-                    console.log(e.className);
-                    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,66 +0,0 @@
-import Tooltip from "dx/tooltip";
-import { createRenderComponent } from "utils/tests";
-import createTooltip from "tippy.js";
-
-const mockSetProps = jest.fn();
-jest.mock("tippy.js", () =>
-    jest.fn().mockImplementation(() => {
-        return {
-            setProps: mockSetProps
-        };
-    })
-);
-
-const TAG = "dx-tooltip";
-const render = createRenderComponent(TAG, Tooltip);
-
-describe(TAG, () => {
-    afterEach(() => {
-        jest.clearAllMocks();
-    });
-
-    it("calls tippy constructor with correct parameters", () => {
-        const element = render({ label: "First Label", persist: true });
-
-        const slotContainer = element.shadowRoot.querySelector(
-            "div.slot-container"
-        );
-
-        expect(slotContainer).not.toBeNull();
-
-        expect(createTooltip).toBeCalledTimes(1);
-        expect(createTooltip).toBeCalledWith(slotContainer, {
-            content: "First Label",
-            placement: "top",
-            hideOnClick: false,
-            appendTo: slotContainer
-        });
-        expect(mockSetProps).not.toBeCalled();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("doesn't call tippy if label is not provided", () => {
-        const element = render();
-
-        const slotContainer = element.shadowRoot.querySelector(
-            "div.slot-container"
-        );
-        expect(slotContainer).not.toBeNull();
-
-        expect(createTooltip).not.toBeCalled();
-        expect(mockSetProps).not.toBeCalled();
-    });
-
-    it("changes label after creation", () => {
-        const element = render({ label: "First Label" });
-
-        expect(createTooltip).toBeCalledTimes(1);
-        element.label = "New label";
-
-        expect(createTooltip).toBeCalledTimes(1);
-        expect(mockSetProps).toBeCalledTimes(1);
-        expect(mockSetProps).toBeCalledWith({ content: "New label" });
-        return expect(element).toBeAccessible();
-    });
-});

package/src/modules/dx/tooltip/tippy.css

@@ -1 +0,0 @@
-/* Code generated by scripts/postinstall.js DO NOT EDIT */.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}