@salesforcedevs/dx-components 1.3.83 → 1.3.85

package/lwc.config.json

@@ -1,11 +1,7 @@
 {
     "modules": [
-        {
-            "dir": "src/modules"
-        },
-        {
-            "npm": "@salesforcedevs/dw-components"
-        }
+        { "dir": "src/modules" },
+        { "npm": "@salesforcedevs/dw-components" }
     ],
     "expose": [
         "dx/audio",
@@ -94,6 +90,7 @@
         "dxHelpers/animations",
         "dxHelpers/button",
         "dxHelpers/card",
+        "dxHelpers/code",
         "dxHelpers/commonHeader",
         "dxHelpers/reset",
         "dxHelpers/scrollbar",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.83",
+    "version": "1.3.85",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -24,7 +24,6 @@
         "lodash.kebabcase": "^4.1.1",
         "microtip": "0.2.2",
         "salesforce-oauth2": "^0.2.0",
-        "shiki": "^0.11.1",
         "throttle-debounce": "^5.0.0",
         "uuid": "^9.0.0"
     },
@@ -41,5 +40,5 @@
         "eventsourcemock": "^2.0.0",
         "luxon": "^3.1.0"
     },
-    "gitHead": "97b96b6a71af7312811bd937293c9da3102ad443"
+    "gitHead": "6b738627c2fefd4e639f1def42cdc4d4a44c7171"
 }

package/src/modules/dx/breadcrumbs/breadcrumbs.ts

@@ -85,14 +85,16 @@ export default class Breadcrumbs extends LightningElement {
         breadcrumbs: Breadcrumb[]
     ): NormalizedBreadcrumb[] {
         const { length } = breadcrumbs;
-        return breadcrumbs.map((breadcrumb, i): NormalizedBreadcrumb => {
-            const last = i === length - 1;
-            return {
-                ...breadcrumb,
-                asLink: this.hideCurrentLocation || !last,
-                last
-            };
-        });
+        return breadcrumbs.map(
+            (breadcrumb, i): NormalizedBreadcrumb => {
+                const last = i === length - 1;
+                return {
+                    ...breadcrumb,
+                    asLink: this.hideCurrentLocation || !last,
+                    last
+                };
+            }
+        );
     }
 
     private get breadcrumbDropdownOptions() {

package/src/modules/dx/cardCallout/cardCallout.css

@@ -16,7 +16,7 @@
 
 /* title */
 
-.dx-text-heading-3 {
+.dx-text-display-4 {
     color: inherit;
     margin-bottom: var(--dx-g-spacing-3xl);
     overflow-wrap: hyphenate-word;
@@ -51,7 +51,7 @@ dx-icon::part(svg) {
 }
 
 @media screen and (max-width: 1024px) {
-    .dx-text-heading-3 {
+    .dx-text-display-4 {
         margin-bottom: var(--dx-g-spacing-xl);
     }
 }

package/src/modules/dx/cardCallout/cardCallout.html

@@ -6,7 +6,7 @@
         style={style}
         onclick={sendGtm}
     >
-        <h3 class="dx-text-heading-3">{title}</h3>
+        <h3 class="dx-text-display-4">{title}</h3>
         <span class="dx-text-button-light">
             {label}
             <dx-icon symbol="forward"></dx-icon>

package/src/modules/dx/cardContent/cardContent.html

@@ -21,10 +21,7 @@
             />
         </a>
         <div
-            class="
-                dx-card-base_section-vertical dx-card-base_column
-                card_section-text
-            "
+            class="dx-card-base_section-vertical dx-card-base_column card_section-text"
         >
             <span if:true={label} part="label" class="label dx-text-label-3">
                 {label}

package/src/modules/dx/cardDocs/cardDocs.css

@@ -24,11 +24,11 @@
     flex-grow: 1;
 }
 
-.dx-text-heading-6 dx-button {
+.dx-text-display-8 dx-button {
     margin-left: var(--dx-g-spacing-xs);
 }
 
-.dx-text-heading-4 {
+.dx-text-display-6 {
     position: relative;
     -webkit-line-clamp: var(--dx-c-heading-max-lines);
     -webkit-box-orient: vertical;
@@ -36,7 +36,7 @@
     overflow: hidden;
 }
 
-.dx-text-heading-4 dx-icon {
+.dx-text-display-6 dx-icon {
     display: inline-block;
     transform: translateY(-3px);
 }

package/src/modules/dx/cardDocs/cardDocs.html

@@ -7,10 +7,7 @@
             class="image dx-card-base_image"
         />
         <div
-            class="
-                dx-card-base_section-vertical dx-card-base_column
-                card_section-text
-            "
+            class="dx-card-base_section-vertical dx-card-base_column card_section-text"
         >
             <span class="dx-text-label-3">{label}</span>
             <dx-card-title

package/src/modules/dx/cardEvent/cardEvent.css

@@ -105,12 +105,7 @@ dx-formatted-date-time {
         display: none;
     }
 
-    .dx-text-heading-5 {
-        font-size: 18px;
-        line-height: 24px;
-    }
-
-    .dx-text-heading-4 {
+    .dx-text-display-6 {
         font-size: 24px;
         line-height: 28px;
     }

package/src/modules/dx/cardEvent/cardEvent.html

@@ -20,12 +20,12 @@
                 if:true={featured}
             >
                 <dx-formatted-date-time
-                    class="dx-text-heading-5 month"
+                    class="dx-text-display-8 month"
                     value={startDatetime}
                     month="short"
                 ></dx-formatted-date-time>
                 <dx-formatted-date-time
-                    class="dx-text-heading-1 day"
+                    class="dx-text-display-1b day"
                     value={startDatetime}
                     day="2-digit"
                 ></dx-formatted-date-time>

package/src/modules/dx/cardNews/cardNews.css

@@ -24,7 +24,7 @@
     z-index: 1;
 }
 
-.dx-text-heading-3 {
+.dx-text-display-4 {
     margin: 4px 0 4px 0;
     color: inherit;
 }
@@ -44,7 +44,7 @@ img {
     margin: 0;
 }
 
-.dx-card-size-large .dx-text-heading-3 {
+.dx-card-size-large .dx-text-display-4 {
     font-size: 30px;
     letter-spacing: 0.3px;
     line-height: 40px;
@@ -81,7 +81,7 @@ img {
         box-shadow: var(--dx-g-box-shadow-sm);
     }
 
-    .dx-text-heading-3 {
+    .dx-text-display-4 {
         letter-spacing: 0.1px;
     }
 
@@ -114,7 +114,7 @@ img {
         max-width: 50%;
     }
 
-    .dx-card-size-normal .dx-text-heading-3 {
+    .dx-card-size-normal .dx-text-display-4 {
         font-size: var(--dx-g-text-xl);
         line-height: 28px;
     }
@@ -128,7 +128,7 @@ img {
         margin: 14px 0 -2px 0;
     }
 
-    .dx-card-size-large .dx-text-heading-3 {
+    .dx-card-size-large .dx-text-display-4 {
         font-size: var(--dx-g-text-2xl);
         line-height: 40px;
         letter-spacing: 0.6px;

package/src/modules/dx/cardNews/cardNews.html

@@ -8,7 +8,7 @@
         part="container"
     >
         <div class={textContainerClassName}>
-            <h3 class="dx-text-heading-3">{title}</h3>
+            <h3 class="dx-text-display-4">{title}</h3>
             <p>{body}</p>
             <div class="cta">
                 <dx-button if:true={hasLargeButton} size="large">

package/src/modules/dx/cardTitle/cardTitle.css

@@ -9,7 +9,7 @@
     --dx-c-card-title-icon-size: 22px;
 }
 
-h3.dx-text-heading-4 {
+h3.dx-text-display-6 {
     color: var(--dx-c-card-title-color);
     transition: var(--dx-g-transition-hue-1x);
     font-size: var(--dx-c-card-title-font-size);
@@ -32,7 +32,7 @@ dx-icon {
 }
 
 @media screen and (max-width: 1024px) {
-    .dx-text-heading-4 {
+    .dx-text-display-6 {
         font-size: 20px;
         line-height: 24px;
     }

package/src/modules/dx/cardTitle/cardTitle.html

@@ -1,5 +1,5 @@
 <template>
-    <h3 class="dx-text-heading-4">
+    <h3 class="dx-text-display-6">
         <a if:true={href} href={href} target={target}>
             {titleToWrap}
             <template if:true={needsSpace}>&#32;</template>

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

@@ -1,3 +1,4 @@
+@import "dxHelpers/code";
 @import "dxHelpers/text";
 @import "./darkTheme.css";
 @import "./lightTheme.css";
@@ -101,7 +102,7 @@ div.code-block-content {
     background: var(--dx-g-gray-95);
 }
 
-code[class*="shiki"] {
+code[class*="language-"] {
     margin-left: -11px;
 }
 
@@ -109,36 +110,19 @@ code[class*="shiki"] {
     margin-right: var(--dx-g-spacing-xs);
 }
 
-.italic {
-    font-style: italic;
-}
-
-pre[class*="shiki"] {
-    font-size: 14px;
+pre[class*="language-"] {
     border-radius: 0 0 0.3em 0.3em;
     padding-bottom: var(--dx-g-spacing-smd);
     background-color: unset;
     padding-top: var(--dx-g-spacing-sm);
 }
 
+pre[class*="language-"].line-numbers {
+    padding-left: 56px;
+}
+
 @media screen and (max-width: 640px) {
     .dx-code-block-heading {
         display: none;
     }
 }
-
-/* Adding line numbers via CSS counters */
-code {
-    counter-reset: step;
-    counter-increment: step 0;
-}
-
-code .line::before {
-    content: counter(step);
-    counter-increment: step;
-    width: 1rem;
-    margin-right: 1.5rem;
-    display: inline-block;
-    text-align: right;
-    color: rgba(115, 138, 148, 0.4);
-}

package/src/modules/dx/codeBlock/codeBlock.html

@@ -3,10 +3,29 @@
         <div class={codeblocksClassname}>
             <div class="toolbar">
                 <div class="toolbar-item">
-                    <div class="dx-text-heading-7 dx-code-block-heading">
+                    <div class="dx-text-display-8 dx-code-block-heading">
                         { title }
                     </div>
                 </div>
+                <template if:true={showLanguageDropdown}>
+                    <div class="toolbar-item">
+                        <dx-dropdown
+                            small="true"
+                            options={allLanguages}
+                            value={selectedLanguageId}
+                            onchange={onLanguageChange}
+                        >
+                            <dx-button
+                                icon-symbol="chevrondown"
+                                class="btn language-btn"
+                                variant="custom"
+                            >
+                                { selectedLanguageLabel }
+                            </dx-button>
+                        </dx-dropdown>
+                    </div>
+                    <div class="divider"></div>
+                </template>
                 <template if:true={showCodeSourceBtn}>
                     <div class="toolbar-item">
                         <dx-tooltip

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

@@ -1,7 +1,7 @@
 import { LightningElement, api, wire, track } from "lwc";
-import { CodeBlockTheme } from "typings/custom";
+import { CodeBlockTheme, CodeBlockLanguage } from "typings/custom";
 import cx from "classnames";
-import { Shiki } from "dxUtils/shiki";
+import Prism from "dxUtils/prismjs";
 import {
     getLocalStorageData,
     setLocalStorageData
@@ -24,6 +24,39 @@ export default class CodeBlock extends LightningElement {
     // if it is true, it renders code as is coming instead of wrapping it into html/xml comments tags.
     @api isEncoded = false;
 
+    private markupLangs = ["visualforce", "html", "xml"];
+    private _codeBlockRendered: boolean = false;
+    private componentLoaded: boolean = false;
+    private showLanguageDropdown: boolean = false;
+    private copyBtnText: string = "Click to copy";
+    private selectedLanguageLabel: string = "";
+    private selectedLanguageId: string = "";
+    private selectedLanguage: CodeBlockLanguage = { label: "Language", id: "" };
+    private allLanguages: CodeBlockLanguage[] = [
+        { label: "Language", id: "" },
+        { label: "Apex", id: "apex" },
+        { label: "Java", id: "java" },
+        { label: "Javascript", id: "javascript" },
+        { label: "CSS", id: "css" },
+        { label: "Visualforce", id: "visualforce" },
+        { label: "Html", id: "html" },
+        { label: "xml", id: "xml" },
+        { label: "TypeScript", id: "typescript" },
+        { label: "PHP", id: "php" },
+        { label: "JSON", id: "json" },
+        { label: "Swift", id: "swift" },
+        { label: "Kotlin", id: "kotlin" },
+        { label: "Python", id: "python" },
+        { label: "Bash", id: "bash" },
+        { label: "Shell", id: "shell" },
+        { label: "Shell", id: "sh" },
+        { label: "SQL", id: "sql" },
+        { label: "YAML", id: "yaml" },
+        { label: "Markdown", id: "markdown" },
+        { label: "Markdown", id: "md" },
+        { label: "JSX", id: "jsx" }
+    ];
+
     connectedCallback() {
         if (!this.theme) {
             this.theme = this.defaultTheme;
@@ -33,11 +66,11 @@ export default class CodeBlock extends LightningElement {
     _codeBlock: string = "";
     @api
     set codeBlock(value: string) {
+        this._codeBlockRendered = false;
         let match;
-        this._codeBlock = (
-            (match = preTagRegexp.exec(value.trim())) === null
-                ? value.trim()
-                : match[1]
+        this._codeBlock = ((match = preTagRegexp.exec(value.trim())) === null
+            ? value.trim()
+            : match[1]
         ).trim();
     }
 
@@ -45,16 +78,12 @@ export default class CodeBlock extends LightningElement {
         return this._codeBlock;
     }
 
-    private copyBtnText = "Click to copy";
     @track private theme: CodeBlockTheme | null = null;
 
     @wire(getLocalStorageData, { key: "dx-codeblock-theme" })
     updateThemeForCodeblock(value: any) {
         if (themes.includes(value)) {
             this.theme = value;
-            // As styles computation is static the code needs to be reformatted after a theme change
-            Shiki.setTheme(this.theme!);
-            this.formatCodeBlock();
         } else {
             setLocalStorageData(
                 LOCAL_STORAGE_KEY,
@@ -75,7 +104,7 @@ export default class CodeBlock extends LightningElement {
         return cx(`dx-theme-${this.theme}`);
     }
 
-    async formatCodeBlock() {
+    formatCodeBlock() {
         const divEl = this.template.querySelector("div.code-block-content");
         const templateEl = document.createElement("template");
 
@@ -88,13 +117,17 @@ export default class CodeBlock extends LightningElement {
             "vvvvv$1vvvvv"
         );
 
-        if (!this.isEncoded && Shiki.isMarkupLanguage(this.language)) {
-            cleanCodeBlock = `${cleanCodeBlock.replace(
+        if (
+            !this.isEncoded &&
+            this.markupLangs.includes(this.selectedLanguage.id || "")
+        ) {
+            // Temporarily replace HTML comment characters, which Prism would also strip
+            cleanCodeBlock = `<!--${cleanCodeBlock.replace(
                 /<!--(.*?)-->/gs,
                 "@@$1##"
-            )}`;
+            )}-->`;
         } else {
-            // If this is a non-encoded markup language, encode angle brackets
+            // If this is a non-encoded markup language, encode angle brackets that Prism would strip
             cleanCodeBlock = this.isEncoded
                 ? cleanCodeBlock
                 : cleanCodeBlock.replace(/</g, "&lt").replace(/>/g, "&gt");
@@ -103,62 +136,42 @@ export default class CodeBlock extends LightningElement {
         // eslint-disable-next-line
         templateEl.innerHTML = `<pre class='codeblock'>${cleanCodeBlock}</pre>`;
 
-        const codeBlockEls = Array.from(
-            templateEl.content.querySelectorAll("pre")
-        );
-
-        // temporary hack to avoid prismjs tokens from showing up in markup languages
-        const isDocs = window.location.href.includes("/docs/");
-
-        const promisesForHighlighted = codeBlockEls.map((codeBlockEl) =>
+        const codeBlockEls = templateEl.content.querySelectorAll("pre");
+        codeBlockEls.forEach((codeBlockEl) => {
             // eslint-disable-next-line
-            Shiki.codeToHtml(
-                Shiki.isMarkupLanguage(this.language) && !isDocs
-                    ? codeBlockEl.innerHTML
-                    : codeBlockEl.textContent,
-                {
-                    lang: this.language
-                }
-            )
-                .then((highlightedCode) => {
-                    codeBlockEl.classList.add("line-numbers");
-                    // for custom markup content, it is a workaround to be refactored later.
-                    const codeEl = document.createElement("code");
-                    // eslint-disable-next-line
-                    this.language !== "text"
-                        ? // eslint-disable-next-line
-                          (codeEl.innerHTML = highlightedCode)
-                        : (codeEl.textContent = highlightedCode.trim());
-                    // eslint-disable-next-line
-                    codeBlockEl.innerHTML = "";
-                    codeBlockEl.appendChild(codeEl);
-
-                    // Italicize anything marked as a "variable" by the docs team
-                    // eslint-disable-next-line
-                    codeBlockEl.innerHTML = codeBlockEl.innerHTML.replace(
-                        /vvvvv(.+?)vvvvv/g,
-                        "<span class='token italic'>$1</span>"
-                    );
-                })
-                .catch((error) => {
-                    console.error(error);
-                    // Italicize anything marked as a "variable" by the docs team
-                    // eslint-disable-next-line
-                    codeBlockEl.innerHTML = codeBlockEl.innerHTML.replace(
-                        /vvvvv(.+?)vvvvv/g,
-                        "<span class='token italic'>$1</span>"
-                    );
-                })
-        );
-
-        await Promise.all(promisesForHighlighted);
+            const codeHTML = codeBlockEl.innerHTML;
+            codeBlockEl.classList.add("line-numbers");
+            const codeEl = document.createElement("code");
+            codeEl.classList.add(
+                `language-${
+                    this.markupLangs.includes(this.selectedLanguage.id || "")
+                        ? "markup"
+                        : this.selectedLanguage.id
+                }`
+            );
+            // for custom markup content, it is a workaround to be refactored later.
+            // eslint-disable-next-line
+            this.language !== "text"
+                ? // eslint-disable-next-line
+                  (codeEl.innerHTML = codeHTML)
+                : (codeEl.textContent = this._codeBlock.trim());
+            // eslint-disable-next-line
+            codeBlockEl.innerHTML = "";
+            codeBlockEl.appendChild(codeEl);
+            Prism.highlightAllUnder(codeBlockEl);
+            // Italicize anything marked as a "variable" by the docs team
+            // eslint-disable-next-line
+            codeBlockEl.innerHTML = codeBlockEl.innerHTML.replace(
+                /vvvvv(.+?)vvvvv/g,
+                "<span class='token italic'>$1</span>"
+            );
+        });
 
         if (divEl) {
             // eslint-disable-next-line
             divEl.innerHTML = "";
             divEl.append(templateEl.content);
-
-            if (Shiki.isMarkupLanguage(this.language)) {
+            if (this.markupLangs.includes(this.selectedLanguage.id || "")) {
                 const res = this.template.querySelector(`code.language-markup`);
                 if (res) {
                     // Restore any temporarily replaced HTML comment characters
@@ -172,6 +185,25 @@ export default class CodeBlock extends LightningElement {
         }
     }
 
+    onLanguageChange(newLang: any) {
+        this.selectedLanguage =
+            this.allLanguages.find(
+                (lang: CodeBlockLanguage) => lang.id === newLang.detail
+            ) || this.allLanguages[0];
+        this.selectedLanguageLabel = this.selectedLanguage.label;
+        this.selectedLanguageId = this.selectedLanguage.id;
+        this.formatCodeBlock();
+
+        gtmTrack(newLang, "custEv_ctaLinkClick", {
+            event: "custEv_ctaLinkClick",
+            click_text: newLang.detail,
+            element_title: "dx-dropdown",
+            click_url: this.selectedLanguageId,
+            element_type: "link",
+            content_category: "code block"
+        });
+    }
+
     /**
      * Note: There is a known issue in storybook@6.1.13 where some apis are not available if you access Storybook through IP address.
      * https://github.com/storybookjs/storybook/issues/13529
@@ -185,8 +217,9 @@ export default class CodeBlock extends LightningElement {
         });
 
         try {
-            const snippetContainer: HTMLElement | null =
-                this.template.querySelector(".code-block-content");
+            const snippetContainer: HTMLElement | null = this.template.querySelector(
+                ".code-block-content"
+            );
             if (snippetContainer && snippetContainer.textContent) {
                 await navigator.clipboard.writeText(
                     snippetContainer.textContent
@@ -203,9 +236,6 @@ export default class CodeBlock extends LightningElement {
 
     updateTheme(event: any) {
         this.theme = this.theme === DARK ? LIGHT : DARK;
-        // As styles computation is static the code needs to be reformatted after a theme change
-        Shiki.setTheme(this.theme);
-        this.formatCodeBlock();
         setLocalStorageData(LOCAL_STORAGE_KEY, this.theme);
 
         gtmTrack(event.target, "custEv_iconClick", {
@@ -217,6 +247,16 @@ export default class CodeBlock extends LightningElement {
     }
 
     renderedCallback() {
+        if (this._codeBlockRendered) {
+            return;
+        }
+        this.selectedLanguage =
+            this.allLanguages.find(
+                (l: CodeBlockLanguage) => l.id === this.language
+            ) || this.allLanguages[0];
+        this.selectedLanguageLabel = this.selectedLanguage.label;
+        this.selectedLanguageId = this.selectedLanguage.id;
         this.formatCodeBlock();
+        this._codeBlockRendered = true;
     }
 }

package/src/modules/dx/dropdown/dropdown.ts

@@ -172,8 +172,9 @@ export default class Dropdown extends LightningElement {
             ? this.findOptionElementIndex(this.value)
             : 0;
 
-        const optionToFocus: any =
-            this.optionsElements[defaultIndex < 0 ? 0 : defaultIndex];
+        const optionToFocus: any = this.optionsElements[
+            defaultIndex < 0 ? 0 : defaultIndex
+        ];
         if (optionToFocus) {
             optionToFocus.focus();
             this._focusedValue = optionToFocus.option.id;

package/src/modules/dx/emptyState/emptyState.html

@@ -2,7 +2,7 @@
     <div class={containerClassName} part="container">
         <img src={imageAssetPath} alt="Mountains" />
         <div class="text">
-            <h3 class="title dx-text-heading-3">{title}</h3>
+            <h3 class="title dx-text-display-4">{title}</h3>
             <p class="subtitle dx-text-body-2" if:true={subtitle}>{subtitle}</p>
         </div>
     </div>

package/src/modules/dx/feature/feature.html

@@ -1,8 +1,8 @@
 <template>
     <section class={sectionClass}>
         <div class="description">
-            <h2 if:true={hasLabel} class="dx-text-heading-7 label">{label}</h2>
-            <h3 class="dx-text-heading-3">{title}</h3>
+            <h2 if:true={hasLabel} class="dx-text-display-8 label">{label}</h2>
+            <h3 class="dx-text-display-4">{title}</h3>
             <div class="body dx-text-body-2">
                 <slot></slot>
             </div>