@salesforcedevs/dx-components 0.0.0

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>

package/src/modules/dx/headerSearch/headerSearch.ts

@@ -0,0 +1,159 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { PopoverRequestCloseType, OptionWithLink } from "typings/custom";
+import { buildSearchEngine } from "dxUtils/coveo";
+import {
+    StandaloneSearchBox as StandaloneSearchBoxType,
+    StandaloneSearchBoxState,
+    buildStandaloneSearchBox,
+    StandaloneSearchBoxOptions
+} from "@coveo/headless";
+
+const baseSearchHref = `/search`;
+
+export default class HeaderSearch extends LightningElement {
+    @api mobile!: boolean;
+    @api coveoOrganizationId!: string;
+    @api coveoPublicAccessToken!: string;
+    @api coveoSearchPipeline!: string;
+    @api coveoSearchHub!: string;
+
+    private input: HTMLElement | null = null;
+    private isDropdownOpen: boolean = false;
+    private isMobileSearchOpen: boolean = false;
+    private searchBox: StandaloneSearchBoxType | null = null;
+    private searchState: StandaloneSearchBoxState | null = null;
+
+    private get className() {
+        return this.mobile ? null : "desktop_search-container";
+    }
+
+    private get suggestions(): OptionWithLink[] {
+        if (this.searchState) {
+            return this.searchState.suggestions.map(
+                ({ highlightedValue }: { highlightedValue: string }) => ({
+                    id: highlightedValue,
+                    label: highlightedValue,
+                    link: {
+                        href: this.createSearchHref(highlightedValue),
+                        target: null
+                    }
+                })
+            );
+        }
+        return [];
+    }
+
+    private get mobileSearchInputClassName() {
+        return cx(
+            "mobile_search-input",
+            this.isMobileSearchOpen && "state-open"
+        );
+    }
+
+    private get mobileSearchButtonIcon() {
+        return this.isMobileSearchOpen ? "close" : "search";
+    }
+
+    private get mobileSearchButtonAriaLabel() {
+        return this.isMobileSearchOpen
+            ? "Hide mobile search"
+            : "Show mobile search";
+    }
+
+    connectedCallback() {
+        this.instantiateSearchbox();
+    }
+
+    private onDropdownRequestClose(e: CustomEvent) {
+        switch (e.detail as PopoverRequestCloseType) {
+            case "interact-outside":
+            case "keypress-escape":
+                this.closeDropdown();
+                break;
+            default:
+                break;
+        }
+    }
+
+    private instantiateSearchbox() {
+        try {
+            const options: StandaloneSearchBoxOptions = {
+                numberOfSuggestions: 3,
+                redirectionUrl: "https://developer.salesforce.com"
+            };
+
+            const engine = buildSearchEngine({
+                organizationId: this.coveoOrganizationId,
+                publicAccessToken: this.coveoPublicAccessToken,
+                searchPipeline: this.coveoSearchPipeline,
+                searchHub: this.coveoSearchHub
+            });
+
+            this.searchBox = buildStandaloneSearchBox(engine, { options });
+
+            this.searchBox?.subscribe(() => {
+                if (this.searchBox) {
+                    this.searchState = this.searchBox.state;
+                }
+            });
+        } catch (e) {
+            console.error(`Coveo searchbox failed to initialize (${e})`);
+        }
+    }
+
+    private createSearchHref = (value: string | null = "") => {
+        return `${baseSearchHref}#q=${value}`;
+    };
+
+    private onInputChange(e: CustomEvent) {
+        if (this.searchBox) {
+            this.searchBox.updateText(e.detail);
+        }
+    }
+
+    private onInputSubmit(e: CustomEvent) {
+        const href = this.createSearchHref(e.detail || "");
+        window.location.assign(href);
+    }
+
+    private onMobileSearchButtonClick() {
+        this.isMobileSearchOpen = !this.isMobileSearchOpen;
+        const input = this.template.querySelector("dx-input");
+        if (this.isMobileSearchOpen && input) {
+            input.focus();
+            this.openDropdown();
+        } else {
+            this.closeDropdown();
+        }
+        if (!this.isMobileSearchOpen && this.searchBox) {
+            this.searchBox.updateText("");
+        }
+    }
+
+    private openDropdown() {
+        this.isDropdownOpen = true;
+        this.isMobileSearchOpen = true;
+        this.reportState<boolean>(true);
+    }
+
+    private closeDropdown() {
+        this.isDropdownOpen = false;
+        this.isMobileSearchOpen = false;
+        this.reportState<boolean>(false);
+    }
+
+    private onInputEscape() {
+        this.closeDropdown();
+    }
+
+    private reportState<T>(state: T) {
+        this.dispatchEvent(
+            new CustomEvent("statechange", {
+                detail: state,
+                bubbles: true,
+                composed: true
+            })
+        );
+    }
+}

package/src/modules/dx/helmet/helmet.css

@@ -0,0 +1,83 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+span {
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-2xs);
+    color: var(--dx-c-breadcrumb-color);
+    margin-top: 0.5px;
+}
+
+nav {
+    display: flex;
+    align-items: center;
+    height: 100%;
+}
+
+nav > *:not(:last-child) {
+    margin-right: 6px;
+}
+
+nav a,
+nav span {
+    transition: var(--dx-g-transition-hue-1x);
+    display: flex;
+    align-items: center;
+}
+
+a:hover {
+    transition: var(--dx-g-transition-hue-1x);
+    color: var(--dx-c-breadcrumb-hover-color);
+}
+
+.home-link {
+    flex-shrink: 0;
+    margin-right: var(--dx-g-spacing-xs);
+}
+
+.home-link > .home-link-title {
+    color: var(--dx-c-home-link-color);
+    line-height: 18px;
+}
+
+.home-link > svg {
+    margin-right: 12px;
+    width: 18px;
+}
+
+.helmet {
+    height: var(--dx-g-spacing-xl);
+    position: relative;
+}
+
+.helmet.variant_clear {
+    background-color: white;
+
+    --dx-c-home-link-color: var(--dx-g-blue-natural-10);
+    --dx-c-breadcrumb-color: var(--dx-g-gray-50);
+    --dx-c-breadcrumb-hover-color: var(--dx-g-cloud-blue-vibrant-40);
+}
+
+.helmet.variant_dark {
+    background-color: var(--dx-g-blue-vibrant-40);
+
+    --dx-c-home-link-color: white;
+    --dx-c-breadcrumb-color: var(--dx-g-blue-vibrant-90);
+    --dx-c-breadcrumb-hover-color: var(--dx-g-cloud-blue-vibrant-80);
+}
+
+.helmet.variant_light {
+    background-color: var(--dx-g-cloud-blue-vibrant-95);
+
+    --dx-c-home-link-color: var(--dx-g-blue-vibrant-20);
+    --dx-c-breadcrumb-color: var(--dx-g-gray-30);
+    --dx-c-breadcrumb-hover-color: var(--dx-g-cloud-blue-vibrant-40);
+}
+
+.helmet.variant_neutral {
+    background-color: var(--dx-g-gray-95);
+
+    --dx-c-home-link-color: var(--dx-g-gray-30);
+    --dx-c-breadcrumb-color: var(--dx-g-gray-50);
+    --dx-c-breadcrumb-hover-color: var(--dx-g-cloud-blue-vibrant-40);
+}

package/src/modules/dx/helmet/helmet.html

@@ -0,0 +1,39 @@
+<template>
+    <div class={className} style={style}>
+        <nav role="navigation" class="helmet-title">
+            <a
+                href="https://developer.salesforce.com"
+                class="home-link"
+                alt={titleAlt}
+            >
+                <svg
+                    width="28px"
+                    height="20px"
+                    viewBox="0 0 28 20"
+                    version="1.1"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <title>{title}</title>
+                    <g
+                        id="Section-/-Nav-/-Footer-/-Architects"
+                        transform="translate(-148.000000, -447.000000)"
+                    >
+                        <path
+                            d="M163.003774,447.648649 C164.8,447.648649 166.384906,448.675676 167.230189,450.189189 C167.969811,449.864865 168.762264,449.648649 169.607547,449.648649 C172.883019,449.648649 175.524528,452.351351 175.524528,455.702703 C175.524528,459.054054 172.883019,461.756757 169.607547,461.756757 C169.184906,461.756757 168.815094,461.702703 168.445283,461.648649 C167.70566,463 166.279245,463.918919 164.641509,463.918919 C163.954717,463.918919 163.320755,463.756757 162.739623,463.486486 C162,465.27027 160.256604,466.513514 158.196226,466.513514 C156.083019,466.513514 154.233962,465.162162 153.54717,463.216216 C153.230189,463.27027 152.913208,463.324324 152.596226,463.324324 C150.060377,463.324324 148,461.216216 148,458.621622 C148,456.891892 148.898113,455.378378 150.271698,454.567568 C150.007547,453.918919 149.849057,453.162162 149.849057,452.405405 C149.849057,449.432432 152.226415,447 155.184906,447 C157.033962,447.054054 158.566038,447.864865 159.516981,449.162162 C160.415094,448.243243 161.630189,447.648649 163.003774,447.648649 Z"
+                            id="Path"
+                            fill="#00A1E0"
+                        ></path>
+                    </g>
+                </svg>
+                <span class="home-link-title">{title}</span>
+            </a>
+            <span>/</span>
+            <span if:true={currentPropertyHref}>
+                <a href={currentPropertyHref} alt={currentPropertyAlt}>
+                    {currentPropertyTitle}
+                </a>
+            </span>
+            <span if:false={currentPropertyHref}>{currentPropertyTitle}</span>
+        </nav>
+    </div>
+</template>