@salesforcedevs/dx-components 0.26.0 → 0.26.1-alpha0.4

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

@@ -1,160 +0,0 @@
-@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

@@ -1,70 +0,0 @@
-<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>

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

@@ -1,139 +0,0 @@
-import { SAMPLE_TREES, SAMPLE_TREES_WITH_METHODS } from "./__tests__/mockProps";
-
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-sidebar-old",
-    component: "dx-sidebar-old",
-    argTypes: {
-        header: {
-            defaultValue: "Guides",
-            control: {
-                type: "text"
-            }
-        },
-        trees: {
-            defaultValue: SAMPLE_TREES,
-            control: {
-                type: "object"
-            }
-        },
-        value: {
-            defaultValue: "terminology",
-            control: {
-                type: "text"
-            }
-        }
-    }
-};
-
-const styles = (addStyles: string = "") => html`
-    <style>
-        dx-sidebar-old {
-            ${addStyles}
-        }
-
-        body.sb-main-padded.sb-show-main {
-            padding: 0;
-        }
-    </style>
-`;
-
-export const Base = (args: any) => html`
-    ${styles("--dx-c-sidebar-min-height: 100vh;")}
-
-    <dx-sidebar-old
-        header="${args.header}"
-        trees="${JSON.stringify(args.trees)}"
-    ></dx-sidebar-old>
-`;
-
-export const WidthAndMinHeightVariables = (args: any) => html`
-    ${styles(`
-        min-height: 500px;
-        --dx-c-sidebar-width: 400px;
-        --dx-c-sidebar-min-height: 500px;
-    `)}
-
-    <dx-sidebar-old
-        header="${args.header}"
-        trees="${JSON.stringify(args.trees)}"
-    ></dx-sidebar-old>
-`;
-
-export const WidthDrivenByContainer = (args: any) => html`
-    ${styles(`
-        display: block;
-        --dx-c-sidebar-min-height: 500px;
-        --dx-c-sidebar-width: unset;
-    `)}
-
-    <style>
-        @media screen and (min-width: 768px) {
-            .container {
-                width: 40%;
-            }
-        }
-    </style>
-    <div class="container">
-        <dx-sidebar-old
-            header="${args.header}"
-            trees="${JSON.stringify(args.trees)}"
-            value="${args.value}"
-        ></dx-sidebar-old>
-    </div>
-`;
-
-export const WithBadges = (args: any) => html`
-    ${styles("--dx-c-sidebar-min-height: 500px;")}
-
-    <div class="container">
-        <dx-sidebar-old
-            header="${args.header}"
-            trees="${JSON.stringify(SAMPLE_TREES_WITH_METHODS)}"
-            value="${args.value}"
-        ></dx-sidebar-old>
-    </div>
-`;
-
-export const PositionSticky = ({ header, trees, value }: any) => html`
-    ${styles(`
-        display: block;
-        position: sticky;
-        height: 100vh;
-
-        --dx-c-sidebar-height: 100%;
-        --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-lg);
-    `)}
-    <dx-sidebar-old
-        header="${header}"
-        trees="${JSON.stringify(trees)}"
-        value="${value}"
-    ></dx-sidebar-old>
-`;
-
-export const UseSlot = ({ header, trees, value }: any) => html`
-    ${styles(`
-        display: block;
-        position: sticky;
-        height: 100vh;
-
-        --dx-c-sidebar-height: 100%;
-        --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-lg);
-        --dx-c-sidebar-width: 300px;
-    `)}
-
-    <style>
-        span {
-            margin-left: auto;
-        }
-    </style>
-
-    <dx-sidebar-old
-        header="${header}"
-        trees="${JSON.stringify(trees)}"
-        value="${value}"
-    >
-        <span slot="header">I'm in the sidebar</span>
-    </dx-sidebar-old>
-`;

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

@@ -1,187 +0,0 @@
-import cx from "classnames";
-import { track } from "dx/instrumentation";
-import { LightningElement, api } from "lwc";
-
-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 {
-    @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];
-        }
-
-        this._trees = parsedValue || [];
-
-        this._trees.forEach((tree) => this.assignValueToLabel(tree));
-        this.assignFilteredTrees();
-    }
-
-    private expanded: boolean = true;
-    private _toggleHovered: boolean = false;
-    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 } = {};
-
-    private get anyResultMatch() {
-        return this.filteredTrees.length > 0;
-    }
-
-    private get containerClass() {
-        return cx("container", {
-            collapsed: !this.expanded,
-            "container-border-active": this._toggleHovered,
-            "container-mobile": this.mobile
-        });
-    }
-
-    private get headerMobile() {
-        return (
-            (this.value && this.valueToLabel[this.value]) ||
-            Object.values(this.valueToLabel)[0] ||
-            ""
-        );
-    }
-
-    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";
-        track(event.currentTarget!, "custEv_leftNavLinkClick", {
-            sideNavAction,
-            clickText: TOGGLE_BUTTON_LABEL
-        });
-    }
-
-    private onToggleMouseEnter() {
-        this._toggleHovered = true;
-    }
-
-    private onToggleMouseLeave() {
-        this._toggleHovered = false;
-    }
-
-    /*
-     * 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
-                })
-            );
-        }, 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);
-    }
-
-    private findMatch(
-        valuePattern: RegExp,
-        node: TreeNode
-    ): TreeNode | undefined {
-        if (valuePattern.test(node.label.toLowerCase())) {
-            return { ...node, isExpanded: true };
-        }
-
-        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>);
-    }
-
-    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));
-        }
-    }
-}