@salesforcedevs/dx-components 0.26.1-alpha0.6 → 0.27.0

package/src/modules/dx/checkboxGroup/checkboxGroup.ts

@@ -0,0 +1,77 @@
+import { LightningElement, api } from "lwc";
+import { toJson } from "utils/normalizers";
+
+type Option = {
+    value: string;
+    label: string;
+    disabled: boolean;
+};
+
+// API structure modeled after:
+// https://ant.design/components/checkbox/
+// https://github.com/ant-design/ant-design/blob/master/components/checkbox/Group.tsx
+
+export default class CheckboxGroup extends LightningElement {
+    @api disabled: boolean = false;
+    @api legend!: string;
+
+    @api
+    get options(): Option[] {
+        const statefulOptions = this._options.map((option) => ({
+            ...option,
+            checked: this._value.includes(option.value),
+            disabled: this.disabled || option.disabled
+        }));
+        return statefulOptions;
+    }
+    set options(value) {
+        this._options = toJson(value);
+    }
+
+    @api get defaultValue(): string[] | null {
+        return this._defaultValue;
+    }
+    set defaultValue(value) {
+        this._value = toJson(value) || [];
+    }
+
+    @api get value(): string[] {
+        return this._value;
+    }
+    set value(value) {
+        if (this.defaultValue) {
+            console.error(
+                "Do not supply both value and default-value to form groups."
+            );
+        }
+
+        this._value = toJson(value) || [];
+    }
+
+    private _defaultValue: string[] | null = null;
+    private _options: Option[] = [];
+    private _value: string[] = [];
+
+    private updateValue(checkedValue: string) {
+        this._value = this._value.includes(checkedValue)
+            ? this._value.filter((val) => val !== checkedValue)
+            : [...this._value, checkedValue];
+    }
+
+    private onChange(e: CustomEvent) {
+        const { checked, value: checkedValue, originalEvent } = e.detail;
+
+        this.updateValue(checkedValue);
+
+        this.dispatchEvent(
+            new CustomEvent("change", {
+                detail: {
+                    checked,
+                    checkedValue,
+                    originalEvent,
+                    value: this._value
+                }
+            })
+        );
+    }
+}

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

@@ -0,0 +1,128 @@
+@import "helpers/code";
+@import "helpers/text";
+@import "./darkTheme.css";
+@import "./lightTheme.css";
+
+:host {
+    position: relative;
+}
+
+pre {
+    margin: 0 !important;
+}
+
+.copyta {
+    height: 0;
+    position: absolute;
+    opacity: 0;
+    width: 0;
+}
+
+.toolbar {
+    border-radius: 0.3em 0.3em 0 0;
+    opacity: 1;
+    display: flex;
+    align-items: center;
+    height: 40px;
+}
+
+.dx-theme-light .toolbar {
+    background-color: var(--dx-g-gray-90);
+}
+
+.dx-theme-dark .toolbar {
+    background-color: var(--dx-g-blue-natural-20);
+}
+
+.divider {
+    border-left-style: solid;
+    border-left-width: 1px;
+    height: var(--dx-g-spacing-md);
+    margin-right: var(--dx-g-spacing-xs);
+    width: 0;
+}
+
+.dx-theme-dark .divider {
+    border-left-color: var(--dx-g-blue-vibrant-40);
+}
+
+.dx-theme-light .divider {
+    border-left-color: #dddbda;
+}
+
+.dx-code-block-heading {
+    padding-left: var(--dx-g-spacing-mlg);
+    transform: translateY(3px);
+}
+
+.dx-theme-light .dx-code-block-heading {
+    color: var(--dx-g-blue-vibrant-20) !important;
+}
+
+.dx-theme-dark .dx-code-block-heading {
+    color: white !important;
+}
+
+.toolbar-item {
+    display: inline-block;
+}
+
+.toolbar-item:first-child {
+    flex-basis: 95%;
+}
+
+.dx-theme-dark .btn {
+    --dx-c-button-primary-color: #fff;
+    --dx-c-button-primary-color-hover: var(--dx-g-blue-natural-10);
+    --dx-c-button-secondary-color-hover: var(--dx-g-blue-vibrant-30);
+    --dx-c-button-custom-color: #fff;
+    --dx-c-button-custom-color-hover: #fff;
+    --dx-c-button-custom-background-hover: var(--dx-g-blue-natural-10);
+}
+
+.dx-theme-light .btn {
+    --dx-c-button-primary-color: var(--dx-g-blue-vibrant-20);
+    --dx-c-button-primary-color-hover: var(--dx-g-gray-60);
+    --dx-c-button-secondary-color-hover: #dddbda;
+    --dx-c-button-custom-color: var(--dx-g-blue-vibrant-20);
+    --dx-c-button-custom-color-hover: var(--dx-g-blue-vibrant-20);
+    --dx-c-button-custom-background-hover: var(--dx-g-gray-60);
+}
+
+div.code-block-content {
+    border-radius: 0 0 0.3em 0.3em;
+    overflow-y: auto;
+}
+
+.dx-theme-dark div.code-block-content {
+    background: var(--dx-g-blue-vibrant-10);
+}
+
+.dx-theme-light div.code-block-content {
+    background: var(--dx-g-gray-95);
+}
+
+code[class*="language-"] {
+    margin-left: -11px;
+}
+
+.toolbar-item:not(:first-of-type) {
+    margin-right: var(--dx-g-spacing-xs);
+}
+
+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;
+    }
+}

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