@salesforcedevs/dx-components 0.0.0-alpha.0

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

@@ -0,0 +1,160 @@
+@import "dxHelpers/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 { OptionWithNested } from "typings/custom";
+import { deepmapOptions } from "dxUtils/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: OptionWithNested[]) {
+        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: OptionWithNested, 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: OptionWithNested[] = [];
+    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/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 "dxUtils/analytics";
+
+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/headerNav.css

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

package/src/modules/dx/headerNav/headerNav.html

@@ -0,0 +1,48 @@
+<template>
+    <nav role="navigation" aria-label={ariaLabel}>
+        <ul class="nav-list">
+            <template for:each={navItems} for:item="navItem">
+                <li key={navItem.id}>
+                    <dx-tab
+                        if:false={navItem.options}
+                        is-active={navItem.isActive}
+                        label={navItem.label}
+                        href={navItem.link.href}
+                        variant={variant}
+                    ></dx-tab>
+
+                    <!-- DESKTOP "MORE CONTENT" NAV ITEM -->
+                    <dx-dropdown
+                        analytics-event="custEv_topNavLinkClick"
+                        if:true={navItem.options}
+                        nav-item-label={navItem.label}
+                        open-on-hover
+                        offset="medium"
+                        options={navItem.options}
+                        placement="bottom"
+                        stay-open-after-change
+                        value={pathname}
+                        value-path="link.href"
+                    >
+                        <dx-tab
+                            label={navItem.label}
+                            variant={variant}
+                            use-icon
+                        ></dx-tab>
+                    </dx-dropdown>
+
+                    <!-- MOBILE "MORE CONTENT" NAV ITEM -->
+                    <dx-tab
+                        if:true={navItem.options}
+                        class="nav-list-item-nav-menu"
+                        data-id={navItem.id}
+                        label={navItem.label}
+                        use-icon
+                        variant={variant}
+                        onclick={requestOpenNavMenu}
+                    ></dx-tab>
+                </li>
+            </template>
+        </ul>
+    </nav>
+</template>

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

@@ -0,0 +1,56 @@
+import { LightningElement, api } from "lwc";
+import { TabVariant, OptionWithNested } from "typings/custom";
+export default class HeaderNav extends LightningElement {
+    @api pathname: string | null = null;
+    @api variant: TabVariant = "default";
+    @api ariaLabel: string = "Primary Navigation";
+
+    @api
+    set navItems(_navItems: OptionWithNested[]) {
+        this._navItems = _navItems;
+    }
+
+    get navItems() {
+        const activeItem = this._navItems
+            .filter((navItem: OptionWithNested) => {
+                if (!navItem.link || navItem.link.href === "/") {
+                    return false;
+                }
+
+                const fileExtension = navItem.link.href.match(/\.[0-9a-z]+$/i);
+                const baseLink = fileExtension
+                    ? navItem.link.href.substring(
+                          0,
+                          navItem.link.href.lastIndexOf("/")
+                      )
+                    : navItem.link.href;
+                return this.pathname?.includes(baseLink);
+            })
+            .sort(
+                (a, b) =>
+                    (b.link?.href.length || 0) - (a.link?.href.length || 0)
+            )[0];
+
+        const items = this._navItems.map((navItem: OptionWithNested) =>
+            navItem.link
+                ? {
+                      ...navItem,
+                      isActive:
+                          navItem.link.href === this.pathname ||
+                          navItem.id === activeItem?.id
+                  }
+                : navItem
+        );
+
+        return items;
+    }
+
+    private _navItems: OptionWithNested[] = [];
+
+    private requestOpenNavMenu(e: PointerEvent) {
+        const detail = (<HTMLButtonElement>e.currentTarget).getAttribute(
+            "data-id"
+        );
+        this.dispatchEvent(new CustomEvent("requestopennavmenu", { detail }));
+    }
+}

package/src/modules/dx/headerSearch/headerSearch.css

@@ -0,0 +1,62 @@
+@import "dxHelpers/reset";
+
+/* DESKTOP */
+
+:host {
+    --toggle-width: var(--dx-g-spacing-5xl);
+}
+
+.desktop_search-container {
+    position: relative;
+    display: flex;
+    height: var(--dx-g-spacing-xl);
+    font-size: var(--dx-g-text-sm);
+    font-family: var(--dx-g-font-sans);
+    color: var(--dx-g-gray-50);
+}
+
+.desktop_search-container dx-input {
+    --dx-c-input-width: calc(
+        var(--dx-c-header-search-width) - var(--toggle-width)
+    );
+}
+
+/* MOBILE */
+
+.mobile_search-button {
+    position: relative;
+    z-index: 3;
+}
+
+.mobile_search-dropdown {
+    --dx-c-popover-border-radius: 0;
+    --dx-c-popover-border: none;
+}
+
+.mobile_search-input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    transition: var(--dx-g-transition-hue-1x);
+    opacity: 0;
+    pointer-events: none;
+
+    --dx-c-input-border: none;
+    --dx-c-input-border-radius: 0;
+    --dx-c-input-border-active: none;
+    --dx-c-input-icon-color: var(--dx-g-blue-vibrant-20);
+    --dx-c-input-padding: 0 var(--dx-g-spacing-4xl) 0 var(--dx-g-spacing-md);
+    --dx-c-input-background: var(--dx-g-brand-current-color-background-2);
+    --dx-c-input-background-active: var(
+        --dx-g-brand-current-color-background-2
+    );
+    --dx-c-input-height: 100% !important;
+    --dx-c-input-width: 100%;
+}
+
+.mobile_search-input.state-open {
+    opacity: 1;
+    pointer-events: auto;
+}

package/src/modules/dx/headerSearch/headerSearch.html

@@ -0,0 +1,62 @@
+<template>
+    <div class={className} role="search" aria-label="Records Search">
+        <!-- MOBILE -->
+        <template if:true={mobile}>
+            <dx-dropdown
+                aria-label="Record Type"
+                class="mobile_search-dropdown"
+                open={isDropdownOpen}
+                options={suggestions}
+                onrequestclose={onDropdownRequestClose}
+                full-width
+                page-padding="0"
+            >
+                <dx-input
+                    aria-label="Record Search Term"
+                    class={mobileSearchInputClassName}
+                    icon-size="large"
+                    icon-symbol="search"
+                    onchange={onInputChange}
+                    onclear={onInputEscape}
+                    onsubmit={onInputSubmit}
+                    onfocus={openDropdown}
+                    placeholder="Search"
+                    size="override"
+                    type="search"
+                ></dx-input>
+            </dx-dropdown>
+            <dx-button
+                class="mobile_search-button"
+                aria-label={mobileSearchButtonAriaLabel}
+                icon-size="large"
+                icon-symbol={mobileSearchButtonIcon}
+                onclick={onMobileSearchButtonClick}
+                variant="tertiary"
+            ></dx-button>
+        </template>
+
+        <!-- DESKTOP -->
+        <template if:false={mobile}>
+            <dx-dropdown
+                options={suggestions}
+                open={isDropdownOpen}
+                onrequestclose={onDropdownRequestClose}
+                offset="small"
+                full-width
+            >
+                <dx-input
+                    aria-label="Record Search Term"
+                    icon-symbol="search"
+                    onchange={onInputChange}
+                    onclear={onInputEscape}
+                    onsubmit={onInputSubmit}
+                    onfocus={openDropdown}
+                    placeholder="Search"
+                    shortcut-key="k"
+                    size="small"
+                    type="search"
+                ></dx-input>
+            </dx-dropdown>
+        </template>
+    </div>
+</template>