@salesforcedevs/dx-components 0.26.1-alpha0.4 → 0.26.2

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

@@ -0,0 +1,313 @@
+import Popover from "dx/popover";
+import PopoverTest from "test-components/popoverTest";
+import {
+    createRenderComponent,
+    mockSlottedElement
+} from "utils-internal/tests";
+import mockProps from "./mockProps";
+
+const TAG = "dx-popover";
+const render = createRenderComponent(TAG, Popover);
+
+const renderWithSlot = createRenderComponent("dx-popover-test", PopoverTest);
+
+describe(TAG, () => {
+    describe("render", () => {
+        const originalConsole = global.console;
+
+        beforeAll(() => {
+            global.console = { ...global.console, error: jest.fn() };
+        });
+
+        afterAll(() => {
+            global.console = originalConsole;
+        });
+
+        it("renders the container div when a targetElement is set", () => {
+            const component = render();
+
+            expect(console.error).not.toBeCalled();
+
+            const menuEl: HTMLElement =
+                component.shadowRoot.querySelector(".popover-container");
+            expect(menuEl).not.toBeNull();
+            expect(menuEl.classList).toHaveLength(1);
+
+            const popoverDiv: HTMLElement =
+                menuEl.querySelector("div.popover")!;
+            expect(popoverDiv).not.toBeNull();
+            expect(popoverDiv.classList).toHaveLength(1);
+
+            return expect(component).toBeAccessible();
+        });
+
+        it("renders with api properties", () => {
+            const component = render(mockProps);
+            expect(console.error).not.toBeCalled();
+            const menuEl: HTMLElement =
+                component.shadowRoot.querySelector(".popover-container");
+            expect(menuEl).not.toBeNull();
+            expect(menuEl.classList).toHaveLength(1);
+
+            const popoverDiv: HTMLElement =
+                menuEl.querySelector("div.popover")!;
+            expect(popoverDiv).not.toBeNull();
+            expect(popoverDiv.classList).toHaveLength(4);
+            expect(popoverDiv.classList).toContain(
+                `popover-offset-${mockProps.offset}`
+            );
+            expect(popoverDiv.classList).toContain("popover-small");
+            expect(popoverDiv.classList).toContain("popover-overridewidth");
+            expect(popoverDiv.ariaLabel).toBe(mockProps.ariaLabel);
+            expect(popoverDiv.style.width).toBe(mockProps.width);
+
+            return expect(component).toBeAccessible();
+        });
+
+        it("renders with fullwidth class", () => {
+            const component = render({ fullWidth: true });
+
+            expect(console.error).not.toBeCalled();
+
+            const popoverDiv: HTMLElement =
+                component.shadowRoot.querySelector("div.popover");
+            expect(popoverDiv.classList).toHaveLength(2);
+            expect(popoverDiv.classList).toContain("popover-fullwidth");
+        });
+
+        it("renders logs an error if fullWidth and width are trithy", () => {
+            const component = render({ ...mockProps, fullWidth: true });
+
+            expect(console.error).toBeCalledTimes(1);
+            expect(console.error).toBeCalledWith(
+                'The "width" and "full-width" properties cannot be provided simultaneously.'
+            );
+
+            const popoverDiv: HTMLElement =
+                component.shadowRoot.querySelector("div.popover");
+            expect(popoverDiv.style).not.toBeNull();
+            expect(popoverDiv.classList).toHaveLength(5);
+            expect(popoverDiv.classList).toContain(
+                `popover-offset-${mockProps.offset}`
+            );
+            expect(popoverDiv.classList).toContain("popover-small");
+            expect(popoverDiv.classList).toContain("popover-overridewidth");
+            expect(popoverDiv.classList).toContain("popover-fullwidth");
+        });
+
+        it("is accessible with its slotted control", async () => {
+            const component = renderWithSlot();
+
+            return expect(component).toBeAccessible();
+        });
+
+        it("correctly onboards its slotted control", async () => {
+            const component = renderWithSlot();
+
+            await Promise.resolve();
+
+            const button = component.shadowRoot.querySelector("dx-button");
+            const hasPopup = button.getAttribute("aria-haspopup");
+            expect(hasPopup).toEqual("true");
+        });
+
+        it("doesn't render menu content before interaction", async () => {
+            const component = render();
+            const content =
+                component.shadowRoot.querySelector(".popover-content");
+
+            expect(content).toBeNull();
+
+            component.openPopover();
+
+            await Promise.resolve();
+
+            const contentAfterOpen =
+                component.shadowRoot.querySelector(".popover-content");
+
+            expect(contentAfterOpen).not.toBeNull();
+
+            return expect(component).toBeAccessible();
+        });
+
+        it("render menu content before interaction in prerender mode", async () => {
+            const spy = jest.spyOn(window.navigator, "userAgent", "get");
+            spy.mockReturnValue("Mozilla, Prerender");
+
+            const renderComponent = createRenderComponent(TAG, Popover);
+            const component = renderComponent();
+            const content =
+                component.shadowRoot.querySelector(".popover-content");
+
+            expect(content).not.toBeNull();
+        });
+    });
+
+    describe("interactions", () => {
+        it("fires open and close callbacks on interaction with its slotted control", async () => {
+            const component = renderWithSlot();
+            const mockOpen = jest.fn();
+            const mockClose = jest.fn();
+
+            await Promise.resolve();
+
+            const button = component.shadowRoot.querySelector("dx-button");
+            const popover = component.shadowRoot.querySelector("dx-popover");
+            popover.addEventListener("open", mockOpen);
+            popover.addEventListener("close", mockClose);
+
+            expect(mockOpen).not.toHaveBeenCalled();
+
+            button.click();
+
+            expect(mockOpen).toHaveBeenCalledTimes(1);
+
+            button.click();
+
+            expect(mockOpen).toHaveBeenCalledTimes(1);
+            expect(mockClose).toHaveBeenCalledTimes(1);
+
+            return expect(component).toBeAccessible();
+        });
+
+        it("doesn't fire open if passed control is disabled", () => {
+            const element = render();
+
+            const { slot: controlSlot, slottedElement } =
+                mockSlottedElement<HTMLButtonElement>(
+                    element,
+                    "button",
+                    "control"
+                );
+            expect(controlSlot.assignedElements).toBeCalledTimes(1);
+            expect(slottedElement.ariaHasPopup).toBe("true");
+            expect(slottedElement.style.cursor).toBe("cursor");
+
+            slottedElement.disabled = true;
+
+            const mockOpen = jest.fn();
+            element.addEventListener("open", mockOpen);
+            element.open = true;
+
+            expect(element.open).toBe(false);
+            expect(mockOpen).not.toBeCalled();
+        });
+
+        it("fires open on slotted control ArrowDown", async () => {
+            const component = renderWithSlot();
+            const mockOpen = jest.fn();
+
+            await Promise.resolve();
+
+            const button = component.shadowRoot.querySelector("dx-button");
+            const popover = component.shadowRoot.querySelector("dx-popover");
+            popover.addEventListener("open", mockOpen);
+
+            expect(mockOpen).not.toHaveBeenCalled();
+
+            button.dispatchEvent(
+                new KeyboardEvent("keydown", { key: "ArrowDown" })
+            );
+
+            expect(mockOpen).toHaveBeenCalledTimes(1);
+        });
+
+        it("closes popover and dispatch event when Esc key is pressed", () => {
+            const component = render(mockProps);
+            const { slottedElement } = mockSlottedElement(
+                component,
+                "button",
+                "control"
+            );
+            slottedElement.focus = jest.fn();
+
+            component.open = true;
+            expect(slottedElement.getAttribute("aria-expanded")).toBe("true");
+
+            const escapePressMock = jest.fn();
+            component.addEventListener("requestclose", escapePressMock);
+
+            const closeEvent = jest.fn();
+            component.addEventListener("close", closeEvent);
+
+            const popoverDiv: HTMLElement =
+                component.shadowRoot.querySelector(".popover");
+            expect(popoverDiv).not.toBeNull();
+
+            expect(component.open).toBe(true);
+
+            popoverDiv.dispatchEvent(
+                new KeyboardEvent("keydown", { key: "Escape" })
+            );
+
+            expect(escapePressMock).toBeCalledTimes(1);
+            const [singleCall] = escapePressMock.mock.calls[0];
+            expect(singleCall).toHaveProperty("detail", "keypress-escape");
+            expect(singleCall).toHaveProperty("bubbles", true);
+            expect(singleCall).toHaveProperty("composed", true);
+
+            expect(component.open).toBe(false);
+            expect(slottedElement.getAttribute("aria-expanded")).toBe("false");
+            expect(slottedElement.focus).toBeCalledTimes(1);
+            expect(closeEvent).toBeCalledTimes(1);
+        });
+
+        it("fires open callbacks on mouseover its slotted control", () => {
+            const component = render({ ...mockProps, openOnHover: true });
+            const { slottedElement } = mockSlottedElement(
+                component,
+                "button",
+                "control"
+            );
+            expect(slottedElement.ariaHasPopup).toBe("true");
+            expect(slottedElement.style.cursor).toBe("default");
+
+            const openMock = jest.fn();
+            component.addEventListener("open", openMock);
+
+            slottedElement.dispatchEvent(new MouseEvent("mouseenter"));
+            expect(openMock).toBeCalledTimes(1);
+            expect(component.open).toBe(true);
+        });
+
+        it("closes if you change open from true to false and not focus control", () => {
+            const component = render(mockProps);
+            const { slottedElement } = mockSlottedElement(
+                component,
+                "button",
+                "control"
+            );
+            slottedElement.focus = jest.fn();
+            component.open = true;
+
+            const closeMock = jest.fn();
+            component.addEventListener("close", closeMock);
+
+            component.open = false;
+
+            expect(slottedElement.focus).not.toBeCalled();
+            expect(closeMock).toBeCalledTimes(1);
+        });
+
+        it("dispatches requestclose with click-control type", () => {
+            const component = render(mockProps);
+            const { slottedElement } = mockSlottedElement(
+                component,
+                "button",
+                "control"
+            );
+
+            const requestCloseMock = jest.fn();
+            component.addEventListener("requestclose", requestCloseMock);
+
+            component.open = true;
+            slottedElement.click();
+
+            expect(requestCloseMock).toBeCalledTimes(1);
+            const [singleCall] = requestCloseMock.mock.calls[0];
+            expect(singleCall).toHaveProperty("detail", "click-control");
+            expect(singleCall).toHaveProperty("bubbles", true);
+            expect(singleCall).toHaveProperty("composed", true);
+        });
+    });
+});

package/src/modules/dx/popover/popover.css

@@ -0,0 +1,63 @@
+@import "helpers/reset";
+
+:host {
+    --popover-border-radius: var(
+        --dx-c-popover-border-radius,
+        var(--dx-g-spacing-sm)
+    );
+    --popover-border: var(--dx-c-popover-border, 1px solid var(--dx-g-gray-90));
+}
+
+.popover-container {
+    position: fixed;
+    z-index: var(--dx-g-z-index-max);
+    visibility: hidden;
+    pointer-events: none;
+}
+
+.popover {
+    background: white;
+    border: var(--popover-border);
+    box-shadow: var(--dx-g-box-shadow-lg);
+    border-radius: var(--popover-border-radius);
+    width: 168px;
+    max-width: calc(100vw - var(--dx-g-spacing-lg));
+    max-height: 65vh;
+    padding: var(--dx-g-spacing-sm);
+    overflow-y: auto;
+    transition: opacity 0.2s linear, transform 0.2s linear;
+    transition-delay: 0.02s;
+    transform: translateY(var(--dx-g-spacing-xs));
+    opacity: 0;
+}
+
+.popover-container_open {
+    visibility: visible;
+    pointer-events: auto;
+}
+
+.popover-container_open .popover {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.popover-overridewidth {
+    max-width: unset;
+}
+
+.popover-fullwidth {
+    width: unset;
+    max-width: unset;
+}
+
+.popover-offset-small {
+    margin-top: var(--dx-g-spacing-sm);
+}
+
+.popover-offset-medium {
+    margin-top: var(--dx-g-spacing-md);
+}
+
+.popover-small {
+    width: 136px;
+}

package/src/modules/dx/popover/popover.html

@@ -0,0 +1,16 @@
+<template>
+    <slot name="control" onslotchange={onSlotChange}></slot>
+    <div class={containerClassName}>
+        <div
+            class={className}
+            style={style}
+            aria-label={ariaLabel}
+            part="content"
+            onkeydown={onKeyDown}
+        >
+            <div class="popover-content" if:true={_rendered}>
+                <slot name="content"></slot>
+            </div>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,82 @@
+import { html } from "lit-html";
+import mockProps from "../checkboxGroup/__tests__/mockProps";
+
+export default {
+    title: "dx/dx-popover",
+    component: "dx-popover"
+};
+
+// prettier-ignore
+const styles = () => html `
+    <style>
+        #root {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            grid-gap: 20px;
+            justify-items: center;
+        }
+    </style>
+`;
+
+// prettier-ignore
+export const Base = () => html ` ${styles()}
+    <dx-popover>
+      <dx-button slot="control" icon-symbol="chevrondown">
+        Default
+      </dx-button>
+      <dx-checkbox-group
+          legend='${JSON.stringify(mockProps.legend)}'
+          options='${JSON.stringify(mockProps.options)}'
+          default-value='${JSON.stringify(mockProps.defaultValue)}'
+          slot="content"
+      ></dx-checkbox-group>
+    </dx-popover>
+
+    <br />
+
+    <dx-popover small="true">
+      <dx-button slot="control" icon-symbol="chevrondown">
+          Small
+      </dx-button>
+      <div slot="content">
+        Custom Content
+      </div>
+    </dx-popover>
+
+    <br />
+
+    <dx-popover offset="small">
+      <dx-button slot="control" icon-symbol="chevrondown">
+          Offset
+      </dx-button>
+      <div slot="content">
+          Custom Content
+      </div>
+    </dx-popover>
+
+    <br />
+
+    <dx-popover open-on-hover="true">
+      <dx-button slot="control" icon-symbol="chevrondown">
+          Open On Hover
+      </dx-button>
+      <div slot="content">
+          Custom Content
+      </div>
+    </dx-popover>
+`;
+
+export const DisabledControl = () => html`
+    ${styles()}
+    <dx-popover>
+        <dx-button slot="control" icon-symbol="chevrondown" disabled="true">
+            I'm disabled
+        </dx-button>
+        <dx-checkbox-group
+            legend="${JSON.stringify(mockProps.legend)}"
+            options="${JSON.stringify(mockProps.options)}"
+            default-value="${JSON.stringify(mockProps.defaultValue)}"
+            slot="content"
+        ></dx-checkbox-group>
+    </dx-popover>
+`;