@salesforcedevs/dx-components 0.3.12 → 0.3.14-banner-alpha1

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

@@ -1,5 +1,5 @@
 import { LightningElement, api } from "lwc";
-import { track } from "dx/instrumentation";
+import { track } from "dxUtils/analytics";
 
 export default class HeaderMobileNavMenuOption extends LightningElement {
     @api href: string | null = null;
@@ -11,9 +11,10 @@ export default class HeaderMobileNavMenuOption extends LightningElement {
 
     private sendGtm(e: PointerEvent) {
         track(e.currentTarget, "custEv_topNavLinkClick", {
-            heading_text: this.menuLabel || undefined,
-            sub_heading_text: this.itemLabel || undefined,
-            link_text: this.href || undefined
+            navHeading: this.menuLabel || undefined,
+            navSubHeading: this.itemLabel || undefined,
+            clickText: this.href || undefined,
+            pageLocation: window.location.pathname || undefined
         });
     }
 }

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

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 a {
     text-decoration: none;
@@ -16,50 +16,6 @@ nav {
     position: relative;
 }
 
-.nav-list-item {
-    position: relative;
-    display: flex;
-    align-items: center;
-    height: var(--dx-g-spacing-xl);
-    padding: 0 var(--dx-g-spacing-md);
-    border: 0;
-    border-radius: var(--dx-g-spacing-md);
-    font-family: var(--dx-g-font-display);
-    font-size: var(--dx-g-text-sm);
-    white-space: nowrap;
-    color: var(--dx-g-blue-vibrant-20);
-    background: transparent;
-    transition: var(--dx-g-transition-hue-1x);
-    cursor: pointer;
-    outline-offset: -1px;
-}
-
-.nav-list-item > span {
-    margin-top: var(--dx-g-spacing-xs);
-}
-
-button.nav-list-item > dx-icon {
-    margin-left: var(--dx-g-spacing-sm);
-    color: var(--dx-g-blue-vibrant-20);
-}
-
-.nav-list-item:hover,
-.nav-list-item:active,
-button.nav-list-item[aria-expanded="true"] {
-    background: var(--dx-g-brand-current-button-color-background-inactive);
-}
-
-.nav-list-item.state-active {
-    background: var(--dx-g-brand-current-button-color-background-active);
-    color: var(--dx-g-brand-current-color);
-}
-
-button.nav-list-item:hover > *:last-child,
-button.nav-list-item:active > *:last-child,
-button.nav-list-item[aria-expanded="true"] > *:last-child {
-    transform: rotateX(180deg);
-}
-
 .nav-list-item-nav-menu {
     display: none;
 }

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

@@ -1,43 +1,46 @@
 <template>
-    <nav role="navigation" aria-label="Navigation Bar">
+    <nav role="navigation" aria-label={ariaLabel}>
         <ul class="nav-list">
             <template for:each={navItems} for:item="navItem">
                 <li key={navItem.id}>
-                    <dx-header-nav-option
-                        class-name={navItem.className}
+                    <dx-tab
+                        if:false={navItem.options}
+                        is-active={navItem.isActive}
                         label={navItem.label}
                         href={navItem.link.href}
-                        if:false={navItem.options}
-                    ></dx-header-nav-option>
+                        variant={variant}
+                    ></dx-tab>
 
                     <!-- DESKTOP "MORE CONTENT" NAV ITEM -->
                     <dx-dropdown
-                        options={navItem.options}
+                        analytics-event="custEv_topNavLinkClick"
                         if:true={navItem.options}
-                        placement="bottom"
+                        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"
-                        nav-item-label={navItem.label}
-                        stay-open-after-change
-                        open-on-hover
                     >
-                        <button class="nav-list-item">
-                            <span>{navItem.label}</span>
-                            <dx-icon symbol="chevrondown"></dx-icon>
-                        </button>
+                        <dx-tab
+                            label={navItem.label}
+                            variant={variant}
+                            use-icon
+                        ></dx-tab>
                     </dx-dropdown>
 
                     <!-- MOBILE "MORE CONTENT" NAV ITEM -->
-                    <button
-                        class="nav-list-item nav-list-item-nav-menu"
+                    <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}
-                    >
-                        <span>{navItem.label}</span>
-                        <dx-icon symbol="chevrondown"></dx-icon>
-                    </button>
+                    ></dx-tab>
                 </li>
             </template>
         </ul>

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

@@ -1,28 +1,51 @@
 import { LightningElement, api } from "lwc";
-import cx from "classnames";
-import { Option } from "typings/custom";
+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: Option[]) {
+    set navItems(_navItems: OptionWithNested[]) {
         this._navItems = _navItems;
     }
+
     get navItems() {
-        return this._navItems.map((navItem: Option) =>
+        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,
-                      className: cx(
-                          "nav-list-item",
-                          navItem.link.href === this.pathname && "state-active"
-                      )
+                      isActive:
+                          navItem.link.href === this.pathname ||
+                          navItem.id === activeItem?.id
                   }
                 : navItem
         );
+
+        return items;
     }
 
-    private _navItems: Option[] = [];
+    private _navItems: OptionWithNested[] = [];
 
     private requestOpenNavMenu(e: PointerEvent) {
         const detail = (<HTMLButtonElement>e.currentTarget).getAttribute(

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

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 /* DESKTOP */
 
@@ -13,45 +13,9 @@
     font-size: var(--dx-g-text-sm);
     font-family: var(--dx-g-font-sans);
     color: var(--dx-g-gray-50);
-    width: var(--dx-c-header-search-width);
-}
-
-.search_scope-toggle {
-    position: relative;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-shrink: 0;
-    height: 100%;
-    width: var(--toggle-width);
-
-    /* border */
-    border: 1px solid var(--dx-g-gray-90);
-    border-right-color: transparent;
-    border-radius: var(--dx-g-spacing-xs);
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    outline: none;
-    background: white;
-    padding: var(--dx-g-spacing-sm);
-    transition: var(--dx-g-transition-hue-1x);
-}
-
-.search_scope-toggle:focus {
-    border: 1px solid var(--dx-g-blue-vibrant-50);
-}
-
-.search_scope-toggle > *:last-child {
-    margin-left: var(--dx-g-spacing-sm);
-}
-
-.search_scope-toggle[aria-expanded="true"] > *:last-child {
-    transform: rotateX(180deg);
 }
 
 .desktop_search-container dx-input {
-    --dx-c-input-border-radius: 0 var(--dx-g-spacing-xs) var(--dx-g-spacing-xs)
-        0;
     --dx-c-input-width: calc(
         var(--dx-c-header-search-width) - var(--toggle-width)
     );

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

@@ -8,8 +8,7 @@
                 open={isDropdownOpen}
                 options={suggestions}
                 onrequestclose={onDropdownRequestClose}
-                onrequestopen={openPopover}
-                full-width="true"
+                full-width
                 page-padding="0"
             >
                 <dx-input
@@ -18,12 +17,12 @@
                     icon-size="large"
                     icon-symbol="search"
                     onchange={onInputChange}
-                    onescape={onInputEscape}
+                    onclear={onInputEscape}
                     onsubmit={onInputSubmit}
+                    onfocus={openDropdown}
                     placeholder="Search"
                     size="override"
                     type="search"
-                    value={searchBox.value}
                 ></dx-input>
             </dx-dropdown>
             <dx-button
@@ -38,42 +37,24 @@
 
         <!-- DESKTOP -->
         <template if:false={mobile}>
-            <dx-dropdown
-                aria-label="Record Type"
-                class="desktop_search-dropdown"
-                options={scopes}
-                value={scope}
-                onchange={onScopeChange}
-                offset="small"
-                small
-            >
-                <button class="search_scope-toggle">
-                    <span>{scopeLabel}</span>
-                    <dx-icon symbol="chevrondown"></dx-icon>
-                </button>
-            </dx-dropdown>
             <dx-dropdown
                 options={suggestions}
                 open={isDropdownOpen}
-                placement="bottom-end"
                 onrequestclose={onDropdownRequestClose}
-                onrequestopen={openPopover}
                 offset="small"
-                width="220px"
-                temp-id="banana"
+                full-width
             >
                 <dx-input
                     aria-label="Record Search Term"
                     icon-symbol="search"
                     onchange={onInputChange}
-                    onescape={onInputEscape}
-                    onfocus={onInputFocus}
+                    onclear={onInputEscape}
                     onsubmit={onInputSubmit}
+                    onfocus={openDropdown}
                     placeholder="Search"
                     shortcut-key="k"
                     size="small"
                     type="search"
-                    value={searchBox.value}
                 ></dx-input>
             </dx-dropdown>
         </template>

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

@@ -1,15 +1,13 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { PopoverRequestCloseType, Option } from "typings/custom";
+import { PopoverRequestCloseType, OptionWithLink } from "typings/custom";
+import { buildSearchEngine } from "dxUtils/coveo";
 import {
-    HeadlessEngine,
     StandaloneSearchBox as StandaloneSearchBoxType,
-    StandaloneSearchBoxOptions,
     StandaloneSearchBoxState,
     buildStandaloneSearchBox,
-    searchAppReducers
+    StandaloneSearchBoxOptions
 } from "@coveo/headless";
-import scopes from "./scopes";
 
 const baseSearchHref = `/search`;
 
@@ -23,8 +21,6 @@ export default class HeaderSearch extends LightningElement {
     private input: HTMLElement | null = null;
     private isDropdownOpen: boolean = false;
     private isMobileSearchOpen: boolean = false;
-    private scope: string = "all";
-    private scopes: Option[] = scopes;
     private searchBox: StandaloneSearchBoxType | null = null;
     private searchState: StandaloneSearchBoxState | null = null;
 
@@ -32,14 +28,14 @@ export default class HeaderSearch extends LightningElement {
         return this.mobile ? null : "desktop_search-container";
     }
 
-    private get suggestions(): Option[] {
+    private get suggestions(): OptionWithLink[] {
         if (this.searchState) {
             return this.searchState.suggestions.map(
-                ({ value }: { value: string }) => ({
-                    id: value,
-                    label: value,
+                ({ highlightedValue }: { highlightedValue: string }) => ({
+                    id: highlightedValue,
+                    label: highlightedValue,
                     link: {
-                        href: this.createSearchHref(value),
+                        href: this.createSearchHref(highlightedValue),
                         target: null
                     }
                 })
@@ -65,11 +61,6 @@ export default class HeaderSearch extends LightningElement {
             : "Show mobile search";
     }
 
-    private get scopeLabel() {
-        const scope = this.scopes.find(({ id }) => id === this.scope);
-        return scope!.label;
-    }
-
     connectedCallback() {
         this.instantiateSearchbox();
     }
@@ -78,7 +69,7 @@ export default class HeaderSearch extends LightningElement {
         switch (e.detail as PopoverRequestCloseType) {
             case "interact-outside":
             case "keypress-escape":
-                this.closePopover();
+                this.closeDropdown();
                 break;
             default:
                 break;
@@ -86,41 +77,35 @@ export default class HeaderSearch extends LightningElement {
     }
 
     private instantiateSearchbox() {
-        const options: StandaloneSearchBoxOptions = {
-            numberOfSuggestions: 3,
-            redirectionUrl: "https://beta.developer.salesforce.com"
-        };
+        try {
+            const options: StandaloneSearchBoxOptions = {
+                numberOfSuggestions: 3,
+                redirectionUrl: "https://developer.salesforce.com"
+            };
 
-        const engine = new HeadlessEngine({
-            configuration: {
+            const engine = buildSearchEngine({
                 organizationId: this.coveoOrganizationId,
-                accessToken: this.coveoPublicAccessToken,
-                search: {
-                    pipeline: this.coveoSearchPipeline,
-                    searchHub: this.coveoSearchHub
+                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;
                 }
-            },
-            reducers: searchAppReducers
-        });
-
-        this.searchBox = buildStandaloneSearchBox(engine, { options });
-        this.searchBox.subscribe(() => {
-            if (this.searchBox) {
-                this.searchState = this.searchBox.state;
-            }
-        });
-        this.searchBox.updateText("");
+            });
+        } catch (e) {
+            console.error(`Coveo searchbox failed to initialize (${e})`);
+        }
     }
 
     private createSearchHref = (value: string | null = "") => {
-        return `${baseSearchHref}#q=${value}&t=${this.scope}`;
+        return `${baseSearchHref}#q=${value}`;
     };
 
-    private onScopeChange(e: PointerEvent) {
-        // @ts-ignore (ts thinks e.detail is a number)
-        this.scope = e.detail;
-    }
-
     private onInputChange(e: CustomEvent) {
         if (this.searchBox) {
             this.searchBox.updateText(e.detail);
@@ -137,26 +122,38 @@ export default class HeaderSearch extends LightningElement {
         const input = this.template.querySelector("dx-input");
         if (this.isMobileSearchOpen && input) {
             input.focus();
-            this.openPopover();
+            this.openDropdown();
         } else {
-            this.closePopover();
+            this.closeDropdown();
         }
         if (!this.isMobileSearchOpen && this.searchBox) {
             this.searchBox.updateText("");
         }
     }
 
-    private openPopover() {
+    private openDropdown() {
         this.isDropdownOpen = true;
         this.isMobileSearchOpen = true;
+        this.reportState<boolean>(true);
     }
 
-    private closePopover() {
+    private closeDropdown() {
         this.isDropdownOpen = false;
         this.isMobileSearchOpen = false;
+        this.reportState<boolean>(false);
     }
 
     private onInputEscape() {
-        this.closePopover();
+        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

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 span {
     font-family: var(--dx-g-font-sans);

package/src/modules/dx/hr/hr.css

@@ -1,24 +1,27 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     --dx-c-hr-padding-horizontal: var(--dx-g-page-padding-horizontal);
 }
 
-p {
+p,
+h2 {
     display: flex;
     flex-direction: row;
     padding: 0 var(--dx-c-hr-padding-horizontal);
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-sm);
     color: var(--dx-g-blue-vibrant-20);
+    text-transform: capitalize;
     letter-spacing: 0;
     line-height: 18px;
 }
 
 p::before,
-p::after {
-    transform: translateY(-2px); /* offset for display font ghost padding */
+h2::before,
+p::after,
+h2::after {
     content: "";
     flex: 1 1;
     border-bottom: 2px solid var(--dx-g-gray-95);
@@ -27,18 +30,18 @@ p::after {
     margin-left: 0;
 }
 
-p.heading::before {
+h2::before {
     margin-right: var(--dx-g-spacing-md);
 }
 
-p.heading::after {
+h2::after {
     margin-left: var(--dx-g-spacing-md);
 }
 
 dx-button {
     display: flex;
     width: 100%;
-    text-transform: uppercase;
+    text-transform: capitalize;
     padding: 0 var(--dx-c-hr-padding-horizontal);
 }
 
@@ -46,7 +49,6 @@ dx-button::before {
     content: "";
     border-bottom: 2px solid var(--dx-g-gray-95);
     flex: 1 1;
-    transform: translateY(-2px); /* offset for display font ghost padding */
     margin: auto;
     margin-right: var(--dx-g-spacing-md);
 }

package/src/modules/dx/hr/hr.html

@@ -1,28 +1,22 @@
 <template>
-    <p
-        if:false={isButtonVariant}
-        part="hr"
-        style={style}
-        class={className}
-        role={ariaRole}
-        aria-level={_ariaLevel}
-    >
-        {text}
-    </p>
+    <p if:true={isSeparator} part="hr" role="separator" style={style}></p>
+    <h2 if:true={isHeading} part="hr" style={style}>{text}</h2>
     <dx-button
         if:true={isLink}
         href={href}
         icon-symbol="forward"
+        style={style}
         target={target}
-        variant="inline-inherit"
+        variant="inline"
     >
         {text}
     </dx-button>
     <dx-button
         if:true={isLoadMore}
         icon-symbol="arrowdown"
-        variant="inline-inherit"
         onclick={handleClick}
+        style={style}
+        variant="inline"
     >
         {text}
     </dx-button>

package/src/modules/dx/hr/hr.ts

@@ -4,22 +4,13 @@ import { HrVariant } from "typings/custom";
 
 export default class Hr extends LightningElement {
     @api text: string | null = null;
-    @api ariaLevel: string | null = null;
-    @api href: string | null;
+    @api href?: string | null;
     @api target: string | null = "_top";
     @api spacing: string | null = "2xl";
-    @api variant: HrVariant | null;
-
-    private get _ariaLevel() {
-        return this.variant ? this.ariaLevel || "3" : null;
-    }
+    @api variant: HrVariant | null = null;
 
     private get ariaRole() {
-        return this.variant === "heading" ? "heading" : "separator";
-    }
-
-    private get className() {
-        return this.variant ? this.variant : "";
+        return this.isHeading ? "heading" : "separator";
     }
 
     private get style() {
@@ -40,6 +31,14 @@ export default class Hr extends LightningElement {
         return this.variant === "load-more";
     }
 
+    private get isHeading() {
+        return !this.isButtonVariant && this.text;
+    }
+
+    private get isSeparator() {
+        return !this.isButtonVariant && !this.text;
+    }
+
     handleClick() {
         this.dispatchEvent(new CustomEvent("loadmore"));
     }

package/src/modules/dx/icon/icon.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 :host {
     display: block;

package/src/modules/dx/icon/icon.ts

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import { IconSprite, IconSize, IconSymbol } from "typings/custom";
-import { toDxColor } from "utils/css";
+import { toDxColor } from "dxUtils/css";
 
 const fetches = new Map<string, Promise<any>>();