@salesforcedevs/dx-components 0.16.3 → 0.17.1-review-diff1

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

@@ -1,64 +1,117 @@
 import cx from "classnames";
-import { track } from "dx/instrumentation";
-import { LightningElement, api } from "lwc";
+import { api, track } from "lwc";
+import { TreeNode, SidebarSearchResult } from "typings/custom";
+import { getSidebarSearchParams } from "dxUtils/coveo";
+import { toJson } from "dxUtils/normalizers";
+import SidebarSearch from "dx/sidebarSearch";
+import { SidebarBase } from "dxBaseElements/sidebarBase";
 
-import { TreeNode, SidebarGtmAction } from "typings/custom";
-import { toJson } from "utils/normalizers";
-
-const WAIT_TIME = 500;
 const MOBILE_SIZE_MATCH = "768px";
-const TOGGLE_BUTTON_LABEL = "Toggle Sidebar";
 
-export default class Sidebar extends LightningElement {
+export default class Sidebar extends SidebarBase {
+    @api coveoOrganizationId!: string;
+    @api coveoPublicAccessToken!: string;
+    @api coveoSearchHub!: string;
+    @api coveoAdvancedQueryConfig!: string;
     @api header: string = "";
 
-    @api
-    get value() {
-        return this._value;
-    }
-
-    set value(value) {
-        this._value = value;
-    }
-
     @api
     get trees() {
         return this._trees;
     }
 
     set trees(value: string | Array<TreeNode>) {
-        let parsedValue = toJson(value);
+        let parsedValue = toJson(value) || [];
         if (parsedValue && !Array.isArray(parsedValue)) {
             parsedValue = [parsedValue];
         }
 
-        this._trees = parsedValue || [];
+        parsedValue.forEach((tree: TreeNode) => this.assignValueToLabel(tree));
 
-        this._trees.forEach((tree) => this.assignValueToLabel(tree));
-        this.assignFilteredTrees();
+        this._trees = parsedValue.map((tree: TreeNode) => ({
+            key: this.makeKey(),
+            tree
+        }));
     }
 
-    private expanded: boolean = true;
-    private _toggleHovered: boolean = false;
-    private _searchTimeout?: number;
-    private _value?: string = undefined;
-    private _trees!: Array<TreeNode>;
+    @api
+    setInputValue(searchTerm: string) {
+        (
+            this.template.querySelector(
+                "dx-sidebar-search"
+            ) as unknown as SidebarSearch
+        )?.setInputValue(searchTerm);
+    }
 
-    private filteredTrees: Array<{ key: string; tree: TreeNode }> = [];
-    private mobile: boolean = true;
-    private searchText: string = "";
+    @track
+    private _trees!: Array<TreeNode>;
     private matchMedia!: MediaQueryList;
     private valueToLabel: { [key: string]: string } = {};
+    private isSearchLoading: boolean = false;
+    private searchValue: string | null = null;
+    private searchResults: SidebarSearchResult[] = [];
+    private scrollToSelectedSearchResult: boolean = false;
+    private selectedSearchResultIndex: number = -1;
+    private requestedFetchMoreResults: boolean = false;
+
+    private get areResultsEmpty(): boolean {
+        return (
+            (!this.searchResults ||
+                (this.searchResults && this.searchResults.length < 1)) &&
+            !this.isSearchLoading
+        );
+    }
+
+    private get isSearchEmpty(): boolean {
+        return this.isUserSearching && this.areResultsEmpty;
+    }
+
+    private get showResultsHeading(): boolean {
+        return this.isUserSearching && !this.areResultsEmpty;
+    }
+
+    private get isUserSearching(): boolean {
+        return !!this.searchValue || this.isSearchLoading;
+    }
+
+    private get showSearchResults(): boolean {
+        return (
+            !!this.searchValue && !this.isSearchLoading && !this.areResultsEmpty
+        );
+    }
+
+    private get emptyStateBody(): string {
+        return "Search Tips:";
+    }
+
+    private get emptyStateSuggestions(): string {
+        return JSON.stringify([
+            "Please consider misspellings",
+            "Try different search keywords"
+        ]);
+    }
+
+    private get isNearBottomOfSearchResults(): boolean {
+        const scrollArea = this.template.querySelector(
+            ".sidebar-content-search"
+        );
+        if (!scrollArea) {
+            return false;
+        }
+
+        const { scrollHeight, scrollTop } = scrollArea;
+        const { height } = scrollArea?.getBoundingClientRect();
 
-    private get anyResultMatch() {
-        return this.filteredTrees.length > 0;
+        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
         });
     }
 
@@ -70,6 +123,24 @@ export default class Sidebar extends LightningElement {
         );
     }
 
+    private get menuSymbol() {
+        return this.expanded ? "close" : "custom-rows";
+    }
+
+    constructor() {
+        super();
+
+        if (getSidebarSearchParams()) {
+            this.isSearchLoading = true;
+            this.scrollToSelectedSearchResult = true;
+        }
+    }
+
+    renderedCallback() {
+        super.renderedCallback();
+        this.initializeSearchScrollPosition();
+    }
+
     connectedCallback() {
         this.matchMedia = window.matchMedia(
             `(max-width: ${MOBILE_SIZE_MATCH})`
@@ -81,101 +152,67 @@ export default class Sidebar extends LightningElement {
     }
 
     disconnectedCallback() {
+        super.disconnectedCallback();
         this.matchMedia.removeEventListener("change", this.onMediaChange);
     }
 
-    private onMediaChange = (event: MediaQueryListEvent | MediaQueryList) =>
-        (this.mobile = event.matches);
-
-    private onSelect(event: CustomEvent) {
-        this._value = event.detail.name;
-    }
-
-    private onToggleClick(event: Event) {
-        this.expanded = !this.expanded;
-        this._toggleHovered = false;
-        const sideNavAction: SidebarGtmAction = this.expanded
-            ? "expand"
-            : "collapse";
-        track(event.currentTarget!, "custEv_leftNavLinkClick", {
-            sideNavAction,
-            clickText: TOGGLE_BUTTON_LABEL
-        });
-    }
-
-    private onToggleMouseEnter() {
-        this._toggleHovered = true;
+    private makeKey(): string {
+        return Math.random().toString(36).substring(7);
     }
 
-    private onToggleMouseLeave() {
-        this._toggleHovered = false;
+    private onSearchChange(e: CustomEvent) {
+        this.requestedFetchMoreResults = false;
+        this.searchResults = e.detail.results;
+        this.searchValue = e.detail.value;
     }
 
-    /*
-     * Debouncing this method: Do not apply searchText filter as long as this
-     * function is being called to avoid running the recursivity logic very often.
-     **/
-    private onSearchChange(event: CustomEvent) {
-        this.searchText = event.detail;
-        window.clearTimeout(this._searchTimeout);
-        this._searchTimeout = window.setTimeout(() => {
-            this.assignFilteredTrees();
-            this.dispatchEvent(
-                new CustomEvent("highlightedtermchange", {
-                    detail: this.searchText,
-                    composed: true,
-                    bubbles: true
-                })
+    private onSearchLoading(e: CustomEvent) {
+        if (!e.detail.loading && this.scrollToSelectedSearchResult) {
+            this.selectedSearchResultIndex = this.searchResults.findIndex(
+                (r) => r.selected
             );
-        }, WAIT_TIME);
-    }
-
-    private assignFilteredTrees() {
-        this.filteredTrees = this._trees
-            .map((singleTree) => {
-                return {
-                    key: this.makeKey(),
-                    tree: this.searchText
-                        ? this.findMatch(
-                              new RegExp(this.searchText.toLowerCase().trim()),
-                              singleTree
-                          )!
-                        : singleTree
-                };
-            })
-            .filter((filteredTree) => filteredTree.tree);
-    }
-
-    private makeKey(): string {
-        return Math.random().toString(36).substring(7);
+        }
+        this.isSearchLoading = e.detail;
     }
 
-    private findMatch(
-        valuePattern: RegExp,
-        node: TreeNode
-    ): TreeNode | undefined {
-        if (valuePattern.test(node.label.toLowerCase())) {
-            return { ...node, isExpanded: true };
+    private onSidebarSearchContentScroll(scrollEvent) {
+        if (this.isSearchLoading) {
+            return;
         }
 
-        const filteredChildren = this.filterChildren(
-            valuePattern,
-            node.children
-        );
-        return filteredChildren.length > 0
-            ? { ...node, children: filteredChildren, isExpanded: true }
-            : undefined;
-    }
-
-    private filterChildren(
-        valuePattern: RegExp,
-        children?: Array<TreeNode>
-    ): Array<TreeNode> {
-        return !children || children.length === 0
-            ? []
-            : (children
-                  .map((child) => this.findMatch(valuePattern, child))
-                  .filter((child) => child) as Array<TreeNode>);
+        const search = this.template.querySelector(
+            "dx-sidebar-search"
+        ) as unknown as SidebarSearch;
+
+        if (
+            this.isNearBottomOfSearchResults &&
+            search &&
+            !this.requestedFetchMoreResults
+        ) {
+            this.requestedFetchMoreResults = true;
+            search.fetchMoreResults();
+        }
+        this.handleScroll(scrollEvent);
+    }
+
+    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 {
@@ -184,4 +221,10 @@ export default class Sidebar extends LightningElement {
             node.children.forEach((child) => this.assignValueToLabel(child));
         }
     }
+
+    private onItemsFocused(): void {
+        (
+            this.template.querySelector("dx-sidebar-search") as any
+        )?.requestOpenDropdown(false);
+    }
 }

package/src/modules/dx/sidebarFooterNav/sidebarFooterNav.css

@@ -0,0 +1,49 @@
+@import "dxHelpers/reset";
+
+:host {
+    --button-primary-color: var(--dx-g-blue-vibrant-50);
+    --button-primary-color-hover: var(--dx-g-cloud-blue-vibrant-95);
+    --popover-container-open-transform: translateX(-4px) translateY(-8px);
+    --popover-transition: none;
+    --dx-c-dropdown-option-font-weight: normal;
+    --dx-c-dropdown-option-label-color: var(--dx-g-gray-10);
+}
+
+.footer-item {
+    display: flex;
+    height: var(--dx-g-spacing-xl);
+    align-items: center;
+    border-radius: var(--dx-g-spacing-xs);
+}
+
+.footer-display {
+    display: flex;
+}
+
+.footer_lang-dropdown {
+    --dx-c-button-primary-color: var(--button-primary-color);
+    --dx-c-button-secondary-color-hover: var(--button-primary-color-hover);
+    --border-color: var(--button-primary-color);
+}
+
+.footer_lang-dropdown[aria-expanded="true"] {
+    --dx-c-button-secondary-color-hover: var(--dx-g-cloud-blue-vibrant-95);
+    --dx-c-button-primary-color: var(--dx-g-blue-vibrant-40);
+}
+
+.footer_lang-dropdown:hover,
+.footer_lang-dropdown:active,
+.pdf_bail-link:hover {
+    /* background-color: var(--button-primary-color-hover);
+
+    --border-color: var(--button-primary-color-hover); */
+    --dx-c-button-secondary-color-hover: var(--dx-g-cloud-blue-vibrant-95);
+    --dx-c-button-primary-color: var(--dx-g-blue-vibrant-40);
+}
+
+.pdf_bail-link {
+    --dx-c-button-secondary-color-hover: var(--button-primary-color-hover);
+    --dx-c-button-primary-color: var(--button-primary-color);
+
+    margin-right: var(--dx-g-spacing-sm);
+}

package/src/modules/dx/sidebarFooterNav/sidebarFooterNav.html

@@ -0,0 +1,55 @@
+<template>
+    <div lwc:if={mobile} class="footer-display">
+        <dx-dropdown
+            lwc:if={hasLanguages}
+            options={languages}
+            small
+            value-path={langValuePath}
+            value={language}
+            onchange={onLangChange}
+        >
+            <dx-button
+                class="footer-item footer_lang-dropdown"
+                aria-label="Select Language"
+                variant="tertiary"
+                icon-size="small"
+                icon-symbol="world"
+            >
+                {languageLabel}
+            </dx-button>
+        </dx-dropdown>
+    </div>
+    <div lwc:else class="footer-display">
+        <dx-button
+            lwc:if={hasBailLink}
+            aria-label={bailLabel}
+            class="footer-item pdf_bail-link"
+            href={bailHref}
+            onclick={handleBailClick}
+            variant="tertiary"
+            icon-size="medium"
+            icon-symbol="new_window"
+            target="_blank"
+        >
+            {bailLabel}
+        </dx-button>
+        <dx-dropdown
+            lwc:if={hasLanguages}
+            options={languages}
+            small
+            value-path={langValuePath}
+            value={language}
+            onchange={onLangChange}
+        >
+            <dx-button
+                class="footer-item footer_lang-dropdown"
+                aria-label="Select Language"
+                variant="tertiary"
+                icon-size="medium"
+                icon-symbol="world"
+            >
+                {languageLabel}
+            </dx-button>
+        </dx-dropdown>
+    </div>
+</template>

package/src/modules/dx/sidebarFooterNav/sidebarFooterNav.ts

@@ -0,0 +1,106 @@
+/* eslint-disable @lwc/lwc/no-document-query */
+import { LightningElement, api } from "lwc";
+import type { OptionWithLink } from "typings/custom";
+import { toJson } from "dxUtils/normalizers";
+import get from "lodash.get";
+import { track } from "dxUtils/analytics";
+
+const MOBILE_SIZE_MATCH = "768px";
+
+export default class SidebarFooterNav extends LightningElement {
+    @api langValuePath: string = "id";
+    @api bailHref?: string | null = null;
+    @api bailLabel?: string | null = null;
+
+    @api
+    get languages() {
+        return this._languages;
+    }
+
+    set languages(value) {
+        this._languages = toJson(value);
+    }
+
+    @api
+    get language() {
+        return this._language;
+    }
+
+    set language(value) {
+        this._language = value;
+    }
+
+    private _languages!: OptionWithLink[];
+    private _language: string | null = null;
+    private mobile: boolean = false;
+    private matchMedia!: MediaQueryList;
+
+    private get hasLanguages(): boolean {
+        return this.languages?.length > 1;
+    }
+
+    private get languageLabel(): string {
+        const matchingLanguageData = this.language
+            ? this.languages.find(
+                  (lang) => get(lang, this.langValuePath) === this.language
+              )
+            : null;
+        return matchingLanguageData?.label || this.languages[0].label;
+    }
+
+    get hasBailLink(): boolean {
+        return !!(this.bailHref && this.bailLabel);
+    }
+
+    private onLangChange(event: CustomEvent<string>): void {
+        const { detail } = event;
+        this._language = detail;
+
+        this.dispatchEvent(
+            new CustomEvent("langchange", {
+                detail,
+                bubbles: true,
+                composed: true
+            })
+        );
+    }
+
+    private getFilename = function (path: string) {
+        return path.substring(path.lastIndexOf("/") + 1);
+    };
+
+    private handleBailClick(event: Event) {
+        const payload = {
+            click_text: "pdf",
+            click_url: this.bailHref,
+            element_title: "pdf",
+            element_type: "link",
+            content_category: "download"
+        };
+        track(event.target!, "custEv_pdfDownload", {
+            ...payload,
+            file_name: this.getFilename(this.bailHref!),
+            file_extension: "pdf"
+        });
+
+        track(event.target!, "custEv_linkClick", {
+            ...payload
+        });
+    }
+
+    connectedCallback() {
+        this.matchMedia = window.matchMedia(
+            `(max-width: ${MOBILE_SIZE_MATCH})`
+        );
+        this.onMediaChange(this.matchMedia);
+        this.matchMedia.addEventListener("change", this.onMediaChange);
+    }
+
+    disconnectedCallback() {
+        this.matchMedia.removeEventListener("change", this.onMediaChange);
+    }
+
+    private onMediaChange = (event: MediaQueryListEvent | MediaQueryList) => {
+        this.mobile = event.matches;
+    };
+}

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

@@ -0,0 +1,33 @@
+@import "dxHelpers/commonSidebar";
+
+.sidebar-content {
+    overflow-y: auto;
+    padding: var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-2xl);
+}
+
+dx-empty-state {
+    --dx-c-empty-state-background-alt: var(--sds-g-gray-1);
+    --dx-c-empty-state-image-width: 400px;
+    --dx-c-font-title-alt-size: 18px;
+    --dx-c-font-title-alt-margin-top: var(--dx-g-spacing-md);
+    --dx-c-font-body-alt-size: var(--dx-g-text-xs);
+    --dx-c-font-body-alt-margin-top: 0;
+    --dx-c-container-alt-padding: var(--dx-g-spacing-2xl) 37px;
+    --dx-c-font-suggestion-alt-size: 10px;
+
+    padding-bottom: var(--dx-g-spacing-md);
+}
+
+.header-toggle-icon dx-button {
+    --dx-c-button-secondary-color-hover: var(--dx-g-gray-80);
+
+    width: 10px;
+}
+
+.header-toggle-icon dx-button[aria-expanded="true"] {
+    --dx-c-button-secondary-color-hover: transparent;
+}
+
+.header-toggle-icon dx-button[aria-expanded="true"]:hover {
+    --dx-c-button-secondary-color-hover: var(--dx-g-gray-80);
+}

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

@@ -0,0 +1,111 @@
+<template>
+    <div class={containerClass}>
+        <div
+            lwc:if={mobile}
+            class="header padding-horizontal"
+            onclick={onToggleClick}
+        >
+            <span class="header-title truncate">{headerMobile}</span>
+            <div class="header-toggle-icon">
+                <dx-button
+                    aria-expanded={expanded}
+                    aria-label="toggle menu"
+                    type="button"
+                    variant="tertiary"
+                >
+                    <dx-icon
+                        sprite="utility"
+                        symbol={menuSymbol}
+                        color="blue-vibrant-50"
+                        size="medium"
+                    ></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}>
+                    <!-- To-Do: Move the devCenter as a new component and use it here, as devCenter is also used in Sidebar now -->
+                    <div class="header-wrapper">
+                        <div lwc:if={devCenter} class="link-row">
+                            <a href={devCenter.link}>
+                                <dx-icon symbol="back"></dx-icon>
+                                <dx-icon
+                                    class="brand-icon"
+                                    lwc:if={devCenter.icon}
+                                    sprite="salesforcebrand"
+                                    symbol={brand}
+                                    size="large"
+                                ></dx-icon>
+                                <span class="subtitle dx-text-body-4">
+                                    {devCenter.title}
+                                </span>
+                            </a>
+                        </div>
+                        <h2 class="dx-text-display-6 header-title">{header}</h2>
+                    </div>
+                </div>
+                <div class="search padding-horizontal">
+                    <dx-input
+                        class="search-box"
+                        type="search"
+                        placeholder="Search"
+                        role="search"
+                        aria-label="Content Search"
+                        icon-symbol="search"
+                        size="small"
+                        value={searchText}
+                        onchange={onSearchChange}
+                        shortcut-key="j"
+                    ></dx-input>
+                </div>
+                <slot name="version-picker"></slot>
+            </div>
+            <div
+                class={sidebarContentClass}
+                lwc:if={anyResultMatch}
+                onscroll={handleScroll}
+            >
+                <dx-tree
+                    for:each={filteredTrees}
+                    for:item="tree"
+                    key={tree.key}
+                    tree-root={tree.tree}
+                    onselect={onSelect}
+                    value={value}
+                    onselecteditemrendered={onSelectedItemRendered}
+                ></dx-tree>
+            </div>
+            <dx-empty-state
+                variant="alt"
+                class="padding-horizontal"
+                size="small"
+                header="No Results"
+                body={emptyStateBody}
+                suggestions={emptyStateSuggestions}
+                lwc:else
+            ></dx-empty-state>
+            <div lwc:if={hasMobileSidebarFooter} class="footer-nav">
+                <dx-sidebar-footer-nav
+                    lang-value-path={langValuePath}
+                    language={language}
+                    languages={languages}
+                    onlangchange={onToggleClick}
+                ></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>