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

package/src/modules/dx/header/header.ts

@@ -0,0 +1,27 @@
+import { api } from "lwc";
+import { HeaderBase } from "utils-internal/headerBase";
+import { toJson } from "utils/normalizers";
+import type { Option } from "typings/custom";
+
+export default class Header extends HeaderBase {
+    private _breadcrumbs!: Option[];
+
+    @api
+    get breadcrumbs() {
+        return this._breadcrumbs;
+    }
+
+    set breadcrumbs(value) {
+        this._breadcrumbs = toJson(value);
+    }
+
+    private get showSignup(): boolean {
+        return this.signupLink
+            ? (this.mobile && !this.isSearchOpen) || !this.mobile
+            : false;
+    }
+
+    protected mobileBreakpoint(): string {
+        return "768px";
+    }
+}

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

@@ -0,0 +1,123 @@
+import HeaderMobileNavMenu from "dx/headerMobileNavMenu";
+import { createRenderComponent } from "utils-internal/tests";
+import { getOptionsCount } from "utils-internal/options";
+import navItems from "../../header/__tests__/mockNavDevelopers";
+
+const TAG = "dx-header-mobile-nav-menu";
+const render = createRenderComponent(TAG, HeaderMobileNavMenu);
+
+const navItemsCount = getOptionsCount(navItems);
+
+describe(TAG, () => {
+    it("renders defaulted to closed", () => {
+        const element = render({ navItems });
+
+        const el = element.shadowRoot.querySelector("nav");
+
+        expect(el).not.toBeNull();
+        expect(el.className).toContain("state-closed");
+
+        return expect(element).toBeAccessible();
+    });
+
+    it("removes closed class when open and has no menu items open by default", () => {
+        const element = render({ navItems, open: true });
+
+        const el = element.shadowRoot.querySelector("nav");
+        const menuItemEl = element.shadowRoot.querySelector(
+            "nav-menu_item.state-open"
+        );
+
+        expect(el.className).not.toContain("state-closed");
+        expect(menuItemEl).toBeNull();
+
+        return expect(element).toBeAccessible();
+    });
+
+    it("renders the corect number of li", () => {
+        const element = render({ navItems, open: true });
+        const lis = element.shadowRoot.querySelectorAll("li");
+        expect(lis.length).toEqual(navItems.length);
+        return expect(element).toBeAccessible();
+    });
+
+    it("renders the corect number of links", () => {
+        const element = render({ navItems, open: true });
+        const links = element.shadowRoot.querySelectorAll(
+            "a, dx-header-mobile-nav-menu-option"
+        );
+        expect(links.length).toEqual(navItemsCount);
+        return expect(element).toBeAccessible();
+    });
+
+    it("applies active class to option href that matches the current pathname", () => {
+        const element = render({
+            navItems,
+            open: true,
+            pathname: "/developers"
+        });
+        const links = element.shadowRoot.querySelectorAll(
+            ".nav-menu_item_cta.state-active"
+        );
+        expect(links.length).toEqual(1);
+        expect(links[0].textContent).toEqual(navItems[0].label);
+        return expect(element).toBeAccessible();
+    });
+
+    it("applies state-open class to a menu item with options based off of the incoming value", () => {
+        const value = "discover";
+        const element = render({ navItems, open: true, value });
+
+        const menuItem = element.shadowRoot.querySelector(
+            `li[data-id="${value}"]`
+        );
+
+        expect(menuItem.className).toContain("state-open");
+        return expect(element).toBeAccessible();
+    });
+
+    it("fires change with the correct value on click of menuitem with options", () => {
+        const id = "discover";
+        const onChangeMock = jest.fn();
+        const element = render({
+            navItems,
+            open: true,
+            onchange: onChangeMock
+        });
+
+        const menuItem = element.shadowRoot.querySelector(
+            `button[data-id="${id}"]`
+        );
+
+        menuItem.click();
+
+        expect(onChangeMock).toHaveBeenCalledTimes(1);
+        expect(onChangeMock.mock.calls[0][0].detail).toEqual(id);
+        return expect(element).toBeAccessible();
+    });
+
+    it("renders the backdrop div when open and closes nav when clicked", () => {
+        const element = render({
+            navItems,
+            open: true
+        });
+        const backdropEl = element.shadowRoot.querySelector(`.backdrop`);
+
+        const onCloseMock = jest.fn();
+        element.addEventListener("requestclose", onCloseMock);
+
+        expect(backdropEl).not.toBeNull();
+
+        backdropEl.click();
+        expect(onCloseMock).toHaveBeenCalledTimes(1);
+
+        return expect(element).toBeAccessible();
+    });
+
+    it("does not render the backdrop div when closed", () => {
+        const element = render({ navItems, open: false });
+        const backdropEl = element.shadowRoot.querySelector(`.backdrop`);
+        expect(backdropEl).toBeNull();
+        return expect(element).toBeAccessible();
+    });
+});

package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.css

@@ -0,0 +1,160 @@
+@import "helpers/reset";
+
+:host {
+    --dx-c-color-background: var(--dx-g-brand-default-color-background);
+    --dx-c-button-color-background-inactive: var(
+        --dx-g-brand-default-button-color-background-inactive
+    );
+    --dx-c-button-color-background-active: var(
+        --dx-g-brand-default-button-color-background-active
+    );
+    --dx-c-color: var(--dx-g-brand-default-color);
+    --dx-c-color-border: var(--dx-g-brand-default-color-border);
+    --dx-c-color-background-2: var(--dx-g-brand-default-color-background-2);
+    --dx-c-button-color-background-inactive-hover: var(
+        --dx-g-brand-default-button-color-background-inactive-hover
+    );
+    --dx-c-color-border-2: var(--dx-g-brand-default-color-border-2);
+}
+
+.nav-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    max-height: 56vh;
+    overflow-y: auto;
+    padding: 0 var(--dx-g-spacing-sm) var(--dx-g-spacing-sm)
+        var(--dx-g-spacing-sm);
+    background: var(--dx-c-color-background);
+    box-shadow: 0 20px 28px 0 rgba(0, 20, 45, 0.08);
+    transform: translateY(0);
+    border-top: 1px solid transparent;
+    transition: var(--dx-g-transition-transform-2x),
+        var(--dx-g-transition-hue-1x);
+    z-index: 1000;
+}
+
+.nav-menu.has-scrollshadow {
+    border-color: var(--dx-c-color-border-2);
+}
+
+.nav-menu.state-closed {
+    opacity: 0;
+    transform: translateY(-16px);
+    pointer-events: none;
+}
+
+.nav-menu ul {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+.nav-menu_item {
+    display: flex;
+    flex-direction: column;
+}
+
+.nav-menu_item,
+.nav-menu_item_cta-main {
+    transition: var(--dx-g-transition-hue-1x);
+    border-radius: var(--dx-g-spacing-xs);
+}
+
+.nav-menu_item_cta-main {
+    justify-content: space-between;
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-base);
+    color: var(--dx-g-blue-vibrant-20);
+    line-height: 20px;
+    padding: var(--dx-g-spacing-sm) var(--dx-g-spacing-md);
+    width: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.nav-menu ul > .nav-menu_item:not(:last-of-type) {
+    margin-bottom: var(--dx-g-spacing-xs);
+}
+
+.nav-menu_item.state-open {
+    background: var(--dx-c-button-color-background-inactive);
+}
+
+.nav-menu_item_cta-main:not(.state-active):hover {
+    background: var(--dx-c-button-color-background-inactive);
+}
+
+.nav-menu_item.state-open .nav-menu_item_cta-main:hover {
+    background: var(--dx-c-button-color-background-inactive-hover);
+}
+
+.nav-menu_item.state-open .chevrondown {
+    transform: rotateX(180deg);
+}
+
+.nav-menu_item_cta-options {
+    position: relative;
+    display: none;
+    flex-direction: column;
+    width: 100%;
+}
+
+.nav-menu_item.state-open > .nav-menu_item_cta-options {
+    display: flex;
+}
+
+.nav-menu_item_cta {
+    height: var(--dx-g-spacing-3xl);
+}
+
+.nav-menu_item_cta-main.state-active {
+    background: var(--dx-c-button-color-background-active);
+    color: var(--dx-c-color);
+}
+
+.nav-menu_item_cta-main > span {
+    transform: translateY(3px); /* ghost padding */
+}
+
+.nav-menu_item_cta-sub {
+    --dx-c-button-secondary-color-hover: var(
+        --dx-c-button-color-background-inactive-hover
+    );
+
+    font-size: var(--dx-g-text-sm);
+    width: 100%;
+}
+
+.nav-menu_item_cta-sub::part(container) {
+    justify-content: flex-start;
+}
+
+.nav-menu_item_cta-sub.state-active {
+    text-decoration: underline;
+}
+
+.nav-menu_item > .nav-menu_item_cta-options:not(:first-of-type) {
+    padding-top: var(--dx-g-spacing-xs);
+    margin-top: var(--dx-g-spacing-xs);
+}
+
+.nav-menu_item > .nav-menu_item_cta-options:not(:first-of-type)::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: var(--dx-g-spacing-md);
+    width: calc(100% - var(--dx-g-spacing-xl));
+    height: 1px;
+    background: var(--dx-c-color-border-2);
+}
+
+.backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 100vw;
+    z-index: -1;
+}

package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.html

@@ -0,0 +1,73 @@
+<template>
+    <nav
+        aria-label="Navigation Menu"
+        class={className}
+        role="navigation"
+        onscroll={onScroll}
+    >
+        <ul>
+            <template for:each={navItems} for:item="navItem">
+                <li
+                    class={navItem.liClassName}
+                    key={navItem.id}
+                    aria-expanded={navItem.open}
+                    data-id={navItem.id}
+                >
+                    <!-- NAV ITEM [WITHOUT OPTIONS] -->
+                    <a
+                        class={navItem.className}
+                        href={navItem.link.href}
+                        if:false={navItem.options}
+                        onclick={onClickLink}
+                    >
+                        <span>{navItem.label}</span>
+                    </a>
+
+                    <!-- NAV ITEM [WITH OPTIONS] -->
+                    <button
+                        aria-label="Toggle accordian open"
+                        class="nav-menu_item_cta nav-menu_item_cta-main"
+                        data-id={navItem.id}
+                        if:true={navItem.options}
+                        onclick={onChange}
+                    >
+                        <span>{navItem.label}</span>
+                        <dx-icon
+                            class="chevrondown"
+                            symbol="chevrondown"
+                            size="medium"
+                        ></dx-icon>
+                    </button>
+                    <template if:true={navItem.options}>
+                        <template for:each={navItem.options} for:item="options">
+                            <div
+                                class="nav-menu_item_cta-options"
+                                key={options.id}
+                            >
+                                <template if:true={options.options}>
+                                    <template
+                                        for:each={options.options}
+                                        for:item="navSubItem"
+                                    >
+                                        <dx-header-mobile-nav-menu-option
+                                            key={navSubItem.id}
+                                            href={navSubItem.link.href}
+                                            class-name={navSubItem.className}
+                                            icon-symbol={navSubItem.iconSymbol}
+                                            menu-label={navItem.label}
+                                            item-label={navSubItem.label}
+                                            onclick={onClickLink}
+                                            target={navSubItem.link.target}
+                                        ></dx-header-mobile-nav-menu-option>
+                                    </template>
+                                </template>
+                            </div>
+                        </template>
+                    </template>
+                </li>
+            </template>
+        </ul>
+        <slot></slot>
+    </nav>
+    <div class="backdrop" if:true={open} onclick={onClickBackground}></div>
+</template>

package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.ts

@@ -0,0 +1,102 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { Option } from "typings/custom";
+import { deepmapOptions } from "utils-internal/options";
+
+export default class HeaderMobileNavMenu extends LightningElement {
+    @api open: boolean = false;
+    @api value: string | null = null;
+    @api pathname: string | null = null;
+
+    @api
+    set navItems(_navItems: Option[]) {
+        this._navItems = _navItems;
+    }
+    get navItems() {
+        // first we assign container classnames to the topmost layer of options groupings
+        // (deepmapper only affects actual root options, not groups of options made for the purposes of labeling)
+        const navItems = this._navItems?.map((app) => {
+            const open = app.options ? app.id === this.value : null;
+            const liClassName = cx("nav-menu_item", open && "state-open");
+            return { ...app, open, liClassName };
+        });
+
+        // then we use deepmapper to affect the actual root options (actual links)
+        return deepmapOptions(
+            navItems,
+            (app: Option, index: number, level: number) => {
+                const active = app.link
+                    ? app.link.href === this.pathname
+                    : false;
+                const className = cx(
+                    "nav-menu_item_cta",
+                    active && "state-active",
+                    level > 1
+                        ? "nav-menu_item_cta-sub"
+                        : "nav-menu_item_cta-main"
+                );
+                const iconSymbol =
+                    app.link && app.link.target ? "new_window" : null;
+
+                return {
+                    ...app,
+                    className,
+                    iconSymbol
+                };
+            }
+        );
+    }
+
+    private _navItems: Option[] = [];
+    private navElement: HTMLElement | null = null;
+    private wasOpen: boolean = false;
+    private showScrollShadow: boolean = false;
+
+    private get className() {
+        return cx(
+            "nav-menu",
+            !this.open && "state-closed",
+            this.showScrollShadow && "has-scrollshadow"
+        );
+    }
+
+    renderedCallback() {
+        if (!this.navElement) {
+            this.navElement = this.template.querySelector("nav");
+        }
+        if (this.open && !this.wasOpen && this.value) {
+            this.scrollToAccordianSection();
+        }
+        if (this.open !== this.wasOpen) {
+            this.wasOpen = this.open;
+        }
+    }
+
+    private scrollToAccordianSection() {
+        const element = this.template.querySelector(
+            `li[data-id="${this.value}"]`
+        );
+        const container = this.template.querySelector(".nav-menu");
+        if (element && container) {
+            container.scrollTop = element.offsetTop - 8;
+        }
+    }
+
+    private onScroll(e: Event) {
+        this.showScrollShadow = (<HTMLElement>e.currentTarget).scrollTop > 4;
+    }
+
+    private onChange(e: PointerEvent) {
+        const id = (<HTMLButtonElement>e.currentTarget).getAttribute("data-id");
+        const detail = id === this.value ? null : id; // toggles accordian open/closed
+        this.dispatchEvent(new CustomEvent("change", { detail }));
+    }
+
+    private onClickLink() {
+        this.dispatchEvent(new CustomEvent("requestclose"));
+    }
+
+    private onClickBackground() {
+        this.dispatchEvent(new CustomEvent("requestclose"));
+    }
+}

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

@@ -0,0 +1,38 @@
+import HeaderMobileNavMenuOption from "dx/headerMobileNavMenuOption";
+import { createRenderComponent } from "utils-internal/tests";
+
+const TAG = "dx-header-mobile-nav-menu-option";
+const render = createRenderComponent(TAG, HeaderMobileNavMenuOption);
+
+const PROPS = {
+    menuLabel: "build",
+    itemLabel: "documentation"
+};
+
+describe(TAG, () => {
+    it("renders a single dx-button component", () => {
+        const element = render(PROPS);
+
+        const button = element.shadowRoot.querySelectorAll("dx-button");
+
+        expect(button.length).toEqual(1);
+
+        return expect(element).toBeAccessible();
+    });
+
+    it("fires sendGtm function when button is clicked", () => {
+        const sendGtmMock = jest.fn();
+        const element = render({
+            ...PROPS,
+            onclick: sendGtmMock
+        });
+
+        const button = element.shadowRoot.querySelector("dx-button");
+
+        button.click();
+
+        expect(sendGtmMock).toHaveBeenCalled();
+
+        return expect(element).toBeAccessible();
+    });
+});

package/src/modules/dx/headerMobileNavMenuOption/headerMobileNavMenuOption.css

@@ -0,0 +1,5 @@
+dx-button {
+    --dx-c-button-justify-content: flex-start;
+
+    width: 100%;
+}

package/src/modules/dx/headerMobileNavMenuOption/headerMobileNavMenuOption.html

@@ -0,0 +1,14 @@
+<template>
+    <dx-button
+        class={className}
+        href={href}
+        icon-symbol={iconSymbol}
+        target={target}
+        size="large"
+        font="sans"
+        variant="tertiary"
+        onclick={sendGtm}
+    >
+        {itemLabel}
+    </dx-button>
+</template>

package/src/modules/dx/headerMobileNavMenuOption/headerMobileNavMenuOption.ts

@@ -0,0 +1,20 @@
+import { LightningElement, api } from "lwc";
+import { track } from "dx/instrumentation";
+
+export default class HeaderMobileNavMenuOption extends LightningElement {
+    @api href: string | null = null;
+    @api className: string | null = null;
+    @api iconSymbol: string | null = null;
+    @api target: string | null = null;
+    @api menuLabel: string | null = null;
+    @api itemLabel: string | null = null;
+
+    private sendGtm(e: PointerEvent) {
+        track(e.currentTarget, "custEv_topNavLinkClick", {
+            navHeading: this.menuLabel || undefined,
+            navSubHeading: this.itemLabel || undefined,
+            clickText: this.href || undefined,
+            pageLocation: window.location.pathname || undefined
+        });
+    }
+}

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

@@ -0,0 +1,49 @@
+import HeaderNav from "dx/headerNav";
+import { createRenderComponent } from "utils-internal/tests";
+import navItems from "../../header/__tests__/mockNavArchitects";
+const TAG = "dx-header-nav";
+
+const render = createRenderComponent(TAG, HeaderNav);
+
+describe(TAG, () => {
+    describe("render", () => {
+        it("renders the correct number of nav-list-items", () => {
+            const element = render({ navItems });
+
+            const items = element.shadowRoot.querySelectorAll(".nav-list-item");
+            const dropdownItems = element.shadowRoot.querySelectorAll("dx-tab");
+
+            // items with more options render something different on mobile and desktop whose display is toggled by `display: none;`
+            const expectedItemLength =
+                navItems.length +
+                navItems.filter((app) => !!app.options).length;
+
+            expect(items.length + dropdownItems.length).toBe(
+                expectedItemLength
+            );
+
+            return expect(element).toBeAccessible();
+        });
+    });
+
+    describe("interactions", () => {
+        it("fires requestopennavmenu event when mobile button is clicked", () => {
+            const element = render({ navItems });
+            const mockOpenNav = jest.fn();
+            element.addEventListener("requestopennavmenu", mockOpenNav);
+            const navOption: HTMLElement = element.shadowRoot.querySelector(
+                "dx-tab.nav-list-item-nav-menu"
+            );
+            expect(navOption).not.toBeNull();
+            navOption.click();
+
+            expect(mockOpenNav).toBeCalledTimes(1);
+            const singleCall = mockOpenNav.mock.calls[0][0];
+            expect(singleCall.detail).toBe(
+                navItems.find(({ options }) => options)!.id
+            );
+
+            return expect(element).toBeAccessible();
+        });
+    });
+});

package/src/modules/dx/headerNav/headerNav.css

@@ -0,0 +1,31 @@
+@import "helpers/reset";
+
+a {
+    text-decoration: none;
+}
+
+nav {
+    padding: 0;
+}
+
+.nav-list {
+    display: flex;
+}
+
+.nav-list li {
+    position: relative;
+}
+
+.nav-list-item-nav-menu {
+    display: none;
+}
+
+@media (max-width: 768px) {
+    .nav-list-item-nav-menu {
+        display: flex;
+    }
+
+    dx-dropdown {
+        display: none;
+    }
+}