@salesforcedevs/docs-components 1.3.8 → 1.3.9-h2-toc-fix

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.8",
+    "version": "1.3.9-h2-toc-fix",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
@@ -24,5 +24,5 @@
         "@types/lodash.orderby": "^4.6.7",
         "@types/lodash.uniqby": "^4.7.7"
     },
-    "gitHead": "a428b8618c3d33b4a40f8aa3cefde6ac0d04cf0b"
+    "gitHead": "4629fdd9ca18a13480044ad43515b91945d16aad"
 }

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

@@ -2,6 +2,10 @@
     <dx-brand-theme-provider brand={brand}>
         <header class={className}>
             <dx-skip-nav-link></dx-skip-nav-link>
+            <dx-banner
+                if:true={showBanner}
+                banner-markup={bannerMarkup}
+            ></dx-banner>
             <div class="header_l1">
                 <div if:true={showMenuButton} class="nav_menu-ctas">
                     <dx-button
@@ -38,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
@@ -80,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>
@@ -143,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.html

@@ -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

@@ -63,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;
@@ -281,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();
@@ -327,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;
 
@@ -344,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);
     }
 
@@ -580,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) {
@@ -615,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;
@@ -646,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);
+        }
     }
 }

package/LICENSE

@@ -1,12 +0,0 @@
-Copyright (c) 2020, Salesforce.com, Inc.
-All rights reserved.
-
-Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
-
-* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
-
-* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
-
-* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.