@salesforcedevs/docs-components 1.17.11-lwc-fix-alpha1 → 1.17.12-banner

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.17.11-lwc-fix-alpha1",
+    "version": "1.17.12-banner",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

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

@@ -248,41 +248,65 @@ export default class ContentLayout extends LightningElement {
             const docHeaderHeight = docHeaderEl.getBoundingClientRect().height;
             const totalHeaderHeight = globalNavHeight + docHeaderHeight;
 
+            // Collect any banners rendered via the doc-phase and version-banner slots
+            const versionBannerSlot = this.template.querySelector(
+                "[name=version-banner]"
+            ) as any;
+            const docPhaseSlot = this.template.querySelector(
+                "[name=doc-phase]"
+            ) as any;
+            const versionBannerEls = (
+                versionBannerSlot
+                    ? (versionBannerSlot.assignedElements() as HTMLElement[])
+                    : []
+            ) as HTMLElement[];
+            const docPhaseEls = (
+                docPhaseSlot
+                    ? (docPhaseSlot.assignedElements() as HTMLElement[])
+                    : []
+            ) as HTMLElement[];
+            const bannersTotalHeight = [
+                ...versionBannerEls,
+                ...docPhaseEls
+            ].reduce(
+                (sum, el) => sum + (el?.getBoundingClientRect()?.height || 0),
+                0
+            );
+
             // 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(
+            (sidebarEl as HTMLElement).style.setProperty(
                 "--dx-c-content-sidebar-sticky-top",
-                `${globalNavHeight + docHeaderHeight}px`
+                `${totalHeaderHeight}px`
             );
 
             docHeaderEl.style.setProperty(
                 "--dx-g-global-header-height",
                 `${globalNavHeight}px`
             );
+            // Expose heights as CSS variables for sticky offsets used by page content
+            const rootStyle = document.documentElement.style;
+            rootStyle.setProperty(
+                "--dx-g-doc-header-banner-height",
+                `${docHeaderHeight + bannersTotalHeight}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`;
+                (docHeadingEl as any).style.scrollMarginTop = `${
+                    totalHeaderHeight + bannersTotalHeight + 40
+                }px`;
             });
 
             // Adjusting the right nav bar on scroll.
             if (rightNavBarEl) {
-                rightNavBarEl.style.top = docPhaseEl
-                    ? `${
-                          totalHeaderHeight +
-                          docPhaseEl.getBoundingClientRect().height
-                      }px`
-                    : `${totalHeaderHeight}px`;
+                (rightNavBarEl as HTMLElement).style.top = `${
+                    totalHeaderHeight + bannersTotalHeight
+                }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).

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

@@ -2,111 +2,44 @@ import ContentLayout from "doc/contentLayout";
 
 const TOC_HEADER_TAG = "doc-heading";
 const RNB_BY_TAB = "docs-tab";
-const SPECIFICATION_TAG = "doc-specification-content";
+const SPECIFICATION_TAB_TITLE = "Specification";
 export const OBSERVER_ATTACH_WAIT_TIME = 500;
 
 export default class LwcContentLayout extends ContentLayout {
     private rnbByTab: boolean = false;
 
-    // DOM element caches to avoid repeated queries
-    private tabPanelListCache: any = null;
-    private hasSpecContentCache: boolean | null = null;
-    private allTabsCache: any[] | null = null;
-    private mainSlotCache: any = null;
-
     private setRNBByTab() {
-        const tabPanelListItem = this.getTabPanelList();
-        this.rnbByTab = tabPanelListItem?.id === RNB_BY_TAB;
+        const tabPanelListItem: any = this.getTabPanelList();
+        this.rnbByTab = tabPanelListItem?.id === RNB_BY_TAB ? true : false;
     }
 
     get showTabBasedRNB() {
         return this.rnbByTab;
     }
 
-    /**
-     * Check if the main slot contains doc-specification-content
-     * Uses caching to avoid repeated DOM queries
-     */
-    private hasSpecificationContent(): boolean {
-        if (this.hasSpecContentCache !== null) {
-            return this.hasSpecContentCache;
-        }
-
-        const mainSlot = this.getMainSlot();
-        if (mainSlot) {
-            const assignedElements = (mainSlot as any).assignedElements();
-
-            for (const element of assignedElements) {
-                if (
-                    element.tagName === SPECIFICATION_TAG ||
-                    element.querySelector(SPECIFICATION_TAG) ||
-                    element.shadowRoot?.querySelector(SPECIFICATION_TAG)
-                ) {
-                    return (this.hasSpecContentCache = true);
-                }
-            }
-        }
-        return (this.hasSpecContentCache = false);
-    }
-
-    /**
-     * Clear all caches when content changes
-     */
-    private clearAllCaches(): void {
-        this.hasSpecContentCache = null;
-        this.tabPanelListCache = null;
-        this.allTabsCache = null;
-        this.mainSlotCache = null;
-    }
-
-    /**
-     * Get the main slot element with caching
-     */
-    private getMainSlot(): any {
-        if (!this.mainSlotCache) {
-            this.mainSlotCache =
-                this.template.querySelector("slot:not([name])");
-        }
-        return this.mainSlotCache;
-    }
-
-    /**
-     * Get tab panel list with caching
-     */
-    private getTabPanelList(): any {
-        if (!this.tabPanelListCache) {
-            // eslint-disable-next-line @lwc/lwc/no-document-query
-            this.tabPanelListCache =
-                document.querySelector("dx-tab-panel-list");
-        }
-        return this.tabPanelListCache;
-    }
-
     onRNBClick = (event: CustomEvent) => {
         event.stopPropagation();
-        if (this.hasSpecificationContent()) {
+        const currentTab = this.getSelectedTabId();
+        if (currentTab === SPECIFICATION_TAB_TITLE) {
             this.didScrollToSelectedHash = false;
         }
     };
 
     onTabChanged = () => {
         this.updateRNB();
-
-        const { hash } = window.location;
-        if (this.hasSpecificationContent() && hash) {
-            this.didScrollToSelectedHash = false;
-
-            requestAnimationFrame(() => this.updateHeadingForRNB());
-        }
     };
 
+    private getTabPanelList() {
+        // eslint-disable-next-line @lwc/lwc/no-document-query
+        return document.querySelector("dx-tab-panel-list");
+    }
+
     protected getHeadingElements() {
         let headingElements = super.getHeadingElements();
         if (this.showTabBasedRNB) {
-            const tabPanelListItem = this.getTabPanelList();
+            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
@@ -132,7 +65,6 @@ export default class LwcContentLayout extends ContentLayout {
     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");
@@ -169,38 +101,22 @@ export default class LwcContentLayout extends ContentLayout {
             const selectedTabId = this.getSelectedTabId();
             if (selectedTabId) {
                 this.selectTabById(selectedTabId);
-
-                // If there's a hash and we have specification content,
-                // we need to wait for the content to load before scrolling
-                const { hash } = window.location;
-                if (this.hasSpecificationContent() && hash) {
-                    // Reset the scroll flag to allow scrolling once content is loaded
-                    this.didScrollToSelectedHash = false;
-                }
             }
         });
     }
 
     private getAllTabs(): any[] {
-        // Return cached result if available
-        if (this.allTabsCache) {
-            return this.allTabsCache;
-        }
-
-        const tabPanelListItem = this.getTabPanelList();
+        const tabPanelListItem: any = this.getTabPanelList();
         if (tabPanelListItem?.shadowRoot) {
-            this.allTabsCache = Array.from(
+            return Array.from(
                 tabPanelListItem.shadowRoot.querySelectorAll(
                     "dx-tab-panel-item"
                 )
             ).map((tabPanelItem: any) =>
                 tabPanelItem.shadowRoot.querySelector("button")
             );
-        } else {
-            this.allTabsCache = [];
         }
-
-        return this.allTabsCache;
+        return [];
     }
 
     private selectTabById(tabId: string) {
@@ -242,12 +158,8 @@ export default class LwcContentLayout extends ContentLayout {
         }
     }
 
-    onSlotChange(): void {
-        this.clearAllCaches();
-        super.onSlotChange();
-    }
-
     updateHeadingForRNB(): void {
+        // 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();
         }

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

@@ -73,7 +73,9 @@
                         <template lwc:if={method.firstArgument}>
                             <tr key={method.name}>
                                 <td rowspan={method.arguments.length}>
-                                    <span class="code">{method.name}</span>
+                                    <span class="code">
+                                        {method.nameInKebabCase}
+                                    </span>
                                 </td>
                                 <td rowspan={method.arguments.length}>
                                     {method.description}
@@ -98,7 +100,9 @@
                         <template lwc:else>
                             <tr key={method.name}>
                                 <td>
-                                    <span class="code">{method.name}</span>
+                                    <span class="code">
+                                        {method.nameInKebabCase}
+                                    </span>
                                 </td>
                                 <td>{method.description}</td>
                                 <td colspan="3"></td>