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

package/src/modules/dx/treeTile/__tests__/treeTile.test.ts

@@ -0,0 +1,168 @@
+import TreeTile from "dx/treeTile";
+import Icon from "dx/icon";
+import { createRenderComponent } from "utils-internal/tests";
+
+import { SINGLE_NODE, SINGLE_NODE_WITH_METHOD } from "./mockProps";
+
+const TAG = "dx-tree-tile";
+const render = createRenderComponent(TAG, TreeTile);
+
+const assertLevelAndLabel = (container: HTMLElement) => {
+    const levelDiv: Element = container.querySelector(
+        `[aria-level="${SINGLE_NODE.level + 2}"]`
+    )!;
+
+    expect(levelDiv).not.toBeNull();
+
+    const tileLabel: Element = levelDiv.querySelector("span.tile-label")!;
+    expect(tileLabel).not.toBeNull();
+    expect(tileLabel.textContent).toBe(SINGLE_NODE.label);
+    expect(tileLabel.getAttribute("title")).toBe(SINGLE_NODE.label);
+};
+
+describe(TAG, () => {
+    describe("render", () => {
+        it("should render as a leaf tile", () => {
+            const component = render({ treeNode: SINGLE_NODE, href: "/test" });
+            const tileAnchor: HTMLElement =
+                component.shadowRoot.querySelector("a.tile");
+
+            expect(tileAnchor.getAttribute("href")).toBe("/test");
+            expect(tileAnchor.classList).toHaveLength(2);
+            expect(tileAnchor).not.toBeNull();
+            assertLevelAndLabel(tileAnchor);
+
+            const arrowIcon: Icon =
+                component.shadowRoot.querySelector("dx-icon");
+            expect(arrowIcon).toBeNull();
+
+            const typeBadge =
+                component.shadowRoot.querySelector("dx-type-badge");
+            expect(typeBadge).toBeNull();
+
+            return expect(component).toBeAccessible();
+        });
+
+        it("should render as a root tile collapsed", () => {
+            const component = render({
+                treeNode: SINGLE_NODE,
+                isRoot: true,
+                hasChildren: true
+            });
+            const tileAnchor: HTMLElement =
+                component.shadowRoot.querySelector("a.tile.tile-root");
+            expect(tileAnchor).not.toBeNull();
+            expect(tileAnchor.classList).toHaveLength(3);
+            assertLevelAndLabel(tileAnchor);
+
+            const arrowIcon: Icon =
+                component.shadowRoot.querySelector("dx-icon")!;
+            expect(arrowIcon).not.toBeNull();
+            expect(arrowIcon.getAttribute("aria-expanded")).toBe("false");
+            expect(arrowIcon.size).toBe("small");
+
+            const typeBadge =
+                component.shadowRoot.querySelector("dx-type-badge");
+            expect(typeBadge).toBeNull();
+
+            return expect(component).toBeAccessible();
+        });
+
+        it("should render an expanded tile with no brand method", () => {
+            const component = render({
+                treeNode: SINGLE_NODE_WITH_METHOD,
+                hasChildren: true,
+                isExpanded: true
+            });
+            const tileAnchor: HTMLElement = component.shadowRoot.querySelector(
+                "a.tile.tile-with-children"
+            );
+
+            expect(tileAnchor).not.toBeNull();
+            expect(tileAnchor.classList).toHaveLength(3);
+            assertLevelAndLabel(tileAnchor);
+
+            const arrowIcon: Icon =
+                component.shadowRoot.querySelector("dx-icon");
+            expect(arrowIcon).not.toBeNull();
+            expect(arrowIcon.getAttribute("aria-expanded")).toBe("true");
+            expect(arrowIcon.size).toBe("xsmall");
+
+            const typeBadge =
+                component.shadowRoot.querySelector("dx-type-badge");
+            expect(typeBadge).toBeNull();
+
+            return expect(component).toBeAccessible();
+        });
+
+        it("should render a selected tile", () => {
+            const component = render({
+                treeNode: SINGLE_NODE,
+                isSelected: true
+            });
+            const tileAnchor: HTMLElement = component.shadowRoot.querySelector(
+                "a.tile.sidebar-item-selected"
+            );
+            expect(tileAnchor).not.toBeNull();
+            expect(tileAnchor.classList).toHaveLength(3);
+
+            return expect(component).toBeAccessible();
+        });
+
+        it("should render a leaf tile with a valid brand method", () => {
+            const component = render({ treeNode: SINGLE_NODE_WITH_METHOD });
+            const typeBadge =
+                component.shadowRoot.querySelector("dx-type-badge");
+
+            expect(typeBadge).not.toBeNull();
+            expect(typeBadge.classList).toHaveLength(3);
+            expect(typeBadge.classList).toContain(
+                SINGLE_NODE_WITH_METHOD.method!
+            );
+            expect(typeBadge.classList).toContain("flex");
+            expect(typeBadge.classList).toContain("tile-icon");
+            expect(typeBadge.value).toBe("GET");
+
+            return expect(component).toBeAccessible();
+        });
+
+        it("should render a leaf tile with a non valid brand method", () => {
+            const method = "not_valid";
+            const component = render({
+                treeNode: { ...SINGLE_NODE_WITH_METHOD, method }
+            });
+            const typeBadge =
+                component.shadowRoot.querySelector("dx-type-badge");
+
+            expect(typeBadge).not.toBeNull();
+            expect(typeBadge.classList).toHaveLength(3);
+            expect(typeBadge.classList).toContain(method);
+            expect(typeBadge.classList).toContain("flex");
+            expect(typeBadge.classList).toContain("tile-icon");
+            expect(typeBadge.value).toBe("");
+
+            return expect(component).toBeAccessible();
+        });
+    });
+
+    describe("interactions", () => {
+        it("should fire iconclick event when the icon is clicked", () => {
+            const component = render({
+                treeNode: SINGLE_NODE_WITH_METHOD,
+                hasChildren: true,
+                isExpanded: true
+            });
+
+            const arrowIcon: HTMLElement =
+                component.shadowRoot.querySelector("dx-icon");
+
+            const mockIconClick = jest.fn();
+            component.addEventListener("iconclick", mockIconClick);
+
+            expect(arrowIcon).not.toBeNull();
+            arrowIcon.click();
+
+            expect(mockIconClick).toBeCalledTimes(1);
+        });
+    });
+});

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>

package/src/modules/dx/treeTile/treeTile.ts

@@ -0,0 +1,59 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { InternalTreeNode } from "typings/custom";
+
+const methodTextMap: {
+    [key: string]: string;
+} = {
+    get: "GET",
+    put: "PUT",
+    post: "POST",
+    patch: "PATC",
+    delete: "DELE"
+};
+
+export default class TreeTile extends LightningElement {
+    @api isRoot = false;
+    @api treeNode!: InternalTreeNode;
+    @api isExpanded = false;
+    @api hasChildren = false;
+    @api isSelected = false;
+    @api href!: string;
+
+    get tileAriaLevel() {
+        return this.treeNode.level + 2;
+    }
+
+    private get iconSize() {
+        return this.isRoot ? "small" : "xsmall";
+    }
+
+    private get badgeClass() {
+        return cx("flex", "tile-icon", this.treeNode.method);
+    }
+
+    private get showMethod() {
+        return this.treeNode.method && !this.hasChildren;
+    }
+
+    private get methodText() {
+        if (this.treeNode.method && this.treeNode.method in methodTextMap) {
+            return methodTextMap[this.treeNode.method];
+        }
+        return "";
+    }
+
+    private get tileClass() {
+        return cx("tile", "sidebar-item", {
+            "tile-root": this.isRoot,
+            "tile-with-children": !this.isRoot && this.hasChildren,
+            "sidebar-item-selected": this.isSelected
+        });
+    }
+
+    private onClickIcon(event: Event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.dispatchEvent(new CustomEvent("iconclick"));
+    }
+}

package/src/modules/dx/typeBadge/__tests__/typeBadge.test.ts

@@ -0,0 +1,77 @@
+import TypeBadge from "dx/typeBadge";
+import { createRenderComponent } from "utils-internal/tests";
+import { TypeBadgeSize, BadgeType } from "typings/custom";
+
+const TAG = "dx-type-badge";
+const render = createRenderComponent(TAG, TypeBadge);
+
+const value = "banana";
+
+const assertContainerClasses = (
+    container: HTMLElement,
+    type: BadgeType = "metadata",
+    size: TypeBadgeSize = "default"
+) => {
+    expect(container).not.toBeNull();
+    expect(container.classList).toHaveLength(3);
+    expect(container.classList).toContain("typebadge");
+    expect(container.classList).toContain(`typebadge_${type}`);
+    expect(container.classList).toContain(`size-${size}`);
+};
+
+describe(TAG, () => {
+    it("renders", () => {
+        const element = render({ value });
+        const el: HTMLElement = element.shadowRoot.querySelector(".typebadge");
+        assertContainerClasses(el);
+        expect(el.getAttribute("style")).toBe(null);
+
+        const spanLabel = el.querySelector("span");
+        expect(spanLabel?.textContent).toBe(value);
+
+        return expect(element).toBeAccessible();
+    });
+
+    it("renders a content-type badge and size small", () => {
+        const element = render({ value, type: "content-type", size: "small" });
+        const el: HTMLElement = element.shadowRoot.querySelector(".typebadge");
+        assertContainerClasses(el, "content-type", "small");
+        expect(el.getAttribute("style")).toBe(null);
+
+        return expect(element).toBeAccessible();
+    });
+
+    it("renders as default type in case type is falsy", () => {
+        const element = render({ value, type: null });
+        const container = element.shadowRoot.querySelector(".typebadge");
+        assertContainerClasses(container);
+        expect(container.getAttribute("style")).toBe(null);
+    });
+
+    it("renders with an specific color", () => {
+        const element = render({ value, color: "blue" });
+        const el: HTMLElement = element.shadowRoot.querySelector(".typebadge");
+
+        expect(el.getAttribute("style")).toContain(
+            "--background: var(--dx-g-blue-vibrant-95)"
+        );
+        expect(el.getAttribute("style")).toContain(
+            "--color: var(--dx-g-blue-vibrant-40)"
+        );
+
+        return expect(element).toBeAccessible();
+    });
+
+    it("can pass a brand as color", () => {
+        const element = render({ color: "industries", value });
+
+        const el = element.shadowRoot.querySelector(".typebadge");
+        expect(el.getAttribute("style")).toContain(
+            `--color: var(--dx-g-brand-industries-color)`
+        );
+        expect(el.getAttribute("style")).toContain(
+            `--background: var(--dx-g-brand-industries-color-background)`
+        );
+        return expect(element).toBeAccessible();
+    });
+});

package/src/modules/dx/typeBadge/typeBadge.css

@@ -0,0 +1,74 @@
+@import "helpers/reset";
+
+.typebadge {
+    align-items: center;
+    background: var(--dx-c-type-badge-background, var(--background));
+    border-radius: var(--dx-c-type-badge-border-radius, var(--border-radius));
+    color: var(--dx-c-type-badge-color, var(--color));
+    display: flex;
+    justify-content: center;
+    height: var(--dx-c-type-badge-height, var(--height));
+    text-align: center;
+    white-space: nowrap;
+    width: min-content;
+}
+
+.typebadge.typebadge_metadata {
+    --background: var(--dx-g-cloud-blue-natural-90);
+    --border-radius: var(--dx-g-spacing-xs);
+    --color: var(--dx-g-blue-vibrant-20);
+    --height: var(--dx-g-spacing-md);
+    --horizontal-spacing: var(--dx-g-spacing-sm);
+
+    font-family: var(--dx-g-font-display);
+    font-size: 10px;
+    letter-spacing: 0.6px;
+    text-transform: var(--dx-c-type-badge-text-transform, uppercase);
+    padding: 0 var(--horizontal-spacing);
+}
+
+.typebadge.typebadge_content-type {
+    --background: var(--sds-g-gray-3);
+    --border-radius: var(--dx-g-spacing-smd);
+    --color: var(--sds-g-gray-10);
+    --height: var(--dx-g-spacing-lg);
+    --horizontal-spacing: var(--dx-g-spacing-smd);
+    --vertical-spacing: var(--dx-g-spacing-xs);
+
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-xs);
+    font-weight: var(--dx-g-font-bold);
+    padding: var(--vertical-spacing) var(--horizontal-spacing);
+}
+
+.typebadge.typebadge_content-type.size-small {
+    --height: var(--dx-g-spacing-mlg);
+    --horizontal-spacing: var(--dx-g-spacing-sm);
+
+    font-size: 10px;
+}
+
+.typebadge.typebadge_metadata.size-small {
+    --height: var(--dx-g-spacing-md);
+    --horizontal-spacing: var(--dx-g-spacing-xs);
+
+    font-size: 8px;
+    letter-spacing: 0.5px;
+}
+
+.typebadge.typebadge_metadata span {
+    transform: translateY(2px);
+    width: var(--dx-c-type-badge-text-width, unset);
+}
+
+.typebadge.typebadge_metadata.size-small span {
+    transform: translateY(1px);
+}
+
+@media screen and (max-width: 768px) {
+    .typebadge.typebadge_metadata:not(.size-small) {
+        height: var(--dx-g-spacing-lg);
+        padding: 0 var(--dx-g-spacing-sm);
+        font-size: var(--dx-g-text-2xs);
+    }
+}

package/src/modules/dx/typeBadge/typeBadge.html

@@ -0,0 +1,5 @@
+<template>
+    <div class={className} style={style}>
+        <span>{value}</span>
+    </div>
+</template>