@salesforcedevs/dx-components 0.17.0 → 0.17.1-review-diff1

package/src/modules/dx/cardVideoPreview/cardVideoPreview.html

@@ -7,7 +7,7 @@
         img-src={imgSrc}
         layout={layout}
         target={target}
-        title={title}
+        header={header}
     >
         <dx-icon-badge
             class="dx-play-button"
@@ -16,11 +16,12 @@
             slot="image-badge"
         ></dx-icon-badge>
         <dx-formatted-date-time
+            if:true={date}
             slot="datetime"
             day="2-digit"
             month="long"
             year="numeric"
-            value={datetime}
+            value={date}
         ></dx-formatted-date-time>
     </dx-card-content>
 </template>

package/src/modules/dx/cardVideoPreview/cardVideoPreview.ts

@@ -2,12 +2,12 @@ import { LightningElement, api } from "lwc";
 
 export default class CardVideoPreview extends LightningElement {
     @api body?: string | null = null;
-    @api datetime!: string;
+    @api date?: string;
     @api featured?: boolean = false;
     @api href!: string;
     @api imgAlt?: string;
     @api imgSrc?: string | null;
     @api target?: string | null = null;
     @api layout: "vertical" | "horizontal" = "vertical";
-    @api title!: string;
+    @api header!: string;
 }

package/src/modules/dx/checkbox/checkbox.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     display: block;
@@ -35,8 +35,13 @@ input {
     padding-left: 12px;
 }
 
+.checkbox-label::first-letter {
+    text-transform: uppercase;
+}
+
 .checkbox-error {
     opacity: 0;
+    display: none;
     margin-top: var(--dx-g-spacing-xs);
     user-select: none;
 }
@@ -53,6 +58,7 @@ input:disabled + .checkbox-label {
 
 .container.show-error .checkbox-error {
     opacity: 1;
+    display: block;
     user-select: auto;
 }
 
@@ -69,8 +75,7 @@ input:disabled + .checkbox-label {
         --disabled-inner-color: var(--dx-g-gray-60);
         --size: var(--dx-g-spacing-md);
 
-        -webkit-appearance: none;
-        -moz-appearance: none;
+        appearance: none;
         height: var(--size);
         width: var(--size);
         outline: none;

package/src/modules/dx/checkbox/checkbox.ts

@@ -1,16 +1,18 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
+import { reflectBooleanAttribute } from "dxUtils/lwc";
 
 export default class Checkbox extends LightningElement {
     @api disabled: boolean = false;
     @api errorMessage?: string = "Please check this box if you want to proceed";
     @api label?: string;
-    @api name: string | null = null;
-    @api required: boolean = false;
     @api type: "checkbox" | "radio" = "checkbox";
     @api value!: string;
 
     private _checked: boolean = false;
+    private _required: boolean = false;
+    private _name: string | null = null;
+
     @api
     get checked(): boolean {
         return this._checked;
@@ -19,6 +21,24 @@ export default class Checkbox extends LightningElement {
         this._checked = value;
     }
 
+    @api
+    get name(): string | null {
+        return this._name;
+    }
+    set name(value: string | null) {
+        this._name = value;
+        this.setAttribute("name", value); // reflect to HTML
+    }
+
+    @api
+    get required(): boolean {
+        return this._required;
+    }
+    set required(value: boolean) {
+        this._required = value;
+        reflectBooleanAttribute(this, "required", value);
+    }
+
     private showValidity = false;
 
     private get valid(): boolean {
@@ -39,6 +59,11 @@ export default class Checkbox extends LightningElement {
         return this.valid;
     }
 
+    @api
+    checkValidity(): boolean {
+        return this.valid;
+    }
+
     private onChange(e: InputEvent) {
         this._checked = ((e.currentTarget as HTMLInputElement) || {}).checked;
         this.dispatchEvent(

package/src/modules/dx/checkboxGroup/checkboxGroup.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 fieldset {
     display: grid;

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

@@ -1,5 +1,5 @@
 import { LightningElement, api } from "lwc";
-import { toJson } from "utils/normalizers";
+import { toJson } from "dxUtils/normalizers";
 
 type Option = {
     value: string;

package/src/modules/dx/checkboxNative/checkboxNative.css

@@ -0,0 +1,18 @@
+:host {
+    --dx-c-filter-menu-font-weight: normal;
+}
+
+input,
+span {
+    vertical-align: middle;
+    cursor: pointer;
+    user-select: none;
+}
+
+span {
+    color: var(--sds-g-gray-11);
+    font-size: 13px;
+    font-weight: var(--dx-c-filter-menu-font-weight);
+    font-family: var(--dx-g-font-sans);
+    margin-left: 8px;
+}

package/src/modules/dx/checkboxNative/checkboxNative.html

@@ -0,0 +1,14 @@
+<template>
+    <label>
+        <input
+            name={name}
+            type="checkbox"
+            checked={checked}
+            onchange={onChange}
+        />
+        <span>
+            {label}
+            <slot></slot>
+        </span>
+    </label>
+</template>

package/src/modules/dx/checkboxNative/checkboxNative.ts

@@ -0,0 +1,39 @@
+import { LightningElement, api } from "lwc";
+
+export default class CheckboxNative extends LightningElement {
+    @api value!: string;
+    @api label?: string;
+
+    private _checked: boolean = false;
+    private _indeterminate: boolean = false;
+
+    @api
+    get checked(): boolean {
+        return this._checked;
+    }
+    set checked(value: boolean) {
+        this._checked = value;
+    }
+
+    @api
+    get indeterminate(): boolean {
+        return this._indeterminate;
+    }
+    set indeterminate(value: boolean) {
+        (this.template.querySelector("input")! as any).indeterminate = value;
+        this._indeterminate = value;
+    }
+
+    private onChange(e: InputEvent) {
+        this._checked = ((e.currentTarget as HTMLInputElement) || {}).checked;
+        this.dispatchEvent(
+            new CustomEvent("change", {
+                detail: {
+                    originalEvent: e,
+                    checked: this._checked,
+                    value: this.value
+                }
+            })
+        );
+    }
+}

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

@@ -1,7 +1,6 @@
-@import "helpers/code";
-@import "helpers/text";
-@import "./darkTheme.css";
-@import "./lightTheme.css";
+@import "dxHelpers/code";
+@import "dxHelpers/text";
+@import "./darkAndLightThemes.css";
 
 :host {
     position: relative;
@@ -9,6 +8,7 @@
 
 pre {
     margin: 0 !important;
+    height: var(--dx-code-block-height, unset);
 }
 
 .copyta {
@@ -19,7 +19,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;
@@ -30,6 +30,16 @@ pre {
     background-color: var(--dx-g-gray-90);
 }
 
+div.dx-theme-dark {
+    border: var(--dx-g-dark-mode-toggle-button-border);
+    border-radius: var(--dx-code-block-toolbar-border-radius, 0.3em);
+}
+
+div.dx-theme-light {
+    border: var(--dx-g-light-mode-code-block-border);
+    border-radius: var(--dx-code-block-toolbar-border-radius, 0.3em);
+}
+
 .dx-theme-dark .toolbar {
     background-color: var(--dx-g-blue-natural-20);
 }
@@ -64,7 +74,8 @@ pre {
 }
 
 .toolbar-item {
-    display: inline-block;
+    display: flex;
+    align-items: center;
 }
 
 .toolbar-item:first-child {
@@ -92,14 +103,7 @@ pre {
 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);
+    background: var(--prism-a11y-color-background);
 }
 
 code[class*="language-"] {
@@ -113,7 +117,6 @@ code[class*="language-"] {
 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);
 }
 
@@ -126,3 +129,7 @@ pre[class*="language-"].line-numbers {
         display: none;
     }
 }
+
+dx-button {
+    --dx-g-button-icon-color: var(--dx-g-cloud-blue-vibrant-50);
+}

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

@@ -3,8 +3,8 @@
         <div class={codeblocksClassname}>
             <div class="toolbar">
                 <div class="toolbar-item">
-                    <div class="dx-text-heading-7 dx-code-block-heading">
-                        { title }
+                    <div class="dx-text-display-8 dx-code-block-heading">
+                        { header }
                     </div>
                 </div>
                 <template if:true={showLanguageDropdown}>
@@ -49,7 +49,7 @@
                 <div class="toolbar-item">
                     <dx-tooltip label={updateThemeBtnText} placement="top-left">
                         <dx-button
-                            onclick={updateTheme}
+                            onclick={updateThemeClicked}
                             type="button"
                             icon-symbol="away"
                             variant="tertiary"

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

@@ -1,34 +1,59 @@
-import { LightningElement, api, wire, track } from "lwc";
+import { LightningElement, api } 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)
+import { track as gtmTrack } from "dxUtils/analytics";
+import prism from "dxUtils/prismjs";
+import { ampscript, sqlDocsTemplate } from "./customLanguages";
+
+/*
+    Here we create custom syntax highlighting rules for proprietary languages
+*/
+// AMPScript
+prism.languages.ampscript = prism.languages.extend("markup");
+prism.languages.insertBefore("ampscript", "comment", { ampscript });
+
+// SSJS (Server-Side JavaScript)
+prism.languages.ssjs = prism.languages.extend("markup");
+prism.languages.insertBefore("ssjs", "comment", { ampscript });
+
+// GTL (Guide Template Language)
+prism.languages.gtl = prism.languages.extend(
+    "markup",
+    prism.languages.handlebars
+);
+
+// LWC
+prism.languages.lwc = prism.languages.extend("jsx");
+
+/* 
+  Prismjs's SQL native language rules doesn't highlight keyword like "RECURSIVE" and "WINDOW".
+  Instead of modifying the native SQL language rules, we create a new language called "sql_docs_template"
+  that treats all uppercase words as keywords.
+*/
+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";
-const themes: CodeBlockTheme[] = [LIGHT, DARK];
-const LOCAL_STORAGE_KEY = "dx-codeblock-theme";
+export const LIGHT = "light";
+export const DARK = "dark";
+export const EVENT_NAME = "dx-codeblock-theme";
+const THEMES = [LIGHT, DARK];
 
 export default class CodeBlock extends LightningElement {
     @api defaultTheme: CodeBlockTheme = LIGHT;
-    @api title: 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.
     @api isEncoded = false;
 
-    private markupLangs = ["visualforce", "html", "xml"];
     private _codeBlockRendered: boolean = false;
+    private markupLangs = ["visualforce", "html", "xml"];
     private componentLoaded: boolean = false;
     private showLanguageDropdown: boolean = false;
     private copyBtnText: string = "Click to copy";
+    private theme: CodeBlockTheme = LIGHT;
     private selectedLanguageLabel: string = "";
     private selectedLanguageId: string = "";
     private selectedLanguage: CodeBlockLanguage = { label: "Language", id: "" };
@@ -37,22 +62,41 @@ export default class CodeBlock extends LightningElement {
         { label: "Apex", id: "apex" },
         { label: "Java", id: "java" },
         { label: "Javascript", id: "javascript" },
+        { label: "Javascript", id: "js" },
         { 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: "TypeScript", id: "typescript" },
+        { label: "TypeScript", id: "ts" },
+        { 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: "YAML", id: "yml" },
+        { label: "Markdown", id: "markdown" },
+        { label: "Markdown", id: "md" },
+        { label: "JSX", id: "jsx" },
+        { label: "GraphQL", id: "graphql" },
+        { label: "DataWeave", id: "dataweave" },
+        { label: "AMPScript", id: "ampscript" },
+        { label: "SSJS", id: "ssjs" },
+        { label: "GTL", id: "gtl" },
+        { label: "LWC", id: "lwc" },
+        { label: "SQL Documentation", id: "sql_docs_template" }
     ];
 
-    connectedCallback() {
-        if (!this.theme) {
-            this.theme = this.defaultTheme;
-        }
-    }
-
     _codeBlock: string = "";
     @api
+    get codeBlock(): string {
+        return this._codeBlock;
+    }
     set codeBlock(value: string) {
         this._codeBlockRendered = false;
         let match;
@@ -63,24 +107,6 @@ export default class CodeBlock extends LightningElement {
         ).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`;
     }
@@ -93,26 +119,54 @@ export default class CodeBlock extends LightningElement {
         return cx(`dx-theme-${this.theme}`);
     }
 
+    private initializeTheme() {
+        window.addEventListener(EVENT_NAME, this.toggleTheme);
+        const darkModeSetting = localStorage.getItem(
+            EVENT_NAME
+        ) as CodeBlockTheme;
+        if (THEMES.includes(darkModeSetting)) {
+            this.theme = darkModeSetting;
+        } else {
+            this.theme = this.defaultTheme;
+        }
+    }
+
+    connectedCallback() {
+        this.initializeTheme();
+    }
+
     formatCodeBlock() {
         const divEl = this.template.querySelector("div.code-block-content");
         const templateEl = document.createElement("template");
+
+        // Replace any <var> markup with a temporary nonsense sentinel (but one that is very
+        // unlikely to affect Prism's tokenization) so that Prism will not strip them but does
+        // still tokenize correctly. We want to italicize the "variables" ourselves after Prism
+        // does its own thing (W-11975205).
+        let cleanCodeBlock = this.codeBlock.replace(
+            /<var.*?>(.+?)<\/var>/g,
+            "vvvvv$1vvvvv"
+        );
+
         if (
             !this.isEncoded &&
             this.markupLangs.includes(this.selectedLanguage.id || "")
         ) {
-            // eslint-disable-next-line
-            templateEl.innerHTML = `<pre class='codeblock'><!-- ${this.codeBlock.replace(
+            // Temporarily replace HTML comment characters, which Prism would also strip
+            cleanCodeBlock = `<!--${cleanCodeBlock.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>`;
+            // 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");
         }
+
+        // eslint-disable-next-line
+        templateEl.innerHTML = `<pre class='codeblock'>${cleanCodeBlock}</pre>`;
+
         const codeBlockEls = templateEl.content.querySelectorAll("pre");
         codeBlockEls.forEach((codeBlockEl) => {
             // eslint-disable-next-line
@@ -129,12 +183,19 @@ export default class CodeBlock extends LightningElement {
             // for custom markup content, it is a workaround to be refactored later.
             // eslint-disable-next-line
             this.language !== "text"
-                ? (codeEl.innerHTML = codeHTML)
+                ? // eslint-disable-next-line
+                  (codeEl.innerHTML = codeHTML)
                 : (codeEl.textContent = this._codeBlock.trim());
             // eslint-disable-next-line
             codeBlockEl.innerHTML = "";
             codeBlockEl.appendChild(codeEl);
-            Prism.highlightAllUnder(codeBlockEl);
+            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) {
@@ -144,6 +205,7 @@ export default class CodeBlock extends LightningElement {
             if (this.markupLangs.includes(this.selectedLanguage.id || "")) {
                 const res = this.template.querySelector(`code.language-markup`);
                 if (res) {
+                    // Restore any temporarily replaced HTML comment characters
                     // eslint-disable-next-line
                     res.innerHTML = res.innerHTML.replace(
                         /@@(.*?)##/gs,
@@ -162,15 +224,27 @@ export default class CodeBlock extends LightningElement {
         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
      */
-    async copySource(event: any) {
-        gtmTrack(event.target, "custEv_codeBlock", {
-            codeBlockAction: "copy"
+    async copySource(event: Event) {
+        gtmTrack(event.target!, "custEv_iconClick", {
+            click_text: this.copyBtnText,
+            element_type: "icon",
+            element_title: this.copyBtnText,
+            content_category: "code block"
         });
 
         try {
@@ -190,15 +264,25 @@ export default class CodeBlock extends LightningElement {
         }
     }
 
-    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"
+    updateThemeClicked(event: Event) {
+        gtmTrack(event.target!, "custEv_iconClick", {
+            click_text: this.updateThemeBtnText,
+            element_type: "icon",
+            element_title: this.updateThemeBtnText,
+            content_category: "code block"
         });
+        window.dispatchEvent(new Event(EVENT_NAME));
     }
 
+    private toggleTheme = () => {
+        this.theme = this.theme === DARK ? LIGHT : DARK;
+        this.storeTheme();
+    };
+
+    private storeTheme = () => {
+        localStorage.setItem(EVENT_NAME, this.theme);
+    };
+
     renderedCallback() {
         if (this._codeBlockRendered) {
             return;
@@ -212,4 +296,8 @@ export default class CodeBlock extends LightningElement {
         this.formatCodeBlock();
         this._codeBlockRendered = true;
     }
+
+    disconnectedCallback(): void {
+        window.removeEventListener(EVENT_NAME, this.toggleTheme);
+    }
 }