@salesforcedevs/dx-components 0.25.5 → 0.26.1-alpha0.3

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

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

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

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

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

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

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

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