@salesforcedevs/dx-components 0.9.0 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.9.0",
+    "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": "f2d227d9714d14c900770cc965a152be684aeb56"
+    "gitHead": "f91a2edc71e7a19cbc26ccfd6396637d3a706f56"
 }

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, {
@@ -280,14 +272,12 @@ 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,
                 sideNavAction: "click"
             });
@@ -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);

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");

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;