@salesforcedevs/docs-components 0.56.2 → 0.57.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "0.56.2",
+    "version": "0.57.0",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
@@ -24,5 +24,5 @@
         "@types/lodash.orderby": "^4.6.7",
         "@types/lodash.uniqby": "^4.7.7"
     },
-    "gitHead": "47b838f7aa4fb0c55349f98074753103b693851f"
+    "gitHead": "ec519d645639c13fab52eb62663930901f66b2fe"
 }

package/src/modules/doc/breadcrumbItem/breadcrumbItem.html

@@ -1,5 +1,5 @@
 <template>
     <dx-icon if:true={isBackArrowVariant} symbol="back"></dx-icon>
-    <a if:true={href} href={href}>{label}</a>
+    <a if:true={href} href={href} onclick={onLinkClick}>{label}</a>
     <span if:false={href}>{label}</span>
 </template>

package/src/modules/doc/breadcrumbItem/breadcrumbItem.ts

@@ -1,5 +1,6 @@
+import { track } from "dxUtils/analytics";
 import { LightningElement, api } from "lwc";
-import { BreadcrumbItemVariant } from "typings/custom";
+import { AnalyticsPayload, BreadcrumbItemVariant } from "typings/custom";
 
 const BREADCRUMB_LONG = "breadcrumb_long";
 const BREADCRUMB_BACK_ARROW = "breadcrumb_back-arrow";
@@ -7,6 +8,8 @@ const BREADCRUMB_BACK_ARROW = "breadcrumb_back-arrow";
 const LONG_LABEL_NUMBER = 30;
 export default class BreadcrumbItem extends LightningElement {
     @api href?: string;
+    @api analyticsEvent!: string;
+    @api analyticsBasePayload!: AnalyticsPayload;
 
     @api
     get label() {
@@ -46,4 +49,17 @@ export default class BreadcrumbItem extends LightningElement {
     private get isBackArrowVariant(): boolean {
         return this._variant === "back-arrow";
     }
+
+    private onLinkClick(event: Event): void {
+        if (!this.analyticsEvent) {
+            return;
+        }
+
+        track(event.target!, this.analyticsEvent, {
+            ...this.analyticsBasePayload,
+            clickText: this.label,
+            itemTitle: this.label,
+            pageLocation: window.location.pathname
+        });
+    }
 }

package/src/modules/doc/breadcrumbs/breadcrumbs.css

@@ -9,7 +9,6 @@
 nav {
     display: flex;
     align-items: center;
-    height: 100%;
     position: relative;
     gap: var(--dx-g-spacing-sm);
 }
@@ -17,3 +16,10 @@ nav {
 .breadcrumb-item_slash {
     min-width: fit-content;
 }
+
+dx-dropdown {
+    --dx-c-dropdown-option-font-size: var(--dx-g-text-sm);
+    --dx-c-dropdown-option-label-color: var(
+        --dx-c-breadcrumbs-breadcrumb-color
+    );
+}

package/src/modules/doc/breadcrumbs/breadcrumbs.html

@@ -3,6 +3,8 @@
         <template if:false={renderSmallVariant}>
             <template if:true={renderFirstCrumb}>
                 <doc-breadcrumb-item
+                    analytics-event={analyticsEventName}
+                    analytics-base-payload={analyticsBasePayload}
                     href={firstCrumb.href}
                     label={firstCrumb.label}
                 ></doc-breadcrumb-item>
@@ -11,10 +13,14 @@
             <template if:true={renderDropdown}>
                 <dx-dropdown
                     if:true={renderDropdown}
+                    analytics-event={analyticsEventName}
+                    analytics-base-payload={analyticsBasePayload}
                     options={dropdownOptions}
                     open-on-hover
                     placement="bottom"
-                    width="200px"
+                    suppress-gtm-nav-headings
+                    variant="indented"
+                    width="fit-content"
                 >
                     <dx-button
                         aria-label="Open Breadcrumbs Dropdown"
@@ -27,6 +33,8 @@
             </template>
             <template for:each={breadcrumbItems} for:item="breadcrumb">
                 <doc-breadcrumb-item
+                    analytics-event={analyticsEventName}
+                    analytics-base-payload={analyticsBasePayload}
                     href={breadcrumb.href}
                     key={breadcrumb.label}
                     label={breadcrumb.label}
@@ -39,6 +47,8 @@
         </template>
         <template if:true={renderSmallVariant}>
             <doc-breadcrumb-item
+                analytics-event={analyticsEventName}
+                analytics-base-payload={analyticsBasePayload}
                 href={lastLinkCrump.href}
                 label={lastLinkCrump.label}
                 variant="back-arrow"

package/src/modules/doc/breadcrumbs/breadcrumbs.ts

@@ -15,6 +15,13 @@ const CONSTANTS = {
     dropdownWidth: 32
 };
 
+export const ANALYTICS_EVENT_NAME = "custEv_breadcrumbClick";
+export const ANALYTICS_BASE_PAYLOAD = {
+    elementType: "breadcrumb",
+    locationOnPage: "breadcrumb",
+    ctaClick: true
+};
+
 export default class Breadcrumbs extends LightningElement {
     @api ariaLabel: string = "Documentation Breadcrumbs";
 
@@ -84,6 +91,14 @@ export default class Breadcrumbs extends LightningElement {
         return this.breadcrumbs[this.breadcrumbs.length - 1];
     }
 
+    private get analyticsEventName() {
+        return ANALYTICS_EVENT_NAME;
+    }
+
+    private get analyticsBasePayload() {
+        return ANALYTICS_BASE_PAYLOAD;
+    }
+
     renderedCallback(): void {
         if (!this.observer) {
             this.observer = new ResizeObserver((entries) => {