@salesforcedevs/dx-components 0.26.1-alpha0.2 → 0.26.1-alpha0.3

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

@@ -1,153 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,193 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,49 +0,0 @@
-@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

@@ -1,37 +0,0 @@
-<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

@@ -1,59 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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");
-    }
-}