@salesforcedevs/docs-components 1.3.344-spage → 1.3.345-refactor-tab-alpha

package/lwc.config.json

@@ -13,6 +13,7 @@
         "doc/contentLayout",
         "doc/contentMedia",
         "doc/docXmlContent",
+        "doc/lwcContentLayout",
         "doc/header",
         "doc/heading",
         "doc/headingAnchor",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.344-spage",
+    "version": "1.3.345-refactor-tab-alpha",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/modules/doc/contentLayout/contentLayout.css

@@ -1,131 +1 @@
-:host {
-    --dx-c-content-vertical-spacing: var(--dx-g-spacing-lg);
-    --dx-c-content-sidebar-sticky-top: calc(
-        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
-    );
-    --dx-c-sidebar-height: calc(
-        100vh -
-            calc(
-                var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
-            )
-    );
-    --dx-c-content-scroll-margin-top: calc(
-        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height) +
-            var(--dx-g-spacing-2xl)
-    );
-
-    display: block;
-}
-
-doc-breadcrumbs {
-    --dx-c-popover-z-index: 5;
-
-    display: block;
-    margin-bottom: var(--dx-g-spacing-2xl);
-}
-
-dx-sidebar,
-dx-sidebar-old {
-    --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
-
-    z-index: calc(var(--dx-g-z-index-100) + 5);
-}
-
-dx-toc {
-    --dx-c-toc-width: unset;
-
-    height: calc(100% - var(--dx-c-content-vertical-spacing) * 2);
-    margin: var(--dx-c-content-vertical-spacing) 0;
-    overflow-y: auto;
-}
-
-dx-sidebar,
-dx-toc {
-    display: block;
-}
-
-/* offset page jump link due to fixed header */
-::slotted(doc-heading) {
-    scroll-margin-top: var(--dx-c-content-scroll-margin-top);
-}
-
-.content {
-    display: flex;
-    position: relative;
-}
-
-.content-body-doc-phase-container {
-    flex: 1;
-    border-left: 1px solid var(--dx-g-gray-90);
-}
-
-.content-body-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    max-width: var(--dx-g-doc-content-max-width);
-
-    /* Derived this manually by substracting (topHeader, doc header, banner and the content). */
-    min-height: 62vh;
-    margin: auto;
-    padding: 0 var(--dx-g-global-header-padding-horizontal);
-    margin-bottom: calc(2 * (var(--dx-g-spacing-5xl) + 4px));
-}
-
-.content-body {
-    margin: var(--dx-g-spacing-md) 0 0;
-    max-width: 900px;
-    flex: 1;
-    width: 0;
-}
-
-.is-sticky {
-    align-self: flex-start;
-    position: sticky;
-    top: var(--dx-c-content-sidebar-sticky-top);
-}
-
-.right-nav-bar {
-    margin-left: var(--dx-g-spacing-2xl);
-}
-
-@media screen and (max-width: 1024px) {
-    .right-nav-bar {
-        display: none;
-    }
-}
-
-@media screen and (max-width: 800px) {
-    .content-body {
-        margin-top: var(--dx-c-content-vertical-spacing);
-    }
-
-    .content-body-doc-phase-container {
-        border-left: 0;
-    }
-}
-
-@media screen and (max-width: 768px) {
-    .is-sticky {
-        width: 100%;
-    }
-
-    .content {
-        flex-direction: column;
-    }
-
-    .content-body-container {
-        padding-right: 0;
-        overflow-x: auto;
-        margin-bottom: calc(var(--dx-g-spacing-5xl) + 4px);
-    }
-
-    .left-nav-bar {
-        height: unset;
-    }
-
-    .content-body {
-        margin-left: var(--dx-g-spacing-mlg, 20px);
-        margin-right: var(--dx-g-spacing-mlg, 20px);
-    }
-}
+@import "docHelpers/contentLayoutStyle";

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

@@ -11,7 +11,7 @@ type AnchorMap = { [key: string]: { intersect: boolean; id: string } };
 declare const Sprig: (eventType: string, eventNme: string) => void;
 
 const TOC_HEADER_TAG = "doc-heading";
-const RNB_BY_TAB = "docs-tab";
+
 const HIGHLIGHTABLE_SELECTOR = [
     "p",
     "h1",
@@ -83,87 +83,26 @@ export default class ContentLayout extends LightningElement {
     }
 
     @track
-    private _sidebarContent: unknown;
+    protected _sidebarContent: unknown;
 
-    private _breadcrumbs = null;
+    protected _breadcrumbs = null;
 
     @track
-    private _tocOptions!: Array<unknown>;
+    protected _tocOptions!: Array<unknown>;
 
-    private tocOptionIdsSet = new Set();
-    private anchoredElements: AnchorMap = {};
-    private lastScrollPosition!: number;
-    private observer?: IntersectionObserver;
-    private hasRendered: boolean = false;
-    private contentLoaded: boolean = false;
-    private sidebarOpen: boolean = false;
-    private rnbByTab: boolean = false;
+    protected tocOptionIdsSet = new Set();
+    protected anchoredElements: AnchorMap = {};
+    protected lastScrollPosition!: number;
+    protected observer?: IntersectionObserver;
+    protected hasRendered: boolean = false;
+    protected contentLoaded: boolean = false;
+    protected sidebarOpen: boolean = false;
 
     get shouldDisplayFeedback() {
         return this.contentLoaded && typeof Sprig !== "undefined";
     }
 
-    private setRNBByTab() {
-        const tabPanelListItem: any = this.getTabPanelList();
-        this.rnbByTab = tabPanelListItem?.id === RNB_BY_TAB ? true : false;
-    }
-
-    get showTabBasedRNB() {
-        return this.rnbByTab;
-    }
-
-    onTabChanged = () => {
-        this.updateRNB();
-    };
-
-    private getTabPanelList() {
-        return document.querySelector("dx-tab-panel-list");
-    }
-
-    updateRNB = () => {
-        const headingElements = this.getHeadingElements();
-        headingElements.forEach((headingElement: any) => {
-            // Sometimes elements hash and header is not being set when slot content is wrapped with div
-            headingElement.hash = headingElement.attributes.hash?.nodeValue;
-            headingElement.header = headingElement.attributes.header?.nodeValue;
-        });
-        this.updateTocItems(headingElements);
-    };
-
-    private getHeadingElements() {
-        let headingElements = document.querySelectorAll(TOC_HEADER_TAG);
-        if (this.showTabBasedRNB) {
-            const tabPanelListItem: any = this.getTabPanelList();
-            const tabPanels =
-                tabPanelListItem?.querySelectorAll("dx-tab-panel");
-            for (const tabPanelItem of tabPanels) {
-                if (tabPanelItem.active) {
-                    headingElements =
-                        tabPanelItem.querySelectorAll(TOC_HEADER_TAG);
-                    break;
-                }
-            }
-        }
-        return headingElements;
-    }
-
-    private updateURL() {
-        const tabs = this.getAllTabs();
-        const selectedTabId = this.getSelectedTabId();
-        tabs.forEach((tab: any) => {
-            if (tab.getAttribute("aria-selected") === "true") {
-                const tabID = tab.getAttribute("aria-label");
-                const url = new URL(window.location.href);
-                if (selectedTabId !== tabID) {
-                    url.searchParams.set("type", tabID);
-                    url.hash = "";
-                    window.history.pushState({}, "", url.toString());
-                }
-            }
-        });
-    }
-
-    private searchSyncer = new SearchSyncer({
+    protected searchSyncer = new SearchSyncer({
         callbacks: {
             onSearchChange: (nextSearchString: string): void => {
                 this.dispatchHighlightChange(
@@ -177,11 +116,11 @@ export default class ContentLayout extends LightningElement {
         shouldStopPropagation: true,
         target: window
     });
-    private tocValue?: string = undefined;
+    protected tocValue?: string = undefined;
     // eslint-disable-next-line no-undef
-    private observerTimerId?: NodeJS.Timeout;
-    private didScrollToSelectedHash = false;
-    private _scrollInterval = 0;
+    protected observerTimerId?: NodeJS.Timeout;
+    protected didScrollToSelectedHash = false;
+    protected _scrollInterval = 0;
 
     get showToc(): boolean {
         return this.tocOptions && this.tocOptions.length > 0;
@@ -198,13 +137,6 @@ export default class ContentLayout extends LightningElement {
         );
     }
 
-    // This event gets triggered when navigating back/forward
-    handlePopState = (): void => {
-        if (this.showTabBasedRNB) {
-            this.restoreTabSelection();
-        }
-    };
-
     connectedCallback(): void {
         const hasParentHighlightListener = closest(
             "doc-xml-content",
@@ -217,45 +149,6 @@ export default class ContentLayout extends LightningElement {
             );
             this.searchSyncer.init();
         }
-        window.addEventListener("popstate", this.handlePopState);
-    }
-
-    private getSelectedTabId() {
-        const urlParams = new URLSearchParams(window.location.search);
-        const selectedTabId = urlParams.get("type");
-        return selectedTabId;
-    }
-
-    private restoreTabSelection() {
-        requestAnimationFrame(() => {
-            const selectedTabId = this.getSelectedTabId();
-            if (selectedTabId) {
-                this.selectTabById(selectedTabId);
-            }
-        });
-    }
-
-    private getAllTabs(): any[] {
-        const tabPanelListItem: any = this.getTabPanelList();
-        if (tabPanelListItem?.shadowRoot) {
-            return Array.from(
-                tabPanelListItem.shadowRoot.querySelectorAll(
-                    "dx-tab-panel-item"
-                )
-            ).map((tabPanelItem: any) =>
-                tabPanelItem.shadowRoot.querySelector("button")
-            );
-        }
-        return [];
-    }
-
-    private selectTabById(tabId: string) {
-        const tabs = this.getAllTabs();
-        tabs.forEach((tab: any) => {
-            if (tab.getAttribute("aria-label") === tabId) {
-                tab.click();
-            }
-        });
     }
 
     renderedCallback(): void {
@@ -275,11 +168,6 @@ export default class ContentLayout extends LightningElement {
 
         if (!this.hasRendered) {
             this.hasRendered = true;
-            this.setRNBByTab();
-            if (this.showTabBasedRNB) {
-                window.addEventListener("tabchanged", this.onTabChanged);
-                this.restoreTabSelection();
-            }
             this.restoreScroll();
         }
     }
@@ -292,8 +180,6 @@ export default class ContentLayout extends LightningElement {
         );
         window.removeEventListener("scroll", this.adjustNavPosition);
         window.removeEventListener("resize", this.adjustNavPosition);
-        window.removeEventListener("tabchanged", this.onTabChanged);
-        window.removeEventListener("popstate", this.handlePopState);
         this.searchSyncer.dispose();
         this.clearRenderObserverTimer();
 
@@ -439,12 +325,7 @@ export default class ContentLayout extends LightningElement {
         );
 
         // Note: We are doing document.querySelectorAll as a quick fix as we are not getting heading elements reference this.querySelectorAll
-        const headingElements = this.getHeadingElements();
-
-        // We only need to update URL in case of /docs and ignore if tabs are used anywhere else in DSC
-        if (this.showTabBasedRNB) {
-            this.updateURL();
-        }
+        const headingElements = document.querySelectorAll(TOC_HEADER_TAG);
 
         for (const headingElement of headingElements as any) {
             // Add headingElements to intersectionObserver for highlighting respective RNB item when user scroll
@@ -462,38 +343,51 @@ export default class ContentLayout extends LightningElement {
         }
     };
 
-    onSlotChange(): void {
-        this.updateRNB();
-        this.contentLoaded = true;
-    }
+    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
+                );
 
-    // eslint-disable-next-line no-undef
-    private updateTocItems(headingElements: NodeListOf<Element>): void {
-        const tocOptions = [];
+            for (const headingElement of headingElements as any) {
+                // Sometimes elements hash and header is not being set when slot content is wrapped with div
+                headingElement.hash = headingElement.attributes.hash?.nodeValue;
+                headingElement.header =
+                    headingElement.attributes.header?.nodeValue;
+            }
 
-        for (const headingElement of headingElements as any) {
-            headingElement.id = headingElement.hash;
-
-            // Update tocOptions from anchorTags only for H2, consider default as 2 as per component
-            const headingAriaLevel =
-                headingElement.attributes["aria-level"]?.nodeValue || "2";
-            const isH2 = headingAriaLevel === "2";
-
-            if (isH2) {
-                const tocItem = {
-                    anchor: `#${headingElement.hash}`,
-                    id: headingElement.id,
-                    label: headingElement.header
-                };
-                tocOptions.push(tocItem);
-                this.tocOptionIdsSet.add(headingElement.id);
+            const tocOptions = [];
+            for (const headingElement of headingElements as any) {
+                headingElement.id = headingElement.hash;
+
+                // Update tocOptions from anchorTags only for H2, consider default as 2 as per component
+                const headingAriaLevel =
+                    headingElement.attributes["aria-level"]?.nodeValue || "2";
+                const isH2 = headingAriaLevel === "2";
+
+                if (isH2) {
+                    const tocItem = {
+                        anchor: `#${headingElement.hash}`,
+                        id: headingElement.id,
+                        label: headingElement.header
+                    };
+                    tocOptions.push(tocItem);
+                    this.tocOptionIdsSet.add(headingElement.id);
+                }
             }
-        }
 
-        this._tocOptions = tocOptions;
+            this._tocOptions = tocOptions;
+        }
     }
 
-    private disconnectObserver(): void {
+    protected disconnectObserver(): void {
         if (this.observer) {
             this.observer.disconnect();
             this.observer = undefined;
@@ -501,7 +395,7 @@ export default class ContentLayout extends LightningElement {
     }
 
     // eslint-disable-next-line no-undef
-    private scrollToHash(headingElements: NodeListOf<Element>): void {
+    protected scrollToHash(headingElements: NodeListOf<Element>): void {
         let { hash } = window.location;
         if (hash) {
             hash = hash.substr(1);
@@ -538,7 +432,7 @@ export default class ContentLayout extends LightningElement {
         }
     }
 
-    private scrollIntoViewWithOffset(
+    protected scrollIntoViewWithOffset(
         headingElement: HTMLElement,
         offset: number
     ) {
@@ -551,7 +445,7 @@ export default class ContentLayout extends LightningElement {
         });
     }
 
-    private calculateActualSection(): void {
+    protected calculateActualSection(): void {
         const currentScrollPosition = document.documentElement.scrollTop;
         const id = Object.keys(this.anchoredElements).find(
             (_id) => this.anchoredElements[_id].intersect
@@ -566,21 +460,21 @@ export default class ContentLayout extends LightningElement {
         this.lastScrollPosition = currentScrollPosition;
     }
 
-    private calculatePreviousElementId(): string | undefined {
+    protected calculatePreviousElementId(): string | undefined {
         const keys = Object.keys(this.anchoredElements);
         const currentIndex = keys.findIndex((id) => this.tocValue === id);
 
         return currentIndex > 0 ? keys[currentIndex - 1] : undefined;
     }
 
-    private assignElementId(id: string | undefined): void {
+    protected assignElementId(id: string | undefined): void {
         // Change toc(RNB) highlight only for H2
         if (this.tocOptionIdsSet.has(id)) {
             this.tocValue = id;
         }
     }
 
-    private dispatchHighlightChange(term: string): void {
+    protected dispatchHighlightChange(term: string): void {
         this.dispatchEvent(
             new CustomEvent("highlightedtermchange", {
                 detail: term,
@@ -590,14 +484,14 @@ export default class ContentLayout extends LightningElement {
         );
     }
 
-    private updateHighlightsAndSearch(nextSearchString: string): void {
+    protected updateHighlightsAndSearch(nextSearchString: string): void {
         const nextSearchParam =
             new URLSearchParams(nextSearchString).get("q") || "";
         this.setSidebarInputValue(nextSearchParam);
         this.dispatchHighlightChange(nextSearchParam);
     }
 
-    private onToggleSidebar(e: CustomEvent): void {
+    protected onToggleSidebar(e: CustomEvent): void {
         this.sidebarOpen = e.detail.open;
 
         // eslint-disable-next-line @lwc/lwc/no-document-query

package/src/modules/doc/lwcContentLayout/lwcContentLayout.css

@@ -0,0 +1 @@
+@import "docHelpers/contentLayoutStyle";

package/src/modules/doc/lwcContentLayout/lwcContentLayout.html

@@ -0,0 +1,64 @@
+<template>
+    <div class="content">
+        <template lwc:if={useOldSidebar}>
+            <dx-sidebar-old
+                class="is-sticky left-nav-bar"
+                trees={sidebarContent}
+                value={sidebarValue}
+                header={sidebarHeader}
+                ontogglesidebar={onToggleSidebar}
+                languages={languages}
+                language={language}
+                bail-href={bailHref}
+                bail-label={bailLabel}
+            >
+                <slot name="sidebar-header" slot="version-picker"></slot>
+            </dx-sidebar-old>
+        </template>
+        <template lwc:else>
+            <dx-sidebar
+                class="is-sticky left-nav-bar"
+                trees={sidebarContent}
+                value={sidebarValue}
+                header={sidebarHeader}
+                coveo-organization-id={coveoOrganizationId}
+                coveo-public-access-token={coveoPublicAccessToken}
+                coveo-search-hub={coveoSearchHub}
+                coveo-advanced-query-config={coveoAdvancedQueryConfig}
+                ontogglesidebar={onToggleSidebar}
+                languages={languages}
+                language={language}
+                bail-href={bailHref}
+                bail-label={bailLabel}
+            >
+                <slot name="sidebar-header" slot="version-picker"></slot>
+            </dx-sidebar>
+        </template>
+        <div class="content-body-doc-phase-container">
+            <slot name="doc-phase"></slot>
+            <slot name="version-banner"></slot>
+            <div class="content-body-container">
+                <div class="content-body">
+                    <doc-breadcrumbs
+                        lwc:if={showBreadcrumbs}
+                        breadcrumbs={breadcrumbs}
+                    ></doc-breadcrumbs>
+                    <slot onslotchange={onSlotChange}></slot>
+                    <doc-sprig-survey
+                        lwc:if={shouldDisplayFeedback}
+                    ></doc-sprig-survey>
+                </div>
+                <div lwc:if={showToc} class="right-nav-bar is-sticky">
+                    <dx-toc
+                        header={tocTitle}
+                        options={tocOptions}
+                        value={tocValue}
+                    ></dx-toc>
+                </div>
+            </div>
+            <div lwc:if={showFooter} class="footer-container">
+                <dx-footer variant="no-signup"></dx-footer>
+            </div>
+        </div>
+    </div>
+</template>

package/src/modules/doc/lwcContentLayout/lwcContentLayout.ts

@@ -0,0 +1,277 @@
+/* eslint-disable @lwc/lwc/no-document-query */
+import { closest } from "kagekiri";
+import ContentLayout from "doc/contentLayout";
+
+const TOC_HEADER_TAG = "doc-heading";
+const RNB_BY_TAB = "docs-tab";
+const SPECIFICATION_TAB_TITLE = "Specification";
+export const OBSERVER_ATTACH_WAIT_TIME = 500;
+
+export default class LwcContentLayout extends ContentLayout {
+    private rnbByTab: boolean = false;
+
+    private setRNBByTab() {
+        const tabPanelListItem: any = this.getTabPanelList();
+        this.rnbByTab = tabPanelListItem?.id === RNB_BY_TAB ? true : false;
+    }
+
+    get showTabBasedRNB() {
+        return this.rnbByTab;
+    }
+
+    onRNBClick = (event: CustomEvent) => {
+        event.stopPropagation();
+        const currentTab = this.getSelectedTabId();
+        if (currentTab === SPECIFICATION_TAB_TITLE) {
+            this.didScrollToSelectedHash = false;
+        }
+    };
+
+    onTabChanged = () => {
+        this.updateRNB();
+    };
+
+    private getTabPanelList() {
+        return document.querySelector("dx-tab-panel-list");
+    }
+
+    updateRNB = () => {
+        const headingElements = this.getHeadingElements();
+        headingElements.forEach((headingElement: any) => {
+            // Sometimes elements hash and header is not being set when slot content is wrapped with div
+            if (!headingElement.hash) {
+                headingElement.hash = headingElement.attributes.hash?.nodeValue;
+            }
+
+            if (!headingElement.header) {
+                headingElement.header =
+                    headingElement.attributes.header?.nodeValue;
+            }
+        });
+        this.updateTocItems(headingElements);
+    };
+
+    private getHeadingElements() {
+        let headingElements = document.querySelectorAll(TOC_HEADER_TAG);
+        if (this.showTabBasedRNB) {
+            const tabPanelListItem: any = this.getTabPanelList();
+            const tabPanels =
+                tabPanelListItem?.querySelectorAll("dx-tab-panel");
+            for (const tabPanelItem of tabPanels) {
+                if (tabPanelItem.active) {
+                    // This is needed for Specification tab content
+                    const specificationElement = tabPanelItem.querySelector(
+                        "doc-specification-content"
+                    );
+                    if (specificationElement) {
+                        headingElements =
+                            specificationElement.shadowRoot.querySelectorAll(
+                                TOC_HEADER_TAG
+                            );
+                    } else {
+                        headingElements =
+                            tabPanelItem.querySelectorAll(TOC_HEADER_TAG);
+                    }
+                    break;
+                }
+            }
+        }
+        return headingElements;
+    }
+
+    private updateURL() {
+        const tabs = this.getAllTabs();
+        const selectedTabId = this.getSelectedTabId();
+        tabs.forEach((tab: any) => {
+            if (tab.getAttribute("aria-selected") === "true") {
+                const tabID = tab.getAttribute("aria-label");
+                const url = new URL(window.location.href);
+                if (selectedTabId !== tabID) {
+                    url.searchParams.set("type", tabID);
+                    url.hash = "";
+                    window.history.pushState({}, "", url.toString());
+                }
+            }
+        });
+    }
+
+    // This event gets triggered when navigating back/forward
+    handlePopState = (): void => {
+        if (this.showTabBasedRNB) {
+            this.restoreTabSelection();
+        }
+    };
+
+    connectedCallback(): void {
+        const hasParentHighlightListener = closest(
+            "doc-xml-content",
+            this.template.host
+        );
+        if (!hasParentHighlightListener) {
+            window.addEventListener(
+                "highlightedtermchange",
+                this.updateHighlighted
+            );
+            this.searchSyncer.init();
+        }
+        window.addEventListener("popstate", this.handlePopState);
+    }
+
+    private getSelectedTabId() {
+        const urlParams = new URLSearchParams(window.location.search);
+        const selectedTabId = urlParams.get("type");
+        return selectedTabId;
+    }
+
+    private restoreTabSelection() {
+        requestAnimationFrame(() => {
+            const selectedTabId = this.getSelectedTabId();
+            if (selectedTabId) {
+                this.selectTabById(selectedTabId);
+            }
+        });
+    }
+
+    private getAllTabs(): any[] {
+        const tabPanelListItem: any = this.getTabPanelList();
+        if (tabPanelListItem?.shadowRoot) {
+            return Array.from(
+                tabPanelListItem.shadowRoot.querySelectorAll(
+                    "dx-tab-panel-item"
+                )
+            ).map((tabPanelItem: any) =>
+                tabPanelItem.shadowRoot.querySelector("button")
+            );
+        }
+        return [];
+    }
+
+    private selectTabById(tabId: string) {
+        const tabs = this.getAllTabs();
+        tabs.forEach((tab: any) => {
+            if (tab.getAttribute("aria-label") === tabId) {
+                tab.click();
+            }
+        });
+    }
+
+    renderedCallback(): void {
+        /**
+         * Note: We are adding timeout because chrome is optimizing and not triggering recent renderedCallback though elements reference is changed
+         * Also we are considering recent renderedCallback
+         */
+        this.clearRenderObserverTimer();
+        this.observerTimerId = setTimeout(
+            this.attachInteractionObserver,
+            OBSERVER_ATTACH_WAIT_TIME
+        );
+
+        this.adjustNavPosition();
+        window.addEventListener("scroll", this.adjustNavPosition);
+        window.addEventListener("resize", this.adjustNavPosition);
+
+        if (!this.hasRendered) {
+            this.hasRendered = true;
+            this.setRNBByTab();
+            if (this.showTabBasedRNB) {
+                window.addEventListener("tabchanged", this.onTabChanged);
+                this.restoreTabSelection();
+            }
+            this.restoreScroll();
+        }
+    }
+
+    disconnectedCallback(): void {
+        if (this.showTabBasedRNB) {
+            window.removeEventListener("tabchanged", this.onTabChanged);
+            window.removeEventListener(
+                "specificationdatarendered",
+                this.onTabChanged
+            );
+            window.removeEventListener("selectedcontent", (event) =>
+                this.onRNBClick(event as CustomEvent)
+            );
+            window.removeEventListener("popstate", this.handlePopState);
+        }
+    }
+
+    attachInteractionObserver = (): void => {
+        if (!this.enableSlotChange) {
+            return;
+        }
+        this.disconnectObserver();
+
+        const globalNavOffset = `-${getComputedStyle(
+            document.documentElement
+        ).getPropertyValue("--dx-g-doc-header-main-nav-height")}`;
+
+        this.observer = new IntersectionObserver(
+            (entries) => {
+                entries.forEach(
+                    (entry) =>
+                        (this.anchoredElements[
+                            entry.target.getAttribute("id")!
+                        ].intersect = entry.isIntersecting)
+                );
+                this.calculateActualSection();
+            },
+            {
+                rootMargin: globalNavOffset.trim()
+            }
+        );
+
+        // Note: We are doing document.querySelectorAll as a quick fix as we are not getting heading elements reference this.querySelectorAll
+        const headingElements = this.getHeadingElements();
+
+        // We only need to update URL in case of /docs and ignore if tabs are used anywhere else in DSC
+        if (this.showTabBasedRNB) {
+            this.updateURL();
+        }
+
+        for (const headingElement of headingElements as any) {
+            // Add headingElements to intersectionObserver for highlighting respective RNB item when user scroll
+            const id = headingElement.getAttribute("id")!;
+            this.anchoredElements[id] = {
+                id,
+                intersect: false
+            };
+            this.observer.observe(headingElement);
+        }
+
+        if (!this.didScrollToSelectedHash) {
+            this.didScrollToSelectedHash = true;
+            this.scrollToHash(headingElements);
+        }
+    };
+
+    onSlotChange(): void {
+        this.updateRNB();
+        this.contentLoaded = true;
+    }
+
+    // eslint-disable-next-line no-undef
+    private updateTocItems(headingElements: NodeListOf<Element>): void {
+        const tocOptions = [];
+
+        for (const headingElement of headingElements as any) {
+            headingElement.id = headingElement.hash;
+
+            // Update tocOptions from anchorTags only for H2, consider default as 2 as per component
+            const headingAriaLevel =
+                headingElement.attributes["aria-level"]?.nodeValue || "2";
+            const isH2 = headingAriaLevel === "2";
+
+            if (isH2) {
+                const tocItem = {
+                    anchor: `#${headingElement.hash}`,
+                    id: headingElement.id,
+                    label: headingElement.header
+                };
+                tocOptions.push(tocItem);
+                this.tocOptionIdsSet.add(headingElement.id);
+            }
+        }
+
+        this._tocOptions = tocOptions;
+    }
+}

package/src/modules/doc/specificationContent/specificationContent.css

@@ -0,0 +1,3 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/table";

package/src/modules/doc/specificationContent/specificationContent.html

@@ -1,46 +1,145 @@
 <template>
-    <lightning-card title="Fetched Data">
-        <!-- Display Attributes if they exist -->
+    <div class="specification-properties">
         <template if:true={hasAttributes}>
-            <h3>Attributes</h3>
-            <ul>
-                <template for:each={data.attribute} for:item="attr">
-                    <li key={attr.name}>
-                        <strong>{attr.name}:</strong>
-                        {attr.desc}
-                    </li>
-                </template>
-            </ul>
+            <doc-heading
+                header="Attributes"
+                hash="attributes"
+                aria-level="2"
+                id="attributes"
+            ></doc-heading>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Description</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Required</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <template for:each={attributes} for:item="attribute">
+                        <tr key={attribute.name}>
+                            <td>{attribute.nameInKebabCase}</td>
+                            <td>{attribute.description}</td>
+                            <td>{attribute.type}</td>
+                            <td>{attribute.default}</td>
+                            <td>
+                                <template lwc:if={attribute.required}>
+                                    <dx-icon
+                                        symbol="success"
+                                        size="large"
+                                        color="green-vibrant-65"
+                                    ></dx-icon>
+                                </template>
+                            </td>
+                        </tr>
+                    </template>
+                </tbody>
+            </table>
         </template>
 
-        <!-- Display Methods if they exist -->
         <template if:true={hasMethods}>
-            <h3>Methods</h3>
-            <ul>
-                <template for:each={data.method} for:item="method">
-                    <li key={method.name}>
-                        <strong>{method.name}:</strong>
-                        {method.desc}
-                    </li>
-                </template>
-            </ul>
+            <doc-heading
+                header="Methods"
+                hash="methods"
+                aria-level="2"
+                id="methods"
+            ></doc-heading>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Description</th>
+                        <th>Argument Name</th>
+                        <th>Argument Type</th>
+                        <th>Argument Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <template for:each={processedMethods} for:item="method">
+                        <template if:true={method.firstArgument}>
+                            <tr key={method.name}>
+                                <td rowspan={method.arguments.length}>
+                                    {method.nameInKebabCase}
+                                </td>
+                                <td rowspan={method.arguments.length}>
+                                    {method.description}
+                                </td>
+                                <td>{method.firstArgument.name}</td>
+                                <td>{method.firstArgument.type}</td>
+                                <td>{method.firstArgument.description}</td>
+                            </tr>
+                            <template
+                                for:each={method.remainingArguments}
+                                for:item="arg"
+                            >
+                                <tr key={arg.name}>
+                                    <td>{arg.name}</td>
+                                    <td>{arg.type}</td>
+                                    <td>{arg.description}</td>
+                                </tr>
+                            </template>
+                        </template>
+                        <template if:false={method.firstArgument}>
+                            <tr key={method.name}>
+                                <td>{method.nameInKebabCase}</td>
+                                <td>{method.description}</td>
+                                <td colspan="3"></td>
+                            </tr>
+                        </template>
+                    </template>
+                </tbody>
+            </table>
         </template>
 
-        <!-- Display Slots if they exist -->
         <template if:true={hasSlots}>
-            <h3>Slots</h3>
-            <ul>
-                <template for:each={data.slots} for:item="slot">
-                    <li key={slot.name}>
-                        <strong>{slot.name}:</strong>
-                        {slot.desc}
-                    </li>
-                </template>
-            </ul>
+            <doc-heading
+                header="Slots"
+                hash="slots"
+                aria-level="2"
+                id="slots"
+            ></doc-heading>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <template for:each={slots} for:item="slot">
+                        <tr key={slot.name}>
+                            <td>{slot.nameInKebabCase}</td>
+                            <td>{slot.description}</td>
+                        </tr>
+                    </template>
+                </tbody>
+            </table>
         </template>
 
-        <template if:true={error}>
-            <p>Error fetching data: {error}</p>
+        <template if:true={hasEvents}>
+            <doc-heading
+                header="Events"
+                hash="events"
+                aria-level="2"
+            ></doc-heading>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <template for:each={events} for:item="event">
+                        <tr key={event.name}>
+                            <td>{event.nameInKebabCase}</td>
+                            <td>{event.description}</td>
+                        </tr>
+                    </template>
+                </tbody>
+            </table>
         </template>
-    </lightning-card>
+    </div>
 </template>

package/src/modules/doc/specificationContent/specificationContent.ts

@@ -1,41 +1,112 @@
-import { LightningElement, track } from "lwc";
-import { toJson } from "dxUtils/normalizers";
+import { LightningElement, track, api } from "lwc";
+import { Method, Specification } from "typings/custom";
+import debounce from "debounce";
 
-export default class specificationContent extends LightningElement {
-    @track data: any; // Reactive property to store fetched data
-    @track error: any; // To track any errors
+export default class SpecificationContent extends LightningElement {
+    @track data: any;
+    // TODO: added these default values for testing, will drop this once the backend is ready.
+    @api component: string = "button";
+    @api model: string = "lwc";
+    @api namespace: string = "lightning";
+
+    /* TODO: The actual URL is as follows:
+     * http://api.salesforce.com/doc-platform/developer/v1/{type}/{sub-type}/{component-name}
+     * Until the API integration is ready, we will go ahead with mocked-router-url.
+     */
+    @api apiBaseUrl: string =
+        "https://cx-mock-router-internal-07a18d7b3f61.herokuapp.com";
+
+    private attributes: Specification[] = [];
+    private methods: Method[] = [];
+    private slots: Specification[] = [];
+    private events: Specification[] = [];
+
+    /* TODO: For now setting the timeout to 300ms,
+     * post integration with CX-Router API will test and change if required.
+     */
+    private debouncedNotifyDataRendered = debounce(() => {
+        this.notifySpecificationDataRendered();
+    }, 300);
 
-    // Lifecycle method to fetch data when the component is inserted into the DOM
     connectedCallback() {
-        this.loadData();
+        this.fetchComponentMetadata();
     }
 
-    // Method to make the API call
-    loadData() {
-        fetch("http://localhost:3002/card") // Sample API URL
-            .then((response) => response.json()) // Convert response to JSON
-            .then((result) => {
-                this.data = toJson(result); // Store data to update UI
-                this.error = undefined; // Clear any previous errors
-            })
-            .catch((error) => {
-                this.error = error; // Capture any errors
-                this.data = {}; // Clear data on error
-            });
+    async fetchComponentMetadata() {
+        const url = `${this.apiBaseUrl}/${this.model}/${this.namespace}/${this.component}`;
+
+        try {
+            const response = await fetch(url);
+
+            if (!response.ok) {
+                // TODO: Will add loader and show error as follow-up
+                throw new Error(`Failed to fetch: ${response.statusText}`);
+            }
+
+            const result = await response.json();
+            this.data = result;
+            ({
+                attributes: this.attributes,
+                methods: this.methods,
+                slots: this.slots,
+                events: this.events
+            } = this.data);
+        } catch (error) {
+            this.data = {};
+            console.error("fetchComponentMetadata() failed for:" + url);
+        }
+    }
+
+    /**
+     * This getter is to preprocess the methods for easier rendering in the template.
+     * Each method is augmented with additional properties:
+     * - `firstArgument`: The first argument (if any).
+     * - `remainingArguments`: All other arguments (if any).
+     * - `hasArguments`: A boolean indicating whether the method has arguments or not.
+     */
+    get processedMethods(): Method[] {
+        return this.methods.map((method) => {
+            const [firstArgument, ...remainingArguments] =
+                method.arguments || [];
+            return {
+                ...method,
+                firstArgument,
+                remainingArguments,
+                hasArguments: method.arguments && method.arguments.length > 0
+            };
+        });
     }
 
-    // Helper to check if attributes exist
     get hasAttributes() {
-        return this.data?.attribute;
+        return this.attributes?.length > 0;
     }
 
-    // Helper to check if methods exist
     get hasMethods() {
-        return this.data?.method;
+        return this.methods?.length > 0;
     }
 
-    // Helper to check if slots exist
     get hasSlots() {
-        return this.data?.slots;
+        return this.slots?.length > 0;
+    }
+
+    get hasEvents() {
+        return this.events?.length > 0;
+    }
+
+    renderedCallback(): void {
+        if (this.data) {
+            this.debouncedNotifyDataRendered();
+        }
+    }
+
+    notifySpecificationDataRendered() {
+        // Dispatch a custom event to notify the specification tab has rendered.
+        this.dispatchEvent(
+            new CustomEvent("specificationdatarendered", {
+                detail: { name: "doc-specification-content" },
+                bubbles: true,
+                composed: true
+            })
+        );
     }
 }

package/src/modules/docHelpers/contentLayoutStyle/contentLayoutStyle.css

@@ -0,0 +1,131 @@
+:host {
+    --dx-c-content-vertical-spacing: var(--dx-g-spacing-lg);
+    --dx-c-content-sidebar-sticky-top: calc(
+        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
+    );
+    --dx-c-sidebar-height: calc(
+        100vh -
+            calc(
+                var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
+            )
+    );
+    --dx-c-content-scroll-margin-top: calc(
+        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height) +
+            var(--dx-g-spacing-2xl)
+    );
+
+    display: block;
+}
+
+doc-breadcrumbs {
+    --dx-c-popover-z-index: 5;
+
+    display: block;
+    margin-bottom: var(--dx-g-spacing-2xl);
+}
+
+dx-sidebar,
+dx-sidebar-old {
+    --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
+
+    z-index: calc(var(--dx-g-z-index-100) + 5);
+}
+
+dx-toc {
+    --dx-c-toc-width: unset;
+
+    height: calc(100% - var(--dx-c-content-vertical-spacing) * 2);
+    margin: var(--dx-c-content-vertical-spacing) 0;
+    overflow-y: auto;
+}
+
+dx-sidebar,
+dx-toc {
+    display: block;
+}
+
+/* offset page jump link due to fixed header */
+::slotted(doc-heading) {
+    scroll-margin-top: var(--dx-c-content-scroll-margin-top);
+}
+
+.content {
+    display: flex;
+    position: relative;
+}
+
+.content-body-doc-phase-container {
+    flex: 1;
+    border-left: 1px solid var(--dx-g-gray-90);
+}
+
+.content-body-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    max-width: var(--dx-g-doc-content-max-width);
+
+    /* Derived this manually by substracting (topHeader, doc header, banner and the content). */
+    min-height: 62vh;
+    margin: auto;
+    padding: 0 var(--dx-g-global-header-padding-horizontal);
+    margin-bottom: calc(2 * (var(--dx-g-spacing-5xl) + 4px));
+}
+
+.content-body {
+    margin: var(--dx-g-spacing-md) 0 0;
+    max-width: 900px;
+    flex: 1;
+    width: 0;
+}
+
+.is-sticky {
+    align-self: flex-start;
+    position: sticky;
+    top: var(--dx-c-content-sidebar-sticky-top);
+}
+
+.right-nav-bar {
+    margin-left: var(--dx-g-spacing-2xl);
+}
+
+@media screen and (max-width: 1024px) {
+    .right-nav-bar {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 800px) {
+    .content-body {
+        margin-top: var(--dx-c-content-vertical-spacing);
+    }
+
+    .content-body-doc-phase-container {
+        border-left: 0;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .is-sticky {
+        width: 100%;
+    }
+
+    .content {
+        flex-direction: column;
+    }
+
+    .content-body-container {
+        padding-right: 0;
+        overflow-x: auto;
+        margin-bottom: calc(var(--dx-g-spacing-5xl) + 4px);
+    }
+
+    .left-nav-bar {
+        height: unset;
+    }
+
+    .content-body {
+        margin-left: var(--dx-g-spacing-mlg, 20px);
+        margin-right: var(--dx-g-spacing-mlg, 20px);
+    }
+}