@salesforcedevs/docs-components 1.3.127 → 1.3.130

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.127",
+    "version": "1.3.130",
     "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": "74db03edcd4920e328787e4174126ba6ee39a1dc"
+    "gitHead": "cd52db111aee7bb881d15862490c5c07463acb3b"
 }

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

@@ -1,3 +1,4 @@
+/* eslint-disable @lwc/lwc/no-document-query */
 import { LightningElement, api, track } from "lwc";
 import { closest } from "kagekiri";
 import { toJson } from "dxUtils/normalizers";
@@ -204,7 +205,10 @@ export default class ContentLayout extends LightningElement {
         const docHeaderEl = document.querySelector(
             ".sticky-doc-header"
         ) as HTMLElement;
-        const docPhaseEl = document.querySelector("doc-phase") as HTMLElement;
+
+        const docPhaseEl = this.template
+            .querySelector("[name=doc-phase]")!
+            .assignedElements()[0] as HTMLSlotElement;
 
         if (!sidebarEl || !globalNavEl || !contextNavEl || !docHeaderEl) {
             console.warn("One or more required elements are missing.");
@@ -237,6 +241,30 @@ 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.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");
+
+                if (rightNavBarEl) {
+                    rightNavBarEl.style.top = `${
+                        globalNavHeight +
+                        docHeaderHeight +
+                        docPhaseEl.offsetHeight
+                    }px`;
+                }
             }
         });
     };

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

@@ -4,6 +4,7 @@
 
 :host {
     --doc-c-phase-top: 0;
+    --doc-c-phase-container-align-items: flex-start;
 
     position: sticky;
     top: var(--doc-c-phase-top);
@@ -15,32 +16,25 @@
 .doc-phase-container {
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: var(--doc-c-phase-container-align-items);
     padding-left: var(--dx-g-global-header-padding-horizontal);
     padding-right: var(--dx-g-global-header-padding-horizontal);
     width: 100%;
     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 {
     margin-left: auto;
 }
 
-/* 
+/*
     NOTE: Here we are assuming that indicator height won't go beyond 1000px.
 
     It's one of the suggested way to achieve the expand/collapse animation

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"
         );
     }