@salesforcedevs/dx-components 0.26.1-alpha0.4 → 0.26.2

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

@@ -0,0 +1,79 @@
+<template>
+    <template if:true={codeBlock}>
+        <div class={codeblocksClassname}>
+            <div class="toolbar">
+                <div class="toolbar-item">
+                    <div class="dx-text-heading-7 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
+                            label="View Code Source"
+                            placement="top-left"
+                        >
+                            <dx-button
+                                href={sourceLink}
+                                type="button"
+                                variant="tertiary"
+                                aria-label="source"
+                                class="btn source-btn"
+                                target="_blank"
+                            >
+                                Source
+                            </dx-button>
+                        </dx-tooltip>
+                    </div>
+                    <div class="divider"></div>
+                </template>
+                <div class="toolbar-item">
+                    <dx-tooltip label={updateThemeBtnText} placement="top-left">
+                        <dx-button
+                            onclick={updateTheme}
+                            type="button"
+                            icon-symbol="away"
+                            variant="tertiary"
+                            aria-label="theme"
+                            class="btn update-theme-btn"
+                        ></dx-button>
+                    </dx-tooltip>
+                </div>
+                <div class="divider"></div>
+                <div class="toolbar-item">
+                    <dx-tooltip label={copyBtnText} placement="top-left">
+                        <dx-button
+                            onclick={copySource}
+                            type="button"
+                            icon-symbol="copy"
+                            variant="tertiary"
+                            aria-label="copy"
+                            class="btn copy-btn"
+                        ></dx-button>
+                    </dx-tooltip>
+                </div>
+            </div>
+            <div class="code-block-content" lwc:dom="manual"></div>
+        </div>
+    </template>
+    <template if:false={codeBlock}>No content provided</template>
+</template>

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

@@ -0,0 +1,143 @@
+import mockProps from "./__tests__/mockProps";
+import "../../helpers/code/code.css";
+import "../../helpers/text/text.css";
+import "../../helpers/reset/reset.css";
+
+export default {
+    title: "dx/dx-code-block",
+    component: "dx-code-block"
+};
+
+const styles = `
+<style>
+  dx-code-block {
+    display:block;
+    margin-bottom:12px;
+  }
+</style>`;
+
+export const Base = (args: any) => `${styles}
+
+<span class="dx-text-heading-7 dx-code-block-heading">XML Example - Dark Theme</span>
+<dx-code-block
+    title="XML example"
+    code-block="${args.xml}"
+    language="xml"
+    default-theme="dark"
+></dx-code-block>
+
+<span class="dx-text-heading-7 dx-code-block-heading">Dark Theme</span>
+<dx-code-block
+    title="Apex Example"
+    code-block="${args.apex}"
+    language="apex"
+    default-theme="dark"
+></dx-code-block>
+
+  <span class="dx-text-heading-7 dx-code-block-heading">Visualforce Example - Dark Theme</span>
+  <dx-code-block
+      title="Visualforce example"
+      code-block="${args.visualforce}"
+      language="visualforce"
+      default-theme="dark"
+  ></dx-code-block>
+
+  <span class="dx-text-heading-7 dx-code-block-heading">Javascript Example - Dark Theme</span>
+  <dx-code-block
+      title="Javascript example"
+      code-block="${args.javascript}"
+      language="javascript"
+      default-theme="dark"
+  ></dx-code-block>
+
+  <span class="dx-text-heading-7 dx-code-block-heading">Dark Theme - Source Button</span>
+  <dx-code-block
+      title="Java Example"
+      code-block="${args.java}"
+      language="java"
+      source-link="http://www.salesforce.com"
+      default-theme="dark"
+  ></dx-code-block>
+
+  <span class="dx-text-heading-7 dx-code-block-heading">Dark Theme - No Language</span>
+  <dx-code-block
+      title="No Language Example"
+      code-block="${args.java}"
+      source-link="http://www.salesforce.com"
+      default-theme="dark"
+  ></dx-code-block>
+
+  <span class="dx-text-heading-7 dx-code-block-heading">HTML Example - Dark Theme</span>
+  <dx-code-block
+      title="HTML Example"
+      code-block="${args.html}"
+      language="html"
+      default-theme="dark"
+  ></dx-code-block>
+
+  <span class="dx-text-heading-7 dx-code-block-heading">Dark Theme</span>
+  <dx-code-block
+      title="TypeScript Example"
+      code-block="${args.TypeScript}"
+      language="TypeScript"
+      default-theme="dark"
+  ></dx-code-block>
+
+  <span class="dx-text-heading-7 dx-code-block-heading">CSS Example - Dark Theme</span>
+  <dx-code-block
+      title="CSS Example"
+      code-block="${args.css}"
+      language="css"
+      default-theme="dark"
+  ></dx-code-block>
+
+  <span class="dx-text-heading-7 dx-code-block-heading">PHP Example - Dark Theme</span>
+  <dx-code-block
+      title="PHP Example"
+      code-block="${args.php}"
+      language="php"
+      default-theme="dark"
+  ></dx-code-block>`;
+Base.args = mockProps;
+
+export const PreTag = (args: any) => `${styles}
+    <span class="dx-text-heading-7 dx-code-block-heading">Dark Theme</span>
+    <dx-code-block
+        title="Pre Tag Apex Example"
+        code-block="${args.preTagApex}"
+        language="apex"
+        default-theme="dark"
+    ></dx-code-block>
+`;
+PreTag.args = mockProps;
+
+export const LangParameterAsText = (args: any) => `${styles}
+    <span class="dx-text-heading-7 dx-code-block-heading">Fallback lang parameter as 'text' - XML example</span>
+    <dx-code-block
+        title="XML example"
+        code-block="${args.xml}"
+        language="text"
+    ></dx-code-block>
+
+    <span class="dx-text-heading-7 dx-code-block-heading">Fallback lang parameter as 'text' - Javascript example</span>
+    <dx-code-block
+        title="XML example"
+        code-block="${args.javascript}"
+        language="text"
+    ></dx-code-block>
+
+    <span class="dx-text-heading-7 dx-code-block-heading">Fallback lang parameter as 'text' - Apex example</span>
+    <dx-code-block
+        title="XML example"
+        code-block="${args.apex}"
+        language="text"
+    ></dx-code-block>
+
+    <span class="dx-text-heading-7 dx-code-block-heading"> Passed lang parameter as 'text' - Text example</span>
+    <dx-code-block
+        title="Text example with markup"
+        code-block="${args.text}"
+        language="text"
+    ></dx-code-block>`;
+
+LangParameterAsText.args = mockProps;

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

@@ -0,0 +1,215 @@
+import { LightningElement, api, wire, track } from "lwc";
+import { CodeBlockTheme, CodeBlockLanguage } from "typings/custom";
+import cx from "classnames";
+import Prism from "utils-internal/prismjs";
+import {
+    getLocalStorageData,
+    setLocalStorageData
+} from "@sfdocs-internal/wires";
+import { track as gtmTrack } from "dx/instrumentation";
+
+// Used por remove enclosing <pre> tag's (if occurs)
+const preTagRegexp: RegExp = /^<pre.*?>(.*)<\/pre>$/is;
+
+const LIGHT = "light";
+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 title: string = "title";
+    @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.
+    @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" }
+    ];
+
+    connectedCallback() {
+        if (!this.theme) {
+            this.theme = this.defaultTheme;
+        }
+    }
+
+    _codeBlock: string = "";
+    @api
+    set codeBlock(value: string) {
+        this._codeBlockRendered = false;
+        let match;
+        this._codeBlock = (
+            (match = preTagRegexp.exec(value.trim())) === null
+                ? value.trim()
+                : match[1]
+        ).trim();
+    }
+
+    get codeBlock(): string {
+        return this._codeBlock;
+    }
+
+    @track private theme: CodeBlockTheme | null = null;
+
+    @wire(getLocalStorageData, { key: "dx-codeblock-theme" })
+    updateThemeForCodeblock(value: any) {
+        if (themes.includes(value)) {
+            this.theme = value;
+        } else {
+            setLocalStorageData(
+                LOCAL_STORAGE_KEY,
+                this.theme || this.defaultTheme
+            );
+        }
+    }
+
+    get updateThemeBtnText(): string {
+        return `Switch to ${this.theme === DARK ? "Light" : "Dark"} mode`;
+    }
+
+    get showCodeSourceBtn(): boolean {
+        return !!this.sourceLink;
+    }
+
+    get codeblocksClassname(): string {
+        return cx(`dx-theme-${this.theme}`);
+    }
+
+    formatCodeBlock() {
+        const divEl = this.template.querySelector("div.code-block-content");
+        const templateEl = document.createElement("template");
+        if (
+            !this.isEncoded &&
+            this.markupLangs.includes(this.selectedLanguage.id || "")
+        ) {
+            // eslint-disable-next-line
+            templateEl.innerHTML = `<pre class='codeblock'><!-- ${this.codeBlock.replace(
+                /<!--(.*?)-->/gs,
+                "@@$1##"
+            )} --></pre>`;
+        } else {
+            // eslint-disable-next-line
+            const innerHtml = this.isEncoded
+                ? this.codeBlock
+                : this.codeBlock.replace(/</g, "&lt").replace(/>/g, "&gt");
+
+            templateEl.innerHTML = `<pre class='codeblock'>${innerHtml}</pre>`;
+        }
+        const codeBlockEls = templateEl.content.querySelectorAll("pre");
+        codeBlockEls.forEach((codeBlockEl) => {
+            // eslint-disable-next-line
+            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"
+                ? (codeEl.innerHTML = codeHTML)
+                : (codeEl.textContent = this._codeBlock.trim());
+            // eslint-disable-next-line
+            codeBlockEl.innerHTML = "";
+            codeBlockEl.appendChild(codeEl);
+            Prism.highlightAllUnder(codeBlockEl);
+        });
+
+        if (divEl) {
+            // eslint-disable-next-line
+            divEl.innerHTML = "";
+            divEl.append(templateEl.content);
+            if (this.markupLangs.includes(this.selectedLanguage.id || "")) {
+                const res = this.template.querySelector(`code.language-markup`);
+                if (res) {
+                    // eslint-disable-next-line
+                    res.innerHTML = res.innerHTML.replace(
+                        /@@(.*?)##/gs,
+                        `<span class="token comment">&lt;!--$1--&gt;</span>`
+                    );
+                }
+            }
+        }
+    }
+
+    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();
+    }
+
+    /**
+     * 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
+     */
+    async copySource(event: any) {
+        gtmTrack(event.target, "custEv_codeBlock", {
+            codeBlockAction: "copy"
+        });
+
+        try {
+            const snippetContainer: HTMLElement | null =
+                this.template.querySelector(".code-block-content");
+            if (snippetContainer && snippetContainer.textContent) {
+                await navigator.clipboard.writeText(
+                    snippetContainer.textContent
+                );
+                this.copyBtnText = "Copied!";
+                setTimeout(() => {
+                    this.copyBtnText = "Click to copy";
+                }, 2000);
+            }
+        } catch (error) {
+            console.error(error);
+        }
+    }
+
+    updateTheme(event: any) {
+        this.theme = this.theme === DARK ? LIGHT : DARK;
+        setLocalStorageData(LOCAL_STORAGE_KEY, this.theme);
+
+        gtmTrack(event.target, "custEv_codeBlock", {
+            codeBlockAction: this.theme === DARK ? "darkmode" : "lightmode"
+        });
+    }
+
+    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/codeBlock/darkTheme.css

@@ -0,0 +1,88 @@
+.dx-theme-dark .token.punctuation {
+    color: var(--dx-g-blue-vibrant-90);
+}
+
+.dx-theme-dark .token.property {
+    color: var(--dx-g-cloud-blue-vibrant-70);
+}
+
+.dx-theme-dark .token.keyword {
+    color: var(--dx-g-purple-vibrant-70);
+}
+
+.dx-theme-dark .token.comment {
+    color: var(--dx-g-blue-vibrant-80);
+}
+
+.dx-theme-dark .token.selector {
+    color: var(--dx-g-teal-vibrant-70);
+}
+
+.dx-theme-dark .token.operator {
+    color: var(--dx-g-pink-vibrant-65);
+}
+
+.dx-theme-dark .token.function {
+    color: var(--dx-g-yellow-vibrant-80);
+}
+
+.dx-theme-dark .token.variable {
+    color: var(--dx-g-orange-vibrant-70);
+}
+
+.dx-theme-dark .token.prolog {
+    color: #93a1a1;
+}
+
+.dx-theme-dark .token.doctype {
+    color: var(--dx-g-blue-vibrant-80);
+}
+
+.dx-theme-dark .token.cdata {
+    color: #93a1a1;
+}
+
+.dx-theme-dark .token.tag {
+    color: var(--dx-g-cloud-blue-vibrant-70);
+}
+
+.dx-theme-dark .token.attr-name {
+    color: var(--dx-g-teal-vibrant-70);
+}
+
+.dx-theme-dark .token.attr-value {
+    color: var(--dx-g-purple-vibrant-70);
+}
+
+.dx-theme-dark .token.entity {
+    color: #fff;
+    background: var(--dx-g-blue-vibrant-10);
+}
+
+.dx-theme-dark .token.url {
+    color: #fff;
+    background: var(--dx-g-blue-vibrant-10);
+}
+
+.dx-theme-dark .token.regex,
+.dx-theme-dark .token.deleted,
+.dx-theme-dark .token.constant,
+.dx-theme-dark .token.number,
+.dx-theme-dark .token.builtin,
+.dx-theme-dark .token.important .dx-theme-dark .token.boolean,
+.dx-theme-dark .token.symbol,
+.dx-theme-dark .token.inserted,
+.dx-theme-dark .token.char,
+.dx-theme-dark .token.string {
+    color: #fff;
+}
+
+.dx-theme-dark .language-css .token.string {
+    color: #fff;
+    background: var(--dx-g-blue-vibrant-10);
+}
+
+.dx-theme-dark .style .token.string {
+    color: #fff;
+    background: var(--dx-g-blue-vibrant-10);
+}

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

@@ -0,0 +1,72 @@
+.dx-theme-light .token.comment {
+    color: #706e6b;
+}
+
+.dx-theme-light .token.punctuation {
+    color: var(--dx-g-blue-vibrant-10);
+}
+
+.dx-theme-light .token.keyword {
+    color: var(--dx-g-pink-vibrant-40);
+}
+
+.dx-theme-light .token.variable {
+    color: var(--dx-g-hot-orange-vibrant-40);
+}
+
+.dx-theme-light .token.operator {
+    color: var(--dx-g-green-vibrant-50);
+}
+
+.dx-theme-light .token.property {
+    color: var(--dx-g-indigo-vibrant-40);
+}
+
+.dx-theme-light .token.selector {
+    color: var(--dx-g-blue-vibrant-40);
+}
+
+.dx-theme-light .token.function {
+    color: var(--dx-g-teal-vibrant-40);
+}
+
+.dx-theme-light .token.tag {
+    color: rgb(75, 36, 219);
+}
+
+.dx-theme-light .token.attr-name {
+    color: rgb(0, 107, 102);
+}
+
+.dx-theme-light .token.attr-value {
+    color: rgb(204, 0, 96);
+}
+
+.dx-theme-light .token.doctype {
+    color: rgb(0, 114, 215);
+}
+
+.dx-theme-light .token.prolog,
+.dx-theme-light .token.cdata,
+.dx-theme-light .token.boolean,
+.dx-theme-light .token.number,
+.dx-theme-light .token.constant,
+.dx-theme-light .token.symbol,
+.dx-theme-light .token.deleted,
+.dx-theme-light .token.string,
+.dx-theme-light .token.char,
+.dx-theme-light .token.builtin,
+.dx-theme-light .token.inserted,
+.dx-theme-light .token.atrule,
+.dx-theme-light .token.regex,
+.dx-theme-light .token.important {
+    color: var(--dx-g-gray-10);
+}
+
+.dx-theme-light .token.entity,
+.dx-theme-light .token.url,
+.dx-theme-light .language-css .token.string,
+.dx-theme-light .style .token.string {
+    color: var(--dx-g-gray-10);
+    background: var(--dx-g-gray-95);
+}