@salesforcedevs/docs-components 1.20.6-sticky-banner → 1.20.6-sticky-banner2

package/package.json

@@ -1,12 +1,11 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.20.6-sticky-banner",
+    "version": "1.20.6-sticky-banner2",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
     "engines": {
-        "node": "20.x",
-        "yarn": "1.22.19"
+        "node": "20.x"
     },
     "publishConfig": {
         "access": "public"

package/src/modules/doc/amfReference/amfReference.css

@@ -1,10 +1,3 @@
-doc-phase {
-    --doc-c-phase-top: calc(
-        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height) +
-            var(--dx-g-spacing-xl)
-    );
-}
-
 /* We need to apply some borders when there are two doc phases */
 doc-phase:not(:only-of-type)::part(container) {
     border-top: 1px solid var(--dx-g-yellow-vibrant-90);
@@ -15,11 +8,6 @@ doc-phase:nth-child(2)::part(container) {
     border-bottom: 1px solid var(--dx-g-yellow-vibrant-90);
 }
 
-/* We don't want second component to sticky as we need to handle different cases like position */
-doc-phase:nth-child(2) {
-    position: static;
-}
-
 .api-documentation {
     margin-top: 48px;
 }

package/src/modules/doc/contentLayout/contentLayout.html

@@ -20,7 +20,7 @@
             <div class="doc-phase-wrapper">
                 <slot name="doc-phase"></slot>
             </div>
-            <div class="version-banner-wrapper">
+            <div class="version-wrapper">
                 <slot name="version-banner"></slot>
             </div>
             <div class="content-body-container">

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

@@ -217,15 +217,19 @@ export default class ContentLayout extends LightningElement {
             ".sticky-doc-header"
         ) as HTMLElement;
 
-        const docPhaseWrapper = this.template.querySelector(".doc-phase-wrapper") as HTMLElement;
-        const versionBannerWrapper = this.template.querySelector(".version-banner-wrapper") as HTMLElement;
+        const docPhaseWrapper = this.template.querySelector(
+            ".doc-phase-wrapper"
+        ) as HTMLElement;
+        const versionWrapper = this.template.querySelector(
+            ".version-wrapper"
+        ) as HTMLElement;
 
         const docPhaseEl = (
             docPhaseWrapper.querySelector("[name=doc-phase]")! as any
         ).assignedElements()[0] as HTMLSlotElement;
 
         const verBannerEl = (
-            versionBannerWrapper.querySelector("[name=version-banner]")! as any
+            versionWrapper.querySelector("[name=version-banner]")! as any
         ).assignedElements()[0] as HTMLSlotElement;
 
         if (!sidebarEl || !globalNavEl || !contextNavEl || !docHeaderEl) {
@@ -258,13 +262,16 @@ export default class ContentLayout extends LightningElement {
                 `${globalNavHeight}px`
             );
 
-            const docPhaseElHeight = (docPhaseEl || verBannerEl)
+            const docPhaseElHeight =
+                docPhaseEl || verBannerEl
                     ? (docPhaseEl || verBannerEl).getBoundingClientRect().height
                     : 0;
 
             // Adjusting the doc section heading on scroll.
             docHeadingEls.forEach((docHeadingEl) => {
-                (docHeadingEl as any).style.scrollMarginTop = `${totalHeaderHeight + docPhaseElHeight + 40}px`;
+                (docHeadingEl as any).style.scrollMarginTop = `${
+                    totalHeaderHeight + docPhaseElHeight + 40
+                }px`;
             });
 
             // Adjusting the right nav bar on scroll.
@@ -289,15 +296,20 @@ export default class ContentLayout extends LightningElement {
                 }
             }
 
-            const docPhaseTop = window.innerWidth < 769 ? globalNavHeight + docHeaderHeight + sidebarEl.getBoundingClientRect().height : globalNavHeight + docHeaderHeight
+            const docPhaseTop =
+                window.innerWidth < 769
+                    ? globalNavHeight +
+                      docHeaderHeight +
+                      sidebarEl.getBoundingClientRect().height
+                    : globalNavHeight + docHeaderHeight;
 
             // If doc phase element exists, we need to account for its sticky position. Mobile should include the sidebar height (since it becomes sticky aswell).
             // To handle sticky position for safari browser, position sticky given to wrapper class
             if (docPhaseEl) {
                 docPhaseWrapper.style.top = `${docPhaseTop}px`;
-            } else if(verBannerEl) {
-                versionBannerWrapper.style.position = 'sticky';
-                versionBannerWrapper.style.top = `${docPhaseTop}px`;
+            } else if (verBannerEl) {
+                versionWrapper.style.position = "sticky";
+                versionWrapper.style.top = `${docPhaseTop}px`;
             }
         });
     };

package/src/modules/doc/lwcContentLayout/lwcContentLayout.html

@@ -19,7 +19,7 @@
             <div class="doc-phase-wrapper">
                 <slot name="doc-phase"></slot>
             </div>
-            <div class="version-banner-wrapper">
+            <div class="version-wrapper">
                 <slot name="version-banner"></slot>
             </div>
             <div class="content-body-container">

package/src/modules/doc/phase/phase.css

@@ -3,7 +3,6 @@
 @import "docHelpers/status";
 
 :host {
-    --doc-c-phase-top: 0;
     --doc-c-phase-container-align-items: flex-start;
 }
 

package/src/modules/doc/xmlContent/xmlContent.css

@@ -31,10 +31,6 @@ dx-dropdown > dx-button:hover {
     --border-color: var(--button-primary-color-hover);
 }
 
-doc-phase {
-    --doc-c-phase-top: var(--dx-g-global-header-height);
-}
-
 @media screen and (max-width: 768px) {
     doc-content-layout {
         --dx-g-doc-header-main-nav-height: 41px;
@@ -45,10 +41,4 @@ doc-phase {
             var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
         );
     }
-
-    doc-phase {
-        --doc-c-phase-top: calc(
-            var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
-        );
-    }
 }

package/src/modules/docHelpers/contentLayoutStyle/contentLayoutStyle.css

@@ -60,15 +60,17 @@ dx-toc {
 }
 
 .doc-phase-wrapper,
-.version-banner-wrapper {
+.version-wrapper {
+    /* NOTE: If you are changing z-index value here, ensure it's less than z-index of dx-sidebar in contentLayout.css */
     z-index: var(--dx-g-z-index-100);
 }
 
 .doc-phase-wrapper {
     position: sticky;
 }
-  
-.version-banner-wrapper {
+
+/* We don't want second component to sticky */
+.version-wrapper {
     position: static;
 }