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

package/src/modules/dx/spinner/spinner.html

@@ -1,6 +0,0 @@
-<template>
-    <div role="status" class={containerClass}>
-        <div class="spinner_dot-a"></div>
-        <div class="spinner_dot-b"></div>
-    </div>
-</template>

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

@@ -1,69 +0,0 @@
-import { html } from "lit-html";
-import { SpinnerSize, SpinnerVariant } from "typings/custom";
-
-type SpinnerStoryArgs = {
-    size: SpinnerSize;
-    variant: SpinnerVariant;
-};
-
-const sizeOptions: Array<SpinnerSize> = ["medium", "x-small", "small", "large"];
-const variantOptions: Array<SpinnerVariant> = ["base", "brand", "inverse"];
-const variantToBackgroundColor: { [key: string]: string } = {
-    inverse: "black"
-};
-
-export default {
-    title: "dx/dx-spinner",
-    component: "dx-spinner",
-    argTypes: {
-        size: {
-            control: {
-                type: "select",
-                options: sizeOptions
-            }
-        },
-        variant: {
-            control: {
-                type: "select",
-                options: variantOptions
-            }
-        }
-    }
-};
-
-const style = (variant: SpinnerVariant = "base") => html`
-    <style>
-        .spinner-wrapper {
-            position: relative;
-            height: 100vh;
-            background-color: ${variantToBackgroundColor[variant] || "white"};
-        }
-    </style>
-`;
-
-const [defaultSize] = sizeOptions;
-const [defaultVariant] = variantOptions;
-
-const Template = ({ size, variant }: SpinnerStoryArgs) => html`
-    ${style(variant)}
-    <div class="spinner-wrapper">
-        <dx-spinner
-            size="${size || defaultSize}"
-            variant="${variant || defaultVariant}"
-        ></dx-spinner>
-    </div>
-`;
-
-export const Base = Template;
-
-export const BrandLarge = (args: SpinnerStoryArgs) => Template(args);
-BrandLarge.args = {
-    size: "large",
-    variant: "brand"
-};
-
-export const InverseSmall = (args: SpinnerStoryArgs) => Template(args);
-InverseSmall.args = {
-    size: "small",
-    variant: "inverse"
-};

package/src/modules/dx/spinner/spinner.ts

@@ -1,20 +0,0 @@
-import { LightningElement, api } from "lwc";
-import cx from "classnames";
-import type { SpinnerSize, SpinnerVariant } from "typings/custom";
-
-export default class Spinner extends LightningElement {
-    @api size: SpinnerSize = "medium";
-    @api variant: SpinnerVariant = "base";
-
-    connectedCallback() {
-        this.classList.add("spinner_container");
-    }
-
-    get containerClass(): string {
-        return cx(
-            "spinner",
-            this.size && `spinner_${this.size}`,
-            this.variant && this.variant !== "base" && `spinner_${this.variant}`
-        );
-    }
-}

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

@@ -1,129 +0,0 @@
-import Tab from "dx/tab";
-import Icon from "dx/icon";
-import { track } from "dx/instrumentation";
-import { createRenderComponent } from "utils-internal/tests";
-
-jest.mock("dx/instrumentation");
-
-const TAG = "dx-tab";
-const render = createRenderComponent(TAG, Tab);
-
-const PROPS = {
-    label: "documentation",
-    href: "/test"
-};
-
-describe(TAG, () => {
-    it("renders a single link with a label", () => {
-        const element = render(PROPS);
-
-        const links: Array<HTMLAnchorElement> =
-            element.shadowRoot.querySelectorAll("a");
-
-        expect(links.length).toEqual(1);
-        const [singleLink] = links;
-        expect(singleLink.href).toMatch(PROPS.href);
-        expect(singleLink.classList).toHaveLength(2);
-        expect(singleLink.classList).toContain("nav-list-item");
-        expect(singleLink.classList).toContain("nav-list-item_default");
-
-        const span: HTMLElement = singleLink.querySelector("span")!;
-        expect(span.textContent).toBe(PROPS.label);
-
-        expect(element.shadowRoot.querySelector("button")).toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders a link as active and small variant", () => {
-        const element = render({ ...PROPS, isActive: true, variant: "small" });
-
-        const link: HTMLAnchorElement = element.shadowRoot.querySelector("a");
-
-        expect(link.href).toMatch(PROPS.href);
-        expect(link.classList).toHaveLength(3);
-        expect(link.classList).toContain("nav-list-item");
-        expect(link.classList).toContain("nav-list-item_small");
-        expect(link.classList).toContain("state-active");
-
-        expect(element.shadowRoot.querySelector("button")).toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders a button if no href provided", () => {
-        const label = "test button";
-        const element = render({ label });
-
-        const buttons: Array<HTMLButtonElement> =
-            element.shadowRoot.querySelectorAll("button");
-
-        expect(buttons).toHaveLength(1);
-        const [singleButton] = buttons;
-
-        expect(singleButton.classList).toHaveLength(2);
-        expect(singleButton.classList).toContain("nav-list-item");
-        expect(singleButton.classList).toContain("nav-list-item_default");
-
-        const span: HTMLElement = singleButton.querySelector("span")!;
-        expect(span.textContent).toBe(label);
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders a button with an icon if useIcon is passed as true", () => {
-        const label = "test button";
-        const element = render({ label, useIcon: true });
-
-        const buttons: Array<HTMLButtonElement> =
-            element.shadowRoot.querySelectorAll("button");
-
-        expect(buttons).toHaveLength(1);
-        const [singleButton] = buttons;
-
-        const span: HTMLElement = singleButton.querySelector("span")!;
-        expect(span.textContent).toBe(label);
-
-        const icon: Element & Icon = singleButton.querySelector("dx-icon")!;
-        expect(icon).not.toBeNull();
-        expect(icon.size).toBe("small");
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders a button with label only if variant is small", () => {
-        const label = "test button";
-        const element = render({ label, variant: "small", useIcon: "true" });
-
-        const button: HTMLButtonElement =
-            element.shadowRoot.querySelector("button");
-
-        expect(button.classList).toHaveLength(2);
-        expect(button.classList).toContain("nav-list-item");
-        expect(button.classList).toContain("nav-list-item_small");
-
-        const span: HTMLElement = button.querySelector("span")!;
-        expect(span.textContent).toBe(label);
-
-        const icon: Element & Icon = button.querySelector("dx-icon")!;
-        expect(icon).not.toBeNull();
-        expect(icon.size).toBe("xsmall");
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("calls track when the link is clicked", () => {
-        const element = render(PROPS);
-
-        const link: HTMLElement = element.shadowRoot.querySelector("a");
-        expect(link).not.toBeNull();
-        link.click();
-
-        expect(track).toHaveBeenCalledTimes(1);
-        expect(track).toBeCalledWith(link, "custEv_topNavLinkClick", {
-            navHeading: PROPS.label,
-            clickText: PROPS.href,
-            pageLocation: window.location.pathname
-        });
-    });
-});

package/src/modules/dx/tab/tab.css

@@ -1,106 +0,0 @@
-@import "helpers/reset";
-
-a {
-    text-decoration: none;
-}
-
-.nav-list-item {
-    --horizontal-spacing: var(
-        --dx-c-tab-horizontal-spacing,
-        var(--dx-g-spacing-md)
-    );
-
-    position: relative;
-    display: flex;
-    align-items: center;
-    height: var(--dx-g-spacing-xl);
-    font-family: var(--dx-g-font-display);
-    white-space: nowrap;
-    color: var(--dx-g-blue-vibrant-20);
-    transition: var(--dx-g-transition-hue-1x);
-    cursor: pointer;
-    outline-offset: -1px;
-}
-
-.nav-list-item_default {
-    border: 0;
-    border-radius: var(--dx-g-spacing-md);
-    font-size: var(--dx-g-text-sm);
-    padding: 0 var(--horizontal-spacing);
-}
-
-.nav-list-item_small {
-    --border-color: transparent;
-
-    border-bottom: 2px solid var(--border-color);
-    font-size: var(--dx-g-text-xs);
-    height: calc(var(--dx-g-spacing-xl) - 2px);
-    margin: 0 var(--horizontal-spacing);
-}
-
-.nav-list-item > span {
-    margin-top: var(--dx-g-spacing-xs);
-}
-
-button.nav-list-item_default > dx-icon {
-    margin-left: var(--dx-g-spacing-sm);
-}
-
-button.nav-list-item_small > dx-icon {
-    margin-left: var(--dx-g-spacing-xs);
-}
-
-.nav-list-item_default:hover,
-.nav-list-item_default:active,
-:host([aria-expanded="true"]) button.nav-list-item_default {
-    background: var(
-        --dx-g-brand-current-button-color-background-inactive,
-        var(--dx-g-brand-default-button-color-background-inactive)
-    );
-}
-
-button.nav-list-item:hover > dx-icon,
-button.nav-list-item:active > dx-icon,
-:host([aria-expanded="true"]) button.nav-list-item > dx-icon {
-    transform: rotateX(180deg);
-}
-
-.nav-list-item_small:hover,
-.nav-list-item_small:active,
-:host([aria-expanded="true"]) button.nav-list-item_small {
-    --border-color: var(--dx-g-blue-vibrant-40);
-
-    color: var(--dx-g-blue-vibrant-40);
-}
-
-.nav-list-item_small.state-active {
-    --border-color: var(--dx-g-blue-vibrant-50);
-
-    color: var(--dx-g-blue-vibrant-50);
-}
-
-.nav-list-item_default.state-active {
-    background: var(
-        --dx-g-brand-current-button-color-background-active,
-        var(--dx-g-brand-default-button-color-background-active)
-    );
-    color: var(--dx-g-brand-current-color, var(--dx-g-brand-default-color));
-}
-
-@media (max-width: 1160px) {
-    .nav-list-item_small {
-        --horizontal-spacing: var(
-            --dx-c-tab-horizontal-spacing,
-            var(--dx-g-spacing-smd)
-        );
-    }
-}
-
-@media (max-width: 1090px) {
-    .nav-list-item_small {
-        --horizontal-spacing: var(
-            --dx-c-tab-horizontal-spacing,
-            var(--dx-g-spacing-sm)
-        );
-    }
-}

package/src/modules/dx/tab/tab.html

@@ -1,13 +0,0 @@
-<template>
-    <a if:true={href} class={className} href={href} onclick={sendGtm}>
-        <span>{label}</span>
-    </a>
-    <button if:false={href} class={className}>
-        <span>{label}</span>
-        <dx-icon
-            if:true={useIcon}
-            symbol="chevrondown"
-            size={iconSize}
-        ></dx-icon>
-    </button>
-</template>

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

@@ -1,57 +0,0 @@
-import { html } from "lit-html";
-import { TabVariant } from "typings/custom";
-
-type StoryArgs = {
-    isActive: boolean;
-    label: string;
-    useIcon: boolean;
-    variant: TabVariant;
-};
-const VARIANT_OPTIONS: Array<TabVariant> = ["default", "small"];
-
-export default {
-    title: "dx/dx-tab",
-    component: "dx-tab",
-    argTypes: {
-        variant: {
-            control: {
-                type: "select",
-                options: VARIANT_OPTIONS
-            }
-        }
-    }
-};
-
-const Template = ({ variant, label, isActive, useIcon }: StoryArgs) => html`
-    <dx-tab
-        label="${label}"
-        is-active="${isActive}"
-        variant="${variant}"
-        use-icon="${useIcon}"
-    ></dx-tab>
-`;
-
-export const Base = (args: StoryArgs) => Template(args);
-Base.args = {
-    isActive: false,
-    useIcon: false,
-    label: "Banana",
-    variant: VARIANT_OPTIONS[0]
-};
-
-export const TabGroup = ({ variant }: { variant: TabVariant }) => html`
-    <style>
-        .container {
-            display: flex;
-            --dx-c-tab-horizontal-spacing: var(--dx-g-spacing-xs);
-        }
-    </style>
-    <nav class="container">
-        <dx-tab label="Banana" variant="${variant}"></dx-tab>
-        <dx-tab label="Apple" variant="${variant}"></dx-tab>
-    </nav>
-`;
-
-TabGroup.args = {
-    variant: VARIANT_OPTIONS[0]
-};

package/src/modules/dx/tab/tab.ts

@@ -1,52 +0,0 @@
-import { LightningElement, api } from "lwc";
-import { track } from "dx/instrumentation";
-import cx from "classnames";
-import { TabVariant } from "typings/custom";
-import { normalizeBoolean } from "utils/normalizers";
-
-export default class Tab extends LightningElement {
-    @api label: string | null = null;
-    @api href: string | null = null;
-    @api variant: TabVariant = "default";
-
-    @api
-    get isActive() {
-        return this._isActive;
-    }
-
-    set isActive(value) {
-        this._isActive = normalizeBoolean(value);
-    }
-
-    @api
-    get useIcon() {
-        return this._useIcon;
-    }
-
-    set useIcon(value) {
-        this._useIcon = normalizeBoolean(value);
-    }
-
-    _useIcon = false;
-    _isActive = false;
-
-    private sendGtm(e: PointerEvent) {
-        track(e.currentTarget!, "custEv_topNavLinkClick", {
-            navHeading: this.label || undefined,
-            clickText: this.href || undefined,
-            pageLocation: window.location.pathname
-        });
-    }
-
-    get className() {
-        return cx(
-            "nav-list-item",
-            this.isActive && "state-active",
-            `nav-list-item_${this.variant}`
-        );
-    }
-
-    get iconSize() {
-        return this.variant === "small" ? "xsmall" : "small";
-    }
-}

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

@@ -1,28 +0,0 @@
-export default {
-    title: "In this guide",
-    value: "intro",
-    options: [
-        {
-            label: "Introduction",
-            id: "intro",
-            anchor: "#test1"
-        },
-        {
-            label: "Deep dive: Registering the Record Class",
-            id: "deepdive",
-            anchor: "#test2"
-        },
-        {
-            label:
-                "Why build on Quip? This is an extra long blurb to test the toc wrapping ability",
-            id: "quip",
-            anchor: "#test3"
-        },
-        {
-            label:
-                "SomeLongExampleWordWithoutAnyBreaks and Then a Word",
-            id: "long-word",
-            anchor: "#test4"
-        }
-    ]
-};

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

@@ -1,109 +0,0 @@
-import Button from "dx/button";
-import Toc from "dx/toc";
-import { createRenderComponent } from "utils-internal/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-toc";
-const render = createRenderComponent(TAG, Toc);
-
-describe(TAG, () => {
-    it("renders", () => {
-        const element = render(mockProps);
-
-        const container: HTMLElement = element.shadowRoot.querySelector(".toc");
-        const renderedTitle: HTMLElement =
-            element.shadowRoot.querySelector("h2");
-        const button: Button =
-            element.shadowRoot.querySelector(".toggle-button");
-        expect(renderedTitle).not.toBeNull();
-        expect(container).not.toBeNull();
-        expect(renderedTitle.textContent).toEqual(mockProps.title);
-        expect(button.iconSymbol).toEqual("open_panel");
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders table of contents buttons, and the first one is selected", () => {
-        const element = render(mockProps);
-
-        const optionsListComponent: Array<HTMLElement> =
-            element.shadowRoot.querySelectorAll("a");
-        expect(optionsListComponent).toHaveLength(mockProps.options.length);
-        expect(optionsListComponent[0].className).toEqual(
-            "content-button selected"
-        );
-        return expect(element).toBeAccessible();
-    });
-
-    it('sends custom event "selectedcontent" with id on click', () => {
-        const element = render(mockProps);
-
-        const EVENT_DETAIL_PARAMETER = { name: mockProps.options[0].id };
-        const handler = jest.fn();
-        element.addEventListener("selectedcontent", handler);
-
-        return Promise.resolve().then(() => {
-            const linkEl = element.shadowRoot.querySelector("a");
-            linkEl.click();
-            expect(handler).toHaveBeenCalled();
-            expect(handler.mock.calls[0][0].detail).toEqual(
-                EVENT_DETAIL_PARAMETER
-            );
-            return expect(element).toBeAccessible();
-        });
-    });
-
-    it('Validate "value" recieved ', () => {
-        const element = render({ ...mockProps });
-
-        return Promise.resolve().then(() => {
-            const optionsListComponent: Array<HTMLElement> =
-                element.shadowRoot.querySelectorAll("a");
-            optionsListComponent.forEach((e) => {
-                if (e.getAttribute("contentid") === mockProps.value) {
-                    expect(e.className).toEqual("content-button selected");
-                }
-            });
-            return expect(element).toBeAccessible();
-        });
-    });
-
-    it('Validate no "value" recieved', () => {
-        const element = render({ ...mockProps, value: undefined });
-
-        return Promise.resolve().then(() => {
-            const buttons: Array<HTMLElement> =
-                element.shadowRoot.querySelectorAll("a");
-            expect(buttons[0].className).toEqual("content-button selected");
-            return expect(element).toBeAccessible();
-        });
-    });
-
-    it("toggles the hidden className on click of toggle button", () => {
-        const element = render(mockProps);
-
-        const linkToggle = element.shadowRoot.querySelector(".toggle-button");
-        linkToggle.click();
-        return Promise.resolve().then(() => {
-            const container = element.shadowRoot.querySelector(".toc_content");
-            expect(container).toBe(null);
-            return expect(element).toBeAccessible();
-        });
-    });
-
-    it("test list recieved as string ", () => {
-        const optionsListParameter = [
-            { label: "Introduction", id: "12312", anchor: "#test" }
-        ];
-        const element = render({
-            ...mockProps,
-            options: JSON.stringify(optionsListParameter)
-        });
-
-        return Promise.resolve().then(() => {
-            const optionListComponent: Array<HTMLElement> =
-                element.shadowRoot.querySelectorAll("a");
-            expect(optionListComponent).toHaveLength(element.options.length);
-            return expect(element).toBeAccessible();
-        });
-    });
-});

package/src/modules/dx/toc/toc.css

@@ -1,94 +0,0 @@
-@import "helpers/reset";
-@import "helpers/text";
-
-:host {
-    --dx-c-toc-width: 284px;
-}
-
-.toc {
-    display: flex;
-    flex-direction: row-reverse;
-    width: var(--dx-c-toc-width);
-    word-break: break-word;
-}
-
-.toc_collapsed {
-    width: var(--dx-g-spacing-xl);
-    margin-left: var(--dx-g-spacing-xl);
-}
-
-.toc_content {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    transition: var(--dx-g-transition-hue-1x);
-    padding-bottom: var(--dx-g-spacing-smd);
-}
-
-.state-hide-content {
-    opacity: 0;
-    pointer-events: none;
-}
-
-.toc_title {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: flex-start;
-    margin-bottom: var(--dx-g-spacing-md);
-}
-
-.dx-text-heading-5 {
-    padding-top: var(--dx-g-spacing-sm);
-    transition: var(--dx-g-transition-hue-1x);
-}
-
-.toggle-button.collapsed {
-    --dx-c-button-opacity: 1;
-
-    transform: rotate(180deg);
-}
-
-.toggle-button {
-    width: var(--dx-g-icon-size-xl);
-    height: var(--dx-g-icon-size-xl);
-
-    --dx-c-button-opacity: 0;
-    --dx-c-button-custom-color: var(--dx-g-blue-vibrant-50);
-    --dx-c-button-custom-background: white;
-    --dx-c-button-custom-border: white;
-    --dx-c-button-custom-color-hover: white;
-    --dx-c-button-custom-background-hover: var(--dx-g-blue-vibrant-50);
-    --dx-c-button-custom-border-hover: var(--dx-g-blue-vibrant-50);
-}
-
-.toggle-button:hover {
-    --dx-c-button-opacity: 1;
-}
-
-.content-button {
-    line-height: var(--dx-g-text-lg);
-    color: var(--dx-g-blue-vibrant-20);
-    font-family: var(--dx-g-font-sans);
-    font-size: var(--dx-g-text-sm);
-    text-align: left;
-    padding: var(--dx-g-spacing-xs);
-    padding-left: 11px;
-    border-left: 3px solid transparent;
-    transition: var(--dx-g-transition-hue-1x);
-}
-
-.content-button.selected {
-    border-color: var(--dx-g-blue-vibrant-50);
-    color: var(--dx-g-blue-vibrant-50);
-    font-weight: bold;
-}
-
-.content-button:not(.selected):hover {
-    color: var(--dx-g-blue-vibrant-40);
-    border-color: var(--dx-g-blue-vibrant-40);
-}
-
-.toc:hover .toggle-button {
-    --dx-c-button-opacity: 1;
-}