@salesforcedevs/dx-components 1.3.243-newdocux-alpha5 → 1.3.244-alpha

package/lwc.config.json

@@ -78,7 +78,6 @@
         "dx/select",
         "dx/sidebar",
         "dx/sidebarOld",
-        "dx/sidebarFooterNav",
         "dx/skipNavLink",
         "dx/socials",
         "dx/spinner",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.243-newdocux-alpha5",
+    "version": "1.3.244-alpha",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/button/button.html

@@ -7,7 +7,7 @@
         aria-label={ariaLabel}
         part="container"
     >
-        <span if:false={loading} part="content">
+        <span if:false={loading}>
             <slot onslotchange={onSlotChange}></slot>
         </span>
         <dx-icon
@@ -29,7 +29,7 @@
         aria-label={ariaLabel}
         part="container"
     >
-        <span if:false={loading} part="content">
+        <span if:false={loading}>
             <slot onslotchange={onSlotChange}></slot>
         </span>
         <dx-icon

package/src/modules/dx/button/button.ts

@@ -80,6 +80,6 @@ export default class Button extends LightningElement {
 
     private onSlotChange(e: LightningSlotElement) {
         const slot = e.target;
-        this.isSlotEmpty = slot.assignedNodes().length === 0;
+        this.isSlotEmpty = slot.assignedElements().length !== 0;
     }
 }

package/src/modules/dx/coveoRecommendations/coveoRecommendations.ts

@@ -1,9 +1,12 @@
 import { LightningElement, api } from "lwc";
 
+const SEARCH_HUB = "developerWebsiteBlogs";
 export default class CoveoRecommendations extends LightningElement {
     @api coveoAuthToken!: string;
+    @api coveoOrganizationId!: string;
 
     _recommendations = [] as any[];
+    _searchTime = 0;
 
     private get recommendations(): any[] {
         return this._recommendations || [];
@@ -17,6 +20,7 @@ export default class CoveoRecommendations extends LightningElement {
             "__coveo.analytics.history"
         );
         const url = "https://platform.cloud.coveo.com/rest/search/v2";
+        const searchStart = performance.now();
         fetch(url, {
             headers: {
                 Authorization: `Bearer ${this.coveoAuthToken}`,
@@ -25,12 +29,15 @@ export default class CoveoRecommendations extends LightningElement {
             method: "POST",
             body: JSON.stringify({
                 pipeline: "Recommendations_Developer_Blogs",
-                searchHub: "developerWebsiteBlogs",
+                searchHub: SEARCH_HUB,
                 numberOfResults: 3,
-                actionsHistory: JSON.parse(actionsHistory!)
+                actionsHistory: JSON.parse(actionsHistory!),
+                isGuestUser: true
             })
         }).then(
             async (response) => {
+                this._searchTime = performance.now() - searchStart;
+                this.logSearchAnalytics();
                 try {
                     const results = (await response.json()).results;
                     const blogDataLoadTasks = results
@@ -57,4 +64,22 @@ export default class CoveoRecommendations extends LightningElement {
             }
         );
     }
+
+    logSearchAnalytics = () => {
+        const payload = {
+            anonymous: true,
+            language: "en",
+            originLevel1: SEARCH_HUB,
+            originLevel2: SEARCH_HUB,
+            actionCause: "recommendationInterfaceLoad",
+            responseTime: this._searchTime
+        };
+        fetch(
+            `https://${this.coveoOrganizationId}.analytics.org.coveo.com/rest/ua/v15/analytics/search`,
+            {
+                method: "POST",
+                body: JSON.stringify(payload)
+            }
+        );
+    };
 }

package/src/modules/dx/dropdownOption/dropdownOption.css

@@ -38,7 +38,7 @@
 }
 
 .option:active {
-    background: var(--dx-g-cloud-blue-vibrant-95) !important;
+    background: var(--dx-g-blue-vibrant-95) !important;
 }
 
 .option:not(.option-active):hover {
@@ -46,9 +46,7 @@
 }
 
 .option-active {
-    --dx-c-dropdown-option-label-color: var(--dx-g-blue-vibrant-50);
-
-    background: var(--dx-g-cloud-blue-vibrant-95);
+    background: var(--dx-g-blue-vibrant-95);
 }
 
 .option_details {
@@ -69,7 +67,7 @@
     color: var(--dx-c-dropdown-option-label-color, var(--dx-g-blue-vibrant-50));
     display: flex;
     align-items: center;
-    font-weight: var(--dx-c-dropdown-option-font-weight, var(--dx-g-font-bold));
+    font-weight: var(--dx-g-font-bold);
     font-size: var(--dx-c-dropdown-option-font-size, var(--dx-g-text-base));
 }
 

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

@@ -10,26 +10,17 @@ nav {
 
 .nav-list {
     display: flex;
-    margin-top: calc(var(--dx-g-spacing-2xs) + 1px);
 }
 
 .nav-list li {
     position: relative;
 }
 
-.nav-list li:not(:last-child) {
-    margin-right: var(--dx-g-spacing-md);
-}
-
 .nav-list-item-nav-menu {
     display: none;
 }
 
 @media (max-width: 768px) {
-    .nav-list {
-        margin-top: 0;
-    }
-
     .nav-list-item-nav-menu {
         display: flex;
     }

package/src/modules/dx/popover/popover.css

@@ -28,7 +28,7 @@
     max-height: 65vh;
     padding: var(--popover-padding);
     overflow-y: auto;
-    transition: var(--popover-transition);
+    transition: opacity 0.2s linear, transform 0.2s linear;
     transition-delay: 0.02s;
     transform: translateY(var(--dx-g-spacing-xs));
     opacity: 0;
@@ -41,7 +41,7 @@
 
 .popover-container_open .popover {
     opacity: 1;
-    transform: var(--popover-container-open-transform);
+    transform: translateY(0);
 }
 
 .popover-overridewidth {

package/src/modules/dx/searchResults/coveo.css

@@ -7944,7 +7944,7 @@ select.coveo-dropdown::-ms-expand {
 
 @font-face {
   font-family: "Lato";
-  src: url('https://static.cloud.coveo.com/searchui/v2.10113/0/fonts/lato.woff2'), url('https://staticdev.cloud.coveo.com/searchui/v2.10113/0/fonts/lato.woff2'), url('../fonts/lato.woff2'), url('https://static.cloud.coveo.com/searchui/v2.10113/0/fonts/lato.woff'), url('https://staticdev.cloud.coveo.com/searchui/v2.10113/0/fonts/lato.woff'), url('../fonts/lato.woff');
+  src: url('https://static.cloud.coveo.com/searchui/v2.10115/0/fonts/lato.woff2'), url('https://staticdev.cloud.coveo.com/searchui/v2.10115/0/fonts/lato.woff2'), url('../fonts/lato.woff2'), url('https://static.cloud.coveo.com/searchui/v2.10115/0/fonts/lato.woff'), url('https://staticdev.cloud.coveo.com/searchui/v2.10115/0/fonts/lato.woff'), url('../fonts/lato.woff');
   font-weight: normal;
   font-style: normal;
 }

package/src/modules/dx/sidebar/sidebar.css

@@ -15,7 +15,7 @@ dx-empty-state {
 
 .sidebar-content {
     overflow-y: auto;
-    padding: var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-2xl);
+    padding-bottom: var(--dx-g-spacing-md);
 }
 
 .loading-skeleton {
@@ -53,14 +53,6 @@ dx-empty-state {
     --dx-c-button-secondary-color-hover: var(--dx-g-gray-80);
 }
 
-.results-heading {
-    --dx-g-text-body-color: var(--sds-g-gray-14);
-
-    margin-bottom: var(--dx-g-spacing-sm);
-    padding-top: var(--dx-g-spacing-smd);
-    font-weight: var(--dx-g-font-bold);
-}
-
 @media (max-width: 768px) {
     :host {
         width: 100%;
@@ -69,4 +61,8 @@ dx-empty-state {
     .loading-skeleton {
         width: 100%;
     }
+
+    .sidebar-content-tree {
+        padding: 0 var(--dx-g-spacing-sm);
+    }
 }

package/src/modules/dx/sidebar/sidebar.html

@@ -1,7 +1,7 @@
 <template>
     <div class={containerClass} part="container">
         <div
-            lwc:if={mobile}
+            if:true={mobile}
             class="header padding-horizontal"
             onclick={onToggleClick}
         >
@@ -16,17 +16,22 @@
                     <dx-icon
                         sprite="utility"
                         symbol={menuSymbol}
-                        color="blue-vibrant-50"
-                        size="medium"
+                        color="blue-vibrant-20"
                     ></dx-icon>
                 </dx-button>
             </div>
         </div>
-        <div class="sidebar-header" show-shadow={showBoxShadow}>
-            <div class="header padding-horizontal" lwc:if={isDesktop}>
+
+        <div class="sidebar-header padding-horizontal">
+            <div class="header" if:false={mobile}>
                 <h2 class="dx-text-display-6 header-title">{header}</h2>
+                <slot name="header"></slot>
             </div>
-            <div class="search padding-horizontal">
+            <div class="mobile-header" if:true={mobile}>
+                <h2 class="dx-text-display-6">{header}</h2>
+                <slot name="header"></slot>
+            </div>
+            <div class="search">
                 <dx-sidebar-search
                     onchange={onSearchChange}
                     onloading={onSearchLoading}
@@ -36,10 +41,9 @@
                     coveo-advanced-query-config={coveoAdvancedQueryConfig}
                 ></dx-sidebar-search>
             </div>
-            <slot name="version-picker"></slot>
             <h2
-                class="results-heading dx-text-body-3 padding-horizontal"
-                lwc:if={showResultsHeading}
+                class="results-heading dx-text-display-8"
+                if:true={showResultsHeading}
             >
                 Results
             </h2>
@@ -49,13 +53,13 @@
             onscroll={onSidebarSearchContentScroll}
         >
             <img
-                lwc:if={isSearchLoading}
+                if:true={isSearchLoading}
                 class="loading-skeleton padding-horizontal"
                 src="https://a.sfdcstatic.com/developer-website/images/sidebar-loading.svg"
                 alt="loading"
             />
             <template
-                lwc:if={showSearchResults}
+                if:true={showSearchResults}
                 for:each={searchResults}
                 for:item="result"
             >
@@ -79,7 +83,7 @@
                 size="small"
             ></dx-empty-state>
         </div>
-        <div class={sidebarContentClass} onscroll={handleScroll}>
+        <div class="sidebar-content sidebar-content-tree">
             <dx-tree
                 for:each={trees}
                 for:item="tree"
@@ -91,25 +95,5 @@
                 onselecteditemrendered={onSelectedItemRendered}
             ></dx-tree>
         </div>
-        <template lwc:if={mobile}>
-            <div lwc:if={hasMobileSidebarFooter} class="footer-nav">
-                <dx-sidebar-footer-nav
-                    lang-value-path={langValuePath}
-                    language={language}
-                    languages={languages}
-                ></dx-sidebar-footer-nav>
-            </div>
-        </template>
-        <template lwc:else>
-            <div lwc:if={hasSidebarFooter} class="footer-nav">
-                <dx-sidebar-footer-nav
-                    lang-value-path={langValuePath}
-                    language={language}
-                    languages={languages}
-                    bail-href={bailHref}
-                    bail-label={bailLabel}
-                ></dx-sidebar-footer-nav>
-            </div>
-        </template>
     </div>
 </template>

package/src/modules/dx/sidebar/sidebar.ts

@@ -15,6 +15,15 @@ export default class Sidebar extends SidebarBase {
     @api coveoAdvancedQueryConfig!: string;
     @api header: string = "";
 
+    @api
+    get value() {
+        return this._value;
+    }
+
+    set value(value) {
+        this._value = value;
+    }
+
     @api
     get trees() {
         return this._trees;
@@ -43,10 +52,16 @@ export default class Sidebar extends SidebarBase {
         )?.setInputValue(searchTerm);
     }
 
+    private expanded: boolean = true;
+    private _value?: string = undefined;
+
     @track
     private _trees!: Array<TreeNode>;
+
+    private mobile: boolean = true;
     private matchMedia!: MediaQueryList;
     private valueToLabel: { [key: string]: string } = {};
+
     private isSearchLoading: boolean = false;
     private searchValue: string | null = null;
     private searchResults: SidebarSearchResult[] = [];
@@ -156,6 +171,32 @@ export default class Sidebar extends SidebarBase {
         this.matchMedia.removeEventListener("change", this.onMediaChange);
     }
 
+    private onMediaChange = (event: MediaQueryListEvent | MediaQueryList) => {
+        this.mobile = event.matches;
+        this.expanded = !this.mobile;
+    };
+
+    private onSelect(event: CustomEvent) {
+        this._value = event.detail.name;
+
+        if (this.mobile) {
+            this.onToggleClick();
+        }
+    }
+
+    private onToggleClick() {
+        this.expanded = !this.expanded;
+        this.dispatchEvent(
+            new CustomEvent("togglesidebar", {
+                detail: {
+                    open: this.expanded,
+                    bubbles: true,
+                    composed: true
+                }
+            })
+        );
+    }
+
     private makeKey(): string {
         return Math.random().toString(36).substring(7);
     }
@@ -175,7 +216,7 @@ export default class Sidebar extends SidebarBase {
         this.isSearchLoading = e.detail;
     }
 
-    private onSidebarSearchContentScroll(scrollEvent) {
+    private onSidebarSearchContentScroll() {
         if (this.isSearchLoading) {
             return;
         }
@@ -192,7 +233,6 @@ export default class Sidebar extends SidebarBase {
             this.requestedFetchMoreResults = true;
             search.fetchMoreResults();
         }
-        this.handleScroll(scrollEvent);
     }
 
     private initializeSearchScrollPosition() {

package/src/modules/dx/sidebarOld/sidebarOld.css

@@ -2,7 +2,6 @@
 
 .sidebar-content {
     overflow-y: auto;
-    padding: var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-2xl);
 }
 
 dx-empty-state {

package/src/modules/dx/sidebarOld/sidebarOld.html

@@ -1,7 +1,7 @@
 <template>
     <div class={containerClass}>
         <div
-            lwc:if={mobile}
+            if:true={mobile}
             class="header padding-horizontal"
             onclick={onToggleClick}
         >
@@ -16,19 +16,23 @@
                     <dx-icon
                         sprite="utility"
                         symbol={menuSymbol}
-                        color="blue-vibrant-50"
-                        size="medium"
+                        color="blue-vibrant-20"
                     ></dx-icon>
                 </dx-button>
             </div>
         </div>
 
-        <template lwc:if={expanded}>
-            <div class="sidebar-header" show-shadow={showBoxShadow}>
-                <div class="header padding-horizontal" lwc:if={isDesktop}>
+        <template if:true={expanded}>
+            <div class="padding-horizontal">
+                <div class="header" if:false={mobile}>
                     <h2 class="dx-text-display-6 header-title">{header}</h2>
+                    <slot name="header"></slot>
                 </div>
-                <div class="search padding-horizontal">
+                <div class="mobile-header" if:true={mobile}>
+                    <h2 class="dx-text-display-6">{header}</h2>
+                    <slot name="header"></slot>
+                </div>
+                <div class="search">
                     <dx-input
                         class="search-box"
                         type="search"
@@ -42,12 +46,10 @@
                         shortcut-key="j"
                     ></dx-input>
                 </div>
-                <slot name="version-picker"></slot>
             </div>
             <div
-                class={sidebarContentClass}
-                lwc:if={anyResultMatch}
-                onscroll={handleScroll}
+                class="sidebar-content sidebar-content-tree"
+                if:true={anyResultMatch}
             >
                 <dx-tree
                     for:each={filteredTrees}
@@ -66,27 +68,8 @@
                 title="No Results"
                 body={emptyStateBody}
                 suggestions={emptyStateSuggestions}
-                lwc:else
+                if:false={anyResultMatch}
             ></dx-empty-state>
-            <div lwc:if={hasMobileSidebarFooter} class="footer-nav">
-                <dx-sidebar-footer-nav
-                    lang-value-path={langValuePath}
-                    language={language}
-                    languages={languages}
-                ></dx-sidebar-footer-nav>
-            </div>
-        </template>
-
-        <template lwc:if={isDesktop}>
-            <div lwc:if={hasSidebarFooter} class="footer-nav">
-                <dx-sidebar-footer-nav
-                    lang-value-path={langValuePath}
-                    language={language}
-                    languages={languages}
-                    bail-href={bailHref}
-                    bail-label={bailLabel}
-                ></dx-sidebar-footer-nav>
-            </div>
         </template>
     </div>
 </template>

package/src/modules/dx/sidebarOld/sidebarOld.ts

@@ -11,6 +11,15 @@ const MOBILE_SIZE_MATCH = "768px";
 export default class Sidebar extends SidebarBase {
     @api header: string = "";
 
+    @api
+    get value() {
+        return this._value;
+    }
+
+    set value(value) {
+        this._value = value;
+    }
+
     @api
     get trees() {
         return this._trees;
@@ -28,10 +37,13 @@ export default class Sidebar extends SidebarBase {
         this.assignFilteredTrees();
     }
 
+    private expanded: boolean = true;
     private _searchTimeout?: number;
+    private _value?: string = undefined;
     private _trees!: Array<TreeNode>;
 
     private filteredTrees: Array<{ key: string; tree: TreeNode }> = [];
+    private mobile: boolean = true;
     private searchText: string = "";
     private matchMedia!: MediaQueryList;
     private valueToLabel: { [key: string]: string } = {};
@@ -70,10 +82,6 @@ export default class Sidebar extends SidebarBase {
         ]);
     }
 
-    private get isDesktop(): boolean {
-        return !this.mobile;
-    }
-
     connectedCallback() {
         this.matchMedia = window.matchMedia(
             `(max-width: ${MOBILE_SIZE_MATCH})`
@@ -93,6 +101,32 @@ export default class Sidebar extends SidebarBase {
         this.matchMedia.removeEventListener("change", this.onMediaChange);
     }
 
+    private onMediaChange = (event: MediaQueryListEvent | MediaQueryList) => {
+        this.mobile = event.matches;
+        this.expanded = !this.mobile;
+    };
+
+    private onSelect(event: CustomEvent) {
+        this._value = event.detail.name;
+
+        if (this.mobile) {
+            this.onToggleClick();
+        }
+    }
+
+    private onToggleClick() {
+        this.expanded = !this.expanded;
+        this.dispatchEvent(
+            new CustomEvent("togglesidebar", {
+                detail: {
+                    open: this.expanded,
+                    bubbles: true,
+                    composed: true
+                }
+            })
+        );
+    }
+
     /*
      * Debouncing this method: Do not apply searchText filter as long as this
      * function is being called to avoid running the recursivity logic very often.

package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.css

@@ -8,60 +8,29 @@ a {
 }
 
 .sidebar-item {
-    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg)
-        var(--dx-g-spacing-smd) var(--dx-g-global-header-padding-horizontal);
-}
-
-.sidebar-item:not(.sidebar-item-selected):focus-visible {
-    padding: var(--dx-g-spacing-smd) 0;
-    margin: 0 var(--dx-g-spacing-lg) 0
-        var(--dx-g-global-header-padding-horizontal);
-    outline: var(--dx-g-spacing-2xs) solid var(--dx-g-blue-vibrant-40);
-    border-radius: var(--dx-g-spacing-2xs);
-}
-
-.sidebar-item-selected:focus-visible {
-    padding: 0 var(--dx-g-spacing-lg) 0
-        var(--dx-g-global-header-padding-horizontal);
-    outline: none;
-
-    .search-result {
-        outline: var(--dx-g-spacing-2xs) solid var(--dx-g-blue-vibrant-40);
-        border-radius: var(--dx-g-spacing-2xs);
-        padding: var(--dx-g-spacing-smd) 0;
-    }
+    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-md);
 }
 
 .search-text {
-    font-size: var(--dx-g-text-sm);
+    font-size: var(--dx-g-text-xs);
     font-family: var(--dx-g-font-sans);
-    line-height: var(--dx-g-text-lg);
-    font-weight: var(--dx-g-font-bold);
+    line-height: 18px;
     overflow-wrap: break-word;
 }
 
 .description {
     -webkit-line-clamp: 3;
     overflow-wrap: break-word;
-
-    --dx-g-text-body-color: var(--dx-g-blue-vibrant-20);
-
-    font-weight: var(--dx-g-font-normal);
-    display: block;
 }
 
 .title {
     color: var(--dx-g-text-heading-color);
 }
 
-.title:hover {
-    color: var(--dx-g-blue-vibrant-50);
-}
-
 .bold {
     font-weight: 700;
 }
 
 a > *:not(:last-child) {
-    margin-bottom: var(--dx-g-spacing-xs);
+    margin-bottom: 2px;
 }

package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.html

@@ -1,20 +1,14 @@
 <template>
     <a class={className} href={href} onclick={onClick}>
-        <div class="search-result">
-            <span class="title search-text">
-                <template for:each={titleChunks} for:item="chunk">
-                    <span class={chunk.class} key={chunk.id}>
-                        {chunk.value}
-                    </span>
-                </template>
-            </span>
-            <span class="description dx-text-body-3 sidebar-item-truncate-text">
-                <template for:each={descriptionChunks} for:item="chunk">
-                    <span class={chunk.class} key={chunk.id}>
-                        {chunk.value}
-                    </span>
-                </template>
-            </span>
-        </div>
+        <span class="title search-text">
+            <template for:each={titleChunks} for:item="chunk">
+                <span class={chunk.class} key={chunk.id}>{chunk.value}</span>
+            </template>
+        </span>
+        <span class="description dx-text-body-3 sidebar-item-truncate-text">
+            <template for:each={descriptionChunks} for:item="chunk">
+                <span class={chunk.class} key={chunk.id}>{chunk.value}</span>
+            </template>
+        </span>
     </a>
 </template>