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

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

@@ -0,0 +1,165 @@
+import Dropdown from "dx/dropdown";
+import DropdownOption from "dx/dropdownOption";
+import Popover from "dx/popover";
+import { getOptionsCount } from "utils-internal/options";
+import { createRenderComponent } from "utils-internal/tests";
+import mockNestedOptions from "./mockNestedOptions";
+import mockProps from "./mockProps";
+
+const TAG = "dx-dropdown";
+const render = createRenderComponent(TAG, Dropdown);
+
+describe(TAG, () => {
+    describe("render", () => {
+        it("renders all options when open", () => {
+            const component = render({ ...mockProps, open: true });
+
+            const menuDiv: HTMLElement =
+                component.shadowRoot.querySelector(".menu_list");
+            expect(menuDiv).not.toBeNull();
+            expect(menuDiv.getAttribute("role")).toBe("menu");
+
+            const options =
+                component.shadowRoot.querySelectorAll("dx-dropdown-option");
+            expect(options.length).toEqual(mockProps.options.length);
+            return expect(component).toBeAccessible();
+        });
+
+        it("renders all nested options and the callout link when open", () => {
+            const component = render({
+                ...mockProps,
+                options: mockNestedOptions,
+                open: true
+            });
+
+            const options: Array<DropdownOption> = Array.from(
+                component.shadowRoot.querySelectorAll("dx-dropdown-option")
+            );
+            const link = component.shadowRoot.querySelector(".callout_link");
+            const count = getOptionsCount(mockNestedOptions);
+            expect(options.length).toEqual(count);
+
+            options.forEach(({ keyValue, option }) => {
+                expect(keyValue).not.toBeFalsy();
+                expect(keyValue).toBe(option.id);
+            });
+            expect(link).not.toBeNull();
+            return expect(component).toBeAccessible();
+        });
+
+        it("value prop activates the selected option", () => {
+            const component = render({ ...mockProps, open: true });
+            const options = Array.from(
+                component.shadowRoot.querySelectorAll("dx-dropdown-option")
+            );
+            const selectedOption = options.find(
+                // @ts-ignore
+                (option: HTMLElement) => option.active === true
+            );
+            // @ts-ignore
+            const id = selectedOption.option.id;
+            expect(id).toEqual(mockProps.value);
+            return expect(component).toBeAccessible();
+        });
+
+        it("renders with menu-offset-small and menu-hidden", () => {
+            const component = render({ offset: "small", options: [] });
+            const popover: Popover =
+                component.shadowRoot.querySelector("dx-popover");
+            expect(popover).not.toBeNull();
+
+            expect(popover.classList).toContain("menu-offset-small");
+            expect(popover.classList).toContain("menu-hidden");
+
+            const options =
+                component.shadowRoot.querySelectorAll("dx-dropdown-option");
+            expect(options).toHaveLength(0);
+
+            return expect(component).toBeAccessible();
+        });
+    });
+
+    describe("interactions", () => {
+        it("doesn't close after onchange when stayOpenAfterChange is true", async () => {
+            const component = render({
+                ...mockProps,
+                stayOpenAfterChange: true,
+                open: true
+            });
+            const mockClose = jest.fn();
+
+            const popover = component.shadowRoot.querySelector("dx-popover");
+            popover.addEventListener("close", mockClose);
+
+            const option =
+                component.shadowRoot.querySelector("dx-dropdown-option");
+            const id = option.option.id;
+            option.dispatchEvent(new CustomEvent("select", { detail: id }));
+
+            expect(mockClose).not.toHaveBeenCalled();
+            expect(component.open).toEqual(true);
+
+            return expect(component).toBeAccessible();
+        });
+
+        it("closes after onchange when stayOpenAfterChange is false", async () => {
+            const component = render({
+                ...mockProps,
+                open: true
+            });
+            const mockClose = jest.fn();
+
+            const popover = component.shadowRoot.querySelector("dx-popover");
+            popover.addEventListener("close", mockClose);
+
+            const option: DropdownOption =
+                component.shadowRoot.querySelector("dx-dropdown-option");
+            const id = option.option.id;
+            option.dispatchEvent(new CustomEvent("select", { detail: id }));
+
+            expect(mockClose).toHaveBeenCalledTimes(1);
+            return expect(component).toBeAccessible();
+        });
+
+        it("handles keydown event with ArrowDown key", () => {
+            const [firstOption] = mockProps.options;
+            const component = render({ ...mockProps, value: null, open: true });
+            expect(component.focusedValue).toBeNull();
+
+            component.dispatchEvent(
+                new KeyboardEvent("keydown", { key: "ArrowDown" })
+            );
+            expect(component.focusedValue).toBe(firstOption.id);
+        });
+
+        it("ignores other click keys", () => {
+            const component = render({ ...mockProps, open: true });
+
+            component.dispatchEvent(
+                new KeyboardEvent("keydown", { key: "ArrowDown" })
+            );
+            expect(component.focusedValue).toBe(mockProps.value);
+
+            component.dispatchEvent(
+                new KeyboardEvent("keydown", { key: "ArrowLeft" })
+            );
+
+            expect(component.focusedValue).toBe(mockProps.value);
+        });
+
+        it("handles close event from popover", () => {
+            const component = render({ ...mockProps, open: true });
+
+            component.dispatchEvent(
+                new KeyboardEvent("keydown", { key: "ArrowDown" })
+            );
+            expect(component.focusedValue).toBe(mockProps.value);
+
+            const popover: HTMLElement =
+                component.shadowRoot.querySelector("dx-popover");
+            expect(popover).not.toBeNull();
+            popover.dispatchEvent(new CustomEvent("close"));
+            expect(component.focusedValue).toBeNull();
+        });
+    });
+});

package/src/modules/dx/dropdown/__tests__/mockNestedOptions.ts

@@ -0,0 +1,96 @@
+export default [
+    {
+        label: "Products",
+        id: "brands",
+        calloutLink: {
+            href: "www.google.com",
+            target: "_blank",
+            label: "View all Products"
+        },
+        options: [
+            {
+                label: "Heroku",
+                id: "heroku",
+                iconSymbol: "heroku",
+                iconSprite: "salesforcebrand"
+            },
+            {
+                label: "Tableau",
+                id: "tableau",
+                iconSymbol: "analytics",
+                iconSprite: "salesforcebrand"
+            },
+            {
+                label: "Quip",
+                id: "quip",
+                iconSymbol: "collaboration",
+                iconSprite: "salesforcebrand"
+            },
+            {
+                label: "MuleSoft",
+                id: "mulesoft",
+                iconSymbol: "integration",
+                iconSprite: "salesforcebrand"
+            }
+        ]
+    },
+    {
+        label: "Platform",
+        id: "platform",
+        options: [
+            {
+                label: "Apex",
+                id: "apex"
+            },
+            {
+                label: "Lightning Web Components",
+                id: "LWC"
+            },
+            {
+                label: "Mobile",
+                id: "mobile"
+            },
+            {
+                label: "Apex Other",
+                id: "apex2"
+            },
+            {
+                label: "Lightning Web Runtime",
+                id: "LWR"
+            },
+            {
+                label: "Apex Legends",
+                id: "legends"
+            },
+            {
+                label: "Einstein",
+                id: "einstein"
+            },
+            {
+                label: "Mobile SDK",
+                id: "mobilesdk"
+            }
+        ]
+    },
+    {
+        label: "Sandwich",
+        id: "sandwich",
+        options: [
+            {
+                label: "Bread",
+                description: "Lets get this bread.",
+                id: "bread"
+            },
+            {
+                label: "Peanut Butter",
+                description: "This is tasty PB.",
+                id: "pb"
+            },
+            {
+                label: "Jelly",
+                description: "This is jelly, maybe grape jelly.",
+                id: "jelly"
+            }
+        ]
+    }
+];

package/src/modules/dx/dropdown/__tests__/mockOptions.ts

@@ -0,0 +1,10 @@
+export default [
+    { label: "Banana", id: "banana" },
+    { label: "Orange", id: "orange" },
+    { label: "Potato", id: "potato" },
+    { label: "Shoe", id: "shoe" },
+    { label: "Broom", id: "broom" },
+    { label: "Spaghetti", id: "spaghetti" },
+    { label: "Tater Tot", id: "tater" },
+    { label: "Lint", id: "lint" }
+];

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

@@ -0,0 +1,6 @@
+import mockOptions from "./mockOptions";
+
+export default {
+    value: "potato",
+    options: mockOptions
+};

package/src/modules/dx/dropdown/dropdown.css

@@ -0,0 +1,93 @@
+@import "helpers/reset";
+
+.menu-nested::part(content) {
+    padding-top: var(--dx-g-spacing-sm);
+    width: 354px;
+}
+
+.menu_list {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+}
+
+.menu-hidden::part(content) {
+    display: none;
+}
+
+@media screen and (max-width: 1000px) {
+    .menu-nested .menu_option:not(:first-child) {
+        border-top: var(--border);
+        margin-top: var(--dx-g-spacing-lg);
+        padding-top: var(--dx-g-spacing-lg);
+    }
+}
+
+@media screen and (min-width: 1000px) {
+    .menu-nested-2-col::part(content) {
+        width: 592px;
+    }
+
+    .menu-nested-2-col .menu_list {
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+
+    .menu-nested-2-col .menu_option {
+        flex-grow: 1;
+        flex-basis: 40%;
+    }
+
+    .menu-nested .menu_option:nth-child(n + 3) {
+        border-top: var(--border);
+        margin-top: var(--dx-g-spacing-lg);
+        padding-top: var(--dx-g-spacing-lg);
+    }
+
+    .menu-nested-2-col .menu_option:nth-child(2n) {
+        padding-left: var(--dx-g-spacing-sm);
+    }
+
+    .callout_link {
+        margin-bottom: var(--dx-g-spacing-xs);
+    }
+}
+
+.menu_option {
+    --border: 1px solid var(--dx-g-blue-natural-90);
+
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+.menu_option > a:first-of-type {
+    margin-top: var(--dx-g-spacing-sm);
+}
+
+.menu_heading {
+    display: block;
+    color: var(--dx-g-blue-vibrant-20);
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-sm);
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin: var(--dx-g-spacing-sm);
+}
+
+.callout_link {
+    --dx-c-button-font-size: var(--dx-g-text-base);
+
+    display: block;
+    padding-top: var(--dx-g-spacing-xl);
+    margin-top: auto;
+    margin-left: var(--dx-g-spacing-sm);
+}
+
+.empty {
+    padding: var(--dx-g-spacing-sm);
+    color: var(--dx-g-gray-50);
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-sm);
+}

package/src/modules/dx/dropdown/dropdown.html

@@ -0,0 +1,67 @@
+<template>
+    <dx-popover
+        aria-label={ariaLabel}
+        class={className}
+        full-width={fullWidth}
+        offset={offset}
+        onclose={onClose}
+        open-on-hover={openOnHover}
+        open={open}
+        page-padding={pagePadding}
+        placement={placement}
+        small={small}
+        width={width}
+    >
+        <slot slot="control"></slot>
+        <div
+            class="menu_list"
+            if:false={areOptionsEmpty}
+            role={role}
+            slot="content"
+        >
+            <template for:each={options} for:item="option">
+                <dx-dropdown-option
+                    analytics-event={analyticsEvent}
+                    active={option.active}
+                    key-value={option.keyValue}
+                    if:false={option.options}
+                    key={option.id}
+                    onfocus={onOptionFocus}
+                    onselect={onOptionClick}
+                    option={option}
+                    nav-item-label={navItemLabel}
+                ></dx-dropdown-option>
+                <div
+                    key={option.id}
+                    role="presentation"
+                    class="menu_option"
+                    if:true={option.options}
+                >
+                    <span class="menu_heading">{option.label}</span>
+                    <template for:each={option.options} for:item="suboption">
+                        <dx-dropdown-option
+                            analytics-event={analyticsEvent}
+                            active={suboption.active}
+                            key={suboption.id}
+                            key-value={suboption.keyValue}
+                            onfocus={onOptionFocus}
+                            onselect={onOptionClick}
+                            option={suboption}
+                            nav-item-label={navItemLabel}
+                        ></dx-dropdown-option>
+                    </template>
+                    <dx-button
+                        class="callout_link"
+                        if:true={option.calloutLink}
+                        href={option.calloutLink.href}
+                        target={option.calloutLink.target}
+                        icon-symbol="forward"
+                        variant="inline"
+                    >
+                        {option.calloutLink.label}
+                    </dx-button>
+                </div>
+            </template>
+        </div>
+    </dx-popover>
+</template>

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

@@ -0,0 +1,89 @@
+import { html } from "lit-html";
+import mockOptions from "./__tests__/mockOptions";
+import mockNestedOptions from "./__tests__/mockNestedOptions";
+
+export default {
+    title: "dx/dx-dropdown",
+    component: "dx-dropdown"
+};
+
+const options = JSON.stringify(mockOptions);
+const nestedOptions = JSON.stringify(mockNestedOptions);
+const nestedOptionsTwoItems = JSON.stringify(mockNestedOptions.slice(0, 2));
+
+// 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-dropdown options="${options}">
+        <dx-button icon-symbol="chevrondown">
+            Default
+        </dx-button>
+    </dx-dropdown>
+
+    <br />
+
+    <dx-dropdown stay-open-after-change="true" options="${options}">
+        <dx-button icon-symbol="chevrondown">
+            Stay Open After Change
+        </dx-button>
+    </dx-dropdown>
+
+    <br />
+
+    <dx-dropdown
+        options="${nestedOptions}"
+        placement="bottom"
+        offset="medium"
+    >
+        <dx-button icon-symbol="chevrondown">
+            Nested Options
+        </dx-button>
+    </dx-dropdown>
+
+    <br />
+
+    <dx-dropdown
+        options="${nestedOptionsTwoItems}"
+        placement="bottom"
+        offset="medium"
+    >
+        <dx-button icon-symbol="chevrondown">
+            Nested Options 2 Items
+        </dx-button>
+    </dx-dropdown>
+
+    <br />
+
+    <dx-dropdown
+        options="${nestedOptionsTwoItems}"
+        placement="bottom"
+        offset="medium"
+        open-on-hover="true"
+        stay-open-after-change="true"
+    >
+        <dx-button icon-symbol="chevrondown">
+            Hover Me
+        </dx-button>
+    </dx-dropdown>
+`;
+
+export const DisabledControl = () => html`
+    ${styles()}
+    <dx-dropdown options="${options}">
+        <dx-button icon-symbol="chevrondown" disabled="true">
+            I'm disabled
+        </dx-button>
+    </dx-dropdown>
+`;