@salesforcedevs/dx-components 0.26.1 → 0.27.1

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

@@ -1,431 +0,0 @@
-export default [
-    {
-        title: "Heroku Dev Center",
-        body: "Learn about building, deploying, and managing your apps on Heroku.",
-        href: "https://devcenter.heroku.com/",
-        brand: "platform",
-        links: [
-            {
-                id: 1,
-                href: "https://devcenter.heroku.com/",
-                title: "Overview"
-            },
-            {
-                id: 1,
-                href: "https://devcenter.heroku.com/",
-                title: "Guides"
-            },
-            {
-                id: 1,
-                href: "https://devcenter.heroku.com/",
-                title: "References"
-            }
-        ]
-    },
-    {
-        title: "Lightning Web Components",
-        body: "Learn about building, deploying, and managing your apps on Heroku.",
-        href: "https://developer.salesforce.com/docs/component-library/overview/",
-        brand: "platform",
-        links: [
-            {
-                id: 1,
-                href: "https://devcenter.heroku.com/",
-                title: "Overview"
-            },
-            {
-                id: 1,
-                href: "https://devcenter.heroku.com/",
-                title: "Guides"
-            },
-            {
-                id: 1,
-                href: "https://devcenter.heroku.com/",
-                title: "References"
-            }
-        ]
-    },
-    {
-        title: "Lightning Design System",
-        body: "Create the World's Best Enterprise App Experiences using Salesforce Lightning Design System.",
-        href: "https://www.lightningdesignsystem.com/",
-        brand: "platform",
-        links: [
-            {
-                id: 1,
-                href: "https://devcenter.heroku.com/",
-                title: "Overview"
-            },
-            {
-                id: 1,
-                href: "https://devcenter.heroku.com/",
-                title: "Guides"
-            },
-            {
-                id: 1,
-                href: "https://devcenter.heroku.com/",
-                title: "References"
-            }
-        ]
-    },
-    {
-        title: "Commerce Cloud APIs",
-        body: "Unlock and integrate data from any system to deliver critical, time-sensitive projects with MuleSoft.",
-        href: "https://developer.commercecloud.com/s/",
-        brand: "commerce"
-    },
-    {
-        title: "MuleSoft Documentation",
-        body: "Explore documentation, APIs, resources, and discussion forums to Develop personalized commerce experiences on a fast, flexible platform.",
-        href: "https://docs.mulesoft.com/",
-        brand: "integration"
-    },
-    {
-        title: "Salesforce Extensions for VS Code",
-        body: "Use Salesforce Extensions for Visual Studio Code to optimize building and debugging code on the Salesforce Platform. From the VS Studio code editor, work seamlessly with scratch orgs, sandboxes, and DE orgs, and code intelligently with Apex, Lightning components, and Visualforce.",
-        href: "https://developer.salesforce.com/tools/vscode",
-        brand: "platform"
-    },
-    {
-        title: "Quip Developer Documentation",
-        body: "Make more intelligent, data-driven decisions that guide your business forward with Quip.",
-        href: "https://quip.com/dev",
-        brand: "collaboration"
-    },
-    {
-        title: "Tableau Help",
-        body: "Tableau brings together data from anywhere to empower your people everywhere.",
-        href: "https://help.tableau.com/",
-        brand: "analytics"
-    },
-    {
-        title: "Einstein Voice & Vision",
-        body: "Einstein Platform Services allows you to seamlessly integrate custom deep learning models into your CRM workflows.",
-        href: "https://metamind.readme.io",
-        brand: "platform"
-    },
-    {
-        title: "Lightning Web Components",
-        body: "Learn about building, deploying, and managing your apps on Heroku.",
-        href: "https://developer.salesforce.com/docs/component-library/overview/",
-        brand: "platform"
-    },
-    {
-        title: "Lightning Design System",
-        body: "Create the World's Best Enterprise App Experiences using Salesforce Lightning Design System.",
-        href: "https://www.lightningdesignsystem.com/",
-        brand: "platform"
-    },
-    {
-        title: "Commerce Cloud APIs",
-        body: "Unlock and integrate data from any system to deliver critical, time-sensitive projects with MuleSoft.",
-        href: "https://developer.commercecloud.com/s/",
-        brand: "commerce"
-    },
-    {
-        title: "MuleSoft Documentation",
-        body: "Explore documentation, APIs, resources, and discussion forums to Develop personalized commerce experiences on a fast, flexible platform.",
-        href: "https://docs.mulesoft.com/",
-        brand: "integration"
-    },
-    {
-        title: "Salesforce Extensions for VS Code",
-        body: "Use Salesforce Extensions for Visual Studio Code to optimize building and debugging code on the Salesforce Platform. From the VS Studio code editor, work seamlessly with scratch orgs, sandboxes, and DE orgs, and code intelligently with Apex, Lightning components, and Visualforce.",
-        href: "https://developer.salesforce.com/tools/vscode",
-        brand: "platform"
-    },
-    {
-        title: "Quip Developer Documentation",
-        body: "Make more intelligent, data-driven decisions that guide your business forward with Quip.",
-        href: "https://quip.com/dev",
-        brand: "collaboration"
-    },
-    {
-        title: "Tableau Help",
-        body: "Tableau brings together data from anywhere to empower your people everywhere.",
-        href: "https://help.tableau.com/",
-        brand: "analytics"
-    },
-    {
-        title: "Einstein Voice & Vision",
-        body: "Einstein Platform Services allows you to seamlessly integrate custom deep learning models into your CRM workflows.",
-        href: "https://metamind.readme.io",
-        brand: "platform"
-    },
-    {
-        title: "Lightning Web Components",
-        body: "Learn about building, deploying, and managing your apps on Heroku.",
-        href: "https://developer.salesforce.com/docs/component-library/overview/",
-        brand: "platform"
-    },
-    {
-        title: "Lightning Design System",
-        body: "Create the World's Best Enterprise App Experiences using Salesforce Lightning Design System.",
-        href: "https://www.lightningdesignsystem.com/",
-        brand: "platform"
-    },
-    {
-        title: "Commerce Cloud APIs",
-        body: "Unlock and integrate data from any system to deliver critical, time-sensitive projects with MuleSoft.",
-        href: "https://developer.commercecloud.com/s/",
-        brand: "commerce"
-    },
-    {
-        title: "MuleSoft Documentation",
-        body: "Explore documentation, APIs, resources, and discussion forums to Develop personalized commerce experiences on a fast, flexible platform.",
-        href: "https://docs.mulesoft.com/",
-        brand: "integration"
-    },
-    {
-        title: "Salesforce Extensions for VS Code",
-        body: "Use Salesforce Extensions for Visual Studio Code to optimize building and debugging code on the Salesforce Platform. From the VS Studio code editor, work seamlessly with scratch orgs, sandboxes, and DE orgs, and code intelligently with Apex, Lightning components, and Visualforce.",
-        href: "https://developer.salesforce.com/tools/vscode",
-        brand: "platform"
-    },
-    {
-        title: "Quip Developer Documentation",
-        body: "Make more intelligent, data-driven decisions that guide your business forward with Quip.",
-        href: "https://quip.com/dev",
-        brand: "collaboration"
-    },
-    {
-        title: "Tableau Help",
-        body: "Tableau brings together data from anywhere to empower your people everywhere.",
-        href: "https://help.tableau.com/",
-        brand: "analytics"
-    },
-    {
-        title: "Einstein Voice & Vision",
-        body: "Einstein Platform Services allows you to seamlessly integrate custom deep learning models into your CRM workflows.",
-        href: "https://metamind.readme.io",
-        brand: "platform"
-    },
-    {
-        title: "Commerce Cloud APIs",
-        body: "Unlock and integrate data from any system to deliver critical, time-sensitive projects with MuleSoft.",
-        href: "https://developer.commercecloud.com/s/",
-        brand: "commerce"
-    },
-    {
-        title: "MuleSoft Documentation",
-        body: "Explore documentation, APIs, resources, and discussion forums to Develop personalized commerce experiences on a fast, flexible platform.",
-        href: "https://docs.mulesoft.com/",
-        brand: "integration"
-    },
-    {
-        title: "Salesforce Extensions for VS Code",
-        body: "Use Salesforce Extensions for Visual Studio Code to optimize building and debugging code on the Salesforce Platform. From the VS Studio code editor, work seamlessly with scratch orgs, sandboxes, and DE orgs, and code intelligently with Apex, Lightning components, and Visualforce.",
-        href: "https://developer.salesforce.com/tools/vscode",
-        brand: "platform"
-    },
-    {
-        title: "Quip Developer Documentation",
-        body: "Make more intelligent, data-driven decisions that guide your business forward with Quip.",
-        href: "https://quip.com/dev",
-        brand: "collaboration"
-    },
-    {
-        title: "Tableau Help",
-        body: "Tableau brings together data from anywhere to empower your people everywhere.",
-        href: "https://help.tableau.com/",
-        brand: "analytics"
-    },
-    {
-        title: "Einstein Voice & Vision",
-        body: "Einstein Platform Services allows you to seamlessly integrate custom deep learning models into your CRM workflows.",
-        href: "https://metamind.readme.io",
-        brand: "platform"
-    },
-    {
-        title: "Lightning Web Components",
-        body: "Learn about building, deploying, and managing your apps on Heroku.",
-        href: "https://developer.salesforce.com/docs/component-library/overview/",
-        brand: "platform"
-    },
-    {
-        title: "Lightning Design System",
-        body: "Create the World's Best Enterprise App Experiences using Salesforce Lightning Design System.",
-        href: "https://www.lightningdesignsystem.com/",
-        brand: "platform"
-    },
-    {
-        title: "Commerce Cloud APIs",
-        body: "Unlock and integrate data from any system to deliver critical, time-sensitive projects with MuleSoft.",
-        href: "https://developer.commercecloud.com/s/",
-        brand: "commerce"
-    },
-    {
-        title: "MuleSoft Documentation",
-        body: "Explore documentation, APIs, resources, and discussion forums to Develop personalized commerce experiences on a fast, flexible platform.",
-        href: "https://docs.mulesoft.com/",
-        brand: "integration"
-    },
-    {
-        title: "Salesforce Extensions for VS Code",
-        body: "Use Salesforce Extensions for Visual Studio Code to optimize building and debugging code on the Salesforce Platform. From the VS Studio code editor, work seamlessly with scratch orgs, sandboxes, and DE orgs, and code intelligently with Apex, Lightning components, and Visualforce.",
-        href: "https://developer.salesforce.com/tools/vscode",
-        brand: "platform"
-    },
-    {
-        title: "Quip Developer Documentation",
-        body: "Make more intelligent, data-driven decisions that guide your business forward with Quip.",
-        href: "https://quip.com/dev",
-        brand: "collaboration"
-    },
-    {
-        title: "Tableau Help",
-        body: "Tableau brings together data from anywhere to empower your people everywhere.",
-        href: "https://help.tableau.com/",
-        brand: "analytics"
-    },
-    {
-        title: "Einstein Voice & Vision",
-        body: "Einstein Platform Services allows you to seamlessly integrate custom deep learning models into your CRM workflows.",
-        href: "https://metamind.readme.io",
-        brand: "platform"
-    },
-    {
-        title: "Lightning Web Components",
-        body: "Learn about building, deploying, and managing your apps on Heroku.",
-        href: "https://developer.salesforce.com/docs/component-library/overview/",
-        brand: "platform"
-    },
-    {
-        title: "Lightning Design System",
-        body: "Create the World's Best Enterprise App Experiences using Salesforce Lightning Design System.",
-        href: "https://www.lightningdesignsystem.com/",
-        brand: "platform"
-    },
-    {
-        title: "Commerce Cloud APIs",
-        body: "Unlock and integrate data from any system to deliver critical, time-sensitive projects with MuleSoft.",
-        href: "https://developer.commercecloud.com/s/",
-        brand: "commerce"
-    },
-    {
-        title: "MuleSoft Documentation",
-        body: "Explore documentation, APIs, resources, and discussion forums to Develop personalized commerce experiences on a fast, flexible platform.",
-        href: "https://docs.mulesoft.com/",
-        brand: "integration"
-    },
-    {
-        title: "Salesforce Extensions for VS Code",
-        body: "Use Salesforce Extensions for Visual Studio Code to optimize building and debugging code on the Salesforce Platform. From the VS Studio code editor, work seamlessly with scratch orgs, sandboxes, and DE orgs, and code intelligently with Apex, Lightning components, and Visualforce.",
-        href: "https://developer.salesforce.com/tools/vscode",
-        brand: "platform"
-    },
-    {
-        title: "Quip Developer Documentation",
-        body: "Make more intelligent, data-driven decisions that guide your business forward with Quip.",
-        href: "https://quip.com/dev",
-        brand: "collaboration"
-    },
-    {
-        title: "Tableau Help",
-        body: "Tableau brings together data from anywhere to empower your people everywhere.",
-        href: "https://help.tableau.com/",
-        brand: "analytics"
-    },
-    {
-        title: "Einstein Voice & Vision",
-        body: "Einstein Platform Services allows you to seamlessly integrate custom deep learning models into your CRM workflows.",
-        href: "https://metamind.readme.io",
-        brand: "platform"
-    },
-    {
-        title: "Commerce Cloud APIs",
-        body: "Unlock and integrate data from any system to deliver critical, time-sensitive projects with MuleSoft.",
-        href: "https://developer.commercecloud.com/s/",
-        brand: "commerce"
-    },
-    {
-        title: "MuleSoft Documentation",
-        body: "Explore documentation, APIs, resources, and discussion forums to Develop personalized commerce experiences on a fast, flexible platform.",
-        href: "https://docs.mulesoft.com/",
-        brand: "integration"
-    },
-    {
-        title: "Salesforce Extensions for VS Code",
-        body: "Use Salesforce Extensions for Visual Studio Code to optimize building and debugging code on the Salesforce Platform. From the VS Studio code editor, work seamlessly with scratch orgs, sandboxes, and DE orgs, and code intelligently with Apex, Lightning components, and Visualforce.",
-        href: "https://developer.salesforce.com/tools/vscode",
-        brand: "platform"
-    },
-    {
-        title: "Quip Developer Documentation",
-        body: "Make more intelligent, data-driven decisions that guide your business forward with Quip.",
-        href: "https://quip.com/dev",
-        brand: "collaboration"
-    },
-    {
-        title: "Tableau Help",
-        body: "Tableau brings together data from anywhere to empower your people everywhere.",
-        href: "https://help.tableau.com/",
-        brand: "analytics"
-    },
-    {
-        title: "Einstein Voice & Vision",
-        body: "Einstein Platform Services allows you to seamlessly integrate custom deep learning models into your CRM workflows.",
-        href: "https://metamind.readme.io",
-        brand: "platform"
-    },
-    {
-        title: "Lightning Web Components",
-        body: "Learn about building, deploying, and managing your apps on Heroku.",
-        href: "https://developer.salesforce.com/docs/component-library/overview/",
-        brand: "platform"
-    },
-    {
-        title: "Lightning Design System",
-        body: "Create the World's Best Enterprise App Experiences using Salesforce Lightning Design System.",
-        href: "https://www.lightningdesignsystem.com/",
-        brand: "platform"
-    },
-    {
-        title: "Commerce Cloud APIs",
-        body: "Unlock and integrate data from any system to deliver critical, time-sensitive projects with MuleSoft.",
-        href: "https://developer.commercecloud.com/s/",
-        brand: "commerce"
-    },
-    {
-        title: "MuleSoft Documentation",
-        body: "Explore documentation, APIs, resources, and discussion forums to Develop personalized commerce experiences on a fast, flexible platform.",
-        href: "https://docs.mulesoft.com/",
-        brand: "integration"
-    },
-    {
-        title: "Salesforce Extensions for VS Code",
-        body: "Use Salesforce Extensions for Visual Studio Code to optimize building and debugging code on the Salesforce Platform. From the VS Studio code editor, work seamlessly with scratch orgs, sandboxes, and DE orgs, and code intelligently with Apex, Lightning components, and Visualforce.",
-        href: "https://developer.salesforce.com/tools/vscode",
-        brand: "platform"
-    },
-    {
-        title: "Quip Developer Documentation",
-        body: "Make more intelligent, data-driven decisions that guide your business forward with Quip.",
-        href: "https://quip.com/dev",
-        brand: "collaboration"
-    },
-    {
-        title: "Tableau Help",
-        body: "Tableau brings together data from anywhere to empower your people everywhere.",
-        href: "https://help.tableau.com/",
-        brand: "analytics"
-    },
-    {
-        title: "Einstein Voice & Vision",
-        body: "Einstein Platform Services allows you to seamlessly integrate custom deep learning models into your CRM workflows.",
-        href: "https://metamind.readme.io",
-        brand: "platform"
-    },
-    {
-        title: "Lightning Web Components",
-        body: "Learn about building, deploying, and managing your apps on Heroku.",
-        href: "https://developer.salesforce.com/docs/component-library/overview/",
-        brand: "platform"
-    },
-    {
-        title: "Lightning Design System",
-        body: "Create the World's Best Enterprise App Experiences using Salesforce Lightning Design System.",
-        href: "https://www.lightningdesignsystem.com/",
-        brand: "platform"
-    }
-];

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

@@ -1,15 +0,0 @@
-import cards from "./cardMockProps";
-
-export default {
-    cards,
-    languageList: [
-        { label: "English", value: "en-us" },
-        { label: "Japanese", value: "ja-jp" }
-    ],
-    productList: [
-        { label: "All Services", value: "a" },
-        { label: "Analytics", value: "b" },
-        { label: "Commerce", value: "c" },
-        { label: "Digital 360", value: "d" }
-    ]
-};

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/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"
-};