@salesforcedevs/dx-components 0.10.0 → 0.10.1-alpha.100

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

@@ -3,13 +3,13 @@
         <ul class="nav-list">
             <template for:each={navItems} for:item="navItem">
                 <li key={navItem.id}>
-                    <dx-header-nav-option
+                    <dx-tab
                         if:false={navItem.options}
                         is-active={navItem.isActive}
                         label={navItem.label}
                         href={navItem.link.href}
                         variant={variant}
-                    ></dx-header-nav-option>
+                    ></dx-tab>
 
                     <!-- DESKTOP "MORE CONTENT" NAV ITEM -->
                     <dx-dropdown
@@ -23,21 +23,23 @@
                         value={pathname}
                         value-path="link.href"
                     >
-                        <dx-header-nav-option
+                        <dx-tab
                             label={navItem.label}
                             variant={variant}
-                        ></dx-header-nav-option>
+                            use-icon
+                        ></dx-tab>
                     </dx-dropdown>
 
                     <!-- MOBILE "MORE CONTENT" NAV ITEM -->
-                    <dx-header-nav-option
+                    <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-header-nav-option>
+                    ></dx-tab>
                 </li>
             </template>
         </ul>

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

@@ -1,8 +1,8 @@
 import { LightningElement, api } from "lwc";
-import { HeaderNavVariant, Option } from "typings/custom";
+import { TabVariant, Option } from "typings/custom";
 export default class HeaderNav extends LightningElement {
     @api pathname: string | null = null;
-    @api variant: HeaderNavVariant = "default";
+    @api variant: TabVariant = "default";
     @api ariaLabel: string = "Navigation Bar";
 
     @api

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

@@ -8,7 +8,6 @@
                 open={isDropdownOpen}
                 options={suggestions}
                 onrequestclose={onDropdownRequestClose}
-                onrequestopen={openPopover}
                 full-width
                 page-padding="0"
             >
@@ -20,6 +19,7 @@
                     onchange={onInputChange}
                     onclear={onInputEscape}
                     onsubmit={onInputSubmit}
+                    onfocus={openDropdown}
                     placeholder="Search"
                     size="override"
                     type="search"
@@ -43,10 +43,8 @@
                 open={isDropdownOpen}
                 placement="bottom-end"
                 onrequestclose={onDropdownRequestClose}
-                onrequestopen={openPopover}
                 offset="small"
                 full-width
-                temp-id="banana"
             >
                 <dx-input
                     aria-label="Record Search Term"
@@ -54,7 +52,7 @@
                     onchange={onInputChange}
                     onclear={onInputEscape}
                     onsubmit={onInputSubmit}
-                    onfocus={openPopover}
+                    onfocus={openDropdown}
                     placeholder="Search"
                     shortcut-key="k"
                     size="small"

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

@@ -1,13 +1,12 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { PopoverRequestCloseType, Option } from "typings/custom";
+import { buildSearchEngine } from "utils/coveo";
 import {
-    HeadlessEngine,
     StandaloneSearchBox as StandaloneSearchBoxType,
-    StandaloneSearchBoxOptions,
     StandaloneSearchBoxState,
     buildStandaloneSearchBox,
-    searchAppReducers
+    StandaloneSearchBoxOptions
 } from "@coveo/headless";
 
 const baseSearchHref = `/search`;
@@ -32,11 +31,11 @@ export default class HeaderSearch extends LightningElement {
     private get suggestions(): Option[] {
         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
                     }
                 })
@@ -70,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;
@@ -83,25 +82,20 @@ export default class HeaderSearch extends LightningElement {
             redirectionUrl: "https://developer.salesforce.com"
         };
 
-        const engine = new HeadlessEngine({
-            configuration: {
-                organizationId: this.coveoOrganizationId,
-                accessToken: this.coveoPublicAccessToken,
-                search: {
-                    pipeline: this.coveoSearchPipeline,
-                    searchHub: this.coveoSearchHub
-                }
-            },
-            reducers: searchAppReducers
+        const engine = buildSearchEngine({
+            organizationId: this.coveoOrganizationId,
+            publicAccessToken: this.coveoPublicAccessToken,
+            searchPipeline: this.coveoSearchPipeline,
+            searchHub: this.coveoSearchHub
         });
 
         this.searchBox = buildStandaloneSearchBox(engine, { options });
-        this.searchBox.subscribe(() => {
+
+        this.searchBox?.subscribe(() => {
             if (this.searchBox) {
                 this.searchState = this.searchBox.state;
             }
         });
-        this.searchBox.updateText("");
     }
 
     private createSearchHref = (value: string | null = "") => {
@@ -124,29 +118,29 @@ 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) {

package/src/modules/dx/newsletterForm/newsletterForm.html

@@ -4,9 +4,11 @@
         onchange={handleChange}
         onkeydown={handleKeyDown}
     >
-        <h4 class="dx-text-heading-8">
-            Sign up now to receive the newsletter.
-        </h4>
+        <slot name="form-heading">
+            <h4 class="newsletter-form-heading dx-text-heading-8">
+                Sign up now to receive the newsletter.
+            </h4>
+        </slot>
         <dx-input
             name="fname"
             value={firstName}

package/src/modules/dx/popover/popover.ts

@@ -212,23 +212,27 @@ export default class Popover extends LightningElement {
     };
 
     private onControlClick = () => {
-        if (this.controlled) {
+        if (this.controlled && this.open) {
             this.dispatchRequestCloseEvent("click-control");
             return;
         }
 
+        if (this.controlled && !this.open) {
+            this.dispatchEvent(
+                new CustomEvent("requestopen", {
+                    bubbles: true,
+                    composed: true
+                })
+            );
+            return;
+        }
+
         if (this.open) {
             this.closePopover();
             return;
         }
 
         this.openPopover();
-        this.dispatchEvent(
-            new CustomEvent("requestopen", {
-                bubbles: true,
-                composed: true
-            })
-        );
     };
 
     private onSlotChange(e: LightningSlotElement) {