@salesforcedevs/dx-components 0.26.1-alpha.12 → 0.26.1-alpha.13

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

@@ -1,172 +0,0 @@
-import { html } from "lit-html";
-import {
-    mockPropsDevelopers,
-    mockPropsEmployees,
-    mockPropsMarketing,
-    mockPropsNoNavigation,
-    mockPropsPartners,
-    mockPropsCommerce,
-    mockPropsSales,
-    mockPropsSuccess,
-    mockPropsIntegration,
-    mockPropsPlatform,
-    mockPropsIndustries,
-    mockPropsLearning,
-    mockPropsService,
-    mockPropsAnalytics
-} from "./__tests__/mockProps";
-
-export default {
-    title: "dx/dx-header",
-    component: "dx-header"
-};
-
-window.addEventListener("click", (e: MouseEvent) => {
-    const link = e
-        .composedPath()
-        .find((el: EventTarget) =>
-            el
-                ? (<HTMLElement>el).tagName === "A" &&
-                  (<HTMLElement>el).getAttribute("target") === null
-                : false
-        );
-    if (link) {
-        const header = document.querySelector("dx-header"); // eslint-disable-line
-        if (!header) {
-            return;
-        }
-        e.preventDefault();
-        const href = (<HTMLElement>link).getAttribute("href");
-        const fakeUrl = document.querySelector(".fake-url"); // eslint-disable-line
-        if (fakeUrl) {
-            fakeUrl.textContent = href;
-        }
-        if (href && !href.includes("http")) {
-            //@ts-ignore
-            header.href = `https://localhost:6006${href}`;
-        }
-    }
-});
-
-// prettier-ignore
-const styles = () => html `
-    <style>
-        body {
-            padding: 0 !important;
-        }
-        .fake-url {
-            padding: 8px;
-            font-size: 12px;
-            color: white;
-            background: grey;
-            word-break: break-word;
-        }
-    </style>`;
-
-const headerStoryGenerator = (
-    mockProps: any,
-    brand: string,
-    subtitle: string
-) => html` ${styles()}
-    <div class="fake-url">/</div>
-    <dx-header
-        coveo-organization-id="${mockProps.coveoOrganizationId}"
-        coveo-public-access-token="${mockProps.coveoPublicAccessToken}"
-        coveo-search-pipeline="${mockProps.coveoSearchPipeline}"
-        coveo-search-hub="${mockProps.coveoSearchHub}"
-        subtitle="${subtitle}"
-        nav-items="${mockProps.navItems}"
-        versions="${mockProps.versions}"
-        version="1"
-        bail-href="/quip-dev-center"
-        bail-label="Quip Development Center"
-        brand="${brand}"
-        breadcrumbs="${mockProps.breadcrumbs}"
-        signup-link="${mockProps.signupLink}"
-        banner-markup="${mockProps.bannerMarkup}"
-    ></dx-header>`;
-
-// ALL STORIES
-
-// prettier-ignore
-export const Developers = ({navItems, coveoOrganizationId, coveoPublicAccessToken, coveoSearchPipeline, coveoSearchHub}: any) => html `
-    ${styles()}
-    <div class="fake-url"> / </div>
-    <dx-header
-        signup-link='https://www.google.com'
-        login-link='https://www.google.com'
-        coveo-organization-id='${coveoOrganizationId}'
-        coveo-public-access-token='${coveoPublicAccessToken}'
-        coveo-search-pipeline='${coveoSearchPipeline}'
-        coveo-search-hub='${coveoSearchHub}'
-        subtitle='Developers'
-        nav-items='${navItems}'
-    ></dx-header>`;
-Developers.args = mockPropsDevelopers;
-
-// prettier-ignore
-export const ConfigurationNoSearch = ({ navItems }: any) => html `
-    ${styles()}
-    <div class="fake-url"> / </div>
-    <dx-header
-        subtitle='Developers'
-        nav-items='${navItems}'
-    ></dx-header>`;
-ConfigurationNoSearch.args = mockPropsDevelopers;
-
-export const ConfigurationNoNavigation = () =>
-    headerStoryGenerator(mockPropsNoNavigation, "default", "Docs");
-
-// BRAND STORIES
-export const Employees = () =>
-    headerStoryGenerator(mockPropsEmployees, "employees", "Employees");
-export const Marketing = () =>
-    headerStoryGenerator(mockPropsMarketing, "marketing", "Marketing");
-export const Partners = () =>
-    headerStoryGenerator(mockPropsPartners, "partners", "Partners");
-export const Commerce = () =>
-    headerStoryGenerator(mockPropsCommerce, "commerce", "Commerce");
-export const Sales = () =>
-    headerStoryGenerator(mockPropsSales, "sales", "Sales");
-export const Success = () =>
-    headerStoryGenerator(mockPropsSuccess, "success", "Success");
-export const Integration = () =>
-    headerStoryGenerator(mockPropsIntegration, "integration", "Integration");
-export const Platform = () =>
-    headerStoryGenerator(mockPropsPlatform, "platform", "Platform");
-export const Industries = () =>
-    headerStoryGenerator(mockPropsIndustries, "industries", "Industries");
-export const Learning = () =>
-    headerStoryGenerator(mockPropsLearning, "learning", "Learning");
-export const Service = () =>
-    headerStoryGenerator(mockPropsService, "service", "Service");
-export const Analytics = () =>
-    headerStoryGenerator(mockPropsAnalytics, "analytics", "Analytics");
-
-export const MarketingWithoutSignup = () =>
-    headerStoryGenerator(
-        { ...mockPropsMarketing, signupLink: "" },
-        "marketing",
-        "Marketing"
-    );
-
-export const MarketingWithCustomBannerText = () =>
-    headerStoryGenerator(
-        {
-            ...mockPropsMarketing,
-            bannerMarkup:
-                'Salesforce Subscription Management API ("the API") is available as a developer preview. The API is not generally available unless or until Salesforce announces its general availability in documentation or in press releases or public statements. All components of the API including request names, parameters, objects, and fields are subject to change or deprecation at any time, with or without notice. Do not use the API with real data or in a production environment.'
-        },
-        "marketing",
-        "Marketing"
-    );
-
-export const MarketingWithoutBanner = () =>
-    headerStoryGenerator(
-        {
-            ...mockPropsMarketing,
-            bannerMarkup: ""
-        },
-        "marketing",
-        "Marketing"
-    );

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

@@ -1,123 +0,0 @@
-import HeaderMobileNavMenu from "dx/headerMobileNavMenu";
-import { createRenderComponent } from "utils-internal/tests";
-import { getOptionsCount } from "utils-internal/options";
-import navItems from "../../header/__tests__/mockNavDevelopers";
-
-const TAG = "dx-header-mobile-nav-menu";
-const render = createRenderComponent(TAG, HeaderMobileNavMenu);
-
-const navItemsCount = getOptionsCount(navItems);
-
-describe(TAG, () => {
-    it("renders defaulted to closed", () => {
-        const element = render({ navItems });
-
-        const el = element.shadowRoot.querySelector("nav");
-
-        expect(el).not.toBeNull();
-        expect(el.className).toContain("state-closed");
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("removes closed class when open and has no menu items open by default", () => {
-        const element = render({ navItems, open: true });
-
-        const el = element.shadowRoot.querySelector("nav");
-        const menuItemEl = element.shadowRoot.querySelector(
-            "nav-menu_item.state-open"
-        );
-
-        expect(el.className).not.toContain("state-closed");
-        expect(menuItemEl).toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders the corect number of li", () => {
-        const element = render({ navItems, open: true });
-        const lis = element.shadowRoot.querySelectorAll("li");
-        expect(lis.length).toEqual(navItems.length);
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders the corect number of links", () => {
-        const element = render({ navItems, open: true });
-        const links = element.shadowRoot.querySelectorAll(
-            "a, dx-header-mobile-nav-menu-option"
-        );
-        expect(links.length).toEqual(navItemsCount);
-        return expect(element).toBeAccessible();
-    });
-
-    it("applies active class to option href that matches the current pathname", () => {
-        const element = render({
-            navItems,
-            open: true,
-            pathname: "/developers"
-        });
-        const links = element.shadowRoot.querySelectorAll(
-            ".nav-menu_item_cta.state-active"
-        );
-        expect(links.length).toEqual(1);
-        expect(links[0].textContent).toEqual(navItems[0].label);
-        return expect(element).toBeAccessible();
-    });
-
-    it("applies state-open class to a menu item with options based off of the incoming value", () => {
-        const value = "discover";
-        const element = render({ navItems, open: true, value });
-
-        const menuItem = element.shadowRoot.querySelector(
-            `li[data-id="${value}"]`
-        );
-
-        expect(menuItem.className).toContain("state-open");
-        return expect(element).toBeAccessible();
-    });
-
-    it("fires change with the correct value on click of menuitem with options", () => {
-        const id = "discover";
-        const onChangeMock = jest.fn();
-        const element = render({
-            navItems,
-            open: true,
-            onchange: onChangeMock
-        });
-
-        const menuItem = element.shadowRoot.querySelector(
-            `button[data-id="${id}"]`
-        );
-
-        menuItem.click();
-
-        expect(onChangeMock).toHaveBeenCalledTimes(1);
-        expect(onChangeMock.mock.calls[0][0].detail).toEqual(id);
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders the backdrop div when open and closes nav when clicked", () => {
-        const element = render({
-            navItems,
-            open: true
-        });
-        const backdropEl = element.shadowRoot.querySelector(`.backdrop`);
-
-        const onCloseMock = jest.fn();
-        element.addEventListener("requestclose", onCloseMock);
-
-        expect(backdropEl).not.toBeNull();
-
-        backdropEl.click();
-        expect(onCloseMock).toHaveBeenCalledTimes(1);
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("does not render the backdrop div when closed", () => {
-        const element = render({ navItems, open: false });
-        const backdropEl = element.shadowRoot.querySelector(`.backdrop`);
-        expect(backdropEl).toBeNull();
-        return expect(element).toBeAccessible();
-    });
-});

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

@@ -1,38 +0,0 @@
-import HeaderMobileNavMenuOption from "dx/headerMobileNavMenuOption";
-import { createRenderComponent } from "utils-internal/tests";
-
-const TAG = "dx-header-mobile-nav-menu-option";
-const render = createRenderComponent(TAG, HeaderMobileNavMenuOption);
-
-const PROPS = {
-    menuLabel: "build",
-    itemLabel: "documentation"
-};
-
-describe(TAG, () => {
-    it("renders a single dx-button component", () => {
-        const element = render(PROPS);
-
-        const button = element.shadowRoot.querySelectorAll("dx-button");
-
-        expect(button.length).toEqual(1);
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("fires sendGtm function when button is clicked", () => {
-        const sendGtmMock = jest.fn();
-        const element = render({
-            ...PROPS,
-            onclick: sendGtmMock
-        });
-
-        const button = element.shadowRoot.querySelector("dx-button");
-
-        button.click();
-
-        expect(sendGtmMock).toHaveBeenCalled();
-
-        return expect(element).toBeAccessible();
-    });
-});

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

@@ -1,49 +0,0 @@
-import HeaderNav from "dx/headerNav";
-import { createRenderComponent } from "utils-internal/tests";
-import navItems from "../../header/__tests__/mockNavArchitects";
-const TAG = "dx-header-nav";
-
-const render = createRenderComponent(TAG, HeaderNav);
-
-describe(TAG, () => {
-    describe("render", () => {
-        it("renders the correct number of nav-list-items", () => {
-            const element = render({ navItems });
-
-            const items = element.shadowRoot.querySelectorAll(".nav-list-item");
-            const dropdownItems = element.shadowRoot.querySelectorAll("dx-tab");
-
-            // items with more options render something different on mobile and desktop whose display is toggled by `display: none;`
-            const expectedItemLength =
-                navItems.length +
-                navItems.filter((app) => !!app.options).length;
-
-            expect(items.length + dropdownItems.length).toBe(
-                expectedItemLength
-            );
-
-            return expect(element).toBeAccessible();
-        });
-    });
-
-    describe("interactions", () => {
-        it("fires requestopennavmenu event when mobile button is clicked", () => {
-            const element = render({ navItems });
-            const mockOpenNav = jest.fn();
-            element.addEventListener("requestopennavmenu", mockOpenNav);
-            const navOption: HTMLElement = element.shadowRoot.querySelector(
-                "dx-tab.nav-list-item-nav-menu"
-            );
-            expect(navOption).not.toBeNull();
-            navOption.click();
-
-            expect(mockOpenNav).toBeCalledTimes(1);
-            const singleCall = mockOpenNav.mock.calls[0][0];
-            expect(singleCall.detail).toBe(
-                navItems.find(({ options }) => options)!.id
-            );
-
-            return expect(element).toBeAccessible();
-        });
-    });
-});

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

@@ -1,182 +0,0 @@
-import { buildSearchEngine, buildStandaloneSearchBox } from "@coveo/headless";
-import Input from "dx/input";
-import Button from "dx/button";
-import Dropdown from "dx/dropdown";
-import HeaderSearch from "dx/headerSearch";
-import { PopoverRequestCloseType } from "typings/custom";
-import { createRenderComponent } from "utils-internal/tests";
-import { coveoHeaderConfig } from "utils-internal/coveo";
-import { MOCK_SUGGESTIONS } from "./mockData";
-import mockProps from "./mockProps";
-
-const COVEO_CONFIG = {
-    configuration: {
-        organizationId: coveoHeaderConfig.coveoOrganizationId,
-        accessToken: coveoHeaderConfig.coveoPublicAccessToken,
-        search: {
-            pipeline: coveoHeaderConfig.coveoSearchPipeline,
-            searchHub: coveoHeaderConfig.coveoSearchHub
-        }
-    }
-};
-
-const REDIRECT_URL = "https://developer.salesforce.com";
-
-const TAG = "dx-header-search";
-const render = createRenderComponent(TAG, HeaderSearch);
-
-let subscribeCallback: Function | null = null;
-const mockSubscribe = jest.fn((callback) => {
-    subscribeCallback = callback;
-});
-const mockUpdateText = jest.fn();
-
-jest.mock("@coveo/headless", () => {
-    return {
-        buildSearchEngine: jest.fn(),
-        buildStandaloneSearchBox: jest.fn()
-    };
-});
-
-const expectMobileToDefaultRender = ({
-    input,
-    dropdown,
-    button
-}: {
-    input: Input;
-    dropdown: Dropdown;
-    button: Button;
-}) => {
-    expect(dropdown).not.toBeNull();
-    expect(dropdown.classList).toHaveLength(1);
-    expect(dropdown.classList).toContain("mobile_search-dropdown");
-
-    expect(dropdown.open).toBe(false);
-
-    expect(input).not.toBeNull();
-    expect(input.classList).toHaveLength(1);
-    expect(input.classList).toContain("mobile_search-input");
-
-    expect(button).not.toBeNull();
-    expect(button.iconSymbol).toBe("search");
-    expect(button.ariaLabel).toBe("Show mobile search");
-};
-
-const expectSearchToInit = () => {
-    expect(buildSearchEngine).toHaveBeenCalledTimes(1);
-    expect(buildSearchEngine).toHaveBeenCalledWith(COVEO_CONFIG);
-    expect(buildStandaloneSearchBox).toHaveBeenCalledTimes(1);
-    const options = (buildStandaloneSearchBox as jest.Mock).mock.calls[0][1];
-
-    expect(options).toEqual({
-        options: {
-            numberOfSuggestions: 3,
-            redirectionUrl: REDIRECT_URL
-        }
-    });
-    expect(mockSubscribe).toHaveBeenCalledTimes(1);
-    expect(subscribeCallback).not.toBeNull();
-    expect(subscribeCallback).toBeInstanceOf(Function);
-};
-
-describe(TAG, () => {
-    beforeEach(() => {
-        (buildStandaloneSearchBox as jest.Mock).mockReturnValue({
-            subscribe: mockSubscribe,
-            updateText: mockUpdateText,
-            state: { suggestions: MOCK_SUGGESTIONS }
-        });
-    });
-
-    afterEach(() => {
-        subscribeCallback = null;
-    });
-
-    describe("render", () => {
-        it("renders as desktop view", () => {
-            const element = render(mockProps);
-
-            const container: HTMLElement = element.shadowRoot.querySelector(
-                ".desktop_search-container"
-            );
-            expect(container).not.toBeNull();
-            expect(container.classList).toContain("desktop_search-container");
-
-            const suggestionsDropdown: Dropdown =
-                element.shadowRoot.querySelector("dx-dropdown");
-            expect(suggestionsDropdown.options).toHaveLength(0);
-            expect(suggestionsDropdown.open).toBe(false);
-
-            const inputEl = element.shadowRoot.querySelector("dx-input");
-            expect(inputEl).not.toBeNull();
-
-            const button = element.shadowRoot.querySelector("dx-button");
-            expect(button).toBeNull();
-
-            expectSearchToInit();
-
-            return expect(element).toBeAccessible();
-        });
-
-        it("renders as mobile view", () => {
-            const element = render({ ...mockProps, mobile: true });
-            const container: HTMLElement =
-                element.shadowRoot.querySelector("div");
-            expect(container).not.toBeNull();
-            expect(container.classList).toHaveLength(0);
-
-            const dropdowns: Dropdown[] =
-                element.shadowRoot.querySelectorAll("dx-dropdown");
-            expect(dropdowns).toHaveLength(1);
-            const [dropdown] = dropdowns;
-            const input: Input = element.shadowRoot.querySelector("dx-input");
-            const button: Button =
-                element.shadowRoot.querySelector("dx-button");
-            expectMobileToDefaultRender({
-                input,
-                dropdown,
-                button
-            });
-
-            expectSearchToInit();
-
-            return expect(element).toBeAccessible();
-        });
-    });
-
-    describe("mobile only interactions", () => {
-        it("opens dropdown on button click, input is focus and then is requestclose event as keypress-escape", () => {
-            const testType: PopoverRequestCloseType = "keypress-escape";
-            const element = render({ ...mockProps, mobile: true });
-
-            const input: Input = element.shadowRoot.querySelector("dx-input");
-            const dropdown: Dropdown =
-                element.shadowRoot.querySelector("dx-dropdown");
-            const button = element.shadowRoot.querySelector("dx-button");
-            button.click();
-
-            return Promise.resolve()
-                .then(() => {
-                    expect(input.classList).toHaveLength(2);
-                    expect(input.classList).toContain("mobile_search-input");
-                    expect(input.classList).toContain("state-open");
-                    expect(button.iconSymbol).toBe("close");
-                    expect(button.ariaLabel).toBe("Hide mobile search");
-
-                    // yarn jest does not complain about it, but yarn test:unit yes. Comment this for now.
-                    // expect(dropdown.open).toBe(true);
-
-                    dropdown.dispatchEvent(
-                        new CustomEvent("requestclose", { detail: testType })
-                    );
-                })
-                .then(() => {
-                    expectMobileToDefaultRender({
-                        input,
-                        dropdown,
-                        button
-                    });
-                });
-        });
-    });
-});

package/src/modules/dx/headerSearch/__tests__/mockData.ts

@@ -1,11 +0,0 @@
-export const MOCK_SUGGESTIONS = [
-    {
-        value: "First Suggestion"
-    },
-    {
-        value: "Second Suggestion"
-    },
-    {
-        value: "Third Suggestion"
-    }
-];

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

@@ -1,6 +0,0 @@
-import { coveoHeaderConfig } from "utils-internal/coveo";
-
-export default {
-    mobile: false,
-    ...coveoHeaderConfig
-};

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

@@ -1,52 +0,0 @@
-import Helmet from "dx/helmet";
-import { createRenderComponent } from "utils-internal/tests";
-import { HelmetVariant } from "typings/custom";
-
-const TAG = "dx-helmet";
-const render = createRenderComponent(TAG, Helmet);
-
-describe("dx-helmet", () => {
-    it("renders title according to the api", () => {
-        const title = "Super Cool Title";
-        const component = render({ title });
-
-        const titleSpan: HTMLElement =
-            component.shadowRoot.querySelector(".home-link-title");
-        expect(titleSpan.textContent).toBe(title);
-
-        const links: HTMLElement[] = component.shadowRoot.querySelectorAll("a");
-        expect(links.length).toBe(1);
-
-        return expect(component).toBeAccessible();
-    });
-
-    it("renders second link if currentPropertyHref is passed in through the api", () => {
-        const currentPropertyTitle = "MuleSoft";
-        const currentPropertyHref = "https://developer.mulesoft.com";
-        const component = render({ currentPropertyTitle, currentPropertyHref });
-
-        const links: HTMLElement[] = component.shadowRoot.querySelectorAll("a");
-        expect(links.length).toBe(2);
-
-        const currentPropertyLink: HTMLElement = links[1];
-        expect(currentPropertyLink.textContent).toBe(currentPropertyTitle);
-        expect(currentPropertyLink.getAttribute("href")).toBe(
-            currentPropertyHref
-        );
-
-        return expect(component).toBeAccessible();
-    });
-
-    it("renders variant according to the api", () => {
-        const variant: HelmetVariant = "dark";
-        const component = render({ variant });
-
-        const div: HTMLElement = component.shadowRoot.querySelector("div");
-        expect(div).not.toBeNull();
-        expect(div.classList).toHaveLength(2);
-        expect(div.classList).toContain("helmet");
-        expect(div.classList).toContain("variant_dark");
-
-        return expect(component).toBeAccessible();
-    });
-});

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

@@ -1,53 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-helmet",
-    component: "dx-helmet"
-};
-
-const markup = html`
-    <style>
-        body {
-            padding: 0 !important;
-        }
-    </style>
-`;
-
-export const Clear = () => html`
-    ${markup}
-    <dx-helmet title="Salesforce Developers" variant="clear"></dx-helmet>
-`;
-
-export const Dark = () => html`
-    ${markup}
-    <dx-helmet title="Salesforce Developers" variant="dark"></dx-helmet>
-`;
-
-export const Light = () => html`
-    ${markup}
-    <dx-helmet title="Salesforce Developers" variant="light"></dx-helmet>
-`;
-
-export const Neutral = () => html`
-    ${markup}
-    <dx-helmet title="Salesforce Developers" variant="neutral"></dx-helmet>
-`;
-
-export const CustomPadding = () => html`
-    ${markup}
-    <dx-helmet
-        title="Salesforce Developers"
-        variant="neutral"
-        horizontal-padding="2rem"
-    ></dx-helmet>
-`;
-
-export const NeutralWithCurrentPropertyLink = () => html`
-    ${markup}
-    <dx-helmet
-        title="Salesforce Developers"
-        current-property-title="MuleSoft"
-        current-property-href="https://developer.mulesoft.com/"
-        variant="neutral"
-    ></dx-helmet>
-`;