@salesforcedevs/dx-components 0.17.0 → 0.17.1-review-diff1

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/cardNews/__tests__/cardNews.test.ts

@@ -1,59 +0,0 @@
-import CardNews from "dx/cardNews";
-import { createRenderComponent } from "utils/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"
-};