@salesforcedevs/docs-components 1.3.344 → 1.3.345-refactor-tab-alpha1

package/lwc.config.json

@@ -13,11 +13,13 @@
         "doc/contentLayout",
         "doc/contentMedia",
         "doc/docXmlContent",
+        "doc/lwcContentLayout",
         "doc/header",
         "doc/heading",
         "doc/headingAnchor",
         "doc/overview",
         "doc/phase",
+        "doc/specificationContent",
         "doc/versionPicker",
         "doc/xmlContent",
         "docUtils/utils"

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.344",
+    "version": "1.3.345-refactor-tab-alpha1",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
@@ -24,5 +24,5 @@
         "@types/lodash.orderby": "4.6.9",
         "@types/lodash.uniqby": "4.7.9"
     },
-    "gitHead": "189d356c6cb2b3cca66b7728a288036c6850421a"
+    "gitHead": "4629fdd9ca18a13480044ad43515b91945d16aad"
 }

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
@@ -456,45 +337,57 @@ export default class ContentLayout extends LightningElement {
             this.observer.observe(headingElement);
         }
 
-        this.contentLoaded = true;
-
         if (!this.didScrollToSelectedHash) {
             this.didScrollToSelectedHash = true;
             this.scrollToHash(headingElements);
         }
     };
 
-    onSlotChange(): void {
-        this.updateRNB();
-    }
+    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;
@@ -502,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);
@@ -539,7 +432,7 @@ export default class ContentLayout extends LightningElement {
         }
     }
 
-    private scrollIntoViewWithOffset(
+    protected scrollIntoViewWithOffset(
         headingElement: HTMLElement,
         offset: number
     ) {
@@ -552,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
@@ -567,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,
@@ -591,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,257 @@
+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 {
+        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 {
+        if (!this.hasRendered) {
+            this.hasRendered = true;
+            this.setRNBByTab();
+            if (this.showTabBasedRNB) {
+                window.addEventListener("tabchanged", this.onTabChanged);
+                window.addEventListener(
+                    "specificationdatarendered",
+                    this.onTabChanged
+                );
+                window.addEventListener("selectedcontent", (event) =>
+                    this.onRNBClick(event as CustomEvent)
+                );
+                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

@@ -0,0 +1,145 @@
+<template>
+    <div class="specification-properties">
+        <template if:true={hasAttributes}>
+            <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>
+
+        <template if:true={hasMethods}>
+            <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>
+
+        <template if:true={hasSlots}>
+            <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={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>
+    </div>
+</template>

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

@@ -0,0 +1,112 @@
+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;
+    // 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);
+
+    connectedCallback() {
+        this.fetchComponentMetadata();
+    }
+
+    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
+            };
+        });
+    }
+
+    get hasAttributes() {
+        return this.attributes?.length > 0;
+    }
+
+    get hasMethods() {
+        return this.methods?.length > 0;
+    }
+
+    get hasSlots() {
+        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);
+    }
+}

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.