@salesforcedevs/dx-components 0.17.0 → 0.17.1-review-diff1

package/src/modules/dx/header/header.css

@@ -1,109 +0,0 @@
-@import "helpers/commonHeader";
-
-:host {
-    --dx-c-header-search-width: 316px;
-    --dx-g-text-xs: 14px;
-}
-
-dx-breadcrumbs {
-    width: calc(
-        100% - var(--dx-c-header-search-width) - var(--dx-g-spacing-md)
-    );
-}
-
-dx-header-mobile-nav-menu {
-    --dx-c-color-background: var(--dx-g-brand-current-color-background);
-    --dx-c-button-color-background-inactive: var(
-        --dx-g-brand-current-button-color-background-inactive
-    );
-    --dx-c-button-color-background-active: var(
-        --dx-g-brand-current-button-color-background-active
-    );
-    --dx-c-color: var(--dx-g-brand-current-color);
-    --dx-c-color-border: var(--dx-g-brand-current-color-border);
-    --dx-c-color-background-2: var(--dx-g-brand-current-color-background-2);
-    --dx-c-button-color-background-inactive-hover: var(
-        --dx-g-brand-current-button-color-background-inactive-hover
-    );
-    --dx-c-color-border-2: var(--dx-g-brand-current-color-border-2);
-}
-
-.header_l2_group-title {
-    margin-right: var(--dx-g-spacing-4xl);
-}
-
-.header_l2_group-nav_menu-ctas {
-    display: none;
-    position: relative;
-    justify-content: center;
-    align-items: center;
-    padding-right: var(--dx-g-spacing-sm);
-    height: 100%;
-}
-
-.header_l2_group-nav_menu-ctas::after {
-    content: "";
-    position: absolute;
-    right: 0;
-    top: var(--dx-g-spacing-sm);
-    height: calc(100% - var(--dx-g-spacing-md));
-    width: 1px;
-    background: transparent;
-    transition: var(--dx-g-transition-hue-1x);
-}
-
-header.has-navscrollshadow .header_l2_group-nav_menu-ctas::after {
-    background: var(--dx-g-brand-current-color-border);
-}
-
-.header_l2_group-nav_menu-button {
-    --dx-c-button-primary-color: var(--dx-g-blue-vibrant-20);
-    --dx-c-button-secondary-color-hover: var(
-        --dx-g-brand-current-button-color-background-inactive
-    );
-}
-
-@media (max-width: 1024px) {
-    .header_l2 {
-        flex-wrap: wrap;
-        height: unset;
-        padding: 0;
-    }
-
-    .header_l2_group-title {
-        margin-right: 0;
-        padding: 12px var(--dx-g-page-padding-horizontal);
-    }
-
-    .header_l2_group {
-        width: 100%;
-    }
-
-    .header_l2_group-nav {
-        height: var(--dx-g-spacing-3xl);
-        padding: 0;
-        padding-left: var(--dx-g-spacing-sm);
-    }
-
-    .header_l2_group-nav_overflow {
-        margin-right: var(--dx-g-spacing-sm);
-    }
-
-    .header_version-dropdown {
-        margin-left: auto;
-    }
-
-    .has-nav-items .header_l2_group-title {
-        border-bottom: 1px solid var(--dx-g-brand-current-color-border-2);
-    }
-}
-
-@media (max-width: 768px) {
-    dx-breadcrumbs {
-        width: 70%;
-    }
-
-    .header_l2_group-nav > .header_l2_group-nav_menu-ctas {
-        display: flex;
-    }
-}

package/src/modules/dx/header/header.html

@@ -1,128 +0,0 @@
-<template>
-    <dx-brand-theme-provider brand={brand}>
-        <header class={className}>
-            <dx-banner 
-                if:true={bannerMarkup}
-                banner-markup={bannerMarkup}
-            ></dx-banner>
-            <div class="header_l1">
-                <dx-breadcrumbs
-                    title={title}
-                    breadcrumbs={breadcrumbs}
-                    logo
-                    nav-items={navItems}
-                    pathname={pathname}
-                    truncate
-                ></dx-breadcrumbs>
-                <div class="header-cta-container">
-                    <dx-header-search
-                        if:true={hasSearch}
-                        coveo-organization-id={coveoOrganizationId}
-                        coveo-public-access-token={coveoPublicAccessToken}
-                        coveo-search-pipeline={coveoSearchPipeline}
-                        coveo-search-hub={coveoSearchHub}
-                        mobile={mobile}
-                        onstatechange={handleStateChange}
-                    ></dx-header-search>
-                </div>
-                <div if:true={showSignup} class="header-login-signup">
-                    <dx-button
-                        aria-label="Sign Up For Salesforce Developer Edition"
-                        size="small"
-                        href={signupLink}
-                        onclick={handleSignUpClick}
-                    >
-                        Sign Up
-                    </dx-button>
-                </div>
-            </div>
-            <div class="header_l2">
-                <div class="header_l2_group header_l2_group-title">
-                    <a href="/" class="home-link">
-                        <dx-icon
-                            class="brand-icon"
-                            if:true={isValidBrand}
-                            sprite="salesforcebrand"
-                            symbol={brand}
-                            size="xlarge"
-                        ></dx-icon>
-                        <span class="dx-text-heading-4 subtitle">
-                            {subtitle}
-                        </span>
-                    </a>
-                    <dx-dropdown
-                        class="header_version-dropdown"
-                        if:true={versions}
-                        options={versions}
-                        value={version}
-                        onchange={onVersionChange}
-                        small
-                    >
-                        <dx-button
-                            aria-label="Select Version"
-                            class="header_version-selector"
-                            variant="tertiary"
-                            icon-symbol="chevrondown"
-                        >
-                            {versionLabel}
-                        </dx-button>
-                    </dx-dropdown>
-                </div>
-                <div
-                    class="header_l2_group header_l2_group-nav"
-                    if:true={hasNavItems}
-                >
-                    <div class="header_l2_group-nav_menu-ctas">
-                        <dx-button
-                            aria-label="Toggle Mobile Nav Menu"
-                            class="header_l2_group-nav_menu-button"
-                            icon-size="large"
-                            icon-symbol={mobileMenuIconSymbol}
-                            variant="tertiary"
-                            onclick={toggleMobileNavMenu}
-                        ></dx-button>
-                    </div>
-                    <div
-                        class="header_l2_group-nav_overflow"
-                        onscroll={onNavScroll}
-                    >
-                        <dx-header-nav
-                            nav-items={navItems}
-                            onrequestopennavmenu={onRequestOpenNavMenu}
-                            pathname={pathname}
-                            variant="small"
-                        ></dx-header-nav>
-                        <dx-button
-                            aria-label={bailLabel}
-                            if:true={hasBailLink}
-                            href={bailHref}
-                            variant="tertiary"
-                            icon-symbol="new_window"
-                        >
-                            {bailLabel}
-                        </dx-button>
-                    </div>
-                </div>
-            </div>
-            <dx-header-mobile-nav-menu
-                nav-items={navItems}
-                onchange={onMobileNavMenuChange}
-                open={showMobileNavMenu}
-                pathname={pathname}
-                value={mobileNavMenuValue}
-                onrequestclose={closeMobileNavMenu}
-                if:true={hasNavItems}
-            >
-                <dx-button
-                    aria-label={bailLabel}
-                    if:true={hasBailLink}
-                    href={bailHref}
-                    variant="tertiary"
-                    icon-symbol="new_window"
-                >
-                    {bailLabel}
-                </dx-button>
-            </dx-header-mobile-nav-menu>
-        </header>
-    </dx-brand-theme-provider>
-</template>

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/header/header.ts

@@ -1,27 +0,0 @@
-import { api } from "lwc";
-import { HeaderBase } from "utils/headerBase";
-import { toJson } from "utils/normalizers";
-import type { Option } from "typings/custom";
-
-export default class Header extends HeaderBase {
-    private _breadcrumbs!: Option[];
-
-    @api
-    get breadcrumbs() {
-        return this._breadcrumbs;
-    }
-
-    set breadcrumbs(value) {
-        this._breadcrumbs = toJson(value);
-    }
-
-    private get showSignup(): boolean {
-        return this.signupLink
-            ? (this.mobile && !this.isSearchOpen) || !this.mobile
-            : false;
-    }
-
-    protected mobileBreakpoint(): string {
-        return "768px";
-    }
-}

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,49 +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-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();
-        });
-    });
-});