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

package/src/modules/dx/tooltip/tooltip.css

@@ -0,0 +1,36 @@
+@import "./microtip.css";
+
+:host {
+    display: inline-block;
+}
+
+.slot-container {
+    display: inherit;
+}
+
+[role~="tooltip"][data-microtip-position|="bottom"]::before {
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%28116,%20116,%20116,%201%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
+        no-repeat;
+}
+
+[role~="tooltip"][data-microtip-position|="top"]::before {
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%28116,%20116,%20116,%201%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
+        no-repeat;
+}
+
+[role~="tooltip"][data-microtip-position|="left"]::before {
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%28116,%20116,%20116,%201%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
+        no-repeat;
+}
+
+[role~="tooltip"][data-microtip-position|="right"]::before {
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%28116,%20116,%20116,%201%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
+        no-repeat;
+}
+
+[aria-label][role~="tooltip"]::after {
+    background-color: var(--dx-g-gray-50);
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-xs);
+    color: white;
+}

package/src/modules/dx/tooltip/tooltip.html

@@ -0,0 +1,5 @@
+<template>
+    <div data-microtip-position={placement} role="tooltip" aria-label={label}>
+        <slot></slot>
+    </div>
+</template>

package/src/modules/dx/tooltip/tooltip.ts

@@ -0,0 +1,6 @@
+import { LightningElement, api } from "lwc";
+
+export default class Tooltip extends LightningElement {
+    @api placement?: String = "top";
+    @api label: string = "";
+}

package/src/modules/dx/topics/topics.css

@@ -0,0 +1,25 @@
+:host {
+    display: block;
+}
+
+.container {
+    align-items: center;
+    color: var(--dx-g-blue-vibrant-20);
+    font-size: var(--dx-g-text-xs);
+    font-family: var(--dx-g-font-display);
+    font-weight: var(--dx-g-font-demi);
+    display: flex;
+    gap: var(--dx-g-spacing-sm);
+    letter-spacing: 1px;
+    text-transform: uppercase;
+}
+
+.dot-separator {
+    --size: 4px;
+
+    height: var(--size);
+    width: var(--size);
+    background-color: var(--dx-g-blue-vibrant-20);
+    border-radius: 100%;
+    margin-bottom: 3px;
+}

package/src/modules/dx/topics/topics.html

@@ -0,0 +1,12 @@
+<template>
+    <div class="container dx-text-label-1-dark">
+        <template for:each={normalizedTopics} for:item="topic">
+            <span key={topic.id}>{topic.label}</span>
+            <span
+                key={topic.id}
+                if:false={topic.isLast}
+                class="dot-separator"
+            ></span>
+        </template>
+    </div>
+</template>

package/src/modules/dx/topics/topics.ts

@@ -0,0 +1,25 @@
+import { LightningElement, api } from "lwc";
+import { normalizeToArray } from "utils/normalizers";
+
+export default class Topics extends LightningElement {
+    private _topics: Array<string> = [];
+
+    @api
+    get topics() {
+        return this._topics;
+    }
+
+    set topics(value) {
+        this._topics = normalizeToArray(value);
+    }
+
+    get normalizedTopics() {
+        const { length } = this._topics;
+
+        return this._topics?.map((topic, index) => ({
+            id: topic,
+            label: topic,
+            isLast: index === length - 1
+        }));
+    }
+}

package/src/modules/dx/tree/tree.css

@@ -0,0 +1,5 @@
+@import "helpers/reset";
+
+:host {
+    display: block;
+}

package/src/modules/dx/tree/tree.html

@@ -0,0 +1,11 @@
+<template>
+    <dx-tree-item
+        if:true={treeRoot}
+        is-root
+        tree-node={treeRoot}
+        selected-key={selectedKey}
+        ontileselected={onTileSelected}
+        onexpandcollapse={onExpandCollapse}
+        onregister={onRegister}
+    ></dx-tree-item>
+</template>

package/src/modules/dx/tree/tree.ts

@@ -0,0 +1,72 @@
+import { LightningElement, api } from "lwc";
+import { TreeNode, InternalTreeNode } from "typings/custom";
+import { toJson } from "utils/normalizers";
+import { TreeHandler } from "./treeHandler";
+
+export default class Tree extends LightningElement {
+    @api
+    get treeRoot() {
+        return this._treeRoot!;
+    }
+
+    set treeRoot(value: TreeNode | string) {
+        value = toJson(value);
+        this._treeHandler = new TreeHandler();
+        this._treeRoot = this._treeHandler.initialize(value as TreeNode);
+        if (this._value) {
+            this.selectedKey = this._treeHandler.getKeyByName(this._value);
+            this._treeHandler.expandToSelected(this.selectedKey);
+        }
+    }
+
+    @api
+    get value() {
+        return this._value!;
+    }
+
+    set value(value: string) {
+        if (this._value === value) {
+            return;
+        }
+
+        this._value = value;
+        if (this._treeHandler) {
+            this.selectedKey = this._treeHandler.getKeyByName(value);
+            this._treeHandler.expandToSelected(this.selectedKey);
+        }
+    }
+
+    private _treeRoot?: InternalTreeNode = undefined;
+    private _treeHandler!: TreeHandler;
+    private _value?: string = undefined;
+    private selectedKey?: string = undefined;
+
+    onTileSelected(event: CustomEvent) {
+        event.stopPropagation();
+
+        const { key, name } = event.detail;
+        this._value = name;
+        this.selectedKey = key;
+        this.dispatchEvent(
+            new CustomEvent("select", {
+                detail: { name },
+                composed: true,
+                bubbles: true
+            })
+        );
+    }
+
+    onExpandCollapse(event: CustomEvent) {
+        event.stopPropagation();
+
+        const node = this._treeHandler.getNode(event.detail.key);
+        if (node) {
+            node.isExpanded = !node.isExpanded;
+        }
+    }
+
+    onRegister(event: CustomEvent<{ key: string; setExpanded: Function }>) {
+        event.stopPropagation();
+        this._treeHandler.registerSetExpanded(event.detail);
+    }
+}

package/src/modules/dx/tree/treeHandler.ts

@@ -0,0 +1,100 @@
+import type { InternalTreeNode, TreeNode } from "typings/custom";
+type MapItem = {
+    node: InternalTreeNode;
+    parent?: MapItem;
+    setExpanded?: Function;
+};
+
+const ROOT_KEY = "0";
+
+export class TreeHandler {
+    private _nodeMap: { [key: string]: MapItem };
+    private _nameKeyMap: { [key: string]: string };
+
+    constructor() {
+        this._nodeMap = {};
+        this._nameKeyMap = {};
+    }
+
+    getNode(key: string): InternalTreeNode | undefined {
+        return this._nodeMap[key] && this._nodeMap[key].node;
+    }
+
+    getKeyByName(name: string): string | undefined {
+        return name && this._nameKeyMap[name];
+    }
+
+    initialize(treeRoot: TreeNode): InternalTreeNode {
+        return this.convert(treeRoot);
+    }
+
+    expandToSelected(selectedKey?: string) {
+        if (selectedKey) {
+            this.expandParents(this._nodeMap[selectedKey]);
+        }
+    }
+
+    registerSetExpanded({
+        key,
+        setExpanded
+    }: {
+        key: string;
+        setExpanded: Function;
+    }) {
+        const item = this._nodeMap[key];
+        if (item) {
+            item.setExpanded = setExpanded;
+        }
+    }
+
+    private convert(
+        node: TreeNode,
+        level: number = 0,
+        parent?: MapItem,
+        position?: number
+    ): InternalTreeNode {
+        const convertedNode: InternalTreeNode = {
+            label: node.label,
+            name: node.name,
+            key: this.calculateKey(
+                (parent && parent.node.key) || ROOT_KEY,
+                position
+            ),
+            level: level,
+            isExpanded: node.isExpanded || false,
+            link: node.link,
+            method: node.method
+        };
+
+        const mapItem = { node: convertedNode, parent };
+        if (node.children && node.children.length > 0) {
+            convertedNode.children = node.children.map((child, index) =>
+                this.convert(child, level + 1, mapItem, index)
+            );
+        }
+
+        this._nodeMap[convertedNode.key] = mapItem;
+        this._nameKeyMap[convertedNode.name] = convertedNode.key;
+        return convertedNode;
+    }
+
+    private calculateKey(parentKey: string, position?: number): string {
+        if (position === undefined) {
+            return parentKey;
+        }
+        return `${parentKey}.${position}`;
+    }
+
+    private expandParents(treeNode?: MapItem) {
+        if (!treeNode) {
+            return;
+        }
+
+        treeNode.node.isExpanded = true;
+        if (treeNode.setExpanded) {
+            treeNode.setExpanded(true);
+        }
+
+        this.expandParents(treeNode.parent);
+    }
+}

package/src/modules/dx/treeItem/treeItem.css

@@ -0,0 +1,14 @@
+@import "helpers/reset";
+
+:host {
+    display: block;
+}
+
+button {
+    width: 100%;
+    text-align: left;
+}
+
+button:focus {
+    outline-offset: -1px;
+}

package/src/modules/dx/treeItem/treeItem.html

@@ -0,0 +1,22 @@
+<template>
+    <a href={href} target={target} onclick={onLinkClick}>
+        <dx-tree-tile
+            href={href}
+            is-root={isRoot}
+            tree-node={treeNode}
+            is-expanded={isExpanded}
+            has-children={hasChildren}
+            is-selected={isSelected}
+            oniconclick={onIconClick}
+        ></dx-tree-tile>
+    </a>
+    <template if:true={showChildren}>
+        <template for:each={treeNode.children} for:item="child">
+            <dx-tree-item
+                key={child.key}
+                tree-node={child}
+                selected-key={selectedKey}
+            ></dx-tree-item>
+        </template>
+    </template>
+</template>

package/src/modules/dx/treeItem/treeItem.ts

@@ -0,0 +1,110 @@
+import { LightningElement, api } from "lwc";
+import { InternalTreeNode } from "typings/custom";
+import { track } from "dx/instrumentation";
+import { SidebarGtmAction } from "typings/custom";
+
+const DEFAULT_TARGET = "_self";
+
+export default class TreeItem extends LightningElement {
+    @api selectedKey?: string;
+    @api isRoot: boolean = false;
+
+    @api
+    public get treeNode() {
+        return this._treeNode;
+    }
+
+    public set treeNode(node) {
+        this._treeNode = node;
+        this.isExpanded = (node && node.isExpanded) || false;
+    }
+
+    private _treeNode!: InternalTreeNode;
+    private isExpanded: boolean = false;
+
+    private get isSelected(): boolean {
+        return this._treeNode.key === this.selectedKey;
+    }
+
+    private get hasChildren(): boolean {
+        return !!(
+            this.treeNode &&
+            this.treeNode.children &&
+            this.treeNode.children.length > 0
+        );
+    }
+
+    private get showChildren(): boolean {
+        return this.isExpanded && this.hasChildren;
+    }
+
+    private get href(): string | undefined {
+        return (
+            (this._treeNode.link && this._treeNode.link.href) ||
+            this._treeNode.name ||
+            ""
+        );
+    }
+
+    private get target(): string {
+        return (
+            (this._treeNode.link && this._treeNode.link.target) ||
+            DEFAULT_TARGET
+        );
+    }
+
+    connectedCallback(): void {
+        if (this.hasChildren) {
+            this.fireEvent("register", {
+                setExpanded: this.setExpanded.bind(this)
+            });
+        }
+    }
+
+    private onIconClick(event: CustomEvent): void {
+        this.doExpand();
+        this.sendGtm(event, this.isExpanded ? "expand" : "collapse");
+    }
+
+    private onLinkClick(event: Event): void {
+        if (!(this._treeNode.link && this._treeNode.link.href)) {
+            event.preventDefault();
+        }
+
+        if (this.hasChildren) {
+            this.doExpand();
+        }
+
+        this.sendGtm(event, "click");
+        this.fireEvent("tileselected", { name: this._treeNode.name });
+    }
+
+    private doExpand(): void {
+        this.isExpanded = !this.isExpanded;
+        this.fireEvent("expandcollapse");
+    }
+
+    private fireEvent(type: string, detail = {}): void {
+        this.dispatchEvent(
+            new CustomEvent(type, {
+                detail: {
+                    ...detail,
+                    key: this._treeNode.key
+                },
+                bubbles: true,
+                composed: true
+            })
+        );
+    }
+
+    private setExpanded(value: boolean): void {
+        this.isExpanded = value;
+    }
+
+    private sendGtm(event: Event, sideNavAction: SidebarGtmAction) {
+        track(event.currentTarget!, "custEv_leftNavLinkClick", {
+            clickText: this._treeNode.label,
+            sideNavAction
+        });
+    }
+}

package/src/modules/dx/treeTile/treeTile.css

@@ -0,0 +1,190 @@
+@import "helpers/reset";
+@import "helpers/sidebar";
+
+:host {
+    display: block;
+
+    --base-indentation: calc(var(--dx-g-icon-size-xs) + var(--dx-g-spacing-xs));
+}
+
+.flex {
+    display: flex;
+}
+
+[aria-expanded] {
+    transition: var(--dx-g-transition-transform-2x);
+}
+
+[aria-expanded="true"] {
+    transform: rotate(90deg);
+}
+
+.tile {
+    --tile-height: 20px;
+
+    font-family: var(--dx-g-font-sans);
+    font-size: 13px;
+    line-height: var(--tile-height);
+}
+
+.tile-root {
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-sm);
+    font-weight: var(--dx-g-font-demi);
+    color: var(--dx-g-blue-vibrant-30);
+    display: block;
+}
+
+.tile-icon {
+    align-items: center;
+    height: var(--tile-height);
+}
+
+.tile-label {
+    flex: 1;
+}
+
+.tile-root .tile-expand-icon {
+    margin-left: auto;
+}
+
+.tile-with-children .tile-label {
+    order: 2;
+}
+
+.tile-with-children .tile-expand-icon {
+    order: 1;
+    padding-right: var(--dx-g-spacing-xs);
+}
+
+.indentation {
+    padding-left: var(--indentation);
+}
+
+.tile-with-children .indentation {
+    padding-left: calc(var(--indentation) - var(--base-indentation));
+}
+
+[aria-level="3"] {
+    --indentation: var(--base-indentation);
+}
+
+[aria-level="4"] {
+    --indentation: calc(2 * var(--base-indentation));
+}
+
+[aria-level="5"] {
+    --indentation: calc(3 * var(--base-indentation));
+}
+
+[aria-level="6"] {
+    --indentation: calc(4 * var(--base-indentation));
+}
+
+[aria-level="7"] {
+    --indentation: calc(5 * var(--base-indentation));
+}
+
+[aria-level="8"] {
+    --indentation: calc(6 * var(--base-indentation));
+}
+
+[aria-level="9"] {
+    --indentation: calc(7 * var(--base-indentation));
+}
+
+[aria-level="10"] {
+    --indentation: calc(8 * var(--base-indentation));
+}
+
+[aria-level="11"] {
+    --indentation: calc(9 * var(--base-indentation));
+}
+
+[aria-level="12"] {
+    --indentation: calc(10 * var(--base-indentation));
+}
+
+[aria-level="13"] {
+    --indentation: calc(11 * var(--base-indentation));
+}
+
+[aria-level="14"] {
+    --indentation: calc(12 * var(--base-indentation));
+}
+
+[aria-level="15"] {
+    --indentation: calc(13 * var(--base-indentation));
+}
+
+[aria-level="16"] {
+    --indentation: calc(14 * var(--base-indentation));
+}
+
+[aria-level="17"] {
+    --indentation: calc(15 * var(--base-indentation));
+}
+
+[aria-level="18"] {
+    --indentation: calc(16 * var(--base-indentation));
+}
+
+[aria-level="19"] {
+    --indentation: calc(17 * var(--base-indentation));
+}
+
+[aria-level="20"] {
+    --indentation: calc(18 * var(--base-indentation));
+}
+
+[aria-level="21"] {
+    --indentation: calc(19 * var(--base-indentation));
+}
+
+[aria-level="22"] {
+    --indentation: calc(20 * var(--base-indentation));
+}
+
+dx-type-badge {
+    --dx-c-type-badge-text-width: 21px;
+}
+
+dx-type-badge.get {
+    --dx-c-type-badge-color: var(--dx-g-blue-vibrant-50);
+    --dx-c-type-badge-background: var(--dx-g-blue-vibrant-90);
+}
+
+dx-type-badge.put {
+    --dx-c-type-badge-color: var(--dx-g-yellow-vibrant-40);
+    --dx-c-type-badge-background: var(--dx-g-yellow-vibrant-90);
+}
+
+dx-type-badge.post {
+    --dx-c-type-badge-color: var(--dx-g-green-vibrant-40);
+    --dx-c-type-badge-background: var(--dx-g-green-vibrant-90);
+}
+
+dx-type-badge.patch {
+    --dx-c-type-badge-color: var(--dx-g-teal-vibrant-40);
+    --dx-c-type-badge-background: var(--dx-g-teal-vibrant-90);
+}
+
+dx-type-badge.delete {
+    --dx-c-type-badge-color: var(--dx-g-red-vibrant-40);
+    --dx-c-type-badge-background: var(--dx-g-hot-orange-vibrant-90);
+}
+
+a {
+    display: block;
+    text-decoration: none;
+}
+
+a:link,
+a:visited {
+    color: var(--dx-g-gray-10);
+}
+
+a:visited.tile-root,
+a:link.tile-root {
+    color: var(--dx-g-blue-vibrant-30);
+}

package/src/modules/dx/treeTile/treeTile.html

@@ -0,0 +1,27 @@
+<template>
+    <a href={href} class={tileClass}>
+        <div class="flex indentation" aria-level={tileAriaLevel}>
+            <span
+                class="tile-label sidebar-item-truncate-text"
+                title={treeNode.label}
+            >
+                {treeNode.label}
+            </span>
+            <div class="flex tile-expand-icon tile-icon" if:true={hasChildren}>
+                <dx-icon
+                    aria-expanded={isExpanded}
+                    size={iconSize}
+                    sprite="utility"
+                    symbol="chevronright"
+                    onclick={onClickIcon}
+                ></dx-icon>
+            </div>
+            <dx-type-badge
+                if:true={showMethod}
+                class={badgeClass}
+                size="small"
+                value={methodText}
+            ></dx-type-badge>
+        </div>
+    </a>
+</template>