@salesforcedevs/dx-components 1.3.57-alpha.9 → 1.3.62-alpha01

package/src/modules/dx/footer/footer.ts

@@ -14,19 +14,10 @@ import { track } from "dxUtils/analytics";
 const PATH = "/newsletter";
 const LOCAL_STORAGE_KEY = "subscriberEmail";
 const createNewsletterSignupHref = (email: string): string => {
-    window.localStorage.setItem(
-        LOCAL_STORAGE_KEY,
-        email
-    );
+    window.localStorage.setItem(LOCAL_STORAGE_KEY, email);
     return PATH;
-}
-
-const ANALYTICS_INFO = {
-    itemTitle: "Newsletter Sign Up Footer",
-    elementType: "button",
-    destinationType: "internal",
-    ctaClick: true
 };
+
 export default class Footer extends LightningElement {
     @api locale: string | null = null;
     @api
@@ -110,9 +101,11 @@ export default class Footer extends LightningElement {
         const href = createNewsletterSignupHref(e.detail);
 
         track(e.currentTarget, "custEv_ctaButtonClick", {
-            ...ANALYTICS_INFO,
-            clickText: this.inputSubmitLabel,
-            clickUrl: PATH
+            click_text: this.inputSubmitLabel,
+            click_url: PATH,
+            element_type: "button",
+            element_title: "dx-footer",
+            content_category: "cta"
         });
 
         window.location.assign(href);

package/src/modules/dx/footer/links.ts

@@ -167,6 +167,11 @@ export const termsLinks = [
         rel: "nofollow",
         label: "Cookie Preferences",
         onclick: openOneTrustInfoDisplay
+    },
+    {
+        href: "https://www.salesforce.com/form/other/privacy-request/",
+        label: "Your Privacy Choices",
+        img: "/assets/svg/privacyicon.png"
     }
 ];
 

package/src/modules/dx/footerOption/footerOption.ts

@@ -10,10 +10,18 @@ export default class FooterOption extends LightningElement {
 
     sendGtm(e: PointerEvent) {
         track(e.currentTarget, "custEv_bottomNavLinkClick", {
-            navHeading: this.generalLabel || undefined,
-            navSubHeading: this.label || undefined,
-            clickText: this.href || undefined,
-            pageLocation: window.location.pathname || undefined
+            click_text: this.label || undefined,
+            click_url: this.href || undefined,
+            nav_item: this.label || undefined,
+            element_type: "link",
+            nav_type: "footer"
+        });
+        track(e.currentTarget!, "custEv_linkClick", {
+            click_text: this.label,
+            element_title: "dx-button",
+            click_url: this.href,
+            element_type: "link",
+            content_category: "cta"
         });
     }
 }

package/src/modules/dx/groupText/groupText.ts

@@ -20,12 +20,6 @@ const subtitleClasses = {
     [MEDIUM]: "dx-text-heading-7"
 };
 
-const ANALYTICS_INFO = {
-    elementType: "button",
-    destinationType: "internal",
-    ctaClick: true
-};
-
 export default class GroupText extends LightningElement {
     @api title!: string;
     @api body?: string;
@@ -99,13 +93,13 @@ export default class GroupText extends LightningElement {
     }
 
     private trackClick(event: Event) {
-        const payload = {
-            ...ANALYTICS_INFO,
-            clickText: event.currentTarget.innerText,
-            itemTitle: event.currentTarget.innerText,
-            clickUrl: event.currentTarget.href
-        };
-
-        track(event.target!, "custEv_ctaButtonClick", payload);
+        track(event.target!, "custEv_ctaButtonClick", {
+            click_text: event.currentTarget.innerText,
+            item_title: event.currentTarget.innerText,
+            click_url: event.currentTarget.href,
+            element_type: "button",
+            element_title: "dx-group-text",
+            content_category: "cta"
+        });
     }
 }

package/src/modules/dx/headerMobileNavMenuOption/headerMobileNavMenuOption.ts

@@ -16,5 +16,13 @@ export default class HeaderMobileNavMenuOption extends LightningElement {
             clickText: this.href || undefined,
             pageLocation: window.location.pathname || undefined
         });
+
+        track(e.currentTarget!, "custEv_linkClick", {
+            click_text: this.itemLabel,
+            element_title: "dx-button",
+            click_url: this.href,
+            element_type: "link",
+            content_category: "cta"
+        });
     }
 }

package/src/modules/dx/headerNav/headerNav.html

@@ -14,6 +14,7 @@
                     <!-- DESKTOP "MORE CONTENT" NAV ITEM -->
                     <dx-dropdown
                         analytics-event="custEv_topNavLinkClick"
+                        analytics-payload={ANALYTICS_PAYLOAD}
                         if:true={navItem.options}
                         nav-item-label={navItem.label}
                         open-on-hover

package/src/modules/dx/headerNav/headerNav.ts

@@ -46,6 +46,10 @@ export default class HeaderNav extends LightningElement {
     }
 
     private _navItems: OptionWithNested[] = [];
+    private ANALYTICS_PAYLOAD = {
+        nav_level: "2",
+        nav_type: "global"
+    };
 
     private requestOpenNavMenu(e: PointerEvent) {
         const detail = (<HTMLButtonElement>e.currentTarget).getAttribute(

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

@@ -1,6 +1,6 @@
 <template>
-    <div class="container">
-        <div class="text-container" style={style}>
+    <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">

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

@@ -1,4 +1,5 @@
 import { LightningElement, api } from "lwc";
+import cx from "classnames";
 import { track } from "dxUtils/analytics";
 
 export default class MainContentHeader extends LightningElement {
@@ -10,16 +11,30 @@ export default class MainContentHeader extends LightningElement {
     @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
+                click_text: this.ctaLabel,
+                click_url: this.ctaHref,
+                element_type: "button",
+                element_title: "dx-button",
+                content_category: "cta"
+            });
+            track(e.currentTarget!, "custEv_linkClick", {
+                click_text: this.ctaLabel,
+                element_title: "dx-button",
+                click_url: this.ctaHref,
+                element_type: "link",
+                content_category: "cta"
             });
         }
     }

package/src/modules/dx/modal/modal.html

@@ -5,6 +5,6 @@
     <div
         if:true={open}
         class="modal-drawer_overlay"
-        onclick={handleToggleModal}
+        onclick={handleCloseModal}
     ></div>
 </template>

package/src/modules/dx/modal/modal.ts

@@ -39,7 +39,7 @@ export default class Modal extends LightningElement {
 
     handleKeyDown(event: KeyboardEvent): void {
         if (event.key === "Escape") {
-            this.handleToggleModal();
+            this.handleCloseModal();
         }
     }
 
@@ -47,4 +47,9 @@ export default class Modal extends LightningElement {
         this._open = !this._open;
         this.dispatchEvent(new CustomEvent("togglemodal"));
     }
+
+    handleCloseModal() {
+        this._open = false;
+        this.dispatchEvent(new CustomEvent("closemodal"));
+    }
 }

package/src/modules/dx/pagination/pagination.ts

@@ -2,13 +2,6 @@ import classNames from "classnames";
 import { LightningElement, api } from "lwc";
 import { track } from "dxUtils/analytics";
 
-const ANALYTICS_INFO = {
-    clickUrl: window.location.href,
-    ctaClick: false,
-    elementType: "button",
-    destinationType: "internal"
-};
-
 enum PaginationClickType {
     Number,
     Next,
@@ -99,9 +92,11 @@ export default class Pagination extends LightningElement {
                 : (e.target as HTMLElement).dataset.partId;
 
         track(e.currentTarget!, "custEv_pagination", {
-            ...ANALYTICS_INFO,
-            clickText,
-            itemTitle: clickText
+            click_text: clickText,
+            click_url: window.location.href,
+            element_type: "button",
+            nav_type: "pagination",
+            nav_item: clickText
         });
 
         this.dispatchEvent(new CustomEvent("pagechange", { detail: page }));

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

@@ -1,4 +1,5 @@
 import { LightningElement } from "lwc";
+import { throttle } from "throttle-debounce";
 
 const RESTORE_SCROLL_EVENT_NAME = "restore-scroll";
 const LOAD_TIME_SCROLL_RESTORE_DELAY = 750;
@@ -8,7 +9,13 @@ declare module globalThis {
     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;
 };
@@ -32,13 +39,13 @@ export default class ScrollManager extends LightningElement {
     */
 
     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
-    protected scrollUnlocked = false;
 
     renderedCallback() {
-        if (!globalThis.singletonScrollManagerRendered) {
+        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 ===
+                window.history.state?.scroll?.docSize ===
                 document.body.scrollHeight
             ) {
                 // only do this if loading is complete and the scrollHeight matches expectations
@@ -49,10 +56,8 @@ export default class ScrollManager extends LightningElement {
                     // 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
-                    if (!this.scrollUnlocked) {
-                        restoreScroll();
-                        this.scrollUnlocked = true;
-                    }
+                    restoreScroll();
+                    scrollUnlocked = true;
                 }, LOAD_TIME_SCROLL_RESTORE_DELAY);
             }
         } else {
@@ -75,7 +80,7 @@ export default class ScrollManager extends LightningElement {
         }
     }
 
-    saveScroll = () => {
+    saveScroll = throttle(100, () => {
         window.history.replaceState(
             {
                 scroll: {
@@ -86,7 +91,7 @@ export default class ScrollManager extends LightningElement {
             "",
             window.location.href
         );
-    };
+    });
 
     manualScrollListener = () => {
         if (this.scrollCount < 5) {

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

@@ -1,6 +1,8 @@
 /*
 Code generated by scripts/postinstall.js DO NOT EDIT
-*//*
+*/
+
+/*
 * @param direction vertical or horizontal
 * @param position type of positioning to apply (relative/absolute)
 */
@@ -1376,6 +1378,15 @@ Code generated by scripts/postinstall.js DO NOT EDIT
 .coveo-filetype-salesforce-standard-work-order-item,
 .coveo-filetype-salesforce-standard-work-order,
 .coveo-filetype-salesforce-standard-work-type,
+.coveo-filetype-slack,
+.coveo-icon.filetype.Slackmessage,
+.coveo-icon.filetype.slackmessage,
+.coveo-icon.filetype.Slackchannel,
+.coveo-icon.filetype.slackchannel,
+.coveo-icon.filetype.Slackfile,
+.coveo-icon.filetype.slackfile,
+.coveo-icon.filetype.Slackuser,
+.coveo-icon.filetype.slackuser,
 .coveo-filetype-user,
 .coveo-icon.objecttype.People,
 .coveo-icon.objecttype.people,
@@ -1584,21 +1595,6 @@ Code generated by scripts/postinstall.js DO NOT EDIT
   background-size: 56px 64px;
 }
 
-.coveo-filetype-slack,
-.coveo-icon.filetype.Slackmessage,
-.coveo-icon.filetype.slackmessage,
-.coveo-icon.filetype.Slackchannel,
-.coveo-icon.filetype.slackchannel,
-.coveo-icon.filetype.Slackfile,
-.coveo-icon.filetype.slackfile,
-.coveo-icon.filetype.Slackuser,
-.coveo-icon.filetype.slackuser {
-  display: inline-block;
-  width: 124px;
-  height: 124px;
-  background-size: 124px 124px;
-}
-
 .coveo-filetype-attachment-small,
 .coveo-icon.objecttype.coveo-small.Attachment,
 .coveo-icon.objecttype.coveo-small.attachment,
@@ -2124,6 +2120,15 @@ Code generated by scripts/postinstall.js DO NOT EDIT
 .coveo-filetype-salesforce-standard-work-order-item-small,
 .coveo-filetype-salesforce-standard-work-order-small,
 .coveo-filetype-salesforce-standard-work-type-small,
+.coveo-filetype-slack-small,
+.coveo-icon.filetype.coveo-small.Slackmessage,
+.coveo-icon.filetype.coveo-small.slackmessage,
+.coveo-icon.filetype.coveo-small.Slackchannel,
+.coveo-icon.filetype.coveo-small.slackchannel,
+.coveo-icon.filetype.coveo-small.Slackfile,
+.coveo-icon.filetype.coveo-small.slackfile,
+.coveo-icon.filetype.coveo-small.Slackuser,
+.coveo-icon.filetype.coveo-small.slackuser,
 .coveo-filetype-user-small,
 .coveo-icon.objecttype.coveo-small.People,
 .coveo-icon.objecttype.coveo-small.people,
@@ -2332,21 +2337,6 @@ Code generated by scripts/postinstall.js DO NOT EDIT
   background-size: 28px 32px;
 }
 
-.coveo-filetype-slack-small,
-.coveo-icon.filetype.coveo-small.Slackmessage,
-.coveo-icon.filetype.coveo-small.slackmessage,
-.coveo-icon.filetype.coveo-small.Slackchannel,
-.coveo-icon.filetype.coveo-small.slackchannel,
-.coveo-icon.filetype.coveo-small.Slackfile,
-.coveo-icon.filetype.coveo-small.slackfile,
-.coveo-icon.filetype.coveo-small.Slackuser,
-.coveo-icon.filetype.coveo-small.slackuser {
-  display: inline-block;
-  width: 62px;
-  height: 62px;
-  background-size: 62px 62px;
-}
-
 .coveo-filetype-attachment,
 .coveo-icon.objecttype.Attachment,
 .coveo-icon.objecttype.attachment,
@@ -8065,6 +8055,13 @@ select.coveo-dropdown::-ms-expand {
 * @param $size size of the icon to use
 */
 
+@font-face {
+  font-family: 'Lato';
+  src: url('https://static.cloud.coveo.com/searchui/v2.10104/0/fonts/lato.woff2'), url('https://staticdev.cloud.coveo.com/searchui/v2.10104/0/fonts/lato.woff2'), url('../fonts/lato.woff2'), url('https://static.cloud.coveo.com/searchui/v2.10104/0/fonts/lato.woff'), url('https://staticdev.cloud.coveo.com/searchui/v2.10104/0/fonts/lato.woff'), url('../fonts/lato.woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
 .CoveoSearchInterface {
   min-height: 100%;
   position: relative;
@@ -18738,6 +18735,10 @@ button.coveo-user-feedback-banner-explain-why-active {
 * @param $size size of the icon to use
 */
 
+.coveo-user-explanation-modal .coveo-small-close {
+  display: none;
+}
+
 .coveo-user-explanation-modal-explanation-section {
   display: flex;
   flex-wrap: wrap;

package/src/modules/dx/searchResults/searchResults.ts

@@ -1,5 +1,6 @@
 import { LightningElement, api, track } from "lwc";
 import type * as CoveoSDK from "coveo-search-ui";
+import { track as trackGTM } from "dxUtils/analytics";
 
 interface CoveoSearch {
     state: typeof CoveoSDK.state;
@@ -151,6 +152,7 @@ export default class SearchResults extends LightningElement {
                     return cv.state === "selected";
                 });
             });
+            this.trackSearchResults(event, this.query, this.totalResults);
         });
     }
 
@@ -184,4 +186,13 @@ export default class SearchResults extends LightningElement {
             }
         }
     }
+
+    private trackSearchResults(event: Event, term: string, resultCount: any) {
+        trackGTM(event.target!, "custEv_search", {
+            search_term: term,
+            search_category: "",
+            search_type: "site search",
+            search_result_count: resultCount
+        });
+    }
 }

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

@@ -32,9 +32,20 @@ export default class Tab extends LightningElement {
 
     private sendGtm(e: PointerEvent) {
         track(e.currentTarget!, "custEv_topNavLinkClick", {
-            navHeading: this.label || undefined,
-            clickText: this.href || undefined,
-            pageLocation: window.location.pathname
+            click_text: this.label || undefined,
+            click_url: this.href || undefined,
+            nav_level: "1",
+            nav_item: this.label || undefined,
+            element_type: "link",
+            nav_type: "global"
+        });
+
+        track(e.currentTarget!, "custEv_linkClick", {
+            click_text: this.label,
+            element_title: "button",
+            click_url: this.href,
+            element_type: "link",
+            content_category: "cta"
         });
     }
 

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

@@ -8,7 +8,7 @@
         aria-controls={panelId}
         aria-label="Tab button"
         aria-selected={active}
-        tabindex={index}
+        tabindex="0"
     >
         <slot></slot>
     </button>

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

@@ -41,6 +41,11 @@ const enum PlatformEventsType {
     UserMerge = "UserMerge"
 }
 
+// TODO: We probably should rewrite the logic of this component once the new identity stuff is released,
+// especially because SSO should work in all browsers at that point, and we won't need to do any weird
+// checking for the presence of SFIDWidget (and all the associated pain from trying to "time" the triggering of login
+// events due to logins coming via two distinct routes in Chrome).
+
 // This component handles the core Salesforce OAuth 2.0 flow used by TBID for login, rendering a
 // simple Login button or avatar icon depending on login status. It should be reusable in any case
 // where TBID login is needed.
@@ -56,6 +61,7 @@ export default class TbidAvatarButton extends LightningElement {
     private eventSource?: EventSource;
     private _isRequestingUserInfo = false;
     private _didReceiveUserInfo = false;
+    private _didDispatchLoginSuccess = false;
 
     // _didReceiveUserInfo is a proxy for "isLoggedIn" because we only want to show the UI corresponding
     // to logged-in state when user info has been received (avoids flashes of weird content)
@@ -155,8 +161,12 @@ export default class TbidAvatarButton extends LightningElement {
     // then this method waits a maximum of 1 second for the widget to finish logging in. If it does
     // *not* respond quickly, the method resolves early so that we can stop waiting pointlessly.
     private waitForSFIDWidget = async () => {
+        const millisecondsFor30fps = 33;
         const widgetNotAlivePromise = new Promise<boolean>((resolve) => {
-            const timeoutId = setTimeout(() => resolve(false), 100);
+            const timeoutId = setTimeout(
+                () => resolve(false),
+                5 * millisecondsFor30fps // give SFIDWidget roughly 5 chances to load
+            );
             window.SFIDWidget?.isAlive({
                 // If the widget responds as expected, this promise will fail to resolve and thus
                 // we will continue to wait on the other promise, below.
@@ -165,7 +175,7 @@ export default class TbidAvatarButton extends LightningElement {
         });
         const widgetLoggedInPromise = pollUntil(
             () => Boolean(window.SFIDWidget?.openid_response),
-            100,
+            millisecondsFor30fps,
             1000
         );
         const success = await Promise.race([
@@ -279,12 +289,13 @@ export default class TbidAvatarButton extends LightningElement {
                 // on SSO login. For some reason, the user info on SSO login lacks the user's photo URLs, so we
                 // have to re-request it. Maybe something to bring up with the TBID team.
                 await this.requestUserInfo();
-                this.dispatchLoginSuccess();
+                this.dispatchLoginSuccess(true);
             } else if (
                 tokenResponse.status === 409 &&
-                !this._didReceiveUserInfo
+                !this._didReceiveUserInfo &&
+                !this._isRequestingUserInfo // don't duplicate requests when we already have this token and a request is on-going
             ) {
-                // Valid token received, but we still need to grab userInfo. This could happen in certain edge cases
+                // Valid but duplicate token received, but we still need to grab userInfo. This could happen in certain edge cases
                 // involving "seamless SSO" (e.g., you might be sitting on our page in more than one tab, then log in
                 // on one of them; in that case, our back-end will receive the token from one tab, end up _rejecting_ it
                 // as a duplicate on other tabs where the login event occurs, and yet still need to request user info
@@ -384,11 +395,6 @@ export default class TbidAvatarButton extends LightningElement {
     };
 
     private requestUserInfo = async () => {
-        if (this._isRequestingUserInfo) {
-            // prevent duplicate requests
-            return;
-        }
-
         this._isRequestingUserInfo = true;
 
         try {
@@ -422,12 +428,16 @@ export default class TbidAvatarButton extends LightningElement {
         );
     };
 
-    private dispatchLoginSuccess = () => {
-        this.dispatchEvent(
-            new CustomEvent("tbidloginsuccess", {
-                bubbles: true
-            })
-        );
+    private dispatchLoginSuccess = (receivedNewToken = false) => {
+        // Receiving a new token should be treated as a new (SSO) login.
+        if (!this._didDispatchLoginSuccess || receivedNewToken) {
+            this._didDispatchLoginSuccess = true;
+            this.dispatchEvent(
+                new CustomEvent("tbidloginsuccess", {
+                    bubbles: true
+                })
+            );
+        }
     };
 
     private dispatchLogoutSuccess = () => {

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

@@ -75,16 +75,33 @@ export default class Toc extends LightningElement {
 
         this._value = id!;
 
-        sendGtm(e.currentTarget!, "custEv_tableOfContentsClick", {
-            clickText: text,
-            clickUrl: href,
-            elementType: "link",
-            locationOnPage: "table of contents",
-            itemTitle: this.title
+        sendGtm(e.currentTarget!, "custEv_tableOfContents", {
+            click_text: text,
+            clickAction: "click",
+            click_url: href,
+            element_title: "a",
+            element_type: "link",
+            content_category: "cta"
         });
     }
 
-    private toggleShowContent() {
+    private toggleShowContent(e: Event) {
         this.showContent = !this.showContent;
+        this.trackShowContent(e);
+    }
+
+    private trackShowContent(event: Event) {
+        let action = "collapse";
+        if (this.showContent) {
+            action = "expand";
+        }
+        sendGtm(event.target!, "custEv_tableOfContents", {
+            click_text: this.toggleButtonAriaLabel,
+            clickAction: action,
+            click_url: "",
+            element_title: "dx-button",
+            element_type: "button",
+            content_category: "cta"
+        });
     }
 }