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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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