@salesforcedevs/dx-components 0.22.3 → 0.23.0

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.22.3",
+    "version": "0.23.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": "c45075053423bcb7a50d00953243aa0e93bf2a59"
+    "gitHead": "d1652c07c826539ae47b435125a43243496bd5c9"
 }

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/{minimalCard/__tests__/minimalCard.test.ts → cardMinimal/__tests__/cardMinimal.test.ts}

@@ -1,12 +1,12 @@
-import MinimalCard from "dx/minimalCard";
+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-minimal-card";
-const render = createRenderComponent(TAG, MinimalCard);
+const TAG = "dx-card-minimal";
+const render = createRenderComponent(TAG, CardMinimal);
 
 describe(TAG, () => {
     describe("default render", () => {

package/src/modules/dx/{minimalCard/minimalCard.css → cardMinimal/cardMinimal.css}

@@ -1,19 +1,18 @@
 @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);
-    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 {

package/src/modules/dx/{minimalCard/minimalCard.html → cardMinimal/cardMinimal.html}

@@ -1,6 +1,6 @@
 <template>
     <div class="card-container">
-        <a href={href} target={target}>
+        <a class="dx-text-truncate" href={href} target={target}>
             <h4>{title}</h4>
         </a>
         <dx-type-badge

package/src/modules/dx/{minimalCard/minimalCard.stories.ts → cardMinimal/cardMinimal.stories.ts}

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

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/imageAndLabel/imageAndLabel.html

@@ -1,10 +1,22 @@
 <template>
     <div if:false={href} class="container">
-        <img class={imgClass} src={imgSrc} alt={imgAlt} part="image" />
+        <img
+            if:true={imgSrc}
+            class={imgClass}
+            src={imgSrc}
+            alt={imgAlt}
+            part="image"
+        />
         <span class="dx-text-label-1-dark" part="label">{label}</span>
     </div>
     <a if:true={href} href={href} class="container">
-        <img class={imgClass} src={imgSrc} alt={imgAlt} part="image" />
+        <img
+            if:true={imgSrc}
+            class={imgClass}
+            src={imgSrc}
+            alt={imgAlt}
+            part="image"
+        />
         <span class="dx-text-label-1-dark" part="label">{label}</span>
     </a>
 </template>

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

@@ -0,0 +1,3 @@
+export default {
+    topics: ["mobile", "performance"]
+};

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

@@ -0,0 +1,31 @@
+import Topics from "dx/topics";
+import { createRenderComponent } from "utils/tests";
+import mockProps from "./mockProps";
+
+const TAG = "dx-topics";
+const render = createRenderComponent(TAG, Topics);
+describe(TAG, () => {
+    it("renders", () => {
+        const component = render(mockProps);
+        expect(component.topics).toEqual(mockProps.topics);
+
+        const spans: Array<HTMLElement> =
+            component.shadowRoot.querySelectorAll("span");
+        expect(spans).toHaveLength(3);
+
+        const [expectedFirst, expectedSecond] = mockProps.topics;
+        const [first, dot, second] = spans;
+        expect(first.textContent).toBe(expectedFirst);
+        expect(second.textContent).toBe(expectedSecond);
+        expect(dot.classList).toContain("dot-separator");
+
+        return expect(component).toBeAccessible();
+    });
+
+    it("doesn't render any span if list is empty", () => {
+        const component = render();
+        const spans: Array<HTMLElement> =
+            component.shadowRoot.querySelectorAll("span");
+        expect(spans).toHaveLength(0);
+    });
+});

package/src/modules/dx/topics/topics.css

@@ -0,0 +1,25 @@
+:host {
+    display: block;
+}
+
+.container {
+    align-items: center;
+    color: var(--dx-g-blue-vibrant-20);
+    font-size: var(--dx-g-text-xs);
+    font-family: var(--dx-g-font-display);
+    font-weight: var(--dx-g-font-demi);
+    display: flex;
+    gap: var(--dx-g-spacing-sm);
+    letter-spacing: 1px;
+    text-transform: uppercase;
+}
+
+.dot-separator {
+    --size: 4px;
+
+    height: var(--size);
+    width: var(--size);
+    background-color: var(--dx-g-blue-vibrant-20);
+    border-radius: 100%;
+    margin-bottom: 3px;
+}

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/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/{dx/minimalCard/minimalCard.ts → utils/archiveCard/archiveCard.ts}

@@ -1,25 +1,21 @@
 import { LightningElement, api } from "lwc";
-import { Color, LinkTarget } from "typings/custom";
+import { LinkTarget, Color } from "typings/custom";
 
 const MOBILE_QUERY = "(max-width: 640px)";
 
-export default class MinimalCard extends LightningElement {
+export abstract class ArchiveCard extends LightningElement {
     @api contentType: "Blog" | "Podcast" = "Blog";
     @api href!: string;
-    @api target: LinkTarget = "_self";
     @api title!: string;
+    @api target: LinkTarget = "_self";
 
     private matchMedia!: MediaQueryList;
-    private mobile = false;
+    protected mobile = false;
 
-    get badgeColor(): Color {
+    protected 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);
@@ -32,4 +28,8 @@ export default class MinimalCard extends LightningElement {
 
     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 = {