@salesforcedevs/dx-components 0.8.4 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.8.4",
+    "version": "0.10.0",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -29,5 +29,5 @@
         "@types/debounce": "^1.2.0",
         "@types/lodash.get": "^4.4.6"
     },
-    "gitHead": "a181e7459fdf5411a42f3769908d24aff4675b2d"
+    "gitHead": "f91a2edc71e7a19cbc26ccfd6396637d3a706f56"
 }

package/src/modules/dx/headerSearch/headerSearch.html

@@ -18,7 +18,7 @@
                     icon-size="large"
                     icon-symbol="search"
                     onchange={onInputChange}
-                    onescape={onInputEscape}
+                    onclear={onInputEscape}
                     onsubmit={onInputSubmit}
                     placeholder="Search"
                     size="override"
@@ -52,7 +52,7 @@
                     aria-label="Record Search Term"
                     icon-symbol="search"
                     onchange={onInputChange}
-                    onescape={onInputEscape}
+                    onclear={onInputEscape}
                     onsubmit={onInputSubmit}
                     onfocus={openPopover}
                     placeholder="Search"

package/src/modules/dx/input/__tests__/input.test.ts

@@ -320,4 +320,49 @@ describe(TAG, () => {
 
         return Promise.resolve().then(() => assertErrorMissing(element));
     });
+
+    it("shows clear button if value is nonempty and clearable is true", () => {
+        const element = render({
+            value: "test",
+            clearable: true
+        });
+
+        const clearButton: HTMLButtonElement = element.shadowRoot.querySelector(
+            ".clear-button"
+        );
+        expect(clearButton).not.toBeNull();
+    });
+
+    it("doesn't show clear button if no value", () => {
+        const element = render({
+            value: "",
+            clearable: true
+        });
+
+        const clearButton: HTMLButtonElement = element.shadowRoot.querySelector(
+            ".clear-button"
+        );
+        expect(clearButton).toBeNull();
+    });
+
+    it("clears input value on click of clear button", async () => {
+        const element = render({
+            value: "test",
+            clearable: true
+        });
+
+        const input: HTMLInputElement = element.shadowRoot.querySelector(
+            "input"
+        );
+        expect(input.value).toEqual("test");
+
+        const clearButton: HTMLButtonElement = element.shadowRoot.querySelector(
+            ".clear-button"
+        );
+        clearButton.dispatchEvent(new MouseEvent("click"));
+
+        await Promise.resolve();
+
+        expect(input.value).toEqual("");
+    });
 });

package/src/modules/dx/input/input.css

@@ -51,7 +51,7 @@
     flex-grow: 1;
 }
 
-.input-container.has-shortcut {
+.input-container.has-floating-item {
     padding-right: var(--dx-g-spacing-sm);
 }
 
@@ -150,3 +150,15 @@ input::placeholder {
     margin-top: var(--dx-g-spacing-2xs);
     display: block;
 }
+
+.clear-button > dx-icon {
+    --dx-c-icon-color: var(--sds-g-gray-9);
+}
+
+.clear-button > dx-icon::part(svg) {
+    transition: var(--dx-g-transition-hue-1x);
+}
+
+.clear-button:hover > dx-icon {
+    --dx-c-icon-color: var(--dx-g-blue-vibrant-30);
+}

package/src/modules/dx/input/input.html

@@ -25,7 +25,15 @@
                 type={type}
                 value={value}
             />
-            <div class="shortcut" if:true={shortcutKey}>
+            <button
+                class="clear-button"
+                aria-label="Clear"
+                if:true={showClearButton}
+                onclick={clear}
+            >
+                <dx-icon symbol="clear" size="medium"></dx-icon>
+            </button>
+            <div class="shortcut" if:true={showShortcutKey}>
                 <img src={shortcutImgSrc} alt={shortcutImgAlt} />
                 <span>{shortcutKey}</span>
             </div>

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

@@ -19,8 +19,11 @@ export const Base = () => html`
         margin-bottom: 25px;
         margin-top: 25px;
     `)}
+
     <dx-input placeholder="Example"></dx-input>
 
+    <dx-input placeholder="Example Clearable" clearable="true"></dx-input>
+
     <dx-input placeholder="Example Large" size="large"></dx-input>
 
     <dx-input placeholder="Example with Icon" icon-symbol="search"></dx-input>

package/src/modules/dx/input/input.ts

@@ -20,6 +20,7 @@ const typeValidatorMap: ValidatorMap = {
 export default class Input extends LightningElement {
     @api ariaLabel!: string;
     @api autocomplete: string | null = null;
+    @api clearable: boolean = false;
     @api disabled: boolean = false;
     @api iconSize: IconSize = "medium";
     @api iconSymbol: IconSymbol | null = null;
@@ -84,6 +85,14 @@ export default class Input extends LightningElement {
     private _value: string | null = null;
     private _loading: boolean = false;
 
+    private get showClearButton(): boolean {
+        return this.clearable && !!this.value;
+    }
+
+    private get showShortcutKey(): boolean {
+        return !this.showClearButton && !!this.shortcutKey;
+    }
+
     private get ariaKeyShortcuts() {
         return this.shortcutKey ? `meta+${this.shortcutKey}` : null;
     }
@@ -113,7 +122,8 @@ export default class Input extends LightningElement {
         return cx(
             "input-container",
             this.focused && "state-focused",
-            this.shortcutKey && "has-shortcut",
+            (this.showClearButton || this.showShortcutKey) &&
+                "has-floating-item",
             !!this.errorMessage && "has-error"
         );
     }
@@ -174,45 +184,46 @@ export default class Input extends LightningElement {
         if (!e || !e.target) {
             return;
         }
-        this._value = (<HTMLInputElement>e.target).value || "";
-        this.dispatchChange();
+        this.dispatchChange((<HTMLInputElement>e.target).value || "");
     }
 
     onButtonClick(e: Event) {
         if (!this.buttonDisabled) {
             e.stopPropagation();
         }
-        this.onSubmit();
+        this.submit();
     }
 
-    dispatchChange() {
+    dispatchChange(value: string) {
+        this._value = value;
         this.dispatchEvent(new CustomEvent("change", { detail: this.value }));
     }
 
-    dispatchSubmit() {
-        this.dispatchEvent(new CustomEvent("submit", { detail: this.value }));
+    clear(e?: Event) {
+        if (e) {
+            e.stopPropagation();
+        }
+        this.dispatchChange("");
+        this.dispatchEvent(new CustomEvent("clear"));
+        if (this.input) {
+            this.input.blur();
+        }
     }
 
-    onSubmit = async () => {
+    submit = async () => {
         if (this.inputInvalid) {
             return;
         }
-        this.dispatchSubmit();
+        this.dispatchEvent(new CustomEvent("submit", { detail: this.value }));
     };
 
     private onKeyDown(e: KeyboardEvent) {
         switch (e.key) {
             case "Escape":
-                this.dispatchEvent(new CustomEvent("escape"));
-                if (this.input) {
-                    this.input.blur();
-                    this._value = "";
-                    this.dispatchChange();
-                }
+                this.clear();
                 break;
             case "Enter":
-                this.onSubmit();
-                this.dispatchEvent(new CustomEvent("enter"));
+                this.submit();
                 break;
             default:
         }

package/src/modules/dx/sectionSignup/sectionSignup.html

@@ -15,7 +15,6 @@
                     placeholder={inputPlaceholder}
                     submit-label={inputSubmitLabel}
                     onsubmit={onSubmit}
-                    onenter={onSubmit}
                     size={size}
                 ></dx-input>
             </div>

package/src/modules/dx/sidebar/__tests__/sidebar.test.ts

@@ -170,7 +170,7 @@ describe(TAG, () => {
 
                 expect(track).toBeCalledTimes(1);
                 expect(track).toBeCalledWith(toggleButton, GTM_EVENT_NAME, {
-                    sidebarNavAction: "collapse",
+                    sideNavAction: "collapse",
                     clickText: TOGGLE_BUTTON_LABEL
                 });
 
@@ -205,7 +205,7 @@ describe(TAG, () => {
                             toggleButton,
                             GTM_EVENT_NAME,
                             {
-                                sidebarNavAction: "expand",
+                                sideNavAction: "expand",
                                 clickText: TOGGLE_BUTTON_LABEL
                             }
                         );
@@ -363,7 +363,7 @@ describe(TAG, () => {
 
                 expect(track).toBeCalledTimes(1);
                 expect(track).toBeCalledWith(toggleDiv, GTM_EVENT_NAME, {
-                    sidebarNavAction: "expand",
+                    sideNavAction: "expand",
                     clickText: TOGGLE_BUTTON_LABEL
                 });
 
@@ -418,7 +418,7 @@ describe(TAG, () => {
                             toggleDiv,
                             GTM_EVENT_NAME,
                             {
-                                sidebarNavAction: "collapse",
+                                sideNavAction: "collapse",
                                 clickText: TOGGLE_BUTTON_LABEL
                             }
                         );

package/src/modules/dx/sidebar/sidebar.ts

@@ -94,11 +94,11 @@ export default class Sidebar extends LightningElement {
     private onToggleClick(event: Event) {
         this.expanded = !this.expanded;
         this._toggleHovered = false;
-        const sidebarNavAction: SidebarGtmAction = this.expanded
+        const sideNavAction: SidebarGtmAction = this.expanded
             ? "expand"
             : "collapse";
         track(event.currentTarget!, "custEv_leftNavLinkClick", {
-            sidebarNavAction,
+            sideNavAction,
             clickText: TOGGLE_BUTTON_LABEL
         });
     }

package/src/modules/dx/treeItem/__tests__/treeItem.test.ts

@@ -29,18 +29,10 @@ describe(TAG, () => {
             });
 
             const link = component.shadowRoot.querySelector("a");
-            expect(link).toBeNull();
-
-            const button: HTMLElement = component.shadowRoot.querySelector(
-                "button"
-            );
-            expect(button).not.toBeNull();
-            expect(button.getAttribute("aria-label")).toBe(
-                NODE_WITH_CHILDREN.label
-            );
+            expect(link).not.toBeNull();
 
             const tile: TreeTile = component.shadowRoot.querySelector(
-                "button > dx-tree-tile"
+                "a > dx-tree-tile"
             );
             expect(tile).not.toBeNull();
             assertTile(tile, {
@@ -66,7 +58,7 @@ describe(TAG, () => {
             });
 
             const tile: TreeTile = component.shadowRoot.querySelector(
-                "button > dx-tree-tile"
+                "a > dx-tree-tile"
             );
             expect(tile).not.toBeNull();
             assertTile(tile, {
@@ -197,7 +189,7 @@ describe(TAG, () => {
             expect(track).toBeCalledTimes(1);
             expect(track).toBeCalledWith(tile, GTM_EVENT_NAME, {
                 clickText: NODE_WITH_CHILDREN.label,
-                sidebarNavAction: "expand"
+                sideNavAction: "expand"
             });
 
             return Promise.resolve().then(() => {
@@ -247,7 +239,7 @@ describe(TAG, () => {
             expect(track).toBeCalledTimes(1);
             expect(track).toBeCalledWith(tile, GTM_EVENT_NAME, {
                 clickText: NODE_WITH_CHILDREN.label,
-                sidebarNavAction: "collapse"
+                sideNavAction: "collapse"
             });
 
             return Promise.resolve().then(() => {
@@ -280,16 +272,14 @@ describe(TAG, () => {
             component.addEventListener("tileselected", mockTileSelected);
             component.addEventListener("expandcollapse", mockExpandCollapse);
 
-            const button: HTMLElement = component.shadowRoot.querySelector(
-                "button"
-            );
-            expect(button).not.toBeNull();
-            button.click();
+            const link: HTMLElement = component.shadowRoot.querySelector("a");
+            expect(link).not.toBeNull();
+            link.click();
 
             expect(track).toBeCalledTimes(1);
-            expect(track).toBeCalledWith(button, GTM_EVENT_NAME, {
+            expect(track).toBeCalledWith(link, GTM_EVENT_NAME, {
                 clickText: NODE_WITH_CHILDREN.label,
-                sidebarNavAction: "click"
+                sideNavAction: "click"
             });
 
             return Promise.resolve().then(() => {
@@ -328,11 +318,9 @@ describe(TAG, () => {
             );
             expect(tile).toHaveProperty("isSelected", true);
 
-            const button: HTMLElement = component.shadowRoot.querySelector(
-                "button"
-            );
-            expect(button).not.toBeNull();
-            button.click();
+            const link: HTMLElement = component.shadowRoot.querySelector("a");
+            expect(link).not.toBeNull();
+            link.click();
 
             return Promise.resolve().then(() => {
                 expect(tile).toHaveProperty("isSelected", true);
@@ -405,7 +393,7 @@ describe(TAG, () => {
             expect(track).toBeCalledTimes(1);
             expect(track).toBeCalledWith(link, GTM_EVENT_NAME, {
                 clickText: SINGLE_NODE_WITH_LINK.label,
-                sidebarNavAction: "click"
+                sideNavAction: "click"
             });
         });
     });

package/src/modules/dx/treeItem/treeItem.html

@@ -1,16 +1,7 @@
 <template>
-    <button if:false={href} onclick={onButtonClick} aria-label={treeNode.label}>
-        <dx-tree-tile
-            is-root={isRoot}
-            tree-node={treeNode}
-            is-expanded={isExpanded}
-            has-children={hasChildren}
-            is-selected={isSelected}
-            oniconclick={onIconClick}
-        ></dx-tree-tile>
-    </button>
-    <a if:true={href} href={href} target={target} onclick={onLinkClick}>
+    <a href={href} target={target} onclick={onLinkClick}>
         <dx-tree-tile
+            href={href}
             is-root={isRoot}
             tree-node={treeNode}
             is-expanded={isExpanded}

package/src/modules/dx/treeItem/treeItem.ts

@@ -39,7 +39,11 @@ export default class TreeItem extends LightningElement {
     }
 
     private get href(): string | undefined {
-        return this._treeNode.link && this._treeNode.link.href;
+        return (
+            (this._treeNode.link && this._treeNode.link.href) ||
+            this._treeNode.name ||
+            ""
+        );
     }
 
     private get target(): string {
@@ -62,7 +66,11 @@ export default class TreeItem extends LightningElement {
         this.sendGtm(event, this.isExpanded ? "expand" : "collapse");
     }
 
-    private onButtonClick(event: Event): void {
+    private onLinkClick(event: Event): void {
+        if (!(this._treeNode.link && this._treeNode.link.href)) {
+            event.preventDefault();
+        }
+
         if (this.hasChildren) {
             this.doExpand();
         }
@@ -71,10 +79,6 @@ export default class TreeItem extends LightningElement {
         this.fireEvent("tileselected", { name: this._treeNode.name });
     }
 
-    private onLinkClick(event: Event): void {
-        this.sendGtm(event, "click");
-    }
-
     private doExpand(): void {
         this.isExpanded = !this.isExpanded;
         this.fireEvent("expandcollapse");
@@ -97,10 +101,10 @@ export default class TreeItem extends LightningElement {
         this.isExpanded = value;
     }
 
-    private sendGtm(event: Event, sidebarNavAction: SidebarGtmAction) {
+    private sendGtm(event: Event, sideNavAction: SidebarGtmAction) {
         track(event.currentTarget!, "custEv_leftNavLinkClick", {
             clickText: this._treeNode.label,
-            sidebarNavAction
+            sideNavAction
         });
     }
 }

package/src/modules/dx/treeTile/__tests__/treeTile.test.ts

@@ -23,14 +23,15 @@ const assertLevelAndLabel = (container: HTMLElement) => {
 describe(TAG, () => {
     describe("render", () => {
         it("should render as a leaf tile", () => {
-            const component = render({ treeNode: SINGLE_NODE });
-            const tileDiv: HTMLElement = component.shadowRoot.querySelector(
-                "div.tile"
+            const component = render({ treeNode: SINGLE_NODE, href: "/test" });
+            const tileAnchor: HTMLElement = component.shadowRoot.querySelector(
+                "a.tile"
             );
 
-            expect(tileDiv.classList).toHaveLength(1);
-            expect(tileDiv).not.toBeNull();
-            assertLevelAndLabel(tileDiv);
+            expect(tileAnchor.getAttribute("href")).toBe("/test");
+            expect(tileAnchor.classList).toHaveLength(1);
+            expect(tileAnchor).not.toBeNull();
+            assertLevelAndLabel(tileAnchor);
 
             const arrowIcon: Icon = component.shadowRoot.querySelector(
                 "dx-icon"
@@ -51,12 +52,12 @@ describe(TAG, () => {
                 isRoot: true,
                 hasChildren: true
             });
-            const tileDiv: HTMLElement = component.shadowRoot.querySelector(
-                "div.tile.tile-root"
+            const tileAnchor: HTMLElement = component.shadowRoot.querySelector(
+                "a.tile.tile-root"
             );
-            expect(tileDiv).not.toBeNull();
-            expect(tileDiv.classList).toHaveLength(2);
-            assertLevelAndLabel(tileDiv);
+            expect(tileAnchor).not.toBeNull();
+            expect(tileAnchor.classList).toHaveLength(2);
+            assertLevelAndLabel(tileAnchor);
 
             const arrowIcon: Icon = component.shadowRoot.querySelector(
                 "dx-icon"
@@ -79,13 +80,13 @@ describe(TAG, () => {
                 hasChildren: true,
                 isExpanded: true
             });
-            const tileDiv: HTMLElement = component.shadowRoot.querySelector(
-                "div.tile.tile-with-children"
+            const tileAnchor: HTMLElement = component.shadowRoot.querySelector(
+                "a.tile.tile-with-children"
             );
 
-            expect(tileDiv).not.toBeNull();
-            expect(tileDiv.classList).toHaveLength(2);
-            assertLevelAndLabel(tileDiv);
+            expect(tileAnchor).not.toBeNull();
+            expect(tileAnchor.classList).toHaveLength(2);
+            assertLevelAndLabel(tileAnchor);
 
             const arrowIcon: Icon = component.shadowRoot.querySelector(
                 "dx-icon"
@@ -107,11 +108,11 @@ describe(TAG, () => {
                 treeNode: SINGLE_NODE,
                 isSelected: true
             });
-            const tileDiv: HTMLElement = component.shadowRoot.querySelector(
-                "div.tile.tile-selected"
+            const tileAnchor: HTMLElement = component.shadowRoot.querySelector(
+                "a.tile.tile-selected"
             );
-            expect(tileDiv).not.toBeNull();
-            expect(tileDiv.classList).toHaveLength(2);
+            expect(tileAnchor).not.toBeNull();
+            expect(tileAnchor.classList).toHaveLength(2);
 
             return expect(component).toBeAccessible();
         });

package/src/modules/dx/treeTile/treeTile.css

@@ -34,6 +34,7 @@
     font-size: var(--dx-g-text-sm);
     font-weight: var(--dx-g-font-demi);
     color: var(--dx-g-blue-vibrant-30);
+    display: block;
 }
 
 .tile-selected {
@@ -188,3 +189,18 @@ dx-type-badge.delete {
     --dx-c-type-badge-color: var(--dx-g-red-vibrant-40);
     --dx-c-type-badge-background: var(--dx-g-hot-orange-vibrant-90);
 }
+
+a {
+    display: block;
+    text-decoration: none;
+}
+
+a:link,
+a:visited {
+    color: var(--dx-g-gray-10);
+}
+
+a:visited.tile-root,
+a:link.tile-root {
+    color: var(--dx-g-blue-vibrant-30);
+}

package/src/modules/dx/treeTile/treeTile.html

@@ -1,5 +1,5 @@
 <template>
-    <div class={tileClass}>
+    <a href={href} class={tileClass}>
         <div class="flex indentation" aria-level={tileAriaLevel}>
             <span class="tile-label truncate" title={treeNode.label}>
                 {treeNode.label}
@@ -20,5 +20,5 @@
                 value={methodText}
             ></dx-type-badge>
         </div>
-    </div>
+    </a>
 </template>

package/src/modules/dx/treeTile/treeTile.ts

@@ -18,6 +18,7 @@ export default class TreeTile extends LightningElement {
     @api isExpanded = false;
     @api hasChildren = false;
     @api isSelected = false;
+    @api href!: string;
 
     get tileAriaLevel() {
         return this.treeNode.level + 2;