@salesforcedevs/dx-components 0.53.7 → 0.53.10

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.53.7",
+    "version": "0.53.10",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -28,5 +28,5 @@
         "@types/lodash.get": "^4.4.6",
         "@types/vimeo__player": "^2.16.2"
     },
-    "gitHead": "eca2efeba5b98d28ebf91bdd2c411c3995c49bdf"
+    "gitHead": "4c4e059fbd82f79db3c02c69e69d2fabc0035390"
 }

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

@@ -28,7 +28,7 @@ export default class CardCallout extends LightningElement {
     }
 
     private sendGtm(e: PointerEvent) {
-        track(e.currentTarget, "select_content", {
+        track(e.currentTarget, "custEv_ctaLinkClick", {
             content_type: "callout",
             item_title: this.title,
             item_location: this.href

package/src/modules/dx/contentArchive/contentArchive.css

@@ -235,10 +235,6 @@ dx-filter-menu {
         margin-left: 62px;
     }
 
-    .empty-state-container {
-        height: 350px;
-    }
-
     .results-heading {
         font-size: 32px;
         margin-top: 42px;

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

@@ -21,6 +21,7 @@
         >
             <template for:each={options} for:item="option">
                 <dx-dropdown-option
+                    suppress-gtm-nav-headings={suppressGtmNavHeadings}
                     analytics-event={analyticsEvent}
                     active={option.active}
                     key-value={option.keyValue}
@@ -40,6 +41,7 @@
                     <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}
                             active={suboption.active}
                             key={suboption.id}

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

@@ -18,6 +18,7 @@ export default class Dropdown extends LightningElement {
     @api value: string | null = null; // "active option" id
     @api valuePath: string = "id"; // path to match for the active value (useful for url matching)
     @api stayOpenAfterChange?: boolean = false;
+    @api suppressGtmNavHeadings?: boolean = false;
 
     // props forwarded to popover:
     @api ariaLabel: string | null = null;

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

@@ -5,6 +5,7 @@ import { track } from "dx/instrumentation";
 
 export default class DropdownOption extends LightningElement {
     @api option!: Option;
+    @api suppressGtmNavHeadings: boolean = false;
     @api keyValue!: string;
     @api active: boolean = false;
     @api navItemLabel: String | null = null;
@@ -27,13 +28,7 @@ export default class DropdownOption extends LightningElement {
             new CustomEvent("select", { detail: this.keyValue })
         );
 
-        const navHeading = this.navItemLabel || this.option.label || undefined;
-        const navSubHeading =
-            (this.navItemLabel ? this.option.label : undefined) || undefined;
-
         const payload: any = {
-            navHeading,
-            navSubHeading,
             clickText: this.keyValue || undefined,
             pageLocation: window.location.pathname || undefined,
             elementType: "dropdown",
@@ -43,6 +38,15 @@ export default class DropdownOption extends LightningElement {
             clickUrl: e.target?.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;
+        }
+
         if (this.analyticsEvent && e.currentTarget) {
             track(e.currentTarget, this.analyticsEvent, payload);
         }

package/src/modules/dx/featuredContentHeader/featuredContentHeader.html

@@ -1,31 +1,42 @@
 <template>
     <div class={classname} part="container">
-        <div
-            if:true={label}
-            role={labelRole}
-            aria-level={labelAriaLevel}
-            class="label dx-text-heading-4"
-        >
-            {label}
-        </div>
+        <template if:true={labelAsPrimaryHeading}>
+            <h1 if:true={label} class="label dx-text-heading-4">{label}</h1>
+        </template>
+        <template if:false={labelAsPrimaryHeading}>
+            <p if:true={label} class="label dx-text-heading-4">{label}</p>
+        </template>
         <div class="featured-content-main-content">
-            <div
-                role="heading"
-                aria-level={titleAriaLevel}
-                class="title dx-text-heading-2"
-            >
-                <a
-                    class="title-link"
-                    if:true={href}
-                    href={href}
-                    target={target}
-                    onmouseenter={setLinkHovered}
-                    onmouseleave={setLinkInactive}
-                >
-                    {title}
-                </a>
-                <template if:false={href}>{title}</template>
-            </div>
+            <template if:false={labelAsPrimaryHeading}>
+                <h1 class="title dx-text-heading-2">
+                    <a
+                        class="title-link"
+                        if:true={href}
+                        href={href}
+                        target={target}
+                        onmouseenter={setLinkHovered}
+                        onmouseleave={setLinkInactive}
+                    >
+                        {title}
+                    </a>
+                    <template if:false={href}>{title}</template>
+                </h1>
+            </template>
+            <template if:true={labelAsPrimaryHeading}>
+                <h2 class="title dx-text-heading-2">
+                    <a
+                        class="title-link"
+                        if:true={href}
+                        href={href}
+                        target={target}
+                        onmouseenter={setLinkHovered}
+                        onmouseleave={setLinkInactive}
+                    >
+                        {title}
+                    </a>
+                    <template if:false={href}>{title}</template>
+                </h2>
+            </template>
             <div class="authors" if:true={authors}>
                 <template for:each={authors} for:item="author">
                     <dx-image-and-label

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

@@ -73,18 +73,6 @@ export default class FeaturedContentHeader extends LightningElement {
         );
     }
 
-    private get labelRole(): string | null {
-        return this.labelAsPrimaryHeading ? "heading" : null;
-    }
-
-    private get labelAriaLevel(): string | null {
-        return this.labelAsPrimaryHeading ? "1" : null;
-    }
-
-    private get titleAriaLevel(): string {
-        return this.labelAsPrimaryHeading ? "2" : "1";
-    }
-
     private setLinkHovered() {
         this.isLinkHovered = true;
     }