@salesforcedevs/dx-components 1.3.84 → 1.3.86

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.84",
+    "version": "1.3.86",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -40,5 +40,5 @@
         "eventsourcemock": "^2.0.0",
         "luxon": "^3.1.0"
     },
-    "gitHead": "09b7aafdaf3a75bf49ecf7691fb51378e6a9c332"
+    "gitHead": "61133211828234c195a168b122293e153a40617b"
 }

package/src/modules/dx/cardCallout/cardCallout.css

@@ -16,7 +16,7 @@
 
 /* title */
 
-.dx-text-heading-3 {
+.dx-text-display-4 {
     color: inherit;
     margin-bottom: var(--dx-g-spacing-3xl);
     overflow-wrap: hyphenate-word;
@@ -51,7 +51,7 @@ dx-icon::part(svg) {
 }
 
 @media screen and (max-width: 1024px) {
-    .dx-text-heading-3 {
+    .dx-text-display-4 {
         margin-bottom: var(--dx-g-spacing-xl);
     }
 }

package/src/modules/dx/cardCallout/cardCallout.html

@@ -6,7 +6,7 @@
         style={style}
         onclick={sendGtm}
     >
-        <h3 class="dx-text-heading-3">{title}</h3>
+        <h3 class="dx-text-display-4">{title}</h3>
         <span class="dx-text-button-light">
             {label}
             <dx-icon symbol="forward"></dx-icon>

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.css

@@ -24,11 +24,11 @@
     flex-grow: 1;
 }
 
-.dx-text-heading-6 dx-button {
+.dx-text-display-8 dx-button {
     margin-left: var(--dx-g-spacing-xs);
 }
 
-.dx-text-heading-4 {
+.dx-text-display-6 {
     position: relative;
     -webkit-line-clamp: var(--dx-c-heading-max-lines);
     -webkit-box-orient: vertical;
@@ -36,7 +36,7 @@
     overflow: hidden;
 }
 
-.dx-text-heading-4 dx-icon {
+.dx-text-display-6 dx-icon {
     display: inline-block;
     transform: translateY(-3px);
 }

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/cardEvent/cardEvent.css

@@ -105,12 +105,7 @@ dx-formatted-date-time {
         display: none;
     }
 
-    .dx-text-heading-5 {
-        font-size: 18px;
-        line-height: 24px;
-    }
-
-    .dx-text-heading-4 {
+    .dx-text-display-6 {
         font-size: 24px;
         line-height: 28px;
     }

package/src/modules/dx/cardEvent/cardEvent.html

@@ -20,12 +20,12 @@
                 if:true={featured}
             >
                 <dx-formatted-date-time
-                    class="dx-text-heading-5 month"
+                    class="dx-text-display-8 month"
                     value={startDatetime}
                     month="short"
                 ></dx-formatted-date-time>
                 <dx-formatted-date-time
-                    class="dx-text-heading-1 day"
+                    class="dx-text-display-1b day"
                     value={startDatetime}
                     day="2-digit"
                 ></dx-formatted-date-time>

package/src/modules/dx/cardNews/cardNews.css

@@ -24,7 +24,7 @@
     z-index: 1;
 }
 
-.dx-text-heading-3 {
+.dx-text-display-4 {
     margin: 4px 0 4px 0;
     color: inherit;
 }
@@ -44,7 +44,7 @@ img {
     margin: 0;
 }
 
-.dx-card-size-large .dx-text-heading-3 {
+.dx-card-size-large .dx-text-display-4 {
     font-size: 30px;
     letter-spacing: 0.3px;
     line-height: 40px;
@@ -81,7 +81,7 @@ img {
         box-shadow: var(--dx-g-box-shadow-sm);
     }
 
-    .dx-text-heading-3 {
+    .dx-text-display-4 {
         letter-spacing: 0.1px;
     }
 
@@ -114,7 +114,7 @@ img {
         max-width: 50%;
     }
 
-    .dx-card-size-normal .dx-text-heading-3 {
+    .dx-card-size-normal .dx-text-display-4 {
         font-size: var(--dx-g-text-xl);
         line-height: 28px;
     }
@@ -128,7 +128,7 @@ img {
         margin: 14px 0 -2px 0;
     }
 
-    .dx-card-size-large .dx-text-heading-3 {
+    .dx-card-size-large .dx-text-display-4 {
         font-size: var(--dx-g-text-2xl);
         line-height: 40px;
         letter-spacing: 0.6px;

package/src/modules/dx/cardNews/cardNews.html

@@ -8,7 +8,7 @@
         part="container"
     >
         <div class={textContainerClassName}>
-            <h3 class="dx-text-heading-3">{title}</h3>
+            <h3 class="dx-text-display-4">{title}</h3>
             <p>{body}</p>
             <div class="cta">
                 <dx-button if:true={hasLargeButton} size="large">

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/cardTitle/cardTitle.css

@@ -9,7 +9,7 @@
     --dx-c-card-title-icon-size: 22px;
 }
 
-h3.dx-text-heading-4 {
+h3.dx-text-display-6 {
     color: var(--dx-c-card-title-color);
     transition: var(--dx-g-transition-hue-1x);
     font-size: var(--dx-c-card-title-font-size);
@@ -32,7 +32,7 @@ dx-icon {
 }
 
 @media screen and (max-width: 1024px) {
-    .dx-text-heading-4 {
+    .dx-text-display-6 {
         font-size: 20px;
         line-height: 24px;
     }

package/src/modules/dx/cardTitle/cardTitle.html

@@ -1,5 +1,5 @@
 <template>
-    <h3 class="dx-text-heading-4">
+    <h3 class="dx-text-display-6">
         <a if:true={href} href={href} target={target}>
             {titleToWrap}
             <template if:true={needsSpace}>&#32;</template>

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/codeBlock/codeBlock.html

@@ -3,7 +3,7 @@
         <div class={codeblocksClassname}>
             <div class="toolbar">
                 <div class="toolbar-item">
-                    <div class="dx-text-heading-7 dx-code-block-heading">
+                    <div class="dx-text-display-8 dx-code-block-heading">
                         { title }
                     </div>
                 </div>

package/src/modules/dx/emptyState/emptyState.html

@@ -2,7 +2,7 @@
     <div class={containerClassName} part="container">
         <img src={imageAssetPath} alt="Mountains" />
         <div class="text">
-            <h3 class="title dx-text-heading-3">{title}</h3>
+            <h3 class="title dx-text-display-4">{title}</h3>
             <p class="subtitle dx-text-body-2" if:true={subtitle}>{subtitle}</p>
         </div>
     </div>

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

@@ -1,8 +1,8 @@
 <template>
     <section class={sectionClass}>
         <div class="description">
-            <h2 if:true={hasLabel} class="dx-text-heading-7 label">{label}</h2>
-            <h3 class="dx-text-heading-3">{title}</h3>
+            <h2 if:true={hasLabel} class="dx-text-display-8 label">{label}</h2>
+            <h3 class="dx-text-display-4">{title}</h3>
             <div class="body dx-text-body-2">
                 <slot></slot>
             </div>

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/featuredContentHeader/featuredContentHeader.css

@@ -369,7 +369,7 @@ a.image-container > img {
     padding-bottom: var(--dx-g-spacing-lg);
 }
 
-.dx-text-heading-2 {
+.dx-text-display-2 {
     padding-bottom: var(--dx-g-spacing-sm);
     display: block;
 }
@@ -480,11 +480,11 @@ dx-image-and-label {
         margin-bottom: calc(var(--dx-c-bottom-image-height) * -0.72);
     }
 
-    .dx-text-heading-4 {
+    .dx-text-display-6 {
         font-size: var(--dx-g-text-xl);
     }
 
-    .dx-text-heading-2 {
+    .dx-text-display-2 {
         font-size: var(--dx-g-text-2xl);
         line-height: var(--dx-g-spacing-2xl);
     }

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

@@ -2,14 +2,14 @@
     <div class={classname} part="container" style={style}>
         <div class="container-layout">
             <template if:true={labelAsPrimaryHeading}>
-                <h1 if:true={label} class="label dx-text-heading-4">{label}</h1>
+                <h1 if:true={label} class="label dx-text-display-6">{label}</h1>
             </template>
             <template if:false={labelAsPrimaryHeading}>
-                <p if:true={label} class="label dx-text-heading-4">{label}</p>
+                <p if:true={label} class="label dx-text-display-6">{label}</p>
             </template>
             <div class="featured-content-main-content">
                 <template if:false={labelAsPrimaryHeading}>
-                    <h1 class="title dx-text-heading-2">
+                    <h1 class="title dx-text-display-2">
                         <a
                             class="title-link"
                             if:true={href}
@@ -24,7 +24,7 @@
                     </h1>
                 </template>
                 <template if:true={labelAsPrimaryHeading}>
-                    <h2 class="title dx-text-heading-2">
+                    <h2 class="title dx-text-display-2">
                         <a
                             class="title-link"
                             if:true={href}

package/src/modules/dx/featuresList/featuresList.css

@@ -1,11 +1,11 @@
 @import "dxHelpers/reset";
 @import "dxHelpers/text";
 
-.dx-text-heading-5 {
+.dx-text-display-8 {
     display: inline-flex;
 }
 
-.dx-text-heading-3 {
+.dx-text-display-4 {
     padding-bottom: var(--dx-g-spacing-xl);
 }
 

package/src/modules/dx/featuresList/featuresList.html

@@ -1,10 +1,10 @@
 <template>
     <div class="container">
-        <h2 if:true={title} class="dx-text-heading-3">{title}</h2>
+        <h2 if:true={title} class="dx-text-display-4">{title}</h2>
         <ul>
             <template for:each={options} for:item="option">
                 <li key={option.id} class="option">
-                    <div class="dx-text-heading-5">
+                    <div class="dx-text-display-8">
                         <dx-icon
                             class="icon"
                             size="small"

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

@@ -24,7 +24,7 @@
         >
             <div class="graphic graphic-large" alt=""></div>
             <div class="subscription">
-                <h2 class="dx-text-heading-3">
+                <h2 class="dx-text-display-4">
                     Get the latest
                     <br />
                     developer updates.

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.css

@@ -76,12 +76,12 @@
 /* breakpoints tablet */
 
 @media screen and (max-width: 1024px) {
-    .title.dx-text-heading-2 {
+    .title.dx-text-display-2 {
         font-size: var(--dx-g-text-3xl);
         line-height: var(--dx-g-spacing-2xl);
     }
 
-    .subtitle.dx-text-heading-6 {
+    .subtitle.dx-text-display-8 {
         font-size: var(--dx-g-text-sm);
     }
 
@@ -90,15 +90,11 @@
         line-height: var(--dx-g-spacing-lg);
     }
 
-    .title.dx-text-heading-3 {
+    .title.dx-text-display-4 {
         font-size: var(--dx-g-text-2xl);
         line-height: var(--dx-g-spacing-xl);
     }
 
-    .subtitle.dx-text-heading-7 {
-        font-size: var(--dx-g-text-xs);
-    }
-
     .body.dx-text-body-2 {
         font-size: var(--dx-g-text-sm);
         line-height: var(--dx-g-spacing-lg);

package/src/modules/dx/groupText/groupText.html

@@ -1,10 +1,10 @@
 <template>
     <div class={className}>
-        <span if:true={label} class="label dx-text-heading-6">{label}</span>
+        <span if:true={label} class="label dx-text-display-8">{label}</span>
         <div class={titleClassname} role="heading" aria-level={titleAriaLevel}>
             {title}
         </div>
-        <span class={subtitleClassname} if:true={hasSubtitle}>
+        <span class="subtitle dx-text-display-8" if:true={hasSubtitle}>
             <span if:true={owner}>{owner}</span>
             <span if:true={attributionLink}>
                 By&nbsp;

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

@@ -11,13 +11,8 @@ const LARGE = "large";
 const MEDIUM = "medium";
 
 const titleClasses = {
-    [LARGE]: "dx-text-heading-2",
-    [MEDIUM]: "dx-text-heading-3"
-};
-
-const subtitleClasses = {
-    [LARGE]: "dx-text-heading-6",
-    [MEDIUM]: "dx-text-heading-7"
+    [LARGE]: "dx-text-display-2",
+    [MEDIUM]: "dx-text-display-4"
 };
 
 export default class GroupText extends LightningElement {
@@ -76,10 +71,6 @@ export default class GroupText extends LightningElement {
         return cx("title", titleClasses[this.size]);
     }
 
-    private get subtitleClassname() {
-        return cx("subtitle", subtitleClasses[this.size]);
-    }
-
     private get hasButtonGroup(): boolean {
         return !!(this.primaryLink || this.secondaryLink || this.tertiaryLink);
     }
@@ -98,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/header/header.html

@@ -50,7 +50,7 @@
                             symbol={brand}
                             size="xlarge"
                         ></dx-icon>
-                        <span class="dx-text-heading-4 subtitle">
+                        <span class="dx-text-display-6 subtitle">
                             {subtitle}
                         </span>
                     </a>

package/src/modules/dx/logo/logo.html

@@ -1,6 +1,6 @@
 <template>
     <a href={href} class="logo-link">
         <img src={imgSrc} alt={imgAlt} />
-        <span class="dx-text-heading-7">{label}</span>
+        <span class="dx-text-display-8">{label}</span>
     </a>
 </template>

package/src/modules/dx/mainContentHeader/mainContentHeader.html

@@ -1,9 +1,9 @@
 <template>
     <div class="container" style={style}>
         <div class={textStyle}>
-            <h1 class="heading dx-text-heading-2">{title}</h1>
+            <h1 class="heading dx-text-display-2">{title}</h1>
             <span class="body dx-text-body-1">{body}</span>
-            <span if:true={subtitle} class="subtitle dx-text-heading-4b">
+            <span if:true={subtitle} class="subtitle dx-text-display-7">
                 {subtitle}
             </span>
             <div class="button-container">

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/podcastHost/podcastHost.html

@@ -8,7 +8,7 @@
                 <h2>
                     <span class="dx-text-label-2">Hosted by</span>
                     <br />
-                    <span class="dx-text-heading-4">{fullName}</span>
+                    <span class="dx-text-display-6">{fullName}</span>
                 </h2>
             </div>
             <div class="host-bio">

package/src/modules/dx/section/section.css

@@ -61,7 +61,7 @@
     max-width: 800px;
 }
 
-.dx-text-heading-custom {
+.dx-text-display-custom {
     color: var(--dx-c-section-heading-font-color, --dx-g-text-heading-color);
     font-family: var(--dx-c-section-heading-font-family, --dx-g-font-display);
     font-size: var(--dx-c-section-heading-font-size, --dx-g-text-3xl);

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

@@ -27,7 +27,7 @@
         </svg>
 
         <div part="text" class="text" if:true={hasText}>
-            <span class="label dx-text-heading-6" if:true={label}>{label}</span>
+            <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}

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

@@ -37,7 +37,7 @@ export default class Section extends LightningElement {
     }
 
     private get headingClassName() {
-        return cx("heading", `dx-text-heading-${this.headingLevel}`);
+        return cx("heading", `dx-text-display-${this.headingLevel}`);
     }
 
     private get hasText(): boolean {

package/src/modules/dx/sidebar/sidebar.html

@@ -29,7 +29,7 @@
         ></dx-button>
         <div class="sidebar-header padding-horizontal">
             <div class="header" if:false={mobile}>
-                <h2 class="dx-text-heading-4 header-title">{header}</h2>
+                <h2 class="dx-text-display-6 header-title">{header}</h2>
                 <slot name="header"></slot>
             </div>
             <div class="search">
@@ -43,7 +43,7 @@
                 ></dx-sidebar-search>
             </div>
             <h2
-                class="results-heading dx-text-heading-6"
+                class="results-heading dx-text-display-8"
                 if:true={showResultsHeading}
             >
                 Results

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.html

@@ -31,7 +31,7 @@
         <template if:true={expanded}>
             <div class="padding-horizontal">
                 <div class="header" if:false={mobile}>
-                    <h2 class="dx-text-heading-4 header-title">{header}</h2>
+                    <h2 class="dx-text-display-6 header-title">{header}</h2>
                     <slot name="header"></slot>
                 </div>
                 <div class="search">

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.css

@@ -39,7 +39,7 @@
     margin-bottom: var(--dx-g-spacing-md);
 }
 
-.dx-text-heading-5 {
+.dx-text-display-8 {
     padding-top: var(--dx-g-spacing-sm);
     transition: var(--dx-g-transition-hue-1x);
 }

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

@@ -58,7 +58,7 @@ export default class Toc extends LightningElement {
 
     private get titleClassName() {
         return cx(
-            "dx-text-heading-5 toc_title",
+            "dx-text-display-8 toc_title",
             !this.showContent && "state-hide-content"
         );
     }
@@ -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);

package/src/modules/dxHelpers/card/card.css

@@ -246,16 +246,12 @@ a.dx-card-base:hover dx-card-title {
         line-height: 16px;
     }
 
-    .dx-text-heading-3:not(.static-font) {
+    .dx-text-display-4:not(.static-font) {
         font-size: 24px;
         line-height: 28px;
     }
 
-    .dx-text-heading-5:not(.static-font) {
-        font-size: 12px;
-    }
-
-    .dx-text-heading-6:not(.static-font) {
+    .dx-text-display-8:not(.static-font) {
         font-size: var(--dx-g-text-sm);
     }
 }

package/src/modules/dxHelpers/text/text.css

@@ -1,52 +1,68 @@
-.dx-text-heading-1 {
+/* WES Display 1 */
+.dx-text-display-1 {
     color: var(--dx-g-text-heading-color);
     font-family: var(--dx-g-font-display);
-    font-size: 64px; /* not registered */
-    letter-spacing: -0.6px;
+    font-size: var(--dx-g-text-6xl);
+    letter-spacing: -1.4px;
+    line-height: 88px;
+}
+
+/* NO WES EQUIVALENT */
+.dx-text-display-1b {
+    color: var(--dx-g-text-heading-color);
+    font-family: var(--dx-g-font-display);
+    font-size: 64px;
+    letter-spacing: -1.4px;
     line-height: 64px;
 }
 
-.dx-text-heading-2 {
+/* WES Display 2 */
+.dx-text-display-2 {
     color: var(--dx-g-text-heading-color);
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-5xl);
     letter-spacing: -0.6px;
-    line-height: 60px;
+    line-height: 64px;
 }
 
-.dx-text-heading-2b {
+/* WES Display 3 */
+.dx-text-display-3 {
     color: var(--dx-g-text-heading-color);
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-4xl);
-    letter-spacing: -0.6px;
+    letter-spacing: -0.5px;
     line-height: 56px;
 }
 
-.dx-text-heading-3 {
+/* WES Display 4 */
+.dx-text-display-4 {
     color: var(--dx-g-text-heading-color);
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-3xl);
-    letter-spacing: -0.4px;
-    line-height: 40px;
+    letter-spacing: -0.3px;
+    line-height: 48px;
 }
 
-.dx-text-heading-3b {
+/* Display 5 */
+.dx-text-display-5 {
     color: var(--dx-g-text-heading-color);
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-2xl);
-    letter-spacing: -0.4px;
+    letter-spacing: -0.1px;
     line-height: 40px;
 }
 
-.dx-text-heading-4 {
+/* Display 6 */
+.dx-text-display-6 {
     color: var(--dx-g-text-heading-color);
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-xl);
     letter-spacing: -0.1px;
-    line-height: 28px;
+    line-height: 32px;
 }
 
-.dx-text-heading-4b {
+/* Display 7 */
+.dx-text-display-7 {
     color: var(--dx-g-text-heading-color);
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-lg);
@@ -54,45 +70,25 @@
     line-height: 28px;
 }
 
-.dx-text-heading-5 {
+/* Display 8 */
+.dx-text-display-8 {
     color: var(--dx-g-text-heading-color);
     font-family: var(--dx-g-font-display);
-    font-size: 18px; /* not registered */
+    font-size: var(--dx-g-text-base);
     letter-spacing: -0.1px;
     line-height: 24px;
 }
 
-.dx-text-heading-6 {
-    color: var(--dx-g-text-heading-color);
-    font-family: var(--dx-g-font-display);
-    font-size: var(--dx-g-text-base);
-    letter-spacing: 0;
-    line-height: 20px;
-}
-
-.dx-text-heading-7 {
-    color: var(--dx-g-text-heading-color);
-    font-family: var(--dx-g-font-display);
-    font-size: var(--dx-g-text-sm);
-    letter-spacing: 0;
-    line-height: 18px;
-}
-
-.dx-text-heading-alt-1 {
-    color: var(--dx-g-text-label-color);
-    font-family: var(--dx-g-font-sans);
-    font-size: var(--slds-text-lg);
-    line-height: 25px;
-}
-
+/* Body 1 */
 .dx-text-body-1 {
     color: var(--dx-g-text-body-color);
     font-family: var(--dx-g-font-sans);
     font-size: var(--dx-g-text-lg);
     letter-spacing: 0;
-    line-height: 32px;
+    line-height: 30px;
 }
 
+/* Body 2 */
 .dx-text-body-2 {
     color: var(--dx-g-text-body-color);
     font-family: var(--dx-g-font-sans);
@@ -101,6 +97,7 @@
     line-height: 24px;
 }
 
+/* Body 3 */
 .dx-text-body-3 {
     color: var(--dx-g-text-body-color);
     font-family: var(--dx-g-font-sans);
@@ -109,6 +106,7 @@
     line-height: 20px;
 }
 
+/* Body Caption */
 .dx-text-body-4 {
     color: var(--dx-g-text-body-color);
     font-family: var(--dx-g-font-sans);