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

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

@@ -1,151 +1,31 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/commonHeader";
 
 :host {
     --dx-c-header-search-width: 316px;
+    --dx-g-text-xs: 14px;
 }
 
-.header_l2_group-nav_overflow {
-    position: relative;
-    display: flex;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-    transition: var(--dx-g-transition-hue-1x);
-}
-
-header {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    position: relative;
-}
-
-header > * {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
-
-header.state-show-mobile-nav .header_l2_group-nav_overflow {
-    opacity: 0;
-    pointer-events: none;
-    overflow: hidden;
-}
-
-h4 {
-    color: var(--dx-g-blue-vibrant-20);
-}
-
-/* BETA FEEDBACK */
-
-.header_beta-feedback {
-    --primary-color: var(--dx-g-cloud-blue-vibrant-50);
-    --secondary-color: var(--dx-g-cloud-blue-vibrant-40);
-
-    min-height: 24px;
-    padding: 0 var(--dx-g-page-padding-horizontal);
-    background: repeating-linear-gradient(
-        45deg,
-        var(--primary-color),
-        var(--primary-color) 20px,
-        var(--secondary-color) 20px,
-        var(--secondary-color) 40px
+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
     );
-    justify-content: center;
-}
-
-.header_beta-feedback-inner {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    background: var(--primary-color);
-    padding: var(--dx-g-spacing-xs) var(--dx-g-spacing-sm);
-    color: white;
-    font-weight: bold;
-}
-
-.header_beta-feedback a {
-    text-decoration: underline;
-    transition: var(--dx-g-transition-hue-1x);
-}
-
-.header_beta-feedback a:hover {
-    opacity: 0.8;
-}
-
-.header_beta-feedback dx-icon {
-    margin-right: var(--dx-g-spacing-sm);
-}
-
-/* First row */
-
-.header_l1 {
-    height: var(--dx-g-spacing-3xl);
-    background: var(--dx-g-brand-current-color-background-2);
-    padding: 0 var(--dx-g-page-padding-horizontal);
-    position: relative;
-}
-
-.header-cta-container {
-    flex-grow: 1;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-end;
-}
-
-/* Second row */
-
-.header_l2 {
-    height: var(--dx-g-spacing-4xl);
-    background: var(--dx-g-brand-current-color-background);
-    padding: var(--dx-g-spacing-lg) var(--dx-g-page-padding-horizontal);
-}
-
-.header_l2_group {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
+    --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 {
-    flex-shrink: 0;
     margin-right: var(--dx-g-spacing-4xl);
 }
 
-.header_l2_group-title
-    .header_version-selector[aria-expanded="true"]::part(icon) {
-    transform: rotateX(180deg);
-}
-
-.header_l2_group-title .header_version-selector::part(container) {
-    padding: 0 var(--dx-g-spacing-xs);
-}
-
-.header_l2_group-title h4 {
-    transform: translateY(4px); /* ghost padding */
-    margin-right: var(--dx-g-spacing-md);
-}
-
-.header_l2_group-title > dx-icon {
-    margin-right: var(--dx-g-spacing-sm);
-    color: var(--dx-g-brand-current-color-background);
-    border-radius: var(--dx-g-spacing-xs);
-}
-
-.header_l2_group-nav {
-    flex-grow: 1;
-}
-
-.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
-    );
-}
-
 .header_l2_group-nav_menu-ctas {
     display: none;
     position: relative;
@@ -170,35 +50,23 @@ header.has-navscrollshadow .header_l2_group-nav_menu-ctas::after {
     background: var(--dx-g-brand-current-color-border);
 }
 
-.header_l2_group-nav_overflow > dx-button {
-    margin-left: auto;
-}
-
-.home-link {
-    display: contents;
-}
-
-.home-link h4:not(:first-child) {
-    margin-left: var(--dx-g-spacing-sm);
-}
-
-dx-breadcrumbs {
-    width: calc(
-        100% - var(--dx-c-header-search-width) - var(--dx-g-spacing-md)
+.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;
-        flex-wrap: wrap;
     }
 
     .header_l2_group-title {
         margin-right: 0;
         padding: 12px var(--dx-g-page-padding-horizontal);
-        border-bottom: 1px solid var(--dx-g-brand-current-color-border-2);
     }
 
     .header_l2_group {
@@ -218,22 +86,13 @@ dx-breadcrumbs {
     .header_version-dropdown {
         margin-left: auto;
     }
-}
 
-@media (max-width: 768px) {
-    dx-breadcrumbs {
-        width: calc(100% - var(--dx-g-spacing-3xl));
-    }
-
-    .header_l2_group-nav {
-        padding-left: calc(var(--dx-g-page-padding-horizontal) - 4px);
-    }
-
-    .header_l2_group-nav_overflow {
-        overflow-x: auto;
-        overflow-y: hidden;
+    .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,27 +1,13 @@
 <template>
     <dx-brand-theme-provider brand={brand}>
         <header class={className}>
-            <div class="header_beta-feedback">
-                <div class="header_beta-feedback-inner dx-text-body-4">
-                    <dx-icon symbol="announcement"></dx-icon>
-                    <span>
-                        This site is in beta.&nbsp;
-                        <a
-                            href="https://forms.gle/TdSyKFPHXoBx7seM9"
-                            target="blank"
-                        >
-                            Share your feedback
-                        </a>
-                    </span>
-                </div>
-            </div>
+            <dx-skip-nav-link></dx-skip-nav-link>
+            <dx-banner
+                if:true={showBanner}
+                banner-markup={bannerMarkup}
+            ></dx-banner>
             <div class="header_l1">
-                <dx-breadcrumbs
-                    title={title}
-                    breadcrumbs={breadcrumbs}
-                    nav-items={navItems}
-                    pathname={pathname}
-                ></dx-breadcrumbs>
+                <dx-logo label={title}></dx-logo>
                 <div class="header-cta-container">
                     <dx-header-search
                         if:true={hasSearch}
@@ -30,8 +16,26 @@
                         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></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">
@@ -43,7 +47,9 @@
                             symbol={brand}
                             size="xlarge"
                         ></dx-icon>
-                        <h4 class="dx-text-heading-4">{subtitle}</h4>
+                        <span class="dx-text-heading-4 subtitle">
+                            {subtitle}
+                        </span>
                     </a>
                     <dx-dropdown
                         class="header_version-dropdown"
@@ -54,7 +60,7 @@
                         small
                     >
                         <dx-button
-                            aria-label="version-button"
+                            aria-label="Select Version"
                             class="header_version-selector"
                             variant="tertiary"
                             icon-symbol="chevrondown"
@@ -63,10 +69,13 @@
                         </dx-button>
                     </dx-dropdown>
                 </div>
-                <div class="header_l2_group header_l2_group-nav">
+                <div
+                    class="header_l2_group header_l2_group-nav"
+                    if:true={hasNavItems}
+                >
                     <div class="header_l2_group-nav_menu-ctas">
                         <dx-button
-                            aria-label="menu-button"
+                            aria-label="Toggle Mobile Nav Menu"
                             class="header_l2_group-nav_menu-button"
                             icon-size="large"
                             icon-symbol={mobileMenuIconSymbol}
@@ -82,9 +91,10 @@
                             nav-items={navItems}
                             onrequestopennavmenu={onRequestOpenNavMenu}
                             pathname={pathname}
+                            variant="small"
                         ></dx-header-nav>
                         <dx-button
-                            aria-label="headernav-button"
+                            aria-label={bailLabel}
                             if:true={hasBailLink}
                             href={bailHref}
                             variant="tertiary"
@@ -102,9 +112,10 @@
                 pathname={pathname}
                 value={mobileNavMenuValue}
                 onrequestclose={closeMobileNavMenu}
+                if:true={hasNavItems}
             >
                 <dx-button
-                    aria-label="ariaLabel"
+                    aria-label={bailLabel}
                     if:true={hasBailLink}
                     href={bailHref}
                     variant="tertiary"

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

@@ -1,187 +1,17 @@
-import { LightningElement, api } from "lwc";
-import cx from "classnames";
-import { Brand, Option } from "typings/custom";
-import { toJson } from "utils/normalizers";
+import { HeaderBase } from "dxBaseElements/headerBase";
 
-const VALID_BRANDS = [
-    "analytics",
-    "commerce",
-    "employees",
-    "industries",
-    "integration",
-    "learning",
-    "marketing",
-    "partners",
-    "platform",
-    "sales",
-    "service",
-    "success"
-];
-
-export default class Header extends LightningElement {
-    @api bailHref?: string | null = null;
-    @api bailLabel?: string | null = null;
-    @api brand: Brand | null = null;
-    @api coveoOrganizationId: string | null = null;
-    @api coveoPublicAccessToken: string | null = null;
-    @api coveoSearchHub: string | null = null;
-    @api coveoSearchPipeline: string | null = null;
-    @api href = null;
-    @api subtitle!: string;
-    @api title: string = "Salesforce";
-    @api version?: string | null = null;
-
-    @api
-    get breadcrumbs() {
-        return this._breadcrumbs;
-    }
-    set breadcrumbs(value) {
-        this._breadcrumbs = toJson(value);
-    }
-
-    @api
-    get navItems() {
-        if (this.subtitle) {
-            return this._navItems;
-        }
-        return [];
-    }
-    set navItems(value) {
-        this._navItems = toJson(value);
-    }
-
-    @api
-    get versions() {
-        return this._versions;
-    }
-    set versions(value) {
-        this._versions = toJson(value);
-    }
-
-    private _navItems!: Option[];
-    private _breadcrumbs!: Option[];
-    private _versions!: Option[];
-    private matchMedia!: MediaQueryList;
-    private mobile: boolean = false;
-    private mobileNavMenuValue: string | null = null;
-    private showMobileNavMenu: boolean = false;
-    private showNavScrollShadow: boolean = false;
-
-    get url() {
-        return this.href ? new URL(this.href!) : window.location;
-    }
-
-    get hasBailLink(): boolean {
-        return !!(this.bailHref && this.bailLabel);
-    }
-
-    get hasSearch() {
-        return (
-            this.coveoOrganizationId &&
-            this.coveoPublicAccessToken &&
-            this.coveoSearchHub &&
-            this.coveoSearchPipeline
-        );
-    }
-
-    get pathname() {
-        return this.url.pathname;
-    }
-
-    get className() {
-        return cx(
-            this.showMobileNavMenu && "state-show-mobile-nav",
-            this.showNavScrollShadow &&
-                !this.showMobileNavMenu &&
-                "has-navscrollshadow"
-        );
+export default class Header extends HeaderBase {
+    private get showTbidLogin(): boolean {
+        return this.showSignup;
     }
 
-    get versionLabel() {
-        const selectedVersion = (this.versions || []).find(
-            (v) => v.id === this.version
-        );
-        return selectedVersion ? selectedVersion.label : "";
-    }
-
-    get mobileMenuIconSymbol() {
-        return this.showMobileNavMenu ? "close" : "rows";
-    }
-
-    get isValidBrand() {
-        return this.brand && VALID_BRANDS.includes(this.brand);
-    }
-
-    connectedCallback() {
-        this.matchMedia = window.matchMedia("(max-width: 768px)");
-        this.onMediaChange(this.matchMedia);
-        this.matchMedia.addEventListener("change", this.onMediaChange);
-        window.addEventListener("click", this.clickOutsideListener);
-        this.hashLinkScroll();
-    }
-
-    disconnectedCallback() {
-        this.matchMedia.removeEventListener("change", this.onMediaChange);
-        window.removeEventListener("click", this.clickOutsideListener);
-    }
-
-    // Temporary solution to restore native anchor scrolling
-    private hashLinkScroll() {
-        const hash = window.location.hash;
-
-        if (hash !== "") {
-            // Push onto callback queue so it runs after the DOM is updated
-            setTimeout(() => {
-                const id = hash.replace("#", "");
-                const element = document.getElementById(id);
-                if (element && element.scrollIntoView) {
-                    element.scrollIntoView();
-                }
-            }, 0);
-        }
-    }
-
-    private clickOutsideListener = (e: Event) => {
-        if (
-            (<HTMLElement>e.target).tagName !== "DX-HEADER" &&
-            this.showMobileNavMenu
-        ) {
-            this.closeMobileNavMenu();
-        }
-    };
-
-    onVersionChange(e: CustomEvent) {
-        this.dispatchEvent(
-            new CustomEvent("versionchange", {
-                detail: e.detail
-            })
-        );
-    }
-
-    onRequestOpenNavMenu(e: { detail: string }) {
-        this.mobileNavMenuValue = e.detail;
-        this.showMobileNavMenu = true;
-    }
-    private onMobileNavMenuChange(e: { detail: string }) {
-        this.mobileNavMenuValue = e.detail;
-    }
-    private toggleMobileNavMenu() {
-        this.showMobileNavMenu = !this.showMobileNavMenu;
-    }
-    private closeMobileNavMenu() {
-        this.showMobileNavMenu = false;
+    private get showSignup(): boolean {
+        return this.signupLink
+            ? (this.mobile && !this.isSearchOpen) || !this.mobile
+            : false;
     }
 
-    private onNavScroll(e: Event) {
-        this.showNavScrollShadow =
-            (<HTMLElement>e.currentTarget).scrollLeft > 4;
+    protected mobileBreakpoint(): string {
+        return "768px";
     }
-    private onMediaChange = (e: MediaQueryListEvent | MediaQueryList) => {
-        if (!e.matches) {
-            this.mobile = false;
-            this.closeMobileNavMenu();
-        } else {
-            this.mobile = true;
-        }
-    };
 }

package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.css

@@ -1,4 +1,21 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
+
+:host {
+    --dx-c-color-background: var(--dx-g-brand-default-color-background);
+    --dx-c-button-color-background-inactive: var(
+        --dx-g-brand-default-button-color-background-inactive
+    );
+    --dx-c-button-color-background-active: var(
+        --dx-g-brand-default-button-color-background-active
+    );
+    --dx-c-color: var(--dx-g-brand-default-color);
+    --dx-c-color-border: var(--dx-g-brand-default-color-border);
+    --dx-c-color-background-2: var(--dx-g-brand-default-color-background-2);
+    --dx-c-button-color-background-inactive-hover: var(
+        --dx-g-brand-default-button-color-background-inactive-hover
+    );
+    --dx-c-color-border-2: var(--dx-g-brand-default-color-border-2);
+}
 
 .nav-menu {
     position: absolute;
@@ -9,20 +26,22 @@
     overflow-y: auto;
     padding: 0 var(--dx-g-spacing-sm) var(--dx-g-spacing-sm)
         var(--dx-g-spacing-sm);
-    background: var(--dx-g-brand-current-color-background);
+    background: var(--dx-c-color-background);
     box-shadow: 0 20px 28px 0 rgba(0, 20, 45, 0.08);
     transform: translateY(0);
     border-top: 1px solid transparent;
     transition: var(--dx-g-transition-transform-2x),
         var(--dx-g-transition-hue-1x);
+    z-index: 1000;
 }
 
 .nav-menu.has-scrollshadow {
-    border-color: var(--dx-g-brand-current-color-border-2);
+    border-color: var(--dx-c-color-border-2);
 }
 
 .nav-menu.state-closed {
     opacity: 0;
+    visibility: hidden;
     transform: translateY(-16px);
     pointer-events: none;
 }
@@ -61,17 +80,15 @@
 }
 
 .nav-menu_item.state-open {
-    background: var(--dx-g-brand-current-button-color-background-inactive);
+    background: var(--dx-c-button-color-background-inactive);
 }
 
 .nav-menu_item_cta-main:not(.state-active):hover {
-    background: var(--dx-g-brand-current-button-color-background-inactive);
+    background: var(--dx-c-button-color-background-inactive);
 }
 
 .nav-menu_item.state-open .nav-menu_item_cta-main:hover {
-    background: var(
-        --dx-g-brand-current-button-color-background-inactive-hover
-    );
+    background: var(--dx-c-button-color-background-inactive-hover);
 }
 
 .nav-menu_item.state-open .chevrondown {
@@ -94,8 +111,8 @@
 }
 
 .nav-menu_item_cta-main.state-active {
-    background: var(--dx-g-brand-current-button-color-background-active);
-    color: var(--dx-g-brand-current-color);
+    background: var(--dx-c-button-color-background-active);
+    color: var(--dx-c-color);
 }
 
 .nav-menu_item_cta-main > span {
@@ -104,7 +121,7 @@
 
 .nav-menu_item_cta-sub {
     --dx-c-button-secondary-color-hover: var(
-        --dx-g-brand-current-button-color-background-inactive-hover
+        --dx-c-button-color-background-inactive-hover
     );
 
     font-size: var(--dx-g-text-sm);
@@ -131,7 +148,7 @@
     left: var(--dx-g-spacing-md);
     width: calc(100% - var(--dx-g-spacing-xl));
     height: 1px;
-    background: var(--dx-g-brand-current-color-border-2);
+    background: var(--dx-c-color-border-2);
 }
 
 .backdrop {

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

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { Option } from "typings/custom";
-import { deepmapOptions } from "utils/options";
+import { OptionWithNested } from "typings/custom";
+import { deepmapOptions } from "dxUtils/options";
 
 export default class HeaderMobileNavMenu extends LightningElement {
     @api open: boolean = false;
@@ -9,13 +9,13 @@ export default class HeaderMobileNavMenu extends LightningElement {
     @api pathname: string | null = null;
 
     @api
-    set navItems(_navItems: Option[]) {
+    set navItems(_navItems: OptionWithNested[]) {
         this._navItems = _navItems;
     }
     get navItems() {
         // first we assign container classnames to the topmost layer of options groupings
         // (deepmapper only affects actual root options, not groups of options made for the purposes of labeling)
-        const navItems = this._navItems.map((app) => {
+        const navItems = this._navItems?.map((app) => {
             const open = app.options ? app.id === this.value : null;
             const liClassName = cx("nav-menu_item", open && "state-open");
             return { ...app, open, liClassName };
@@ -24,7 +24,7 @@ export default class HeaderMobileNavMenu extends LightningElement {
         // then we use deepmapper to affect the actual root options (actual links)
         return deepmapOptions(
             navItems,
-            (app: Option, index: number, level: number) => {
+            (app: OptionWithNested, index: number, level: number) => {
                 const active = app.link
                     ? app.link.href === this.pathname
                     : false;
@@ -47,7 +47,7 @@ export default class HeaderMobileNavMenu extends LightningElement {
         );
     }
 
-    private _navItems: Option[] = [];
+    private _navItems: OptionWithNested[] = [];
     private navElement: HTMLElement | null = null;
     private wasOpen: boolean = false;
     private showScrollShadow: boolean = false;