@salesforcedevs/docs-components 1.15.6 → 1.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.15.6",
+    "version": "1.17.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": "1ffac16d66295e04f390e3240328e7f7a9541268"
 }

package/src/modules/doc/content/content.ts

@@ -43,26 +43,10 @@ export default class Content extends LightningElement {
         return this.docContent;
     }
 
-    @api
-    set codeBlockTheme(value) {
-        this._codeBlockTheme = value;
-    }
-
-    get codeBlockTheme() {
-        return this._codeBlockTheme;
-    }
-
     @track docContent: DocContent = "";
-    _codeBlockTheme: string = "dark";
     _docRendered: boolean = false;
-    originalCodeBlockThemeValue: String = "";
 
     connectedCallback() {
-        this.template.addEventListener(
-            "themechange",
-            this.updateTheme.bind(this) // eslint-disableline no-use-before-define
-        );
-
         window.addEventListener(
             "highlightedtermchange",
             this.updateHighlighted
@@ -76,15 +60,6 @@ export default class Content extends LightningElement {
         );
     }
 
-    updateTheme() {
-        this._codeBlockTheme =
-            this._codeBlockTheme === "dark" ? "light" : "dark";
-        const codeBlockEls = this.template.querySelectorAll("dx-code-block");
-        codeBlockEls.forEach((codeBlockEl) => {
-            codeBlockEl.setAttribute("theme", this._codeBlockTheme);
-        });
-    }
-
     renderPaginationButton(anchorEl: HTMLElement) {
         const isNext = anchorEl.textContent!.includes("Next →");
         anchorEl.innerHTML = "";
@@ -116,11 +91,11 @@ export default class Content extends LightningElement {
             const codeBlockEls = divEl.querySelectorAll(".codeSection");
             codeBlockEls.forEach((codeBlockEl) => {
                 codeBlockEl.setAttribute("lwc:dom", "manual");
-                const classList = (codeBlockEl.firstChild as any).classList;
+                const classList = codeBlockEl.firstElementChild?.classList;
                 let language = "";
-                for (const key in classList) {
-                    if (typeof classList[key] === "string") {
-                        const className = classList[key];
+                if (classList) {
+                    for (let i = 0; i < classList.length; i++) {
+                        const className = classList[i];
                         if (className.startsWith("brush:")) {
                             language = className.split(":")[1];
                         }
@@ -133,7 +108,6 @@ export default class Content extends LightningElement {
                     codeBlock: codeBlockEl.innerHTML,
                     // ! Hot fix for incoming html tags from couchdb for xml blocks, fix me soon please
                     language: LANGUAGE_MAP[language] || language,
-                    theme: this.codeBlockTheme,
                     header: "", // Default no title.
                     variant: this.codeBlockType,
                     isEncoded: true
@@ -158,6 +132,7 @@ export default class Content extends LightningElement {
                     }
                 });
 
+                // Set a flag to 1 (true) if and only if all detailEls have no content.
                 let flag = 1;
                 for (let i: number = 0; i < detailEls.length; i++) {
                     flag &= (detailEls[i].innerHTML.trim() === "") as any; // Dark Magic TM
@@ -359,7 +334,7 @@ export default class Content extends LightningElement {
         );
 
     @api
-    public navigateToHash(hash: String) {
+    public navigateToHash = (hash: String) => {
         const splitHash = hash.split("#");
         if (splitHash.length === 2) {
             hash = splitHash[1];
@@ -370,7 +345,7 @@ export default class Content extends LightningElement {
         } else {
             window.scrollTo({ top: 0, behavior: "smooth" });
         }
-    }
+    };
 
     renderedCallback() {
         if (this._docRendered) {

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>