@salesforcedevs/docs-components 1.3.325-rnbtab-alpha1 → 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-alpha1",
+    "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,7 +127,7 @@ export default class ContentLayout extends LightningElement {
     private getHeadingElements() {
         let headingElements = document.querySelectorAll(TOC_HEADER_TAG);
         if (this.showTabBasedRNB) {
-            const tabPanelListItem: any = this.selectTabElement();
+            const tabPanelListItem: any = this.getTabPanelItems();
             const tabPanels =
                 tabPanelListItem?.querySelectorAll("dx-tab-panel");
             for (const tabPanelItem of tabPanels) {
@@ -142,26 +142,19 @@ export default class ContentLayout extends LightningElement {
     }
 
     private updateURL() {
-        const tabPanelListItem: any = this.selectTabElement();
-        if (tabPanelListItem?.shadowRoot) {
-            const tabPanelItems =
-                tabPanelListItem.shadowRoot.querySelectorAll(
-                    "dx-tab-panel-item"
-                );
-            if (tabPanelItems) {
-                tabPanelItems.forEach((tabPanelItem: any) => {
-                    const tab = tabPanelItem.shadowRoot.querySelector("button");
-                    if (tab?.getAttribute("aria-selected") === "true") {
-                        const tabID = tab?.getAttribute("aria-label");
-                        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());
-                        }
+        const tabs = this.getAllTabs();
+        if (tabs.length > 0) {
+            tabs.forEach((tab: any) => {
+                if (tab?.getAttribute("aria-selected") === "true") {
+                    const tabID = tab?.getAttribute("aria-label");
+                    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());
                     }
-                });
-            }
+                }
+            });
         }
     }
 
@@ -228,23 +221,29 @@ export default class ContentLayout extends LightningElement {
         }
     }
 
+    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 tabPanelListItem: any = this.selectTabElement();
-            if (tabPanelListItem?.shadowRoot) {
-                const tabPanelItems =
-                    tabPanelListItem.shadowRoot.querySelectorAll(
-                        "dx-tab-panel-item"
-                    );
-                if (tabPanelItems) {
-                    tabPanelItems.forEach((tabPanelItem: any) => {
-                        const tab =
-                            tabPanelItem.shadowRoot.querySelector("button");
-                        if (tab?.getAttribute("aria-label") === tabId) {
-                            tab?.click();
-                        }
-                    });
-                }
+            const tabs = this.getAllTabs();
+            if (tabs.length > 0) {
+                tabs.forEach((tab: any) => {
+                    if (tab?.getAttribute("aria-label") === tabId) {
+                        tab?.click();
+                    }
+                });
             }
         });
     }

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);
+    }
+}