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

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

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

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

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

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

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

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

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

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

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

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

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

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

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