@salesforcedevs/dx-components 0.21.0 → 0.24.0

package/src/modules/dx/topics/topics.html

@@ -0,0 +1,12 @@
+<template>
+    <div class="container dx-text-label-1-dark">
+        <template for:each={normalizedTopics} for:item="topic">
+            <span key={topic.id}>{topic.label}</span>
+            <span
+                key={topic.id}
+                if:false={topic.isLast}
+                class="dot-separator"
+            ></span>
+        </template>
+    </div>
+</template>

package/src/modules/dx/topics/topics.ts

@@ -0,0 +1,25 @@
+import { LightningElement, api } from "lwc";
+import { normalizeToArray } from "utils/normalizers";
+
+export default class Topics extends LightningElement {
+    private _topics: Array<string> = [];
+
+    @api
+    get topics() {
+        return this._topics;
+    }
+
+    set topics(value) {
+        this._topics = normalizeToArray(value);
+    }
+
+    get normalizedTopics() {
+        const { length } = this._topics;
+
+        return this._topics?.map((topic, index) => ({
+            id: topic,
+            label: topic,
+            isLast: index === length - 1
+        }));
+    }
+}

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

@@ -37,10 +37,6 @@ describe(TAG, () => {
         mockInitialize.mockReturnValue(INITIALIZE_MOCK_RESULT);
     });
 
-    afterEach(() => {
-        jest.clearAllMocks();
-    });
-
     describe("component render", () => {
         it("should render dx-tree-item with appropiate properties", () => {
             const component = renderComponent({
@@ -49,9 +45,8 @@ describe(TAG, () => {
             expect(component.treeRoot).toEqual(INITIALIZE_MOCK_RESULT);
             expect(component.value).toBeUndefined();
 
-            const treeItem: TreeItem = component.shadowRoot.querySelector(
-                "dx-tree-item"
-            );
+            const treeItem: TreeItem =
+                component.shadowRoot.querySelector("dx-tree-item");
             expect(treeItem).not.toBeNull();
             expect(treeItem.treeNode).toEqual(INITIALIZE_MOCK_RESULT);
             expect(treeItem.isRoot).toBe(true);
@@ -81,9 +76,8 @@ describe(TAG, () => {
             expect(component.treeRoot).toEqual(INITIALIZE_MOCK_RESULT);
             expect(component.value).toBe(INITIALIZE_MOCK_PARAMETER.name);
 
-            const treeItem: TreeItem = component.shadowRoot.querySelector(
-                "dx-tree-item"
-            );
+            const treeItem: TreeItem =
+                component.shadowRoot.querySelector("dx-tree-item");
             expect(treeItem).not.toBeNull();
             expect(treeItem.treeNode).toEqual(INITIALIZE_MOCK_RESULT);
             expect(treeItem.isRoot).toBe(true);
@@ -122,9 +116,8 @@ describe(TAG, () => {
                 value: INITIALIZE_MOCK_PARAMETER.name
             });
 
-            const treeItem: TreeItem = component.shadowRoot.querySelector(
-                "dx-tree-item"
-            );
+            const treeItem: TreeItem =
+                component.shadowRoot.querySelector("dx-tree-item");
             expect(treeItem).not.toBeNull();
             expect(treeItem.selectedKey).toBe(validKey);
 
@@ -183,9 +176,8 @@ describe(TAG, () => {
             expect(mockGetNode).not.toBeCalled();
 
             return Promise.resolve().then(() => {
-                const treeItem: TreeItem = component.shadowRoot.querySelector(
-                    "dx-tree-item"
-                );
+                const treeItem: TreeItem =
+                    component.shadowRoot.querySelector("dx-tree-item");
                 expect(treeItem).not.toBeNull();
                 expect(treeItem.selectedKey).toBe(expectedKey);
 
@@ -241,9 +233,8 @@ describe(TAG, () => {
             const mockTileSelected = jest.fn();
             component.addEventListener("tileselected", mockTileSelected);
 
-            const treeItem: TreeItem = component.shadowRoot.querySelector(
-                "dx-tree-item"
-            );
+            const treeItem: TreeItem =
+                component.shadowRoot.querySelector("dx-tree-item");
             treeItem.dispatchEvent(
                 new CustomEvent("tileselected", MOCK_TILE_DETAIL)
             );
@@ -339,15 +330,13 @@ describe(TAG, () => {
             const mockRegister = jest.fn();
             component.addEventListener("register", mockRegister);
 
-            component.shadowRoot
-                .querySelector("dx-tree-item")
-                .dispatchEvent(
-                    new CustomEvent("register", {
-                        detail,
-                        bubbles: true,
-                        composed: true
-                    })
-                );
+            component.shadowRoot.querySelector("dx-tree-item").dispatchEvent(
+                new CustomEvent("register", {
+                    detail,
+                    bubbles: true,
+                    composed: true
+                })
+            );
 
             expect(mockRegisterSetExpanded).toBeCalledTimes(1);
             expect(mockRegisterSetExpanded).toBeCalledWith(detail);

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

@@ -31,9 +31,8 @@ describe(TAG, () => {
             const link = component.shadowRoot.querySelector("a");
             expect(link).not.toBeNull();
 
-            const tile: TreeTile = component.shadowRoot.querySelector(
-                "a > dx-tree-tile"
-            );
+            const tile: TreeTile =
+                component.shadowRoot.querySelector("a > dx-tree-tile");
             expect(tile).not.toBeNull();
             assertTile(tile, {
                 isRoot: true,
@@ -43,9 +42,8 @@ describe(TAG, () => {
                 isSelected: false
             });
 
-            const childTreeItem = component.shadowRoot.querySelector(
-                "dx-tree-item"
-            );
+            const childTreeItem =
+                component.shadowRoot.querySelector("dx-tree-item");
             expect(childTreeItem).toBeNull();
 
             return expect(component).toBeAccessible();
@@ -57,9 +55,8 @@ describe(TAG, () => {
                 treeNode
             });
 
-            const tile: TreeTile = component.shadowRoot.querySelector(
-                "a > dx-tree-tile"
-            );
+            const tile: TreeTile =
+                component.shadowRoot.querySelector("a > dx-tree-tile");
             expect(tile).not.toBeNull();
             assertTile(tile, {
                 isRoot: false,
@@ -69,9 +66,8 @@ describe(TAG, () => {
                 isSelected: false
             });
 
-            const children: Array<TreeItem> = component.shadowRoot.querySelectorAll(
-                "dx-tree-item"
-            );
+            const children: Array<TreeItem> =
+                component.shadowRoot.querySelectorAll("dx-tree-item");
             expect(children).toHaveLength(NODE_WITH_CHILDREN.children!.length);
 
             children.forEach((child, index) => {
@@ -99,9 +95,8 @@ describe(TAG, () => {
                 SINGLE_NODE_WITH_LINK.link!.target
             );
 
-            const tile: TreeTile = component.shadowRoot.querySelector(
-                "a > dx-tree-tile"
-            );
+            const tile: TreeTile =
+                component.shadowRoot.querySelector("a > dx-tree-tile");
             expect(tile).not.toBeNull();
             assertTile(tile, {
                 isRoot: false,
@@ -111,9 +106,8 @@ describe(TAG, () => {
                 isSelected: true
             });
 
-            const anyChild: TreeItem = component.shadowRoot.querySelector(
-                "dx-tree-item"
-            );
+            const anyChild: TreeItem =
+                component.shadowRoot.querySelector("dx-tree-item");
             expect(anyChild).toBeNull();
 
             return expect(component).toBeAccessible();
@@ -143,9 +137,8 @@ describe(TAG, () => {
                 selectedKey: "not_this"
             });
 
-            const tile: TreeTile = component.shadowRoot.querySelector(
-                "a > dx-tree-tile"
-            );
+            const tile: TreeTile =
+                component.shadowRoot.querySelector("a > dx-tree-tile");
             expect(tile).not.toBeNull();
             assertTile(tile, {
                 isRoot: false,
@@ -163,10 +156,6 @@ describe(TAG, () => {
         const mockExpandCollapse = jest.fn();
         const mockTileSelected = jest.fn();
 
-        afterEach(() => {
-            jest.clearAllMocks();
-        });
-
         it("should render the children when the dx-tree-tile emits iconclick", () => {
             const component = renderComponent({
                 treeNode: NODE_WITH_CHILDREN
@@ -175,14 +164,12 @@ describe(TAG, () => {
             component.addEventListener("expandcollapse", mockExpandCollapse);
             component.addEventListener("tileselected", mockTileSelected);
 
-            const anyChild: TreeItem = component.shadowRoot.querySelector(
-                "dx-tree-item"
-            );
+            const anyChild: TreeItem =
+                component.shadowRoot.querySelector("dx-tree-item");
             expect(anyChild).toBeNull();
 
-            const tile: HTMLElement = component.shadowRoot.querySelector(
-                "dx-tree-tile"
-            )!;
+            const tile: HTMLElement =
+                component.shadowRoot.querySelector("dx-tree-tile")!;
             expect(tile).toHaveProperty("isExpanded", false);
             tile.dispatchEvent(new CustomEvent("iconclick"));
 
@@ -193,9 +180,8 @@ describe(TAG, () => {
             });
 
             return Promise.resolve().then(() => {
-                const children: Array<TreeItem> = component.shadowRoot.querySelectorAll(
-                    "dx-tree-item"
-                );
+                const children: Array<TreeItem> =
+                    component.shadowRoot.querySelectorAll("dx-tree-item");
                 expect(children).toHaveLength(
                     NODE_WITH_CHILDREN.children!.length
                 );
@@ -224,14 +210,12 @@ describe(TAG, () => {
             component.addEventListener("expandcollapse", mockExpandCollapse);
             component.addEventListener("tileselected", mockTileSelected);
 
-            const tile: HTMLElement = component.shadowRoot.querySelector(
-                "dx-tree-tile"
-            );
+            const tile: HTMLElement =
+                component.shadowRoot.querySelector("dx-tree-tile");
             expect(tile).toHaveProperty("isExpanded", true);
 
-            const children: Array<TreeItem> = component.shadowRoot.querySelectorAll(
-                "dx-tree-item"
-            );
+            const children: Array<TreeItem> =
+                component.shadowRoot.querySelectorAll("dx-tree-item");
             expect(children).toHaveLength(NODE_WITH_CHILDREN.children!.length);
 
             tile.dispatchEvent(new CustomEvent("iconclick"));
@@ -245,9 +229,8 @@ describe(TAG, () => {
             return Promise.resolve().then(() => {
                 expect(tile).toHaveProperty("isExpanded", false);
 
-                const anyChild: TreeItem = component.shadowRoot.querySelector(
-                    "dx-tree-item"
-                );
+                const anyChild: TreeItem =
+                    component.shadowRoot.querySelector("dx-tree-item");
                 expect(anyChild).toBeNull();
 
                 expect(mockExpandCollapse).toBeCalledTimes(1);
@@ -313,9 +296,8 @@ describe(TAG, () => {
             component.addEventListener("tileselected", mockTileSelected);
             component.addEventListener("expandcollapse", mockExpandCollapse);
 
-            const tile: TreeTile = component.shadowRoot.querySelector(
-                "dx-tree-tile"
-            );
+            const tile: TreeTile =
+                component.shadowRoot.querySelector("dx-tree-tile");
             expect(tile).toHaveProperty("isSelected", true);
 
             const link: HTMLElement = component.shadowRoot.querySelector("a");
@@ -349,16 +331,13 @@ describe(TAG, () => {
             });
 
             expect(mockRegister).toBeCalledTimes(1);
-            const {
-                key: actualKey,
-                setExpanded
-            } = mockRegister.mock.calls[0][0].detail;
+            const { key: actualKey, setExpanded } =
+                mockRegister.mock.calls[0][0].detail;
             expect(actualKey).toBe(NODE_WITH_CHILDREN.key);
             expect(typeof setExpanded).toBe("function");
 
-            const tile: TreeTile = component.shadowRoot.querySelector(
-                "dx-tree-tile"
-            );
+            const tile: TreeTile =
+                component.shadowRoot.querySelector("dx-tree-tile");
             expect(tile).not.toBeNull();
             expect(tile).toHaveProperty("isExpanded", false);
 
@@ -371,9 +350,8 @@ describe(TAG, () => {
             return Promise.resolve().then(() => {
                 expect(tile).toHaveProperty("isExpanded", true);
 
-                const trees = component.shadowRoot.querySelectorAll(
-                    "dx-tree-item"
-                );
+                const trees =
+                    component.shadowRoot.querySelectorAll("dx-tree-item");
                 expect(trees).toHaveLength(NODE_WITH_CHILDREN.children!.length);
             });
         });
@@ -383,9 +361,8 @@ describe(TAG, () => {
                 treeNode: SINGLE_NODE_WITH_LINK
             });
 
-            const link: HTMLAnchorElement = component.shadowRoot.querySelector(
-                "a"
-            );
+            const link: HTMLAnchorElement =
+                component.shadowRoot.querySelector("a");
             expect(link).not.toBeNull();
 
             link.click();

package/src/modules/dx/typeBadge/typeBadge.css

@@ -66,7 +66,7 @@
 }
 
 @media screen and (max-width: 768px) {
-    .typebadge:not(.size-small):not(.size-xs) {
+    .typebadge.typebadge_metadata:not(.size-small) {
         height: var(--dx-g-spacing-lg);
         padding: 0 var(--dx-g-spacing-sm);
         font-size: var(--dx-g-text-2xs);

package/src/modules/helpers/text/text.css

@@ -154,3 +154,10 @@
     font-size: var(--dx-g-text-xs);
     line-height: 14px;
 }
+
+.dx-text-truncate {
+    display: -webkit-box;
+    -webkit-line-clamp: var(--dx-c-max-lines, 6);
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}

package/src/modules/utils/archiveCard/archiveCard.ts

@@ -0,0 +1,35 @@
+import { LightningElement, api } from "lwc";
+import { LinkTarget, Color } from "typings/custom";
+
+const MOBILE_QUERY = "(max-width: 640px)";
+
+export abstract class ArchiveCard extends LightningElement {
+    @api contentType: "Blog" | "Podcast" = "Blog";
+    @api href!: string;
+    @api title!: string;
+    @api target: LinkTarget = "_self";
+
+    private matchMedia!: MediaQueryList;
+    protected mobile = false;
+
+    protected get badgeColor(): Color {
+        return this.contentType === "Blog" ? "teal" : "blue";
+    }
+
+    connectedCallback(): void {
+        this.matchMedia = window.matchMedia(MOBILE_QUERY);
+        this.onMediaChange(this.matchMedia);
+        this.matchMedia.addEventListener("change", this.onMediaChange);
+    }
+
+    disconnectedCallback(): void {
+        this.matchMedia.removeEventListener("change", this.onMediaChange);
+    }
+
+    private onMediaChange = (e: MediaQueryListEvent | MediaQueryList) =>
+        (this.mobile = e.matches);
+
+    protected get badgeSize(): string {
+        return (this.mobile && "small") || "default";
+    }
+}

package/src/modules/utils/normalizers/normalizers.ts

@@ -6,7 +6,7 @@ export const toJson = (value: string | object | null) =>
 export const normalizeToArray = (
     value: string[] | string | null,
     splitKey: string = ","
-) => {
+): Array<string> => {
     if (!value) {
         return [];
     }
@@ -19,7 +19,7 @@ export const normalizeToArray = (
         }
     }
 
-    return Array.isArray(value) ? value : [value];
+    return (Array.isArray(value) ? value : [value]) as Array<string>;
 };
 
 type WordpressPodcastEpisode = {