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

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/cardNews/cardNews.ts

@@ -74,5 +74,6 @@ export default class CardNews extends LightningElement {
             clickUrl: this.href
         };
         track(e.currentTarget!, "custEv_ctaLinkClick", payload);
+        track(e.currentTarget!, "custEv_linkClick", payload);
     }
 }

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

@@ -3,6 +3,7 @@
         if:true={hasTwoButtons}
         open={_modalOpen}
         ontogglemodal={toggleModal}
+        onclosemodal={closeModal}
     >
         <dx-card-trial-expanded
             badge-background-color={badgeBackgroundColor}
@@ -21,7 +22,8 @@
             target={target}
             terms={terms}
             title={title}
-            ontogglemodal={toggleModal}
+            type-badge-value={modalTypeBadgeValue}
+            type-badge-dark={modalTypeBadgeDark}
         ></dx-card-trial-expanded>
     </dx-modal>
     <div class="recommended-container" if:true={recommended}>
@@ -69,6 +71,7 @@
             size="large"
             href={buttonOneHref}
             variant="primary"
+            target={buttonOneTarget}
             font="sans"
             icon-symbol={buttonOneIcon}
             icon-size={buttonOneIconSize}
@@ -82,6 +85,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";
@@ -34,6 +35,8 @@ export default class CardTrial extends LightningElement {
     @api typeBadgeColor?: string;
     @api typeBadgeSize?: string = "default";
     @api typeBadgeDark?: boolean = false;
+    @api modalTypeBadgeValue?: string;
+    @api modalTypeBadgeDark?: boolean;
 
     @api
     get details() {
@@ -71,6 +74,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 +100,42 @@ export default class CardTrial extends LightningElement {
         this._modalOpen = !this._modalOpen;
     }
 
-    private handleClick() {
+    private closeModal() {
+        this._modalOpen = false;
+    }
+
+    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) {
+        const payload = {
+            click_text: this.label,
+            element_title: "dx-button",
+            element_type: "card",
+            click_url: this.href,
+            content_category: "cta"
+        };
+        track(e.currentTarget!, "custEv_signupStart", payload);
+        track(e.currentTarget!, "custEv_linkClick", payload);
+    }
+
+    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.css

@@ -19,6 +19,11 @@
     pointer-events: all;
 }
 
+.badge-container {
+    display: flex;
+    justify-content: space-between;
+}
+
 .badge-main {
     --dx-c-icon-badge-icon-size: var(--dx-g-spacing-mlg);
     --dx-c-icon-badge-size: var(--dx-g-spacing-2xl);
@@ -138,6 +143,11 @@ dx-button {
     color: white;
 }
 
+.bullet-list .bullet {
+    padding-left: 1.39571429em;
+    text-indent: -1.39571429em;
+}
+
 @media screen and (max-width: 768px) {
     .container {
         max-width: 550px;

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

@@ -10,14 +10,21 @@
                 Close
             </dx-button>
         </div>
-        <div class="content-container">
+        <div class="content-container" tabindex="0" onkeydown={handleKeyDown}>
             <div class="col-one">
-                <dx-icon-badge
-                    class="badge-main"
-                    background-color={badgeBackgroundColor}
-                    symbol={badgeSymbol}
-                    sprite={badgeSprite}
-                ></dx-icon-badge>
+                <div class="badge-container">
+                    <dx-icon-badge
+                        class="badge-main"
+                        background-color={badgeBackgroundColor}
+                        symbol={badgeSymbol}
+                        sprite={badgeSprite}
+                    ></dx-icon-badge>
+                    <dx-type-badge
+                        if:true={typeBadgeValue}
+                        value={typeBadgeValue}
+                        dark={typeBadgeDark}
+                    ></dx-type-badge>
+                </div>
                 <dx-card-title
                     class="title-main"
                     href={href}
@@ -31,6 +38,7 @@
                     class="button-cta"
                     size="large"
                     href={href}
+                    onclick={handleSignUpClick}
                     variant="primary"
                     font="sans"
                     icon-symbol={buttonIcon}
@@ -72,9 +80,7 @@
                                 for:each={colTwoItem.bullets}
                                 for:item="bullet"
                             >
-                                <li key={colTwoItem.bullet} class="bullet">
-                                    {bullet}
-                                </li>
+                                <li key={bullet} class="bullet">{bullet}</li>
                             </template>
                         </ul>
                     </div>

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";
@@ -16,6 +17,8 @@ export default class CardTrial extends LightningElement {
     @api target?: string;
     @api terms!: string;
     @api title!: string;
+    @api typeBadgeValue?: string;
+    @api typeBadgeDark?: boolean = false;
 
     @api
     get details() {
@@ -37,6 +40,13 @@ export default class CardTrial extends LightningElement {
     private _colTwoDetails!: string[];
     private stickyCloseObserver!: IntersectionObserver;
 
+    connectedCallback(): void {
+        this.template.addEventListener(
+            "keydown",
+            this.handleKeyDown.bind(this)
+        );
+    }
+
     renderedCallback(): void {
         this.observeStickyClose();
     }
@@ -61,7 +71,39 @@ export default class CardTrial extends LightningElement {
         }
     }
 
+    private handleKeyDown(event: KeyboardEvent): void {
+        if (event.key === "Escape") {
+            this.handleModalClose();
+        }
+    }
+
+    private handleModalToggle() {
+        this.dispatchEvent(
+            new CustomEvent("togglemodal", {
+                bubbles: true
+            })
+        );
+    }
+
     private handleModalClose() {
-        this.dispatchEvent(new CustomEvent("togglemodal"));
+        this.dispatchEvent(
+            new CustomEvent("closemodal", {
+                bubbles: true
+            })
+        );
+    }
+
+    private handleSignUpClick(e: PointerEvent) {
+        if (this.href.includes("signup")) {
+            const payload = {
+                click_text: this.buttonCta,
+                element_title: "dx-button",
+                element_type: "card",
+                click_url: this.href,
+                content_category: "cta"
+            };
+            track(e.currentTarget!, "custEv_signupStart", payload);
+            track(e.currentTarget!, "custEv_linkClick", payload);
+        }
     }
 }

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

@@ -174,6 +174,15 @@ export default class CodeBlock extends LightningElement {
         this.selectedLanguageLabel = this.selectedLanguage.label;
         this.selectedLanguageId = this.selectedLanguage.id;
         this.formatCodeBlock();
+
+        gtmTrack(newLang, "custEv_ctaLinkClick", {
+            event: "custEv_ctaLinkClick",
+            click_text: newLang.detail,
+            element_title: "dx-dropdown",
+            click_url: this.selectedLanguageId,
+            element_type: "link",
+            content_category: "code block"
+        });
     }
 
     /**
@@ -181,8 +190,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", {
+            click_text: this.copyBtnText,
+            element_type: "icon",
+            element_title: "dx-icon",
+            content_category: "code block"
         });
 
         try {
@@ -206,8 +218,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", {
+            click_text: this.updateThemeBtnText,
+            element_type: "icon",
+            element_title: "dx-icon",
+            content_category: "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,
+                click_text: this.option.label,
+                click_url: this.option.link?.href,
+                element_type: this.analyticsPayload?.element_type || "dropdown",
+                ...(this.analyticsPayload?.nav_type
+                    ? { nav_item: this.option.label }
+                    : {})
+            });
         }
     }
 }

package/src/modules/dx/feature/feature.html

@@ -12,6 +12,7 @@
                 target={target}
                 icon-symbol={iconSymbol}
                 href={buttonHref}
+                onclick={handleClick}
             >
                 {buttonLabel}
             </dx-button>

package/src/modules/dx/feature/feature.ts

@@ -1,4 +1,5 @@
 import { LightningElement, api } from "lwc";
+import { track } from "dxUtils/analytics";
 
 export default class Feature extends LightningElement {
     @api label!: string;
@@ -31,4 +32,16 @@ export default class Feature extends LightningElement {
     get iconSymbol(): string {
         return this.isExternalLink ? "new_window" : "";
     }
+
+    handleClick(event: Event) {
+        const payload = {
+            click_text: this.buttonLabel,
+            element_title: "dx-button",
+            click_url: this.buttonHref,
+            element_type: "button",
+            content_category: "cta"
+        };
+        track(event.target!, "custEv_ctaButtonClick", payload);
+        track(event.target!, "custEv_linkClick", payload);
+    }
 }

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

@@ -4,6 +4,7 @@ import { LightningSlotElement } from "typings/custom";
 import { isSlotEmpty } from "dxUtils/slot";
 import { toJson } from "dxUtils/normalizers";
 import { ImageAndLabel } from "../imageAndLabel";
+import { track } from "dxUtils/analytics";
 import svgs from "./svgs";
 
 export default class FeaturedContentHeader extends LightningElement {
@@ -32,14 +33,19 @@ export default class FeaturedContentHeader extends LightningElement {
     private _authors?: Array<ImageAndLabel>;
     private isSlotEmpty: boolean = true;
     private isLinkHovered: boolean = false;
-
+    private progressPodcastPlayed = {
+        percent25: false,
+        percent50: false,
+        percent75: false,
+        percent100: false
+    };
     // ! Move this map away from the component and probably the filter too.
     @api
     get authors() {
         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
             }));
         }
@@ -103,6 +109,57 @@ export default class FeaturedContentHeader extends LightningElement {
 
     private onSlotChange(e: LightningSlotElement): void {
         this.isSlotEmpty = isSlotEmpty(e);
+        const slot = e.target;
+        const slotElements = slot.assignedElements();
+
+        if (slotElements.length) {
+            const slotContentElement = slotElements[0];
+            const playerElement = slotContentElement.shadowRoot.querySelector(
+                "audio"
+            ) as HTMLAudioElement;
+            if (playerElement) {
+                playerElement.addEventListener("play", (event: Event) => {
+                    const playerState = this.handlePlayerState(playerElement);
+                    this.trackAnalytics(
+                        event,
+                        "play",
+                        playerState.timePlayed,
+                        playerState.percentagePlayed
+                    );
+                });
+
+                playerElement.addEventListener("pause", (event: Event) => {
+                    const playerState = this.handlePlayerState(playerElement);
+                    this.trackAnalytics(
+                        event,
+                        "pause",
+                        playerState.timePlayed,
+                        playerState.percentagePlayed
+                    );
+                });
+
+                playerElement.addEventListener("timeupdate", (event: Event) => {
+                    const playerState = this.handlePlayerState(playerElement);
+                    if (
+                        (playerState.percentagePlayed === 25 &&
+                            !this.progressPodcastPlayed.percent25) ||
+                        (playerState.percentagePlayed === 50 &&
+                            !this.progressPodcastPlayed.percent50) ||
+                        (playerState.percentagePlayed === 75 &&
+                            !this.progressPodcastPlayed.percent75) ||
+                        (playerState.percentagePlayed === 100 &&
+                            !this.progressPodcastPlayed.percent100)
+                    ) {
+                        this.trackAnalytics(
+                            event,
+                            "progress",
+                            playerState.timePlayed,
+                            playerState.percentagePlayed
+                        );
+                    }
+                });
+            }
+        }
     }
 
     renderedCallback(): void {
@@ -119,4 +176,61 @@ export default class FeaturedContentHeader extends LightningElement {
             }
         }
     }
+
+    private trackAnalytics(
+        event: Event,
+        action: "play" | "pause" | "progress",
+        timePlayed: number,
+        percentagePlayed: number
+    ) {
+        let trackEvent = null;
+        switch (action) {
+            case "play":
+                trackEvent = "custEv_podcastPlay";
+                break;
+            case "pause":
+                trackEvent = "custEv_podcastPause";
+                break;
+            case "progress":
+                trackEvent = "custEv_podcastProgress";
+                break;
+            default:
+                trackEvent = null;
+        }
+
+        if (!trackEvent) {
+            return;
+        }
+
+        track(event.target!, trackEvent, {
+            media_name: this.title,
+            media_action: action,
+            media_episode: this.href,
+            media_percentage_played: percentagePlayed,
+            media_seconds_played: timePlayed,
+            media_type: "podcast"
+        });
+
+        if (Math.trunc(percentagePlayed) === 25) {
+            this.progressPodcastPlayed.percent25 = true;
+        } else if (Math.trunc(percentagePlayed) === 50) {
+            this.progressPodcastPlayed.percent50 = true;
+        } else if (Math.trunc(percentagePlayed) === 75) {
+            this.progressPodcastPlayed.percent75 = true;
+        } else if (Math.trunc(percentagePlayed) === 100) {
+            this.progressPodcastPlayed.percent100 = true;
+        }
+    }
+
+    private handlePlayerState(player: HTMLAudioElement) {
+        let timePlayed = 0;
+        let percentagePlayed = 0;
+        if (player) {
+            timePlayed = player.currentTime / 1000;
+            percentagePlayed = Math.trunc(
+                (player.currentTime * 100) / player.duration
+            );
+        }
+        return { timePlayed, percentagePlayed };
+    }
 }

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 {
@@ -402,4 +407,8 @@ footer.signup-variant-no-signup {
     .subscription dx-input {
         width: 100%;
     }
+
+    .term-icon {
+        margin-left: 0;
+    }
 }

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>