@salesforcedevs/docs-components 1.3.115-alpha-001 → 1.3.120-alpha.0

package/package.json

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

package/src/modules/doc/contentLayout/contentLayout.css

@@ -72,7 +72,7 @@ dx-toc {
 }
 
 .right-nav-bar {
-    margin-left: var(--dx-c-content-vertical-spacing);
+    margin-left: var(--dx-g-spacing-2xl);
 }
 
 @media screen and (max-width: 1024px) {
@@ -100,6 +100,10 @@ dx-toc {
         padding-right: 0;
     }
 
+    .sidebar-open {
+        height: 0;
+    }
+
     .left-nav-bar {
         height: unset;
         z-index: 10;

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

@@ -6,6 +6,7 @@
                 trees={sidebarContent}
                 value={sidebarValue}
                 header={sidebarHeader}
+                ontogglesidebar={onToggleSidebar}
             >
                 <slot name="sidebar-header" slot="header"></slot>
             </dx-sidebar-old>
@@ -20,13 +21,14 @@
                 coveo-public-access-token={coveoPublicAccessToken}
                 coveo-search-hub={coveoSearchHub}
                 coveo-advanced-query-config={coveoAdvancedQueryConfig}
+                ontogglesidebar={onToggleSidebar}
             >
                 <slot name="sidebar-header" slot="header"></slot>
             </dx-sidebar>
         </template>
         <div class="content-body-doc-phase-container">
             <slot name="doc-phase"></slot>
-            <div class="content-body-container">
+            <div class={contentBodyClass}>
                 <div class="content-body">
                     <doc-breadcrumbs
                         if:true={showBreadcrumbs}

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

@@ -1,4 +1,5 @@
 import { LightningElement, api, track } from "lwc";
+import cx from "classnames";
 import { closest } from "kagekiri";
 import { toJson } from "dxUtils/normalizers";
 import { highlightTerms } from "dxUtils/highlight";
@@ -83,6 +84,7 @@ export default class ContentLayout extends LightningElement {
     private observer?: IntersectionObserver;
     private hasRendered: boolean = false;
     private contentLoaded: boolean = false;
+    private sidebarOpen: boolean = false;
 
     get shouldDisplayFeedback() {
         return this.contentLoaded && typeof Sprig !== "undefined";
@@ -125,6 +127,13 @@ export default class ContentLayout extends LightningElement {
         );
     }
 
+    get contentBodyClass(): string {
+        return cx(
+            "content-body-container",
+            this.sidebarOpen ? "sidebar-open" : ""
+        );
+    }
+
     connectedCallback(): void {
         const hasParentHighlightListener = closest(
             "doc-xml-content",
@@ -153,6 +162,7 @@ export default class ContentLayout extends LightningElement {
         this.adjustNavPosition();
         window.addEventListener("scroll", this.adjustNavPosition);
         window.addEventListener("resize", this.adjustNavPosition);
+        window.addEventListener("resize", this.checkSidebarOpen);
 
         if (!this.hasRendered) {
             this.hasRendered = true;
@@ -168,6 +178,7 @@ export default class ContentLayout extends LightningElement {
         );
         window.removeEventListener("scroll", this.adjustNavPosition);
         window.removeEventListener("resize", this.adjustNavPosition);
+        window.removeEventListener("resize", this.checkSidebarOpen);
         this.searchSyncer.dispose();
         this.clearRenderObserverTimer();
 
@@ -185,7 +196,7 @@ export default class ContentLayout extends LightningElement {
         }
     };
 
-    /* 
+    /*
         This is a workaround for the global nav sticky header being decoupled from the doc header & doc phase.
         We have to account for the global nav changing height due to animations.
     */
@@ -391,4 +402,15 @@ export default class ContentLayout extends LightningElement {
         this.setSidebarInputValue(nextSearchParam);
         this.dispatchHighlightChange(nextSearchParam);
     }
+
+    private onToggleSidebar(e: CustomEvent): void {
+        this.sidebarOpen = e.detail.open;
+    }
+
+    // since the content body is set to a height of 0 when the sidebar is open, we need to reset the sidebarOpen state when the window is resized
+    private checkSidebarOpen = (): void => {
+        if (window.innerWidth > 769) {
+            this.sidebarOpen = false;
+        }
+    };
 }

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

@@ -21,10 +21,6 @@
 }
 
 .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);
 }
 

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

@@ -9,8 +9,6 @@ export default class Phase extends LightningElement {
 
     isBodyHidden = false;
 
-    maxWidthSize: "small" | "large" = "small";
-
     get docPhaseTitle() {
         return this.docPhaseInfo?.title;
     }
@@ -32,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"
         );
     }
 
@@ -46,8 +43,9 @@ 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;