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

package/src/modules/dx/cardBlogPost/cardBlogPost.ts

@@ -0,0 +1,23 @@
+import { LightningElement, api } from "lwc";
+
+export default class CardBlogPost extends LightningElement {
+    @api authorHref?: string | null = null;
+    @api authorImgSrc!: string | null;
+    @api authorLabel!: string | null;
+    @api body!: string;
+    @api datetime!: string;
+    @api dateTime?: string | null = null;
+    @api featured?: boolean = false;
+    @api href!: string;
+    @api imgAlt?: string;
+    @api imgSrc?: string | null;
+    @api label?: string;
+    @api target?: string | null = null;
+    @api title!: string;
+
+    // LWC is being compiled so that datetime is being interpreted as date-time
+    // ONLY from from the implementation in dx-card-blog-post-provider
+    private get _datetime() {
+        return this.datetime || this.dateTime;
+    }
+}

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

@@ -0,0 +1,34 @@
+import CardBlogPostProvider from "dx/cardBlogPostProvider";
+import { createRenderComponent } from "utils-internal/tests";
+import mockWordpressPosts from "./mockWordpressPosts";
+
+const delay = () => new Promise((res) => setTimeout(res, 0));
+
+const TAG = "dx-card-blog-post-provider";
+const render = createRenderComponent(TAG, CardBlogPostProvider);
+
+beforeEach(() => {
+    const mockFetchPromise = Promise.resolve({
+        json: () => Promise.resolve(mockWordpressPosts),
+        status: 200
+    });
+    // @ts-ignore
+    jest.spyOn(global, "fetch").mockImplementation(() => mockFetchPromise);
+});
+
+describe(TAG, () => {
+    it("renders the correct number of posts (and doesnt blow up with a payload missing deeply nested items)", async () => {
+        const element = render();
+
+        expect(global.fetch).toHaveBeenCalledTimes(1);
+        expect(global.fetch).toHaveBeenCalledWith("/blogs/api?maxResults=6");
+
+        await delay();
+
+        const els = element.shadowRoot.querySelectorAll("dx-card-blog-post");
+
+        expect(els.length).toEqual(mockWordpressPosts.posts.length);
+
+        return expect(element).toBeAccessible();
+    });
+});

package/src/modules/dx/cardBlogPostProvider/__tests__/mockWordpressPosts.ts

@@ -0,0 +1,44 @@
+export default {
+    posts: [
+        {
+            date: "2021-03-04T17:00:05",
+            description:
+                "In Winter ‘20 we introduced the ability to schedule a flow, which allows you to run a certain flow on a daily basis, for example. With Spring ’21, we take it a step further by introducing scheduled paths inside of a flow.",
+            id: 19554,
+            originalUrl:
+                "https://developer.salesforce.com/blogs/2021/03/schedule-your-path-in-salesforce-flow.html",
+            title: "Schedule Your Path in Salesforce Flow",
+            url: "/blogs/2021/03/schedule-your-path-in-salesforce-flow.html"
+        },
+        {
+            date: "2021-03-04T17:00:05",
+            description:
+                "In Winter ‘20 we introduced the ability to schedule a flow, which allows you to run a certain flow on a daily basis, for example. With Spring ’21, we take it a step further by introducing scheduled paths inside of a flow.",
+            id: 1954,
+            originalUrl:
+                "https://developer.salesforce.com/blogs/2021/03/schedule-your-path-in-salesforce-flow.html",
+            title: "Schedule Your Path in Salesforce Flow",
+            url: "/blogs/2021/03/schedule-your-path-in-salesforce-flow.html"
+        },
+        {
+            date: "2021-03-04T17:00:05",
+            description:
+                "In Winter ‘20 we introduced the ability to schedule a flow, which allows you to run a certain flow on a daily basis, for example. With Spring ’21, we take it a step further by introducing scheduled paths inside of a flow.",
+            id: 14,
+            originalUrl:
+                "https://developer.salesforce.com/blogs/2021/03/schedule-your-path-in-salesforce-flow.html",
+            title: "Schedule Your Path in Salesforce Flow",
+            url: "/blogs/2021/03/schedule-your-path-in-salesforce-flow.html"
+        },
+        {
+            date: "2021-03-04T17:00:05",
+            description:
+                "In Winter ‘20 we introduced the ability to schedule a flow, which allows you to run a certain flow on a daily basis, for example. With Spring ’21, we take it a step further by introducing scheduled paths inside of a flow.",
+            id: 4,
+            originalUrl:
+                "https://developer.salesforce.com/blogs/2021/03/schedule-your-path-in-salesforce-flow.html",
+            title: "Schedule Your Path in Salesforce Flow",
+            url: "/blogs/2021/03/schedule-your-path-in-salesforce-flow.html"
+        }
+    ]
+};

package/src/modules/dx/cardBlogPostProvider/cardBlogPostProvider.css

@@ -0,0 +1,3 @@
+:host {
+    display: contents;
+}

package/src/modules/dx/cardBlogPostProvider/cardBlogPostProvider.html

@@ -0,0 +1,16 @@
+<template>
+    <template for:each={posts} for:item="post">
+        <dx-card-blog-post
+            label="BLOG POST"
+            author-img-src={post.authorImgSrc}
+            author-label={post.authorName}
+            body={post.body}
+            datetime={post.datetime}
+            href={post.href}
+            img-alt={post.imgAlt}
+            img-src={post.imgSrc}
+            key={post.id}
+            title={post.title}
+        ></dx-card-blog-post>
+    </template>
+</template>

package/src/modules/dx/cardBlogPostProvider/cardBlogPostProvider.ts

@@ -0,0 +1,29 @@
+import { LightningElement, api, track } from "lwc";
+import { fetchWordpressPosts } from "utils-internal/wordpress";
+import { normalizePost } from "utils/normalizers";
+
+type BlogPost = {
+    body: string;
+    datetime: string;
+    href: string;
+    id: string;
+    title: string;
+};
+
+export default class CardBlogPostProvider extends LightningElement {
+    @api count?: string;
+
+    @track posts: BlogPost[] = [];
+
+    private fetchPosts = async () => {
+        this.posts = await fetchWordpressPosts(
+            "/blogs/api",
+            normalizePost,
+            this.count
+        );
+    };
+
+    connectedCallback() {
+        this.fetchPosts();
+    }
+}

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

@@ -0,0 +1,20 @@
+import CardCallout from "dx/cardCallout";
+import { createRenderComponent } from "utils-internal/tests";
+import mockProps from "./mockProps";
+
+const TAG = "dx-card-callout";
+const render = createRenderComponent(TAG, CardCallout);
+
+describe(TAG, () => {
+    it("renders the link, arrow icon, title, & label", () => {
+        const element = render(mockProps);
+
+        const els = ["a", "dx-icon", "h3", ".dx-text-button-light"].map(
+            (query) => element.shadowRoot.querySelector(query)
+        );
+
+        expect(els).not.toContain(null);
+
+        return expect(element).toBeAccessible();
+    });
+});

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

@@ -0,0 +1,7 @@
+export default {
+    backgroundColor: "indigo-vibrant-30",
+    color: "blue-vibrant-20",
+    href: "/build-stuff",
+    label: "Browse all build guides",
+    title: "Build exactly what you need."
+};

package/src/modules/dx/cardCallout/cardCallout.css

@@ -0,0 +1,57 @@
+@import "helpers/reset";
+@import "helpers/text";
+@import "helpers/card";
+
+.card-callout {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+/* in the callout card's case it needs to be subservient to the other items in the grid */
+.dx-card-base_override-width {
+    height: 100% !important;
+    min-height: unset !important;
+}
+
+/* title */
+
+.dx-text-heading-3 {
+    color: inherit;
+    margin-bottom: var(--dx-g-spacing-3xl);
+    overflow-wrap: hyphenate-word;
+    hyphens: overflow;
+}
+
+/* label */
+
+.dx-text-button-light {
+    color: inherit;
+    margin-top: auto;
+}
+
+/* callout arrow */
+
+dx-icon {
+    display: inline;
+    color: inherit;
+    margin-left: var(--dx-g-spacing-sm);
+}
+
+dx-icon::part(svg) {
+    transition: var(--dx-g-transition-transform-2x);
+}
+
+.card-callout:hover dx-icon::part(svg) {
+    transform: translate(var(--dx-g-spacing-xs));
+}
+
+.card-callout:active dx-icon::part(svg) {
+    transform: translate(var(--dx-g-spacing-2xs));
+}
+
+@media screen and (max-width: 1024px) {
+    .dx-text-heading-3 {
+        margin-bottom: var(--dx-g-spacing-xl);
+    }
+}

package/src/modules/dx/cardCallout/cardCallout.html

@@ -0,0 +1,15 @@
+<template>
+    <a
+        class={className}
+        href={href}
+        target={target}
+        style={style}
+        onclick={sendGtm}
+    >
+        <h3 class="dx-text-heading-3">{title}</h3>
+        <span class="dx-text-button-light">
+            {label}
+            <dx-icon symbol="forward"></dx-icon>
+        </span>
+    </a>
+</template>

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

@@ -0,0 +1,33 @@
+import { html } from "lit-html";
+
+export default {
+    title: "dx/dx-card-callout",
+    component: "dx-card-callout"
+};
+
+const createStyles = () => html`
+    <style>
+        dx-card-callout {
+            width: 400px;
+            max-width: 100%;
+            min-width: 240px;
+        }
+    </style>
+`;
+
+export const Base = () => html`
+    ${createStyles()}
+    <dx-card-callout
+        href="/build-stuff"
+        title="Find an upcoming event"
+        label="Calendar"
+    ></dx-card-callout>
+    <br />
+    <dx-card-callout
+        background-color="cloud-blue-vibrant-80"
+        color="blue-vibrant-20"
+        href="/build-stuff"
+        title="Find an upcoming event"
+        label="Calendar"
+    ></dx-card-callout>
+`;

package/src/modules/dx/cardCallout/cardCallout.ts

@@ -0,0 +1,37 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { toDxColor } from "utils-internal/css";
+import { track } from "dx/instrumentation";
+
+export default class CardCallout extends LightningElement {
+    @api backgroundColor?: string = "indigo-vibrant-40";
+    @api color?: string = "white";
+    @api href!: string;
+    @api label: string = "";
+    @api target?: string | null = null;
+    @api title!: string;
+
+    private get style(): string {
+        const background = `background-color: ${toDxColor(
+            this.backgroundColor
+        )};`;
+        const color = `color: ${toDxColor(this.color)};`;
+        return [background, color].join(" ");
+    }
+
+    private get className(): string {
+        return cx(
+            "card-callout",
+            "dx-card-base",
+            "dx-card-base_section-vertical"
+        );
+    }
+
+    private sendGtm(e: PointerEvent) {
+        track(e.currentTarget, "select_content", {
+            content_type: "callout",
+            item_title: this.title,
+            item_location: this.href
+        });
+    }
+}

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

@@ -0,0 +1,100 @@
+import CardContent from "dx/cardContent";
+import { createRenderComponent } from "utils-internal/tests";
+import mockProps from "./mockProps";
+import { isSlotEmpty } from "utils-internal/slot";
+
+const TAG = "dx-card-content";
+const render = createRenderComponent(TAG, CardContent);
+
+jest.mock("utils-internal/slot", () => {
+    return {
+        isSlotEmpty: jest.fn()
+    };
+});
+
+describe(TAG, () => {
+    it("renders", () => {
+        const element = render(mockProps);
+
+        const imagelink: HTMLElement =
+            element.shadowRoot.querySelector(".image-link");
+        const renderedLabel: HTMLElement =
+            element.shadowRoot.querySelector(".label");
+        const renderedTitle: HTMLElement =
+            element.shadowRoot.querySelector("dx-card-title");
+        const renderedSubtitle: HTMLElement =
+            element.shadowRoot.querySelector(".subtitle");
+        const renderedAuthor: HTMLElement =
+            element.shadowRoot.querySelector("dx-image-and-label");
+        const renderedBody: HTMLElement =
+            element.shadowRoot.querySelector(".body");
+
+        expect(imagelink).not.toBeNull();
+        expect(renderedLabel).not.toBeNull();
+        expect(renderedTitle).not.toBeNull();
+        expect(renderedSubtitle).not.toBeNull();
+        expect(renderedAuthor).not.toBeNull();
+        expect(renderedBody).not.toBeNull();
+
+        expect(renderedLabel.textContent).toEqual(mockProps.label);
+        expect(renderedTitle.title).toEqual(mockProps.title);
+        expect(renderedSubtitle.textContent).toEqual(mockProps.subtitle);
+        expect(renderedBody.textContent).toEqual(mockProps.body);
+
+        return expect(element).toBeAccessible();
+    });
+
+    it("fires events", () => {
+        const element = render(mockProps);
+
+        const imagelink: HTMLElement =
+            element.shadowRoot.querySelector(".image-link");
+        const containerDiv: HTMLElement =
+            element.shadowRoot.querySelector("div");
+        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 datetime slot", () => {
+        (isSlotEmpty as jest.Mock).mockReturnValue(false);
+        const element = render(mockProps);
+        const slot: HTMLSlotElement =
+            element.shadowRoot.querySelector("[name=datetime]");
+        const containerDiv: HTMLElement =
+            element.shadowRoot.querySelector("div");
+        slot.dispatchEvent(new Event("slotchange"));
+        expect(isSlotEmpty).toBeCalledTimes(1);
+
+        return Promise.resolve().then(() => {
+            expect(containerDiv.classList).not.toContain("hide-datetime");
+        });
+    });
+
+    it("set properly style classes", () => {
+        const element = render({
+            ...mockProps,
+            featured: true,
+            backgroundColor: "red"
+        });
+
+        const containerDiv: HTMLElement =
+            element.shadowRoot.querySelector("div");
+        const link: HTMLElement =
+            element.shadowRoot.querySelector("[part=image]");
+
+        expect(containerDiv.classList).toContain("dx-card-base_featured");
+        expect(link.getAttribute("style")).toContain("");
+    });
+});

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

@@ -0,0 +1,13 @@
+export default {
+    backgroundColor: "indigo-vibrant-30",
+    color: "blue-vibrant-20",
+    href: "/build-stuff",
+    label: "Browse all build guides",
+    title: "Build exactly what you need.",
+    authorImgSrc: "https://placekitten.com/300/300",
+    authorLabel: "Test",
+    body: "Set up, create, and customize a sample app using the Commerce API.",
+    imgAlt: "Test Cat",
+    imgSrc: "https://i.imgur.com/FUsyxR5.jpg",
+    subtitle: "Test"
+};

package/src/modules/dx/cardContent/cardContent.css

@@ -0,0 +1,52 @@
+@import "helpers/reset";
+@import "helpers/text";
+@import "helpers/card";
+
+:host {
+    /* because this is used within other cards */
+    height: 100%;
+}
+
+.card-content {
+    display: flex;
+    justify-content: flex-start;
+}
+
+.card-content:not(.dx-card-base_layout-horizontal) {
+    flex-direction: column;
+}
+
+.hide-datetime .datetime {
+    display: none;
+}
+
+.hide-datetime .body {
+    margin-bottom: 0 !important;
+}
+
+/* mobile responsiveness */
+
+@media screen and (max-width: 1024px) {
+    .card-content:not(.dx-card-base_featured) {
+        flex-direction: row;
+    }
+
+    .card-content:not(.dx-card-base_featured) .image-link {
+        margin-right: var(--dx-g-card-img-spacing);
+        margin-bottom: unset;
+        flex-shrink: 0;
+        height: 80px;
+        width: 80px;
+        padding-top: unset;
+    }
+
+    .card-content.has-image:not(.dx-card-base_featured)
+        dx-image-and-label::part(image) {
+        display: none;
+    }
+
+    .card-content:not(.dx-card-base_featured) .label,
+    .card-content:not(.dx-card-base_featured) .datetime {
+        display: none;
+    }
+}

package/src/modules/dx/cardContent/cardContent.html

@@ -0,0 +1,59 @@
+<template>
+    <div class={className}>
+        <a
+            if:true={hasImage}
+            href={href}
+            onmouseenter={setLinkHovered}
+            onmouseleave={setLinkInactive}
+            target={target}
+            part="image"
+            class="image-link dx-card-base_borderless-image_link"
+            aria-label={imgLinkAriaLabel}
+            style={backgroundStyle}
+        >
+            <slot name="image-badge"></slot>
+            <img
+                if:true={imgSrc}
+                alt={imgAlt}
+                class="image dx-card-base_image dx-card-base_borderless-image"
+                src={imgSrc}
+            />
+        </a>
+        <div
+            class="dx-card-base_section-vertical dx-card-base_column card_section-text"
+        >
+            <span if:true={label} part="label" class="label dx-text-label-3">
+                {label}
+            </span>
+            <dx-card-title
+                href={href}
+                target={target}
+                onmouseenter={setLinkHovered}
+                onmouseleave={setLinkInactive}
+                title={title}
+            ></dx-card-title>
+            <span
+                class="subtitle dx-text-label-1-dark"
+                if:true={subtitle}
+                part="subtitle"
+            >
+                {subtitle}
+            </span>
+            <dx-image-and-label
+                if:true={hasAuthor}
+                href={authorHref}
+                img-src={authorImgSrc}
+                label={authorLabel}
+            ></dx-image-and-label>
+            <span if:true={body} class="body dx-text-body-2" part="body">
+                {body}
+            </span>
+            <span class="datetime dx-text-body-3" part="datetime">
+                <slot
+                    name="datetime"
+                    onslotchange={onDatetimeSlotChange}
+                ></slot>
+            </span>
+        </div>
+    </div>
+</template>