@salesforcedevs/dx-components 0.26.1-alpha.11 → 0.26.1-alpha.16

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

@@ -1,95 +0,0 @@
-/* eslint-disable jest/no-mocks-import */
-import CardEvent from "dx/cardEvent";
-import { createRenderComponent } from "utils-internal/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-card-event";
-const render = createRenderComponent(TAG, CardEvent);
-
-describe(TAG, () => {
-    it("renders the date", () => {
-        const component = render(mockProps);
-        const dateEl = component.shadowRoot.querySelector(".card-event");
-        expect(dateEl).not.toBeNull();
-        return expect(component).toBeAccessible();
-    });
-
-    it("doesn't render end datetime ui if property not provided", () => {
-        const component = render({
-            title: mockProps.title,
-            startDatetime: mockProps.startDatetime,
-            hre: mockProps.href
-        });
-        const endtimeEls =
-            component.shadowRoot.querySelectorAll(".end-date-time");
-        expect(endtimeEls.length).toEqual(0);
-        return expect(component).toBeAccessible();
-    });
-
-    it("renders the correct number of date time components", () => {
-        const component = render(mockProps);
-        const datetimeEl = component.shadowRoot.querySelectorAll(
-            "dx-formatted-date-time"
-        );
-        expect(datetimeEl.length).toEqual(5);
-        return expect(component).toBeAccessible();
-    });
-
-    it("fires events", () => {
-        const element = render({
-            ...mockProps,
-            imgSrc: "https://i.imgur.com/FUsyxR5.jpg",
-            featured: true
-        });
-
-        const imagelink: HTMLElement =
-            element.shadowRoot.querySelector(".image-link");
-        const containerDiv: HTMLElement =
-            element.shadowRoot.querySelector("div");
-
-        expect(containerDiv.classList).toContain("dx-card-base_featured");
-
-        imagelink.dispatchEvent(new CustomEvent("mouseenter"));
-
-        return Promise.resolve()
-            .then(() => {
-                expect(containerDiv.classList).toContain(
-                    "dx-card-base_link-hovered"
-                );
-                imagelink.dispatchEvent(new CustomEvent("mouseleave"));
-            })
-            .then(() => {
-                expect(containerDiv.classList).not.toContain(
-                    "dx-card-base_link-hovered"
-                );
-            });
-    });
-
-    it("renders the short description", () => {
-        const component = render(mockProps);
-        const shortDescEl =
-            component.shadowRoot.querySelector(".dx-text-body-2");
-        expect(shortDescEl).not.toBeNull();
-        return expect(component).toBeAccessible();
-    });
-
-    it("renders a badge when type is set", () => {
-        const component = render({
-            ...mockProps,
-            type: "Webinar"
-        });
-        const badgeEl = component.shadowRoot.querySelector("dx-type-badge");
-        expect(badgeEl).not.toBeNull();
-        return expect(component).toBeAccessible();
-    });
-
-    it("renders a subtitle when location is set", () => {
-        const component = render({
-            ...mockProps,
-            location: "YOUTUBE LIVE"
-        });
-        const subtitleEl = component.shadowRoot.querySelector(".subtitle");
-        expect(subtitleEl).not.toBeNull();
-        return expect(component).toBeAccessible();
-    });
-});

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

@@ -1,10 +0,0 @@
-const startDatetime = new Date(0, 0, 1, 9, 0, 0).toISOString();
-const endDatetime = new Date(0, 0, 1, 12, 0, 0).toISOString();
-
-export default {
-    title: "Virtual Event: Salesforce Life for Financial Services",
-    startDatetime: startDatetime,
-    endDatetime: endDatetime,
-    href: "www.salesforce.com",
-    shortDescription: "Virtual Event: Salesforce Life for Financial Services"
-};

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/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.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;