@salesforcedevs/dx-components 0.10.0 → 0.10.1-alpha.100

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

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

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

@@ -0,0 +1,20 @@
+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,71 +1,129 @@
 import Tab from "dx/tab";
+import Icon from "dx/icon";
+import { track } from "dx/instrumentation";
 import { createRenderComponent } from "utils/tests";
-import mockProps from "./mockProps";
+
+jest.mock("dx/instrumentation");
 
 const TAG = "dx-tab";
 const render = createRenderComponent(TAG, Tab);
 
-const makeAccessibleTab = (element: HTMLElement) => {
-    const tablist = document.createElement("div");
-    document.body.appendChild(tablist);
-    tablist.setAttribute("role", "tablist");
-    tablist.appendChild(element);
-
-    const shadowRoot = element.shadowRoot;
-    const button = shadowRoot && shadowRoot.querySelector("button");
-    if (button) {
-        button.setAttribute("aria-label", "Label");
-    }
+const PROPS = {
+    label: "documentation",
+    href: "/test"
 };
 
 describe(TAG, () => {
-    it("renders an active tab", () => {
-        const element = render({
-            ...mockProps,
-            active: true
-        });
-        makeAccessibleTab(element);
-
-        const buttonEl = element.shadowRoot.querySelector("button");
-        expect(buttonEl).not.toBeNull();
-        // Using `startsWith` here instead of exactly matching the attribute
-        // because something is auto-suffixing the id with `-${nextIndex}`
-        expect(
-            buttonEl.getAttribute("id").startsWith("tabs--1--tab--0")
-        ).toEqual(true);
-        expect(
-            buttonEl
-                .getAttribute("aria-controls")
-                .startsWith("tabs--1--panel--0")
-        ).toEqual(true);
-        expect(buttonEl.getAttribute("aria-selected")).toEqual("true");
-        expect(buttonEl.getAttribute("tabindex")).toEqual("0");
-        expect(buttonEl.getAttribute("class")).toContain("tab-active");
+    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 an inactive panel", () => {
-        const element = render({
-            ...mockProps,
-            active: false
-        });
-        makeAccessibleTab(element);
-
-        const buttonEl = element.shadowRoot.querySelector("button");
-        expect(buttonEl).not.toBeNull();
-        expect(
-            buttonEl.getAttribute("id").startsWith("tabs--1--tab--0")
-        ).toEqual(true);
-        expect(
-            buttonEl
-                .getAttribute("aria-controls")
-                .startsWith("tabs--1--panel--0")
-        ).toEqual(true);
-        expect(buttonEl.getAttribute("aria-selected")).toEqual("false");
-        expect(buttonEl.getAttribute("tabindex")).toEqual("-1");
-        expect(buttonEl.getAttribute("class")).not.toContain("tab-active");
+    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,31 +1,106 @@
 @import "helpers/reset";
 
-.tab {
-    color: var(--dx-g-blue-vibrant-20);
+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);
-    font-size: var(--dx-g-text-sm);
-    text-transform: uppercase;
-    font-weight: var(--dx-g-font-demi);
+    white-space: nowrap;
+    color: var(--dx-g-blue-vibrant-20);
     transition: var(--dx-g-transition-hue-1x);
+    cursor: pointer;
+    outline-offset: -1px;
 }
 
-.tab-small {
+.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);
 }
 
-.tab-primary {
-    border-color: var(--dx-g-blue-vibrant-20);
-    padding-bottom: calc(var(--dx-g-spacing-xs) + var(--dx-g-spacing-2xs));
+.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)
+    );
 }
 
-.tab-primary:hover {
-    padding-bottom: var(--dx-g-spacing-xs);
-    border-bottom-width: var(--dx-g-spacing-2xs);
+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);
 }
 
-.tab-primary.tab-active {
+.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);
-    border-color: var(--dx-g-blue-vibrant-50);
-    padding-bottom: var(--dx-g-spacing-xs);
-    border-bottom-width: var(--dx-g-spacing-2xs);
+}
+
+.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,15 +1,13 @@
 <template>
-    <button
-        role="tab"
-        part="tab"
-        id={tabId}
-        onclick={onClick}
-        class={className}
-        tabindex={activeTabIndex}
-        aria-controls={panelId}
-        aria-label="Tab button"
-        aria-selected={active}
-    >
-        <slot></slot>
+    <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

@@ -0,0 +1,57 @@
+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,45 +1,52 @@
 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 groupId!: string;
-    @api index!: number;
-    @api active: boolean = false;
-    @api small: boolean = false;
-
-    @api focus() {
-        const button = this.template.querySelector("button");
-        if (!button) {
-            return;
-        }
-        button.focus();
+    @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);
     }
 
-    private get activeTabIndex() {
-        return this.active ? 0 : -1;
+    @api
+    get useIcon() {
+        return this._useIcon;
     }
 
-    private get panelId() {
-        return `tabs--${this.groupId}--panel--${this.index}`;
+    set useIcon(value) {
+        this._useIcon = normalizeBoolean(value);
     }
 
-    private get tabId() {
-        return `tabs--${this.groupId}--tab--${this.index}`;
+    _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
+        });
     }
 
-    private get className() {
+    get className() {
         return cx(
-            "tab",
-            "tab-primary",
-            this.small && "tab-small",
-            this.active && "tab-active"
+            "nav-list-item",
+            this.isActive && "state-active",
+            `nav-list-item_${this.variant}`
         );
     }
 
-    private onClick() {
-        this.dispatchEvent(
-            new CustomEvent("select", {
-                detail: this.index
-            })
-        );
+    get iconSize() {
+        return this.variant === "small" ? "xsmall" : "small";
     }
 }

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

@@ -0,0 +1 @@
+/* Code generated by scripts/postinstall.js DO NOT EDIT */.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}

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

@@ -109,7 +109,7 @@ describe(TAG, () => {
                 isSelected: true
             });
             const tileAnchor: HTMLElement = component.shadowRoot.querySelector(
-                "a.tile.tile-selected"
+                "a.tile.sidebar-item-selected"
             );
             expect(tileAnchor).not.toBeNull();
             expect(tileAnchor.classList).toHaveLength(2);

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

@@ -1,3 +1,6 @@
+@import "helpers/reset";
+@import "helpers/sidebar";
+
 :host {
     display: block;
 
@@ -22,11 +25,6 @@
     font-family: var(--dx-g-font-sans);
     font-size: 13px;
     line-height: var(--tile-height);
-    padding: 6px var(--dx-g-spacing-md);
-}
-
-.tile:not(.tile-selected):hover {
-    background-color: var(--dx-g-gray-90);
 }
 
 .tile-root {
@@ -37,20 +35,6 @@
     display: block;
 }
 
-.tile-selected {
-    background: var(--dx-g-cloud-blue-vibrant-95);
-    box-shadow: inset var(--dx-g-spacing-xs) 0 0 0 var(--dx-g-blue-vibrant-60);
-    border-radius: 0;
-}
-
-.truncate {
-    display: -webkit-box;
-    overflow: hidden;
-    word-break: break-word;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-}
-
 .tile-icon {
     align-items: center;
     height: var(--tile-height);

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

@@ -1,7 +1,10 @@
 <template>
     <a href={href} class={tileClass}>
         <div class="flex indentation" aria-level={tileAriaLevel}>
-            <span class="tile-label truncate" title={treeNode.label}>
+            <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}>

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

@@ -44,10 +44,10 @@ export default class TreeTile extends LightningElement {
     }
 
     private get tileClass() {
-        return cx("tile", {
+        return cx("tile", "sidebar-item", {
             "tile-root": this.isRoot,
             "tile-with-children": !this.isRoot && this.hasChildren,
-            "tile-selected": this.isSelected
+            "sidebar-item-selected": this.isSelected
         });
     }
 

package/src/modules/helpers/sidebar/sidebar.css

@@ -0,0 +1,21 @@
+.sidebar-item-truncate-text {
+    display: -webkit-box;
+    overflow: hidden;
+    word-break: break-word;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+}
+
+.sidebar-item-selected {
+    background: var(--dx-g-cloud-blue-vibrant-95);
+    box-shadow: inset var(--dx-g-spacing-xs) 0 0 0 var(--dx-g-blue-vibrant-60);
+    border-radius: 0;
+}
+
+.sidebar-item {
+    padding: 6px var(--dx-g-spacing-md);
+}
+
+.sidebar-item:not(.sidebar-item-selected):hover {
+    background-color: var(--dx-g-gray-90);
+}