@salesforcedevs/dx-components 1.3.53-alpha → 1.3.53

package/src/modules/dx/formattedDateTime/formattedDateTime.ts

@@ -1,4 +1,5 @@
 import { LightningElement, api } from "lwc";
+import { convertForDaylightSavings } from "dxUtils/dates";
 import {
     formattedDateDay,
     formattedDateHour,
@@ -27,7 +28,7 @@ export default class FormattedDateTime extends LightningElement {
             return;
         }
 
-        this._unformattedDate = new Date(value);
+        this._unformattedDate = convertForDaylightSavings(value).toJSDate();
 
         if (this._unformattedDate.toString() === "Invalid Date") {
             // this is a fix for Safari since it doesn't support date strings with 'yyyy/mm/dd' patterns
@@ -62,7 +63,7 @@ export default class FormattedDateTime extends LightningElement {
     }
 
     getOptions() {
-        const options = {
+        return {
             weekday: this.weekday || undefined,
             year: this.year || undefined,
             month: this.month || undefined,
@@ -72,6 +73,5 @@ export default class FormattedDateTime extends LightningElement {
             second: this.second,
             timeZoneName: this.timeZoneName || undefined
         };
-        return options;
     }
 }

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

@@ -3,7 +3,7 @@
         <header class={className}>
             <dx-skip-nav-link></dx-skip-nav-link>
             <dx-banner
-                if:true={bannerMarkup}
+                if:true={showBanner}
                 banner-markup={bannerMarkup}
             ></dx-banner>
             <div class="header_l1">
@@ -39,7 +39,7 @@
             </div>
             <div class="header_l2">
                 <div class="header_l2_group header_l2_group-title">
-                    <a href="/" class="home-link">
+                    <a href="/" class="home-link" if:true={isValidSubtitle}>
                         <dx-icon
                             class="brand-icon"
                             if:true={isValidBrand}

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

@@ -14,4 +14,8 @@ export default class Header extends HeaderBase {
     protected mobileBreakpoint(): string {
         return "768px";
     }
+
+    get isValidSubtitle() {
+        return this.isValidBrand || this.subtitle;
+    }
 }

package/src/modules/dx/headerSearch/headerSearch.html

@@ -20,7 +20,6 @@
                     onclear={onInputEscape}
                     onsubmit={onInputSubmit}
                     onfocus={openDropdown}
-                    onblur={onDropdownRequestClose}
                     placeholder="Search"
                     size="override"
                     type="search"
@@ -52,7 +51,6 @@
                     onclear={onInputEscape}
                     onsubmit={onInputSubmit}
                     onfocus={openDropdown}
-                    onblur={onDropdownRequestClose}
                     placeholder="Search"
                     shortcut-key="k"
                     size="small"

package/src/modules/dx/headerSearch/headerSearch.ts

@@ -69,7 +69,6 @@ export default class HeaderSearch extends LightningElement {
         switch (e.detail as PopoverRequestCloseType) {
             case "interact-outside":
             case "keypress-escape":
-            case "input-blur":
                 this.closeDropdown();
                 break;
             default:

package/src/modules/dx/hr/hr.css

@@ -9,7 +9,6 @@ p,
 h2 {
     display: flex;
     flex-direction: row;
-    padding: 0 var(--dx-c-hr-padding-horizontal);
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-sm);
     color: var(--dx-g-blue-vibrant-20);
@@ -42,14 +41,12 @@ dx-button {
     display: flex;
     width: 100%;
     text-transform: capitalize;
-    padding: 0 var(--dx-c-hr-padding-horizontal);
 }
 
 dx-button::before {
     content: "";
     border-bottom: 2px solid var(--dx-g-gray-95);
     flex: 1 1;
-    transform: translateY(-2px); /* offset for display font ghost padding */
     margin: auto;
     margin-right: var(--dx-g-spacing-md);
 }

package/src/modules/dx/hr/hr.ts

@@ -7,6 +7,7 @@ export default class Hr extends LightningElement {
     @api href?: string | null;
     @api target: string | null = "_top";
     @api spacing: string | null = "2xl";
+    @api noPadding: boolean = false;
     @api variant: HrVariant | null = null;
 
     private get ariaRole() {
@@ -14,9 +15,14 @@ export default class Hr extends LightningElement {
     }
 
     private get style() {
-        return this.spacing
+        const spacing = this.spacing
             ? `margin: var(--dx-g-spacing-${this.spacing}) 0;`
             : "";
+        const padding = this.noPadding
+            ? ""
+            : "padding: 0 var(--dx-c-hr-padding-horizontal);";
+
+        return `${spacing}${padding}`;
     }
 
     private get isButtonVariant() {

package/src/modules/dx/input/input.ts

@@ -186,8 +186,6 @@ export default class Input extends LightningElement {
         if (this.validityOnBlur) {
             this.reportValidity();
         }
-
-        this.dispatchEvent(new CustomEvent("blur", { detail: "input-blur" }));
     }
 
     onInputChange(e: InputEvent) {

package/src/modules/dx/mainContentHeader/mainContentHeader.css

@@ -0,0 +1,102 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+.container {
+    display: flex;
+    flex-direction: row;
+    padding: 0 var(--dx-g-page-padding-horizontal);
+    overflow: hidden;
+}
+
+.container > * {
+    width: 50%;
+}
+
+.text-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    padding: var(--dx-g-spacing-lg) 0;
+    min-height: 460px;
+    text-align: left;
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+
+.image-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    overflow: visible;
+}
+
+img {
+    width: 100%;
+}
+
+img.desktop {
+    min-width: 876px;
+    margin-left: var(--dx-g-spacing-lg);
+}
+
+img.mobile {
+    display: none;
+    min-width: 1024px;
+}
+
+.text-container > *:not(:last-child) {
+    margin-bottom: var(--dx-g-spacing-smd);
+}
+
+dx-button {
+    margin-top: var(--dx-g-spacing-smd);
+}
+
+@media screen and (max-width: 1024px) {
+    .container {
+        flex-direction: column;
+    }
+
+    .container > * {
+        width: 100%;
+    }
+
+    .text-container {
+        align-items: center;
+        text-align: center;
+        padding-top: var(--dx-g-spacing-4xl);
+        padding-bottom: 0;
+        min-height: unset;
+    }
+
+    .text-container > * {
+        max-width: 700px;
+    }
+
+    .image-container {
+        justify-content: center;
+    }
+
+    img.desktop {
+        display: none;
+    }
+
+    img.mobile {
+        display: block;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .body,
+    .subtitle {
+        font-size: var(--dx-g-text-base);
+        line-height: var(--dx-g-text-xl);
+    }
+
+    .heading {
+        font-size: var(--dx-g-text-3xl);
+        line-height: var(--dx-g-text-4xl);
+    }
+}

package/src/modules/dx/mainContentHeader/mainContentHeader.html

@@ -0,0 +1,23 @@
+<template>
+    <div class="container" style={style}>
+        <div class="text-container">
+            <h1 class="heading dx-text-heading-2">{title}</h1>
+            <span class="body dx-text-body-1">{body}</span>
+            <span if:true={subtitle} class="subtitle dx-text-heading-4b">
+                {subtitle}
+            </span>
+            <dx-button
+                onclick={onCtaClick}
+                href={ctaHref}
+                target={ctaTarget}
+                size="large"
+            >
+                {ctaLabel}
+            </dx-button>
+        </div>
+        <div class="image-container">
+            <img class="desktop" src={imgSrc} />
+            <img class="mobile" src={imgSrcMobile} />
+        </div>
+    </div>
+</template>

package/src/modules/dx/mainContentHeader/mainContentHeader.ts

@@ -0,0 +1,35 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { track } from "dxUtils/analytics";
+
+export default class MainContentHeader extends LightningElement {
+    @api title!: string;
+    @api subtitle?: string;
+    @api body!: string;
+    @api ctaLabel!: string;
+    @api ctaHref!: string;
+    @api imgSrc!: string;
+    @api imgSrcMobile!: string;
+    @api ctaTarget?: string | null = null;
+    @api backgroundGradientColor?: string;
+
+    private get style() {
+        return cx(
+            this.backgroundGradientColor &&
+                `background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffff 100%), var(--dx-g-${this.backgroundGradientColor});`
+        );
+    }
+
+    private onCtaClick(e: Event) {
+        if (e.currentTarget) {
+            track(e.currentTarget, "custEv_ctaButtonClick", {
+                clickText: this.ctaLabel,
+                itemTitle: this.title,
+                clickUrl: this.ctaHref,
+                elementType: "button",
+                destinationType: "internal",
+                ctaClick: true
+            });
+        }
+    }
+}

package/src/modules/dx/scrollManager/scrollManager.html

@@ -0,0 +1 @@
+<template></template>

package/src/modules/dx/scrollManager/scrollManager.ts

@@ -0,0 +1,110 @@
+import { LightningElement } from "lwc";
+import { throttle } from "throttle-debounce";
+
+const RESTORE_SCROLL_EVENT_NAME = "restore-scroll";
+const LOAD_TIME_SCROLL_RESTORE_DELAY = 750;
+
+declare module globalThis {
+    let singletonScrollManagerRendered: boolean;
+    let singletonScrollManagerConnected: boolean;
+}
+// mostly components shouldn't be using this, but there are a few exceptions such as amfReference
+
+let scrollUnlocked: boolean = false;
+
+export const restoreScroll = () => {
+    if (scrollUnlocked) {
+        return;
+    }
+    document.body.scrollTop = document.documentElement.scrollTop =
+        window.history.state?.scroll.value;
+};
+
+export default class ScrollManager extends LightningElement {
+    /*
+        WARNING: Dark Magic(TM) follows. This code is likely to be unreliable if:
+            - Our load times significantly change (in this case, LOAD_TIME_SCROLL_RESTORE_DELAY may need to be adjusted)
+            - Any other components attempt to manipulate the body scroll (including #a links) before LOAD_TIME_SCROLL_RESTORE_DELAY has expired
+
+        This Dark Magic(TM) was required because of the following super annoying race condition occuring while trying to restore scroll position:
+            1. Load a page on our site (reproducible consistently at time of writing at https://developer.salesforce.com)
+            2. Scroll down somewhere (remember where)
+            3. Navigate to another page
+            4. Navigate back/forward/back, using the browser forward/back buttons (sometimes it takes a few tries to reproduce the race condition)
+            5. If the page you're on takes long enough for its components to finish rendering asynchronously, sometimes your scroll position will be incorrect 
+                (until the second scroll restore is called. To see the really bad behavior, simply remove the window.setTimeout bit)
+        This is because basically it scrolls you down a bit, then a component gets bigger above you as it finishes rendering
+        This pushes your whole view down, so unless we do this Dark Magic(TM) where we attempt to restore scroll _again_
+        after some reasonable interval, your window will be in the wrong spot when everything finishes rendering
+    */
+
+    protected scrollCount = 0; // this is for dark magic, basically we lock the user out of scrolling in the first quarter second, unless they really mean it. We do this because load timings mean that the scroll can get messed up in that period
+
+    renderedCallback() {
+        scrollUnlocked = window.location.hash !== ""; // if we have anchor links, skip the entire scroll restore
+        if (!globalThis.singletonScrollManagerRendered && !scrollUnlocked) {
+            globalThis.singletonScrollManagerRendered = true;
+            if (
+                window.history.state?.scroll?.docSize ===
+                document.body.scrollHeight
+            ) {
+                // only do this if loading is complete and the scrollHeight matches expectations
+                // otherwise, we're likely still loading, so just chill to avoid jumping around so much
+                restoreScroll();
+            } else {
+                window.setTimeout(() => {
+                    // sometimes loading is slow, so we may want to reset the scroll to
+                    // the correct position after loading is complete, to avoid weird behavior
+                    // but only if the user hasn't scrolled around in the meantime
+                    restoreScroll();
+                    scrollUnlocked = true;
+                }, LOAD_TIME_SCROLL_RESTORE_DELAY);
+            }
+        } else {
+            console.error(
+                "Multiple <dx-scroll-manager>s detected, this should never be the case."
+            );
+        }
+    }
+
+    connectedCallback(): void {
+        if (!globalThis.singletonScrollManagerConnected) {
+            globalThis.singletonScrollManagerConnected = true;
+            window.addEventListener(RESTORE_SCROLL_EVENT_NAME, restoreScroll);
+
+            document.body.addEventListener("scroll", this.manualScrollListener);
+        } else {
+            console.error(
+                "Multiple <dx-scroll-manager>s detected, this should never be the case."
+            );
+        }
+    }
+
+    saveScroll = throttle(100, () => {
+        window.history.replaceState(
+            {
+                scroll: {
+                    value: document.body.scrollTop,
+                    docSize: document.body.scrollHeight
+                }
+            },
+            "",
+            window.location.href
+        );
+    });
+
+    manualScrollListener = () => {
+        if (this.scrollCount < 5) {
+            this.scrollCount++;
+        } else {
+            this.scrollUnlocked = true;
+        }
+        if (this.scrollUnlocked) {
+            this.saveScroll();
+        }
+    };
+
+    disconnectedCallback(): void {
+        window.removeEventListener(RESTORE_SCROLL_EVENT_NAME, restoreScroll);
+    }
+}

package/src/modules/dx/searchResults/searchResults.css

@@ -197,8 +197,8 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
 
 .CoveoSort.coveo-selected,
 .CoveoSort.coveo-selected:hover {
-    color: var(--dx-g-blue-vibrant-50);
-    border-bottom-color: var(--dx-g-blue-vibrant-50);
+    color: var(--dx-g-blue-vibrant-40);
+    border-bottom-color: var(--dx-g-blue-vibrant-40);
 }
 
 .CoveoBreadcrumb {

package/src/modules/dx/section/section.css

@@ -9,6 +9,8 @@
     --dx-c-section-padding-top: var(--dx-c-section-padding-vertical);
     --dx-c-section-padding-bottom: var(--dx-c-section-padding-vertical);
     --dx-c-section-heading-margin-bottom: var(--dx-g-spacing-2xl);
+    --dx-c-section-cta-color: var(--dx-g-blue-vibrant-50);
+    --dx-c-section-cta-inline-hover-color: var(--dx-g-blue-vibrant-30);
 }
 
 .section {
@@ -86,6 +88,13 @@
     z-index: 50;
 }
 
+.cta {
+    --dx-c-button-primary-color: var(--dx-c-section-cta-color);
+    --dx-c-button-inline-color-hover: var(
+        --dx-c-section-cta-inline-hover-color
+    );
+}
+
 /* sections with a swoop and center alignment should not left align as it encroaches on the graphic */
 .section.align-center.graphic-top .text {
     text-align: center;

package/src/modules/dx/section/section.html

@@ -32,6 +32,16 @@
             <span class="subtitle dx-text-body-1" if:true={subtitle}>
                 {subtitle}
             </span>
+            <dx-button
+                class="cta"
+                if:true={ctaLabel}
+                href={ctaHref}
+                variant={ctaBtnVariant}
+                icon-symbol={ctaBtnSymbol}
+                target={ctaBtnTarget}
+            >
+                {ctaLabel}
+            </dx-button>
         </div>
         <div part="content" class="content">
             <slot></slot>

package/src/modules/dx/section/section.ts

@@ -10,6 +10,11 @@ export default class Section extends LightningElement {
     @api subtitle?: string;
     @api textAlign: "center" | "left" = "left";
     @api title?: string;
+    @api ctaLabel?: string;
+    @api ctaHref?: string;
+    @api ctaBtnVariant?: string;
+    @api ctaBtnSymbol?: string;
+    @api ctaBtnTarget?: string = "_self";
     @api topGraphic: boolean = false;
     @api graphicOverlap: boolean = false;
     @api bottomGraphic: boolean = false;

package/src/modules/dx/sidebar/sidebar.css

@@ -12,6 +12,10 @@ dx-empty-state {
     padding-bottom: var(--dx-g-spacing-md);
 }
 
+.sidebar-content-tree {
+    padding: var(--dx-g-spacing-xs);
+}
+
 .loading-skeleton {
     margin-top: var(--dx-g-spacing-md);
 }

package/src/modules/dx/sidebar/sidebar.html

@@ -88,6 +88,7 @@
                 tree-root={tree.tree}
                 onselect={onSelect}
                 value={value}
+                onfocus={onItemsFocused}
                 onselecteditemrendered={onSelectedItemRendered}
             ></dx-tree>
         </div>

package/src/modules/dx/sidebar/sidebar.ts

@@ -169,6 +169,8 @@ export default class Sidebar extends SidebarBase {
 
     private onSelect(event: CustomEvent) {
         this._value = event.detail.name;
+
+        this.dispatchEvent(new CustomEvent("sidebarclick"));
     }
 
     private onToggleClick(event: Event) {
@@ -255,4 +257,10 @@ export default class Sidebar extends SidebarBase {
             node.children.forEach((child) => this.assignValueToLabel(child));
         }
     }
+
+    private onItemsFocused(): void {
+        this.template
+            .querySelector("dx-sidebar-search")
+            ?.requestOpenDropdown(false);
+    }
 }

package/src/modules/dx/sidebarOld/sidebarOld.ts

@@ -95,6 +95,8 @@ export default class Sidebar extends SidebarBase {
 
     private onSelect(event: CustomEvent) {
         this._value = event.detail.name;
+
+        this.dispatchEvent(new CustomEvent("sidebarclick"));
     }
 
     private onToggleClick(event: Event) {

package/src/modules/dx/sidebarSearch/sidebarSearch.html

@@ -18,7 +18,6 @@
             value={value}
             onchange={onInputChange}
             onfocus={onInputFocus}
-            onblur={onDropdownRequestClose}
             onclear={onInputClear}
             shortcut-key="j"
             clearable

package/src/modules/dx/sidebarSearch/sidebarSearch.ts

@@ -78,6 +78,11 @@ export default class SidebarSearch extends LightningElement {
         }
     }
 
+    @api
+    requestOpenDropdown(value: boolean) {
+        this.dropdownRequestedOpen = value;
+    }
+
     private _coveoAdvancedQueryConfig!: { [key: string]: any };
     private dropdownRequestedOpen: boolean = false;
     private recentSearches: Option[] = [];
@@ -422,7 +427,6 @@ export default class SidebarSearch extends LightningElement {
         switch (e.detail as PopoverRequestCloseType) {
             case "interact-outside":
             case "keypress-escape":
-            case "input-blur":
                 this.dropdownRequestedOpen = false;
                 break;
             default:

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

@@ -1,10 +1,10 @@
 @import "dxHelpers/reset";
 
 :host {
-    --dx-c-button-custom-color: var(--dx-g-blue-vibrant-50);
+    --dx-c-button-custom-color: var(--dx-g-blue-vibrant-40);
     --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-color-hover: var(--dx-g-blue-vibrant-40);
     --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;

package/src/modules/dx/tbidAvatarButton/tbidAvatarButton.ts

@@ -49,7 +49,7 @@ export default class TbidAvatarButton extends LightningElement {
     @api tbidApiBaseUrl = "";
 
     @api login = (event: Event) => this.handleComponentLogin(event);
-    @api logout = () => this.handleComponentLogout();
+    @api logout = (event: Event) => this.handleComponentLogout(event);
 
     private userInfo: UserInfo = {};
     private isLoading = false;
@@ -242,7 +242,8 @@ export default class TbidAvatarButton extends LightningElement {
     private handleSsoLogout = this.handleLogout.bind(this, true);
 
     // This handles logout from _within_ this component ("Logout" click), rather than from SSO via the SFIDWidget.
-    private handleComponentLogout = () => {
+    private handleComponentLogout = (event: Event) => {
+        event?.preventDefault();
         this.handleLogout(false);
     };
 

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

@@ -2,6 +2,7 @@ import { LightningElement, api, track } from "lwc";
 import cx from "classnames";
 import { ContentElement } from "typings/custom";
 import { toJson } from "dxUtils/normalizers";
+import { track as sendGtm } from "dxUtils/analytics";
 
 export default class Toc extends LightningElement {
     @api title!: string;
@@ -65,10 +66,22 @@ export default class Toc extends LightningElement {
     private onClick(e: Event) {
         const target = e.currentTarget as HTMLElement;
         const id = target.getAttribute("contentid");
+        const text = target.getAttribute("data-text");
+        const href = target.getAttribute("href");
+
         this.dispatchEvent(
             new CustomEvent("selectedcontent", { detail: { name: id } })
         );
+
         this._value = id!;
+
+        sendGtm(e.currentTarget!, "custEv_tableOfContentsClick", {
+            clickText: text,
+            clickUrl: href,
+            elementType: "link",
+            locationOnPage: "table of contents",
+            itemTitle: this.title
+        });
     }
 
     private toggleShowContent() {

package/src/modules/dx/treeItem/treeItem.html

@@ -1,5 +1,5 @@
 <template>
-    <a href={href} target={target} onclick={onLinkClick}>
+    <a href={href} target={target} onclick={onLinkClick} tabindex="-1">
         <dx-tree-tile
             href={href}
             is-root={isRoot}
@@ -18,12 +18,13 @@
         src="/assets/svg/sidebar-item-loading.svg"
         alt="childrenLoading"
     />
-    <template if:true={showChildren}>
+    <template if:true={showChildren} tabindex="0">
         <template for:each={treeNode.children} for:item="child">
             <dx-tree-item
                 key={child.key}
                 tree-node={child}
                 selected-key={selectedKey}
+                parent-name={treeNode.label}
             ></dx-tree-item>
         </template>
     </template>