@salesforcedevs/dx-components 1.3.194 → 1.3.196

package/src/modules/dx/header/__benchmarks__/header.benchmark.js

@@ -1,45 +0,0 @@
-// import Header from "dx/header";
-// import { createElement } from "lwc";
-
-// const navItems = [
-//     {
-//         id: "home",
-//         label: "Home",
-//         link: {
-//             href: "/developers",
-//             target: null
-//         }
-//     },
-//     {
-//         id: "documentation",
-//         label: "Documentation",
-//         link: {
-//             href: "/docs",
-//             target: null
-//         }
-//     },
-//     {
-//         id: "notes",
-//         label: "Notes",
-//         link: {
-//             href: "/notes",
-//             target: null
-//         }
-//     }
-// ];
-
-describe("dx-header", () => {
-    benchmark("creates and renders", () => {
-        let element;
-        run(() => {
-            // element = createElement("dx-header", {
-            //     is: Header
-            // });
-            // Object.assign(element, { navItems });
-            // document.body.appendChild(element);
-        });
-        after(() => {
-            return element && element.parentElement.removeChild(element);
-        });
-    });
-});

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

@@ -1,99 +0,0 @@
-@import "dxHelpers/commonHeader";
-
-:host {
-    --dx-c-header-search-width: 316px;
-    --dx-g-text-xs: 14px;
-}
-
-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) {
-    .header_l2_group-nav > .header_l2_group-nav_menu-ctas {
-        display: flex;
-    }
-}

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

@@ -1,132 +0,0 @@
-<template>
-    <dx-brand-theme-provider brand={brand}>
-        <header class={className}>
-            <dx-skip-nav-link></dx-skip-nav-link>
-            <dx-banner
-                if:true={showBanner}
-                banner-markup={bannerMarkup}
-            ></dx-banner>
-            <div class="header_l1">
-                <dx-logo label={title}></dx-logo>
-                <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={showTbidLogin}
-                    class="header-tbid-login"
-                    onclick={closeMobileNavMenu}
-                >
-                    <dw-tbid-login-menu
-                        tbid-api-base-url={tbidApiBaseUrl}
-                        tbid-base-url={tbidBaseUrl}
-                    ></dw-tbid-login-menu>
-                </div>
-                <div if:true={showSignup} class="header-login-signup">
-                    <dx-button
-                        aria-label="Browse Trials"
-                        size="small"
-                        href={signupLink}
-                        onclick={handleSignUpClick}
-                    >
-                        Browse Trials
-                    </dx-button>
-                </div>
-            </div>
-            <div class="header_l2">
-                <div class="header_l2_group header_l2_group-title">
-                    <a href="/" class="home-link" if:true={isValidSubtitle}>
-                        <dx-icon
-                            class="brand-icon"
-                            if:true={isValidBrand}
-                            sprite="salesforcebrand"
-                            symbol={brand}
-                            size="xlarge"
-                        ></dx-icon>
-                        <span class="dx-text-display-6 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.ts

@@ -1,21 +0,0 @@
-import { HeaderBase } from "dxBaseElements/headerBase";
-
-export default class Header extends HeaderBase {
-    private get showTbidLogin(): boolean {
-        return this.showSignup;
-    }
-
-    private get showSignup(): boolean {
-        return this.signupLink
-            ? (this.mobile && !this.isSearchOpen) || !this.mobile
-            : false;
-    }
-
-    protected mobileBreakpoint(): string {
-        return "768px";
-    }
-
-    get isValidSubtitle() {
-        return this.isValidBrand || this.subtitle;
-    }
-}