@salesforcedevs/dx-components 1.3.85 → 1.3.88

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.85",
+    "version": "1.3.88",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -40,5 +40,5 @@
         "eventsourcemock": "^2.0.0",
         "luxon": "^3.1.0"
     },
-    "gitHead": "6b738627c2fefd4e639f1def42cdc4d4a44c7171"
+    "gitHead": "0fd9edba15fb1e8120046a70384598e805388237"
 }

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

@@ -30,13 +30,6 @@ export default class CardCallout extends LightningElement {
     }
 
     private sendGtm(e: PointerEvent) {
-        track(e.currentTarget, ANALYTICS_EVENT_NAME, {
-            clickURL: this.href,
-            itemTitle: this.title,
-            clickText: this.label,
-            elementType: "card callout",
-            destinationType: "internal"
-        });
         track(e.currentTarget!, "custEv_ctaLinkClick", {
             click_text: this.title,
             click_url: this.href,

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

@@ -33,17 +33,17 @@ export default class CardDocs extends LightningElement {
         // @ts-ignore
         const slot = e.target;
         const elements = slot.assignedElements();
-        elements.forEach((slotElement) => {
+        elements.forEach((slotElement: any) => {
             slotElement?.addEventListener("click", (event: Event) => {
                 track(event.currentTarget!, "custEv_cardClick", {
                     ...payloadInnerButton,
-                    element_title: slotElement.innerText,
+                    element_title: this.title,
                     click_text: slotElement.innerText,
                     click_url: slotElement.href
                 });
                 track(event.currentTarget!, "custEv_linkClick", {
                     ...payloadInnerButton,
-                    element_title: slotElement.innerText,
+                    element_title: this.title,
                     click_text: slotElement.innerText,
                     click_url: slotElement.href
                 });
@@ -67,7 +67,7 @@ export default class CardDocs extends LightningElement {
     private handleTextClick(event: PointerEvent) {
         const payloadCardTextInfo = {
             click_text: this.body,
-            element_title: this.body,
+            element_title: this.title,
             click_url: this.href,
             element_type: "tile",
             content_category: "cta"

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

@@ -66,12 +66,11 @@ export default class CardNews extends LightningElement {
 
     private trackClick(e: Event) {
         const payload = {
-            clickText: this.buttonText,
-            itemTitle: this.title,
-            elementType: "link",
-            destinationType: "internal",
-            ctaClick: true,
-            clickUrl: this.href
+            click_text: this.buttonText,
+            click_url: this.href,
+            element_title: this.title,
+            element_type: "link",
+            content_category: "cta"
         };
         track(e.currentTarget!, "custEv_ctaLinkClick", payload);
         track(e.currentTarget!, "custEv_linkClick", payload);

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

@@ -72,7 +72,7 @@ export default class CardTrial extends LightningElement {
         if (this.href.includes("signup")) {
             const payload = {
                 click_text: this.buttonCta,
-                element_title: "dx-button",
+                element_title: this.title,
                 element_type: "card",
                 click_url: this.href,
                 content_category: "cta"

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

@@ -36,7 +36,7 @@ export default class Feature extends LightningElement {
     handleClick(event: Event) {
         const payload = {
             click_text: this.buttonLabel,
-            element_title: "dx-button",
+            element_title: this.title,
             click_url: this.buttonHref,
             element_type: "button",
             content_category: "cta"

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

@@ -104,7 +104,9 @@ export default class Footer extends LightningElement {
             click_text: this.inputSubmitLabel,
             click_url: PATH,
             element_type: "button",
-            element_title: "dx-footer",
+            element_title: this.showSmallSignup
+                ? "Get Developer Updates"
+                : "get the latest developer updates.",
             content_category: "cta"
         });
 

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

@@ -13,13 +13,13 @@ export default class FooterOption extends LightningElement {
             click_text: this.label || undefined,
             click_url: this.href || undefined,
             nav_item: this.label || undefined,
-            nav_level: "2",
+            nav_level: "1",
             element_type: "link",
             nav_type: "footer"
         });
         track(e.currentTarget!, "custEv_linkClick", {
             click_text: this.label,
-            element_title: this.label,
+            element_title: this.generalLabel,
             click_url: this.href,
             element_type: "link",
             content_category: "cta"

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

@@ -89,7 +89,7 @@ export default class GroupText extends LightningElement {
             item_title: event.currentTarget.innerText,
             click_url: event.currentTarget.href,
             element_type: "button",
-            element_title: "dx-group-text",
+            element_title: this.title,
             content_category: "cta"
         });
     }

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

@@ -41,12 +41,12 @@ export default class MainContentHeader extends LightningElement {
                 click_text: this.ctaLabel,
                 click_url: this.ctaHref,
                 element_type: "button",
-                element_title: this.ctaLabel,
+                element_title: this.title,
                 content_category: "cta"
             });
             track(e.currentTarget!, "custEv_linkClick", {
                 click_text: this.ctaLabel,
-                element_title: this.ctaLabel,
+                element_title: this.title,
                 click_url: this.ctaHref,
                 element_type: "link",
                 content_category: "cta"
@@ -60,12 +60,12 @@ export default class MainContentHeader extends LightningElement {
                 click_text: this.ctaLabelSecondary,
                 click_url: this.ctaHrefSecondary,
                 element_type: "button",
-                element_title: this.ctaLabelSecondary,
+                element_title: this.title,
                 content_category: "cta"
             });
             track(e.currentTarget!, "custEv_linkClick", {
                 click_text: this.ctaLabelSecondary,
-                element_title: this.ctaLabelSecondary,
+                element_title: this.title,
                 click_url: this.ctaHrefSecondary,
                 element_type: "link",
                 content_category: "cta"

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

@@ -29,9 +29,7 @@
         <div part="text" class="text" if:true={hasText}>
             <span class="label dx-text-display-8" if:true={label}>{label}</span>
             <h2 class={headingClassName} if:true={title}>{title}</h2>
-            <span class="subtitle dx-text-body-1" if:true={subtitle}>
-                {subtitle}
-            </span>
+            <span class={subtitleClassName} if:true={subtitle}>{subtitle}</span>
             <dx-button
                 class="cta"
                 if:true={ctaLabel}

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

@@ -8,6 +8,7 @@ export default class Section extends LightningElement {
     @api headingLevel: "1" | "2" | "3" | "4" | "5" | "custom" = "3";
     @api label?: string;
     @api subtitle?: string;
+    @api subtitleLevel?: "1" | "2" | "3" | "4" = "1";
     @api textAlign: "center" | "left" = "left";
     @api title?: string;
     @api ctaLabel?: string;
@@ -36,6 +37,10 @@ export default class Section extends LightningElement {
         );
     }
 
+    private get subtitleClassName() {
+        return cx("subtitle", `dx-text-body-${this.subtitleLevel}`);
+    }
+
     private get headingClassName() {
         return cx("heading", `dx-text-display-${this.headingLevel}`);
     }

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

@@ -1,18 +1,12 @@
 import cx from "classnames";
 import { api, track } from "lwc";
-import {
-    TreeNode,
-    SidebarGtmAction,
-    SidebarSearchResult
-} from "typings/custom";
-import { track as trackAnalytics } from "dxUtils/analytics";
+import { TreeNode, SidebarSearchResult } from "typings/custom";
 import { getSidebarSearchParams } from "dxUtils/coveo";
 import { toJson } from "dxUtils/normalizers";
 import SidebarSearch from "dx/sidebarSearch";
 import { SidebarBase } from "dxBaseElements/sidebarBase";
 
 const MOBILE_SIZE_MATCH = "768px";
-const TOGGLE_BUTTON_LABEL = "Toggle Sidebar";
 
 export default class Sidebar extends SidebarBase {
     @api coveoOrganizationId!: string;
@@ -51,9 +45,11 @@ export default class Sidebar extends SidebarBase {
 
     @api
     setInputValue(searchTerm: string) {
-        ((this.template.querySelector(
-            "dx-sidebar-search"
-        ) as unknown) as SidebarSearch)?.setInputValue(searchTerm);
+        (
+            this.template.querySelector(
+                "dx-sidebar-search"
+            ) as unknown as SidebarSearch
+        )?.setInputValue(searchTerm);
     }
 
     private expanded: boolean = true;
@@ -169,16 +165,9 @@ export default class Sidebar extends SidebarBase {
         this._value = event.detail.name;
     }
 
-    private onToggleClick(event: Event) {
+    private onToggleClick() {
         this.expanded = !this.expanded;
         this._toggleHovered = false;
-        const sideNavAction: SidebarGtmAction = this.expanded
-            ? "expand"
-            : "collapse";
-        trackAnalytics(event.currentTarget!, "custEv_leftNavLinkClick", {
-            sideNavAction,
-            clickText: TOGGLE_BUTTON_LABEL
-        });
     }
 
     private onToggleMouseEnter() {
@@ -213,9 +202,9 @@ export default class Sidebar extends SidebarBase {
             return;
         }
 
-        const search = (this.template.querySelector(
+        const search = this.template.querySelector(
             "dx-sidebar-search"
-        ) as unknown) as SidebarSearch;
+        ) as unknown as SidebarSearch;
 
         if (
             this.isNearBottomOfSearchResults &&

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

@@ -1,14 +1,12 @@
 import cx from "classnames";
-import { track } from "dxUtils/analytics";
 import { api } from "lwc";
 
-import { TreeNode, SidebarGtmAction } from "typings/custom";
+import { TreeNode } from "typings/custom";
 import { toJson } from "dxUtils/normalizers";
 import { SidebarBase } from "dxBaseElements/sidebarBase";
 
 const WAIT_TIME = 500;
 const MOBILE_SIZE_MATCH = "768px";
-const TOGGLE_BUTTON_LABEL = "Toggle Sidebar";
 
 export default class Sidebar extends SidebarBase {
     @api header: string = "";
@@ -97,16 +95,9 @@ export default class Sidebar extends SidebarBase {
         this._value = event.detail.name;
     }
 
-    private onToggleClick(event: Event) {
+    private onToggleClick() {
         this.expanded = !this.expanded;
         this._toggleHovered = false;
-        const sideNavAction: SidebarGtmAction = this.expanded
-            ? "expand"
-            : "collapse";
-        track(event.currentTarget!, "custEv_leftNavLinkClick", {
-            sideNavAction,
-            clickText: TOGGLE_BUTTON_LABEL
-        });
     }
 
     private onToggleMouseEnter() {

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

@@ -79,7 +79,7 @@ export default class Toc extends LightningElement {
             click_text: text,
             clickAction: "click",
             click_url: href,
-            element_title: text,
+            element_title: this.title,
             element_type: "link",
             content_category: "cta"
         });
@@ -99,7 +99,7 @@ export default class Toc extends LightningElement {
             click_text: this.toggleButtonAriaLabel,
             clickAction: action,
             click_url: "",
-            element_title: this.toggleButtonAriaLabel,
+            element_title: this.title,
             element_type: "button",
             content_category: "cta"
         });

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

@@ -24,7 +24,6 @@
                 key={child.key}
                 tree-node={child}
                 selected-key={selectedKey}
-                parent-name={treeNode.label}
             ></dx-tree-item>
         </template>
     </template>

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

@@ -8,7 +8,6 @@ const DEFAULT_TARGET = "_self";
 export default class TreeItem extends LightningElement {
     @api selectedKey?: string;
     @api isRoot: boolean = false;
-    @api parentName?: string = "";
 
     @api
     public get treeNode() {
@@ -24,6 +23,7 @@ export default class TreeItem extends LightningElement {
     private _treeNode!: InternalTreeNode;
     private isExpanded: boolean = false;
     private isChildrenLoading: boolean = false;
+    private rootParentLabel: string = "";
 
     private get isSelected(): boolean {
         return this._treeNode.key === this.selectedKey;
@@ -49,6 +49,32 @@ export default class TreeItem extends LightningElement {
         return this.isExpanded && this.hasChildren;
     }
 
+    private get treeLabels(): string {
+        let parentEl = this.template
+            .querySelector("dx-tree-tile")
+            ?.getRootNode().host;
+
+        if (!parentEl) {
+            return "";
+        }
+
+        const parentLabels = [];
+
+        while (parentEl) {
+            parentEl = parentEl?.getRootNode()?.host;
+
+            if (parentEl && parentEl.treeNode) {
+                parentLabels.push(parentEl.treeNode.label);
+            }
+        }
+
+        if (parentEl?.isRoot) {
+            this.rootParentLabel = parentEl.treeNode.label;
+        }
+
+        return `${parentLabels.reverse().join(":")}:${this.treeNode.label}`;
+    }
+
     private get href(): string | undefined {
         return (
             (this._treeNode.link && this._treeNode.link.href) ||
@@ -150,14 +176,14 @@ export default class TreeItem extends LightningElement {
             click_text: this._treeNode.label,
             click_url: this.href,
             nav_level: this._treeNode.level + 1,
-            nav_item: `${this.parentName}:${this._treeNode.label}`,
+            nav_item: this.treeLabels,
             nav_type: "left nav bar",
             element_type: "link"
         });
 
         track(event.currentTarget!, "custEv_linkClick", {
             click_text: this._treeNode.label,
-            element_title: this._treeNode.label,
+            element_title: this.rootParentLabel,
             click_url: this.href,
             element_type: "link",
             content_category: "cta"

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

@@ -22,7 +22,6 @@ const VALID_BRANDS = [
 
 export const ANALYTICS_INFO = {
     click_text: "browse trials",
-    element_title: "browse trials",
     element_type: "button",
     content_category: "cta"
 };
@@ -204,7 +203,8 @@ export abstract class HeaderBase extends LightningElement {
     private handleSignUpClick(e: PointerEvent) {
         const payload = {
             ...ANALYTICS_INFO,
-            click_url: this.signupLink
+            click_url: this.signupLink,
+            element_title: this.title
         };
 
         track(e.currentTarget!, "custEv_browseTrialsClick", payload);