@salesforcedevs/docs-components 1.15.6 → 1.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.15.6",
+    "version": "1.16.0",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
@@ -25,5 +25,5 @@
         "@types/lodash.orderby": "4.6.9",
         "@types/lodash.uniqby": "4.7.9"
     },
-    "gitHead": "da103bd99b2f289599d528b9b8fd5860224f3bdc"
+    "gitHead": "977c82c3a242a1476eee4eee5c70b03472a7492e"
 }

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

@@ -11,6 +11,8 @@
                 language={language}
                 bail-href={bailHref}
                 bail-label={bailLabel}
+                dev-center={devCenter}
+                brand={brand}
             >
                 <slot name="sidebar-header" slot="version-picker"></slot>
             </dx-sidebar-old>
@@ -30,6 +32,8 @@
                 language={language}
                 bail-href={bailHref}
                 bail-label={bailLabel}
+                dev-center={devCenter}
+                brand={brand}
             >
                 <slot name="sidebar-header" slot="version-picker"></slot>
             </dx-sidebar>

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

@@ -42,6 +42,8 @@ export default class ContentLayout extends LightningElement {
     @api language!: string;
     @api bailHref!: string;
     @api bailLabel!: string;
+    @api devCenter: any;
+    @api brand: any;
 
     // This is needed for now to prevent failing snapshot tests due to links in the footer
     @api showFooter = false;

package/src/modules/doc/header/header.html

@@ -6,6 +6,7 @@
                     lwc:if={showBanner}
                     banner-markup={bannerMarkup}
                 ></dx-banner>
+                <!-- To-Do: Move the devCenter as a new component and use it here, as devCenter is also used in Sidebar now -->
                 <div lwc:if={devCenter} class="dev-center-link">
                     <a href={devCenter.link} class="dev-center-content">
                         <dx-icon symbol="back"></dx-icon>
@@ -30,7 +31,7 @@
                         </a>
                     </div>
                     <div
-                        lwc:if={hasScopedNavItems}
+                        lwc:if={showScopedNavItems}
                         class="header_l2_group header_l2_group-nav"
                     >
                         <div
@@ -48,7 +49,7 @@
             </header>
         </dx-brand-theme-provider>
     </template>
-    <template lwc:if={showDocDivider}>
+    <template lwc:if={shouldHideHeader}>
         <div class="no-header-content"></div>
     </template>
 </template>

package/src/modules/doc/header/header.ts

@@ -1,8 +1,8 @@
 import { api } from "lwc";
 import cx from "classnames";
-import type { OptionWithNested } from "typings/custom";
+import type { OptionWithNested, DevCenterConfig } from "typings/custom";
 import { HeaderBase } from "dxBaseElements/headerBase";
-import { toJson } from "dxUtils/normalizers";
+import { toJson, normalizeBoolean } from "dxUtils/normalizers";
 
 const TABLET_MATCH = "980px";
 const MOBILE_MATCH = "768px";
@@ -18,6 +18,15 @@ export default class Header extends HeaderBase {
     @api langValuePath: string = "id"; // allows to override how language property is interpreted, follows valuePath dropdown api.
     @api headerHref: string = "/";
 
+    @api
+    get hideDocHeader() {
+        return this._hideDocHeader;
+    }
+
+    set hideDocHeader(value) {
+        this._hideDocHeader = normalizeBoolean(value);
+    }
+
     @api
     get scopedNavItems() {
         return this._scopedNavItems;
@@ -28,7 +37,7 @@ export default class Header extends HeaderBase {
     }
 
     @api
-    get devCenter() {
+    get devCenter(): DevCenterConfig {
         return this._devCenter;
     }
 
@@ -41,14 +50,27 @@ export default class Header extends HeaderBase {
     private tabletMatchMedia!: MediaQueryList;
     private shouldRender: boolean = false;
     private showDocDivider: boolean = false;
-    private _devCenter: any;
+    private _devCenter!: DevCenterConfig;
+    private _hideDocHeader: boolean = false;
 
     protected mobileBreakpoint(): string {
         return MOBILE_MATCH;
     }
 
-    private get hasScopedNavItems(): boolean {
-        return this.scopedNavItems && this.scopedNavItems.length > 0;
+    private get showScopedNavItems(): boolean {
+        return (
+            this.scopedNavItems &&
+            this.scopedNavItems.length > 0 &&
+            !this.hideDocHeader
+        );
+    }
+
+    /**
+     * This function returns true if the hideDocHeader is true and the view is not mobile.
+     * Also we need to show the header border in case the doc is hidden or if the brand information doesn't exists.
+     */
+    private get shouldHideHeader(): boolean {
+        return (this.hideDocHeader && !this.mobile) || this.showDocDivider;
     }
 
     connectedCallback(): void {
@@ -60,7 +82,8 @@ export default class Header extends HeaderBase {
         this.tabletMatchMedia.addEventListener("change", this.onTabletChange);
 
         if (
-            (window.location.pathname.includes("/docs/") &&
+            (!this.shouldHideHeader &&
+                window.location.pathname.includes("/docs/") &&
                 window.location.pathname !== "/docs/apis") ||
             window.location.pathname ===
                 "/tableau/embedding-playground/overview" ||
@@ -91,7 +114,7 @@ export default class Header extends HeaderBase {
     protected additionalClasses(): string {
         return cx(
             this.brand && "has-brand",
-            this.hasScopedNavItems && "has-scoped-nav-items"
+            this.showScopedNavItems && "has-scoped-nav-items"
         );
     }
 }

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

@@ -11,6 +11,8 @@
                 language={language}
                 bail-href={bailHref}
                 bail-label={bailLabel}
+                dev-center={devCenter}
+                brand={brand}
             >
                 <slot name="sidebar-header" slot="version-picker"></slot>
             </dx-sidebar-old>
@@ -30,6 +32,8 @@
                 language={language}
                 bail-href={bailHref}
                 bail-label={bailLabel}
+                dev-center={devCenter}
+                brand={brand}
             >
                 <slot name="sidebar-header" slot="version-picker"></slot>
             </dx-sidebar>