@salesforcedevs/dx-components 1.3.355 → 1.3.357

package/lwc.config.json

@@ -91,6 +91,7 @@
         "dx/stepSequenceStep",
         "dx/tabPanel",
         "dx/tabPanelList",
+        "dx/tabbedCodeBlock",
         "dx/tbidAvatarButton",
         "dx/toast",
         "dx/toc",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.355",
+    "version": "1.3.357",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -46,5 +46,5 @@
     "volta": {
         "node": "18.18.0"
     },
-    "gitHead": "fdc955427a0630610f706b51d0c92335259696c3"
+    "gitHead": "568e719998db5e10c4601b1fcd3a184aa9a380c0"
 }

package/src/modules/dx/codeBlock/codeBlock.css

@@ -9,6 +9,7 @@
 
 pre {
     margin: 0 !important;
+    height: var(--dx-code-block-height, unset);
 }
 
 .copyta {
@@ -19,7 +20,7 @@ pre {
 }
 
 .toolbar {
-    border-radius: 0.3em 0.3em 0 0;
+    border-radius: var(--dx-code-block-toolbar-border-radius, 0.3em 0.3em 0 0);
     opacity: 1;
     display: flex;
     align-items: center;

package/src/modules/dx/codeBlock/codeBlock.ts

@@ -39,14 +39,14 @@ prism.languages.sql_docs_template = sqlDocsTemplate;
 // Used for remove enclosing <pre> tag's (if occurs)
 const preTagRegexp: RegExp = /^<pre.*?>(.*)<\/pre>$/is;
 
-const LIGHT = "light";
-const DARK = "dark";
+export const LIGHT = "light";
+export const DARK = "dark";
 const themes: CodeBlockTheme[] = [LIGHT, DARK];
 const LOCAL_STORAGE_KEY = "dx-codeblock-theme";
 
 export default class CodeBlock extends LightningElement {
     @api defaultTheme: CodeBlockTheme = LIGHT;
-    @api header: string = "title";
+    @api header: string = "";
     @api sourceLink: string = "";
     @api language: string = "";
     // if it is true, it renders code as is coming instead of wrapping it into html/xml comments tags.

package/src/modules/dx/footerOption/footerOption.css

@@ -7,5 +7,5 @@ a {
 }
 
 a:hover {
-    color: var(--dx-g-link-hover-color);
+    color: var(--dx-footer-themed-header-link-hover-color);
 }

package/src/modules/dx/tabPanelItem/tabPanelItem.css

@@ -6,7 +6,7 @@
     font-size: var(--dx-g-text-base);
     font-weight: var(--dx-g-font-normal);
     line-height: var(--dx-g-spacing-lg);
-    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg);
+    padding: var(--dx-g-spacing-sm) var(--dx-g-spacing-lg);
     border-top-left-radius: var(--dx-g-spacing-sm);
     border-top-right-radius: var(--dx-g-spacing-sm);
     border-bottom: var(--dx-g-spacing-xs) solid transparent;

package/src/modules/dx/tabbedCodeBlock/tabbedCodeBlock.css

@@ -0,0 +1,8 @@
+dx-code-block {
+    --dx-code-block-height: 320px;
+    --dx-code-block-toolbar-border-radius: 0;
+}
+
+dx-tab-panel-list {
+    --dx-c-tab-panel-list-horizontal-padding: 0;
+}

package/src/modules/dx/tabbedCodeBlock/tabbedCodeBlock.html

@@ -0,0 +1,16 @@
+<template>
+    <dx-tab-panel-list tabs={tabs}>
+        <template for:each={_codeBlocks} for:item="codeBlockItem">
+            <dx-tab-panel key={codeBlockItem.header}>
+                <!-- The header attribute is not passed intentionally because the tab title uses the header value. -->
+                <dx-code-block
+                    default-theme={defaultTheme}
+                    code-block={codeBlockItem.codeBlock}
+                    language={codeBlockItem.language}
+                    source-link={codeBlockItem.sourceLink}
+                    is-encoded={codeBlockItem.isEncoded}
+                ></dx-code-block>
+            </dx-tab-panel>
+        </template>
+    </dx-tab-panel-list>
+</template>

package/src/modules/dx/tabbedCodeBlock/tabbedCodeBlock.ts

@@ -0,0 +1,44 @@
+import { LightningElement, api } from "lwc";
+import { CodeBlockItem } from "typings/custom";
+import { safeDecodeURI, toJson } from "dxUtils/normalizers";
+import { DARK } from "dx/codeBlock";
+
+export default class TabbedCodeBlock extends LightningElement {
+    _codeBlocks: CodeBlockItem[] = [];
+
+    // By default, we want a dark theme for the tabbed code block; however, if the user changes the theme of any code block, it updates the same across the entire website.
+    @api defaultTheme = DARK;
+
+    get tabs(): string {
+        // Use the code block headers to create a tabs array as a JSON string
+        return JSON.stringify(
+            this._codeBlocks.map((codeBlock) => ({ label: codeBlock.header }))
+        );
+    }
+
+    // We need to pass the attribute as decodedURI(JSON.stringify(codeBlocksArray)) to avoid issues with single and double quotes in the code block content.
+    @api
+    set codeBlocks(value: string) {
+        if (value) {
+            // Decode the encoded code block JSON string
+            const decodeCodeBlockJson = safeDecodeURI(value);
+            try {
+                const codeBlockItems = toJson(decodeCodeBlockJson);
+                this._codeBlocks = codeBlockItems.map(
+                    (codeBlock: CodeBlockItem) => {
+                        return {
+                            ...codeBlock,
+                            defaultTheme: this.defaultTheme
+                        };
+                    }
+                );
+            } catch (exception) {
+                console.log("Invalid codeblock items json", exception);
+            }
+        }
+    }
+
+    get codeBlocks(): CodeBlockItem[] {
+        return this._codeBlocks;
+    }
+}

package/src/modules/dxUtils/normalizers/normalizers.ts

@@ -76,3 +76,15 @@ export const normalizeBoolean = (
 export const normalizeDomId = (id: string): string => {
     return id.replace(/^[^a-z]+|[^\w.-]+/gi, "");
 };
+
+export const safeDecodeURI = (value: string): string => {
+    try {
+        // Check if the value contains URI encoding patterns
+        return typeof value === "string" && value.includes("%")
+            ? decodeURIComponent(value)
+            : value;
+    } catch (error) {
+        // In case of any errors, return the original value
+        return value;
+    }
+};