@salesforcedevs/docs-components 1.3.323 → 1.3.325-rnbtab-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.323",
+    "version": "1.3.325-rnbtab-alpha",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

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

@@ -384,7 +384,10 @@ mark {
 
 /* offset page jump link due to fixed header */
 [id] {
-    scroll-margin-top: 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)
     );
+
+    scroll-margin-top: var(--dx-c-content-scroll-margin-top);
 }

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

@@ -9,6 +9,10 @@
                 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;
 }
@@ -42,9 +46,7 @@ dx-toc {
 
 /* offset page jump link due to fixed header */
 ::slotted(doc-heading) {
-    scroll-margin-top: calc(
-        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
-    );
+    scroll-margin-top: var(--dx-c-content-scroll-margin-top);
 }
 
 .content {

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

@@ -11,6 +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",
@@ -41,6 +42,7 @@ export default class ContentLayout extends LightningElement {
     @api language!: string;
     @api bailHref!: string;
     @api bailLabel!: string;
+    @track initialIndex: number = 0;
 
     // This is needed for now to prevent failing snapshot tests due to links in the footer
     @api showFooter = false;
@@ -101,6 +103,113 @@ export default class ContentLayout extends LightningElement {
         return this.contentLoaded && typeof Sprig !== "undefined";
     }
 
+    get showTabBasedRNB() {
+        const tabPanelListItem: any = this.selectTabElement();
+        return tabPanelListItem?.id === RNB_BY_TAB ? true : false;
+    }
+
+    onTabChanged = () => {
+        this.updateRNB();
+    };
+
+    private selectTabElement() {
+        return document.querySelector("dx-tab-panel-list");
+    }
+
+    updateRNB = () => {
+        const headingElements = this.getHeadingElements();
+        headingElements.forEach((headingElement: any) => {
+            headingElement.hash = headingElement.attributes.hash?.nodeValue;
+        });
+        this.updateTocItems(headingElements);
+    };
+
+    private getHeadingElements() {
+        let headingElements = document.querySelectorAll(TOC_HEADER_TAG);
+        if (this.showTabBasedRNB) {
+            const tabPanelListItem: any = this.selectTabElement();
+            // for (const tabPanelListItem of tabPanelListItems) {
+            if (tabPanelListItem.id === RNB_BY_TAB) {
+                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 tabPanelListItem: any = this.selectTabElement();
+        if (tabPanelListItem?.id === RNB_BY_TAB) {
+            const tabPanelItems: any =
+                tabPanelListItem?.shadowRoot.querySelectorAll(
+                    "dx-tab-panel-item"
+                );
+            if (tabPanelItems) {
+                for (const tabPanelItem of tabPanelItems as any) {
+                    const tab = tabPanelItem.shadowRoot.querySelector("button");
+                    const url = new URL(window.location.href);
+                    const previousTabID = url.searchParams.get("type");
+                    const tabID = tab?.getAttribute("aria-label");
+                    if (
+                        tab?.getAttribute("aria-selected") === "true" &&
+                        previousTabID !== tabID
+                    ) {
+                        url.searchParams.set("type", tabID);
+                        url.hash = "";
+                        window.history.pushState({}, "", url.toString());
+                        break;
+                    }
+                }
+            }
+        }
+    }
+
+    private tabOnPageLoad() {
+        const url = new URL(window.location.href);
+        const previousTabID = url.searchParams.get("type");
+
+        if (!previousTabID) {
+            this.updateURL();
+        } else {
+            const tabPanelListItem: any = this.selectTabElement();
+            const tabPanelItems: any =
+                tabPanelListItem?.shadowRoot.querySelectorAll(
+                    "dx-tab-panel-item"
+                );
+            const tabPanels = tabPanelListItem.querySelectorAll("dx-tab-panel");
+            if (tabPanelItems) {
+                let tabIndex = 0;
+                for (const tabPanelItem of tabPanelItems as any) {
+                    const tab = tabPanelItem.shadowRoot.querySelector("button");
+                    const activeTab =
+                        tabPanels[tabIndex]?.shadowRoot.querySelector(
+                            ".tabpanel"
+                        );
+                    if (tab?.getAttribute("aria-label") === previousTabID) {
+                        if (activeTab) {
+                            activeTab.classList.add("tabpanel-active");
+                        }
+                        tab.active = true;
+                        this.initialIndex = tabIndex;
+                    } else {
+                        if (activeTab) {
+                            activeTab.classList.remove("tabpanel-active");
+                        }
+                        tab.active = false;
+                    }
+                    tabIndex++;
+                }
+            }
+        }
+    }
+
     private searchSyncer = new SearchSyncer({
         callbacks: {
             onSearchChange: (nextSearchString: string): void => {
@@ -148,6 +257,11 @@ export default class ContentLayout extends LightningElement {
             );
             this.searchSyncer.init();
         }
+
+        if (this.showTabBasedRNB) {
+            window.addEventListener("tabchanged", this.onTabChanged);
+            this.tabOnPageLoad();
+        }
     }
 
     renderedCallback(): void {
@@ -215,10 +329,16 @@ export default class ContentLayout extends LightningElement {
             ".sticky-doc-header"
         ) as HTMLElement;
 
-        const docPhaseEl = (
+        let docPhaseEl = (
             this.template.querySelector("[name=doc-phase]")! as any
         ).assignedElements()[0] as HTMLSlotElement;
 
+        if (!docPhaseEl) {
+            docPhaseEl = (
+                this.template.querySelector("[name=version-banner]")! as any
+            ).assignedElements()[0] as HTMLSlotElement;
+        }
+
         if (!sidebarEl || !globalNavEl || !contextNavEl || !docHeaderEl) {
             console.warn("One or more required elements are missing.");
             return;
@@ -231,6 +351,14 @@ export default class ContentLayout extends LightningElement {
                 (globalNavEl.getBoundingClientRect().height !== 72 ? 0 : 72) +
                 contextNavEl.getBoundingClientRect().height;
             const docHeaderHeight = docHeaderEl.getBoundingClientRect().height;
+            const totalHeaderHeight = globalNavHeight + docHeaderHeight;
+
+            // Selecting the doc section heading and RNB here.
+            const docHeadingEls = Array.from(
+                document.querySelectorAll("doc-heading")
+            );
+            const rightNavBarEl = this.template.querySelector(".right-nav-bar");
+
             sidebarEl.style.setProperty(
                 "--dx-c-content-sidebar-sticky-top",
                 `${globalNavHeight + docHeaderHeight}px`
@@ -241,6 +369,27 @@ export default class ContentLayout extends LightningElement {
                 `${globalNavHeight}px`
             );
 
+            // Adjusting the doc section heading on scroll.
+            docHeadingEls.forEach((docHeadingEl) => {
+                (docHeadingEl as any).style.scrollMarginTop = docPhaseEl
+                    ? `${
+                          totalHeaderHeight +
+                          docPhaseEl.getBoundingClientRect().height +
+                          40
+                      }px`
+                    : `${totalHeaderHeight + 40}px`;
+            });
+
+            // Adjusting the right nav bar on scroll.
+            if (rightNavBarEl) {
+                rightNavBarEl.style.top = docPhaseEl
+                    ? `${
+                          totalHeaderHeight +
+                          docPhaseEl.getBoundingClientRect().height
+                      }px`
+                    : `${totalHeaderHeight}px`;
+            }
+
             // If doc phase element exists, we need to account for its sticky position. Mobile should include the sidebar height (since it becomes sticky aswell).
             if (docPhaseEl) {
                 docPhaseEl.style.setProperty(
@@ -253,30 +402,6 @@ export default class ContentLayout extends LightningElement {
                             : globalNavHeight + docHeaderHeight
                     }px`
                 );
-
-                // Adjust scroll margin for doc headings when doc phase is present
-                const docHeadingEls = Array.from(
-                    document.querySelectorAll("doc-heading")
-                );
-                docHeadingEls.forEach((docHeadingEl) => {
-                    (docHeadingEl as any).style.scrollMarginTop = `${
-                        globalNavHeight +
-                        docHeaderHeight +
-                        docPhaseEl.getBoundingClientRect().height
-                    }px`;
-                });
-
-                // Adjust right nav bar position when doc phase is present
-                const rightNavBarEl =
-                    this.template.querySelector(".right-nav-bar");
-
-                if (rightNavBarEl) {
-                    rightNavBarEl.style.top = `${
-                        globalNavHeight +
-                        docHeaderHeight +
-                        docPhaseEl.getBoundingClientRect().height
-                    }px`;
-                }
             }
         });
     };
@@ -313,7 +438,8 @@ 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 = document.querySelectorAll(TOC_HEADER_TAG);
+        const headingElements = this.getHeadingElements();
+        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")!;
@@ -329,49 +455,43 @@ export default class ContentLayout extends LightningElement {
         }
     };
 
-    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 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;
-            }
+    onSlotChange(e): void {
+        const slot = e.target;
+        const child = slot.assignedElements();
+        const tabComponent = child.find(
+            (element: any) =>
+                element.tagName.toLowerCase() === "dx-tab-panel-list"
+        );
+        if (tabComponent) {
+            tabComponent.initialIndex = this.initialIndex; // Set the index value on the child component
+        }
+        this.updateRNB();
+    }
 
-            const tocOptions = [];
+    // 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);
-                }
+        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 {