@salesforcedevs/dx-components 0.10.1-alpha.9 → 0.10.1-alpha.93

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

@@ -13,6 +13,13 @@
     --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
 }
 
+dx-empty-state {
+    --dx-c-empty-state-background: var(--sds-g-gray-2);
+    --dx-c-empty-state-image-width: 400px;
+
+    display: none;
+}
+
 dx-tree:not(:last-child) {
     margin-bottom: var(--dx-g-spacing-sm);
 }
@@ -57,14 +64,6 @@ dx-tree:not(:last-child) {
     transition: var(--dx-g-transition-transform-2x);
 }
 
-.container.collapsed {
-    width: var(--dx-g-spacing-xl);
-}
-
-.collapsed .header-toggle-button {
-    transform: rotate(180deg);
-}
-
 .container {
     background-color: var(--dx-g-gray-95);
     display: flex;
@@ -74,12 +73,12 @@ dx-tree:not(:last-child) {
 }
 
 .container:not(.container-mobile) {
-    --border-color: var(--dx-g-gray-95);
+    --border-color: transparent;
     --left-spacing: calc(
         var(--dx-c-sidebar-left-padding) - var(--dx-g-spacing-md)
     );
 
-    border-right: 2px solid var(--border-color);
+    box-shadow: 2px 0 0 0 var(--border-color);
     min-height: var(--dx-c-sidebar-min-height);
     padding: var(--dx-c-sidebar-vertical-padding) 0
         var(--dx-c-sidebar-vertical-padding) var(--left-spacing);
@@ -94,10 +93,6 @@ dx-tree:not(:last-child) {
     --border-color: transparent;
 }
 
-.container:hover .header-toggle-button {
-    --dx-c-button-opacity: 1;
-}
-
 .container.container-border-active {
     --border-color: var(--dx-c-sidebar-button-color);
 }
@@ -152,9 +147,35 @@ dx-tree:not(:last-child) {
     white-space: nowrap;
 }
 
-dx-empty-state {
-    --dx-c-empty-state-background: var(--sds-g-gray-2);
-    --dx-c-empty-state-image-width: 400px;
+.loading-skeleton {
+    margin-top: var(--dx-g-spacing-md);
+}
 
+.search-empty.container dx-empty-state {
     display: block;
 }
+
+.user-searching.container .sidebar-content-tree {
+    display: none;
+}
+
+.show-tree.container .sidebar-content-search {
+    display: none;
+}
+
+.container.collapsed {
+    width: var(--dx-g-spacing-xl);
+}
+
+.container.collapsed .header-toggle-button {
+    transform: rotate(180deg);
+}
+
+.container.collapsed .sidebar-header,
+.container.collapsed .sidebar-content {
+    display: none;
+}
+
+.container:hover .header-toggle-button {
+    --dx-c-button-opacity: 1;
+}

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

@@ -1,5 +1,5 @@
 <template>
-    <div class={containerClass}>
+    <div class={containerClass} part="container">
         <div
             if:true={mobile}
             class="header padding-horizontal"
@@ -27,64 +27,67 @@
             onmouseenter={onToggleMouseEnter}
             onmouseleave={onToggleMouseLeave}
         ></dx-button>
-
-        <template if:true={expanded}>
-            <div class="padding-horizontal">
-                <div class="header" if:false={mobile}>
-                    <h2 class="dx-text-heading-4 header-title">{header}</h2>
-                    <slot name="header"></slot>
-                </div>
-                <div class="search">
-                    <dx-sidebar-search
-                        onchange={onSearchChange}
-                        onloading={onSearchLoading}
-                        coveo-organization-id={coveoOrganizationId}
-                        coveo-public-access-token={coveoPublicAccessToken}
-                        coveo-search-hub={coveoSearchHub}
-                        coveo-object-type={coveoObjectType}
-                        coveo-language={coveoLanguage}
-                        coveo-release={coveoRelease}
-                        coveo-deliverable={coveoDeliverable}
-                    ></dx-sidebar-search>
-                </div>
-                <span if:true={isSearchLoading}>Loading...</span>
-                <h2
-                    class="results-heading dx-text-heading-6"
-                    if:true={showResultsHeading}
-                >
-                    Results
-                </h2>
+        <div class="sidebar-header padding-horizontal">
+            <div class="header" if:false={mobile}>
+                <h2 class="dx-text-heading-4 header-title">{header}</h2>
+                <slot name="header"></slot>
             </div>
-            <div class="sidebar-content">
-                <dx-tree
-                    if:false={isUserSearching}
-                    for:each={trees}
-                    for:item="tree"
-                    key={tree.key}
-                    tree-root={tree.tree}
-                    onselect={onSelect}
-                    value={value}
-                ></dx-tree>
-                <template
-                    if:true={isUserSearching}
-                    for:each={searchResults}
-                    for:item="result"
-                >
-                    <dx-sidebar-search-result
-                        title={result.title}
-                        title-highlights={result.titleHighlights}
-                        description={result.excerpt}
-                        description-highlights={result.excerptHighlights}
-                        href={result.href}
-                        key={result.uniqueId}
-                    ></dx-sidebar-search-result>
-                </template>
-                <dx-empty-state
-                    class="padding-horizontal"
-                    title="No Results"
-                    if:true={isSearchEmpty}
-                ></dx-empty-state>
+            <div class="search">
+                <dx-sidebar-search
+                    onchange={onSearchChange}
+                    onloading={onSearchLoading}
+                    coveo-organization-id={coveoOrganizationId}
+                    coveo-public-access-token={coveoPublicAccessToken}
+                    coveo-search-hub={coveoSearchHub}
+                    coveo-advanced-query-config={coveoAdvancedQueryConfig}
+                ></dx-sidebar-search>
             </div>
-        </template>
+            <h2
+                class="results-heading dx-text-heading-6"
+                if:true={showResultsHeading}
+            >
+                Results
+            </h2>
+        </div>
+        <div
+            class="sidebar-content sidebar-content-search"
+            onscroll={onSidebarSearchContentScroll}
+        >
+            <img
+                if:true={isSearchLoading}
+                class="loading-skeleton padding-horizontal"
+                src="/assets/svg/sidebar-loading.svg"
+                alt="loading"
+            />
+            <template
+                if:true={showSearchResults}
+                for:each={searchResults}
+                for:item="result"
+            >
+                <dx-sidebar-search-result
+                    description-highlights={result.excerptHighlights}
+                    description={result.excerpt}
+                    href={result.href}
+                    key={result.uniqueId}
+                    selected={result.selected}
+                    title-highlights={result.titleHighlights}
+                    title={result.title}
+                ></dx-sidebar-search-result>
+            </template>
+            <dx-empty-state
+                class="padding-horizontal"
+                title="No Results"
+            ></dx-empty-state>
+        </div>
+        <div class="sidebar-content sidebar-content-tree">
+            <dx-tree
+                for:each={trees}
+                for:item="tree"
+                key={tree.key}
+                tree-root={tree.tree}
+                onselect={onSelect}
+                value={value}
+            ></dx-tree>
+        </div>
     </div>
 </template>

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

@@ -1,14 +1,26 @@
 import { html } from "lit-html";
 import { SAMPLE_TREES, SAMPLE_TREES_WITH_METHODS } from "./__tests__/mockProps";
 
-export const coveoConfig = {
+const coveoXMLDocsConfig = {
     coveoOrganizationId: "coveosalesforcetestakshatha",
     coveoPublicAccessToken: "xxfeb39525-e402-4e41-a870-7132441f7875",
     coveoSearchHub: "Developer_Docs_SS",
-    coveoObjectType: "HTDeveloperDocumentsC",
-    coveoLanguage: "en_US",
-    coveoRelease: "232.0",
-    coveoDeliverable: "apexcode"
+    coveoAdvancedQueryConfig: JSON.stringify({
+        objecttype: "HTDeveloperDocumentsC",
+        sflanguage: "en_US",
+        sfrelease__c: "232.0",
+        sfdelivarable__c: "apexcode"
+    })
+};
+
+const coveoSFDocsConfig = {
+    coveoOrganizationId: "coveosalesforcetestakshatha",
+    coveoPublicAccessToken: "xxfeb39525-e402-4e41-a870-7132441f7875",
+    coveoSearchHub: "Developer_MdDocs_SS",
+    coveoAdvancedQueryConfig: JSON.stringify({
+        source: "Sitemap - Developer Docs",
+        path_segment_3: "pardot"
+    })
 };
 
 export default {
@@ -42,25 +54,48 @@ const styles = (addStyles: string = "") => html`
             ${addStyles}
         }
 
+        dx-sidebar::part(container) {
+            height: 100vh;
+        }
+
         body.sb-main-padded.sb-show-main {
             padding: 0;
         }
+
+        #root-inner {
+            display: flex;
+            height: 100%;
+        }
+
+        doc-content {
+            padding: 20px;
+        }
     </style>
 `;
 
-export const Base = (args: any) => html`
-    ${styles("--dx-c-sidebar-min-height: 100vh;")}
+export const XMLDocs = (args: any) => html`
+    ${styles("--dx-c-sidebar-min-height: 100%;")}
+
+    <dx-sidebar
+        header="${args.header}"
+        trees="${JSON.stringify(args.trees)}"
+        coveo-organization-id="${coveoXMLDocsConfig.coveoOrganizationId}"
+        coveo-public-access-token="${coveoXMLDocsConfig.coveoPublicAccessToken}"
+        coveo-search-hub="${coveoXMLDocsConfig.coveoSearchHub}"
+        coveo-advanced-query-config="${coveoXMLDocsConfig.coveoAdvancedQueryConfig}"
+    ></dx-sidebar>
+`;
+
+export const SFDocs = (args: any) => html`
+    ${styles("--dx-c-sidebar-min-height: 100%;")}
 
     <dx-sidebar
         header="${args.header}"
         trees="${JSON.stringify(args.trees)}"
-        coveo-organization-id="${coveoConfig.coveoOrganizationId}"
-        coveo-public-access-token="${coveoConfig.coveoPublicAccessToken}"
-        coveo-search-hub="${coveoConfig.coveoSearchHub}"
-        coveo-object-type="${coveoConfig.coveoObjectType}"
-        coveo-language="${coveoConfig.coveoLanguage}"
-        coveo-release="${coveoConfig.coveoRelease}"
-        coveo-deliverable="${coveoConfig.coveoDeliverable}"
+        coveo-organization-id="${coveoSFDocsConfig.coveoOrganizationId}"
+        coveo-public-access-token="${coveoSFDocsConfig.coveoPublicAccessToken}"
+        coveo-search-hub="${coveoSFDocsConfig.coveoSearchHub}"
+        coveo-advanced-query-config="${coveoSFDocsConfig.coveoAdvancedQueryConfig}"
     ></dx-sidebar>
 `;
 
@@ -74,13 +109,10 @@ export const WidthAndMinHeightVariables = (args: any) => html`
     <dx-sidebar
         header="${args.header}"
         trees="${JSON.stringify(args.trees)}"
-        coveo-organization-id="${coveoConfig.coveoOrganizationId}"
-        coveo-public-access-token="${coveoConfig.coveoPublicAccessToken}"
-        coveo-search-hub="${coveoConfig.coveoSearchHub}"
-        coveo-object-type="${coveoConfig.coveoObjectType}"
-        coveo-language="${coveoConfig.coveoLanguage}"
-        coveo-release="${coveoConfig.coveoRelease}"
-        coveo-deliverable="${coveoConfig.coveoDeliverable}"
+        coveo-organization-id="${coveoXMLDocsConfig.coveoOrganizationId}"
+        coveo-public-access-token="${coveoXMLDocsConfig.coveoPublicAccessToken}"
+        coveo-search-hub="${coveoXMLDocsConfig.coveoSearchHub}"
+        coveo-advanced-query-config="${coveoXMLDocsConfig.coveoAdvancedQueryConfig}"
     ></dx-sidebar>
 `;
 
@@ -103,13 +135,10 @@ export const WidthDrivenByContainer = (args: any) => html`
             header="${args.header}"
             trees="${JSON.stringify(args.trees)}"
             value="${args.value}"
-            coveo-organization-id="${coveoConfig.coveoOrganizationId}"
-            coveo-public-access-token="${coveoConfig.coveoPublicAccessToken}"
-            coveo-search-hub="${coveoConfig.coveoSearchHub}"
-            coveo-object-type="${coveoConfig.coveoObjectType}"
-            coveo-language="${coveoConfig.coveoLanguage}"
-            coveo-release="${coveoConfig.coveoRelease}"
-            coveo-deliverable="${coveoConfig.coveoDeliverable}"
+            coveo-organization-id="${coveoXMLDocsConfig.coveoOrganizationId}"
+            coveo-public-access-token="${coveoXMLDocsConfig.coveoPublicAccessToken}"
+            coveo-search-hub="${coveoXMLDocsConfig.coveoSearchHub}"
+            coveo-advanced-query-config="${coveoXMLDocsConfig.coveoAdvancedQueryConfig}"
         ></dx-sidebar>
     </div>
 `;
@@ -122,13 +151,10 @@ export const WithBadges = (args: any) => html`
             header="${args.header}"
             trees="${JSON.stringify(SAMPLE_TREES_WITH_METHODS)}"
             value="${args.value}"
-            coveo-organization-id="${coveoConfig.coveoOrganizationId}"
-            coveo-public-access-token="${coveoConfig.coveoPublicAccessToken}"
-            coveo-search-hub="${coveoConfig.coveoSearchHub}"
-            coveo-object-type="${coveoConfig.coveoObjectType}"
-            coveo-language="${coveoConfig.coveoLanguage}"
-            coveo-release="${coveoConfig.coveoRelease}"
-            coveo-deliverable="${coveoConfig.coveoDeliverable}"
+            coveo-organization-id="${coveoXMLDocsConfig.coveoOrganizationId}"
+            coveo-public-access-token="${coveoXMLDocsConfig.coveoPublicAccessToken}"
+            coveo-search-hub="${coveoXMLDocsConfig.coveoSearchHub}"
+            coveo-advanced-query-config="${coveoXMLDocsConfig.coveoAdvancedQueryConfig}"
         ></dx-sidebar>
     </div>
 `;
@@ -146,13 +172,10 @@ export const PositionSticky = ({ header, trees, value }: any) => html`
         header="${header}"
         trees="${JSON.stringify(trees)}"
         value="${value}"
-        coveo-organization-id="${coveoConfig.coveoOrganizationId}"
-        coveo-public-access-token="${coveoConfig.coveoPublicAccessToken}"
-        coveo-search-hub="${coveoConfig.coveoSearchHub}"
-        coveo-object-type="${coveoConfig.coveoObjectType}"
-        coveo-language="${coveoConfig.coveoLanguage}"
-        coveo-release="${coveoConfig.coveoRelease}"
-        coveo-deliverable="${coveoConfig.coveoDeliverable}"
+        coveo-organization-id="${coveoXMLDocsConfig.coveoOrganizationId}"
+        coveo-public-access-token="${coveoXMLDocsConfig.coveoPublicAccessToken}"
+        coveo-search-hub="${coveoXMLDocsConfig.coveoSearchHub}"
+        coveo-advanced-query-config="${coveoXMLDocsConfig.coveoAdvancedQueryConfig}"
     ></dx-sidebar>
 `;
 
@@ -177,13 +200,10 @@ export const UseSlot = ({ header, trees, value }: any) => html`
         header="${header}"
         trees="${JSON.stringify(trees)}"
         value="${value}"
-        coveo-organization-id="${coveoConfig.coveoOrganizationId}"
-        coveo-public-access-token="${coveoConfig.coveoPublicAccessToken}"
-        coveo-search-hub="${coveoConfig.coveoSearchHub}"
-        coveo-object-type="${coveoConfig.coveoObjectType}"
-        coveo-language="${coveoConfig.coveoLanguage}"
-        coveo-release="${coveoConfig.coveoRelease}"
-        coveo-deliverable="${coveoConfig.coveoDeliverable}"
+        coveo-organization-id="${coveoXMLDocsConfig.coveoOrganizationId}"
+        coveo-public-access-token="${coveoXMLDocsConfig.coveoPublicAccessToken}"
+        coveo-search-hub="${coveoXMLDocsConfig.coveoSearchHub}"
+        coveo-advanced-query-config="${coveoXMLDocsConfig.coveoAdvancedQueryConfig}"
     >
         <span slot="header">I'm in the sidebar</span>
     </dx-sidebar>

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

@@ -1,8 +1,9 @@
 import cx from "classnames";
-import { track } from "dx/instrumentation";
-import { LightningElement, api } from "lwc";
+import { track as trackAnalytics } from "dx/instrumentation";
+import { LightningElement, api, track } from "lwc";
 import { Result } from "@coveo/headless";
 import { TreeNode, SidebarGtmAction } from "typings/custom";
+import { getSidebarSearchParams } from "utils/coveo";
 import { toJson } from "utils/normalizers";
 
 const MOBILE_SIZE_MATCH = "768px";
@@ -12,10 +13,7 @@ export default class Sidebar extends LightningElement {
     @api coveoOrganizationId!: string;
     @api coveoPublicAccessToken!: string;
     @api coveoSearchHub!: string;
-    @api coveoObjectType!: string;
-    @api coveoLanguage!: string;
-    @api coveoRelease!: string;
-    @api coveoDeliverable!: string;
+    @api coveoAdvancedQueryConfig!: string;
     @api header: string = "";
 
     @api
@@ -49,15 +47,20 @@ export default class Sidebar extends LightningElement {
     private expanded: boolean = true;
     private _toggleHovered: boolean = false;
     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 isSearchLoading: boolean = true;
     private searchValue: string | null = null;
     private searchResults: Result[] = [];
+    private scrollToSelectedSearchResult: boolean = false;
+    private selectedSearchResultIndex: number = -1;
+    private requestedFetchMoreResults: boolean = false;
 
     private get areResultsEmpty(): boolean {
         return (
@@ -76,14 +79,37 @@ export default class Sidebar extends LightningElement {
     }
 
     private get isUserSearching(): boolean {
-        return !!this.searchValue;
+        return !!this.searchValue || this.isSearchLoading;
+    }
+
+    private get showSearchResults(): boolean {
+        return (
+            !!this.searchValue && !this.isSearchLoading && !this.areResultsEmpty
+        );
+    }
+
+    private get isNearBottomOfSearchResults(): boolean {
+        const scrollArea = this.template.querySelector(
+            ".sidebar-content-search"
+        );
+        if (!scrollArea) {
+            return false;
+        }
+
+        const { scrollHeight, scrollTop } = scrollArea;
+        const { height } = scrollArea?.getBoundingClientRect();
+
+        return scrollHeight - scrollTop - height < 300;
     }
 
     private get containerClass() {
         return cx("container", {
             collapsed: !this.expanded,
             "container-border-active": this._toggleHovered,
-            "container-mobile": this.mobile
+            "container-mobile": this.mobile,
+            "user-searching": this.isUserSearching,
+            "show-tree": !this.isUserSearching,
+            "search-empty": this.isSearchEmpty
         });
     }
 
@@ -95,6 +121,19 @@ export default class Sidebar extends LightningElement {
         );
     }
 
+    constructor() {
+        super();
+
+        if (getSidebarSearchParams()) {
+            this.isSearchLoading = true;
+            this.scrollToSelectedSearchResult = true;
+        }
+    }
+
+    renderedCallback() {
+        this.initializeSearchScrollPosition();
+    }
+
     connectedCallback() {
         this.matchMedia = window.matchMedia(
             `(max-width: ${MOBILE_SIZE_MATCH})`
@@ -122,7 +161,7 @@ export default class Sidebar extends LightningElement {
         const sideNavAction: SidebarGtmAction = this.expanded
             ? "expand"
             : "collapse";
-        track(event.currentTarget!, "custEv_leftNavLinkClick", {
+        trackAnalytics(event.currentTarget!, "custEv_leftNavLinkClick", {
             sideNavAction,
             clickText: TOGGLE_BUTTON_LABEL
         });
@@ -141,14 +180,53 @@ export default class Sidebar extends LightningElement {
     }
 
     private onSearchChange(e: CustomEvent) {
+        this.requestedFetchMoreResults = false;
         this.searchResults = e.detail.results;
         this.searchValue = e.detail.value;
     }
 
     private onSearchLoading(e: CustomEvent) {
-        this.isSearchLoading = e.detail;
+        if (!e.detail.loading && this.scrollToSelectedSearchResult) {
+            this.selectedSearchResultIndex = this.searchResults.findIndex(
+                (r) => r.selected
+            );
+        }
+        this.isSearchLoading = e.detail.firstLoad;
     }
 
+    private onSidebarSearchContentScroll() {
+        if (this.isSearchLoading) {
+            return;
+        }
+
+        const search = this.template.querySelector("dx-sidebar-search");
+
+        if (this.isNearBottomOfSearchResults && search && !this.requestedFetchMoreResults) {
+            this.requestedFetchMoreResults = true;
+            search.fetchMoreResults();
+        }
+    }
+
+    private initializeSearchScrollPosition = () => {
+        if (
+            this.scrollToSelectedSearchResult &&
+            this.selectedSearchResultIndex >= 0
+        ) {
+            const selectedResult = this.template.querySelector(
+                `dx-sidebar-search-result:nth-child(${
+                    this.selectedSearchResultIndex + 1
+                })`
+            );
+            if (!selectedResult || !selectedResult.parentNode) {
+                return;
+            }
+            (selectedResult.parentNode as HTMLElement).scrollTop =
+                selectedResult.offsetTop -
+                (selectedResult.parentNode as HTMLElement).offsetTop;
+            this.scrollToSelectedSearchResult = false;
+        }
+    };
+
     private assignValueToLabel(node: TreeNode): void {
         this.valueToLabel[node.name] = node.label;
         if (node.children && node.children.length > 0) {