@salesforcedevs/dx-components 0.3.12 → 0.3.14-banner-alpha1

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

@@ -1,178 +0,0 @@
-import TreeTile from "dx/treeTile";
-import Icon from "dx/icon";
-import { createRenderComponent } from "utils/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}"]`
-    )!;
-
-    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 });
-            const tileDiv: HTMLElement = component.shadowRoot.querySelector(
-                "div.tile"
-            );
-
-            expect(tileDiv.classList).toHaveLength(1);
-            expect(tileDiv).not.toBeNull();
-            assertLevelAndLabel(tileDiv);
-
-            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 tileDiv: HTMLElement = component.shadowRoot.querySelector(
-                "div.tile.tile-root"
-            );
-            expect(tileDiv).not.toBeNull();
-            expect(tileDiv.classList).toHaveLength(2);
-            assertLevelAndLabel(tileDiv);
-
-            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 tileDiv: HTMLElement = component.shadowRoot.querySelector(
-                "div.tile.tile-with-children"
-            );
-
-            expect(tileDiv).not.toBeNull();
-            expect(tileDiv.classList).toHaveLength(2);
-            assertLevelAndLabel(tileDiv);
-
-            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 tileDiv: HTMLElement = component.shadowRoot.querySelector(
-                "div.tile.tile-selected"
-            );
-            expect(tileDiv).not.toBeNull();
-            expect(tileDiv.classList).toHaveLength(2);
-
-            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/typeBadge/__tests__/typeBadge.test.ts

@@ -1,63 +0,0 @@
-import TypeBadge from "dx/typeBadge";
-import { createRenderComponent } from "utils/tests";
-
-const TAG = "dx-type-badge";
-const render = createRenderComponent(TAG, TypeBadge);
-
-const value = "banana";
-
-describe(TAG, () => {
-    it("renders", () => {
-        const element = render({ value });
-        const el = element.shadowRoot.querySelector(".typebadge");
-        expect(el).not.toBeNull();
-        expect(el.getAttribute("style")).toBe(null);
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders the correct value", () => {
-        const element = render({ value });
-        const span = element.shadowRoot.querySelector("div");
-        expect(span.textContent).toEqual(value);
-        expect(element.getAttribute("style")).toBe(null);
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders medium class by default", () => {
-        const element = render({ value });
-        const el = element.shadowRoot.querySelector(".typebadge");
-        expect(el.className).toContain("size-medium");
-        expect(el.getAttribute("style")).toBe(null);
-        return expect(element).toBeAccessible();
-    });
-
-    it("can render small class", () => {
-        const element = render({ size: "small", value });
-        const el = element.shadowRoot.querySelector(".typebadge");
-        expect(el.className).toContain("size-small");
-        expect(el.getAttribute("style")).toBe(null);
-        return expect(element).toBeAccessible();
-    });
-
-    it("can render branded badges", () => {
-        const element = render({ size: "small", brand: "industries", value });
-
-        const el = element.shadowRoot.querySelector(".typebadge");
-        expect(el.className).toContain("size-small");
-        expect(el.getAttribute("style")).toContain(
-            `--dx-c-type-badge-color: var(--dx-g-brand-industries-color)`
-        );
-        expect(el.getAttribute("style")).toContain(
-            `--dx-c-type-badge-background: var(--dx-g-brand-industries-color-background);`
-        );
-        return expect(element).toBeAccessible();
-    });
-
-    it("can render xs class", () => {
-        const element = render({ size: "xs", value });
-        const el = element.shadowRoot.querySelector(".typebadge");
-        expect(element.getAttribute("style")).toBe(null);
-        expect(el.className).toContain("size-xs");
-        return expect(element).toBeAccessible();
-    });
-});

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

@@ -1,79 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-type-badge",
-    component: "dx-type-badge",
-    argTypes: {
-        value: {
-            control: {
-                type: "text"
-            }
-        },
-        brand: {
-            control: {
-                type: "text"
-            }
-        }
-    }
-};
-
-export const Base = (args: any) => html`
-    <dx-type-badge
-        value="${args.value || "Developer Experience"}"
-        brand="${args.brand}"
-    ></dx-type-badge>
-`;
-
-export const Branded = () => html`
-    <dx-type-badge value="industries brand" brand="industries"></dx-type-badge>
-
-    <br />
-
-    <dx-type-badge value="sales brand" brand="sales"></dx-type-badge>
-
-    <br />
-
-    <dx-type-badge value="partners brand" brand="partners"></dx-type-badge>
-
-    <br />
-
-    <dx-type-badge value="invalid brand" brand="invalid"></dx-type-badge>
-`;
-
-export const Small = (args: any) => html`
-    <dx-type-badge
-        size="small"
-        value="${args.value || "Analytics"}"
-    ></dx-type-badge>
-`;
-
-export const XsWithCustomColorAndFixedWidth = (args: any) => html`
-    <dx-type-badge size="xs" value="${args.value || "POST"}"></dx-type-badge>
-`;
-
-export const CSSHooked = () => html`
-    <style>
-        .hooks {
-            --dx-c-type-badge-color: var(--dx-g-green-vibrant-40);
-            --dx-c-type-badge-background: var(--dx-g-green-vibrant-90);
-        }
-        .hookinfo {
-            color: gray;
-            font-size: 12px;
-        }
-    </style>
-
-    <p class="hookinfo">
-        <b>--dx-c-type-badge-color:</b> <i>var(--dx-g-green-vibrant-40);</i>
-    </p>
-    <p class="hookinfo">
-        <b>--dx-c-type-badge-background:</b>
-        <i>var(--dx-g-green-vibrant-90);</i>
-    </p>
-    <br />
-
-    <dx-type-badge
-        class="hooks"
-        value="Hey I am a very loooong text"
-    ></dx-type-badge>
-`;

package/src/modules/dx/typeBadgeGroup/__tests__/mockProps.ts

@@ -1,11 +0,0 @@
-export const badges = [
-    "Developer Experience",
-    "Search Optimization",
-    "Analytics",
-    "Testing",
-    "Traffic Monitoring"
-];
-
-export default {
-    badges: JSON.stringify(badges)
-};

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

@@ -1,76 +0,0 @@
-import TypeBadge from "dx/typeBadge";
-import TypeBadgeGroup from "dx/typeBadgeGroup";
-import { TypeBadgeSize } from "typings/custom";
-import { createRenderComponent } from "utils/tests";
-import mockProps, { badges } from "./mockProps";
-
-const TAG = "dx-type-badge-group";
-const render = createRenderComponent(TAG, TypeBadgeGroup);
-
-describe(TAG, () => {
-    it("renders correct number of badges", () => {
-        const expectedSize: TypeBadgeSize = "medium";
-        const element = render(mockProps);
-
-        const els: Array<TypeBadge> = element.shadowRoot.querySelectorAll(
-            "dx-type-badge"
-        );
-        expect(els).toHaveLength(badges.length);
-        els.forEach((el, index) => {
-            expect(el.value).toBe(badges[index]);
-            expect(el.size).toBe(expectedSize);
-        });
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("can render a comma delimited string", () => {
-        const expectedSize: TypeBadgeSize = "small";
-        const element = render({
-            badges: "test1,test2,test3",
-            size: expectedSize
-        });
-
-        const els: Array<TypeBadge> = element.shadowRoot.querySelectorAll(
-            "dx-type-badge"
-        );
-        expect(els).toHaveLength(3);
-        els.forEach((el) => expect(el.size).toBe(expectedSize));
-        expect(els[0].value).toBe("test1");
-        expect(els[1].value).toBe("test2");
-        expect(els[2].value).toBe("test3");
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("can render single string value", () => {
-        const expectedBadge = "testsinglebadge";
-        const element = render({ badges: expectedBadge });
-
-        const els: Array<TypeBadge> = element.shadowRoot.querySelectorAll(
-            "dx-type-badge"
-        );
-        expect(els).toHaveLength(1);
-        expect(els[0].value).toBe(expectedBadge);
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("can render a regular array of string", () => {
-        const element = render({ badges });
-
-        const els: Array<TypeBadge> = element.shadowRoot.querySelectorAll(
-            "dx-type-badge"
-        );
-        expect(els).toHaveLength(badges.length);
-        els.forEach((el, index) => expect(el.value).toBe(badges[index]));
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("throws an error if badges value is not compatible", () => {
-        expect(() => render({ badges: { test: "badges" } })).toThrow(
-            /Key must be a string or number/
-        );
-    });
-});

package/src/modules/dx/typeBadgeGroup/typeBadgeGroup.css

@@ -1,12 +0,0 @@
-.badges-group {
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.badges-group > dx-type-badge {
-    margin-bottom: var(--dx-g-spacing-sm);
-}
-
-.badges-group > dx-type-badge:not(:last-child) {
-    margin-right: var(--dx-g-spacing-sm);
-}

package/src/modules/dx/typeBadgeGroup/typeBadgeGroup.html

@@ -1,11 +0,0 @@
-<template>
-    <div class="badges-group">
-        <template for:each={badges} for:item="badge">
-            <dx-type-badge
-                key={badge}
-                size={size}
-                value={badge}
-            ></dx-type-badge>
-        </template>
-    </div>
-</template>

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

@@ -1,19 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-type-badge-group",
-    component: "dx-type-badge-group"
-};
-
-export const Base = () => html`
-    <dx-type-badge-group
-        badges="Developer Experience, Search Optimization, Analytics"
-    ></dx-type-badge-group>
-`;
-
-export const Small = () => html`
-    <dx-type-badge-group
-        badges='["Testing", "Traffic Monitoring"]'
-        size="small"
-    ></dx-type-badge-group>
-`;

package/src/modules/dx/typeBadgeGroup/typeBadgeGroup.ts

@@ -1,18 +0,0 @@
-import { LightningElement, api } from "lwc";
-import { normalizeToArray } from "utils/normalizers";
-import { TypeBadgeSize } from "typings/custom";
-
-export default class TypeBadgeGroup extends LightningElement {
-    @api size: TypeBadgeSize = "medium";
-
-    @api
-    get badges() {
-        return this._badges;
-    }
-    set badges(value: string[] | string | null) {
-        this._badges = normalizeToArray(value);
-    }
-
-    // can be an array of strings or a comma delimited string
-    private _badges!: string | string[] | null;
-}

package/src/modules/tests/buttonTest/buttonTest.html

@@ -1,3 +0,0 @@
-<template>
-    <dx-button>test</dx-button>
-</template>

package/src/modules/tests/buttonTest/buttonTest.ts

@@ -1,3 +0,0 @@
-import { LightningElement } from "lwc";
-
-export default class ButtonTest extends LightningElement {}

package/src/modules/tests/codeBlockTest/codeBlockTest.js

@@ -1,4 +0,0 @@
-import { LightningElement } from "lwc";
-// Wrapper component required to test dx/featureGrid.
-// This component is not exposed in the build.
-export default class CodeBlockTest extends LightningElement {}

package/src/modules/tests/dropdownTest/dropdownTest.html

@@ -1,5 +0,0 @@
-<template>
-    <dx-dropdown open-on-hover={openOnHover} options={options}>
-        <dx-button>test</dx-button>
-    </dx-dropdown>
-</template>

package/src/modules/tests/dropdownTest/dropdownTest.ts

@@ -1,17 +0,0 @@
-import { LightningElement, api } from "lwc";
-
-const mockOptions = [
-    { label: "Banana", id: "banana" },
-    { label: "Orange", id: "orange" },
-    { label: "Potato", id: "potato" },
-    { label: "Shoe", id: "shoe" },
-    { label: "Broom", id: "broom" },
-    { label: "Spaghetti", id: "spaghetti" },
-    { label: "Tater Tot", id: "tater" },
-    { label: "Lint", id: "lint" }
-];
-
-export default class DropdownTest extends LightningElement {
-    options = mockOptions;
-    @api openOnHover: boolean = false;
-}

package/src/modules/tests/featureGridTest/featureGridTest.html

@@ -1,7 +0,0 @@
-<template>
-    <dx-feature-grid>
-        <dx-feature button-label="Feature 1" title="Feature 1"></dx-feature>
-        <dx-feature button-label="Feature 2" title="Feature 2"></dx-feature>
-        <dx-feature button-label="Feature 3" title="Feature 3"></dx-feature>
-    </dx-feature-grid>
-</template>

package/src/modules/tests/featureGridTest/featureGridTest.ts

@@ -1,5 +0,0 @@
-import { LightningElement } from "lwc";
-
-// Wrapper component required to test dx/featureGrid.
-// This component is not exposed in the build.
-export default class FeatureGridTest extends LightningElement {}

package/src/modules/tests/instrumentationTest/instrumentationTest.html

@@ -1,4 +0,0 @@
-<template>
-    <button onclick={handleButtonClick}>Click me!</button>
-    <dx-instrumentation use-google-tag-manager></dx-instrumentation>
-</template>

package/src/modules/tests/instrumentationTest/instrumentationTest.ts

@@ -1,8 +0,0 @@
-import { LightningElement } from "lwc";
-import { track } from "dx/instrumentation";
-
-export default class InstrumentationTest extends LightningElement {
-    handleButtonClick(e: MouseEvent) {
-        track(e.currentTarget, "buttonClick", { buttonName: "default" });
-    }
-}

package/src/modules/tests/popoverTest/popoverTest.html

@@ -1,6 +0,0 @@
-<template>
-    <dx-popover open-on-hover={openOnHover}>
-        <dx-button slot="control">test control</dx-button>
-        <div slot="content">test content</div>
-    </dx-popover>
-</template>

package/src/modules/tests/popoverTest/popoverTest.ts

@@ -1,5 +0,0 @@
-import { LightningElement, api } from "lwc";
-
-export default class PopoverTest extends LightningElement {
-    @api openOnHover: boolean = false;
-}

package/src/modules/utils/css/css.ts

@@ -1,2 +0,0 @@
-export const toDxColor = (color: string) =>
-    ["white", "transparent"].includes(color) ? color : `var(--dx-g-${color})`;

package/src/modules/utils/jest/jest.ts

@@ -1,13 +0,0 @@
-export const createMediaMock = (matches = false) =>
-    jest.fn((query) => ({
-        matches,
-        media: query,
-        onchange: null,
-        addListener: jest.fn(),
-        removeListener: jest.fn(),
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
-        dispatchEvent: jest.fn()
-    }));
-
-export const matchMediaMock = createMediaMock();