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

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.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/tab.css

@@ -1,31 +1,102 @@
-@import "helpers/reset";
+@import "dxHelpers/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);
+}
+
+button.nav-list-item_default > dx-icon {
+    margin-left: var(--dx-g-spacing-sm);
 }
 
-.tab-primary {
-    border-color: var(--dx-g-blue-vibrant-20);
-    padding-bottom: calc(var(--dx-g-spacing-xs) + var(--dx-g-spacing-2xs));
+button.nav-list-item_small > dx-icon {
+    margin-left: var(--dx-g-spacing-xs);
 }
 
-.tab-primary:hover {
-    padding-bottom: var(--dx-g-spacing-xs);
-    border-bottom-width: 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.tab-active {
+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);
-    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.ts

@@ -1,45 +1,52 @@
 import { LightningElement, api } from "lwc";
+import { track } from "dxUtils/analytics";
 import cx from "classnames";
+import { TabVariant } from "typings/custom";
+import { normalizeBoolean } from "dxUtils/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/tabPanel/tabPanel.css

@@ -1,4 +1,9 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
+
+:host {
+    --dx-c-tab-panel-margin-top: var(--dx-g-spacing-3xl);
+    --dx-c-tab-panel-gap: var(--dx-g-spacing-md);
+}
 
 .tabpanel {
     display: none;
@@ -7,3 +12,9 @@
 .tabpanel-active {
     display: block;
 }
+
+@media screen and (max-width: 640px) {
+    .tabpanel-active {
+        --dx-c-tab-panel-margin-top: 36px;
+    }
+}

package/src/modules/dx/tabPanelItem/tabPanelItem.css

@@ -0,0 +1,39 @@
+@import "dxHelpers/reset";
+
+.tab {
+    color: var(--dx-g-blue-vibrant-20);
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-lg);
+    font-weight: var(--dx-g-font-bold);
+    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-xl)
+        var(--dx-g-spacing-sm);
+    border-top-left-radius: var(--dx-g-spacing-sm);
+    border-top-right-radius: var(--dx-g-spacing-sm);
+    border-bottom: var(--dx-g-spacing-xs) solid transparent;
+}
+
+.tab:hover {
+    background-color: var(--dx-g-blue-vibrant-95);
+}
+
+.tab-active {
+    color: var(--dx-g-blue-vibrant-50);
+    border-bottom: var(--dx-g-spacing-xs) solid var(--dx-g-blue-vibrant-50);
+}
+
+.tab:hover,
+.tab-active {
+    font-weight: var(--dx-g-font-bold);
+}
+
+@media screen and (max-width: 640px) {
+    .tab {
+        font-size: var(--dx-g-text-base);
+        font-family: var(--dx-g-font-sans);
+        font-weight: var(--dx-g-font-normal);
+    }
+
+    .tab-active {
+        font-weight: var(--dx-g-font-bold);
+    }
+}

package/src/modules/dx/tabPanelItem/tabPanelItem.html

@@ -0,0 +1,15 @@
+<template>
+    <button
+        role="tab"
+        part="tab"
+        id={tabId}
+        onclick={onClick}
+        class={className}
+        aria-controls={panelId}
+        aria-label="Tab button"
+        aria-selected={active}
+        tabindex={index}
+    >
+        <slot></slot>
+    </button>
+</template>

package/src/modules/dx/tabPanelItem/tabPanelItem.ts

@@ -0,0 +1,39 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+export default class TabPanelItem extends LightningElement {
+    @api groupId!: string;
+    @api index!: number;
+    @api active: boolean = false;
+
+    @api focus() {
+        const button = this.template.querySelector("button");
+        if (!button) {
+            return;
+        }
+        button.focus();
+    }
+
+    private get activeTabIndex() {
+        return this.active ? 0 : -1;
+    }
+
+    private get panelId() {
+        return `tabs--${this.groupId}--panel--${this.index}`;
+    }
+
+    private get tabId() {
+        return `tabs--${this.groupId}--tab--${this.index}`;
+    }
+
+    private get className() {
+        return cx("tab", this.active && "tab-active");
+    }
+
+    private onClick() {
+        this.dispatchEvent(
+            new CustomEvent("select", {
+                detail: this.index
+            })
+        );
+    }
+}

package/src/modules/dx/tabPanelList/tabPanelList.css

@@ -0,0 +1,35 @@
+:host {
+    --dx-c-tab-panel-list-horizontal-padding: var(--dx-g-spacing-3xl);
+}
+
+.tablist-container {
+    padding: 0 var(--dx-c-tab-panel-list-horizontal-padding);
+}
+
+.tablist {
+    border-bottom: 1px solid var(--dx-g-gray-80);
+}
+
+dx-popover {
+    --popover-padding: none;
+}
+
+.dropdown-item {
+    padding: var(--dx-g-spacing-sm);
+}
+
+.dropdown-item:hover {
+    cursor: pointer;
+    font-weight: var(--dx-g-font-bold);
+    background-color: var(--dx-g-blue-vibrant-95);
+}
+
+.more-btn {
+    display: flex;
+    align-items: center;
+    gap: var(--dx-g-spacing-sm);
+}
+
+.hidden {
+    display: none;
+}

package/src/modules/dx/tabPanelList/tabPanelList.html

@@ -0,0 +1,47 @@
+<template>
+    <div class="tablist-container">
+        <div class="tablist" role="tablist" part="tablist">
+            <template for:each={tabs} for:item="tab">
+                <dx-tab-panel-item
+                    key={tab.index}
+                    onselect={onTabClick}
+                    group-id={groupId}
+                    index={tab.index}
+                    active={tab.active}
+                >
+                    {tab.label}
+                </dx-tab-panel-item>
+            </template>
+            <dx-popover offset="medium" placement="bottom-center">
+                <dx-tab-panel-item class="more-btn-container" slot="control">
+                    <div class="more-btn">
+                        More
+                        <dx-icon
+                            sprite="utility"
+                            symbol="threedots"
+                            size="large"
+                        ></dx-icon>
+                    </div>
+                </dx-tab-panel-item>
+                <div slot="content">
+                    <template for:each={dropdownItems} for:item="dropdownItem">
+                        <div
+                            role="button"
+                            onclick={onDropdownItemClick}
+                            onkeydown={onDropdownItemClick}
+                            data-value={dropdownItem.index}
+                            key={dropdownItem.label}
+                            class="dropdown-item"
+                            tabindex="0"
+                        >
+                            {dropdownItem.label}
+                        </div>
+                    </template>
+                </div>
+            </dx-popover>
+        </div>
+        <div part="tabpanels">
+            <slot onslotchange={onSlotChange}></slot>
+        </div>
+    </div>
+</template>

package/src/modules/dx/{tabs/tabs.ts → tabPanelList/tabPanelList.ts}

@@ -1,8 +1,8 @@
 import { LightningElement, api } from "lwc";
 import { LightningSlotElement, Tab } from "typings/custom";
-import { toJson } from "utils/normalizers";
+import { toJson } from "dxUtils/normalizers";
 import { uniqueId } from "./uniqueId";
-export default class Tabs extends LightningElement {
+export default class TabPanelList extends LightningElement {
     @api
     get initialIndex() {
         return +this._initialIndex;
@@ -29,9 +29,12 @@ export default class Tabs extends LightningElement {
     private _activeIndex?: number;
     private groupId: string = uniqueId();
     private tabSlotPanels?: LightningSlotElement;
+    private showPopover: boolean = true;
+    private dropdownItems: Tab[] = [];
+    private hasRendered: boolean = false;
 
     private get tabElements() {
-        return this.template.querySelectorAll("dx-tab");
+        return this.template.querySelectorAll("dx-tab-panel-item");
     }
 
     private get activeIndex() {
@@ -49,17 +52,28 @@ export default class Tabs extends LightningElement {
         this.addListeners();
     }
 
+    renderedCallback(): void {
+        if (!this.hasRendered) {
+            this.onResize();
+            this.hasRendered = true;
+        }
+    }
+
     disconnectedCallback() {
         this.removeListeners();
     }
 
-    private onTabClick(e: CustomEvent) {
+    private onTabClick(e: { detail: number }) {
         if (e.detail !== this.activeIndex) {
             this.dispatchEvent(new CustomEvent("change", { detail: e.detail }));
         }
         this.activeIndex = e.detail;
     }
 
+    private onDropdownItemClick(e: CustomEvent) {
+        this.onTabClick({ detail: +e.currentTarget!.dataset.value });
+    }
+
     private onSlotChange(e: Event) {
         this.tabSlotPanels = <LightningSlotElement>e.target;
         this.updateTabs();
@@ -102,11 +116,49 @@ export default class Tabs extends LightningElement {
         }
     };
 
+    private onResize = () => {
+        const allItems = this.template.querySelectorAll("dx-tab-panel-item");
+        const hiddenItems: number[] = [];
+        const primaryItems = this.template.querySelectorAll(
+            "dx-tab-panel-item:not(.more-btn-container)"
+        );
+        const moreBtn = this.template.querySelector(".more-btn-container")!;
+        const containerWidth =
+            this.template.querySelector(".tablist")!.offsetWidth;
+        let stopWidth = this.template.querySelector(
+            "dx-tab-panel-item.more-btn-container"
+        )!.offsetWidth;
+
+        this.dropdownItems = [];
+        allItems.forEach((item) => {
+            item.classList.remove("hidden");
+        });
+
+        primaryItems.forEach((item, i) => {
+            if (containerWidth >= stopWidth + item.offsetWidth) {
+                stopWidth += item.offsetWidth;
+            } else {
+                item.classList.add("hidden");
+                hiddenItems.push(i);
+            }
+        });
+
+        if (!hiddenItems.length) {
+            moreBtn.classList.add("hidden");
+        } else {
+            hiddenItems.forEach((i) => {
+                this.dropdownItems.push({ ...this._tabs[i], index: i });
+            });
+        }
+    };
+
     private addListeners() {
         this.template.addEventListener("keydown", this.onKeydown);
+        window.addEventListener("resize", this.onResize.bind(this));
     }
 
     private removeListeners() {
         this.template.removeEventListener("keydown", this.onKeydown);
+        window.removeEventListener("resize", this.onResize.bind(this));
     }
 }

package/src/modules/dx/tbidAvatarButton/tbidAvatarButton.css

@@ -0,0 +1,33 @@
+@import "dxHelpers/reset";
+
+:host {
+    --dx-c-button-custom-color: var(--dx-g-blue-vibrant-50);
+    --dx-c-button-custom-background: transparent;
+    --dx-c-button-custom-border: 1px solid transparent;
+    --dx-c-button-custom-color-hover: var(--dx-g-blue-vibrant-50);
+    --dx-c-button-custom-background-hover: var(--dx-g-cloud-blue-vibrant-90);
+    --dx-c-button-custom-border-hover: var(--dx-g-cloud-blue-vibrant-90);
+    --dx-c-slot-empty-width: max-content;
+}
+
+.avatar-control {
+    height: var(--dx-g-spacing-xl);
+    width: calc(var(--dx-g-spacing-lg) + 4px);
+}
+
+.avatar-small-container {
+    align-items: center;
+    display: flex;
+    padding: 2px 0;
+}
+
+.avatar {
+    border-radius: 100%;
+    border: 2px solid #0d9dda;
+}
+
+.avatar.avatar-small {
+    display: block;
+    height: calc(var(--dx-g-spacing-lg) + 4px);
+    width: calc(var(--dx-g-spacing-lg) + 4px);
+}

package/src/modules/dx/tbidAvatarButton/tbidAvatarButton.html

@@ -0,0 +1,53 @@
+<template>
+    <div if:true={isLoggedIn}>
+        <dx-popover
+            offset="small"
+            width="320px"
+            placement="bottom-end"
+            open-on-hover
+            show-arrow
+        >
+            <div slot="control" class="avatar-small-container login-control">
+                <button
+                    class="avatar-control"
+                    aria-labelledby="avatar-control-label"
+                >
+                    <img
+                        src={userInfo.avatarImgSrc}
+                        class="avatar avatar-small"
+                        alt="Small user avatar image"
+                    />
+                    <span id="avatar-control-label" hidden>
+                        {userInfo.fullName}
+                    </span>
+                </button>
+            </div>
+            <div slot="content">
+                <slot name="popover-content"></slot>
+            </div>
+        </dx-popover>
+    </div>
+    <div if:false={isLoggedIn}>
+        <dx-popover
+            offset="small"
+            width="320px"
+            placement="bottom-end"
+            open-on-hover
+            show-arrow
+        >
+            <dx-button
+                slot="control"
+                class="login-control"
+                icon-symbol="user"
+                icon-position="left"
+                loading={isLoading}
+                variant="custom"
+            >
+                Login
+            </dx-button>
+            <div slot="content">
+                <slot name="popover-content"></slot>
+            </div>
+        </dx-popover>
+    </div>
+</template>