@salesforcedevs/docs-components 1.3.324 → 1.3.325

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.324",
+    "version": "1.3.325",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
@@ -24,5 +24,5 @@
         "@types/lodash.orderby": "^4.6.7",
         "@types/lodash.uniqby": "^4.7.7"
     },
-    "gitHead": "f005d7f0cbb1ce8f67f11d7267cfeb893d2c031a"
+    "gitHead": "142d2d19228378de3cf5a98e3f0586a34626fed3"
 }

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

@@ -215,10 +215,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 +237,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 +255,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 +288,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`;
-                }
             }
         });
     };