@salesforcedevs/docs-components 1.3.123-alpha.0 → 1.3.123-alpha.2

package/package.json

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

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

@@ -241,6 +241,26 @@ export default class ContentLayout extends LightningElement {
                             : globalNavHeight + docHeaderHeight
                     }px`
                 );
+
+                const rightNavBarEl =
+                    this.template.querySelector(".right-nav-bar");
+
+                if (rightNavBarEl) {
+                    rightNavBarEl.style.top = `${
+                        globalNavHeight +
+                        docHeaderHeight +
+                        docPhaseEl.offsetHeight
+                    }px`;
+
+                    docPhaseEl.style.setProperty(
+                        "--doc-c-phase-padding-right",
+                        `${
+                            window.innerWidth >= 1024
+                                ? "300px"
+                                : "var(--dx-g-global-header-padding-horizontal)"
+                        }`
+                    );
+                }
             }
         });
     };

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

@@ -2,6 +2,7 @@
     <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-padding-right: var(--dx-g-global-header-padding-horizontal);
 
     position: sticky;
     top: var(--doc-c-phase-top);
@@ -17,12 +18,16 @@
     flex-direction: column;
     align-items: center;
     padding-left: var(--dx-g-global-header-padding-horizontal);
-    padding-right: var(--dx-g-global-header-padding-horizontal);
+    padding-right: var(--doc-c-phase-padding-right);
     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);
 }
 
@@ -36,7 +41,7 @@ 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.ts

@@ -9,6 +9,9 @@ export default class Phase extends LightningElement {
 
     isBodyHidden = false;
 
+    @api
+    maxWidthSize: "small" | "large" = "small";
+
     get docPhaseTitle() {
         return this.docPhaseInfo?.title;
     }
@@ -30,7 +33,8 @@ export default class Phase extends LightningElement {
         return cx(
             "doc-status-base",
             "doc-status-container",
-            "doc-phase-container"
+            "doc-phase-container",
+            `doc-phase-max-width-${this.maxWidthSize}`
         );
     }
 
@@ -43,9 +47,8 @@ export default class Phase extends LightningElement {
     }
 
     renderedCallback() {
-        const phaseBodyContainer = this.template.querySelector(
-            ".doc-phase-body"
-        );
+        const phaseBodyContainer =
+            this.template.querySelector(".doc-phase-body");
         if (phaseBodyContainer && this.docPhaseInfo) {
             // eslint-disable-next-line @lwc/lwc/no-inner-html
             phaseBodyContainer.innerHTML = this.docPhaseInfo.body;