@salesforcedevs/dx-components 0.3.12 → 0.3.14-banner-alpha1

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

@@ -1,15 +1,28 @@
-import { LightningElement, api } from "lwc";
+import { LightningElement, api, wire, track } from "lwc";
 import { CodeBlockTheme, CodeBlockLanguage } from "typings/custom";
 import cx from "classnames";
-import Prism from "utils/prismjs";
+import Prism from "dxUtils/prismjs";
+import {
+    getLocalStorageData,
+    setLocalStorageData
+} from "@sfdocs-internal/wires";
+import { track as gtmTrack } from "dxUtils/analytics";
 
 // 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;
@@ -28,18 +41,32 @@ export default class CodeBlock extends LightningElement {
         { 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: "PHP", id: "php" },
+        { label: "JSON", id: "json" },
+        { label: "Swift", id: "swift" },
+        { label: "Kotlin", id: "kotlin" },
+        { label: "Python", id: "python" },
+        { label: "Bash", id: "bash" },
+        { label: "SQL", id: "sql" },
+        { label: "YAML", id: "yaml" }
     ];
 
+    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]
+        this._codeBlock = (
+            (match = preTagRegexp.exec(value.trim())) === null
+                ? value.trim()
+                : match[1]
         ).trim();
     }
 
@@ -47,28 +74,22 @@ export default class CodeBlock extends LightningElement {
         return this._codeBlock;
     }
 
-    _theme: CodeBlockTheme = "light";
-    @api
-    set theme(value: CodeBlockTheme) {
-        if (!this._theme) {
-            this._theme = "light";
-        }
-        if (this._theme !== value && this.componentLoaded) {
-            this.updateTheme();
-        } else if (this._theme !== value && !this.componentLoaded) {
-            this._theme = value;
-            this.componentLoaded = true;
+    @track private theme: CodeBlockTheme | null = null;
+
+    @wire(getLocalStorageData, { key: "dx-codeblock-theme" })
+    updateThemeForCodeblock(value: any) {
+        if (themes.includes(value)) {
+            this.theme = value;
         } else {
-            this.componentLoaded = true;
+            setLocalStorageData(
+                LOCAL_STORAGE_KEY,
+                this.theme || this.defaultTheme
+            );
         }
     }
 
-    get theme(): CodeBlockTheme {
-        return this._theme;
-    }
-
     get updateThemeBtnText(): string {
-        return `Switch to ${this._theme === "dark" ? "Light" : "Dark"} mode`;
+        return `Switch to ${this.theme === DARK ? "Light" : "Dark"} mode`;
     }
 
     get showCodeSourceBtn(): boolean {
@@ -76,21 +97,28 @@ export default class CodeBlock extends LightningElement {
     }
 
     get codeblocksClassname(): string {
-        return cx(`dx-theme-${this._theme}`);
+        return cx(`dx-theme-${this.theme}`);
     }
 
     formatCodeBlock() {
         const divEl = this.template.querySelector("div.code-block-content");
         const templateEl = document.createElement("template");
-        if (this.markupLangs.includes(this.selectedLanguage.id || "")) {
+        if (
+            !this.isEncoded &&
+            this.markupLangs.includes(this.selectedLanguage.id || "")
+        ) {
             // eslint-disable-next-line
-            templateEl.innerHTML = `<pre class='codeblock'><!-- ${this.codeBlock.replace(
+            templateEl.innerHTML = `<pre class='codeblock'><!--${this.codeBlock.replace(
                 /<!--(.*?)-->/gs,
                 "@@$1##"
-            )} --></pre>`;
+            )}--></pre>`;
         } else {
             // eslint-disable-next-line
-            templateEl.innerHTML = `<pre class='codeblock'>${this.codeBlock}</pre>`;
+            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) => {
@@ -105,9 +133,12 @@ export default class CodeBlock extends LightningElement {
                         : 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
-            this.language !== 'text' ? codeEl.innerHTML = codeHTML : codeEl.textContent = codeHTML
-           // eslint-disable-next-line
             codeBlockEl.innerHTML = "";
             codeBlockEl.appendChild(codeEl);
             Prism.highlightAllUnder(codeBlockEl);
@@ -140,32 +171,39 @@ export default class CodeBlock extends LightningElement {
         this.formatCodeBlock();
     }
 
-    copySource() {
-        let copypg = this.template.querySelector(".copypg");
-        if (copypg) {
-            // eslint-disable-next-line
-            copypg.innerHTML = `<textarea class="copyta">${this._codeBlock}</textarea>`;
-            const copyta: HTMLTextAreaElement = this.template.querySelector(
-                ".copyta"
-            ) as HTMLTextAreaElement;
-            if (copyta) {
-                copyta.select();
-                document.execCommand("copy");
-                copypg = this.template.querySelector(".copypg");
-                if (copypg) {
-                    // eslint-disable-next-line
-                    copypg.innerHTML = "";
-                    this.copyBtnText = "Copied!";
-                    setInterval(() => {
-                        this.copyBtnText = "Click to copy";
-                    }, 2000);
-                }
+    /**
+     * 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() {
-        this._theme = this._theme === "dark" ? "light" : "dark";
+    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() {

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

@@ -19,7 +19,6 @@
 }
 
 .dx-theme-dark .token.operator {
-    background-color: var(--dx-g-blue-vibrant-20);
     color: var(--dx-g-pink-vibrant-65);
 }
 

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

@@ -16,7 +16,6 @@
 
 .dx-theme-light .token.operator {
     color: var(--dx-g-green-vibrant-50);
-    background-color: #fff;
 }
 
 .dx-theme-light .token.property {

package/src/modules/dx/dropdown/dropdown.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 .menu-nested::part(content) {
     padding-top: var(--dx-g-spacing-sm);
@@ -11,6 +11,10 @@
     flex-wrap: nowrap;
 }
 
+.menu-hidden::part(content) {
+    display: none;
+}
+
 @media screen and (max-width: 1000px) {
     .menu-nested .menu_option:not(:first-child) {
         border-top: var(--border);
@@ -73,11 +77,12 @@
 }
 
 .callout_link {
+    --dx-c-button-font-size: var(--dx-g-text-base);
+
     display: block;
     padding-top: var(--dx-g-spacing-xl);
     margin-top: auto;
     margin-left: var(--dx-g-spacing-sm);
-    font-size: var(--dx-g-text-base);
 }
 
 .empty {

package/src/modules/dx/dropdown/dropdown.html

@@ -4,8 +4,7 @@
         class={className}
         full-width={fullWidth}
         offset={offset}
-        oncontrolarrowdown={focusDefaultOption}
-        onopen={onOpen}
+        onclose={onClose}
         open-on-hover={openOnHover}
         open={open}
         page-padding={pagePadding}
@@ -14,23 +13,27 @@
         width={width}
     >
         <slot slot="control"></slot>
-        <div slot="content" onkeydown={onKeyDown} class="menu_list" role={role}>
-            <span class="empty dx-text-body-3" if:true={areOptionsEmpty}>
-                {emptyMessage}
-            </span>
-            <template
-                for:each={options}
-                for:item="option"
-                if:false={areOptionsEmpty}
-            >
+        <div
+            class="menu_list"
+            if:false={areOptionsEmpty}
+            role={role}
+            slot="content"
+        >
+            <template for:each={options} for:item="option" for:index="index">
                 <dx-dropdown-option
+                    suppress-gtm-nav-headings={suppressGtmNavHeadings}
+                    analytics-event={analyticsEvent}
+                    analytics-base-payload={analyticsBasePayload}
                     active={option.active}
+                    key-value={option.keyValue}
                     if:false={option.options}
                     key={option.id}
+                    index-position={index}
                     onfocus={onOptionFocus}
                     onselect={onOptionClick}
                     option={option}
                     nav-item-label={navItemLabel}
+                    variant={variant}
                 ></dx-dropdown-option>
                 <div
                     key={option.id}
@@ -41,8 +44,12 @@
                     <span class="menu_heading">{option.label}</span>
                     <template for:each={option.options} for:item="suboption">
                         <dx-dropdown-option
+                            suppress-gtm-nav-headings={suppressGTMNavHeadings}
+                            analytics-event={analyticsEvent}
+                            analytics-base-payload={analyticsBasePayload}
                             active={suboption.active}
-                            key={suboption.label}
+                            key={suboption.id}
+                            key-value={suboption.keyValue}
                             onfocus={onOptionFocus}
                             onselect={onOptionClick}
                             option={suboption}
@@ -55,7 +62,7 @@
                         href={option.calloutLink.href}
                         target={option.calloutLink.target}
                         icon-symbol="forward"
-                        variant="inline-inherit"
+                        variant="inline"
                     >
                         {option.calloutLink.label}
                     </dx-button>

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

@@ -1,11 +1,16 @@
-import { Option, PopperPlacement } from "typings/custom";
+import {
+    AnalyticsPayload,
+    OptionWithNested,
+    PopperPlacement,
+    DropdownVariant
+} from "typings/custom";
 import { LightningElement, api, track } from "lwc";
 import cx from "classnames";
-import { deepmapOptions } from "utils/options";
 import get from "lodash.get";
-import { toJson } from "utils/normalizers";
+import { deepmapOptions } from "dxUtils/options";
+import { toJson } from "dxUtils/normalizers";
 
-interface DropdownOption extends Option {
+interface DropdownOption extends OptionWithNested {
     // link that gets shown as a highlighted link at end of option group
     calloutLink?: {
         href: string;
@@ -15,11 +20,9 @@ interface DropdownOption extends Option {
 }
 
 export default class Dropdown extends LightningElement {
-    @api emptyMessage: string = "No results found";
     @api value: string | null = null; // "active option" id
     @api valuePath: string = "id"; // path to match for the active value (useful for url matching)
     @api stayOpenAfterChange?: boolean = false;
-
     // props forwarded to popover:
     @api ariaLabel: string | null = null;
     @api tempId: string | null = null;
@@ -32,26 +35,49 @@ export default class Dropdown extends LightningElement {
     @api width?: string | null = null;
     @api fullWidth?: boolean | null;
     @api navItemLabel: string | null = null;
+    @api variant: DropdownVariant = "base";
+
+    // props forwarded to dropdown option
+    @api analyticsEvent: string | null = null;
+    @api analyticsBasePayload: AnalyticsPayload = {
+        elementType: "dropdown",
+        destinationType: "internal",
+        ctaClick: true
+    };
+    @api suppressGtmNavHeadings?: boolean = false;
 
     @api
     get options() {
         return deepmapOptions(this._options, (option: DropdownOption) => ({
             ...option,
             active: this.value === get(option, this.valuePath),
-            id: get(option, this.valuePath)
+            keyValue: get(option, this.valuePath)
         }));
     }
     set options(value: DropdownOption[]) {
         this._options = toJson(value);
     }
+
+    @api
+    get focusedValue() {
+        return this._focusedValue;
+    }
+
     @track
     private _options!: DropdownOption[];
 
     // PRIVATE VARS
 
-    private focusedValue: string | null = null;
+    private _focusedValue: string | null = null;
     private popoverEl: HTMLElement | null = null;
 
+    constructor() {
+        super();
+
+        // @ts-ignore
+        this.addEventListener("keydown", this.onKeyDown);
+    }
+
     // GETTERS
 
     private get role() {
@@ -62,7 +88,8 @@ export default class Dropdown extends LightningElement {
         return cx(
             this.isNested && "menu-nested",
             this.isNested && this.options.length >= 2 && "menu-nested-2-col",
-            this.offset && `menu-offset-${this.offset}`
+            this.offset && `menu-offset-${this.offset}`,
+            this.areOptionsEmpty && "menu-hidden"
         );
     }
 
@@ -80,7 +107,7 @@ export default class Dropdown extends LightningElement {
 
     // CLASS FNS
 
-    private onKeyDown(e: KeyboardEvent) {
+    private onKeyDown = (e: KeyboardEvent) => {
         switch (e.key) {
             case "ArrowDown":
                 e.preventDefault();
@@ -92,17 +119,13 @@ export default class Dropdown extends LightningElement {
                 break;
             default:
         }
-    }
+    };
 
     private onOptionClick(e: CustomEvent) {
         if (e.detail !== this.value) {
             this.dispatchEvent(new CustomEvent("change", { detail: e.detail }));
         }
         if (!this.stayOpenAfterChange && this.popoverEl) {
-            if (this.popoverEl.controlled) {
-                this.popoverEl.dispatchRequestCloseEvent("click-option");
-                return;
-            }
             this.popoverEl.closePopover();
         }
     }
@@ -110,7 +133,7 @@ export default class Dropdown extends LightningElement {
     private onOptionFocus(e: PointerEvent) {
         if (e.target) {
             // @ts-ignore
-            this.focusedValue = e.target.option.id;
+            this._focusedValue = e.target.option.id;
         }
     }
 
@@ -122,12 +145,13 @@ export default class Dropdown extends LightningElement {
     }
 
     private incrementOptionFocus(indexChange: number) {
-        if (!this.focusedValue) {
+        if (!this._focusedValue) {
+            this.focusDefaultOption();
             return;
         }
 
         const focusedOptionIndex = this.findOptionElementIndex(
-            this.focusedValue
+            this._focusedValue
         );
 
         let nextIndex = focusedOptionIndex + indexChange;
@@ -144,19 +168,22 @@ export default class Dropdown extends LightningElement {
         }
     }
 
-    private onOpen = () => {
-        this.focusDefaultOption();
-    };
+    private onClose(): void {
+        this._focusedValue = null;
+    }
 
-    private focusDefaultOption = () => {
+    private focusDefaultOption() {
         const defaultIndex = this.value
             ? this.findOptionElementIndex(this.value)
             : 0;
-        const optionToFocus = this.optionsElements[defaultIndex];
+
+        const optionToFocus: any =
+            this.optionsElements[defaultIndex < 0 ? 0 : defaultIndex];
         if (optionToFocus) {
             optionToFocus.focus();
+            this._focusedValue = optionToFocus.option.id;
         }
-    };
+    }
 
     renderedCallback() {
         if (!this.popoverEl) {

package/src/modules/dx/dropdownOption/dropdownOption.css

@@ -1,4 +1,25 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
+
+.indented-shape {
+    --background: rgb(170, 203, 255);
+    --wide: 2px;
+
+    background-color: var(--background);
+    height: var(--wide);
+    margin-bottom: var(--dx-g-spacing-xs);
+    margin-right: var(--dx-g-spacing-sm);
+    position: relative;
+    width: var(--shape-width);
+}
+
+.indented-shape::after {
+    background-color: var(--background);
+    bottom: 0;
+    content: "";
+    height: 15px;
+    position: absolute;
+    width: var(--wide);
+}
 
 .option {
     display: flex;
@@ -37,12 +58,25 @@
     text-align: left;
 }
 
+.option-indented .option_details {
+    align-items: center;
+    flex-direction: row;
+}
+
 .option_label {
-    color: var(--dx-g-blue-vibrant-50);
+    color: var(--dx-c-dropdown-option-label-color, var(--dx-g-blue-vibrant-50));
     display: flex;
     align-items: center;
     font-weight: var(--dx-g-font-bold);
-    font-size: var(--dx-g-text-base);
+    font-size: var(--dx-c-dropdown-option-font-size, var(--dx-g-text-base));
+}
+
+.option-indented .option_label {
+    display: -webkit-box;
+    max-width: 300px;
+    overflow: hidden;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
 }
 
 .option_label > *:last-child {
@@ -59,3 +93,87 @@
     margin-right: var(--dx-g-spacing-md);
     flex-shrink: 0;
 }
+
+.option-indented {
+    padding-top: var(--dx-g-spacing-xs);
+    padding-bottom: var(--dx-g-spacing-xs);
+}
+
+.option-indented:not([data-index="0"]) {
+    --base-indentation: calc(var(--dx-g-spacing-md) + var(--shape-width));
+    --shape-width: 8px;
+
+    padding-left: calc(var(--indentation, 0px) + var(--dx-g-spacing-md));
+}
+
+[data-index="2"] {
+    --indentation: var(--base-indentation);
+}
+
+[data-index="3"] {
+    --indentation: calc(2 * var(--base-indentation));
+}
+
+[data-index="4"] {
+    --indentation: calc(3 * var(--base-indentation));
+}
+
+[data-index="5"] {
+    --indentation: calc(4 * var(--base-indentation));
+}
+
+[data-index="6"] {
+    --indentation: calc(5 * var(--base-indentation));
+}
+
+[data-index="7"] {
+    --indentation: calc(6 * var(--base-indentation));
+}
+
+[data-index="8"] {
+    --indentation: calc(7 * var(--base-indentation));
+}
+
+[data-index="9"] {
+    --indentation: calc(8 * var(--base-indentation));
+}
+
+[data-index="10"] {
+    --indentation: calc(9 * var(--base-indentation));
+}
+
+[data-index="11"] {
+    --indentation: calc(10 * var(--base-indentation));
+}
+
+[data-index="12"] {
+    --indentation: calc(11 * var(--base-indentation));
+}
+
+[data-index="13"] {
+    --indentation: calc(12 * var(--base-indentation));
+}
+
+[data-index="14"] {
+    --indentation: calc(13 * var(--base-indentation));
+}
+
+[data-index="15"] {
+    --indentation: calc(14 * var(--base-indentation));
+}
+
+[data-index="16"] {
+    --indentation: calc(15 * var(--base-indentation));
+}
+
+[data-index="17"] {
+    --indentation: calc(16 * var(--base-indentation));
+}
+
+[data-index="18"] {
+    --indentation: calc(17 * var(--base-indentation));
+}
+
+[data-index="19"] {
+    --indentation: calc(18 * var(--base-indentation));
+}

package/src/modules/dx/dropdownOption/dropdownOption.html

@@ -7,6 +7,7 @@
         key={option.id}
         role="menuitem"
         tabindex="-1"
+        data-index={indexPosition}
         onclick={onClick}
     >
         <dx-icon
@@ -17,6 +18,7 @@
             size="large"
         ></dx-icon>
         <div class="option_details">
+            <div if:true={renderIndentedShape} class="indented-shape"></div>
             <div class="option_label">
                 {option.label}
                 <dx-icon
@@ -34,6 +36,7 @@
         class={className}
         role="menuitem"
         tabindex="-1"
+        data-index={indexPosition}
         onclick={onClick}
     >
         <dx-icon
@@ -44,6 +47,7 @@
             size="large"
         ></dx-icon>
         <div class="option_details">
+            <div if:true={renderIndentedShape} class="indented-shape"></div>
             <div class="option_label">{option.label}</div>
             <div if:true={option.description} class="option_description">
                 {option.description}