@salesforcedevs/dx-components 0.20.2 → 0.23.0-alpha.2

package/lwc.config.json

@@ -11,6 +11,8 @@
         "dx/cardDemo",
         "dx/cardDocs",
         "dx/cardEvent",
+        "dx/cardExpanded",
+        "dx/cardMinimal",
         "dx/cardNews",
         "dx/cardPodcastEpisode",
         "dx/cardPodcastEpisodeProvider",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.20.2",
+    "version": "0.23.0-alpha.2",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -28,6 +28,5 @@
         "@types/classnames": "^2.2.10",
         "@types/debounce": "^1.2.0",
         "@types/lodash.get": "^4.4.6"
-    },
-    "gitHead": "e74bfc54433cc987d1ec3a84d84034e36194d379"
+    }
 }

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

@@ -0,0 +1,193 @@
+import CardTitle from "dx/cardTitle";
+import CardExpanded from "dx/cardExpanded";
+import FormattedDateTime from "dx/formattedDateTime";
+import ImageAndLabel from "dx/imageAndLabel";
+import Topics from "dx/topics";
+import TypeBadge from "dx/typeBadge";
+import { createMediaMock } from "utils/jest";
+import { createRenderComponent } from "utils/tests";
+import mockProps, { podcastMock } from "./mockProps";
+
+const MOBILE_QUERY = "(max-width: 640px)";
+const TAG = "dx-card-expanded";
+const render = createRenderComponent(TAG, CardExpanded);
+
+describe(TAG, () => {
+    describe("render", () => {
+        it("renders blog content type", () => {
+            const component = render(mockProps);
+
+            const container: HTMLElement =
+                component.shadowRoot.querySelector(".card-container");
+            expect(container).not.toBeNull();
+            expect(container.classList).toHaveLength(1);
+
+            const typeBadge: TypeBadge =
+                component.shadowRoot.querySelector("dx-type-badge");
+            expect(typeBadge).not.toBeNull();
+            expect(typeBadge.color).toBe("teal");
+            expect(typeBadge.value).toBe("Blog");
+            expect(typeBadge.size).toBe("default");
+
+            const title: CardTitle =
+                component.shadowRoot.querySelector("dx-card-title");
+            expect(title).not.toBeNull();
+            expect(title.href).toBe(mockProps.href);
+            expect(title.target).toBe("_self");
+
+            const imageAndLabel: ImageAndLabel =
+                component.shadowRoot.querySelector("dx-image-and-label");
+            expect(imageAndLabel).not.toBeNull();
+            expect(imageAndLabel.href).toBe(mockProps.authorHref);
+            expect(imageAndLabel.imgSrc).toBe(mockProps.authorImgSrc);
+            expect(imageAndLabel.label).toBe(mockProps.authorLabel);
+
+            expect(
+                component.shadowRoot.querySelector(".card-dot-separator")
+            ).not.toBeNull();
+
+            const formatedDate: FormattedDateTime =
+                component.shadowRoot.querySelector("dx-formatted-date-time");
+            expect(formatedDate).not.toBeNull();
+            expect(formatedDate.value).toBe("February 20, 2021");
+
+            const body: HTMLSpanElement = component.shadowRoot.querySelector(
+                ".card-container > span"
+            );
+            expect(body).not.toBeNull();
+            expect(body.textContent).toBe(mockProps.body);
+
+            const topics: Topics =
+                component.shadowRoot.querySelector("dx-topics");
+            expect(topics).not.toBeNull();
+            expect(topics.topics).toEqual(mockProps.topics);
+
+            expect(window.matchMedia).toBeCalledTimes(1);
+            expect(window.matchMedia).toBeCalledWith(MOBILE_QUERY);
+
+            return expect(component).toBeAccessible();
+        });
+
+        it("renders with no props", () => {
+            const component = render();
+
+            const container: HTMLElement =
+                component.shadowRoot.querySelector(".card-container");
+            expect(container).not.toBeNull();
+            expect(container.classList).toHaveLength(1);
+
+            const typeBadge: TypeBadge =
+                component.shadowRoot.querySelector("dx-type-badge");
+            expect(typeBadge).not.toBeNull();
+            expect(typeBadge.color).toBe("teal");
+            expect(typeBadge.value).toBe("Blog");
+            expect(typeBadge.size).toBe("default");
+
+            expect(
+                component.shadowRoot.querySelector("dx-card-title")
+            ).toBeNull();
+            expect(
+                component.shadowRoot.querySelector("dx-image-and-label")
+            ).toBeNull();
+            expect(
+                component.shadowRoot.querySelector(".card-dot-separator")
+            ).toBeNull();
+            expect(
+                component.shadowRoot.querySelector("dx-formatted-date-time")
+            ).toBeNull();
+            expect(
+                component.shadowRoot.querySelector("span:last-of-type")
+            ).toBeNull();
+            expect(component.shadowRoot.querySelector("dx-topics")).toBeNull();
+
+            expect(window.matchMedia).toBeCalledTimes(1);
+            expect(window.matchMedia).toBeCalledWith(MOBILE_QUERY);
+        });
+
+        it("renders Podcast content type", () => {
+            const component = render(podcastMock);
+
+            const container: HTMLElement =
+                component.shadowRoot.querySelector(".card-container");
+            expect(container).not.toBeNull();
+            expect(container.classList).toHaveLength(1);
+
+            const typeBadge: TypeBadge =
+                component.shadowRoot.querySelector("dx-type-badge");
+            expect(typeBadge).not.toBeNull();
+            expect(typeBadge.color).toBe("blue");
+            expect(typeBadge.value).toBe("Podcast");
+            expect(typeBadge.size).toBe("default");
+
+            const title: CardTitle =
+                component.shadowRoot.querySelector("dx-card-title");
+            expect(title).not.toBeNull();
+            expect(title.href).toBe(podcastMock.href);
+            expect(title.target).toBe("_self");
+
+            expect(
+                component.shadowRoot.querySelector("dx-image-and-label")
+            ).toBeNull();
+
+            const lengthSpan: HTMLSpanElement =
+                component.shadowRoot.querySelector(".card-extra-info > span");
+            expect(lengthSpan).not.toBeNull();
+            expect(lengthSpan.textContent).toBe(podcastMock.length);
+
+            expect(
+                component.shadowRoot.querySelector(".card-dot-separator")
+            ).not.toBeNull();
+
+            const formatedDate: FormattedDateTime =
+                component.shadowRoot.querySelector("dx-formatted-date-time");
+            expect(formatedDate).not.toBeNull();
+            expect(formatedDate.value).toBe("February 20, 2021");
+
+            const body: HTMLSpanElement = component.shadowRoot.querySelector(
+                ".card-container > span"
+            );
+            expect(body).not.toBeNull();
+            expect(body.textContent).toBe(podcastMock.body);
+
+            const topics: Topics =
+                component.shadowRoot.querySelector("dx-topics");
+            expect(topics).not.toBeNull();
+            expect(topics.topics).toEqual(podcastMock.topics);
+
+            expect(window.matchMedia).toBeCalledTimes(1);
+            expect(window.matchMedia).toBeCalledWith(MOBILE_QUERY);
+
+            return expect(component).toBeAccessible();
+        });
+    });
+
+    describe("mobile render", () => {
+        beforeAll(() => {
+            window.matchMedia = createMediaMock(true);
+        });
+
+        it("renders blog content type as mobile", () => {
+            const component = render(mockProps);
+
+            const container: HTMLElement =
+                component.shadowRoot.querySelector(".card-container");
+            expect(container).not.toBeNull();
+            expect(container.classList).toHaveLength(2);
+            expect(container.classList).toContain("card-mobile");
+
+            const typeBadge: TypeBadge =
+                component.shadowRoot.querySelector("dx-type-badge");
+            expect(typeBadge).not.toBeNull();
+            expect(typeBadge.size).toBe("small");
+
+            const imageAndLabel: ImageAndLabel =
+                component.shadowRoot.querySelector("dx-image-and-label");
+            expect(imageAndLabel).not.toBeNull();
+            expect(imageAndLabel.href).toBe(mockProps.authorHref);
+            expect(imageAndLabel.imgSrc).toBe("");
+            expect(imageAndLabel.label).toBe(mockProps.authorLabel);
+
+            return expect(component).toBeAccessible();
+        });
+    });
+});

package/src/modules/dx/cardExpanded/__tests__/mockProps.ts

@@ -0,0 +1,21 @@
+export default {
+    authorHref: "/",
+    authorImgSrc: "https://placekitten.com/300/300",
+    authorLabel: "Author Name",
+    contentType: "Blog",
+    href: "/awesome-blog-post",
+    date: "02/20/2021",
+    title: "Lightning Web Components for your Inbox",
+    body: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate nulla inventore, quis enim dignissimos culpa assumenda non sed corporis similique praesentium ex quasi, cumque quia sequi rerum ab asperiores fugiat!",
+    topics: ["mobile", "performance"]
+};
+
+export const podcastMock = {
+    body: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate nulla inventore, quis enim dignissimos culpa assumenda non sed corporis similique praesentium ex quasi, cumque quia sequi rerum ab asperiores fugiat!",
+    contentType: "Podcast",
+    date: "02/20/2021",
+    href: "/awesome-blog-post",
+    length: "40 min",
+    title: "Lightning Web Components for your Inbox",
+    topics: ["mobile", "performance"]
+};

package/src/modules/dx/cardExpanded/cardExpanded.css

@@ -0,0 +1,49 @@
+@import "helpers/text";
+
+:host {
+    display: block;
+}
+
+dx-card-title:hover {
+    --dx-c-card-title-color: var(--dx-g-blue-vibrant-40);
+}
+
+dx-formatted-date-time {
+    /* Push down a little to align with dx-image-and-label */
+    margin-top: 3px;
+}
+
+.card-body {
+    --dx-c-max-lines: var(--dx-c-body-max-lines, 3);
+}
+
+.card-extra-info {
+    gap: var(--dx-g-spacing-sm);
+    align-items: center;
+}
+
+.card-container {
+    border-bottom: 1px solid var(--sds-g-gray-4);
+    padding-bottom: var(--dx-g-spacing-xl);
+    flex-direction: column;
+    gap: var(--dx-g-spacing-smd);
+}
+
+.card-container,
+.card-extra-info {
+    display: flex;
+}
+
+.card-dot-separator {
+    --size: 5px;
+
+    height: var(--size);
+    width: var(--size);
+    background-color: var(--dx-g-text-label-color);
+    border-radius: 100%;
+    margin-bottom: 3px;
+}
+
+.card-mobile .card-body {
+    --dx-c-max-lines: var(--dx-c-body-max-lines, 2);
+}

package/src/modules/dx/cardExpanded/cardExpanded.html

@@ -0,0 +1,37 @@
+<template>
+    <div class={containerClass}>
+        <dx-type-badge
+            color={badgeColor}
+            type="content-type"
+            value={contentType}
+            size={badgeSize}
+        ></dx-type-badge>
+        <dx-card-title
+            if:true={title}
+            href={href}
+            target={target}
+            title={title}
+        ></dx-card-title>
+        <div class="card-extra-info dx-text-label-1-dark">
+            <dx-image-and-label
+                if:true={renderAuthor}
+                href={authorHref}
+                img-src={authorImage}
+                label={authorLabel}
+            ></dx-image-and-label>
+            <span if:true={renderLength}>{length}</span>
+            <span if:true={renderDot} class="card-dot-separator"></span>
+            <dx-formatted-date-time
+                if:true={date}
+                day="2-digit"
+                month="long"
+                year="numeric"
+                value={date}
+            ></dx-formatted-date-time>
+        </div>
+        <span if:true={body} class="card-body dx-text-body-2 dx-text-truncate">
+            {body}
+        </span>
+        <dx-topics if:true={hasTopics} topics={topics}></dx-topics>
+    </div>
+</template>

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

@@ -0,0 +1,59 @@
+import { html } from "lit-html";
+import mockProps, { podcastMock } from "./__tests__/mockProps";
+
+export default {
+    title: "dx/dx-card-expanded",
+    component: "dx-card-expanded",
+    argTypes: {
+        contentType: {
+            control: {
+                options: ["Blog", "Podcast"],
+                type: "select"
+            }
+        }
+    }
+};
+
+const style = html`
+    <style>
+        dx-card-expanded {
+            width: clamp(400px, 80%, 800px);
+        }
+    </style>
+`;
+
+type CardExpandedProps = {
+    authorHref?: string;
+    authorImgSrc?: string;
+    authorLabel?: string;
+    body: string;
+    contentType: "Blog" | "Podcast";
+    date: string;
+    href: string;
+    title: string;
+    length?: string;
+    topics: Array<string>;
+};
+
+const Template = (args: CardExpandedProps) => html`
+    ${style}
+    <dx-card-expanded
+        author-href="${args.authorHref || ""}"
+        author-img-src="${args.authorImgSrc || ""}"
+        author-label="${args.authorLabel || ""}"
+        body="${args.body}"
+        content-type=${args.contentType || "Blog"}
+        date="${args.date}"
+        href="${args.href}"
+        length="${args.length || ""}"
+        title="${args.title}"
+        topics=${JSON.stringify(args.topics)}
+    ></dx-card>-expanded
+`;
+
+export const BlogPost = (args: CardExpandedProps) => Template(args);
+
+BlogPost.args = mockProps;
+
+export const PodcastPost = (args: CardExpandedProps) => Template(args);
+PodcastPost.args = podcastMock;

package/src/modules/dx/cardExpanded/cardExpanded.ts

@@ -0,0 +1,45 @@
+import { api } from "lwc";
+import { ArchiveCard } from "utils/archiveCard";
+import cx from "classnames";
+
+export default class ExpandedCard extends ArchiveCard {
+    @api body!: string;
+    @api date: string | null = null;
+    @api topics: Array<string> = [];
+    @api authorLabel?: string | null = null;
+    @api authorHref?: string | null = null;
+    @api authorImgSrc?: string | null = null;
+    @api length?: string;
+
+    private get isBlog() {
+        return this.contentType === "Blog";
+    }
+
+    private get hasAuthor(): boolean {
+        return !!(this.authorImgSrc && this.authorLabel);
+    }
+
+    private get renderAuthor(): boolean {
+        return this.isBlog && this.hasAuthor;
+    }
+
+    private get renderLength(): boolean {
+        return !this.isBlog && !!this.length;
+    }
+
+    private get renderDot(): boolean {
+        return !!((this.renderAuthor || this.renderLength) && this.date);
+    }
+
+    private get hasTopics(): boolean {
+        return !!this.topics?.length;
+    }
+
+    private get authorImage(): string {
+        return !this.mobile && this.authorImgSrc ? this.authorImgSrc : "";
+    }
+
+    private get containerClass(): string {
+        return cx("card-container", this.mobile && "card-mobile");
+    }
+}

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

@@ -0,0 +1,87 @@
+import CardMinimal from "dx/cardMinimal";
+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-card-minimal";
+const render = createRenderComponent(TAG, CardMinimal);
+
+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/cardMinimal/__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/cardMinimal/cardMinimal.css

@@ -0,0 +1,31 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+:host {
+    display: block;
+}
+
+a {
+    --dx-c-max-lines: var(--dx-c-title-max-lines, 3);
+
+    color: var(--dx-g-blue-vibrant-50);
+    flex-grow: 1;
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-sm);
+    font-weight: var(--dx-g-font-demi);
+}
+
+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/cardMinimal/cardMinimal.html

@@ -0,0 +1,13 @@
+<template>
+    <div class="card-container">
+        <a class="dx-text-truncate" 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/cardMinimal/cardMinimal.stories.ts

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

package/src/modules/dx/cardMinimal/cardMinimal.ts

@@ -0,0 +1,3 @@
+import { ArchiveCard } from "utils/archiveCard";
+
+export default class MinimalCard extends ArchiveCard {}

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/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;
     });