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

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

@@ -0,0 +1,111 @@
+import { html } from "lit-html";
+import mockProps from "./__tests__/mockProps";
+
+export default {
+    title: "dx/dx-card-grid",
+    component: "dx-card-grid"
+};
+
+const createStyles = () => html`
+    <style>
+        .docs-action-bar {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-end;
+        }
+
+        .docs-action-bar > .records-container {
+            margin-right: auto;
+        }
+
+        .docs-action-bar .filters-container {
+            display: flex;
+        }
+
+        .filter-checkbox-group,
+        .filter-button::part(container) {
+            --dx-c-checkbox-text-transform: capitalize;
+            text-transform: var(--dx-c-checkbox-text-transform);
+        }
+
+        .docs-action-bar .filters-container > *:not(:first-child),
+        .docs-search-input {
+            margin-left: var(--dx-g-spacing-sm);
+        }
+    </style>
+`;
+
+// prettier-ignore
+export const Base = () => html`
+    <dx-card-grid 
+        cards="${JSON.stringify(mockProps.cards)}"
+    ></dx-card-grid>
+`;
+
+export const PageSize = () => html`
+    <dx-card-grid
+        cards="${JSON.stringify(mockProps.cards)}"
+        page-size="12"
+    ></dx-card-grid>
+`;
+
+// We need to generate these cards this way because we can't for:each over stringified data for storybook
+const mockCards = mockProps.cards.map(
+    (item) => html`
+        <dx-card-docs
+            title="${item.title}"
+            body="${item.body}"
+            href="${item.href}"
+        >
+            <dx-button
+                variant="inline"
+                href="${item.href}"
+                if:false="${item.links}"
+            >
+                Read It
+            </dx-button>
+        </dx-card-docs>
+    `
+);
+
+export const SlottedFilters = () => html`
+    ${createStyles()}
+
+    <dx-card-grid cards="${JSON.stringify(mockProps.cards)}">
+        <div class="docs-action-bar" slot="filters">
+            <dx-popover width="max-content">
+                <dx-button
+                    class="filter-button"
+                    variant="tertiary"
+                    icon-symbol="chevrondown"
+                    slot="control"
+                >
+                    Products
+                </dx-button>
+                <dx-checkbox-group
+                    legend="Products"
+                    options="${JSON.stringify(mockProps.productList)}"
+                    slot="content"
+                    class="filter-checkbox-group"
+                ></dx-checkbox-group>
+            </dx-popover>
+            <dx-popover width="max-content">
+                <dx-button
+                    class="filter-button"
+                    variant="tertiary"
+                    icon-symbol="chevrondown"
+                    slot="control"
+                >
+                    Language
+                </dx-button>
+                <dx-radio-group
+                    legend="Languages"
+                    options="${JSON.stringify(mockProps.languageList)}"
+                    slot="content"
+                    class="filter-checkbox-group"
+                ></dx-radio-group>
+            </dx-popover>
+        </div>
+        <div slot="cards">${mockCards}</div>
+    </dx-card-grid>
+`;

package/src/modules/dx/cardGrid/cardGrid.ts

@@ -0,0 +1,140 @@
+import { LightningElement, api } from "lwc";
+
+export default class CardGrid extends LightningElement {
+    @api pageSize = 24;
+    @api searchDebounce = 500;
+    page = 1;
+
+    private searchTerm = "";
+    private matchDesktop!: MediaQueryList;
+    private matchMobile!: MediaQueryList;
+    private matchMobileSmall!: MediaQueryList;
+    private deviceType: "desktop" | "mobile" | "mobile-small" = "desktop";
+    private searchTimeout?: number;
+    private cards: any[] = [];
+
+    private get startingRecord() {
+        return this.page === 1
+            ? this.page
+            : (this.page - 1) * this.pageSize + 1;
+    }
+
+    private get endingRecord() {
+        const defaultEndingRecord = this.pageSize * this.page;
+        return defaultEndingRecord > this.cards.length
+            ? this.cards.length
+            : defaultEndingRecord;
+    }
+
+    private get totalPages() {
+        return Math.ceil(this.cards.length / this.pageSize);
+    }
+
+    private get hidePagination() {
+        return this.totalPages < 2;
+    }
+
+    private get emptyStateSubtitle() {
+        return (
+            "No results" +
+            (this.searchTerm !== "" ? ` for "${this.searchTerm}"` : "")
+        );
+    }
+
+    private get showEmptyState() {
+        return !this.cards.length;
+    }
+
+    private get tileColumns() {
+        return this.deviceType === "desktop" ? "three" : "two";
+    }
+
+    private get pagesToShow() {
+        return this.deviceType === "mobile-small" ? 3 : 5;
+    }
+
+    connectedCallback(): void {
+        this.matchDesktop = window.matchMedia("(min-width: 1024px)");
+        this.matchDesktop.addEventListener("change", this.handleDesktopView);
+
+        this.matchMobile = window.matchMedia(
+            "(min-width: 401px) and (max-width: 1023px)"
+        );
+        this.matchMobile.addEventListener("change", this.handleMobileView);
+
+        this.matchMobileSmall = window.matchMedia("(max-width: 340px)");
+        this.matchMobileSmall.addEventListener(
+            "change",
+            this.handleMobileSmallView
+        );
+
+        if (this.matchMobile.matches) {
+            this.deviceType = "mobile";
+        }
+        if (this.matchMobileSmall.matches) {
+            this.deviceType = "mobile-small";
+        }
+    }
+
+    disconnectedCallback(): void {
+        this.matchDesktop.removeEventListener("change", this.handleDesktopView);
+        this.matchMobile.removeEventListener("change", this.handleMobileView);
+        this.matchMobileSmall.removeEventListener(
+            "change",
+            this.handleMobileSmallView
+        );
+    }
+
+    renderedCallback(): void {
+        this.displayCurrentPage();
+    }
+
+    onSlotChange() {
+        const slots = Array.from(
+            this.template.querySelectorAll("slot")
+        ) as HTMLSlotElement[];
+        this.cards = Array.from(slots[1].assignedElements()[0].children);
+    }
+
+    handleDesktopView = (e: MediaQueryListEvent | MediaQueryList) => {
+        if (e.matches) {
+            this.deviceType = "desktop";
+        }
+    };
+
+    handleMobileView = (e: MediaQueryListEvent | MediaQueryList) => {
+        if (e.matches) {
+            this.deviceType = "mobile";
+        }
+    };
+
+    handleMobileSmallView = (e: MediaQueryListEvent | MediaQueryList) => {
+        if (e.matches) {
+            this.deviceType = "mobile-small";
+        }
+    };
+
+    handleSearchChange(event: InputEvent): void {
+        window.clearTimeout(this.searchTimeout);
+        this.searchTimeout = window.setTimeout(() => {
+            this.dispatchEvent(
+                new CustomEvent("searchchange", { detail: event.detail })
+            );
+        }, this.searchDebounce);
+    }
+
+    goToPage(e: CustomEvent) {
+        this.page = e.detail;
+        this.displayCurrentPage();
+    }
+
+    displayCurrentPage() {
+        const cardContainer = this.template.querySelector(".card-container");
+        if (cardContainer) {
+            cardContainer.innerHTML = "";
+            this.cards
+                .slice(this.startingRecord - 1, this.endingRecord)
+                .map((node) => cardContainer?.appendChild(node));
+        }
+    }
+}

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

@@ -0,0 +1,87 @@
+import CardMinimal from "dx/cardMinimal";
+import TypeBadge from "dx/typeBadge";
+import { createRenderComponent } from "utils-internal/tests";
+import { createMediaMock } from "utils-internal/jest";
+import { blogPostMock, podcastEpisodeMock } from "./mockProps";
+
+const MOBILE_QUERY = "(max-width: 640px)";
+const TAG = "dx-card-minimal";
+const render = createRenderComponent(TAG, CardMinimal);
+
+describe(TAG, () => {
+    describe("default render", () => {
+        beforeAll(() => {
+            window.matchMedia = createMediaMock();
+        });
+
+        it("renders a blog post", () => {
+            const component = render(blogPostMock);
+            const link: HTMLAnchorElement =
+                component.shadowRoot.querySelector("a");
+            expect(link).not.toBeNull();
+            expect(link.href).toMatch(blogPostMock.href);
+            expect(link.target).toBe("_self");
+
+            const heading = link.querySelector("h4");
+            expect(heading).not.toBeNull();
+            expect(heading?.textContent).toBe(blogPostMock.title);
+
+            const typeBadge: TypeBadge =
+                component.shadowRoot.querySelector("dx-type-badge");
+            expect(typeBadge).not.toBeNull();
+            expect(typeBadge.value).toBe("Blog");
+            expect(typeBadge.color).toBe("teal");
+            expect(typeBadge.size).toBe("default");
+
+            expect(window.matchMedia).toBeCalledTimes(1);
+            expect(window.matchMedia).toBeCalledWith(MOBILE_QUERY);
+
+            return expect(component).toBeAccessible();
+        });
+
+        it("renders a podcast episode with target blank", () => {
+            const target = "_blank";
+            const component = render({ ...podcastEpisodeMock, target });
+            const link: HTMLAnchorElement =
+                component.shadowRoot.querySelector("a");
+            expect(link).not.toBeNull();
+            expect(link.href).toMatch(podcastEpisodeMock.href);
+            expect(link.target).toBe(target);
+
+            const heading = link.querySelector("h4");
+            expect(heading).not.toBeNull();
+            expect(heading?.textContent).toBe(podcastEpisodeMock.title);
+
+            const typeBadge: TypeBadge =
+                component.shadowRoot.querySelector("dx-type-badge");
+            expect(typeBadge).not.toBeNull();
+            expect(typeBadge.value).toBe(podcastEpisodeMock.contentType);
+            expect(typeBadge.color).toBe("blue");
+            expect(typeBadge.size).toBe("default");
+
+            expect(window.matchMedia).toBeCalledTimes(1);
+            expect(window.matchMedia).toBeCalledWith(MOBILE_QUERY);
+
+            return expect(component).toBeAccessible();
+        });
+    });
+    describe("render mobile", () => {
+        beforeAll(() => {
+            window.matchMedia = createMediaMock(true);
+        });
+
+        it("renders dx-type-badge as small", () => {
+            const component = render(podcastEpisodeMock);
+            const typeBadge =
+                component.shadowRoot.querySelector("dx-type-badge");
+            expect(typeBadge).not.toBeNull();
+            expect(typeBadge.value).toBe(podcastEpisodeMock.contentType);
+            expect(typeBadge.color).toBe("blue");
+            expect(typeBadge.size).toBe("small");
+            expect(window.matchMedia).toBeCalledTimes(1);
+            expect(window.matchMedia).toBeCalledWith(MOBILE_QUERY);
+
+            return expect(component).toBeAccessible();
+        });
+    });
+});

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

@@ -0,0 +1,10 @@
+export const blogPostMock = {
+    title: "Lightning Web Components for Your Inbox",
+    href: "/awesome-post"
+};
+
+export const podcastEpisodeMock = {
+    title: "Episode 100: Trailhead Engineering with Jeff Douglas",
+    href: "/awesome-episode",
+    contentType: "Podcast"
+};

package/src/modules/dx/cardMinimal/cardMinimal.css

@@ -0,0 +1,31 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+:host {
+    display: block;
+}
+
+a {
+    --dx-c-max-lines: var(--dx-c-title-max-lines, 3);
+
+    color: var(--dx-g-blue-vibrant-50);
+    flex-grow: 1;
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-sm);
+    font-weight: var(--dx-g-font-demi);
+}
+
+a:hover {
+    color: var(--dx-g-blue-vibrant-40);
+}
+
+a + * {
+    margin-left: var(--dx-g-spacing-sm);
+}
+
+.card-container {
+    align-items: center;
+    border-bottom: 1px solid var(--sds-g-gray-4);
+    display: flex;
+    padding: var(--dx-g-spacing-smd) 0;
+}

package/src/modules/dx/cardMinimal/cardMinimal.html

@@ -0,0 +1,13 @@
+<template>
+    <div class="card-container">
+        <a class="dx-text-truncate" href={href} target={target}>
+            <h4>{title}</h4>
+        </a>
+        <dx-type-badge
+            color={badgeColor}
+            size={badgeSize}
+            type="content-type"
+            value={contentType}
+        ></dx-type-badge>
+    </div>
+</template>

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

@@ -0,0 +1,32 @@
+import { html } from "lit-html";
+import { blogPostMock, podcastEpisodeMock } from "./__tests__/mockProps";
+
+export default {
+    title: "dx/dx-card-minimal",
+    component: "dx-card-minimal"
+};
+
+export const BlogPost = (args: { title: string; href: string }) => html`
+    <dx-card-minimal
+        title="${args.title}"
+        href="${args.href}"
+    ></dx-card-minimal>
+`;
+
+BlogPost.args = {
+    title: blogPostMock.title,
+    href: blogPostMock.href
+};
+
+export const PodcastEpisode = (args: { title: string; href: string }) => html`
+    <dx-card-minimal
+        title="${args.title}"
+        href="${args.href}"
+        content-type="${podcastEpisodeMock.contentType}"
+    ></dx-card-minimal>
+`;
+
+PodcastEpisode.args = {
+    title: podcastEpisodeMock.title,
+    href: podcastEpisodeMock.href
+};

package/src/modules/dx/cardMinimal/cardMinimal.ts

@@ -0,0 +1,3 @@
+import { ArchiveCard } from "utils-internal/archiveCard";
+
+export default class MinimalCard extends ArchiveCard {}

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

@@ -0,0 +1,58 @@
+import CardNews from "dx/cardNews";
+import { createRenderComponent } from "utils-internal/tests";
+import mockProps from "./mockProps";
+
+const TAG = "dx-card-news";
+const render = createRenderComponent(TAG, CardNews);
+
+describe(TAG, () => {
+    it("renders the link, title, body and button", () => {
+        const element = render(mockProps);
+
+        const els = ["a", "h3", "p", "dx-button"].map((query) =>
+            element.shadowRoot.querySelector(query)
+        );
+
+        expect(els).not.toContain(null);
+
+        return expect(element).toBeAccessible();
+    });
+
+    it("renders the image when present", () => {
+        const props = mockProps;
+        props.imgAlt = "Vector image of a lake and a mountain.";
+        props.imgSrc = "/assets/svg/dsc-home-news-bear.svg";
+
+        const element = render(props);
+
+        const els = ["img"].map((query) =>
+            element.shadowRoot.querySelector(query)
+        );
+
+        expect(els).not.toContain(null);
+
+        return expect(element).toBeAccessible();
+    });
+
+    it("renders with vertical align and container width large", () => {
+        const element = render({
+            ...mockProps,
+            dark: true,
+            imgAlt: "Vector image of a lake and a mountain.",
+            imgSrc: "/assets/svg/dsc-home-news-bear.svg",
+            textContainerWidth: "large",
+            imgVerticalAlign: "bottom"
+        });
+
+        const link: HTMLElement =
+            element.shadowRoot.querySelector(".dx-card-news");
+        const image: HTMLElement = element.shadowRoot.querySelector("img");
+        expect(link.classList).toContain("is-dark");
+        expect(image.classList).toContain(
+            "dx-card-news-img-vertical-align-bottom"
+        );
+        expect(image.classList).toContain("dx-card-news-img-small");
+
+        return expect(element).toBeAccessible();
+    });
+});

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

@@ -0,0 +1,7 @@
+export default {
+    href: "https://salesforce.com",
+    title: "Salesforce Developer Survey",
+    body: "Share your insights to help us improve your developer experience",
+    backgroundColor: "indigo-vibrant-20",
+    buttonText: "Take the Survey"
+};

package/src/modules/dx/cardNews/cardNews.css

@@ -0,0 +1,159 @@
+@import "helpers/reset";
+@import "helpers/text";
+@import "helpers/card";
+
+.dx-card-news {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    flex-direction: column;
+    justify-content: flex-start;
+    box-shadow: var(--dx-g-box-shadow-sm);
+}
+
+.text {
+    flex-grow: 1;
+    padding: var(--dx-g-card-padding) 24px 0 20px;
+    z-index: 1;
+}
+
+.dx-text-heading-3 {
+    margin: 4px 0 4px 0;
+    color: inherit;
+}
+
+p {
+    font-size: 16px;
+    letter-spacing: 0.15px;
+    line-height: 24px;
+}
+
+.cta {
+    margin: 16px 0;
+}
+
+img {
+    display: none;
+    margin: 0;
+}
+
+.dx-card-size-large .dx-text-heading-3 {
+    font-size: 30px;
+    letter-spacing: 0.3px;
+    line-height: 40px;
+    margin: 4px 0 10px 0;
+}
+
+.dx-card-size-large p {
+    letter-spacing: 0.2px;
+}
+
+.dx-card-size-large .cta {
+    margin: var(--dx-g-spacing-lg) 0;
+}
+
+.dx-card-size-large img {
+    display: block;
+}
+
+.is-dark dx-button {
+    --dx-c-button-inline-color-hover: var(--dx-g-blue-vibrant-60);
+}
+
+@media screen and (min-width: 1024px) {
+    .text {
+        padding: var(--dx-g-spacing-lg);
+    }
+
+    .dx-card-news {
+        position: relative;
+        min-height: 380px;
+        display: flex;
+        align-items: stretch;
+        justify-content: flex-start;
+        box-shadow: var(--dx-g-box-shadow-sm);
+    }
+
+    .dx-text-heading-3 {
+        letter-spacing: 0.1px;
+    }
+
+    img,
+    .text {
+        display: block;
+    }
+
+    .dx-card-news-img-placement-top {
+        flex-direction: column-reverse;
+    }
+
+    .dx-card-news-img-placement-bottom {
+        flex-direction: column;
+    }
+
+    .dx-card-news-img-placement-right .text {
+        max-width: 50%;
+    }
+
+    .dx-card-news-img-placement-right .text.large {
+        max-width: 75%;
+    }
+
+    /* Pushed to the right, centered vertically */
+    .dx-card-news-img-placement-right img {
+        position: absolute;
+        width: 100%;
+        right: 0;
+        max-width: 50%;
+    }
+
+    .dx-card-size-normal .dx-text-heading-3 {
+        font-size: var(--dx-g-text-xl);
+        line-height: 28px;
+    }
+
+    .dx-card-size-normal p {
+        letter-spacing: 0.2px;
+        margin: 12px 0 0 0;
+    }
+
+    .dx-card-size-normal .cta {
+        margin: 14px 0 -2px 0;
+    }
+
+    .dx-card-size-large .dx-text-heading-3 {
+        font-size: var(--dx-g-text-2xl);
+        line-height: 40px;
+        letter-spacing: 0.6px;
+        margin: 10px 0 0 0;
+    }
+
+    .dx-card-size-large p {
+        font-size: 20px;
+        line-height: 32px;
+        margin: 10px 0 0 0;
+        letter-spacing: 0.72px;
+    }
+
+    .dx-card-size-large .cta {
+        margin: 24px 0 0 0;
+    }
+
+    .dx-card-news-img-vertical-align-middle {
+        top: 50%;
+        transform: translate(0, -50%);
+    }
+
+    .dx-card-news-img-vertical-align-bottom {
+        bottom: 0;
+    }
+
+    .dx-card-news-img-vertical-align-top {
+        top: 0;
+    }
+
+    .dx-card-news-img-placement-right img.dx-card-news-img-small,
+    .dx-card-news-img-small {
+        max-width: 25%;
+    }
+}

package/src/modules/dx/cardNews/cardNews.html

@@ -0,0 +1,37 @@
+<template>
+    <a
+        class={className}
+        href={href}
+        target={target}
+        style={style}
+        part="container"
+    >
+        <div class={textContainerClassName}>
+            <h3 class="dx-text-heading-3">{title}</h3>
+            <p>{body}</p>
+            <div class="cta">
+                <dx-button if:true={hasLargeButton} size="large">
+                    {buttonText}
+                </dx-button>
+
+                <dx-button
+                    if:false={hasLargeButton}
+                    variant="inline"
+                    icon-symbol="forward"
+                >
+                    {buttonText}
+                </dx-button>
+            </div>
+        </div>
+        <img
+            if:true={imgSrc}
+            alt={imgAlt}
+            aria-label={imgAlt}
+            role="img"
+            src={imgSrc}
+            class={imgClassName}
+            style={imgStyle}
+            part="image"
+        />
+    </a>
+</template>