@salesforcedevs/dx-components 0.26.2 → 0.26.3-alpha.1

package/src/modules/dx/dropdown/__tests__/mockNestedOptions.ts

@@ -1,96 +0,0 @@
-export default [
-    {
-        label: "Products",
-        id: "brands",
-        calloutLink: {
-            href: "www.google.com",
-            target: "_blank",
-            label: "View all Products"
-        },
-        options: [
-            {
-                label: "Heroku",
-                id: "heroku",
-                iconSymbol: "heroku",
-                iconSprite: "salesforcebrand"
-            },
-            {
-                label: "Tableau",
-                id: "tableau",
-                iconSymbol: "analytics",
-                iconSprite: "salesforcebrand"
-            },
-            {
-                label: "Quip",
-                id: "quip",
-                iconSymbol: "collaboration",
-                iconSprite: "salesforcebrand"
-            },
-            {
-                label: "MuleSoft",
-                id: "mulesoft",
-                iconSymbol: "integration",
-                iconSprite: "salesforcebrand"
-            }
-        ]
-    },
-    {
-        label: "Platform",
-        id: "platform",
-        options: [
-            {
-                label: "Apex",
-                id: "apex"
-            },
-            {
-                label: "Lightning Web Components",
-                id: "LWC"
-            },
-            {
-                label: "Mobile",
-                id: "mobile"
-            },
-            {
-                label: "Apex Other",
-                id: "apex2"
-            },
-            {
-                label: "Lightning Web Runtime",
-                id: "LWR"
-            },
-            {
-                label: "Apex Legends",
-                id: "legends"
-            },
-            {
-                label: "Einstein",
-                id: "einstein"
-            },
-            {
-                label: "Mobile SDK",
-                id: "mobilesdk"
-            }
-        ]
-    },
-    {
-        label: "Sandwich",
-        id: "sandwich",
-        options: [
-            {
-                label: "Bread",
-                description: "Lets get this bread.",
-                id: "bread"
-            },
-            {
-                label: "Peanut Butter",
-                description: "This is tasty PB.",
-                id: "pb"
-            },
-            {
-                label: "Jelly",
-                description: "This is jelly, maybe grape jelly.",
-                id: "jelly"
-            }
-        ]
-    }
-];

package/src/modules/dx/dropdown/__tests__/mockOptions.ts

@@ -1,10 +0,0 @@
-export default [
-    { label: "Banana", id: "banana" },
-    { label: "Orange", id: "orange" },
-    { label: "Potato", id: "potato" },
-    { label: "Shoe", id: "shoe" },
-    { label: "Broom", id: "broom" },
-    { label: "Spaghetti", id: "spaghetti" },
-    { label: "Tater Tot", id: "tater" },
-    { label: "Lint", id: "lint" }
-];

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

@@ -1,6 +0,0 @@
-import mockOptions from "./mockOptions";
-
-export default {
-    value: "potato",
-    options: mockOptions
-};

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

@@ -1,89 +0,0 @@
-import { html } from "lit-html";
-import mockOptions from "./__tests__/mockOptions";
-import mockNestedOptions from "./__tests__/mockNestedOptions";
-
-export default {
-    title: "dx/dx-dropdown",
-    component: "dx-dropdown"
-};
-
-const options = JSON.stringify(mockOptions);
-const nestedOptions = JSON.stringify(mockNestedOptions);
-const nestedOptionsTwoItems = JSON.stringify(mockNestedOptions.slice(0, 2));
-
-// prettier-ignore
-const styles = () => html`
-    <style>
-        #root {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            grid-gap: 20px;
-            justify-items: center;
-        }
-    </style>
-`;
-
-// prettier-ignore
-export const Base = () => html`
-    ${styles()}
-    <dx-dropdown options="${options}">
-        <dx-button icon-symbol="chevrondown">
-            Default
-        </dx-button>
-    </dx-dropdown>
-
-    <br />
-
-    <dx-dropdown stay-open-after-change="true" options="${options}">
-        <dx-button icon-symbol="chevrondown">
-            Stay Open After Change
-        </dx-button>
-    </dx-dropdown>
-
-    <br />
-
-    <dx-dropdown
-        options="${nestedOptions}"
-        placement="bottom"
-        offset="medium"
-    >
-        <dx-button icon-symbol="chevrondown">
-            Nested Options
-        </dx-button>
-    </dx-dropdown>
-
-    <br />
-
-    <dx-dropdown
-        options="${nestedOptionsTwoItems}"
-        placement="bottom"
-        offset="medium"
-    >
-        <dx-button icon-symbol="chevrondown">
-            Nested Options 2 Items
-        </dx-button>
-    </dx-dropdown>
-
-    <br />
-
-    <dx-dropdown
-        options="${nestedOptionsTwoItems}"
-        placement="bottom"
-        offset="medium"
-        open-on-hover="true"
-        stay-open-after-change="true"
-    >
-        <dx-button icon-symbol="chevrondown">
-            Hover Me
-        </dx-button>
-    </dx-dropdown>
-`;
-
-export const DisabledControl = () => html`
-    ${styles()}
-    <dx-dropdown options="${options}">
-        <dx-button icon-symbol="chevrondown" disabled="true">
-            I'm disabled
-        </dx-button>
-    </dx-dropdown>
-`;

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

@@ -1,112 +0,0 @@
-import DropdownOption from "dx/dropdownOption";
-import { createRenderComponent } from "utils-internal/tests";
-import { MOCK_BUTTON_PROPS, MOCK_LINK_PROPS } from "./mockProps";
-import * as instrumentation from "dx/instrumentation";
-
-const TAG = "dx-dropdown-option";
-const render = createRenderComponent(TAG, DropdownOption);
-
-const appendToMenu = (element: HTMLElement) => {
-    const menu = document.createElement("DIV");
-    document.body.appendChild(menu);
-    menu.setAttribute("role", "menu");
-    menu.appendChild(element);
-};
-
-describe(TAG, () => {
-    beforeEach(() => {
-        jest.clearAllMocks();
-    });
-
-    it("renders a button by default", () => {
-        const component = render(MOCK_BUTTON_PROPS);
-        expect(component.shadowRoot.querySelector("button")).not.toBeNull();
-
-        appendToMenu(component);
-        return expect(component).toBeAccessible();
-    });
-
-    it("renders the correct label, description, and img", () => {
-        const component = render(MOCK_BUTTON_PROPS);
-        const label =
-            component.shadowRoot.querySelector(".option_label").textContent;
-        expect(label).toEqual(MOCK_BUTTON_PROPS.option.label);
-
-        const description = component.shadowRoot.querySelector(
-            ".option_description"
-        ).textContent;
-        expect(description).toEqual(MOCK_BUTTON_PROPS.option.description);
-
-        const img = component.shadowRoot.querySelector(".option_icon");
-        expect(img).not.toBeNull();
-
-        appendToMenu(component);
-        return expect(component).toBeAccessible();
-    });
-
-    it("renders a link with the correct href when given link props", () => {
-        const component = render(MOCK_LINK_PROPS);
-
-        const href = component.shadowRoot
-            .querySelector("a")
-            .getAttribute("href");
-        expect(href).toEqual(MOCK_LINK_PROPS.option.link.href);
-
-        appendToMenu(component);
-        return expect(component).toBeAccessible();
-    });
-
-    it("applies the active class correctly", () => {
-        const component = render({ ...MOCK_BUTTON_PROPS, active: true });
-        const optionEl = component.shadowRoot.querySelector(".option-active");
-        expect(optionEl).not.toBeNull();
-
-        appendToMenu(component);
-        return expect(component).toBeAccessible();
-    });
-
-    it("can focus itself", () => {
-        const component = render(MOCK_BUTTON_PROPS);
-        component.focus();
-
-        expect(document.activeElement).toEqual(component);
-    });
-
-    it("onClick function is fired when button is clicked", () => {
-        const onClickMock = jest.fn();
-        const component = render({
-            ...MOCK_BUTTON_PROPS,
-            onclick: onClickMock
-        });
-
-        const option = component.shadowRoot.querySelector(".option");
-        option.click();
-
-        expect(onClickMock).toBeCalled();
-    });
-
-    it("fires analytics when given an analytics event", () => {
-        const track = jest.spyOn(instrumentation, "track");
-
-        const component = render({
-            ...MOCK_BUTTON_PROPS,
-            analyticsEvent: "mock"
-        });
-
-        const option = component.shadowRoot.querySelector(".option");
-        option.click();
-
-        expect(track).toHaveBeenCalledTimes(1);
-    });
-
-    it("doesn't fire analytics when not given an analytics event", () => {
-        const track = jest.spyOn(instrumentation, "track");
-
-        const component = render(MOCK_BUTTON_PROPS);
-
-        const option = component.shadowRoot.querySelector(".option");
-        option.click();
-
-        expect(track).not.toHaveBeenCalled();
-    });
-});

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

@@ -1,20 +0,0 @@
-export const MOCK_BUTTON_PROPS = {
-    option: {
-        id: "documentation",
-        label: "Documentation",
-        description: "Documentation is kewl",
-        iconSymbol: "heroku",
-        iconSprite: "salesforcebrand"
-    }
-};
-
-export const MOCK_LINK_PROPS = {
-    option: {
-        id: "documentation",
-        label: "Documentation",
-        link: {
-            href: "/documentation",
-            target: null
-        }
-    }
-};

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

@@ -1,52 +0,0 @@
-import EmptyState from "dx/emptyState";
-import { createRenderComponent } from "utils-internal/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-empty-state";
-const render = createRenderComponent(TAG, EmptyState);
-
-describe(TAG, () => {
-    it("renders", () => {
-        const element = render(mockProps);
-        const container: HTMLElement =
-            element.shadowRoot.querySelector(".container");
-        const renderedTitle: HTMLElement =
-            element.shadowRoot.querySelector("h3");
-        const renderedSubTitle: HTMLElement =
-            element.shadowRoot.querySelector("p");
-        const image: HTMLImageElement = element.shadowRoot.querySelector("img");
-
-        expect(renderedTitle).not.toBeNull();
-        expect(renderedSubTitle).not.toBeNull();
-        expect(container).not.toBeNull();
-        expect(image).not.toBeNull();
-
-        expect(renderedSubTitle.textContent).toEqual(mockProps.subtitle);
-        expect(renderedTitle.textContent).toEqual(mockProps.title);
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders as the large variant by default", () => {
-        const element = render(mockProps);
-        const container: HTMLElement =
-            element.shadowRoot.querySelector(".container");
-        const image: HTMLImageElement = element.shadowRoot.querySelector("img");
-        expect(container.classList).toContain("size-large");
-        expect(container.classList).toHaveLength(2);
-        expect(image.src).not.toContain("-small.svg");
-    });
-
-    it("renders as the small variant when specified", () => {
-        const element = render({
-            ...mockProps,
-            size: "small"
-        });
-        const container: HTMLElement =
-            element.shadowRoot.querySelector(".container");
-        const image: HTMLImageElement = element.shadowRoot.querySelector("img");
-        expect(container.classList).toContain("size-small");
-        expect(container.classList).toHaveLength(2);
-        expect(image.src).toContain("-small.svg");
-    });
-});

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

@@ -1,4 +0,0 @@
-export default {
-    title: "No matches",
-    subtitle: "Try searching for different words"
-};

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

@@ -1,45 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-empty-state",
-    component: "dx-empty-state"
-};
-
-const createStyles = () => html`
-    <style>
-        body {
-            padding: 12px !important;
-        }
-        .title {
-            font-weight: bold;
-            margin: 24px;
-        }
-        #styled {
-            --dx-c-empty-state-background: var(--sds-g-gray-2);
-            --dx-c-empty-state-image-width: 400px;
-            width: 300px;
-            display: block;
-        }
-        .small-container {
-            width: 250px;
-        }
-    </style>
-`;
-
-const title = (value: string) => html`<p class="title">${value}</p>`;
-
-export const Base = () => html`
-    ${createStyles()} ${title("Default")}
-    <dx-empty-state
-        title="Beep boop. That did not compute."
-        subtitle="No results"
-    ></dx-empty-state>
-
-    ${title("No subtitle and customized with style hooks")}
-    <dx-empty-state id="styled" title="No Results"></dx-empty-state>
-
-    ${title("Small variant")}
-    <div class="small-container">
-        <dx-empty-state title="No Results" size="small"></dx-empty-state>
-    </div>
-`;

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

@@ -1,51 +0,0 @@
-import Feature from "dx/feature";
-import { createRenderComponent } from "utils-internal/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-feature";
-const render = createRenderComponent(TAG, Feature);
-
-const dataCodeSample = {
-    title: "Redwoods Insurance",
-    label: "Featured Demo",
-    buttonHref: "https://github.com/trailheadapps/ebikes-lwc",
-    buttonLabel: "Explore on Github",
-    imageSrc:
-        "https://d12fd6m9xo0jeo.cloudfront.net/0953ee82-173a-484d-b4f4-7467bce5e200.jpg",
-    isExternalLink: "true",
-    variant: "display"
-};
-
-describe(TAG, () => {
-    it("renders an accessible feature with description on the left by default", () => {
-        const element = render(mockProps);
-        const sectionEl = element.shadowRoot.querySelector("section");
-        expect(sectionEl).not.toBeNull();
-        expect(sectionEl.className).toBe("description-left");
-        expect(element.shadowRoot.querySelector(".image-container")).toBe(null);
-        return expect(sectionEl).toBeAccessible();
-    });
-
-    it("renders a feature with description on the rigth", () => {
-        const element = render(mockProps);
-        element.descriptionPosition = "right";
-        document.body.appendChild(element);
-        const sectionEl = element.shadowRoot.querySelector("section");
-        expect(sectionEl).not.toBeNull();
-        expect(sectionEl.className).toBe("description-right");
-        expect(element.shadowRoot.querySelector(".image-container")).toBe(null);
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders a feature for code-samples", () => {
-        const element = render(dataCodeSample);
-        document.body.appendChild(element);
-        const sectionEl = element.shadowRoot.querySelector("section");
-        expect(sectionEl).not.toBeNull();
-        expect(sectionEl.className).toBe("description-left");
-        const imgContainer =
-            element.shadowRoot.querySelector(".image-container");
-        expect(imgContainer).not.toBe(null);
-        return expect(element).toBeAccessible();
-    });
-});

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

@@ -1,8 +0,0 @@
-export default {
-    title: "Einstein Prediction Builder",
-    buttonHref: "https://lmgtfy.app",
-    buttonLabel: "Build a predictive app",
-    imageSrc: "https://i.imgur.com/FUsyxR5.jpg",
-    body:
-        "Build AI predictions into your <b>Salesforce</b> app for data stored in standard or custom objects using only clicks—then deploy and embed predictions onto any page in Salesforce."
-};

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

@@ -1,21 +0,0 @@
-// This test requires a wrapper component that's not exposed in the build.
-import FeatureGridTest from "test-components/featureGridTest";
-import { createRenderComponent } from "utils-internal/tests";
-
-const TAG = "dx-feature-grid";
-const render = createRenderComponent(TAG, FeatureGridTest);
-
-describe(TAG, () => {
-    it("renders a feature grid with mixed description positions", async () => {
-        const gridTestEl = render();
-        const featureEls = gridTestEl.shadowRoot.querySelectorAll("dx-feature");
-
-        await Promise.resolve();
-        expect(featureEls.length).toBe(3);
-        expect(featureEls[0].descriptionPosition).toBe("left");
-        expect(featureEls[1].descriptionPosition).toBe("right");
-        expect(featureEls[2].descriptionPosition).toBe("left");
-
-        return expect(gridTestEl).toBeAccessible();
-    });
-});

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

@@ -1,120 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-feature-grid",
-    component: "dx-feature-grid"
-};
-
-
-
-const codeSampleStyles = () => html `
-<style>
-    .code-samples-feature {
-        --dx-c-feature-img-box-shadow: unset;
-        --dx-c-feature-description-left-img-src: unset;
-        --dx-c-feature-description-max-width: 100%;
-        --dx-c-feature-description-font-size: 20px;
-        --dx-c-feature-img-margin-left: -40px;
-        --dx-c-feature-img-container-padding: 0px;
-        --dx-c-feature-image-max-width: 110%;
-    }
-</style>`
-
-
-export const Base = () => html`
-    <dx-feature-grid>
-        <dx-feature
-            title="Einstein Prediction Builder"
-            button-href="https://lmgtfy.app"
-            button-label="Build a predictive app"
-            image-src="https://i.imgur.com/FUsyxR5.jpg"
-        >
-            Build AI predictions into your Salesforce app for data stored in
-            standard or custom objects using only clicks—then deploy and embed
-            predictions onto any page in Salesforce.
-        </dx-feature>
-
-        <dx-feature
-            title="Einstein Next Best Action"
-            button-href="https://lmgtfy.app"
-            button-label="Learn how Next Best Action works"
-            image-src="https://i.imgur.com/FUsyxR5.jpg"
-        >
-            Make predictions actionable by unifying data from your organization
-            and other sources to create optimal recommendations, and then
-            automate them using flows.
-        </dx-feature>
-
-        <dx-feature
-            title="Einstein Chatbots"
-            button-href="https://lmgtfy.app"
-            button-label="Learn chatbot basics"
-            image-src="https://i.imgur.com/FUsyxR5.jpg"
-        >
-            Automate support with an Einstein chatbot to make your apps smarter
-            without code, and extend the functionality of your chatbot using
-            Lightning Web Components, Apex, or external integrations.
-        </dx-feature>
-    </dx-feature-grid>
-`
-
-export const CodeSamples = () => html `
-    ${codeSampleStyles()}
-    <dx-feature-grid>
-        <dx-feature
-            class="code-samples-feature"
-            title="E-Bikes"
-            label="Featured Demo"
-            button-href="https://github.com/trailheadapps/ebikes-lwc"
-            button-label="Explore on Github"
-            image-src="https://trailhead-sample-apps-temp.s3.amazonaws.com/ecars.png"
-            is-external-link="true"
-            variant="display"
-        >
-            Sample retail application. This application helps E-Bikes, a fictitious electric
-            bicycle manufacturer, manage their products and reseller orders using a rich User
-            Experience. Explore this application, that also integrates with Salesfoce
-            Communities, and learn how to build rich User Experiences with Lightning Web
-            Components using different data access strategies.
-        </dx-feature>
-
-        <dx-feature
-            class="code-samples-feature"
-            title="Easy Spaces"
-            label="Featured Demo"
-            button-href="https://github.com/trailheadapps/easy-spaces-lwc"
-            button-label="Explore on Github"
-            image-src="https://d12fd6m9xo0jeo.cloudfront.net/cdb2ca7c-824f-4037-9187-dab8b58ff50c.jpg"
-            is-external-link="true"
-            variant="display"
-        >
-            Sample event management application. Easy Spaces is a fictitious event management company.
-            This application helps Easy Spaces event coordinators manage reservations and find the
-            right theme for their customers. Regardless of the industry you work in,
-            this app demonstrates how to build flexible, user-centric experiences with dynamic flows,
-            Flow Actions, and object-agnostic Lightning components. This app also demonstrates how
-            to structure your source code for modular distribution using unlocked packages.
-        </dx-feature>
-
-        <dx-feature
-            class="code-samples-feature"
-            title="Redwoods Insurance"
-            label="Featured Demo"
-            button-href="https://github.com/trailheadapps/ebikes-lwc"
-            button-label="Explore on Github"
-            image-src="https://d12fd6m9xo0jeo.cloudfront.net/0953ee82-173a-484d-b4f4-7467bce5e200.jpg"
-            is-external-link="true"
-            variant="display"
-        >
-            Sample car insurance app. Redwoods Insurance is a fictitious car insurance company.
-            This application, which consists of a Salesforce Lightning Console app and a mobile
-            application for iOS, helps agents and customers with insurance claims.
-            Customers use the mobile application to capture pictures and other
-            details about accidents. The sample iOS application uses the new Mobile SDK
-            to provide rich, native connections to a customer's device.
-            Redwoods Insurance claims adjusters use the Salesforce console app to view
-            multimedia files uploaded by customers and manage the claims process.
-        </dx-feature>
-    </dx-feature-grid>`;
-
-