@salesforcedevs/dx-components 1.2.16 → 1.2.18-canary.0

package/lwc.config.json

@@ -69,6 +69,7 @@
         "dx/spinner",
         "dx/tabPanel",
         "dx/tabPanelList",
+        "dx/tbidAvatarButton",
         "dx/toc",
         "dx/tooltip",
         "dx/tree",
@@ -89,6 +90,7 @@
         "dxHelpers/table",
         "dxHelpers/text",
         "dxUtils/analytics",
+        "dxUtils/async",
         "dxUtils/constants",
         "dxUtils/coveo",
         "dxUtils/dates",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.2.16",
+    "version": "1.2.18-canary.0",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -17,16 +17,23 @@
         "classnames": "^2.2.6",
         "coveo-search-ui": "^2.10082.5",
         "debounce": "^1.2.0",
+        "js-cookie": "^3.0.1",
+        "lodash.defaults": "^4.2.0",
         "lodash.get": "^4.4.2",
         "lodash.kebabcase": "^4.1.1",
-        "microtip": "0.2.2"
+        "microtip": "0.2.2",
+        "salesforce-oauth2": "^0.2.0",
+        "uuid": "^9.0.0"
     },
     "devDependencies": {
         "@types/classnames": "^2.2.10",
         "@types/debounce": "^1.2.0",
+        "@types/js-cookie": "^3.0.2",
+        "@types/lodash.defaults": "^4.2.7",
         "@types/lodash.get": "^4.4.6",
         "@types/lodash.kebabcase": "^4.1.7",
-        "@types/vimeo__player": "^2.16.2"
-    },
-    "gitHead": "bd151c2d46039c53ca0d9dd818e7f8dbab65e08c"
+        "@types/uuid": "^8.3.4",
+        "@types/vimeo__player": "^2.16.2",
+        "eventsourcemock": "^2.0.0"
+    }
 }

package/src/modules/dx/header/header.html

@@ -19,14 +19,17 @@
                         onstatechange={handleStateChange}
                     ></dx-header-search>
                 </div>
+                <div if:true={showTbidLogin} class="header-tbid-login">
+                    <dw-tbid-login-menu></dw-tbid-login-menu>
+                </div>
                 <div if:true={showSignup} class="header-login-signup">
                     <dx-button
-                        aria-label="Sign Up For Salesforce Developer Edition"
+                        aria-label="Browse Trials"
                         size="small"
                         href={signupLink}
                         onclick={handleSignUpClick}
                     >
-                        Sign Up
+                        Browse Trials
                     </dx-button>
                 </div>
             </div>

package/src/modules/dx/header/header.ts

@@ -1,6 +1,10 @@
 import { HeaderBase } from "dxBaseElements/headerBase";
 
 export default class Header extends HeaderBase {
+    private get showTbidLogin(): boolean {
+        return this.showSignup;
+    }
+
     private get showSignup(): boolean {
         return this.signupLink
             ? (this.mobile && !this.isSearchOpen) || !this.mobile

package/src/modules/dx/logo/logo.ts

@@ -3,6 +3,6 @@ import { LightningElement, api } from "lwc";
 export default class Logo extends LightningElement {
     @api href: string = "/";
     @api imgSrc: string = "/assets/svg/salesforce-cloud.svg";
-    @api imgAlt: string = "Salesforce log";
+    @api imgAlt: string = "Salesforce logo";
     @api label!: string;
 }

package/src/modules/dx/popover/popover.css

@@ -64,3 +64,22 @@
 .popover-small {
     width: 136px;
 }
+
+.popover-arrow {
+    position: absolute;
+    background: linear-gradient(
+        315deg,
+        transparent 4px,
+        white 4px
+    ); /* make only top half of rotated square visible */
+    width: 8px;
+    height: 8px;
+    transform: rotate(45deg);
+    border: var(--popover-border);
+    border-bottom: transparent;
+    border-right: transparent;
+    box-shadow: var(--dx-g-box-shadow-lg);
+    transition: opacity 0.2s linear, transform 0.2s linear;
+    transition-delay: 0.02s;
+    z-index: var(--dx-c-popover-z-index, var(--dx-g-z-index-max));
+}

package/src/modules/dx/popover/popover.html

@@ -1,6 +1,7 @@
 <template>
     <slot name="control" onslotchange={onSlotChange}></slot>
     <div class={containerClassName}>
+        <div class="popover-arrow" if:true={showArrow}></div>
         <div
             class={className}
             style={style}

package/src/modules/dx/popover/popover.ts

@@ -5,7 +5,7 @@ import {
     PopperPlacement
 } from "typings/custom";
 
-import { computePosition, flip, size, shift } from "@floating-ui/dom";
+import { computePosition, flip, size, shift, arrow } from "@floating-ui/dom";
 import cx from "classnames";
 import debounce from "debounce";
 import { isPrerender } from "dxUtils/seo";
@@ -31,6 +31,7 @@ export default class Popover extends LightningElement {
     @api openOnHover?: boolean = false; // dropdown opens/closes with hover
     @api width?: string | null = null;
     @api fullWidth?: boolean | null;
+    @api showArrow?: boolean | null;
 
     @api
     get open() {
@@ -103,9 +104,11 @@ export default class Popover extends LightningElement {
     private _open: boolean = false;
     private _rendered: boolean = isPrerender();
     private _role: string | null = null;
+    private arrow: HTMLElement | null = null;
     private control: (HTMLElement & { disabled?: boolean }) | null = null;
     private focusedValue: string | null = null;
     private popover: HTMLElement | null = null;
+    private popoverContent: HTMLElement | null = null;
 
     // LIFECYCLE METHODS
 
@@ -120,6 +123,12 @@ export default class Popover extends LightningElement {
         if (!this.popover) {
             this.popover = this.template.querySelector(".popover-container");
         }
+        if (!this.popoverContent) {
+            this.popoverContent = this.template.querySelector(".popover");
+        }
+        if (!this.arrow && this.showArrow) {
+            this.arrow = this.template.querySelector(".popover-arrow");
+        }
     }
 
     // GETTERS
@@ -232,23 +241,27 @@ export default class Popover extends LightningElement {
         this.openPopover();
     };
 
-    private onSlotChange(e: LightningSlotElement) {
-        const slot = e.target;
+    private onSlotChange(e: Event) {
+        const slot = e.target as LightningSlotElement;
         const elements = slot.assignedElements();
         const slotted = elements.length === 0 ? null : elements[0];
         // allows dropdown/select to compose popover
-        const control =
-            slotted.tagName === "SLOT" ? slotted.firstChild : slotted;
-        const onboardControl =
-            (!this.control || (control && !control.isSameNode(this.control))) &&
-            control;
-        if (onboardControl) {
-            control.setAttribute("aria-haspopup", "true");
-            control.style.cursor = this.openOnHover ? "default" : "cursor";
-            this.control = control;
-            this.addControlListeners();
-            this.setPosition();
+        const slotElement = (slotted?.tagName === "SLOT"
+            ? slotted.firstChild
+            : slotted) as HTMLElement | null;
+        const isWorkToDo =
+            slotElement &&
+            (!this.control || !slotElement.isSameNode(this.control));
+
+        if (!isWorkToDo) {
+            return;
         }
+
+        slotElement.setAttribute("aria-haspopup", "true");
+        slotElement.style.cursor = this.openOnHover ? "default" : "cursor";
+        this.control = slotElement;
+        this.addControlListeners();
+        this.setPosition();
     }
 
     private onKeyDown(e: KeyboardEvent): void {
@@ -277,29 +290,62 @@ export default class Popover extends LightningElement {
         if (this.popover && this.control) {
             await Promise.resolve();
             const popoverEl = this.popover;
+            const middleware = [flip(), shift({ padding: this.pagePadding })];
+
+            if (this.fullWidth) {
+                middleware.unshift(
+                    size({
+                        apply({ rects }) {
+                            Object.assign(popoverEl.style, {
+                                width: `${rects.reference.width}px`
+                            });
+                        }
+                    })
+                );
+            }
+
+            if (this.arrow) {
+                middleware.push(arrow({ element: this.arrow, padding: 24 }));
+            }
 
             computePosition(this.control, popoverEl, {
                 placement: this.placement,
-                middleware: [
-                    ...(this.fullWidth
-                        ? [
-                              size({
-                                  apply({ rects }) {
-                                      Object.assign(popoverEl.style, {
-                                          width: `${rects.reference.width}px`
-                                      });
-                                  }
-                              })
-                          ]
-                        : []),
-                    flip(),
-                    shift({ padding: this.pagePadding })
-                ]
-            }).then(({ x, y }) => {
+                middleware
+            }).then(({ x, y, placement, middlewareData }) => {
                 Object.assign(popoverEl.style, {
                     left: `${x}px`,
                     top: `${y}px`
                 });
+
+                if (this.arrow && middlewareData.arrow) {
+                    const { x: arrowX, y: arrowY } = middlewareData.arrow;
+                    const popoverPlacementSide = placement.split("-")[0] as
+                        | "top"
+                        | "bottom"
+                        | "left"
+                        | "right";
+                    const staticSide = {
+                        top: "bottom",
+                        right: "left",
+                        bottom: "top",
+                        left: "right"
+                    }[popoverPlacementSide];
+                    const arrowStyles = {
+                        left: arrowX != null ? `${arrowX}px` : "",
+                        top: arrowY != null ? `${arrowY}px` : "",
+                        right: "",
+                        bottom: "",
+                        [staticSide]: "-4px"
+                    };
+
+                    if (this.offset && this.popoverContent) {
+                        arrowStyles.marginTop = getComputedStyle(
+                            this.popoverContent
+                        ).marginTop;
+                    }
+
+                    Object.assign(this.arrow.style, arrowStyles);
+                }
             });
         }
     };

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,31 @@
+<template>
+    <div if:true={isLoggedIn}>
+        <dx-popover offset="small" width="320px" open-on-hover show-arrow>
+            <div slot="control" class="avatar-small-container login-control">
+                <button class="avatar-control">
+                    <img src={userInfo.avatarImgSrc} class="avatar avatar-small" />
+                </button>
+            </div>
+            <div slot="content">
+                <slot name="popover-content"></slot>
+            </div>
+        </dx-popover>
+    </div>
+    <div if:false={isLoggedIn}>
+        <dx-popover offset="small" width="320px" 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>