@salesforcedevs/dx-components 0.3.12 → 0.3.14-banner-alpha1

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

@@ -1,136 +0,0 @@
-import { html } from "lit-html";
-import {
-    mockPropsDevelopers,
-    mockPropsEmployees,
-    mockPropsMarketing,
-    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}"
-    ></dx-header>`;
-
-// ALL STORIES
-
-// prettier-ignore
-export const Developers = ({navItems, coveoOrganizationId, coveoPublicAccessToken, coveoSearchPipeline, coveoSearchHub}: any) => html `
-    ${styles()}
-    <div class="fake-url"> / </div>
-    <dx-header
-        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;
-
-// 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");

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

@@ -1,123 +0,0 @@
-import HeaderMobileNavMenu from "dx/headerMobileNavMenu";
-import { createRenderComponent } from "utils/tests";
-import { getOptionsCount } from "utils/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/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,50 +0,0 @@
-import HeaderNav from "dx/headerNav";
-import { createRenderComponent } from "utils/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-header-nav-option"
-            );
-
-            // 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 btn: HTMLElement = element.shadowRoot.querySelector(
-                "button.nav-list-item-nav-menu"
-            );
-            btn.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/headerNavOption/__tests__/headerNavOption.test.ts

@@ -1,47 +0,0 @@
-import HeaderNavOption from "dx/headerNavOption";
-import { createRenderComponent } from "utils/tests";
-
-const TAG = "dx-header-nav-option";
-const render = createRenderComponent(TAG, HeaderNavOption);
-
-const PROPS = {
-    label: "documentation"
-};
-
-describe(TAG, () => {
-    it("renders a single button", () => {
-        const element = render(PROPS);
-
-        const button = element.shadowRoot.querySelectorAll("a");
-
-        expect(button.length).toEqual(1);
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("render a span with the correct label", () => {
-        const element = render(PROPS);
-
-        const span = element.shadowRoot.querySelector("span");
-
-        expect(span.textContent).toEqual(PROPS.label);
-
-        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("a");
-
-        button.click();
-
-        expect(sendGtmMock).toHaveBeenCalled();
-
-        return expect(element).toBeAccessible();
-    });
-});

package/src/modules/dx/headerNavOption/headerNavOption.css

@@ -1,38 +0,0 @@
-@import "helpers/reset";
-
-a {
-    text-decoration: none;
-}
-
-.nav-list-item {
-    position: relative;
-    display: flex;
-    align-items: center;
-    height: var(--dx-g-spacing-xl);
-    padding: 0 var(--dx-g-spacing-md);
-    border: 0;
-    border-radius: var(--dx-g-spacing-md);
-    font-family: var(--dx-g-font-display);
-    font-size: var(--dx-g-text-sm);
-    white-space: nowrap;
-    color: var(--dx-g-blue-vibrant-20);
-    background: transparent;
-    transition: var(--dx-g-transition-hue-1x);
-    cursor: pointer;
-    outline-offset: -1px;
-}
-
-.nav-list-item > span {
-    margin-top: var(--dx-g-spacing-xs);
-}
-
-.nav-list-item:hover,
-.nav-list-item:active,
-button.nav-list-item[aria-expanded="true"] {
-    background: var(--dx-g-brand-current-button-color-background-inactive);
-}
-
-.nav-list-item.state-active {
-    background: var(--dx-g-brand-current-button-color-background-active);
-    color: var(--dx-g-brand-current-color);
-}

package/src/modules/dx/headerNavOption/headerNavOption.html

@@ -1,5 +0,0 @@
-<template>
-    <a class={className} href={href} onclick={sendGtm}>
-        <span>{label}</span>
-    </a>
-</template>

package/src/modules/dx/headerNavOption/headerNavOption.ts

@@ -1,15 +0,0 @@
-import { LightningElement, api } from "lwc";
-import { track } from "dx/instrumentation";
-
-export default class HeaderNavOption extends LightningElement {
-    @api className: string | null = null;
-    @api label: string | null = null;
-    @api href: string | null = null;
-
-    private sendGtm(e: PointerEvent) {
-        track(e.currentTarget, "custEv_topNavLinkClick", {
-            heading_text: this.label || undefined,
-            link_text: this.href || undefined
-        });
-    }
-}