@salesforcedevs/dx-components 0.20.0 → 0.22.0

package/package.json

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

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

@@ -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/codeBlock/codeBlock.ts

@@ -41,7 +41,7 @@ export default class CodeBlock extends LightningElement {
         { label: "Visualforce", id: "visualforce" },
         { label: "Html", id: "html" },
         { label: "xml", id: "xml" },
-        { label: "TypeScript", id: "TypeScript" },
+        { label: "TypeScript", id: "typescript" },
         { label: "PHP", id: "php" }
     ];
 

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

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

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

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

@@ -122,6 +122,7 @@ input::placeholder {
 }
 
 .shortcut {
+    align-items: center;
     display: flex;
     flex-shrink: 0;
     flex-direction: row;

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

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

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

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

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

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

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

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

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

@@ -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", () => {