@salesforcedevs/dx-components 0.26.1-alpha0.6 → 0.27.0

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

@@ -0,0 +1,94 @@
+<template>
+    <div class={containerClass} part="container">
+        <div
+            if:true={mobile}
+            class="header padding-horizontal"
+            onclick={onToggleClick}
+        >
+            <span class="header-title truncate">{headerMobile}</span>
+            <div class="header-toggle-icon">
+                <dx-icon
+                    aria-expanded={expanded}
+                    aria-label="icon"
+                    sprite="utility"
+                    symbol="chevrondown"
+                ></dx-icon>
+            </div>
+        </div>
+
+        <dx-button
+            if:false={mobile}
+            aria-expanded={expanded}
+            aria-label="icon"
+            class="header-toggle-button"
+            icon-symbol="close_panel"
+            variant="custom"
+            onclick={onToggleClick}
+            onmouseenter={onToggleMouseEnter}
+            onmouseleave={onToggleMouseLeave}
+        ></dx-button>
+        <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="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>
+            <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"
+                size="small"
+            ></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.ts

@@ -0,0 +1,255 @@
+import cx from "classnames";
+import { track as trackAnalytics } from "dx/instrumentation";
+import { LightningElement, api, track } from "lwc";
+import {
+    TreeNode,
+    SidebarGtmAction,
+    SidebarSearchResult
+} from "typings/custom";
+import { getSidebarSearchParams } from "utils/coveo";
+import { toJson } from "utils/normalizers";
+import SidebarSearch from "dx/sidebarSearch";
+
+const MOBILE_SIZE_MATCH = "768px";
+const TOGGLE_BUTTON_LABEL = "Toggle Sidebar";
+
+export default class Sidebar extends LightningElement {
+    @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) || [];
+        if (parsedValue && !Array.isArray(parsedValue)) {
+            parsedValue = [parsedValue];
+        }
+
+        parsedValue.forEach((tree: TreeNode) => this.assignValueToLabel(tree));
+
+        this._trees = parsedValue.map((tree: TreeNode) => ({
+            key: this.makeKey(),
+            tree
+        }));
+    }
+
+    @api
+    setInputValue(searchTerm: string) {
+        (
+            this.template.querySelector(
+                "dx-sidebar-search"
+            ) as unknown as SidebarSearch
+        )?.setInputValue(searchTerm);
+    }
+
+    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 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 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,
+            "user-searching": this.isUserSearching,
+            "show-tree": !this.isUserSearching,
+            "search-empty": this.isSearchEmpty
+        });
+    }
+
+    private get headerMobile() {
+        return (
+            (this.value && this.valueToLabel[this.value]) ||
+            Object.values(this.valueToLabel)[0] ||
+            ""
+        );
+    }
+
+    constructor() {
+        super();
+
+        if (getSidebarSearchParams()) {
+            this.isSearchLoading = true;
+            this.scrollToSelectedSearchResult = true;
+        }
+    }
+
+    renderedCallback() {
+        this.initializeSearchScrollPosition();
+    }
+
+    connectedCallback() {
+        this.matchMedia = window.matchMedia(
+            `(max-width: ${MOBILE_SIZE_MATCH})`
+        );
+
+        this.expanded = !this.matchMedia.matches;
+        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);
+
+    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";
+        trackAnalytics(event.currentTarget!, "custEv_leftNavLinkClick", {
+            sideNavAction,
+            clickText: TOGGLE_BUTTON_LABEL
+        });
+    }
+
+    private onToggleMouseEnter() {
+        this._toggleHovered = true;
+    }
+
+    private onToggleMouseLeave() {
+        this._toggleHovered = false;
+    }
+
+    private makeKey(): string {
+        return Math.random().toString(36).substring(7);
+    }
+
+    private onSearchChange(e: CustomEvent) {
+        this.requestedFetchMoreResults = false;
+        this.searchResults = e.detail.results;
+        this.searchValue = e.detail.value;
+    }
+
+    private onSearchLoading(e: CustomEvent) {
+        if (!e.detail.loading && this.scrollToSelectedSearchResult) {
+            this.selectedSearchResultIndex = this.searchResults.findIndex(
+                (r) => r.selected
+            );
+        }
+        this.isSearchLoading = e.detail;
+    }
+
+    private onSidebarSearchContentScroll() {
+        if (this.isSearchLoading) {
+            return;
+        }
+
+        const search = this.template.querySelector(
+            "dx-sidebar-search"
+        ) as unknown as SidebarSearch;
+
+        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) {
+            node.children.forEach((child) => this.assignValueToLabel(child));
+        }
+    }
+}

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

@@ -0,0 +1,160 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+:host {
+    --dx-c-sidebar-width: 275px;
+    --dx-c-sidebar-button-color: var(--dx-g-blue-vibrant-50);
+    --dx-c-sidebar-button-background: white;
+    --dx-c-sidebar-button-border: white;
+    --dx-c-sidebar-button-color-hover: white;
+    --dx-c-sidebar-button-background-hover: var(--dx-g-blue-vibrant-50);
+    --dx-c-sidebar-button-border-hover: var(--dx-g-blue-vibrant-50);
+    --dx-c-sidebar-left-padding: var(--dx-g-page-padding-horizontal);
+    --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
+}
+
+dx-tree:not(:last-child) {
+    margin-bottom: var(--dx-g-spacing-sm);
+}
+
+.header {
+    box-sizing: content-box;
+    display: flex;
+    line-height: var(--dx-g-spacing-xl);
+    margin-bottom: 12px;
+}
+
+.padding-horizontal {
+    padding-left: var(--dx-g-spacing-md);
+    padding-right: var(--dx-g-spacing-md);
+}
+
+.header-title {
+    line-height: inherit;
+}
+
+.header-toggle-button {
+    position: absolute;
+    right: calc((-1 * (var(--dx-g-spacing-xl) / 2)) - 1px);
+
+    --dx-c-button-opacity: 0;
+    --dx-c-button-custom-color: var(--dx-c-sidebar-button-color);
+    --dx-c-button-custom-background: var(--dx-c-sidebar-button-background);
+    --dx-c-button-custom-border: var(--dx-c-sidebar-button-border);
+    --dx-c-button-custom-color-hover: var(--dx-c-sidebar-button-color-hover);
+    --dx-c-button-custom-background-hover: var(
+        --dx-c-sidebar-button-background-hover
+    );
+    --dx-c-button-custom-border-hover: var(--dx-c-sidebar-button-border-hover);
+}
+
+.header-toggle-icon {
+    margin: auto 0 auto auto;
+    color: var(--dx-g-blue-vibrant-30);
+}
+
+.header-toggle-icon dx-icon {
+    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;
+    flex-direction: column;
+    height: var(--dx-c-sidebar-height);
+    width: calc(var(--dx-c-sidebar-width) + var(--left-spacing));
+}
+
+.container:not(.container-mobile) {
+    --border-color: var(--dx-g-gray-95);
+    --left-spacing: calc(
+        var(--dx-c-sidebar-left-padding) - var(--dx-g-spacing-md)
+    );
+
+    border-right: 2px solid 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);
+    position: relative;
+}
+
+.collapsed.container:not(.container-mobile) {
+    background-color: transparent;
+}
+
+.collapsed.container:not(.container-border-active) {
+    --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);
+}
+
+.container.container-mobile {
+    width: 100%;
+}
+
+.container.container-mobile .header {
+    cursor: pointer;
+    line-height: var(--dx-g-spacing-2xl);
+}
+
+.container.container-mobile:not(.collapsed) .header {
+    background-color: #dddbda;
+}
+
+.container.container-mobile .header-title {
+    color: var(--dx-g-gray-10);
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-sm);
+}
+
+.container.container-mobile.collapsed {
+    height: unset;
+    padding-bottom: 0;
+}
+
+.container.container-mobile.collapsed .header {
+    margin-bottom: 0;
+}
+
+.container.container-mobile.collapsed .header-toggle-icon dx-icon {
+    transform: rotateZ(-90deg);
+}
+
+.sidebar-content {
+    overflow-y: auto;
+}
+
+.search {
+    padding-bottom: var(--dx-g-spacing-md);
+}
+
+.search-box {
+    --dx-c-input-width: 100%;
+}
+
+.truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+dx-empty-state {
+    --dx-c-empty-state-background: var(--sds-g-gray-2);
+    --dx-c-empty-state-image-width: 400px;
+
+    padding-bottom: var(--dx-g-spacing-md);
+}

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

@@ -0,0 +1,70 @@
+<template>
+    <div class={containerClass}>
+        <div
+            if:true={mobile}
+            class="header padding-horizontal"
+            onclick={onToggleClick}
+        >
+            <span class="header-title truncate">{headerMobile}</span>
+            <div class="header-toggle-icon">
+                <dx-icon
+                    aria-expanded={expanded}
+                    aria-label="icon"
+                    sprite="utility"
+                    symbol="chevrondown"
+                ></dx-icon>
+            </div>
+        </div>
+
+        <dx-button
+            if:false={mobile}
+            aria-expanded={expanded}
+            aria-label="icon"
+            class="header-toggle-button"
+            icon-symbol="close_panel"
+            variant="custom"
+            onclick={onToggleClick}
+            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-input
+                        class="search-box"
+                        type="search"
+                        placeholder="Search this list..."
+                        role="search"
+                        aria-label="Content Search"
+                        icon-symbol="search"
+                        size="small"
+                        value={searchText}
+                        onchange={onSearchChange}
+                        shortcut-key="j"
+                    ></dx-input>
+                </div>
+            </div>
+            <div class="sidebar-content" if:true={anyResultMatch}>
+                <dx-tree
+                    for:each={filteredTrees}
+                    for:item="tree"
+                    key={tree.key}
+                    tree-root={tree.tree}
+                    onselect={onSelect}
+                    value={value}
+                ></dx-tree>
+            </div>
+            <dx-empty-state
+                class="padding-horizontal"
+                size="small"
+                title="No Results"
+                if:false={anyResultMatch}
+            ></dx-empty-state>
+        </template>
+    </div>
+</template>