npm - @salesforcedevs/dx-components - Versions diffs - 0.21.0 → 0.22.0 - Mend

@salesforcedevs/dx-components 0.21.0 → 0.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.21.0",
+    "version": "0.22.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": "a92996810904d262ad1c154ff21419aeffc47059"
+    "gitHead": "4a6bdaf5c490103e5620c3199b24528b4d3d26f0"
 }

package/src/modules/dx/codeBlock/__tests__/codeBlock.test.ts CHANGED Viewed

@@ -25,10 +25,6 @@ describe(TAG, () => {
     const oldNavigator = window.navigator;
     const oldError = console.error;
-    afterEach(() => {
-        jest.clearAllMocks();
-    });
     afterAll(() => {
         Object.assign(window.navigator, oldNavigator);
         Object.assign(console.error, oldError);

package/src/modules/dx/grid/__tests__/grid.test.ts CHANGED Viewed

@@ -5,10 +5,6 @@ const TAG = "dx-grid";
 const render = createRenderComponent(TAG, Grid);
 describe(TAG, () => {
-    afterEach(() => {
-        jest.clearAllMocks();
-    });
     [
         [4, "four", "dynamic"],
         [8, "four", "dynamic"],
@@ -21,9 +17,8 @@ describe(TAG, () => {
     ].forEach(([numElements, calculatedColumns, columns]) =>
         it(`choses ${calculatedColumns} columns when there are ${numElements} elements`, () => {
             const element = render({ columns });
-            const slot: HTMLSlotElement = element.shadowRoot.querySelector(
-                "slot"
-            );
+            const slot: HTMLSlotElement =
+                element.shadowRoot.querySelector("slot");
             const div = document.createElement("div");
             slot.assignedElements = jest
                 .fn()

package/src/modules/dx/headerSearch/__tests__/headerSearch.test.ts CHANGED Viewed

@@ -89,7 +89,6 @@ describe(TAG, () => {
     });
     afterEach(() => {
-        jest.clearAllMocks();
         subscribeCallback = null;
     });

package/src/modules/dx/minimalCard/__tests__/minimalCard.test.ts ADDED Viewed

@@ -0,0 +1,87 @@
+import MinimalCard from "dx/minimalCard";
+import TypeBadge from "dx/typeBadge";
+import { createRenderComponent } from "utils/tests";
+import { createMediaMock } from "utils/jest";
+import { blogPostMock, podcastEpisodeMock } from "./mockProps";
+const MOBILE_QUERY = "(max-width: 640px)";
+const TAG = "dx-minimal-card";
+const render = createRenderComponent(TAG, MinimalCard);
+describe(TAG, () => {
+    describe("default render", () => {
+        beforeAll(() => {
+            window.matchMedia = createMediaMock();
+        });
+        it("renders a blog post", () => {
+            const component = render(blogPostMock);
+            const link: HTMLAnchorElement =
+                component.shadowRoot.querySelector("a");
+            expect(link).not.toBeNull();
+            expect(link.href).toMatch(blogPostMock.href);
+            expect(link.target).toBe("_self");
+            const heading = link.querySelector("h4");
+            expect(heading).not.toBeNull();
+            expect(heading?.textContent).toBe(blogPostMock.title);
+            const typeBadge: TypeBadge =
+                component.shadowRoot.querySelector("dx-type-badge");
+            expect(typeBadge).not.toBeNull();
+            expect(typeBadge.value).toBe("Blog");
+            expect(typeBadge.color).toBe("teal");
+            expect(typeBadge.size).toBe("default");
+            expect(window.matchMedia).toBeCalledTimes(1);
+            expect(window.matchMedia).toBeCalledWith(MOBILE_QUERY);
+            return expect(component).toBeAccessible();
+        });
+        it("renders a podcast episode with target blank", () => {
+            const target = "_blank";
+            const component = render({ ...podcastEpisodeMock, target });
+            const link: HTMLAnchorElement =
+                component.shadowRoot.querySelector("a");
+            expect(link).not.toBeNull();
+            expect(link.href).toMatch(podcastEpisodeMock.href);
+            expect(link.target).toBe(target);
+            const heading = link.querySelector("h4");
+            expect(heading).not.toBeNull();
+            expect(heading?.textContent).toBe(podcastEpisodeMock.title);
+            const typeBadge: TypeBadge =
+                component.shadowRoot.querySelector("dx-type-badge");
+            expect(typeBadge).not.toBeNull();
+            expect(typeBadge.value).toBe(podcastEpisodeMock.contentType);
+            expect(typeBadge.color).toBe("blue");
+            expect(typeBadge.size).toBe("default");
+            expect(window.matchMedia).toBeCalledTimes(1);
+            expect(window.matchMedia).toBeCalledWith(MOBILE_QUERY);
+            return expect(component).toBeAccessible();
+        });
+    });
+    describe("render mobile", () => {
+        beforeAll(() => {
+            window.matchMedia = createMediaMock(true);
+        });
+        it("renders dx-type-badge as small", () => {
+            const component = render(podcastEpisodeMock);
+            const typeBadge =
+                component.shadowRoot.querySelector("dx-type-badge");
+            expect(typeBadge).not.toBeNull();
+            expect(typeBadge.value).toBe(podcastEpisodeMock.contentType);
+            expect(typeBadge.color).toBe("blue");
+            expect(typeBadge.size).toBe("small");
+            expect(window.matchMedia).toBeCalledTimes(1);
+            expect(window.matchMedia).toBeCalledWith(MOBILE_QUERY);
+            return expect(component).toBeAccessible();
+        });
+    });
+});

package/src/modules/dx/minimalCard/__tests__/mockProps.ts ADDED Viewed

@@ -0,0 +1,10 @@
+export const blogPostMock = {
+    title: "Lightning Web Components for Your Inbox",
+    href: "/awesome-post"
+};
+export const podcastEpisodeMock = {
+    title: "Episode 100: Trailhead Engineering with Jeff Douglas",
+    href: "/awesome-episode",
+    contentType: "Podcast"
+};

package/src/modules/dx/minimalCard/minimalCard.css ADDED Viewed

@@ -0,0 +1,32 @@
+@import "helpers/reset";
+:host {
+    display: block;
+}
+a {
+    color: var(--dx-g-blue-vibrant-50);
+    display: -webkit-box;
+    flex-grow: 1;
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-sm);
+    font-weight: var(--dx-g-font-demi);
+    overflow: hidden;
+    -webkit-line-clamp: var(--dx-c-title-max-lines, 3);
+    -webkit-box-orient: vertical;
+}
+a:hover {
+    color: var(--dx-g-blue-vibrant-40);
+}
+a + * {
+    margin-left: var(--dx-g-spacing-sm);
+}
+.card-container {
+    align-items: center;
+    border-bottom: 1px solid var(--sds-g-gray-4);
+    display: flex;
+    padding: var(--dx-g-spacing-smd) 0;
+}

package/src/modules/dx/minimalCard/minimalCard.html ADDED Viewed

@@ -0,0 +1,13 @@
+<template>
+    <div class="card-container">
+        <a href={href} target={target}>
+            <h4>{title}</h4>
+        </a>
+        <dx-type-badge
+            color={badgeColor}
+            size={badgeSize}
+            type="content-type"
+            value={contentType}
+        ></dx-type-badge>
+    </div>
+</template>

package/src/modules/dx/minimalCard/minimalCard.stories.ts ADDED Viewed

@@ -0,0 +1,32 @@
+import { html } from "lit-html";
+import { blogPostMock, podcastEpisodeMock } from "./__tests__/mockProps";
+export default {
+    title: "dx/dx-minimal-card",
+    component: "dx-minimal-card"
+};
+export const BlogPost = (args: { title: string; href: string }) => html`
+    <dx-minimal-card
+        title="${args.title}"
+        href="${args.href}"
+    ></dx-minimal-card>
+`;
+BlogPost.args = {
+    title: blogPostMock.title,
+    href: blogPostMock.href
+};
+export const PodcastEpisode = (args: { title: string; href: string }) => html`
+    <dx-minimal-card
+        title="${args.title}"
+        href="${args.href}"
+        content-type="${podcastEpisodeMock.contentType}"
+    ></dx-minimal-card>
+`;
+PodcastEpisode.args = {
+    title: podcastEpisodeMock.title,
+    href: podcastEpisodeMock.href
+};

package/src/modules/dx/minimalCard/minimalCard.ts ADDED Viewed

@@ -0,0 +1,35 @@
+import { LightningElement, api } from "lwc";
+import { Color, LinkTarget } from "typings/custom";
+const MOBILE_QUERY = "(max-width: 640px)";
+export default class MinimalCard extends LightningElement {
+    @api contentType: "Blog" | "Podcast" = "Blog";
+    @api href!: string;
+    @api target: LinkTarget = "_self";
+    @api title!: string;
+    private matchMedia!: MediaQueryList;
+    private mobile = false;
+    get badgeColor(): Color {
+        return this.contentType === "Blog" ? "teal" : "blue";
+    }
+    get badgeSize(): string {
+        return (this.mobile && "small") || "default";
+    }
+    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);
+}

package/src/modules/dx/popover/__tests__/popover.test.ts CHANGED Viewed

@@ -16,10 +16,6 @@ describe(TAG, () => {
             global.console = { ...global.console, error: jest.fn() };
         });
-        afterEach(() => {
-            jest.clearAllMocks();
-        });
         afterAll(() => {
             global.console = originalConsole;
         });
@@ -29,15 +25,13 @@ describe(TAG, () => {
             expect(console.error).not.toBeCalled();
-            const menuEl: HTMLElement = component.shadowRoot.querySelector(
-                ".popover-container"
-            );
+            const menuEl: HTMLElement =
+                component.shadowRoot.querySelector(".popover-container");
             expect(menuEl).not.toBeNull();
             expect(menuEl.classList).toHaveLength(1);
-            const popoverDiv: HTMLElement = menuEl.querySelector(
-                "div.popover"
-            )!;
+            const popoverDiv: HTMLElement =
+                menuEl.querySelector("div.popover")!;
             expect(popoverDiv).not.toBeNull();
             expect(popoverDiv.classList).toHaveLength(1);
@@ -47,15 +41,13 @@ describe(TAG, () => {
         it("renders with api properties", () => {
             const component = render(mockProps);
             expect(console.error).not.toBeCalled();
-            const menuEl: HTMLElement = component.shadowRoot.querySelector(
-                ".popover-container"
-            );
+            const menuEl: HTMLElement =
+                component.shadowRoot.querySelector(".popover-container");
             expect(menuEl).not.toBeNull();
             expect(menuEl.classList).toHaveLength(1);
-            const popoverDiv: HTMLElement = menuEl.querySelector(
-                "div.popover"
-            )!;
+            const popoverDiv: HTMLElement =
+                menuEl.querySelector("div.popover")!;
             expect(popoverDiv).not.toBeNull();
             expect(popoverDiv.classList).toHaveLength(4);
             expect(popoverDiv.classList).toContain(
@@ -74,9 +66,8 @@ describe(TAG, () => {
             expect(console.error).not.toBeCalled();
-            const popoverDiv: HTMLElement = component.shadowRoot.querySelector(
-                "div.popover"
-            );
+            const popoverDiv: HTMLElement =
+                component.shadowRoot.querySelector("div.popover");
             expect(popoverDiv.classList).toHaveLength(2);
             expect(popoverDiv.classList).toContain("popover-fullwidth");
         });
@@ -89,9 +80,8 @@ describe(TAG, () => {
                 'The "width" and "full-width" properties cannot be provided simultaneously.'
             );
-            const popoverDiv: HTMLElement = component.shadowRoot.querySelector(
-                "div.popover"
-            );
+            const popoverDiv: HTMLElement =
+                component.shadowRoot.querySelector("div.popover");
             expect(popoverDiv.style).not.toBeNull();
             expect(popoverDiv.classList).toHaveLength(5);
             expect(popoverDiv.classList).toContain(
@@ -120,9 +110,8 @@ describe(TAG, () => {
         it("doesn't render menu content before interaction", async () => {
             const component = render();
-            const content = component.shadowRoot.querySelector(
-                ".popover-content"
-            );
+            const content =
+                component.shadowRoot.querySelector(".popover-content");
             expect(content).toBeNull();
@@ -130,9 +119,8 @@ describe(TAG, () => {
             await Promise.resolve();
-            const contentAfterOpen = component.shadowRoot.querySelector(
-                ".popover-content"
-            );
+            const contentAfterOpen =
+                component.shadowRoot.querySelector(".popover-content");
             expect(contentAfterOpen).not.toBeNull();
@@ -145,9 +133,8 @@ describe(TAG, () => {
             const renderComponent = createRenderComponent(TAG, Popover);
             const component = renderComponent();
-            const content = component.shadowRoot.querySelector(
-                ".popover-content"
-            );
+            const content =
+                component.shadowRoot.querySelector(".popover-content");
             expect(content).not.toBeNull();
         });
@@ -183,9 +170,12 @@ describe(TAG, () => {
         it("doesn't fire open if passed control is disabled", () => {
             const element = render();
-            const { slot: controlSlot, slottedElement } = mockSlottedElement<
-                HTMLButtonElement
-            >(element, "button", "control");
+            const { slot: controlSlot, slottedElement } =
+                mockSlottedElement<HTMLButtonElement>(
+                    element,
+                    "button",
+                    "control"
+                );
             expect(controlSlot.assignedElements).toBeCalledTimes(1);
             expect(slottedElement.ariaHasPopup).toBe("true");
             expect(slottedElement.style.cursor).toBe("cursor");
@@ -237,9 +227,8 @@ describe(TAG, () => {
             const closeEvent = jest.fn();
             component.addEventListener("close", closeEvent);
-            const popoverDiv: HTMLElement = component.shadowRoot.querySelector(
-                ".popover"
-            );
+            const popoverDiv: HTMLElement =
+                component.shadowRoot.querySelector(".popover");
             expect(popoverDiv).not.toBeNull();
             expect(component.open).toBe(true);

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

@@ -25,10 +25,6 @@ const GTM_EVENT_NAME = "custEv_leftNavLinkClick";
 const TOGGLE_BUTTON_LABEL = "Toggle Sidebar";
 describe(TAG, () => {
-    afterEach(() => {
-        jest.clearAllMocks();
-    });
     describe("desktop", () => {
         beforeEach(() => {
             unmockQueryParameter();

package/src/modules/dx/sidebarOld/__tests__/sidebarOld.test.ts CHANGED Viewed

@@ -19,10 +19,6 @@ const GTM_EVENT_NAME = "custEv_leftNavLinkClick";
 const TOGGLE_BUTTON_LABEL = "Toggle Sidebar";
 describe(TAG, () => {
-    afterEach(() => {
-        jest.clearAllMocks();
-    });
     describe("desktop", () => {
         describe("component render", () => {
             it("should render as expanded with all the elements that sidebar includes", () => {

package/src/modules/dx/socials/__tests__/socials.test.ts CHANGED Viewed

@@ -14,10 +14,6 @@ describe(TAG, () => {
         global.console = { ...global.console, error: jest.fn() };
     });
-    afterEach(() => {
-        jest.clearAllMocks();
-    });
     afterAll(() => {
         global.console = originalConsole;
     });
@@ -25,9 +21,8 @@ describe(TAG, () => {
     it("renders dx-icon-badge for each social link", () => {
         const component = render();
-        const links: Array<HTMLAnchorElement> = component.shadowRoot.querySelectorAll(
-            "a"
-        );
+        const links: Array<HTMLAnchorElement> =
+            component.shadowRoot.querySelectorAll("a");
         expect(links).toHaveLength(3);
         const [facebookLink, twitterLink, linkedinLink] = links;
@@ -50,9 +45,8 @@ describe(TAG, () => {
         expect(linkedinLink.target).toBe("_blank");
         expect(linkedinLink.title).toBe("Linkedin");
-        const iconBadge: Array<IconBadge> = component.shadowRoot.querySelectorAll(
-            "dx-icon-badge"
-        );
+        const iconBadge: Array<IconBadge> =
+            component.shadowRoot.querySelectorAll("dx-icon-badge");
         expect(iconBadge).toHaveLength(3);
         const [facebookIcon, twitterIcon, linkedinIcon] = iconBadge;
@@ -66,9 +60,8 @@ describe(TAG, () => {
         expect(linkedinIcon.sprite).toBe("brand");
         expect(linkedinIcon.symbol).toBe("linkedin-in");
-        const detailSection = component.shadowRoot.querySelector(
-            ".details-section"
-        );
+        const detailSection =
+            component.shadowRoot.querySelector(".details-section");
         expect(detailSection).toBeNull();
         return expect(component).toBeAccessible();
@@ -78,9 +71,8 @@ describe(TAG, () => {
         const expectedTarget = "_self";
         const component = render({ linksTarget: expectedTarget });
-        const links: Array<HTMLAnchorElement> = component.shadowRoot.querySelectorAll(
-            "a"
-        );
+        const links: Array<HTMLAnchorElement> =
+            component.shadowRoot.querySelectorAll("a");
         expect(links).toHaveLength(3);
         links.forEach(({ target }) => expect(target).toBe(expectedTarget));
@@ -93,9 +85,8 @@ describe(TAG, () => {
         const testTarget = "not_valid_at_all";
         const component = render({ linksTarget: testTarget });
-        const links: Array<HTMLAnchorElement> = component.shadowRoot.querySelectorAll(
-            "a"
-        );
+        const links: Array<HTMLAnchorElement> =
+            component.shadowRoot.querySelectorAll("a");
         expect(links).toHaveLength(3);
         links.forEach(({ target }) => expect(target).toBe("_blank"));
@@ -110,9 +101,8 @@ describe(TAG, () => {
     it("renders details section", () => {
         const component = render({ details: "Test|Another Test" });
-        const details: Array<HTMLElement> = component.shadowRoot.querySelectorAll(
-            ".details-section span"
-        );
+        const details: Array<HTMLElement> =
+            component.shadowRoot.querySelectorAll(".details-section span");
         expect(details).toHaveLength(2);
         const [testDetail, anotherTestDetail] = details;

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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