@salesforcedevs/docs-components 1.3.5-lightdom-3 → 1.3.9-h2-toc-fix

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.5-lightdom-3",
+    "version": "1.3.9-h2-toc-fix",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/modules/doc/amfReference/amfReference.css

@@ -1,5 +1,13 @@
 @import "docHelpers/phaseContentLayout";
 
+.api-documentation {
+    margin-top: 48px;
+}
+
 .version-picker {
     margin-left: auto;
 }
+
+.version-picker-text {
+    border-bottom: 1px dashed var(--dx-g-blue-vibrant-50);
+}

package/src/modules/doc/amfReference/amfReference.html

@@ -22,14 +22,13 @@
         <div slot="sidebar-header" class="version-picker">
             <template if:true={isVersionEnabled}>
                 <dx-dropdown
-                    suppress-gtm-nav-headings
                     onchange={handleVersionChange}
                     data-type="version"
                     options={versions}
                     value={selectedVersion.id}
                     width="290px"
                 >
-                    <dx-button variant="inline">{selectedVersion.id}</dx-button>
+                    <dx-button variant="inline" class="version-picker-text">{selectedVersion.id}</dx-button>
                 </dx-dropdown>
             </template>
         </div>

package/src/modules/doc/amfReference/amfReference.ts

@@ -25,6 +25,7 @@ import {
     REFERENCE_TYPES,
     oldReferenceIdNewReferenceIdMap
 } from "./constants";
+import { restoreScroll } from "dx/scrollManager";
 
 export default class AmfReference extends LightningElement {
     @api breadcrumbs?: string | null | undefined = null;
@@ -138,7 +139,6 @@ export default class AmfReference extends LightningElement {
     protected _amfConfigMap: Map<string, AmfConfig> = new Map();
     protected _referenceSetConfig!: ReferenceSetConfig;
     protected _currentReferenceId = "";
-    protected _scrollInterval = 0;
 
     protected parentReferenceUrls = [];
     protected amfMap: Record<string, AmfModelRecord> = {};
@@ -167,10 +167,12 @@ export default class AmfReference extends LightningElement {
     constructor() {
         super();
 
-        this._boundOnApiNavigationChanged =
-            this.onApiNavigationChanged.bind(this);
-        this._boundUpdateSelectedItemFromUrlQuery =
-            this.updateSelectedItemFromUrlQuery.bind(this);
+        this._boundOnApiNavigationChanged = this.onApiNavigationChanged.bind(
+            this
+        );
+        this._boundUpdateSelectedItemFromUrlQuery = this.updateSelectedItemFromUrlQuery.bind(
+            this
+        );
     }
 
     connectedCallback(): void {
@@ -182,9 +184,6 @@ export default class AmfReference extends LightningElement {
             "popstate",
             this._boundUpdateSelectedItemFromUrlQuery
         );
-        this._scrollInterval = window.setInterval(() => {
-            this.saveScroll();
-        }, 1000);
     }
 
     disconnectedCallback(): void {
@@ -196,20 +195,6 @@ export default class AmfReference extends LightningElement {
             "popstate",
             this._boundUpdateSelectedItemFromUrlQuery
         );
-        window.clearInterval(this._scrollInterval);
-    }
-
-    saveScroll() {
-        window.history.replaceState(
-            { scrollValue: document.body.scrollTop },
-            "",
-            window.location.href
-        );
-    }
-
-    restoreScroll() {
-        document.body.scrollTop = document.documentElement.scrollTop =
-            window.history.state?.scrollValue;
     }
 
     renderedCallback(): void {
@@ -243,8 +228,9 @@ export default class AmfReference extends LightningElement {
                 const updatedReferenceId =
                     oldReferenceIdNewReferenceIdMap[referenceId];
                 const newReferenceId = updatedReferenceId || referenceId;
-                const referenceItemConfig =
-                    this.getAmfConfigWithId(newReferenceId);
+                const referenceItemConfig = this.getAmfConfigWithId(
+                    newReferenceId
+                );
                 if (referenceItemConfig) {
                     hashBasedRedirectUrl = `${referenceItemConfig.href}?meta=${encodedMeta}`;
                 }
@@ -313,8 +299,9 @@ export default class AmfReference extends LightningElement {
                 for (let i = 0; i < allVersions.length; i++) {
                     const versionItem = allVersions[i];
                     const referenceLink = versionItem.link.href;
-                    const referenceId =
-                        this.getReferenceIdFromUrl(referenceLink);
+                    const referenceId = this.getReferenceIdFromUrl(
+                        referenceLink
+                    );
                     if (this._currentReferenceId === referenceId) {
                         // This is to navigate to respective topic in the changed version
                         versionItem.link.href = `${referenceLink}/${currentRefMeta}`;
@@ -841,7 +828,7 @@ export default class AmfReference extends LightningElement {
             this.loadMarkdownBasedReference();
         }
 
-        this.restoreScroll();
+        restoreScroll(); // don't try this at home kids
     }
 
     /**
@@ -849,8 +836,6 @@ export default class AmfReference extends LightningElement {
      * @param event
      */
     protected onApiNavigationChanged(): void {
-        this.saveScroll();
-
         const specBasedReference = this.isSpecBasedReference(
             this._currentReferenceId
         );
@@ -1241,10 +1226,12 @@ export default class AmfReference extends LightningElement {
         }
         if (!isRedirecting) {
             const currentReferenceUrl = window.location.href;
-            const referenceMeta =
-                this.getMarkdownReferenceMeta(currentReferenceUrl);
-            const selectedItemRefId =
-                this.getReferenceIdFromUrl(currentReferenceUrl);
+            const referenceMeta = this.getMarkdownReferenceMeta(
+                currentReferenceUrl
+            );
+            const selectedItemRefId = this.getReferenceIdFromUrl(
+                currentReferenceUrl
+            );
             const referenceDetails = this.getRefDetailsForGivenTopicMeta(
                 selectedItemRefId,
                 referenceMeta
@@ -1280,13 +1267,12 @@ export default class AmfReference extends LightningElement {
     }
 
     onNavSelect(event: CustomEvent): void {
-        this.saveScroll();
-
         const name = event.detail.name;
         if (name) {
             const urlReferenceId = this.getReferenceIdFromUrl(name);
-            const specBasedReference =
-                this.isSpecBasedReference(urlReferenceId);
+            const specBasedReference = this.isSpecBasedReference(
+                urlReferenceId
+            );
             if (specBasedReference) {
                 const metaVal = this.getMetaFromUrl(name);
                 const currentSelectedMeta = this.selectedTopic
@@ -1336,8 +1322,9 @@ export default class AmfReference extends LightningElement {
             const currentReferenceId = this.getReferenceIdFromUrl(currentUrl);
             //No need to do anything if user is expanding currently selected reference
             if (referenceId !== currentReferenceId) {
-                const isSpecBasedReference =
-                    this.isSpecBasedReference(referenceId);
+                const isSpecBasedReference = this.isSpecBasedReference(
+                    referenceId
+                );
                 if (isSpecBasedReference) {
                     // Perform functionality same as item selection
                     this.onNavSelect(event);

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

@@ -1,6 +1,6 @@
 import { track } from "dxUtils/analytics";
 import { LightningElement, api } from "lwc";
-import { AnalyticsPayload, BreadcrumbItemVariant } from "typings/custom";
+import { BreadcrumbItemVariant } from "typings/custom";
 
 const BREADCRUMB_LONG = "breadcrumb_long";
 const BREADCRUMB_BACK_ARROW = "breadcrumb_back-arrow";
@@ -8,8 +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 level?: string;
+    @api breadcrumbLabels?: string;
 
     @api
     get label() {
@@ -51,14 +51,21 @@ export default class BreadcrumbItem extends LightningElement {
     }
 
     private onLinkClick(event: Event): void {
-        if (!this.analyticsEvent) {
-            return;
-        }
+        track(event.target!, "custEv_breadcrumbClick", {
+            click_text: this.label,
+            click_url: this.href,
+            element_type: "link",
+            nav_type: "breadcrumb",
+            nav_level: this.level ? this.level + 1 : 1,
+            nav_item: this.breadcrumbLabels
+        });
 
-        track(event.target!, this.analyticsEvent, {
-            ...this.analyticsBasePayload,
-            clickText: this.label,
-            clickUrl: this.href
+        track(event.target!, "custEv_linkClick", {
+            click_text: this.label,
+            click_url: this.href,
+            element_title: this.label,
+            element_type: "link",
+            content_category: "cta"
         });
     }
 }

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

@@ -3,21 +3,19 @@
         <template if:true={displayCrumbs}>
             <template if:false={renderSmallVariant}>
                 <doc-breadcrumb-item
-                    analytics-event={analyticsEventName}
-                    analytics-base-payload={analyticsBasePayload}
                     href={firstCrumb.href}
                     label={firstCrumb.label}
+                    breadcrumb-labels={breadcrumbLabels}
                 ></doc-breadcrumb-item>
                 <span class="breadcrumb-item_slash">/</span>
                 <template if:true={renderDropdown}>
                     <dx-dropdown
+                        analytics-event="custEv_breadcrumbClick"
+                        analytics-payload={ANALYTICS_PAYLOAD}
                         if:true={renderDropdown}
-                        analytics-event={analyticsEventName}
-                        analytics-base-payload={analyticsBasePayload}
                         options={dropdownOptions}
                         open-on-hover
                         placement="bottom"
-                        suppress-gtm-nav-headings
                         variant="indented"
                         width="fit-content"
                     >
@@ -32,11 +30,11 @@
                 </template>
                 <template for:each={breadcrumbItems} for:item="breadcrumb">
                     <doc-breadcrumb-item
-                        analytics-event={analyticsEventName}
-                        analytics-base-payload={analyticsBasePayload}
                         href={breadcrumb.href}
                         key={breadcrumb.id}
                         label={breadcrumb.label}
+                        level={breadcrumb.level}
+                        breadcrumb-labels={breadcrumbLabels}
                     ></doc-breadcrumb-item>
                     <span class="breadcrumb-item_slash" key={breadcrumb.label}>
                         /
@@ -44,14 +42,14 @@
                 </template>
                 <doc-breadcrumb-item
                     label={lastCrumb.label}
+                    breadcrumb-labels={breadcrumbLabels}
                 ></doc-breadcrumb-item>
             </template>
             <template if:true={renderSmallVariant}>
                 <doc-breadcrumb-item
-                    analytics-event={analyticsEventName}
-                    analytics-base-payload={analyticsBasePayload}
                     href={lastLinkCrump.href}
                     label={lastLinkCrump.label}
+                    breadcrumb-labels={breadcrumbLabels}
                     variant="back-arrow"
                 ></doc-breadcrumb-item>
             </template>

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

@@ -17,13 +17,6 @@ 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";
 
@@ -100,18 +93,20 @@ export default class Breadcrumbs extends LightningElement {
         return this.breadcrumbs[0];
     }
 
-    private get lastCrumb(): Breadcrumb {
-        return this.breadcrumbs[this.breadcrumbs.length - 1];
+    private get breadcrumbLabels(): string {
+        return this.breadcrumbs.map((crumb) => crumb.label).join(":");
     }
 
-    private get analyticsEventName() {
-        return ANALYTICS_EVENT_NAME;
+    private get lastCrumb(): Breadcrumb {
+        return this.breadcrumbs[this.breadcrumbs.length - 1];
     }
 
-    private get analyticsBasePayload() {
+    // this payload is only used for breadcrumb dropdown
+    private get ANALYTICS_PAYLOAD() {
         return {
-            ...ANALYTICS_BASE_PAYLOAD,
-            itemTitle: this.breadcrumbs.map((crumb) => crumb.label).join("/")
+            element_type: "link",
+            nav_type: "breadcrumb",
+            nav_level: 1
         };
     }
 
@@ -139,10 +134,13 @@ export default class Breadcrumbs extends LightningElement {
             return;
         }
 
-        this._breadcrumbs = toJson(breadcrumbs).map((crumb: Breadcrumb) => ({
-            ...crumb,
-            id: crumb.id || crumb.href
-        }));
+        this._breadcrumbs = toJson(breadcrumbs).map(
+            (crumb: Breadcrumb, index: number) => ({
+                ...crumb,
+                id: crumb.id || crumb.href,
+                level: index
+            })
+        );
     }
 
     private updateDropdownOptionAmount(): void {

package/src/modules/doc/content/content.css

@@ -6,7 +6,6 @@
 
 @import "dxHelpers/text";
 @import "dxHelpers/reset";
-@import "dxHelpers/card";
 @import "dxHelpers/table";
 
 .doc-content {
@@ -31,11 +30,6 @@
     margin-bottom: var(--dx-g-spacing-md);
 }
 
-.helpHead2 {
-    margin-top: 36px;
-    margin-bottom: var(--dx-g-spacing-md);
-}
-
 .relinfo {
     padding-top: var(--dx-g-spacing-sm);
     padding-bottom: var(--dx-g-spacing-sm);
@@ -64,61 +58,57 @@ td > img.content-image:first-child:last-child[alt="No"] {
     width: var(--dx-g-spacing-md);
 }
 
-h1 {
-    font-family: var(--dx-g-font-display);
-    font-size: var(--dx-g-text-4xl);
-
-    /* not registered */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     color: var(--dx-g-blue-vibrant-20);
-    letter-spacing: -0.4px;
-    line-height: 56px;
+    font-family: var(--dx-g-font-display);
+    font-weight: var(--dx-g-font-demi);
 }
 
-h2 {
-    font-family: var(--dx-g-font-display);
+h1 {
     font-size: var(--dx-g-text-3xl);
-    color: var(--dx-g-blue-vibrant-20);
-    letter-spacing: -0.1px;
+    letter-spacing: -0.8px;
     line-height: var(--dx-g-spacing-3xl);
+    margin: var(--dx-g-spacing-2xl) 0 var(--dx-g-spacing-md) 0;
 }
 
-h3 {
-    font-family: var(--dx-g-font-display);
-    font-size: 32px;
-    color: var(--dx-g-blue-vibrant-20);
-    letter-spacing: -0.1px;
+h2 {
+    font-size: var(--dx-g-text-2xl);
+    letter-spacing: -0.4px;
     line-height: var(--dx-g-spacing-2xl);
+    margin: var(--dx-g-spacing-2xl) 0 var(--dx-g-spacing-md) 0;
 }
 
-h4 {
-    font-family: var(--dx-g-font-display);
+h3 {
     font-size: var(--dx-g-text-xl);
-    color: var(--dx-g-blue-vibrant-20);
-    letter-spacing: 0;
+    letter-spacing: -0.4px;
     line-height: var(--dx-g-spacing-xl);
+    margin: var(--dx-g-spacing-xl) 0 var(--dx-g-spacing-md) 0;
 }
 
-h5 {
-    font-family: var(--dx-g-font-display);
-    font-size: var(--dx-g-text-lg);
-    color: var(--dx-g-blue-vibrant-20);
-    letter-spacing: 0;
-    line-height: 28px;
+h4 {
+    font-size: var(--dx-g-text-base);
+    letter-spacing: -0.5px;
+    line-height: var(--dx-g-spacing-lg);
+    margin: var(--dx-g-spacing-lg) 0 var(--dx-g-spacing-sm) 0;
 }
 
-h6 {
-    font-family: var(--dx-g-font-display);
-    font-size: var(--dx-g-text-base);
-    color: var(--dx-g-blue-vibrant-20);
-    letter-spacing: 0;
+h5 {
+    font-size: var(--dx-g-text-sm);
+    letter-spacing: -0.3px;
     line-height: var(--dx-g-spacing-mlg);
+    margin: var(--dx-g-spacing-md) 0 var(--dx-g-spacing-sm) 0;
 }
 
-.dx-text-heading-alt-1 {
-    color: var(--dx-g-gray-30);
-    font-family: var(--dx-g-font-sans);
-    font-size: var(--slds-text-lg);
-    line-height: 25px;
+h6 {
+    font-size: var(--dx-g-text-xs);
+    letter-spacing: -0.3px;
+    line-height: var(--dx-g-spacing-md);
+    margin: var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-sm) 0;
 }
 
 p,
@@ -165,10 +155,6 @@ a,
     color: var(--dx-g-blue-vibrant-50);
 }
 
-.helpHead1 {
-    margin-bottom: var(--dx-g-spacing-lg);
-}
-
 .shortdesc {
     font-family: var(--dx-g-font-sans);
     font-size: var(--dx-g-text-base);
@@ -270,6 +256,10 @@ li {
         var(--dx-g-spacing-lg);
 }
 
+li table {
+    margin-bottom: var(--dx-g-spacing-lg);
+}
+
 li > li {
     margin-left: var(--dx-g-spacing-2xl);
 }

package/src/modules/doc/content/content.ts

@@ -264,6 +264,7 @@ export default class Content extends LightningElement {
 
                     const img: HTMLImageElement = document.createElement("img");
                     img.src = src;
+                    img.alt = "";
                     if (alt) {
                         img.alt = alt;
                     }
@@ -323,8 +324,9 @@ export default class Content extends LightningElement {
         event.preventDefault();
         // eslint-disable-next-line no-use-before-define
         const target = event.currentTarget.dataset.id;
-        const [page, docId, deliverable, tempContentDocumentId] =
-            target.split("/");
+        const [page, docId, deliverable, tempContentDocumentId] = target.split(
+            "/"
+        );
         const [contentDocumentId, hash] = tempContentDocumentId.split("#");
         const newPageReference = {
             page: page,

package/src/modules/doc/contentCallout/contentCallout.css

@@ -6,11 +6,17 @@
     border-radius: 4px;
 }
 
-.dx-callout-base {
+.dx-callout-base,
+.dx-callout-plain {
     background-color: var(--dx-g-gray-95);
     border-color: var(--dx-g-gray-50);
 }
 
+.dx-callout-plain {
+    border: none;
+    margin-bottom: var(--dx-g-text-2xl);
+}
+
 .dx-callout-note {
     background-color: var(--dx-g-blue-vibrant-95);
     border-color: var(--dx-g-blue-vibrant-50);

package/src/modules/doc/contentCallout/contentCallout.html

@@ -1,8 +1,15 @@
 <template>
     <div class={className}>
-        <div class="doc-status-icon dx-callout-icon">
-            <dx-icon symbol={iconName} size="large" color={iconColor}></dx-icon>
-        </div>
+        <template if:false={hideIcon}>
+            <div class="doc-status-icon dx-callout-icon">
+                <dx-icon
+                    symbol={iconName}
+                    size="large"
+                    color={iconColor}
+                ></dx-icon>
+            </div>
+        </template>
+
         <div class="dx-callout-content">
             <p class="doc-status-title dx-callout-title dx-text-body-3">
                 {title}

package/src/modules/doc/contentCallout/contentCallout.ts

@@ -11,6 +11,9 @@ export default class ContentCallout extends LightningElement {
 
     connectedCallback() {
         switch (this.variant) {
+            case "plain":
+                this.cardVariant = "dx-callout-plain";
+                break;
             case "tip":
                 this.cardVariant = "dx-callout-tip";
                 this.iconColor = "green-vibrant-60";
@@ -49,6 +52,10 @@ export default class ContentCallout extends LightningElement {
         );
     }
 
+    get hideIcon() {
+        return this.variant === "plain";
+    }
+
     private isSlotEmpty: boolean = true;
     private onSlotChange(e: LightningSlotElement) {
         // @ts-ignore

package/src/modules/doc/contentLayout/contentLayout.html

@@ -32,9 +32,10 @@
                         if:true={showBreadcrumbs}
                         breadcrumbs={breadcrumbs}
                     ></doc-breadcrumbs>
-                    <div style={docContentStyle}>
-                        <slot onslotchange={onSlotChange}></slot>
-                    </div>
+                    <slot onslotchange={onSlotChange}></slot>
+                    <doc-sprig-survey
+                        if:true={shouldDisplayFeedback}
+                    ></doc-sprig-survey>
                 </div>
                 <div class="right-nav-bar is-sticky">
                     <dx-toc

package/src/modules/doc/contentLayout/contentLayout.ts

@@ -6,6 +6,8 @@ import { SearchSyncer } from "docUtils/SearchSyncer";
 
 type AnchorMap = { [key: string]: { intersect: boolean; id: string } };
 
+declare const Sprig: (eventType: string, eventNme: string) => void;
+
 const TOC_HEADER_TAG = "DOC-HEADING";
 const HIGHLIGHTABLE_SELECTOR = [
     "p",
@@ -75,10 +77,16 @@ export default class ContentLayout extends LightningElement {
     @track
     private _tocOptions: Array<unknown>;
 
+    private tocOptionIdsSet = new Set();
     private anchoredElements: AnchorMap = {};
     private lastScrollPosition: number;
     private observer?: IntersectionObserver;
     private hasRendered: boolean = false;
+    private contentLoaded: boolean = false;
+
+    get shouldDisplayFeedback() {
+        return this.contentLoaded && typeof Sprig !== "undefined";
+    }
 
     private searchSyncer = new SearchSyncer({
         callbacks: {
@@ -117,10 +125,6 @@ export default class ContentLayout extends LightningElement {
         );
     }
 
-    get docContentStyle(): string {
-        return this.showBreadcrumbs ? "" : "margin-top: 48px";
-    }
-
     connectedCallback(): void {
         const hasParentHighlightListener = closest(
             "doc-xml-content",
@@ -133,10 +137,6 @@ export default class ContentLayout extends LightningElement {
             );
             this.searchSyncer.init();
         }
-
-        this._scrollInterval = window.setInterval(() => {
-            this.saveScroll();
-        }, 1000);
     }
 
     renderedCallback(): void {
@@ -167,14 +167,6 @@ export default class ContentLayout extends LightningElement {
         window.clearInterval(this._scrollInterval);
     }
 
-    saveScroll() {
-        window.history.replaceState(
-            { scrollValue: document.body.scrollTop },
-            "",
-            window.location.href
-        );
-    }
-
     restoreScroll() {
         document.body.scrollTop = document.documentElement.scrollTop =
             window.history.state?.scrollValue;
@@ -224,32 +216,45 @@ export default class ContentLayout extends LightningElement {
         }
     };
 
+    onSidebarClick() {
+        this.resetScrollThreshold();
+    }
+
     onSlotChange(event: Event): void {
         const slotElements = (
             event.target as HTMLSlotElement
         ).assignedElements();
 
         if (slotElements.length) {
+            this.contentLoaded = true;
             const slotContentElement = slotElements[0];
             const headingElements =
                 slotContentElement.ownerDocument?.getElementsByTagName(
                     TOC_HEADER_TAG
                 );
+
             for (const headingElement of headingElements) {
                 // Sometimes elements hash is not being set when slot content is wrapped with div
                 headingElement.hash = headingElement.attributes.hash?.nodeValue;
             }
+
             const tocOptions = [];
+
             for (const headingElement of headingElements) {
                 headingElement.id = headingElement.hash;
 
-                // Update tocOptions from anchorTags
-                const tocItem = {
-                    anchor: `#${headingElement.hash}`,
-                    id: headingElement.id,
-                    label: headingElement.title
-                };
-                tocOptions.push(tocItem);
+                // Update tocOptions from anchorTags only for H2
+                const isH2 =
+                    headingElement?.shadowRoot?.querySelectorAll("h2").length;
+                if (isH2) {
+                    const tocItem = {
+                        anchor: `#${headingElement.hash}`,
+                        id: headingElement.id,
+                        label: headingElement.title
+                    };
+                    tocOptions.push(tocItem);
+                    this.tocOptionIdsSet.add(headingElement.id);
+                }
             }
 
             this._tocOptions = tocOptions;
@@ -300,7 +305,10 @@ export default class ContentLayout extends LightningElement {
     }
 
     private assignElementId(id: string): void {
-        this.tocValue = id;
+        // Change toc(RNB) highlight only for H2
+        if (this.tocOptionIdsSet.has(id)) {
+            this.tocValue = id;
+        }
     }
 
     private dispatchHighlightChange(term: string): void {

package/src/modules/doc/header/header.css

@@ -43,7 +43,7 @@ header:not(.has-brand) > .header_l2 {
     --button-primary-color-hover: var(--dx-g-blue-vibrant-40);
 }
 
-.header_lang-dropdown dx-button {
+.header_lang-dropdown > dx-button {
     --dx-c-button-primary-color: var(--button-primary-color);
     --dx-c-button-primary-color-hover: var(--button-primary-color-hover);
     --dx-c-slot-empty-width: min-content;
@@ -52,7 +52,7 @@ header:not(.has-brand) > .header_l2 {
     border-bottom: 1px dashed var(--border-color);
 }
 
-.header_lang-dropdown dx-button:hover {
+.header_lang-dropdown > dx-button:hover {
     --border-color: var(--button-primary-color-hover);
 }
 
@@ -89,7 +89,7 @@ header:not(.has-brand) > .header_l2 {
         margin-left: auto;
     }
 
-    .header_lang-dropdown dx-button {
+    .header_lang-dropdown > dx-button {
         padding: var(--dx-g-spacing-2xs) 0;
     }
 

package/src/modules/doc/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">
@@ -42,16 +42,19 @@
                     class="header-tbid-login"
                     onclick={closeMobileNavMenu}
                 >
-                    <dw-tbid-login-menu></dw-tbid-login-menu>
+                    <dw-tbid-login-menu
+                        tbid-api-base-url={tbidApiBaseUrl}
+                        tbid-base-url={tbidBaseUrl}
+                    ></dw-tbid-login-menu>
                 </div>
                 <div if:true={showSignup} class="header-login-signup">
                     <dx-button
-                        aria-label="Sign Up For Salesforce Developer Edition"
+                        aria-label="Browse Trials"
                         size="small"
                         href={signupLink}
                         onclick={handleSignUpClick}
                     >
-                        Sign Up
+                        Browse Trials
                     </dx-button>
                 </div>
                 <dx-header-mobile-nav-menu
@@ -84,7 +87,7 @@
                             symbol={brand}
                             size="xlarge"
                         ></dx-icon>
-                        <span class="subtitle dx-text-heading-4">
+                        <span class="subtitle dx-text-display-6">
                             {subtitle}
                         </span>
                     </a>
@@ -147,6 +150,7 @@
                         aria-label={bailLabel}
                         class="header_bail-link"
                         href={bailHref}
+                        onclick={handleBailClick}
                         variant="tertiary"
                         icon-symbol="new_window"
                         target="_blank"

package/src/modules/doc/header/header.ts

@@ -4,6 +4,7 @@ import type { OptionWithNested, OptionWithLink } from "typings/custom";
 import { HeaderBase } from "dxBaseElements/headerBase";
 import { toJson } from "dxUtils/normalizers";
 import get from "lodash.get";
+import { track } from "dxUtils/analytics";
 
 const TABLET_MATCH = "980px";
 const MOBILE_MATCH = "880px";
@@ -143,4 +144,27 @@ export default class Header extends HeaderBase {
         this._language = detail;
         this.dispatchEvent(new CustomEvent("langchange", { detail }));
     }
+
+    private handleBailClick(event: Event) {
+        const payload = {
+            click_text: "pdf",
+            click_url: this.bailHref,
+            element_title: "pdf",
+            element_type: "link",
+            content_category: "download"
+        };
+        track(event.target!, "custEv_pdfDownload", {
+            ...payload,
+            file_name: this.getFilename(this.bailHref!),
+            file_extension: "pdf"
+        });
+
+        track(event.target!, "custEv_linkClick", {
+            ...payload
+        });
+    }
+
+    private getFilename = function (path: string) {
+        return path.substring(path.lastIndexOf("/") + 1);
+    };
 }

package/src/modules/doc/heading/heading.css

@@ -1,54 +1,33 @@
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    color: var(--dx-g-blue-vibrant-20);
-    font-family: var(--dx-g-font-display);
-    font-weight: var(--dx-g-font-demi);
-}
+@import "dxHelpers/text";
 
-.display-3 {
-    margin: 0 0 24px 0;
-    font-size: var(--dx-g-text-3xl);
-    letter-spacing: -0.85px;
-    line-height: var(--dx-g-text-4xl);
+h1 {
+    margin: var(--dx-g-spacing-2xl) 0 var(--dx-g-spacing-md) 0;
 }
 
-.display-3 doc-heading-content {
-    --doc-c-heading-anchor-button-bottom: 8px;
+h1 doc-heading-content {
+    --doc-c-heading-anchor-button-bottom: 9.5px;
 }
 
-.display-4 {
-    margin: var(--dx-g-spacing-xl) 0 var(--dx-g-spacing-md) 0;
-    font-size: var(--dx-g-text-xl);
-    letter-spacing: -0.1px;
-    line-height: var(--dx-g-spacing-lg);
+h2 {
+    margin: var(--dx-g-spacing-2xl) 0 var(--dx-g-spacing-md) 0;
 }
 
-.display-4 doc-heading-content {
-    --doc-c-heading-anchor-button-bottom: -3px;
+h2 doc-heading-content {
+    --doc-c-heading-anchor-button-bottom: 3px;
 }
 
-.display-5 {
-    margin: var(--dx-g-spacing-lg) 0 var(--dx-g-spacing-md) 0;
-    font-size: var(--dx-g-text-lg);
-    letter-spacing: -0.1px;
-    line-height: var(--dx-g-spacing-lg);
+h3 {
+    margin: var(--dx-g-spacing-xl) 0 var(--dx-g-spacing-md) 0;
 }
 
-.display-5 doc-heading-content {
-    --doc-c-heading-anchor-button-bottom: -4px;
+h3 doc-heading-content {
+    --doc-c-heading-anchor-button-bottom: -0.5px;
 }
 
-.display-6 {
-    margin: var(--dx-g-spacing-md) 0 var(--dx-g-spacing-sm) 0;
-    font-size: var(--dx-g-text-base);
-    letter-spacing: 0;
-    line-height: var(--dx-g-spacing-mlg);
+h4 {
+    margin: var(--dx-g-spacing-lg) 0 var(--dx-g-spacing-sm) 0;
 }
 
-.display-6 doc-heading-content {
+h4 doc-heading-content {
     --doc-c-heading-anchor-button-bottom: -6px;
 }

package/src/modules/doc/heading/heading.ts

@@ -1,16 +1,16 @@
 import { LightningElement, api } from "lwc";
 
-export const displayLevels = ["3", "4", "5", "6"];
-
-export const ariaLevels = ["1", "2", "3", "4"];
-
 export const ariaDisplayLevels: { [key: string]: string } = {
-    "1": "3",
-    "2": "4",
-    "3": "5",
-    "4": "6"
+    "1": "4",
+    "2": "5",
+    "3": "6",
+    "4": "8"
 };
 
+export const ariaLevels = Object.keys(ariaDisplayLevels);
+
+export const displayLevels = Object.values(ariaDisplayLevels);
+
 export default class Heading extends LightningElement {
     @api title: string = "";
     @api hash: string | null = null;
@@ -60,6 +60,6 @@ export default class Heading extends LightningElement {
     }
 
     private get className(): string {
-        return `display-${this.displayLevel}`;
+        return `dx-text-display-${this.displayLevel}`;
     }
 }

package/src/modules/doc/phase/phase.ts

@@ -43,8 +43,9 @@ export default class Phase extends LightningElement {
     }
 
     renderedCallback() {
-        const phaseBodyContainer =
-            this.template.querySelector(".doc-phase-body");
+        const phaseBodyContainer = this.template.querySelector(
+            ".doc-phase-body"
+        );
         if (phaseBodyContainer && this.docPhaseInfo) {
             // eslint-disable-next-line @lwc/lwc/no-inner-html
             phaseBodyContainer.innerHTML = this.docPhaseInfo.body;

package/src/modules/doc/sprigSurvey/sprigSurvey.html

@@ -0,0 +1,20 @@
+<template lwc:render-mode="light">
+    <dx-hr no-padding spacing="md"></dx-hr>
+    <div class="survey-container">
+        <div class="text-container">
+            <b>DID THIS ARTICLE SOLVE YOUR ISSUE?</b>
+            <br />
+            Let us know so we can improve!
+        </div>
+        <div class="btn-container">
+            <dx-button
+                variant="secondary"
+                aria-label="Share Your Feedback"
+                onclick={openSurvey}
+            >
+                Share your feedback
+            </dx-button>
+        </div>
+    </div>
+    <dx-hr no-padding spacing="md"></dx-hr>
+</template>

package/src/modules/doc/sprigSurvey/sprigSurvey.scoped.css

@@ -0,0 +1,16 @@
+:host .survey-container {
+    align-items: center;
+    align-content: center;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    margin: 20px 0 20px 0;
+}
+
+dx-hr:first-of-type::part(hr) {
+    margin-top: var(--dx-g-spacing-2xl);
+}
+
+.text-container {
+    width: 100%;
+}

package/src/modules/doc/sprigSurvey/sprigSurvey.ts

@@ -0,0 +1,16 @@
+import { LightningElement } from "lwc";
+import cx from "classnames";
+
+declare const Sprig: (eventType: string, eventNme: string) => void;
+
+export default class Phase extends LightningElement {
+    static renderMode = "light";
+
+    get className() {
+        return cx("container");
+    }
+
+    openSurvey() {
+        Sprig("track", "ProvideFeedback");
+    }
+}

package/src/modules/doc/toc/toc.html

@@ -96,9 +96,7 @@
                                                                     <a
                                                                         href={child5.a_attr.href}
                                                                         data-id={child5.id}
-                                                                        class="
-                                                                            nav1
-                                                                        "
+                                                                        class="nav1"
                                                                         onclick={handleNavClick}
                                                                     >
                                                                         {child5.text}

package/src/modules/doc/toolbar/toolbar.ts

@@ -40,9 +40,9 @@ export default class Toolbar extends LightningElement {
             "select[name=languages]"
         ) as HTMLSelectElement;
         if (languageEl) {
-            const languageValue = (
-                languageEl[languageEl.selectedIndex] as HTMLOptionElement
-            ).value;
+            const languageValue = (languageEl[
+                languageEl.selectedIndex
+            ] as HTMLOptionElement).value;
             this.dispatchEvent(
                 new CustomEvent("languageselected", {
                     detail: {
@@ -61,9 +61,9 @@ export default class Toolbar extends LightningElement {
             "select[name=versions]"
         ) as HTMLSelectElement;
         if (versionEl) {
-            const versionValue = (
-                versionEl[versionEl.selectedIndex] as HTMLOptionElement
-            ).value;
+            const versionValue = (versionEl[
+                versionEl.selectedIndex
+            ] as HTMLOptionElement).value;
             this.dispatchEvent(
                 new CustomEvent("versionselected", {
                     detail: {

package/src/modules/doc/xmlContent/utils.ts

@@ -87,7 +87,9 @@ export class FetchContent {
         return json;
     }
 
-    private normalizeToc(apiToc: Array<ApiNavItem>): {
+    private normalizeToc(
+        apiToc: Array<ApiNavItem>
+    ): {
         tocMap: { [key: string]: TreeNode };
         normalizedToc: Array<TreeNode>;
     } {

package/src/modules/doc/xmlContent/{xmlContent.scoped.css → xmlContent.css}

@@ -3,18 +3,6 @@
     --button-primary-color-hover: var(--dx-g-blue-vibrant-40);
 }
 
-dx-dropdown dx-button {
-    --dx-c-button-primary-color: var(--button-primary-color);
-    --dx-c-button-primary-color-hover: var(--button-primary-color-hover);
-    --border-color: var(--button-primary-color);
-
-    border-bottom: 1px dashed var(--border-color);
-}
-
-dx-dropdown dx-button:hover {
-    --border-color: var(--button-primary-color-hover);
-}
-
 doc-breadcrumbs {
     --dx-c-popover-z-index: 5;
 
@@ -26,6 +14,18 @@ dx-dropdown {
     --dx-c-dropdown-option-font-size: var(--dx-g-text-sm);
 }
 
+dx-dropdown > dx-button {
+    --dx-c-button-primary-color: var(--button-primary-color);
+    --dx-c-button-primary-color-hover: var(--button-primary-color-hover);
+    --border-color: var(--button-primary-color);
+
+    border-bottom: 1px dashed var(--border-color);
+}
+
+dx-dropdown > dx-button:hover {
+    --border-color: var(--button-primary-color-hover);
+}
+
 .document-pickers {
     margin-left: auto;
     margin-right: var(--dx-g-spacing-sm);

package/src/modules/doc/xmlContent/xmlContent.html

@@ -1,4 +1,4 @@
-<template lwc:render-mode="light">
+<template>
     <doc-content-layout
         if:true={loaded}
         coveo-organization-id={coveoOrganizationId}
@@ -14,8 +14,8 @@
         <div slot="sidebar-header" class="document-pickers">
             <dx-dropdown
                 data-type="version"
-                suppress-gtm-nav-headings
-                analytics-event={analyticsEvent}
+                analytics-event="custEv_ctaLinkClick"
+                analytics-payload={ANALYTICS_PAYLOAD}
                 options={versionOptions}
                 value={version.id}
                 width="290px"
@@ -34,7 +34,6 @@
             docs-data={docContent}
             page-reference={pageReference}
             onnavclick={handleNavClick}
-            style={docContentStyle}
         ></doc-content>
     </doc-content-layout>
 </template>

package/src/modules/doc/xmlContent/xmlContent.ts

@@ -28,8 +28,6 @@ export default class DocXmlContent extends LightningElementWithState<{
     isFetchingContent: boolean;
     lastHighlightedSearch: string;
 }> {
-    static renderMode = "light";
-
     @api apiDomain = "https://developer.salesforce.com";
     @api coveoOrganizationId!: string;
     @api coveoPublicAccessToken!: string;
@@ -65,7 +63,6 @@ export default class DocXmlContent extends LightningElementWithState<{
     private sidebarContent: Array<TreeNode> = null;
     private version: DocVersion = null;
     private docTitle = "";
-    private analyticsEvent = "custEv_ctaLinkClick";
     private _pathName = "";
     private _pageHeader?: Header;
     private listenerAttached = false;
@@ -148,7 +145,7 @@ export default class DocXmlContent extends LightningElementWithState<{
                 ? this.pageReference.hash.split("#")[1]
                 : this.pageReference?.hash;
 
-        const contentEl = this.querySelector("doc-content");
+        const contentEl = this.template.querySelector("doc-content");
         const anchorEl =
             urlSectionLink &&
             (contentEl?.shadowRoot?.querySelector(`[id='${urlSectionLink}']`) ||
@@ -283,8 +280,15 @@ export default class DocXmlContent extends LightningElementWithState<{
         );
     }
 
-    private handlePopState = (): void =>
-        this.updatePageReference(this.getReferenceFromUrl());
+    private get ANALYTICS_PAYLOAD() {
+        return {
+            element_title: "version picker",
+            content_category: "cta"
+        };
+    }
+
+    private handlePopState = (event: PopStateEvent): void =>
+        this.updatePageReference(this.getReferenceFromUrl(), event);
 
     handleSelect(event: CustomEvent<{ name: string }>): void {
         event.stopPropagation();
@@ -329,7 +333,10 @@ export default class DocXmlContent extends LightningElementWithState<{
         this.fetchDocument();
     };
 
-    updatePageReference(newPageReference: PageReference): void {
+    updatePageReference(
+        newPageReference: PageReference,
+        event: PopStateEvent | undefined = undefined
+    ): void {
         this.pageReference.hash = newPageReference.hash;
         this.pageReference.search = newPageReference.search;
 
@@ -346,7 +353,10 @@ export default class DocXmlContent extends LightningElementWithState<{
         }
 
         this.fetchContent()
-            .then(() => this.buildBreadcrumbs())
+            .then(() => {
+                this.buildBreadcrumbs();
+                document.body.scrollTop = event?.state?.scroll?.value || 0;
+            })
             .catch(handleContentError);
     }
 
@@ -513,9 +523,9 @@ export default class DocXmlContent extends LightningElementWithState<{
     }
 
     private updateSearchInput(searchParam: string): void {
-        this.querySelector("doc-content-layout")?.setSidebarInputValue(
-            searchParam
-        );
+        this.template
+            .querySelector("doc-content-layout")
+            ?.setSidebarInputValue(searchParam);
     }
 
     private pageReferenceToString(reference: PageReference): string {
@@ -582,10 +592,6 @@ export default class DocXmlContent extends LightningElementWithState<{
         return this.breadcrumbs && this.breadcrumbs.length > 1;
     }
 
-    get docContentStyle(): string {
-        return this.showBreadcrumbs ? "" : "margin-top: 48px";
-    }
-
     private buildBreadcrumbs(): void {
         const { contentDocumentId } = this.pageReference;
         if (!contentDocumentId) {
@@ -617,6 +623,20 @@ export default class DocXmlContent extends LightningElementWithState<{
         return [item];
     }
 
+    // This method take docId and drops the version from the docId.
+    // Example:
+    // Takes input string: docId = "atlas.en-us.238.0.b2b_b2c_comm_dev.meta"
+    // Output string: filteredDocId = "atlas.en-us.b2b_b2c_comm_dev.meta"
+    dropVersionFromDocId(docId: string): string {
+        if (!this.version?.id) {
+            return docId;
+        }
+
+        const curVersion = this.version.id + ".";
+        const filteredDocId = docId.replace(curVersion, "");
+        return filteredDocId;
+    }
+
     addMetatags(): void {
         const div = document.createElement("div");
         div.innerHTML = this.docContent;
@@ -648,14 +668,43 @@ export default class DocXmlContent extends LightningElementWithState<{
                 'link[rel="canonical"]'
             );
             if (metadescription) {
+                const copyPageReference = { ...this.pageReference };
+                copyPageReference.docId = copyPageReference.docId
+                    ? this.dropVersionFromDocId(copyPageReference.docId)
+                    : copyPageReference.docId;
                 metadescription.setAttribute(
                     "href",
                     window.location.protocol +
                         "//" +
                         window.location.host +
-                        this.pageReferenceToString(this.pageReference)
+                        this.pageReferenceToString(copyPageReference)
                 );
             }
         }
+
+        this.addNoIndexMetaForOlderDocVersions();
+    }
+
+    /**
+     * Method adds noindex, follow meta tag to the older Couch DB doc pages.
+     * Fixes W-12547462.
+     */
+    private addNoIndexMetaForOlderDocVersions() {
+        // eslint-disable-next-line @lwc/lwc/no-document-query
+        const headTag = document.getElementsByTagName("head");
+        // this checks if the selected version is not the latest version,
+        // then it adds the noindex, follow meta tag to the older version pages.
+        // assumption is that first version in the availableVersions array is the latest.
+        if (
+            headTag.length &&
+            this.version &&
+            this.availableVersions.length &&
+            this.version.id !== this.availableVersions[0].id
+        ) {
+            const robotsMeta = document.createElement("meta");
+            robotsMeta.setAttribute("name", "robots");
+            robotsMeta.setAttribute("content", "noindex, follow");
+            headTag[0].appendChild(robotsMeta);
+        }
     }
 }