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

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

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

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

@@ -0,0 +1,89 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+.docs-action-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    padding: var(--dx-g-spacing-md) 0 var(--dx-g-spacing-lg);
+}
+
+.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);
+}
+
+.docs-search-input {
+    --dx-c-input-width: 285px;
+}
+
+.docs-card {
+    --dx-c-body-max-lines: 4;
+    --dx-c-heading-max-lines: 2;
+}
+
+.pagination-container {
+    max-width: fit-content;
+    max-width: -moz-fit-content;
+    margin: var(--dx-g-spacing-lg) auto;
+}
+
+@media screen and (max-width: 1024px) {
+    .docs-card {
+        --dx-c-body-max-lines: 3;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .docs-action-bar {
+        flex-direction: column-reverse;
+        width: 100%;
+        padding: 0;
+    }
+
+    .docs-search-input {
+        --dx-c-input-width: 100%;
+
+        width: 100%;
+        margin-bottom: var(--dx-g-spacing-md);
+    }
+
+    .docs-action-bar .records-container {
+        transform: translateY(-100%);
+    }
+}
+
+@media screen and (max-width: 600px) {
+    .pagination-container {
+        width: 100%;
+        overflow: hidden;
+    }
+
+    .pagination-container > * {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+}
+
+@media screen and (max-width: 460px) {
+    .docs-action-bar .records-container {
+        transform: initial;
+        padding: var(--dx-g-spacing-md) 0;
+    }
+}

package/src/modules/dx/cardGrid/cardGrid.html

@@ -0,0 +1,46 @@
+<template>
+    <div class="card-grid">
+        <div class="docs-action-bar">
+            <div class="records-container">
+                <span if:true={endingRecord}>
+                    Showing { startingRecord } to { endingRecord } of {
+                    cards.length }
+                </span>
+            </div>
+            <div class="filters-container">
+                <slot name="filters"></slot>
+            </div>
+            <dx-input
+                size="small"
+                placeholder="Search..."
+                icon-symbol="search"
+                shortcut-key="j"
+                class="docs-search-input"
+                onchange={handleSearchChange}
+                value={searchTerm}
+            ></dx-input>
+        </div>
+        <dx-grid
+            columns={tileColumns}
+            if:false={showEmptyState}
+            class="card-container"
+        ></dx-grid>
+        <div style="display: none">
+            <slot name="cards" onslotchange={onSlotChange}></slot>
+        </div>
+        <div class="pagination-container" if:false={showEmptyState}>
+            <dx-pagination
+                current-page={page}
+                total-pages={totalPages}
+                pages-to-show={pagesToShow}
+                onpagechange={goToPage}
+                if:false={hidePagination}
+            ></dx-pagination>
+        </div>
+    </div>
+    <dx-empty-state
+        title="Beep boop. That did not compute."
+        subtitle={emptyStateSubtitle}
+        if:true={showEmptyState}
+    ></dx-empty-state>
+</template>