@salesforcedevs/docs-components 1.3.127-alpha.0 → 1.3.130-alpha.0

package/package.json

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

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

@@ -92,9 +92,6 @@ export default class ContentLayout extends LightningElement {
 
     private searchSyncer = new SearchSyncer({
         callbacks: {
-            onUrlChange: (nextSearchString: string): void => {
-                this.updateHighlightsAndSearch(nextSearchString);
-            },
             onSearchChange: (nextSearchString: string): void => {
                 this.dispatchHighlightChange(
                     new URLSearchParams(nextSearchString).get("q") || ""
@@ -242,6 +239,19 @@ export default class ContentLayout extends LightningElement {
                     }px`
                 );
 
+                // Adjust scroll margin for doc headings when doc phase is present
+                const docHeadingEls = Array.from(
+                    document.querySelectorAll("doc-heading")
+                );
+                docHeadingEls.forEach((docHeadingEl) => {
+                    docHeadingEl.style.scrollMarginTop = `${
+                        globalNavHeight +
+                        docHeaderHeight +
+                        docPhaseEl.offsetHeight
+                    }px`;
+                });
+
+                // Adjust right nav bar position when doc phase is present
                 const rightNavBarEl =
                     this.template.querySelector(".right-nav-bar");
 
@@ -267,15 +277,25 @@ export default class ContentLayout extends LightningElement {
             return;
         }
         this.disconnectObserver();
-        this.observer = new IntersectionObserver((entries) => {
-            entries.forEach(
-                (entry) =>
-                    (this.anchoredElements[
-                        entry.target.getAttribute("id")
-                    ].intersect = entry.isIntersecting)
-            );
-            this.calculateActualSection();
-        });
+
+        const globalNavOffset = `-${getComputedStyle(
+            document.documentElement
+        ).getPropertyValue("--dx-g-doc-header-main-nav-height")}`;
+
+        this.observer = new IntersectionObserver(
+            (entries) => {
+                entries.forEach(
+                    (entry) =>
+                        (this.anchoredElements[
+                            entry.target.getAttribute("id")
+                        ].intersect = entry.isIntersecting)
+                );
+                this.calculateActualSection();
+            },
+            {
+                rootMargin: globalNavOffset.trim()
+            }
+        );
 
         // 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);
@@ -294,10 +314,6 @@ export default class ContentLayout extends LightningElement {
         }
     };
 
-    onSidebarClick() {
-        this.resetScrollThreshold();
-    }
-
     onSlotChange(event: Event): void {
         const slotElements = (
             event.target as HTMLSlotElement

package/src/modules/doc/overview/overview.html

@@ -2,7 +2,6 @@
     <div class="container">
         <doc-phase
             if:true={docPhaseInfo}
-            max-width-size="large"
             doc-phase-info={docPhaseInfo}
         ></doc-phase>
 

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

@@ -23,18 +23,11 @@
     border: none;
 }
 
-.max-width-container {
-    max-width: var(--dx-g-doc-content-body-max-width);
-}
-
-.doc-phase-max-width-large .max-width-container {
-    max-width: var(--dx-g-doc-content-max-width);
-}
-
 .doc-phase-title-container {
     display: flex;
     flex-direction: row;
     align-items: center;
+    width: 100%;
 }
 
 dx-button {

package/src/modules/doc/phase/phase.html

@@ -1,30 +1,28 @@
 <template>
     <div class={className} part="container">
-        <div class="max-width-container">
-            <div class="doc-phase-title-container">
-                <dx-icon
-                    class="doc-status-icon doc-phase-icon"
-                    symbol="recipe"
-                    size="large"
-                    color="status-icon-color"
-                ></dx-icon>
-                <p class="doc-status-title doc-phase-title dx-text-body-3">
-                    {docPhaseTitle}
-                </p>
-                <dx-button
-                    variant="inline"
-                    onclick={onButtonClick}
-                    aria-label={hideBodyText}
-                >
-                    {hideBodyText}
-                </dx-button>
-            </div>
-            <!--
+        <div class="doc-phase-title-container">
+            <dx-icon
+                class="doc-status-icon doc-phase-icon"
+                symbol="recipe"
+                size="large"
+                color="status-icon-color"
+            ></dx-icon>
+            <p class="doc-status-title doc-phase-title dx-text-body-3">
+                {docPhaseTitle}
+            </p>
+            <dx-button
+                variant="inline"
+                onclick={onButtonClick}
+                aria-label={hideBodyText}
+            >
+                {hideBodyText}
+            </dx-button>
+        </div>
+        <!--
             NOTE: Here we are rendering mark up using lwc:dom & innerHTML
             option instead of slots because the html markup will come as a
             property to the component from a configuration
         -->
-            <span lwc:dom="manual" class={bodyClassName}></span>
-        </div>
+        <span lwc:dom="manual" class={bodyClassName}></span>
     </div>
 </template>

package/src/modules/doc/phase/phase.ts

@@ -9,9 +9,6 @@ export default class Phase extends LightningElement {
 
     isBodyHidden = false;
 
-    @api
-    maxWidthSize: "small" | "large" = "small";
-
     get docPhaseTitle() {
         return this.docPhaseInfo?.title;
     }
@@ -33,8 +30,7 @@ export default class Phase extends LightningElement {
         return cx(
             "doc-status-base",
             "doc-status-container",
-            "doc-phase-container",
-            `doc-phase-max-width-${this.maxWidthSize}`
+            "doc-phase-container"
         );
     }