@salesforcedevs/docs-components 1.3.327-do-dont-2 → 1.3.327-rnbtab-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.327-do-dont-2",
+    "version": "1.3.327-rnbtab-alpha1",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

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",
@@ -96,11 +97,72 @@ export default class ContentLayout extends LightningElement {
     private hasRendered: boolean = false;
     private contentLoaded: boolean = false;
     private sidebarOpen: boolean = false;
+    private rnbByTab: 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({
         callbacks: {
             onSearchChange: (nextSearchString: string): void => {
@@ -148,6 +210,46 @@ export default class ContentLayout extends LightningElement {
             );
             this.searchSyncer.init();
         }
+
+        if (this.showTabBasedRNB) {
+            window.addEventListener("tabchanged", this.onTabChanged);
+        }
+    }
+
+    private getSelectedTabId() {
+        const urlParams = new URLSearchParams(window.location.search);
+        const selectedTabId = urlParams.get("type");
+        return selectedTabId;
+    }
+
+    private restoreTabSelection() {
+        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 {
@@ -167,6 +269,10 @@ export default class ContentLayout extends LightningElement {
 
         if (!this.hasRendered) {
             this.hasRendered = true;
+            this.setRNBByTab();
+            if (this.showTabBasedRNB) {
+                this.restoreTabSelection();
+            }
             this.restoreScroll();
         }
     }
@@ -179,6 +285,7 @@ export default class ContentLayout extends LightningElement {
         );
         window.removeEventListener("scroll", this.adjustNavPosition);
         window.removeEventListener("resize", this.adjustNavPosition);
+        window.removeEventListener("tabchanged", this.onTabChanged);
         this.searchSyncer.dispose();
         this.clearRenderObserverTimer();
 
@@ -324,7 +431,13 @@ 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();
+
+        // 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")!;
@@ -340,49 +453,34 @@ 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(): void {
+        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 {

package/src/modules/doc/doDont/doDont.html

@@ -20,7 +20,7 @@
             </template>
         </div>
         <div class="do-dont-image-container">
-            <img class="doc-do-dont-img" src={imgSrc} alt={caption} />
+            <img class="doc-do-dont-img" src={src} alt={caption} />
         </div>
         <div class="dx-text-body-4">{caption}</div>
     </div>

package/src/modules/doc/doDont/doDont.ts

@@ -3,7 +3,7 @@ import { normalizeBoolean } from "dxUtils/normalizers";
 
 export default class DoDont extends LightningElement {
     @api caption: string = "";
-    @api imgSrc!: string;
+    @api src!: string;
     _isDo: boolean = false;
 
     @api