@salesforcedevs/dx-components 0.26.1-alpha0.4 → 0.26.2

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

@@ -0,0 +1,153 @@
+import { html } from "lit-html";
+
+export default {
+    title: "dx/dx-card-event",
+    component: "dx-card-event"
+};
+
+const startDatetime = new Date(0, 0, 1, 9, 0, 0).toISOString();
+const endDatetime = new Date(0, 0, 1, 12, 0, 0).toISOString();
+
+const createStyles = () => html`
+    <style>
+        dx-card-event {
+            width: 400px;
+            max-width: 100%;
+            min-width: 240px;
+            margin-bottom: 48px;
+        }
+
+        #horiz {
+            width: unset;
+        }
+    </style>
+`;
+
+export const Base = () => html`
+    ${createStyles()}
+
+    <dx-card-event
+        href="www.google.com"
+        location="San Francisco"
+        start-datetime="${startDatetime}"
+        end-datetime="${endDatetime}"
+        title="Virtual Event: Salesforce Life for Financial Services"
+        img-alt="Scenic view of a mountain."
+        img-src="https://i.imgur.com/FUsyxR5.jpg"
+        short-description="Dev Talkies is back in June! Kris Lande, SVP Trailhead Marketing and Trailblazer Relations at Salesforce, is joining us to inspire you and give you an exclusive peek into TrailheaDX."
+        type="Webinar"
+    ></dx-card-event>
+
+    <dx-card-event
+        href="www.google.com"
+        location="San Francisco"
+        start-datetime="${startDatetime}"
+        end-datetime="${endDatetime}"
+        id="horiz"
+        layout="horizontal"
+        title="Virtual Event: Salesforce Life for Financial Services"
+        img-alt="Scenic view of a mountain."
+        img-src="https://i.imgur.com/FUsyxR5.jpg"
+        short-description="Dev Talkies is back in June! Kris Lande, SVP Trailhead Marketing and Trailblazer Relations at Salesforce, is joining us to inspire you and give you an exclusive peek into TrailheaDX."
+        type="Live Event"
+    ></dx-card-event>
+
+    <dx-card-event
+        href="www.google.com"
+        location="San Francisco"
+        start-datetime="${startDatetime}"
+        title="Virtual Event: Salesforce Life for Financial Services"
+        img-alt="Scenic view of a mountain."
+        img-src="https://i.imgur.com/FUsyxR5.jpg"
+        featured="true"
+        short-description="Dev Talkies is back in June! Kris Lande, SVP Trailhead Marketing and Trailblazer Relations at Salesforce, is joining us to inspire you and give you an exclusive peek into TrailheaDX."
+    ></dx-card-event>
+`;
+
+// prettier-ignore
+export const Grid = () => html`
+    <dx-grid columns="three">
+        <dx-card-event
+            href="www.google.com"
+            end-datetime="${endDatetime}"
+            location="San Francisco"
+            start-datetime="${startDatetime}"
+            title="Virtual Event: Salesforce Life for Financial Services"
+            img-alt="Scenic view of a mountain."
+            img-src="https://i.imgur.com/FUsyxR5.jpg"
+        ></dx-card-event>
+        <dx-card-event
+            href="www.google.com"
+            end-datetime="${endDatetime}"
+            location="San Francisco"
+            start-datetime="${startDatetime}"
+            title="Virtual Event: Salesforce Life for Financial Services"
+            img-alt="Scenic view of a mountain."
+            img-src="https://i.imgur.com/FUsyxR5.jpg"
+        ></dx-card-event>
+        </dx-card-small>
+        <dx-card-event
+            href="www.google.com"
+            end-datetime="${endDatetime}"
+            location="San Francisco"
+            start-datetime="${startDatetime}"
+            title="Virtual Event: Salesforce Life for Financial Services"
+            img-alt="Scenic view of a mountain."
+            img-src="https://i.imgur.com/FUsyxR5.jpg"
+        ></dx-card-event>
+        </dx-card-small>
+        <dx-card-event
+            href="www.google.com"
+            end-datetime="${endDatetime}"
+            location="San Francisco"
+            start-datetime="${startDatetime}"
+            title="Virtual Event: Salesforce Life for Financial Services"
+            img-alt="Scenic view of a mountain."
+            img-src="https://i.imgur.com/FUsyxR5.jpg"
+        ></dx-card-event>
+        <dx-card-event
+            href="www.google.com"
+            end-datetime="${endDatetime}"
+            location="San Francisco"
+            start-datetime="${startDatetime}"
+            title="Virtual Event: Salesforce Life for Financial Services"
+            img-alt="Scenic view of a mountain."
+            img-src="https://i.imgur.com/FUsyxR5.jpg"
+        ></dx-card-event>
+        </dx-card-small>
+        <dx-card-event
+            href="www.google.com"
+            end-datetime="${endDatetime}"
+            location="San Francisco"
+            start-datetime="${startDatetime}"
+            title="Virtual Event: Salesforce Life for Financial Services"
+            img-alt="Scenic view of a mountain."
+            img-src="https://i.imgur.com/FUsyxR5.jpg"
+        ></dx-card-event>
+        </dx-card-small>
+        <dx-card-event
+            href="www.google.com"
+            end-datetime="${endDatetime}"
+            location="San Francisco"
+            start-datetime="${startDatetime}"
+            title="Virtual Event: Salesforce Life for Financial Services"
+            img-alt="Scenic view of a mountain."
+            img-src="https://i.imgur.com/FUsyxR5.jpg"
+        ></dx-card-event>
+        <dx-card-event
+            href="www.google.com"
+            end-datetime="${endDatetime}"
+            location="San Francisco"
+            start-datetime="${startDatetime}"
+            title="Virtual Event: Salesforce Life for Financial Services"
+            img-alt="Scenic view of a mountain."
+            img-src="https://i.imgur.com/FUsyxR5.jpg"
+        ></dx-card-event>
+        <dx-card-callout
+            background-color="indigo-vibrant-30"
+            href="/build-stuff"
+            title="Find an upcoming event"
+            label="Calendar"
+        ></dx-card-callout>
+    </dx-grid>
+`;

package/src/modules/dx/cardEvent/cardEvent.ts

@@ -0,0 +1,42 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+
+export default class CardEvent extends LightningElement {
+    @api endDatetime?: string | null = null;
+    @api featured?: boolean = false;
+    @api href!: string;
+    @api imgAlt?: string = "";
+    @api imgSrc?: string | null = null;
+    @api layout: "vertical" | "horizontal" = "vertical";
+    @api location?: string | null = null;
+    @api startDatetime!: string;
+    @api target: string = "_blank";
+    @api title!: string;
+    @api shortDescription?: string;
+    @api type?: string;
+
+    private isLinkHovered: boolean = false;
+
+    private get className() {
+        return cx(
+            "card-event",
+            "dx-card-base",
+            "dx-card-base_borderless",
+            `dx-card-base_layout-${this.layout}`,
+            this.featured && "dx-card-base_featured",
+            this.isLinkHovered && "dx-card-base_link-hovered"
+        );
+    }
+
+    private setLinkHovered() {
+        this.isLinkHovered = true;
+    }
+
+    private setLinkInactive() {
+        this.isLinkHovered = false;
+    }
+
+    private get brandType() {
+        return this.type === "Webinar" ? "green" : "red";
+    }
+}

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-internal/jest";
+import { createRenderComponent } from "utils-internal/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-internal/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");
+    }
+}