@salesforcedevs/dx-components 1.3.53-alpha → 1.3.56-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.53-alpha",
+    "version": "1.3.56-alpha.1",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -11,7 +11,7 @@
     },
     "dependencies": {
         "@coveo/headless": "^1.32.0",
-        "@floating-ui/dom": "^0.5.3",
+        "@floating-ui/dom": "^1.0.4",
         "@sfdocs-internal/wires": "^0.6.3",
         "@vimeo/player": "^2.16.4",
         "classnames": "^2.2.6",
@@ -32,8 +32,10 @@
         "@types/lodash.defaults": "^4.2.7",
         "@types/lodash.get": "^4.4.6",
         "@types/lodash.kebabcase": "^4.1.7",
+        "@types/luxon": "^3.1.0",
         "@types/uuid": "^8.3.4",
         "@types/vimeo__player": "^2.16.2",
-        "eventsourcemock": "^2.0.0"
+        "eventsourcemock": "^2.0.0",
+        "luxon": "^3.1.0"
     }
 }

package/src/assets/icons/salesforcebrand-sprite/svg/symbols.svg

@@ -1,5 +1,12 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <symbol id="crm-analytics" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+        <path class="acls-1" d="M56 53h-4V9c0-1.1-.9-2-2-2H38c-1.1 0-2 .9-2 2v13H26c-1.1 0-2 .9-2 2v13H14c-1.1 0-2 .9-2 2v14H8c-1.1 0-2 .9-2 2s.9 2 2 2h48c1.1 0 2-.9 2-2s-.9-2-2-2z" fill="#032d60"/>
+        <path class="acls-1" fill="#032d60" d="M16 41h8v12h-8zM28 39V26h8v27h-8V39zM40 24V11h8v42h-8V24z"/>
+        <path class="acls-3" fill="#0d9dda" d="M16 41h8v12h-8z"/>
+        <path class="acls-2" fill="#fff" d="M36 26h-8v27h8V26z"/>
+        <path class="acls-3" fill="#0d9dda" d="M48 11h-8v42h8V11z"/>
+    </symbol>
     <symbol id="net-zero" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
         <path class="acls-1"
             d="M44.61 39H51a2 2 0 0 0 1.71-3l-19-31a2 2 0 0 0-3.42 0l-19 31A2 2 0 0 0 13 39h6.39L11.3 51.94a2 2 0 0 0-.05 2A2 2 0 0 0 13 55h17v3a2 2 0 0 0 4 0v-3h17a2 2 0 0 0 1.75-1 2 2 0 0 0 0-2zM34 51V37a2 2 0 0 0-4 0v14H16.61l8.09-12.94a2 2 0 0 0 .05-2A2 2 0 0 0 23 35h-6.43L32 9.83 47.43 35H41a2 2 0 0 0-1.75 1 2 2 0 0 0 0 2l8.14 13z"

package/src/modules/dx/banner/banner.ts

@@ -3,7 +3,7 @@ import { setContainerInnerHtml } from "dxUtils/lwc";
 
 export default class Banner extends LightningElement {
     @api bannerMarkup =
-        'Thank you for visiting the Salesforce Developers website! <span><a href="https://forms.gle/oWYTbH9RvGyt9uxx7" target="blank">We value your feedback</a></span>';
+        '<span><a href="https://forms.gle/TdSyKFPHXoBx7seM9" target="blank">Share your feedback</a>about our new site.</span>';
 
     renderedCallback() {
         const container = this.template.querySelector(".info-container");

package/src/modules/dx/featuredContentHeader/featuredContentHeader.css

@@ -36,26 +36,34 @@
     --swoop-height: var(--dx-c-featured-content-header-swoop-height);
     --swoop-inset: calc(2.5 * var(--vertical-padding));
     --swoop-z-index: 11;
+    --label-color: var(--dx-g-indigo-vibrant-40);
 
     position: relative;
-    padding: var(--dx-c-featured-content-header-padding-vertical)
-        var(--dx-c-featured-content-header-padding-horizontal);
     background: var(
         --dx-c-featured-content-header-background-color,
         var(--dx-g-indigo-vibrant-90)
     );
 }
 
+.container-layout {
+    padding: var(--dx-c-featured-content-header-padding-vertical)
+        var(--dx-c-featured-content-header-padding-horizontal);
+    background-image: var(--background-image);
+    background-repeat: no-repeat;
+    background-position: top right;
+    background-size: contain;
+}
+
 /* LAYOUTS */
 
-.img-placement_inline {
+.img-placement_inline .container-layout {
     display: grid;
     grid-template-areas: "label label" "main image";
     grid-template-columns: 50% auto;
     grid-gap: 0 80px;
 }
 
-.img-placement_below {
+.img-placement_below .container-layout {
     --swoop-inset: calc(80px + 38vw);
 
     margin-bottom: calc(var(--dx-c-bottom-image-height) / 2);
@@ -278,6 +286,7 @@
     left: unset;
     width: 126px;
     height: 126px;
+    z-index: 1;
 }
 
 @media screen and (max-width: 1230px) {
@@ -356,7 +365,7 @@ a.image-container > img {
 
 .label {
     grid-area: label;
-    color: var(--dx-g-indigo-vibrant-40);
+    color: var(--dx-c-featured-content-label-color, var(--label-color));
     padding-bottom: var(--dx-g-spacing-lg);
 }
 
@@ -380,7 +389,10 @@ dx-image-and-label {
 }
 
 /* DARK VARIANT */
+
 .variant_dark {
+    --label-color: rgb(190, 199, 246);
+
     background: var(
         --dx-c-featured-content-header-background-color,
         linear-gradient(-180deg, rgb(40, 23, 153) 0%, rgb(46, 43, 182) 100%)
@@ -391,10 +403,6 @@ dx-image-and-label {
     --dx-c-image-and-label-text-color: white;
 }
 
-.variant_dark .label {
-    color: rgb(190, 199, 246);
-}
-
 .variant_dark .title,
 .variant_dark .body {
     color: white;
@@ -457,7 +465,7 @@ dx-image-and-label {
         --swoop-inset: 64px;
     }
 
-    .img-placement_inline {
+    .img-placement_inline .container-layout {
         display: grid;
         grid-template-areas: "label" "image" "main";
         grid-template-columns: 100%;

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

@@ -1,117 +1,119 @@
 <template>
-    <div class={classname} part="container">
-        <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">
-            <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>
+    <div class={classname} part="container" style={style}>
+        <div class="container-layout">
             <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>
+                <h1 if:true={label} class="label dx-text-heading-4">{label}</h1>
             </template>
-            <div class="authors" if:true={authors}>
-                <template for:each={authors} for:item="author">
-                    <dx-image-and-label
-                        key={author.key}
-                        img-src={author.imgSrc}
-                        img-size={author.imgSize}
-                        label={author.name}
-                        href={author.href}
-                    ></dx-image-and-label>
+            <template if:false={labelAsPrimaryHeading}>
+                <p if:true={label} class="label dx-text-heading-4">{label}</p>
+            </template>
+            <div class="featured-content-main-content">
+                <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
+                            key={author.key}
+                            img-src={author.imgSrc}
+                            img-size={author.imgSize}
+                            label={author.name}
+                            href={author.href}
+                        ></dx-image-and-label>
+                    </template>
+                </div>
+                <span class="body dx-text-body-1">{body}</span>
+                <div class="slot-container">
+                    <slot onslotchange={onSlotChange}></slot>
+                </div>
+                <div
+                    class={backgroundImageClass}
+                    if:true={hasBackgroundImage}
+                    lwc:dom="manual"
+                ></div>
             </div>
-            <span class="body dx-text-body-1">{body}</span>
-            <div class="slot-container">
-                <slot onslotchange={onSlotChange}></slot>
+            <div if:true={hasPlainImage} class="image-container">
+                <img src={imgSrc} alt={imgAlt} />
             </div>
-            <div
-                class={backgroundImageClass}
-                if:true={hasBackgroundImage}
-                lwc:dom="manual"
-            ></div>
-        </div>
-        <div if:true={hasPlainImage} class="image-container">
-            <img src={imgSrc} alt={imgAlt} />
-        </div>
-        <a
-            if:true={hasLinkedImage}
-            href={href}
-            target={target}
-            class="image-container"
-            onmouseenter={setLinkHovered}
-            onmouseleave={setLinkInactive}
-        >
-            <img src={imgSrc} alt={imgAlt} />
-        </a>
-        <template if:false={noSwoop}>
-            <svg
-                class="swoop-silhouette"
-                width="1920px"
-                height="331px"
-                viewBox="0 0 1920 331"
-                version="1.1"
-                xmlns="http://www.w3.org/2000/svg"
-                preserveAspectRatio="none"
+            <a
+                if:true={hasLinkedImage}
+                href={href}
+                target={target}
+                class="image-container"
+                onmouseenter={setLinkHovered}
+                onmouseleave={setLinkInactive}
             >
-                <defs>
-                    <path
-                        d="M1920,330 L76.7313881,330.008182 C51.2800917,330.255837 25.7029624,330.372286 0,330.357528 L0,330 L76.7313881,330.008182 C789.975765,323.067922 1404.39864,213.086385 1920,0.0635708029 L1920,0.0635708029 L1920,330 Z"
-                        id="path-1"
-                    ></path>
-                </defs>
-                <g
-                    id="Documentation-landing-page"
-                    stroke="none"
-                    stroke-width="1"
-                    fill="none"
-                    fill-rule="evenodd"
+                <img src={imgSrc} alt={imgAlt} />
+            </a>
+            <template if:false={noSwoop}>
+                <svg
+                    class="swoop-silhouette"
+                    width="1920px"
+                    height="331px"
+                    viewBox="0 0 1920 331"
+                    version="1.1"
+                    xmlns="http://www.w3.org/2000/svg"
+                    preserveAspectRatio="none"
                 >
-                    <mask id="mask-2" fill="white">
-                        <use xlink:href="#path-1"></use>
-                    </mask>
-                    <use
-                        id="Combined-Shape"
-                        fill="#FFFFFF"
-                        xlink:href="#path-1"
-                    ></use>
-                </g>
-            </svg>
-        </template>
-    </div>
-    <div class="blue-circle" if:true={hasIcon}>
-        <dx-icon
-            class="icon"
-            size="2xlarge"
-            symbol={icon}
-            sprite="salesforcebrand"
-        ></dx-icon>
+                    <defs>
+                        <path
+                            d="M1920,330 L76.7313881,330.008182 C51.2800917,330.255837 25.7029624,330.372286 0,330.357528 L0,330 L76.7313881,330.008182 C789.975765,323.067922 1404.39864,213.086385 1920,0.0635708029 L1920,0.0635708029 L1920,330 Z"
+                            id="path-1"
+                        ></path>
+                    </defs>
+                    <g
+                        id="Documentation-landing-page"
+                        stroke="none"
+                        stroke-width="1"
+                        fill="none"
+                        fill-rule="evenodd"
+                    >
+                        <mask id="mask-2" fill="white">
+                            <use xlink:href="#path-1"></use>
+                        </mask>
+                        <use
+                            id="Combined-Shape"
+                            fill="#FFFFFF"
+                            xlink:href="#path-1"
+                        ></use>
+                    </g>
+                </svg>
+            </template>
+        </div>
+        <div class="blue-circle" if:true={hasIcon}>
+            <dx-icon
+                class="icon"
+                size="2xlarge"
+                symbol={icon}
+                sprite="salesforcebrand"
+            ></dx-icon>
+        </div>
     </div>
 </template>

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

@@ -17,7 +17,8 @@ export default class FeaturedContentHeader extends LightningElement {
     @api href?: string;
     @api target?: string | null = null;
     @api title!: string;
-    @api backgroundImg?:
+    @api backgroundImg?: string;
+    @api backgroundImgId?:
         | "trees"
         | "codey"
         | "blog"
@@ -58,7 +59,14 @@ export default class FeaturedContentHeader extends LightningElement {
             this.dark && "variant_dark",
             this.isLinkHovered && "link-hovered",
             !this.isSlotEmpty && "has-slotted",
-            this.backgroundImg && `custom-bg-${this.backgroundImg}`
+            this.backgroundImgId && `custom-bg-${this.backgroundImgId}`
+        );
+    }
+
+    private get style() {
+        return cx(
+            this.backgroundImg &&
+                `--background-image: url(${this.backgroundImg});`
         );
     }
 
@@ -71,17 +79,17 @@ export default class FeaturedContentHeader extends LightningElement {
     }
 
     private get hasBackgroundImage() {
-        return this.backgroundImg !== null;
+        return this.backgroundImgId !== null;
     }
 
     private get hasIcon(): boolean {
-        return this.icon !== "" && this.backgroundImg === "big-moon";
+        return this.icon !== "" && this.backgroundImgId === "big-moon";
     }
 
     private get backgroundImageClass() {
         return cx(
             "bg-image-container",
-            this.backgroundImg && `bg-${this.backgroundImg}`
+            this.backgroundImgId && `bg-${this.backgroundImgId}`
         );
     }
 
@@ -100,13 +108,13 @@ export default class FeaturedContentHeader extends LightningElement {
     renderedCallback(): void {
         // Setting the svgs with innerHTML prevents their IDs from being rewritten
         // which is necessary to preserve the svg masking and other effects
-        if (this.backgroundImg && svgs[this.backgroundImg]) {
+        if (this.backgroundImgId && svgs[this.backgroundImgId]) {
             const bgSvg = this.template.querySelector(".bg-image-container");
             if (bgSvg) {
                 // eslint-disable-next-line @lwc/lwc/no-inner-html
                 bgSvg.innerHTML = `
-                    ${svgs[this.backgroundImg].desktop}
-                    ${svgs[this.backgroundImg].mobile}
+                    ${svgs[this.backgroundImgId].desktop}
+                    ${svgs[this.backgroundImgId].mobile}
                 `;
             }
         }

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

@@ -206,5 +206,11 @@ export const socialLinks = [
         iconSymbol: "rss",
         iconSprite: "general",
         label: "RSS"
+    },
+    {
+        href: "https://www.instagram.com/salesforcedevs",
+        iconSymbol: "instagram",
+        iconSprite: "brand",
+        label: "Instagram"
     }
 ];

package/src/modules/dx/formattedDateTime/formattedDateTime.ts

@@ -11,6 +11,8 @@ import {
     formattedDateYear
 } from "typings/custom";
 
+import { DateTime } from "luxon";
+
 export default class FormattedDateTime extends LightningElement {
     @api weekday: formattedDateWeekday;
     @api year: formattedDateYear;
@@ -27,7 +29,11 @@ export default class FormattedDateTime extends LightningElement {
             return;
         }
 
-        this._unformattedDate = new Date(value);
+        this._unformattedDate = DateTime.fromISO(value)
+            .plus({
+                hour: 1
+            })
+            .toJSDate();
 
         if (this._unformattedDate.toString() === "Invalid Date") {
             // this is a fix for Safari since it doesn't support date strings with 'yyyy/mm/dd' patterns
@@ -62,7 +68,7 @@ export default class FormattedDateTime extends LightningElement {
     }
 
     getOptions() {
-        const options = {
+        return {
             weekday: this.weekday || undefined,
             year: this.year || undefined,
             month: this.month || undefined,
@@ -70,8 +76,8 @@ export default class FormattedDateTime extends LightningElement {
             hour: this.hour || undefined,
             minute: this.minute || undefined,
             second: this.second,
-            timeZoneName: this.timeZoneName || undefined
+            timeZoneName: this.timeZoneName || undefined,
+            timeZone: "America/Los_Angeles"
         };
-        return options;
     }
 }

package/src/modules/dx/header/header.html

@@ -3,7 +3,7 @@
         <header class={className}>
             <dx-skip-nav-link></dx-skip-nav-link>
             <dx-banner
-                if:true={bannerMarkup}
+                if:true={showBanner}
                 banner-markup={bannerMarkup}
             ></dx-banner>
             <div class="header_l1">
@@ -39,7 +39,7 @@
             </div>
             <div class="header_l2">
                 <div class="header_l2_group header_l2_group-title">
-                    <a href="/" class="home-link">
+                    <a href="/" class="home-link" if:true={isValidSubtitle}>
                         <dx-icon
                             class="brand-icon"
                             if:true={isValidBrand}

package/src/modules/dx/header/header.ts

@@ -14,4 +14,8 @@ export default class Header extends HeaderBase {
     protected mobileBreakpoint(): string {
         return "768px";
     }
+
+    get isValidSubtitle() {
+        return this.isValidBrand || this.subtitle;
+    }
 }

package/src/modules/dx/headerSearch/headerSearch.html

@@ -20,7 +20,6 @@
                     onclear={onInputEscape}
                     onsubmit={onInputSubmit}
                     onfocus={openDropdown}
-                    onblur={onDropdownRequestClose}
                     placeholder="Search"
                     size="override"
                     type="search"
@@ -52,7 +51,6 @@
                     onclear={onInputEscape}
                     onsubmit={onInputSubmit}
                     onfocus={openDropdown}
-                    onblur={onDropdownRequestClose}
                     placeholder="Search"
                     shortcut-key="k"
                     size="small"

package/src/modules/dx/headerSearch/headerSearch.ts

@@ -69,7 +69,6 @@ export default class HeaderSearch extends LightningElement {
         switch (e.detail as PopoverRequestCloseType) {
             case "interact-outside":
             case "keypress-escape":
-            case "input-blur":
                 this.closeDropdown();
                 break;
             default:

package/src/modules/dx/hr/hr.css

@@ -49,7 +49,6 @@ dx-button::before {
     content: "";
     border-bottom: 2px solid var(--dx-g-gray-95);
     flex: 1 1;
-    transform: translateY(-2px); /* offset for display font ghost padding */
     margin: auto;
     margin-right: var(--dx-g-spacing-md);
 }

package/src/modules/dx/input/input.ts

@@ -186,8 +186,6 @@ export default class Input extends LightningElement {
         if (this.validityOnBlur) {
             this.reportValidity();
         }
-
-        this.dispatchEvent(new CustomEvent("blur", { detail: "input-blur" }));
     }
 
     onInputChange(e: InputEvent) {

package/src/modules/dx/searchResults/searchResults.css

@@ -197,8 +197,8 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
 
 .CoveoSort.coveo-selected,
 .CoveoSort.coveo-selected:hover {
-    color: var(--dx-g-blue-vibrant-50);
-    border-bottom-color: var(--dx-g-blue-vibrant-50);
+    color: var(--dx-g-blue-vibrant-40);
+    border-bottom-color: var(--dx-g-blue-vibrant-40);
 }
 
 .CoveoBreadcrumb {

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

@@ -169,6 +169,8 @@ export default class Sidebar extends SidebarBase {
 
     private onSelect(event: CustomEvent) {
         this._value = event.detail.name;
+
+        this.dispatchEvent(new CustomEvent("sidebarclick"));
     }
 
     private onToggleClick(event: Event) {

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

@@ -95,6 +95,8 @@ export default class Sidebar extends SidebarBase {
 
     private onSelect(event: CustomEvent) {
         this._value = event.detail.name;
+
+        this.dispatchEvent(new CustomEvent("sidebarclick"));
     }
 
     private onToggleClick(event: Event) {

package/src/modules/dx/sidebarSearch/sidebarSearch.html

@@ -18,7 +18,6 @@
             value={value}
             onchange={onInputChange}
             onfocus={onInputFocus}
-            onblur={onDropdownRequestClose}
             onclear={onInputClear}
             shortcut-key="j"
             clearable

package/src/modules/dx/sidebarSearch/sidebarSearch.ts

@@ -422,7 +422,6 @@ export default class SidebarSearch extends LightningElement {
         switch (e.detail as PopoverRequestCloseType) {
             case "interact-outside":
             case "keypress-escape":
-            case "input-blur":
                 this.dropdownRequestedOpen = false;
                 break;
             default:

package/src/modules/dx/tbidAvatarButton/tbidAvatarButton.css

@@ -1,10 +1,10 @@
 @import "dxHelpers/reset";
 
 :host {
-    --dx-c-button-custom-color: var(--dx-g-blue-vibrant-50);
+    --dx-c-button-custom-color: var(--dx-g-blue-vibrant-40);
     --dx-c-button-custom-background: transparent;
     --dx-c-button-custom-border: 1px solid transparent;
-    --dx-c-button-custom-color-hover: var(--dx-g-blue-vibrant-50);
+    --dx-c-button-custom-color-hover: var(--dx-g-blue-vibrant-40);
     --dx-c-button-custom-background-hover: var(--dx-g-cloud-blue-vibrant-90);
     --dx-c-button-custom-border-hover: var(--dx-g-cloud-blue-vibrant-90);
     --dx-c-slot-empty-width: max-content;

package/src/modules/dx/tbidAvatarButton/tbidAvatarButton.ts

@@ -49,7 +49,7 @@ export default class TbidAvatarButton extends LightningElement {
     @api tbidApiBaseUrl = "";
 
     @api login = (event: Event) => this.handleComponentLogin(event);
-    @api logout = () => this.handleComponentLogout();
+    @api logout = (event: Event) => this.handleComponentLogout(event);
 
     private userInfo: UserInfo = {};
     private isLoading = false;
@@ -242,7 +242,8 @@ export default class TbidAvatarButton extends LightningElement {
     private handleSsoLogout = this.handleLogout.bind(this, true);
 
     // This handles logout from _within_ this component ("Logout" click), rather than from SSO via the SFIDWidget.
-    private handleComponentLogout = () => {
+    private handleComponentLogout = (event: Event) => {
+        event?.preventDefault();
         this.handleLogout(false);
     };
 

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

@@ -2,6 +2,7 @@ import { LightningElement, api, track } from "lwc";
 import cx from "classnames";
 import { ContentElement } from "typings/custom";
 import { toJson } from "dxUtils/normalizers";
+import { track as sendGtm } from "dxUtils/analytics";
 
 export default class Toc extends LightningElement {
     @api title!: string;
@@ -65,10 +66,22 @@ export default class Toc extends LightningElement {
     private onClick(e: Event) {
         const target = e.currentTarget as HTMLElement;
         const id = target.getAttribute("contentid");
+        const text = target.getAttribute("data-text");
+        const href = target.getAttribute("href");
+
         this.dispatchEvent(
             new CustomEvent("selectedcontent", { detail: { name: id } })
         );
+
         this._value = id!;
+
+        sendGtm(e.currentTarget!, "custEv_tableOfContentsClick", {
+            clickText: text,
+            clickUrl: href,
+            elementType: "link",
+            locationOnPage: "table of contents",
+            itemTitle: this.title
+        });
     }
 
     private toggleShowContent() {

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

@@ -24,6 +24,7 @@
                 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

@@ -1,7 +1,6 @@
 import { LightningElement, api } from "lwc";
 import { InternalTreeNode } from "typings/custom";
 import { track } from "dxUtils/analytics";
-import { SidebarGtmAction } from "typings/custom";
 import { isInViewport } from "dxUtils/browser";
 
 const DEFAULT_TARGET = "_self";
@@ -9,6 +8,7 @@ const DEFAULT_TARGET = "_self";
 export default class TreeItem extends LightningElement {
     @api selectedKey?: string;
     @api isRoot: boolean = false;
+    @api parentName?: string = "";
 
     @api
     public get treeNode() {
@@ -94,7 +94,7 @@ export default class TreeItem extends LightningElement {
     private onIconClick(event: CustomEvent): void {
         const isSelectAction = false;
         this.doExpand(isSelectAction);
-        this.sendGtm(event, this.isExpanded ? "expand" : "collapse");
+        this.sendGtm(event);
     }
 
     private onLinkClick(event: Event): void {
@@ -107,7 +107,7 @@ export default class TreeItem extends LightningElement {
             this.doExpand(isSelectAction);
         }
 
-        this.sendGtm(event, "click");
+        this.sendGtm(event);
         this.fireEvent("tileselected", { name: this._treeNode.name });
     }
 
@@ -137,10 +137,12 @@ export default class TreeItem extends LightningElement {
         this.isExpanded = value;
     }
 
-    private sendGtm(event: Event, sideNavAction: SidebarGtmAction) {
-        track(event.currentTarget!, "custEv_leftNavLinkClick", {
+    private sendGtm(event: Event) {
+        track(event.currentTarget!, "custEv_leftNavClick", {
+            navType: "left nav bar",
             clickText: this._treeNode.label,
-            sideNavAction
+            clickUrl: this.href,
+            navItem: this.parentName
         });
     }
 }

package/src/modules/dx/typeBadge/typeBadge.ts

@@ -149,8 +149,8 @@ export default class TypeBadge extends LightningElement {
     private get style(): string {
         if (this.dark) {
             return buildStyleColorVariables({
-                background: `--dx-g-${this.variantColorScope}-${this.variant}-color`,
-                color: `--dx-g-brand-default-color-background`
+                background: "--dx-g-purple-vibrant-40",
+                color: "--dx-g-brand-default-color-background"
             });
         }
         if (this.variantColorScope) {

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

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { Brand, OptionWithLink, OptionWithNested } from "typings/custom";
-import { toJson } from "dxUtils/normalizers";
+import { toJson, normalizeBoolean } from "dxUtils/normalizers";
 import { track } from "dxUtils/analytics";
 
 const VALID_BRANDS = [
@@ -42,7 +42,7 @@ export abstract class HeaderBase extends LightningElement {
     @api title: string = "Salesforce";
     @api version?: string | null = null;
     @api bannerMarkup =
-        'Thank you for visiting the Salesforce Developers website! <span><a href="https://forms.gle/oWYTbH9RvGyt9uxx7" target="blank">We value your feedback</a></span>';
+        '<span><a href="https://forms.gle/oWYTbH9RvGyt9uxx7" target="blank">Share your feedback</a>about our new site.</span>';
 
     @api
     get navItems() {
@@ -61,6 +61,15 @@ export abstract class HeaderBase extends LightningElement {
         this._versions = toJson(value);
     }
 
+    @api
+    get showBanner() {
+        return this._showBanner && this.bannerMarkup;
+    }
+
+    set showBanner(value) {
+        this._showBanner = normalizeBoolean(value);
+    }
+
     private _navItems!: OptionWithNested[];
     private _versions!: OptionWithLink[];
     private matchMedia!: MediaQueryList;
@@ -69,6 +78,7 @@ export abstract class HeaderBase extends LightningElement {
     private showMobileNavMenu: boolean = false;
     private showNavScrollShadow: boolean = false;
     protected isSearchOpen: boolean = false;
+    private _showBanner?: boolean = false;
 
     get url() {
         return this.href ? new URL(this.href!) : window.location;

package/src/modules/dxHelpers/table/table.css

@@ -96,11 +96,6 @@ td :is(.li, p, .p, dd) {
     font-size: var(--table-cell-text-base);
 }
 
-td :is(ul) {
-    font-size: var(--table-cell-text-base) !important;
-    margin-left: 0 !important;
-}
-
 td doc-content-callout :is(.li, p, .p, dd) {
     /* Override/reset for callouts -- see https://gus.lightning.force.com/lightning/r/ADM_Work__c/a07EE0000081MGTYA2/view */
     font-size: var(--dx-g-text-base);