@salesforcedevs/dx-components 1.3.38 → 1.3.40-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.38",
+    "version": "1.3.40-alpha.0",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -13,6 +13,7 @@
         "@coveo/headless": "^1.32.0",
         "@floating-ui/dom": "^1.0.4",
         "@sfdocs-internal/wires": "^0.6.3",
+        "@types/throttle-debounce": "^5.0.0",
         "@vimeo/player": "^2.16.4",
         "classnames": "^2.2.6",
         "coveo-search-ui": "^2.10082.5",
@@ -23,6 +24,7 @@
         "lodash.kebabcase": "^4.1.1",
         "microtip": "0.2.2",
         "salesforce-oauth2": "^0.2.0",
+        "throttle-debounce": "^5.0.0",
         "uuid": "^9.0.0"
     },
     "devDependencies": {
@@ -37,6 +39,5 @@
         "@types/vimeo__player": "^2.16.2",
         "eventsourcemock": "^2.0.0",
         "luxon": "^3.1.0"
-    },
-    "gitHead": "9cc8fbc4b276d28eb128f5f7fd1eec7844e831b2"
+    }
 }

package/src/modules/dx/cardBlogPost/cardBlogPost.html

@@ -1,8 +1,6 @@
 <template>
     <dx-card-content
-        author-href={authorHref}
-        author-img-src={authorImgSrc}
-        author-label={authorLabel}
+        authors={authors}
         body={body}
         featured={featured}
         href={href}

package/src/modules/dx/cardBlogPost/cardBlogPost.ts

@@ -1,9 +1,6 @@
 import { LightningElement, api } from "lwc";
 
 export default class CardBlogPost extends LightningElement {
-    @api authorHref?: string | null = null;
-    @api authorImgSrc!: string | null;
-    @api authorLabel!: string | null;
     @api body!: string;
     @api datetime!: string;
     @api dateTime?: string | null = null;
@@ -14,6 +11,7 @@ export default class CardBlogPost extends LightningElement {
     @api label?: string;
     @api target?: string | null = null;
     @api title!: string;
+    @api authors?: Array<any> | null = null;
 
     // LWC is being compiled so that datetime is being interpreted as date-time
     // ONLY from from the implementation in dx-card-blog-post-provider

package/src/modules/dx/cardContent/cardContent.css

@@ -7,6 +7,11 @@
     height: 100%;
 }
 
+.authors > *:not(:last-child) {
+    padding-bottom: 6px;
+    display: block;
+}
+
 .card-content {
     display: flex;
     justify-content: flex-start;

package/src/modules/dx/cardContent/cardContent.html

@@ -42,12 +42,16 @@
             >
                 {subtitle}
             </span>
-            <dx-image-and-label
-                if:true={hasAuthor}
-                href={authorHref}
-                img-src={authorImgSrc}
-                label={authorLabel}
-            ></dx-image-and-label>
+            <div class="authors" if:true={authors}>
+                <template for:each={authors} for:item="author">
+                    <dx-image-and-label
+                        key={author.key}
+                        img-src={author.imgSrc}
+                        label={author.name}
+                        href={author.href}
+                    ></dx-image-and-label>
+                </template>
+            </div>
             <span if:true={body} class="body dx-text-body-2" part="body">
                 {body}
             </span>

package/src/modules/dx/cardContent/cardContent.ts

@@ -3,11 +3,10 @@ import cx from "classnames";
 import { LightningSlotElement } from "typings/custom";
 import { isSlotEmpty } from "dxUtils/slot";
 import { toDxColor } from "dxUtils/css";
+import { toJson } from "dxUtils/normalizers";
+import { ImageAndLabel } from "../imageAndLabel";
 
 export default class CardContent extends LightningElement {
-    @api authorHref?: string | null = null;
-    @api authorImgSrc?: string | null = null;
-    @api authorLabel?: string | null = null;
     @api backgroundColor?: string | null = null;
     @api body?: string | null = null;
     @api featured?: boolean = false;
@@ -19,14 +18,30 @@ export default class CardContent extends LightningElement {
     @api subtitle?: string | null = null;
     @api target?: string | null = null;
     @api title!: string;
+    @api
+    get authors() {
+        if (this._authors && this._authors.length) {
+            return this._authors!.map((author, index) => ({
+                ...author,
+                imgSrc: author.image_src,
+                key: index
+            }));
+        }
+        return undefined;
+    }
+
+    set authors(value: any) {
+        if (value !== "undefined") {
+            this._authors = (toJson(value) as Array<any>)?.filter(
+                (author) => author.name
+            );
+        }
+    }
+    private _authors?: Array<ImageAndLabel>;
 
     private isDatetimeEmpty: boolean = true;
     private isLinkHovered: boolean = false;
 
-    private get hasAuthor() {
-        return this.authorImgSrc && this.authorLabel;
-    }
-
     private get backgroundStyle(): string {
         return this.backgroundColor
             ? `background: ${toDxColor(this.backgroundColor)}`

package/src/modules/dx/cardExpanded/cardExpanded.css

@@ -12,6 +12,7 @@ dx-formatted-date-time,
 .podcast-length {
     /* Push down a little to align with dx-image-and-label */
     margin-top: 3px;
+    margin-right: var(--dx-g-spacing-sm);
 }
 
 .card-body {
@@ -19,8 +20,7 @@ dx-formatted-date-time,
 }
 
 .card-extra-info {
-    gap: var(--dx-g-spacing-sm);
-    align-items: center;
+    text-align: start;
 }
 
 .card-container {
@@ -28,11 +28,19 @@ dx-formatted-date-time,
     padding-bottom: var(--dx-g-spacing-xl);
     flex-direction: column;
     gap: var(--dx-g-spacing-smd);
+    display: flex;
 }
 
-.card-container,
-.card-extra-info {
-    display: flex;
+.card-extra-info .authors {
+    margin-bottom: var(--dx-g-spacing-smd);
+}
+
+.card-extra-info .authors > *:not(:last-child) {
+    padding-right: var(--dx-g-spacing-md);
+}
+
+.card-extra-info .authors > * {
+    display: inline-flex;
 }
 
 .card-dot-separator {
@@ -43,6 +51,8 @@ dx-formatted-date-time,
     background-color: var(--dx-g-text-label-color);
     border-radius: 100%;
     margin-bottom: 3px;
+    display: inline-block;
+    margin-right: var(--dx-g-spacing-sm);
 }
 
 .card-mobile .card-body {

package/src/modules/dx/cardExpanded/cardExpanded.html

@@ -8,11 +8,15 @@
             title={title}
         ></dx-card-title>
         <div class="card-extra-info dx-text-label-1-dark">
-            <dx-image-and-label
-                if:true={renderAuthor}
-                img-src={authorImage}
-                label={authorLabel}
-            ></dx-image-and-label>
+            <div class="authors" if:true={renderAuthor}>
+                <template for:each={authors} for:item="author">
+                    <dx-image-and-label
+                        key={author.key}
+                        label={author.name}
+                        img-src={author.imgSrc}
+                    ></dx-image-and-label>
+                </template>
+            </div>
             <span class="podcast-length" if:true={renderLength}>{length}</span>
             <span if:true={renderDot} class="card-dot-separator"></span>
             <dx-formatted-date-time

package/src/modules/dx/cardExpanded/cardExpanded.ts

@@ -1,21 +1,41 @@
 import { api } from "lwc";
 import { ArchiveCard } from "dxBaseElements/archiveCard";
 import cx from "classnames";
+import ImageAndLabel from "../imageAndLabel";
+import { toJson } from "dxUtils/normalizers";
 
 export default class ExpandedCard extends ArchiveCard {
     @api body!: string;
     @api date: string | null = null;
     @api topics: Array<string> = [];
-    @api authorLabel?: string | null = null;
-    @api authorImgSrc?: string | null = null;
     @api length?: string;
+    @api
+    get authors() {
+        if (this._authors && this._authors.length) {
+            return this._authors!.map((author, index) => ({
+                ...author,
+                imgSrc: !this.mobile ? author.image_src : "",
+                key: index
+            }));
+        }
+        return undefined;
+    }
+
+    set authors(value: any) {
+        if (value !== "undefined") {
+            this._authors = (toJson(value) as Array<any>)?.filter(
+                (author) => author.name
+            );
+        }
+    }
+    private _authors?: Array<ImageAndLabel>;
 
     private get isBlog(): boolean {
         return this.contentType === "blog";
     }
 
     private get hasAuthor(): boolean {
-        return !!(this.authorImgSrc && this.authorLabel);
+        return this.authors?.length;
     }
 
     private get renderAuthor(): boolean {
@@ -27,17 +47,13 @@ export default class ExpandedCard extends ArchiveCard {
     }
 
     private get renderDot(): boolean {
-        return !!((this.renderAuthor || this.renderLength) && this.date);
+        return !!(this.renderLength && this.date);
     }
 
     private get hasTopics(): boolean {
         return !!this.topics?.length;
     }
 
-    private get authorImage(): string {
-        return !this.mobile && this.authorImgSrc ? this.authorImgSrc : "";
-    }
-
     private get containerClass(): string {
         return cx("card-container", this.mobile && "card-mobile");
     }

package/src/modules/dx/cardTrial/cardTrial.html

@@ -69,6 +69,7 @@
             size="large"
             href={buttonOneHref}
             variant="primary"
+            target={buttonOneTarget}
             font="sans"
             icon-symbol={buttonOneIcon}
             icon-size={buttonOneIconSize}
@@ -82,6 +83,7 @@
                 href={buttonOneHref}
                 variant="primary"
                 font="sans"
+                target={buttonOneTarget}
                 icon-symbol={buttonOneIcon}
                 icon-size={buttonOneIconSize}
             >

package/src/modules/dx/cardTrial/cardTrial.ts

@@ -1,6 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { toJson } from "dxUtils/normalizers";
+import { track } from "dxUtils/analytics";
 
 export default class CardTrial extends LightningElement {
     @api badgeBackgroundColor?: string = "indigo-vibrant-90";
@@ -71,6 +72,10 @@ export default class CardTrial extends LightningElement {
         return this.hasButtons ? "menu" : "link";
     }
 
+    get buttonOneTarget() {
+        return this.isExternalURL(this.buttonOneHref) ? "_blank" : null;
+    }
+
     private _details!: string[];
     private _modalDetails!: [{ title: string; subtitle: string }];
     private _modalOpen = false;
@@ -93,10 +98,36 @@ export default class CardTrial extends LightningElement {
         this._modalOpen = !this._modalOpen;
     }
 
-    private handleClick() {
+    private handleClick(e: PointerEvent) {
         // card is clickable only if it doesn't contain buttons (for accessibility reasons)
         if (!this.hasButtons) {
             window.location.assign(this.href);
+            if (this.href.includes("signup")) {
+                this.handleSignUpClick(e);
+            }
+        }
+    }
+
+    private handleSignUpClick(e: PointerEvent) {
+        track(e.currentTarget!, "custEv_signupStart", {
+            click_text: this.label,
+            element_title: this.title,
+            element_type: "card",
+            click_url: this.href,
+            content_category: "cta"
+        });
+    }
+
+    private isExternalURL(url: string | undefined): boolean {
+        if (!url) {
+            return false;
+        }
+
+        try {
+            const value = new URL(url);
+            return value.host !== window.location.host;
+        } catch (e) {
+            return false;
         }
     }
 }

package/src/modules/dx/cardTrialExpanded/cardTrialExpanded.html

@@ -31,6 +31,7 @@
                     class="button-cta"
                     size="large"
                     href={href}
+                    onclick={handleSignUpClick}
                     variant="primary"
                     font="sans"
                     icon-symbol={buttonIcon}

package/src/modules/dx/cardTrialExpanded/cardTrialExpanded.ts

@@ -1,5 +1,6 @@
 import { LightningElement, api } from "lwc";
 import { toJson } from "dxUtils/normalizers";
+import { track } from "dxUtils/analytics";
 
 export default class CardTrial extends LightningElement {
     @api badgeBackgroundColor?: string = "indigo-vibrant-90";
@@ -64,4 +65,16 @@ export default class CardTrial extends LightningElement {
     private handleModalClose() {
         this.dispatchEvent(new CustomEvent("togglemodal"));
     }
+
+    private handleSignUpClick(e: PointerEvent) {
+        if (this.href.includes("signup")) {
+            track(e.currentTarget!, "custEv_signupStart", {
+                click_text: this.buttonCta,
+                element_title: this.title,
+                element_type: "card",
+                click_url: this.href,
+                content_category: "cta"
+            });
+        }
+    }
 }

package/src/modules/dx/codeBlock/codeBlock.ts

@@ -181,8 +181,11 @@ export default class CodeBlock extends LightningElement {
      * https://github.com/storybookjs/storybook/issues/13529
      */
     async copySource(event: any) {
-        gtmTrack(event.target, "custEv_codeBlock", {
-            codeBlockAction: "copy"
+        gtmTrack(event.target, "custEv_iconClick", {
+            clickText: this.copyBtnText,
+            elementType: "icon",
+            elementTitle: "dx-icon",
+            contentCategory: "code block"
         });
 
         try {
@@ -206,8 +209,11 @@ export default class CodeBlock extends LightningElement {
         this.theme = this.theme === DARK ? LIGHT : DARK;
         setLocalStorageData(LOCAL_STORAGE_KEY, this.theme);
 
-        gtmTrack(event.target, "custEv_codeBlock", {
-            codeBlockAction: this.theme === DARK ? "darkmode" : "lightmode"
+        gtmTrack(event.target, "custEv_iconClick", {
+            clickText: this.updateThemeBtnText,
+            elementType: "icon",
+            elementTitle: "dx-icon",
+            contentCategory: "code block"
         });
     }
 

package/src/modules/dx/dropdown/dropdown.html

@@ -21,9 +21,8 @@
         >
             <template for:each={options} for:item="option" for:index="index">
                 <dx-dropdown-option
-                    suppress-gtm-nav-headings={suppressGtmNavHeadings}
                     analytics-event={analyticsEvent}
-                    analytics-base-payload={analyticsBasePayload}
+                    analytics-payload={analyticsPayload}
                     active={option.active}
                     key-value={option.keyValue}
                     if:false={option.options}
@@ -44,9 +43,8 @@
                     <span class="menu_heading">{option.label}</span>
                     <template for:each={option.options} for:item="suboption">
                         <dx-dropdown-option
-                            suppress-gtm-nav-headings={suppressGTMNavHeadings}
                             analytics-event={analyticsEvent}
-                            analytics-base-payload={analyticsBasePayload}
+                            analytics-payload={analyticsPayload}
                             active={suboption.active}
                             key={suboption.id}
                             key-value={suboption.keyValue}

package/src/modules/dx/dropdown/dropdown.ts

@@ -38,13 +38,8 @@ export default class Dropdown extends LightningElement {
     @api variant: DropdownVariant = "base";
 
     // props forwarded to dropdown option
-    @api analyticsEvent: string | null = null;
-    @api analyticsBasePayload: AnalyticsPayload = {
-        elementType: "dropdown",
-        destinationType: "internal",
-        ctaClick: true
-    };
-    @api suppressGtmNavHeadings?: boolean = false;
+    @api analyticsEvent?: string;
+    @api analyticsPayload?: AnalyticsPayload;
 
     @api
     get options() {

package/src/modules/dx/dropdownOption/dropdownOption.ts

@@ -9,12 +9,11 @@ import { track } from "dxUtils/analytics";
 
 export default class DropdownOption extends LightningElement {
     @api option!: OptionWithNested;
-    @api suppressGtmNavHeadings: boolean = false;
     @api keyValue!: string;
     @api active: boolean = false;
     @api navItemLabel: String | null = null;
     @api analyticsEvent: string | null = null;
-    @api analyticsBasePayload!: AnalyticsPayload;
+    @api analyticsPayload?: AnalyticsPayload | undefined;
     @api indexPosition: number = 0;
     @api variant: DropdownVariant = "base";
 
@@ -43,25 +42,16 @@ export default class DropdownOption extends LightningElement {
             new CustomEvent("select", { detail: this.keyValue })
         );
 
-        const payload: any = {
-            ...this.analyticsBasePayload,
-            clickText: this.keyValue || undefined,
-            itemTitle: this.option.label || undefined,
-            clickUrl: this.option.link?.href || undefined
-        };
-
-        const navHeading = this.navItemLabel || this.option.label || undefined;
-        const navSubHeading =
-            (this.navItemLabel ? this.option.label : undefined) || undefined;
-
-        if (!this.suppressGtmNavHeadings) {
-            payload.navHeading = navHeading;
-            payload.navSubHeading = navSubHeading;
-            payload.pageLocation = window.location.pathname;
-        }
-
-        if (this.analyticsEvent && e.currentTarget) {
-            track(e.currentTarget, this.analyticsEvent, payload);
+        if (this.analyticsEvent && this.analyticsPayload && e.currentTarget) {
+            track(e.currentTarget, this.analyticsEvent, {
+                ...this.analyticsPayload,
+                clickText: this.option.label,
+                clickUrl: this.option.link?.href,
+                elementType: this.analyticsPayload?.elementType || "dropdown",
+                ...(this.analyticsPayload?.navType
+                    ? { navItem: this.option.label }
+                    : {})
+            });
         }
     }
 }

package/src/modules/dx/featuredContentHeader/featuredContentHeader.ts

@@ -39,7 +39,7 @@ export default class FeaturedContentHeader extends LightningElement {
         if (this._authors && this._authors.length) {
             return this._authors!.map((author, index) => ({
                 ...author,
-                imgSrc: author.avatar_urls?.["24"] || author.imgSrc,
+                imgSrc: author.image_src,
                 key: index
             }));
         }

package/src/modules/dx/footer/footer.css

@@ -44,6 +44,11 @@ footer.signup-variant-no-signup {
     color: var(--dx-g-blue-vibrant-20);
 }
 
+.term-icon {
+    width: 35px;
+    margin: 0 var(--dx-g-spacing-xs);
+}
+
 /* TOP */
 
 .content-container_top {

package/src/modules/dx/footer/footer.html

@@ -139,6 +139,12 @@
                         </template>
                         <template if:false={term.onclick}>
                             <a href={term.href} key={term.label} rel={term.rel}>
+                                <img
+                                    if:true={term.img}
+                                    class="term-icon"
+                                    src={term.img}
+                                    alt="Footer Term Icon"
+                                />
                                 {term.label}
                             </a>
                         </template>

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

@@ -18,12 +18,6 @@ const createNewsletterSignupHref = (email: string): string => {
     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
@@ -107,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
+            clickUrl: PATH,
+            elementType: "button",
+            elementTitle: "dx-footer",
+            contentCategory: "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/icons/terms-privacy/privacyicon.png"
     }
 ];
 

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

@@ -10,10 +10,11 @@ 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
+            clickText: this.label || undefined,
+            clickUrl: this.href || undefined,
+            navItem: this.label || undefined,
+            elementType: "link",
+            navType: "footer"
         });
     }
 }

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,
+        track(event.target!, "custEv_ctaButtonClick", {
             clickText: event.currentTarget.innerText,
             itemTitle: event.currentTarget.innerText,
-            clickUrl: event.currentTarget.href
-        };
-
-        track(event.target!, "custEv_ctaButtonClick", payload);
+            clickUrl: event.currentTarget.href,
+            elementType: "button",
+            elementTitle: "dx-group-text",
+            contentCategory: "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 = {
+        navLevel: "2",
+        navType: "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,23 @@ 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
+                elementTitle: "dx-button",
+                contentCategory: "cta"
             });
         }
     }

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,
@@ -98,10 +91,14 @@ export default class Pagination extends LightningElement {
                 ? page
                 : (e.target as HTMLElement).dataset.partId;
 
+        console.log("clickURL", e.target.href);
+
         track(e.currentTarget!, "custEv_pagination", {
-            ...ANALYTICS_INFO,
             clickText,
-            itemTitle: clickText
+            clickUrl: window.location.href,
+            elementType: "button",
+            navType: "pagination",
+            navItem: 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/tab/tab.ts

@@ -32,9 +32,12 @@ 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
+            clickText: this.label || undefined,
+            clickUrl: this.href || undefined,
+            navLevel: "1",
+            navItem: this.label || undefined,
+            elementType: "link",
+            navType: "global"
         });
     }
 

package/src/modules/dx/treeItem/treeItem.ts

@@ -97,10 +97,18 @@ export default class TreeItem extends LightningElement {
         this.sendGtm(event);
     }
 
-    private onLinkClick(event: Event): void {
-        if (!(this._treeNode.link && this._treeNode.link.href)) {
+    private preventDefaultLinkBehavior(event: Event) {
+        // prevent page refresh if href isn't present or link is already active
+        if (
+            !this._treeNode.link?.href ||
+            this._treeNode.link?.href === window.location.pathname
+        ) {
             event.preventDefault();
         }
+    }
+
+    private onLinkClick(event: Event): void {
+        this.preventDefaultLinkBehavior(event);
 
         if (this.isParent) {
             const isSelectAction = true;
@@ -138,11 +146,12 @@ export default class TreeItem extends LightningElement {
     }
 
     private sendGtm(event: Event) {
-        track(event.currentTarget!, "custEv_leftNavClick", {
-            navType: "left nav bar",
+        track(event.currentTarget!, "custEv_leftNavLinkClick", {
             clickText: this._treeNode.label,
             clickUrl: this.href,
-            navItem: this.parentName
+            navItem: this.parentName,
+            navType: "left nav bar",
+            elementType: "link"
         });
     }
 }

package/src/modules/dxBaseElements/headerBase/headerBase.ts

@@ -21,11 +21,11 @@ const VALID_BRANDS = [
 ];
 
 export const ANALYTICS_INFO = {
-    clickText: "Sign Up",
-    itemTitle: "Sign Up Header Button",
+    click_text: "Sign Up",
+    element_title: "Sign Up Header Button",
     elementType: "button",
-    destinationType: "internal",
-    ctaClick: true
+    element_type: "internal",
+    content_category: "cta"
 };
 
 export abstract class HeaderBase extends LightningElement {
@@ -201,9 +201,9 @@ export abstract class HeaderBase extends LightningElement {
     };
 
     private handleSignUpClick(e: PointerEvent) {
-        track(e.currentTarget!, "custEv_signupStart", {
+        track(e.currentTarget!, "custEv_browseTrialsClick", {
             ...ANALYTICS_INFO,
-            clickUrl: this.signupLink
+            click_url: this.signupLink
         });
     }
 

package/src/modules/dxUtils/normalizers/normalizers.ts

@@ -58,9 +58,7 @@ export const normalizePost = ({
     body: description,
     datetime: date,
     href: url,
-    authorHref: get(authors, "[0].link"),
-    authorImgSrc: get(authors, "[0].avatar_urls.48"),
-    authorName: get(authors, "[0].name"),
+    authors: authors,
     imgAlt: "Blogpost image",
     imgSrc: featuredImage,
     id,

package/LICENSE

@@ -1,12 +0,0 @@
-Copyright (c) 2020, Salesforce.com, Inc.
-All rights reserved.
-
-Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
-
-* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
-
-* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
-
-* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.