@salesforcedevs/docs-components 1.3.325-rnbtab-alpha → 1.3.325-rnbtab-alpha2

package/lwc.config.json

@@ -9,6 +9,7 @@
         "doc/breadcrumbs",
         "doc/content",
         "doc/contentCallout",
+        "doc/doDont",
         "doc/contentLayout",
         "doc/contentMedia",
         "doc/docXmlContent",

package/package.json

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

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

@@ -134,7 +134,7 @@ export default class Content extends LightningElement {
                     // ! Hot fix for incoming html tags from couchdb for xml blocks, fix me soon please
                     language: LANGUAGE_MAP[language] || language,
                     theme: this.codeBlockTheme,
-                    title: "", // Default no title.
+                    header: "", // Default no title.
                     variant: this.codeBlockType,
                     isEncoded: true
                 });
@@ -173,7 +173,7 @@ export default class Content extends LightningElement {
                 const type = calloutEl.querySelector("h4")!.textContent!;
                 const typeLower = type.toLowerCase();
                 Object.assign(calloutCompEl, {
-                    title: type,
+                    header: type,
                     variant: typeLower
                 });
                 // eslint-disable-next-line no-use-before-define

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

@@ -104,7 +104,7 @@ export default class ContentLayout extends LightningElement {
     }
 
     get showTabBasedRNB() {
-        const tabPanelListItem: any = this.selectTabElement();
+        const tabPanelListItem: any = this.getTabPanelItems();
         return tabPanelListItem?.id === RNB_BY_TAB ? true : false;
     }
 
@@ -112,7 +112,7 @@ export default class ContentLayout extends LightningElement {
         this.updateRNB();
     };
 
-    private selectTabElement() {
+    private getTabPanelItems() {
         return document.querySelector("dx-tab-panel-list");
     }
 
@@ -127,17 +127,14 @@ export default class ContentLayout extends LightningElement {
     private getHeadingElements() {
         let headingElements = document.querySelectorAll(TOC_HEADER_TAG);
         if (this.showTabBasedRNB) {
-            const tabPanelListItem: any = this.selectTabElement();
-            // for (const tabPanelListItem of tabPanelListItems) {
-            if (tabPanelListItem.id === RNB_BY_TAB) {
-                const tabPanels =
-                    tabPanelListItem.querySelectorAll("dx-tab-panel");
-                for (const tabPanelItem of tabPanels) {
-                    if (tabPanelItem.active) {
-                        headingElements =
-                            tabPanelItem.querySelectorAll(TOC_HEADER_TAG);
-                        break;
-                    }
+            const tabPanelListItem: any = this.getTabPanelItems();
+            const tabPanels =
+                tabPanelListItem?.querySelectorAll("dx-tab-panel");
+            for (const tabPanelItem of tabPanels) {
+                if (tabPanelItem.active) {
+                    headingElements =
+                        tabPanelItem.querySelectorAll(TOC_HEADER_TAG);
+                    break;
                 }
             }
         }
@@ -145,68 +142,19 @@ export default class ContentLayout extends LightningElement {
     }
 
     private updateURL() {
-        const tabPanelListItem: any = this.selectTabElement();
-        if (tabPanelListItem?.id === RNB_BY_TAB) {
-            const tabPanelItems: any =
-                tabPanelListItem?.shadowRoot.querySelectorAll(
-                    "dx-tab-panel-item"
-                );
-            if (tabPanelItems) {
-                for (const tabPanelItem of tabPanelItems as any) {
-                    const tab = tabPanelItem.shadowRoot.querySelector("button");
-                    const url = new URL(window.location.href);
-                    const previousTabID = url.searchParams.get("type");
+        const tabs = this.getAllTabs();
+        if (tabs.length > 0) {
+            tabs.forEach((tab: any) => {
+                if (tab?.getAttribute("aria-selected") === "true") {
                     const tabID = tab?.getAttribute("aria-label");
-                    if (
-                        tab?.getAttribute("aria-selected") === "true" &&
-                        previousTabID !== tabID
-                    ) {
+                    const url = new URL(window.location.href);
+                    if (url.searchParams.get("type") !== tabID) {
                         url.searchParams.set("type", tabID);
                         url.hash = "";
                         window.history.pushState({}, "", url.toString());
-                        break;
                     }
                 }
-            }
-        }
-    }
-
-    private tabOnPageLoad() {
-        const url = new URL(window.location.href);
-        const previousTabID = url.searchParams.get("type");
-
-        if (!previousTabID) {
-            this.updateURL();
-        } else {
-            const tabPanelListItem: any = this.selectTabElement();
-            const tabPanelItems: any =
-                tabPanelListItem?.shadowRoot.querySelectorAll(
-                    "dx-tab-panel-item"
-                );
-            const tabPanels = tabPanelListItem.querySelectorAll("dx-tab-panel");
-            if (tabPanelItems) {
-                let tabIndex = 0;
-                for (const tabPanelItem of tabPanelItems as any) {
-                    const tab = tabPanelItem.shadowRoot.querySelector("button");
-                    const activeTab =
-                        tabPanels[tabIndex]?.shadowRoot.querySelector(
-                            ".tabpanel"
-                        );
-                    if (tab?.getAttribute("aria-label") === previousTabID) {
-                        if (activeTab) {
-                            activeTab.classList.add("tabpanel-active");
-                        }
-                        tab.active = true;
-                        this.initialIndex = tabIndex;
-                    } else {
-                        if (activeTab) {
-                            activeTab.classList.remove("tabpanel-active");
-                        }
-                        tab.active = false;
-                    }
-                    tabIndex++;
-                }
-            }
+            });
         }
     }
 
@@ -260,8 +208,44 @@ export default class ContentLayout extends LightningElement {
 
         if (this.showTabBasedRNB) {
             window.addEventListener("tabchanged", this.onTabChanged);
-            this.tabOnPageLoad();
+            this.restoreTabSelection();
+        }
+    }
+
+    private restoreTabSelection() {
+        const urlParams = new URLSearchParams(window.location.search);
+        const selectedTabId = urlParams.get("type");
+
+        if (selectedTabId) {
+            this.selectTabById(selectedTabId);
+        }
+    }
+
+    private getAllTabs(): any[] {
+        const tabPanelListItem: any = this.getTabPanelItems();
+        if (tabPanelListItem?.shadowRoot) {
+            return Array.from(
+                tabPanelListItem.shadowRoot.querySelectorAll(
+                    "dx-tab-panel-item"
+                )
+            ).map((tabPanelItem: any) =>
+                tabPanelItem.shadowRoot.querySelector("button")
+            );
         }
+        return [];
+    }
+
+    private selectTabById(tabId: string) {
+        requestAnimationFrame(() => {
+            const tabs = this.getAllTabs();
+            if (tabs.length > 0) {
+                tabs.forEach((tab: any) => {
+                    if (tab?.getAttribute("aria-label") === tabId) {
+                        tab?.click();
+                    }
+                });
+            }
+        });
     }
 
     renderedCallback(): void {
@@ -439,7 +423,12 @@ export default class ContentLayout extends LightningElement {
 
         // Note: We are doing document.querySelectorAll as a quick fix as we are not getting heading elements reference this.querySelectorAll
         const headingElements = this.getHeadingElements();
-        this.updateURL();
+
+        // We only need to update URL in case of /docs and ignore if tabs are used anywhere else in DSC
+        if (this.showTabBasedRNB) {
+            this.updateURL();
+        }
+
         for (const headingElement of headingElements as any) {
             // Add headingElements to intersectionObserver for highlighting respective RNB item when user scroll
             const id = headingElement.getAttribute("id")!;

package/src/modules/doc/doDont/doDont.css

@@ -0,0 +1,47 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--dx-g-spacing-md);
+    flex: 1;
+}
+
+.doc-do-dont-header {
+    display: flex;
+    align-items: center;
+    gap: var(--dx-g-spacing-sm);
+}
+
+.doc-do-dont-label {
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-spacing-md);
+    font-weight: var(--dx-g-font-demi);
+    line-height: var(--dx-g-spacing-lg);
+}
+
+.doc-do-color {
+    color: var(--dx-g-green-vibrant-50);
+}
+
+.doc-dont-color {
+    color: var(--dx-g-red-vibrant-30);
+}
+
+.do-dont-image-container {
+    display: flex;
+    max-height: 480px;
+    min-height: 140px;
+    padding: var(--dx-g-spacing-3xl) var(--dx-g-spacing-2xl);
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    flex: 1;
+    border-radius: var(--dx-g-spacing-sm);
+    border: 1px solid var(--dx-g-brand-default-color-border-2);
+}
+
+.doc-do-dont-img {
+    object-fit: contain;
+}

package/src/modules/doc/doDont/doDont.html

@@ -0,0 +1,27 @@
+<template>
+    <div class="container">
+        <div class="doc-do-dont-header">
+            <template lwc:if={isDo}>
+                <dx-icon
+                    symbol="success"
+                    size="large"
+                    color="green-vibrant-50"
+                ></dx-icon>
+                <div class="doc-do-dont-label doc-do-color">Do</div>
+            </template>
+            <template lwc:else>
+                <dx-icon
+                    symbol="clear"
+                    size="large"
+                    color="red-vibrant-30"
+                    class="doc-do-dont-icon"
+                ></dx-icon>
+                <div class="doc-do-dont-label doc-dont-color">Don't</div>
+            </template>
+        </div>
+        <div class="do-dont-image-container">
+            <img class="doc-do-dont-img" src={src} alt={caption} />
+        </div>
+        <div class="dx-text-body-4">{caption}</div>
+    </div>
+</template>

package/src/modules/doc/doDont/doDont.ts

@@ -0,0 +1,17 @@
+import { LightningElement, api } from "lwc";
+import { normalizeBoolean } from "dxUtils/normalizers";
+
+export default class DoDont extends LightningElement {
+    @api caption: string = "";
+    @api src!: string;
+    _isDo: boolean = false;
+
+    @api
+    get isDo(): boolean {
+        return this._isDo;
+    }
+
+    set isDo(value) {
+        this._isDo = normalizeBoolean(value);
+    }
+}