@servicetitan/navigation 11.0.0 → 11.1.0

package/src/components/titan-layout/layout-header.module.less

@@ -1,25 +1,39 @@
 /* stylelint-disable no-descending-specificity */
+/* stylelint-disable no-duplicate-selectors */
 @import (reference) '@servicetitan/tokens/core/tokens.less';
 
 @size-links-tiny: 24px;
+@bg-light: @color-white;
+@bg-dark: @color-neutral-300;
+
+@c-light: @color-black;
+@c-dark: @color-white;
 
 .header {
     --nav-top-content-height: 32px;
+
+    height: var(--nav-offset-top);
     display: flex;
     justify-content: space-between;
 
-    background-color: @color-white;
-    color: @color-black;
+    color: var(--nav-top-text-color);
     box-sizing: border-box;
-    outline: 1px solid @color-neutral-60;
 
-    & > * {
-        overflow-y: hidden;
+    &.header-light {
+        background-color: @bg-light;
+        outline: 1px solid @color-neutral-60;
+
+        --nav-top-text-color: @c-light;
     }
 
-    .he-top-left {
-        display: flex;
-        align-items: center;
+    &.header-dark {
+        background-color: @bg-dark;
+
+        --nav-top-text-color: @c-dark;
+    }
+
+    & > * {
+        overflow-y: hidden;
     }
 
     .he-top-center {
@@ -28,7 +42,7 @@
 
     .he-top-right {
         & > * {
-            color: @color-black;
+            color: var(--nav-top-text-color);
         }
 
         .he-top-right-text {
@@ -48,58 +62,11 @@
         height: 32px;
         font-size: @size-links-tiny;
     }
-
-    .navigation-link {
-        border-radius: 12px;
-        font-size: @size-links-tiny;
-        color: inherit;
-
-        &.navigation-item-active:not(.navigation-item-overflow) {
-            background-color: @color-blue-100 !important;
-            color: @color-blue-500 !important;
-        }
-        &:hover:not(.navigation-item-active):not(.navigation-item-overflow) {
-            background-color: rgba(0, 0, 0, 0.12) !important;
-        }
-
-        &.navigation-item-icon-state.navigation-item-active {
-            .navigation-icon[data-anv][data-anv]:not(.navigation-icon-active) {
-                display: none;
-            }
-
-            .navigation-icon.navigation-icon-active[data-anv][data-anv] {
-                display: block;
-            }
-        }
-    }
-
-    .navigation-icon[data-anv][data-anv] {
-        display: inline-block;
-        color: inherit;
-        height: 24px;
-        width: 24px;
-
-        > svg {
-            height: @size-links-tiny;
-            width: @size-links-tiny;
-        }
-
-        &.navigation-icon-active {
-            display: none;
-        }
-    }
 }
 
 .header-mobile {
-    padding: @spacing-2 @spacing-0;
-    height: var(--nav-offset-top);
-
     --nav-top-content-height: 40px;
 
-    .navigation-link {
-        padding: 10px;
-    }
-
     .he-top-center {
         max-width: unset;
         flex: 1;
@@ -107,31 +74,26 @@
         margin-right: @spacing-3;
     }
 
-    .he-top-left {
-        margin-left: @spacing-half;
+    .he-top-right {
+        margin-right: @spacing-half;
     }
 
+    .he-top-center,
     .he-top-right {
-        margin-right: @spacing-half;
+        margin-top: @spacing-2;
+        margin-bottom: @spacing-2;
+    }
+
+    .burger {
+        padding-top: @spacing-2;
+        padding-right: @spacing-half;
+        padding-bottom: @spacing-2;
+        padding-left: @spacing-0;
     }
 }
 
 // desktop
 .header-desktop {
-    height: var(--nav-offset-top);
-    .navigation-link {
-        margin: 6px 2px;
-        padding: 6px 6px;
-
-        .navigation-item-counter {
-            min-width: 12px !important;
-            height: 12px !important;
-        }
-    }
-
-    .he-top-left {
-        padding-left: @spacing-1;
-    }
     .he-top-center {
         flex: 1;
         margin-left: @spacing-2;
@@ -140,14 +102,54 @@
     }
 }
 
+// desktop stacked header
+.header-stacked {
+    display: flex;
+    flex-direction: column;
+
+    .header-desktop {
+        height: 44px;
+    }
+
+    .header-stacked-nav {
+        height: 36px;
+        background-color: @bg-dark;
+        border-top: 1px solid @color-neutral-200;
+        box-sizing: border-box;
+    }
+}
+.header-navigation-wrapper {
+    min-width: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &.calculating {
+        .header-navigation {
+            opacity: 0;
+        }
+    }
+
+    &.minimized {
+        display: flex;
+    }
+
+    .header-navigation {
+        display: inline-flex;
+    }
+}
+
 // desktop wide
 @media only screen and (min-width: 1200px) {
-    .header-desktop {
+    .header-desktop:not(.header-desktop-nav) {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         grid-template-rows: 48px;
 
-        .he-top-left,
+        .logo,
         .he-top-center,
         .he-top-right {
             grid-column: span 1;
@@ -157,16 +159,108 @@
             max-width: unset;
         }
     }
+
+    .header-desktop-nav {
+        .he-top-center {
+            max-width: unset;
+        }
+    }
 }
 
-.navigation-link {
-    // styles specific to extra nav links
-    color: @color-black;
-    position: relative;
+//!!!!!!!!!!!!!!! logo styles !!!!!!!!!!!!!!!//
+.logo {
+    color: var(--nav-top-text-color);
+    height: 100%;
+
     display: flex;
     align-items: center;
-    flex-wrap: nowrap;
-    text-wrap: nowrap;
+
+    .logo-short-wrapper {
+        display: flex;
+        align-items: center;
+        height: 100%;
+        padding-left: 10px;
+        padding-right: 10px;
+
+        svg {
+            height: 28px;
+        }
+    }
+    svg {
+        max-height: 100%;
+        width: auto;
+    }
+}
+
+.header-desktop {
+    .logo-company-wrapper {
+        height: 41px;
+        padding-left: 6px;
+    }
+    .logo-postfix {
+        margin-left: @spacing-1;
+    }
+    .logo-title {
+        margin-left: @spacing-0;
+    }
+}
+
+.header-dark.header-logo-custom {
+    .logo-short-wrapper,
+    .burger {
+        background-color: @color-white;
+        color: @c-light;
+    }
+
+    .burger .navigation-link {
+        color: inherit !important;
+    }
+    .logo-title {
+        margin-left: @spacing-1;
+    }
+}
+
+//!!!!!!!!!!!!!!! nav links styles !!!!!!!!!!!!!!!//
+.navigation-link {
+    &.navigation-item-icon-state.navigation-item-active {
+        .navigation-icon[data-anv][data-anv]:not(.navigation-icon-active) {
+            display: none;
+        }
+
+        .navigation-icon.navigation-icon-active[data-anv][data-anv] {
+            display: block;
+        }
+    }
+
+    .navigation-icon[data-anv][data-anv] {
+        display: inline-block;
+        color: inherit;
+
+        & > svg {
+            height: 1em;
+            width: 1em;
+            font-size: 1em;
+        }
+
+        &.navigation-icon-active {
+            display: none;
+        }
+    }
+}
+
+// extra nav links styles
+.header {
+    .navigation-link {
+        color: var(--nav-top-text-color);
+        position: relative;
+        display: flex;
+        align-items: center;
+        flex-wrap: nowrap;
+        text-wrap: nowrap;
+
+        border-radius: 12px;
+        font-size: @size-links-tiny;
+    }
 
     .navigation-item-counter {
         color: @color-white;
@@ -177,6 +271,10 @@
         position: absolute;
         top: 4px;
         right: -2px;
+
+        &.navigation-item-counter-long {
+            right: -8px;
+        }
     }
 
     .navigation-item-label {
@@ -187,7 +285,147 @@
         margin-left: @spacing-half;
     }
 
-    &.navigation-item-counter-long {
-        right: -8px;
+    .navigation-icon[data-anv][data-anv] {
+        height: 24px;
+        width: 24px;
+    }
+
+    &.header-desktop {
+        .navigation-link {
+            margin: 6px 2px;
+            padding: 6px 6px;
+
+            .navigation-item-counter {
+                min-width: 12px !important;
+                height: 12px !important;
+            }
+        }
+    }
+
+    &.header-mobile {
+        .navigation-link {
+            padding: 10px;
+        }
+    }
+
+    &.header-light {
+        .navigation-link {
+            &.navigation-item-active {
+                background-color: @color-blue-100 !important;
+                color: @color-blue-500 !important;
+            }
+
+            &:hover:not(.navigation-item-active) {
+                background-color: rgba(0, 0, 0, 0.12) !important;
+            }
+        }
+    }
+}
+
+.header-dark .navigation-link,
+.header-navigation > .navigation-link {
+    &.navigation-item-active {
+        color: @color-blue-200 !important;
+    }
+
+    &:hover:not(.navigation-item-active) {
+        opacity: 0.7 !important;
+    }
+}
+
+// styles specific to main nav links
+.header-navigation .navigation-link {
+    font-family: @base-font-family;
+    color: @c-dark;
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    text-wrap: nowrap;
+    padding: 7px 10px;
+
+    .navigation-item-counter {
+        color: @color-white;
+        font-weight: @font-weight-semibold;
+        font-size: 8px !important;
+        min-width: 16px !important;
+        height: 12px !important;
+        position: absolute;
+        top: 4px;
+        right: -2px;
+
+        &.navigation-item-counter-long {
+            right: -8px;
+        }
+    }
+    .navigation-item-label {
+        font-family: @base-font-family;
+        font-size: @typescale-2;
+        margin-left: @spacing-half;
+    }
+    .navigation-icon[data-anv][data-anv] {
+        height: 20px;
+        width: 20px;
+        font-size: @typescale-4;
+    }
+}
+
+.header-navigation-overflow-trigger[data-anv][data-anv] {
+    padding: @spacing-half !important;
+
+    > span[data-anv][data-anv] {
+        color: @c-dark !important;
+        height: 24px !important;
+        width: 24px !important;
+        font-size: 24px !important;
+
+        display: flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+    }
+}
+
+.header-navigation-overflow .navigation-link {
+    display: inline-flex;
+    color: @color-black;
+    padding: @spacing-1 12px;
+    cursor: pointer;
+
+    font-family: @base-font-family;
+    font-size: @typescale-4;
+    position: relative;
+    align-items: center;
+    flex-wrap: nowrap;
+    text-wrap: nowrap;
+
+    margin-left: -0.5rem;
+    margin-right: -0.5rem;
+
+    &:hover {
+        background-color: @color-blue-500;
+        color: @color-white;
+    }
+
+    &.navigation-item-active:not(:hover) {
+        color: @color-blue;
+    }
+
+    .navigation-item-label {
+        font-family: @base-font-family;
+        font-size: @typescale-2;
+        margin-left: @spacing-half;
+    }
+    .navigation-item-counter {
+        color: @color-white;
+        font-weight: @font-weight-semibold;
+        font-size: 8px !important;
+
+        min-width: 12px !important;
+        height: 12px !important;
+        margin-left: @spacing-half;
+        margin-top: -@spacing-1;
+    }
+    .navigation-icon[data-anv][data-anv] {
+        height: 20px;
     }
 }

package/src/components/titan-layout/layout-header.module.less.d.ts

@@ -1,11 +1,28 @@
 export const __esModule: true;
+export const burger: string;
+export const calculating: string;
 export const heTopCenter: string;
-export const heTopLeft: string;
 export const heTopRight: string;
 export const heTopRightText: string;
 export const header: string;
+export const headerDark: string;
 export const headerDesktop: string;
+export const headerDesktopNav: string;
+export const headerLight: string;
+export const headerLogoCustom: string;
 export const headerMobile: string;
+export const headerNavigation: string;
+export const headerNavigationOverflow: string;
+export const headerNavigationOverflowTrigger: string;
+export const headerNavigationWrapper: string;
+export const headerStacked: string;
+export const headerStackedNav: string;
+export const logo: string;
+export const logoCompanyWrapper: string;
+export const logoPostfix: string;
+export const logoShortWrapper: string;
+export const logoTitle: string;
+export const minimized: string;
 export const navigationIcon: string;
 export const navigationIconActive: string;
 export const navigationItemActive: string;
@@ -13,6 +30,5 @@ export const navigationItemCounter: string;
 export const navigationItemCounterLong: string;
 export const navigationItemIconState: string;
 export const navigationItemLabel: string;
-export const navigationItemOverflow: string;
 export const navigationLink: string;
 

package/src/components/titan-layout/layout-header.tsx

@@ -4,13 +4,7 @@ import { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from 'react';
 import { LayoutPlacementContext } from './layout-context';
 import { LayoutHeaderNavigationTrigger } from './layout-header-links';
 import * as Styles from './layout-header.module.less';
-import { TitanLayoutLogoProps } from './layout-logo';
-
-export interface TitanLayoutHeaderLogoProps {
-    title?: true | string;
-    mantleFill?: string;
-    to?: string;
-}
+import { LayoutLogo, TitanLayoutLogoProps, isLogoCustom } from './layout-logo';
 
 export type LayoutHeaderProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {
     right?: ReactNode;
@@ -22,10 +16,11 @@ export type LayoutHeaderProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'
     center?: ReactElement;
     centerClassName?: string;
 
-    logo: ReactElement<TitanLayoutLogoProps>;
+    logo?: TitanLayoutLogoProps;
     profile?: ReactElement;
 
     isMobile: boolean;
+    variant: 'light' | 'dark';
     hasNotifications: boolean;
     onBurgerClick?: (e: MouseEvent) => void;
 };
@@ -41,6 +36,7 @@ export const LayoutHeader: FC<LayoutHeaderProps> = ({
     hasNotifications,
     logo,
     profile,
+    variant,
     onBurgerClick,
     ...rest
 }) => {
@@ -49,26 +45,27 @@ export const LayoutHeader: FC<LayoutHeaderProps> = ({
             <div
                 className={classNames(
                     Styles.header,
+                    variant === 'light' ? Styles.headerLight : Styles.headerDark,
                     isMobile ? Styles.headerMobile : Styles.headerDesktop,
+                    isLogoCustom(logo, isMobile) && Styles.headerLogoCustom,
                     className
                 )}
-                {...rest}
                 data-cy="header-navigation"
+                {...rest}
             >
-                <div className={classNames(Styles.heTopLeft)} data-cy="navigation-left">
-                    {isMobile && (
+                {isMobile && (
+                    <div className={Styles.burger}>
                         <LayoutHeaderNavigationTrigger
                             id="burger"
                             title=""
                             icon={SvgBurgerMenu}
-                            iconActive={SvgBurgerMenu}
-                            className="m-r-1"
+                            iconActive={undefined}
                             onClick={onBurgerClick}
                             tag={{ value: hasNotifications }}
                         />
-                    )}
-                    {logo}
-                </div>
+                    </div>
+                )}
+                <LayoutLogo {...logo} />
                 <div
                     className={classNames(
                         Styles.heTopCenter,