@salesforcedevs/dx-components 0.26.1-alpha.11 → 0.26.1-alpha.16

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

@@ -1,35 +0,0 @@
-const dateTime = new Date(0, 0, 1, 9, 0, 0).toISOString();
-
-export default {
-    label: "Featured API",
-    title: "Create powerful ecommerce experiences",
-    owner: "REST API",
-    attributionLink: JSON.stringify({
-        label: "Commerce Cloud",
-        href:
-            "https://appexchange.salesforce.com/mktcollections/curated/c19response?d=cta-nav-external",
-        target: "_blank"
-    }),
-    dateTime: dateTime,
-    dateText: "Last updated on",
-    body:
-        "Set up, create, and customize a sample app using the Commerce API. We give you the tools to build and embed commerce experiences across every customer touchpoint.",
-    primaryLink: JSON.stringify({
-        label: "Learn More about the Cloud API",
-        href:
-            "https://appexchange.salesforce.com/mktcollections/curated/c19response?d=cta-nav-external",
-        target: "_blank"
-    }),
-    secondaryLink: JSON.stringify({
-        label: "View API Reference",
-        href:
-            "https://appexchange.salesforce.com/mktcollections/curated/c19response?d=cta-nav-external",
-        target: "_blank"
-    }),
-    tertiaryLink: JSON.stringify({
-        label: "Buy",
-        href:
-            "https://appexchange.salesforce.com/mktcollections/curated/c19response?d=cta-nav-external",
-        target: "_blank"
-    })
-};

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

@@ -1,81 +0,0 @@
-import { html } from "lit-html";
-import mockProps from "./__tests__/mockProps";
-import featureListMockProps from "../featuresList/__tests__/mockProps";
-import { renderStyle } from "../../utils-internal/storybook/storybook";
-
-export default {
-    title: "dx/dx-group-text",
-    component: "dx-group-text"
-};
-
-const featureOptions = JSON.stringify(featureListMockProps.options);
-
-export const Base = () => html`
-    ${renderStyle("dx-group-text")}
-    <span>Large</span>
-    <dx-group-text
-        label="Featured API"
-        title="Create powerful ecommerce experiences"
-        body="Set up, create, and customize a sample app using the Commerce API. We give you the tools to build and embed commerce experiences across every customer touchpoint."
-    ></dx-group-text>
-
-    <span>Medium</span>
-    <dx-group-text
-        label="Featured API"
-        title="Create powerful ecommerce experiences"
-        body="Set up, create, and customize a sample app using the Commerce API. We give you the tools to build and embed commerce experiences across every customer touchpoint."
-        size="medium"
-    ></dx-group-text>
-`;
-
-export const BasePlusSubtitle = (args: any) => html`
-    ${renderStyle("dx-group-text")}
-    <span>Large</span>
-    <dx-group-text
-        title="Create powerful ecommerce experiences"
-        owner="REST API"
-        dateTime="${args.dateTime}"
-        date-text="Last updated on"
-        attribution-link="${args.attributionLink}"
-    ></dx-group-text>
-
-    <span>Medium</span>
-    <dx-group-text
-        title="Create powerful ecommerce experiences"
-        owner="REST API"
-        dateTime="${args.dateTime}"
-        date-text="Last updated on"
-        attribution-link="${args.attributionLink}"
-        size="medium"
-    ></dx-group-text>
-`;
-
-export const Slotted = (args: any) => html`
-    ${renderStyle("dx-group-text")}
-    <span>Large</span>
-    <dx-group-text
-        label="Featured API"
-        title="${args.title}"
-        primary-link="${args.primaryLink}"
-        secondary-link="${args.secondaryLink}"
-        tertiary-link="${args.tertiaryLink}"
-    >
-        <dx-features-list options="${featureOptions}"></dx-features-list>
-    </dx-group-text>
-
-    <span>Medium</span>
-    <dx-group-text
-        label="Featured API"
-        title="${args.title}"
-        primary-link="${args.primaryLink}"
-        secondary-link="${args.secondaryLink}"
-        tertiary-link="${args.tertiaryLink}"
-        size="medium"
-    >
-        <dx-features-list options="${featureOptions}"></dx-features-list>
-    </dx-group-text>
-`;
-
-BasePlusSubtitle.args = mockProps;
-Slotted.args = mockProps;
-Slotted.story = { parameters: { docs: { disable: true } } };

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

@@ -1,236 +0,0 @@
-import Button from "dx/button";
-import Dropdown from "dx/dropdown";
-import Header from "dx/header";
-import Icon from "dx/icon";
-import { createRenderComponent } from "utils-internal/tests";
-import { ANALYTICS_INFO } from "utils-internal/headerBase";
-import { track } from "dx/instrumentation";
-import {
-    mockPropsDevelopers,
-    mockPropsEmployees,
-    mockPropsNoNavigation
-} from "./mockProps";
-
-const TAG = "dx-header";
-const render = createRenderComponent(TAG, Header);
-
-jest.mock("dx/instrumentation");
-
-describe("dx-header", () => {
-    it("renders", () => {
-        const subtitle = "testsubtitle";
-        const element = render({ ...mockPropsDevelopers, subtitle });
-        const subtitleEl = element.shadowRoot.querySelector(".subtitle");
-        const buttons: Array<HTMLElement> =
-            element.shadowRoot.querySelectorAll("dx-button");
-        const dropdown = element.shadowRoot.querySelector("dx-dropdown");
-        const headerEl = element.shadowRoot.querySelector("dx-header-nav");
-
-        expect(subtitleEl.textContent).toEqual(subtitle);
-        expect(headerEl).not.toBeNull();
-        expect(buttons).toHaveLength(2);
-        expect(dropdown).toBeNull();
-
-        const brandIcon = element.shadowRoot.querySelector(".brand-icon");
-        expect(brandIcon).toBeNull();
-        return expect(element).toBeAccessible();
-    });
-
-    it("doesn't render subnav when navitems is empty", () => {
-        const element = render(mockPropsNoNavigation);
-
-        const els = element.querySelectorAll(
-            "dx-header-mobile-nav-menu, .header_l2_group-nav"
-        );
-
-        expect(els).toHaveLength(0);
-    });
-
-    it("renders the brand icon when a brand has an icon associated", () => {
-        const element = render(mockPropsEmployees);
-
-        const brandIcon: Icon = element.shadowRoot.querySelector(".brand-icon");
-        expect(brandIcon).not.toBeNull();
-        expect(brandIcon.symbol).toBe(mockPropsEmployees.brand);
-    });
-
-    it("doesn't render brand icon when no brand is provided", () => {
-        const element = render({ ...mockPropsDevelopers, brand: undefined });
-
-        const brandIcon: Icon = element.shadowRoot.querySelector(".brand-icon");
-        expect(brandIcon).toBeNull();
-    });
-
-    it("receives breadcrumbs", () => {
-        const breadcrumbs = [
-            {
-                href: "/apis/salesforce",
-                label: "Apis",
-                last: true,
-                asLink: false
-            }
-        ];
-
-        const element = render({ ...mockPropsDevelopers, breadcrumbs });
-        const breadcrumb = element.shadowRoot.querySelector("dx-breadcrumbs");
-
-        expect(breadcrumb.breadcrumbs).toEqual(breadcrumbs);
-        expect(breadcrumb).not.toBeNull();
-        return expect(element).toBeAccessible();
-    });
-
-    it("receives versions", () => {
-        const version = { id: "123", label: "Test" };
-        const element = render({
-            ...mockPropsDevelopers,
-            versions: JSON.stringify([version])
-        });
-        const dropdown: Dropdown =
-            element.shadowRoot.querySelector("dx-dropdown");
-        expect(dropdown).not.toBeNull();
-        expect(dropdown.options).toHaveLength(1);
-
-        const [option] = dropdown.options;
-        expect(option).toHaveProperty("id", version.id);
-        expect(option).toHaveProperty("label", version.label);
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("triggers event on version change", () => {
-        const versionsListParameter = [{ id: "123", label: "Test" }];
-        const element = render({
-            ...mockPropsDevelopers,
-            versions: JSON.stringify(versionsListParameter)
-        });
-        const dropdown: HTMLElement = element.shadowRoot.querySelector(
-            ".header_version-dropdown"
-        );
-        const mockVersionChange = jest.fn();
-        element.addEventListener("versionchange", mockVersionChange);
-
-        dropdown.dispatchEvent(new CustomEvent("change", { detail: "123" }));
-        expect(mockVersionChange).toBeCalledTimes(1);
-        expect(mockVersionChange.mock.calls[0][0].detail).toEqual("123");
-        return expect(element).toBeAccessible();
-    });
-
-    it("triggers event onrequestopennav", () => {
-        const element = render({
-            ...mockPropsDevelopers
-        });
-        const headerEl = element.shadowRoot.querySelector("dx-header-nav");
-        const headerMobile = element.shadowRoot.querySelector(
-            "dx-header-mobile-nav-menu"
-        );
-
-        headerEl.dispatchEvent(
-            new CustomEvent("requestopennavmenu", { detail: "123" })
-        );
-
-        return Promise.resolve().then(() => {
-            expect(headerMobile.value).toEqual("123");
-            expect(headerMobile.open).toEqual(true);
-        });
-    });
-
-    it("tests toggle button", () => {
-        const element = render({
-            ...mockPropsDevelopers
-        });
-        const button: HTMLElement = element.shadowRoot.querySelector(
-            ".header_l2_group-nav_menu-button"
-        );
-        const header = element.shadowRoot.querySelector(
-            "dx-header-mobile-nav-menu"
-        );
-        const toggleStatus = header.open;
-
-        button.click();
-
-        return Promise.resolve().then(() =>
-            expect(header.open).toEqual(!toggleStatus)
-        );
-    });
-
-    it("tests mobile nav change", () => {
-        const element = render({
-            ...mockPropsDevelopers
-        });
-        const headerMobile = element.shadowRoot.querySelector(
-            "dx-header-mobile-nav-menu"
-        );
-
-        headerMobile.dispatchEvent(
-            new CustomEvent("change", { detail: "test" })
-        );
-        return Promise.resolve().then(() => {
-            expect(headerMobile.value).toEqual("test");
-        });
-    });
-
-    it("renders signup button and has bailLink", () => {
-        const element = render({
-            ...mockPropsDevelopers,
-            bailHref: "test",
-            bailLabel: "test",
-            signupLink: "/"
-        });
-        const buttons: Array<Button> =
-            element.shadowRoot.querySelectorAll("dx-button");
-
-        expect(buttons[0].href).toEqual("/");
-        expect(buttons[2].href).toEqual("test");
-        return expect(element).toBeAccessible();
-    });
-
-    it("won't render search if any coveo properties are missing", () => {
-        const element = render({
-            subtitle: mockPropsDevelopers.subtitle,
-            navItems: mockPropsDevelopers.navItems
-        });
-        const headerSearch =
-            element.shadowRoot.querySelector("dx-header-search");
-
-        expect(headerSearch).toBeNull();
-        return expect(element).toBeAccessible();
-    });
-
-    it("signup button track is being called", () => {
-        const element = render(mockPropsDevelopers);
-
-        const button: HTMLElement =
-            element.shadowRoot.querySelector("dx-button");
-
-        button.click();
-
-        expect(track).toBeCalledTimes(1);
-        expect(track).toBeCalledWith(button, "custEv_signupStart", {
-            ...ANALYTICS_INFO,
-            clickUrl: "/sign-up"
-        });
-    });
-
-    it("hides signup button when signupLink property is empty", () => {
-        const updatedMockPropsDevelopers = {
-            ...mockPropsDevelopers,
-            signupLink: ""
-        };
-        const element = render(updatedMockPropsDevelopers);
-        const signupButtonContainer: HTMLElement =
-            element.shadowRoot.querySelector(".header-login-signup");
-        expect(signupButtonContainer).toBeNull();
-    });
-
-    it("hides banner when banner markup is empty", () => {
-        const bannerMarkup = "";
-        const updatedMockPropsDevelopers = {
-            ...mockPropsDevelopers,
-            bannerMarkup
-        };
-        const element = render(updatedMockPropsDevelopers);
-        const bannerElement: HTMLElement =
-            element.shadowRoot.querySelector("dx-banner");
-        expect(bannerElement).toBeNull();
-    });
-});

package/src/modules/dx/header/__tests__/mockNavArchitects.ts

@@ -1,169 +0,0 @@
-export default [
-    {
-        id: "home",
-        label: "Home",
-        link: {
-            href: "/architects",
-            target: null
-        }
-    },
-    {
-        id: "design",
-        label: "Design",
-        link: {
-            href: "/architects/design",
-            target: null
-        }
-    },
-    {
-        id: "deliver",
-        label: "Deliver",
-        link: {
-            href: "/architects/deliver",
-            target: null
-        }
-    },
-    {
-        id: "govern",
-        label: "Govern",
-        link: {
-            href: "/architects/govern",
-            target: null
-        }
-    },
-    {
-        id: "roadmap",
-        label: "Roadmap",
-        link: {
-            href: "/architects/roadmap",
-            target: null
-        }
-    },
-    {
-        id: "covid-19",
-        label: "COVID-19",
-        options: [
-            {
-                id: "covid-resources",
-                label: "COVID-19 Resources",
-                options: [
-                    {
-                        id: "covid19-work",
-                        label: "Work.com",
-                        link: {
-                            href: "https://www.salesforce.com/work",
-                            target: "_blank"
-                        }
-                    },
-                    {
-                        id: "covid19-leading-through-change-with-data",
-                        label: "Leading Through Change with Data",
-                        link: {
-                            href:
-                                "https://www.tableau.com/leading-through-change?placement=homepage&utm_medium=Referral&utm_source=Salesforce",
-                            target: "_blank"
-                        }
-                    },
-                    {
-                        id: "covid19-data-hub",
-                        label: "COVID-19 Data Hub",
-                        link: {
-                            href:
-                                "https://www.tableau.com/covid-19-coronavirus-data-resources?placement=homepage&utm_medium=Referral&utm_source=Salesforce",
-                            target: "_blank"
-                        }
-                    },
-                    {
-                        id: "covid19-global-daily-tracker",
-                        label: "COVID-19 Global Daily Tracker",
-                        link: {
-                            href:
-                                "https://www.tableau.com/covid-19-coronavirus-data-resources/global-tracker?placement=homepage&utm_medium=Referral&utm_source=Salesforce",
-                            target: "_blank"
-                        }
-                    },
-                    {
-                        id: "covid19-global-economy-data-track",
-                        label: "Global Economy Data Track",
-                        link: {
-                            href:
-                                "https://www.tableau.com/covid-19-coronavirus-data-resources/economy-data-track?placement=homepage&utm_medium=Referral&utm_source=Salesforce",
-                            target: "_blank"
-                        }
-                    },
-                    {
-                        id: "covid19-government-data-track",
-                        label: "Government Data Track",
-                        link: {
-                            href:
-                                "https://www.tableau.com/covid-19-coronavirus-data-resources/government-data-track?placement=homepage&utm_medium=Referral&utm_source=Salesforce",
-                            target: "_blank"
-                        }
-                    },
-                    {
-                        id: "covid19-healthcare-data-track",
-                        label: "Healthcare Data Track",
-                        link: {
-                            href:
-                                "https://www.tableau.com/covid-19-coronavirus-data-resources/healthcare-data-track?placement=homepage&utm_medium=Referral&utm_source=Salesforce",
-                            target: "_blank"
-                        }
-                    },
-                    {
-                        id: "covid19-b-well-together",
-                        label: "B-Well Together",
-                        link: {
-                            href:
-                                "https://www.salesforce.com/resources/videos/be-well/?d=cta-glob-nav-5",
-                            target: "_blank"
-                        }
-                    },
-                    {
-                        id: "covid19-leading-through-change",
-                        label: "Leading Through Change",
-                        link: {
-                            href:
-                                "https://www.salesforce.com/resources/leading-through-change/#!page=1",
-                            target: "_blank"
-                        }
-                    },
-                    {
-                        id: "covid19-salesforce-care",
-                        label: "Salesforce Care",
-                        link: {
-                            href:
-                                "https://www.salesforce.com/solutions/covid-19-response/overview/?d=cta-glob-nav-7",
-                            target: "_blank"
-                        }
-                    },
-                    {
-                        id: "covid19-trailhead-resources",
-                        label: "Trailhead Resources",
-                        link: {
-                            href:
-                                "https://trailhead.salesforce.com/users/strailhead/trailmixes/trailhead-resources-during-covid-19?utm_source=salesforce_properties&utm_medium=global_nav&utm_campaign=covid19&utm_content=covid_resources_trailmix",
-                            target: "_blank"
-                        }
-                    },
-                    {
-                        id: "covid19-appexchange-resources",
-                        label: "AppExchange Resources",
-                        link: {
-                            href:
-                                "https://appexchange.salesforce.com/mktcollections/curated/c19response?d=cta-nav-external",
-                            target: "_blank"
-                        }
-                    },
-                    {
-                        id: "covid19-mulesoft-resources",
-                        label: "MuleSoft Resources",
-                        link: {
-                            href: "https://www.mulesoft.com/resources/covid-19",
-                            target: "_blank"
-                        }
-                    }
-                ]
-            }
-        ]
-    }
-];