@salesforcedevs/dx-components 0.26.0 → 0.26.1-alpha0.4

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

@@ -1,115 +0,0 @@
-export const mockNav = [
-    {
-        id: "overview",
-        label: "Overview",
-        link: {
-            href: "/overview",
-            target: null
-        }
-    },
-    {
-        id: "guides",
-        label: "Guides",
-        link: {
-            href: "/guides",
-            target: null
-        }
-    },
-    {
-        id: "reference",
-        label: "Reference",
-        link: {
-            href: "/reference",
-            target: null
-        }
-    },
-    {
-        id: "examples",
-        label: "Examples",
-        link: {
-            href: "/examples",
-            target: null
-        }
-    }
-];
-
-export const mockNavEmployees = [
-    {
-        id: "overview",
-        label: "Overview",
-        link: {
-            href: "/overview",
-            target: null
-        }
-    },
-    {
-        id: "guides",
-        label: "Guides",
-        link: {
-            href: "/guides",
-            target: null
-        }
-    },
-    {
-        id: "reference",
-        label: "Reference",
-        link: {
-            href: "/reference",
-            target: null
-        }
-    },
-    {
-        id: "examples",
-        label: "Examples",
-        link: {
-            href: "/examples",
-            target: null
-        }
-    }
-];
-
-export const mockNavMarketing = [
-    {
-        id: "overview",
-        label: "Overview",
-        link: {
-            href: "/overview",
-            target: null
-        }
-    },
-    {
-        id: "guides",
-        label: "Guides",
-        link: {
-            href: "/guides",
-            target: null
-        }
-    },
-    {
-        id: "reference",
-        label: "Reference",
-        link: {
-            href: "/reference",
-            target: null
-        }
-    },
-    {
-        id: "examples",
-        label: "Examples",
-        link: {
-            href: "/examples",
-            target: null
-        }
-    }
-];
-
-export const mockNavPartners = mockNav;
-export const mockNavCommerce = mockNav;
-export const mockNavSales = mockNav;
-export const mockNavSuccess = mockNav;
-export const mockNavIntegration = mockNav;
-export const mockNavPlatform = mockNav;
-export const mockNavIndustries = mockNav;
-export const mockNavLearning = mockNav;
-export const mockNavService = mockNav;
-export const mockNavAnalytics = mockNav;

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

@@ -1,164 +0,0 @@
-import {
-    mockNavEmployees,
-    mockNavMarketing,
-    mockNavPartners,
-    mockNavCommerce,
-    mockNavSales,
-    mockNavSuccess,
-    mockNavIntegration,
-    mockNavPlatform,
-    mockNavIndustries,
-    mockNavLearning,
-    mockNavService,
-    mockNavAnalytics
-} from "./mockNavs";
-import mockNavDevelopers from "./mockNavDevelopers";
-import { coveoHeaderConfig } from "../../../utils-internal/coveo/coveo";
-
-const versions = JSON.stringify([
-    {
-        id: "1",
-        label: "v1"
-    },
-    {
-        id: "2",
-        label: "v2"
-    },
-    {
-        id: "3",
-        label: "v3"
-    },
-    {
-        id: "4",
-        label: "v4"
-    }
-]);
-
-export const mockPropsDevelopers = {
-    navItems: JSON.stringify(mockNavDevelopers),
-    subtitle: "Developers",
-    signupLink: "/sign-up",
-    ...coveoHeaderConfig
-};
-
-export const mockPropsNoNavigation = {
-    subtitle: "Developers",
-    ...coveoHeaderConfig
-};
-
-export const mockPropsDevWebsite = {
-    version: "1",
-    versions,
-    ...coveoHeaderConfig,
-    signupLink: "/sign-up",
-    bannerMarkup:
-        '<span><a href="https://forms.gle/TdSyKFPHXoBx7seM9" target="blank">Share your feedback</a>about our new site.</span>'
-};
-
-export const mockPropsEmployees = {
-    bailHref: "/quip-dev-center",
-    bailLabel: "Quip Development Center",
-    brand: "employees",
-    navItems: JSON.stringify(mockNavEmployees),
-    subtitle: "Employees",
-    ...mockPropsDevWebsite
-};
-
-export const mockPropsMarketing = {
-    bailHref: "/quip-dev-center",
-    bailLabel: "Quip Development Center",
-    brand: "marketing",
-    navItems: JSON.stringify(mockNavMarketing),
-    subtitle: "Marketing",
-    ...mockPropsDevWebsite
-};
-
-export const mockPropsPartners = {
-    bailHref: "/quip-dev-center",
-    bailLabel: "Quip Development Center",
-    brand: "partners",
-    navItems: JSON.stringify(mockNavPartners),
-    subtitle: "Partners",
-    ...mockPropsDevWebsite
-};
-
-export const mockPropsCommerce = {
-    bailHref: "/quip-dev-center",
-    bailLabel: "Quip Development Center",
-    brand: "commerce",
-    navItems: JSON.stringify(mockNavCommerce),
-    subtitle: "Commerce",
-    ...mockPropsDevWebsite
-};
-
-export const mockPropsSales = {
-    bailHref: "/quip-dev-center",
-    bailLabel: "Quip Development Center",
-    brand: "sales",
-    navItems: JSON.stringify(mockNavSales),
-    subtitle: "Sales",
-    ...mockPropsDevWebsite
-};
-
-export const mockPropsSuccess = {
-    bailHref: "/quip-dev-center",
-    bailLabel: "Quip Development Center",
-    brand: "success",
-    navItems: JSON.stringify(mockNavSuccess),
-    subtitle: "Success",
-    ...mockPropsDevWebsite
-};
-
-export const mockPropsIntegration = {
-    bailHref: "/quip-dev-center",
-    bailLabel: "Quip Development Center",
-    brand: "integration",
-    navItems: JSON.stringify(mockNavIntegration),
-    subtitle: "Integration",
-    ...mockPropsDevWebsite
-};
-
-export const mockPropsPlatform = {
-    bailHref: "/quip-dev-center",
-    bailLabel: "Quip Development Center",
-    brand: "platform",
-    navItems: JSON.stringify(mockNavPlatform),
-    subtitle: "Platform",
-    ...mockPropsDevWebsite
-};
-
-export const mockPropsIndustries = {
-    bailHref: "/quip-dev-center",
-    bailLabel: "Quip Development Center",
-    brand: "industries",
-    navItems: JSON.stringify(mockNavIndustries),
-    subtitle: "Industries",
-    ...mockPropsDevWebsite
-};
-
-export const mockPropsLearning = {
-    bailHref: "/quip-dev-center",
-    bailLabel: "Quip Development Center",
-    brand: "learning",
-    navItems: JSON.stringify(mockNavLearning),
-    subtitle: "Learning",
-    ...mockPropsDevWebsite
-};
-
-export const mockPropsService = {
-    bailHref: "/quip-dev-center",
-    bailLabel: "Quip Development Center",
-    brand: "service",
-    navItems: JSON.stringify(mockNavService),
-    subtitle: "Service",
-    ...mockPropsDevWebsite
-};
-
-export const mockPropsAnalytics = {
-    bailHref: "/quip-dev-center",
-    bailLabel: "Quip Development Center",
-    brand: "analytics",
-    navItems: JSON.stringify(mockNavAnalytics),
-    subtitle: "Analytics",
-    ...mockPropsDevWebsite
-};

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,129 +0,0 @@
-<template>
-    <dx-brand-theme-provider brand={brand}>
-        <header class={className}>
-            <dx-skip-nav-link></dx-skip-nav-link>
-            <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"
-    );