@salesforcedevs/dx-components 1.3.145 → 1.3.147

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.145",
+    "version": "1.3.147",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -40,5 +40,5 @@
         "eventsourcemock": "^2.0.0",
         "luxon": "^3.1.0"
     },
-    "gitHead": "acbb843c07604405a11ac39c1eba9331901e248f"
+    "gitHead": "c046874452685c28208a52392b494ad791c3f305"
 }

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

@@ -23,7 +23,7 @@ export default class CardBlogPost extends LightningElement {
     private onLinkClick(event: Event) {
         const payload = {
             click_text: this.title,
-            click_url: this.href,
+            click_url: `${window.location.origin}${this.href}`,
             element_title: this.title,
             element_type: "card",
             content_category: "link"

package/src/modules/dx/cardCallout/cardCallout.ts

@@ -32,7 +32,7 @@ export default class CardCallout extends LightningElement {
     private sendGtm(e: PointerEvent) {
         track(e.currentTarget!, "custEv_ctaLinkClick", {
             click_text: this.title,
-            click_url: this.href,
+            click_url: `${window.location.origin}${this.href}`,
             element_title: this.title,
             element_type: "link",
             content_category: "cta"

package/src/modules/dx/cardDocs/cardDocs.ts

@@ -39,13 +39,13 @@ export default class CardDocs extends LightningElement {
                     ...payloadInnerButton,
                     element_title: this.title,
                     click_text: slotElement.innerText,
-                    click_url: slotElement.href
+                    click_url: `${window.location.origin}${slotElement.href}`
                 });
                 track(event.currentTarget!, "custEv_linkClick", {
                     ...payloadInnerButton,
                     element_title: this.title,
                     click_text: slotElement.innerText,
-                    click_url: slotElement.href
+                    click_url: `${window.location.origin}${slotElement.href}`
                 });
             });
         });
@@ -56,7 +56,7 @@ export default class CardDocs extends LightningElement {
         const payloadCardInfo = {
             click_text: this.title,
             element_title: this.title,
-            click_url: this.href,
+            click_url: `${window.location.origin}${this.href}`,
             element_type: "link",
             content_category: "cta"
         };
@@ -68,7 +68,7 @@ export default class CardDocs extends LightningElement {
         const payloadCardTextInfo = {
             click_text: this.body,
             element_title: this.title,
-            click_url: this.href,
+            click_url: `${window.location.origin}${this.href}`,
             element_type: "tile",
             content_category: "cta"
         };

package/src/modules/dx/cardNews/cardNews.ts

@@ -67,7 +67,9 @@ export default class CardNews extends LightningElement {
     private trackClick(e: Event) {
         const payload = {
             click_text: this.buttonText,
-            click_url: this.href,
+            click_url: this.href.includes("http")
+                ? this.href
+                : `${window.location.origin}${this.href}`,
             element_title: this.title,
             element_type: "link",
             content_category: "cta"

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

@@ -119,7 +119,7 @@ export default class CardTrial extends LightningElement {
             click_text: this.label,
             element_title: "dx-button",
             element_type: "card",
-            click_url: this.href,
+            click_url: `${window.location.origin}${this.href}`,
             content_category: "cta"
         };
         track(e.currentTarget!, "custEv_signupStart", payload);

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

@@ -74,7 +74,7 @@ export default class CardTrial extends LightningElement {
                 click_text: this.buttonCta,
                 element_title: this.title,
                 element_type: "card",
-                click_url: this.href,
+                click_url: `${window.location.origin}${this.href}`,
                 content_category: "cta"
             };
             track(e.currentTarget!, "custEv_signupStart", payload);

package/src/modules/dx/faq/faq.css

@@ -16,10 +16,6 @@ details summary > * {
     display: inline;
 }
 
-details[open] summary ~ * {
-    animation: sweep 0.5s ease-in-out;
-}
-
 /* hide '-' when collapsed & '+' when expanded */
 details > summary > .expanded,
 details[open] > summary > .collapsed {
@@ -52,15 +48,3 @@ details:not(:first-of-type) {
 .faq-body {
     margin: var(--dx-g-spacing-lg) 0;
 }
-
-@keyframes sweep {
-    0% {
-        opacity: 0;
-        transform: translateX(-10px);
-    }
-
-    100% {
-        opacity: 1;
-        transform: translateX(0);
-    }
-}

package/src/modules/dx/featuresListHeader/featuresListHeader.ts

@@ -42,7 +42,7 @@ export default class FeaturesListHeader extends LightningElement {
         if (e.currentTarget) {
             track(e.currentTarget, "custEv_ctaButtonClick", {
                 click_text: this.ctaLabel,
-                click_url: this.ctaHref,
+                click_url: `${window.location.origin}${this.ctaHref}`,
                 element_type: "button",
                 element_title: this.title,
                 content_category: "cta"
@@ -50,7 +50,7 @@ export default class FeaturesListHeader extends LightningElement {
             track(e.currentTarget!, "custEv_linkClick", {
                 click_text: this.ctaLabel,
                 element_title: this.title,
-                click_url: this.ctaHref,
+                click_url: `${window.location.origin}${this.ctaHref}`,
                 element_type: "link",
                 content_category: "cta"
             });
@@ -61,7 +61,7 @@ export default class FeaturesListHeader extends LightningElement {
         if (e.currentTarget) {
             track(e.currentTarget, "custEv_ctaButtonClick", {
                 click_text: this.ctaLabelSecondary,
-                click_url: this.ctaHrefSecondary,
+                click_url: `${window.location.origin}${this.ctaHrefSecondary}`,
                 element_type: "button",
                 element_title: this.title,
                 content_category: "cta"
@@ -69,7 +69,7 @@ export default class FeaturesListHeader extends LightningElement {
             track(e.currentTarget!, "custEv_linkClick", {
                 click_text: this.ctaLabelSecondary,
                 element_title: this.title,
-                click_url: this.ctaHrefSecondary,
+                click_url: `${window.location.origin}${this.ctaHrefSecondary}`,
                 element_type: "link",
                 content_category: "cta"
             });

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

@@ -7,8 +7,10 @@
             <div class="graphic graphic-trees" alt=""></div>
             <div class="graphic graphic-mountains" alt=""></div>
             <div class="graphic graphic-mountains-mobile" alt=""></div>
-            <span class="subheading">Sign up for developer updates</span>
-            <dx-button href="/newsletter">SIGN UP</dx-button>
+            <span class="subheading">{signupLabel}</span>
+            <dx-button onclick={handleSignup} href={signupPath}>
+                SIGN UP
+            </dx-button>
             <div class="graphic graphic-trees-small" alt=""></div>
         </div>
         <div
@@ -18,11 +20,15 @@
             <div class="graphic graphic-large" alt=""></div>
             <div class="subscription">
                 <h2 class="dx-text-display-4">
-                    Get timely developer updates
-                    <br />
-                    delivered to your inbox.
+                    <dx-formatted-rich-text
+                        value={signupLabel}
+                    ></dx-formatted-rich-text>
                 </h2>
-                <dx-button href="/newsletter" size="large">
+                <dx-button
+                    onclick={handleSignup}
+                    href={signupPath}
+                    size="large"
+                >
                     Sign up now
                 </dx-button>
             </div>

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

@@ -8,6 +8,7 @@ import {
     socialLinks,
     intellectualHref
 } from "./links";
+import { track } from "dxUtils/analytics";
 
 export default class Footer extends LightningElement {
     @api locale: string | null = null;
@@ -35,6 +36,7 @@ export default class Footer extends LightningElement {
     private intellectualHref = intellectualHref;
     private socialLinks = socialLinks;
     private termsLinks = termsLinks;
+    private signupPath = "/newsletter";
 
     @api
     set variant(value: FooterVariant) {
@@ -80,6 +82,12 @@ export default class Footer extends LightningElement {
         return date.getFullYear();
     }
 
+    get signupLabel(): string {
+        return this.showLargeSignup
+            ? "Get timely developer updates<br />delivered to your inbox."
+            : "Sign up for developer updates";
+    }
+
     get className() {
         return cx(`signup-variant-${this.variant}`);
     }
@@ -98,4 +106,16 @@ export default class Footer extends LightningElement {
             "terms-only"
         ].includes(value);
     }
+
+    private handleSignup(e: Event) {
+        track(e.currentTarget, "custEv_ctaButtonClick", {
+            click_text: this.signupLabel,
+            click_url: `${window.location.origin}${this.signupPath}`,
+            element_type: "button",
+            element_title: this.showSmallSignup
+                ? "Get Developer Updates"
+                : "get the latest developer updates.",
+            content_category: "cta"
+        });
+    }
 }

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

@@ -11,7 +11,10 @@ export default class FooterOption extends LightningElement {
     sendGtm(e: PointerEvent) {
         track(e.currentTarget, "custEv_bottomNavLinkClick", {
             click_text: this.label || undefined,
-            click_url: this.href || undefined,
+            click_url:
+                (this.href && this.href.includes("http")
+                    ? this.href
+                    : `${window.location.origin}${this.href}`) || undefined,
             nav_item: this.label || undefined,
             nav_level: "1",
             element_type: "link",
@@ -20,7 +23,10 @@ export default class FooterOption extends LightningElement {
         track(e.currentTarget!, "custEv_linkClick", {
             click_text: this.label,
             element_title: this.generalLabel,
-            click_url: this.href,
+            click_url:
+                (this.href && this.href.includes("http")
+                    ? this.href
+                    : `${window.location.origin}${this.href}`) || undefined,
             element_type: "link",
             content_category: "cta"
         });

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

@@ -87,7 +87,11 @@ export default class GroupText extends LightningElement {
         track(event.target!, "custEv_ctaButtonClick", {
             click_text: event.currentTarget.innerText,
             item_title: event.currentTarget.innerText,
-            click_url: event.currentTarget.href,
+            click_url: `${
+                event.currentTarget.href.includes("http")
+                    ? event.currentTarget.href
+                    : window.location.origin + event.currentTarget.href
+            }`,
             element_type: "button",
             element_title: this.title,
             content_category: "cta"

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

@@ -39,7 +39,9 @@ export default class MainContentHeader extends LightningElement {
         if (e.currentTarget) {
             track(e.currentTarget, "custEv_ctaButtonClick", {
                 click_text: this.ctaLabel,
-                click_url: this.ctaHref,
+                click_url: this.ctaHref.includes("http")
+                    ? this.ctaHref
+                    : `${window.location.origin}${this.ctaHref}`,
                 element_type: "button",
                 element_title: this.title,
                 content_category: "cta"
@@ -47,7 +49,9 @@ export default class MainContentHeader extends LightningElement {
             track(e.currentTarget!, "custEv_linkClick", {
                 click_text: this.ctaLabel,
                 element_title: this.title,
-                click_url: this.ctaHref,
+                click_url: this.ctaHref.includes("http")
+                    ? this.ctaHref
+                    : `${window.location.origin}${this.ctaHref}`,
                 element_type: "link",
                 content_category: "cta"
             });
@@ -58,7 +62,9 @@ export default class MainContentHeader extends LightningElement {
         if (e.currentTarget) {
             track(e.currentTarget, "custEv_ctaButtonClick", {
                 click_text: this.ctaLabelSecondary,
-                click_url: this.ctaHrefSecondary,
+                click_url: this.ctaHrefSecondary!.includes("http")
+                    ? this.ctaHrefSecondary
+                    : `${window.location.origin}${this.ctaHrefSecondary}`,
                 element_type: "button",
                 element_title: this.title,
                 content_category: "cta"
@@ -66,7 +72,9 @@ export default class MainContentHeader extends LightningElement {
             track(e.currentTarget!, "custEv_linkClick", {
                 click_text: this.ctaLabelSecondary,
                 element_title: this.title,
-                click_url: this.ctaHrefSecondary,
+                click_url: this.ctaHrefSecondary!.includes("http")
+                    ? this.ctaHrefSecondary
+                    : `${window.location.origin}${this.ctaHrefSecondary}`,
                 element_type: "link",
                 content_category: "cta"
             });

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

@@ -37,6 +37,7 @@
                 variant={ctaBtnVariant}
                 icon-symbol={ctaBtnSymbol}
                 target={ctaBtnTarget}
+                onclick={handleLabelClick}
             >
                 {ctaLabel}
             </dx-button>

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

@@ -1,6 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { toDxColor } from "dxUtils/css";
+import { track } from "dxUtils/analytics";
 
 export default class Section extends LightningElement {
     @api backgroundColor: string = "transparent";
@@ -48,4 +49,16 @@ export default class Section extends LightningElement {
     private get hasText(): boolean {
         return !!(this.title || this.label || this.subtitle);
     }
+
+    private handleLabelClick(e: Event) {
+        track(e.target!, "custEv_ctaLinkClick", {
+            click_text: this.ctaLabel,
+            element_title: this.title,
+            click_url: this.ctaHref!.includes("http")
+                ? this.ctaHref
+                : `${window.location.origin}${this.ctaHref}`,
+            element_type: "link",
+            content_category: "cta"
+        });
+    }
 }

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

@@ -53,7 +53,7 @@ export default class Toc extends LightningElement {
         sendGtm(e.currentTarget!, "custEv_tableOfContents", {
             click_text: text,
             clickAction: "click",
-            click_url: href,
+            click_url: `${window.location.href}${href}`,
             element_title: this.title,
             element_type: "link",
             content_category: "cta"

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

@@ -174,7 +174,10 @@ export default class TreeItem extends LightningElement {
     private sendGtm(event: Event) {
         track(event.currentTarget!, "custEv_leftNavLinkClick", {
             click_text: this._treeNode.label,
-            click_url: this.href,
+            click_url: this.href!.includes("/docs/")
+                ? `${window.location.origin}${this.href}`
+                : // TODO: this is a hack to get the correct url for the left nav
+                  window.location.href.replace(/[^/]+$/, this.href!),
             nav_level: this._treeNode.level + 1,
             nav_item: this.treeLabels,
             nav_type: "left nav bar",
@@ -184,7 +187,10 @@ export default class TreeItem extends LightningElement {
         track(event.currentTarget!, "custEv_linkClick", {
             click_text: this._treeNode.label,
             element_title: this.rootParentLabel,
-            click_url: this.href,
+            click_url: this.href!.includes("/docs/")
+                ? `${window.location.origin}${this.href}`
+                : // TODO: this is a hack to get the correct url for the left nav
+                  window.location.href.replace(/[^/]+$/, this.href!),
             element_type: "link",
             content_category: "cta"
         });