@salesforcedevs/dx-components 0.25.5 → 0.26.1-alpha0.3

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

@@ -1,27 +0,0 @@
-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

@@ -1,123 +0,0 @@
-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

@@ -1,160 +0,0 @@
-@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

@@ -1,73 +0,0 @@
-<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

@@ -1,102 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

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

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

@@ -1,14 +0,0 @@
-<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

@@ -1,20 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,31 +0,0 @@
-@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;
-    }
-}