@salesforcedevs/dx-components 0.25.5 → 0.26.1-alpha0.3

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

@@ -1,79 +0,0 @@
-<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

@@ -1,143 +0,0 @@
-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

@@ -1,215 +0,0 @@
-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

@@ -1,88 +0,0 @@
-.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

@@ -1,72 +0,0 @@
-.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);
-}