@servicetitan/navigation 4.0.0 → 5.0.0

package/src/components/header-navigation/header-navigation.tsx

@@ -1,21 +1,8 @@
 import { Icon, Popover, PopoverPropsStrict } from '@servicetitan/design-system';
 import classNames from 'classnames';
-import {
-    FC,
-    ReactElement,
-    ReactNode,
-    useCallback,
-    useEffect,
-    useMemo,
-    useRef,
-    useState,
-} from 'react';
-import { HeaderNavigationItemData, NavLinkComponentProps } from '../../utils/navigation';
-import {
-    DefaultNavLinkComponent,
-    NavigationContext,
-    NavigationContextType,
-} from '../../utils/navigation-context';
+import { FC, ReactElement, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+import { HeaderNavigationItemData } from '../../utils/navigation';
+import { NavigationLegacyContext } from '../../utils/navigation-context';
 import { HeaderNavigationItem } from './header-navigation-content';
 import * as Styles from './header-navigation.module.less';
 
@@ -91,8 +78,6 @@ export interface HeaderNavigationProps {
     items?: HeaderNavigationItemData[];
     /** main navigation overflow items */
     itemsOverflow?: HeaderNavigationItemData[];
-    /** navigation component used for routing */
-    navigationComponent?: FC<NavLinkComponentProps>;
     /** props for main items overflow component */
     overflow?: HeaderNavigationOverflowProps;
 }
@@ -113,7 +98,6 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
     leftClassName,
     rightClassName,
     minWidth = 800,
-    navigationComponent = DefaultNavLinkComponent,
     overflow,
 }) => {
     const leftRef = useRef<HTMLDivElement>(null);
@@ -152,16 +136,8 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
         updateIsMinimized();
     });
 
-    const context: NavigationContextType = useMemo(
-        () => ({
-            NavigationComponent: navigationComponent,
-            isLegacy: true,
-        }),
-        [navigationComponent]
-    );
-
     return (
-        <NavigationContext.Provider value={context}>
+        <NavigationLegacyContext.Provider value>
             <div
                 className={classNames(Styles.header, className, {
                     [Styles.calculating]: minimized === MinimizedState.Calculating,
@@ -207,7 +183,7 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
                     {children}
                 </div>
             </div>
-        </NavigationContext.Provider>
+        </NavigationLegacyContext.Provider>
     );
 };
 
@@ -234,8 +210,6 @@ export interface HeaderNavigationStackedProps {
     items?: HeaderNavigationItemData[];
     /** main navigation overflow items */
     itemsOverflow?: HeaderNavigationItemData[];
-    /** navigation component used for routing */
-    navigationComponent?: FC<NavLinkComponentProps>;
     /** props for main items overflow component */
     overflow?: HeaderNavigationOverflowProps;
 }
@@ -252,7 +226,6 @@ export const HeaderNavigationStacked: FC<HeaderNavigationStackedProps> = ({
     center,
     centerClassName,
     minWidth = 800,
-    navigationComponent = DefaultNavLinkComponent,
     overflow,
 }) => {
     const bottomRef = useRef<HTMLDivElement>(null);
@@ -289,16 +262,8 @@ export const HeaderNavigationStacked: FC<HeaderNavigationStackedProps> = ({
         updateIsMinimized();
     });
 
-    const context: NavigationContextType = useMemo(
-        () => ({
-            NavigationComponent: navigationComponent,
-            isLegacy: true,
-        }),
-        [navigationComponent]
-    );
-
     return (
-        <NavigationContext.Provider value={context}>
+        <NavigationLegacyContext.Provider value>
             <div
                 className={classNames(
                     Styles.headerStacked,
@@ -357,84 +322,6 @@ export const HeaderNavigationStacked: FC<HeaderNavigationStackedProps> = ({
                     </div>
                 </div>
             </div>
-        </NavigationContext.Provider>
-    );
-};
-
-export interface HeaderNavigationTinyProps {
-    /** container class name */
-    className?: string;
-    /** extra navigation */
-    right?: ReactNode;
-    /** extra navigation container class name */
-    rightClassName?: string;
-    /** container id */
-    id?: string;
-    /** left content (usually used for logo) */
-    left?: ReactElement;
-    /** left container class name */
-    leftClassName?: string;
-    /** center content */
-    center?: ReactElement;
-    /** center container class name */
-    centerClassName?: string;
-    /** minimal width for navigation bar */
-    minWidth?: number;
-    /** navigation component used for routing */
-    navigationComponent?: FC<NavLinkComponentProps>;
-}
-
-export const HeaderNavigationTiny: FC<HeaderNavigationTinyProps> = ({
-    className,
-    id,
-    left,
-    leftClassName,
-    right,
-    rightClassName,
-    center,
-    centerClassName,
-    minWidth = 800,
-    navigationComponent = DefaultNavLinkComponent,
-}) => {
-    const context: NavigationContextType = useMemo(
-        () => ({
-            NavigationComponent: navigationComponent,
-            isLegacy: false,
-        }),
-        [navigationComponent]
-    );
-
-    return (
-        <NavigationContext.Provider value={context}>
-            <div
-                className={classNames(Styles.headerTiny, className)}
-                style={{ minWidth: `${minWidth}px` }}
-                id={id}
-                data-cy="header-navigation"
-            >
-                <div
-                    className={classNames(Styles.heTopLeft, leftClassName)}
-                    data-cy="navigation-left"
-                >
-                    {left}
-                </div>
-                <div
-                    className={classNames(Styles.heTopCenter, centerClassName)}
-                    data-cy="navigation-center"
-                >
-                    {center}
-                </div>
-                <div
-                    className={classNames(
-                        'd-f flex-row justify-content-end align-items-center',
-                        Styles.heTopRight,
-                        rightClassName
-                    )}
-                    data-cy="navigation-right"
-                >
-                    {right}
-                </div>
-            </div>
-        </NavigationContext.Provider>
+        </NavigationLegacyContext.Provider>
     );
 };

package/src/components/header-navigation/index.ts

@@ -1,2 +1 @@
 export * from './header-navigation';
-export * from './header-navigation-links';

package/src/components/layout.stories.tsx

@@ -1,9 +1,9 @@
-import { withAnvil, withMemoryRouter } from '../test/data.stories';
+import { withAnvil, withMemoryRouter } from '../test/data';
 import {
     WithAllMonolithData,
     WithAllMonolithDataCommercial,
-} from './header-navigation/header-navigation-tiny.stories';
-import { DefaultSideNavigation } from './side-navigation/side-navigation.stories';
+} from './left-navigation/header-navigation-tiny.stories';
+import { DefaultSideNavigation } from './left-navigation/side-navigation.stories';
 
 export default {
     title: 'Navigation/Layout',

package/src/components/left-navigation/header-navigation-extra-tiny.stories.tsx

@@ -0,0 +1,21 @@
+import { withAnvil, withMemoryRouter } from '../../test/data';
+import { HeaderNavigationLink } from '../links';
+import { HeaderNavigationTiny } from './header-navigation-tiny';
+
+const withHeaderNavigationTiny = (Story: any) => (
+    <HeaderNavigationTiny className="border" right={<Story />} />
+);
+
+export default {
+    title: 'Navigation/Extra/Tiny',
+    component: HeaderNavigationLink,
+    decorators: [withHeaderNavigationTiny, withMemoryRouter, withAnvil],
+    parameters: {},
+};
+
+export {
+    ExtraWithTooltip,
+    ExtraLink,
+    ExtraTrigger,
+    ExtraWithLabel,
+} from '../header-navigation/header-navigation-extra.stories';

package/src/components/left-navigation/header-navigation-tiny-links.tsx

@@ -0,0 +1,134 @@
+import { Icon, IconProps } from '@servicetitan/anvil2';
+import classNames from 'classnames';
+import { FC, Fragment, useContext } from 'react';
+import { HeaderNavigationLinkProps, HeaderNavigationTriggerProps } from '../../utils/navigation';
+import { NavigationComponentContext } from '../../utils/navigation-context';
+import { withTooltip } from '../../utils/with-tooltip';
+import { CounterTag, CounterTagPropsType } from '../counter-tag';
+import * as Styles from './header-navigation-tiny.module.less';
+
+/** Content for navigation items */
+export const HeaderNavigationItemContent: FC<{
+    counter?: CounterTagPropsType;
+    counterClassName?: string;
+    icon: IconProps['svg'] | undefined;
+    iconActive: IconProps['svg'] | undefined;
+    label?: string;
+    labelClassName?: string;
+}> = ({ counter, counterClassName, icon, iconActive, label, labelClassName }) => {
+    return (
+        <Fragment>
+            {!!icon && <Icon svg={icon} className={Styles.navigationIcon} />}
+            {!!iconActive && (
+                <Icon
+                    svg={iconActive}
+                    className={classNames(Styles.navigationIcon, Styles.navigationIconActive)}
+                />
+            )}
+
+            {!!label && (
+                <span className={classNames(Styles.navigationItemLabel, labelClassName)}>
+                    {label}
+                </span>
+            )}
+
+            {!!counter && (
+                <CounterTag
+                    data={counter}
+                    className={classNames(Styles.navigationItemCounter, counterClassName)}
+                    longClassName={Styles.navigationItemCounterLong}
+                />
+            )}
+        </Fragment>
+    );
+};
+
+/** Navigation extra item with link */
+export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
+    id,
+    to,
+    hint,
+    tooltip,
+    counter,
+    className,
+    icon,
+    iconActive,
+    isActive,
+    label,
+    labelClassName,
+    target,
+    ...rest
+}) => {
+    const NavigationComponent = useContext(NavigationComponentContext);
+
+    return withTooltip(
+        <NavigationComponent
+            data-cy={`navigation-link-${id}`}
+            data-pendo={`navigation-link-${id}`}
+            {...rest}
+            key={id}
+            to={to}
+            title={hint}
+            className={classNames(Styles.navigationLink, className, {
+                [Styles.navigationItemActive]: isActive === true,
+                [Styles.navigationItemIconState]: !!icon && !!iconActive,
+            })}
+            isActive={typeof isActive === 'function' ? isActive : undefined}
+            activeClassName={Styles.navigationItemActive}
+            target={target}
+        >
+            <HeaderNavigationItemContent
+                counter={counter}
+                icon={icon}
+                iconActive={iconActive}
+                label={label}
+                labelClassName={labelClassName}
+            />
+        </NavigationComponent>,
+        tooltip
+    );
+};
+
+/** Navigation extra item with icon button */
+export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
+    id,
+    className,
+    counter,
+    icon,
+    iconActive,
+    isActive,
+    hint,
+    label,
+    labelClassName,
+    tooltip,
+    title,
+    titleClassName,
+    ...rest
+}) => {
+    return withTooltip(
+        <div
+            data-cy={`navigation-trigger-${id}`}
+            data-pendo={`navigation-trigger-${id}`}
+            {...rest}
+            title={hint}
+            className={classNames(
+                Styles.navigationLink,
+                {
+                    [Styles.navigationItemActive]: isActive === true,
+                    [Styles.navigationItemIconState]: !!icon && !!iconActive,
+                },
+                'cursor-pointer',
+                className
+            )}
+        >
+            <HeaderNavigationItemContent
+                counter={counter}
+                icon={icon}
+                iconActive={iconActive}
+                label={label}
+                labelClassName={labelClassName}
+            />
+        </div>,
+        tooltip
+    );
+};

package/src/components/left-navigation/header-navigation-tiny.module.less

@@ -0,0 +1,117 @@
+/* stylelint-disable no-descending-specificity */
+@import (reference) '@servicetitan/tokens/core/tokens.less';
+
+@size-links-tiny: 24px;
+
+.header-tiny {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: 48px;
+
+    background-color: @color-white;
+    color: @color-black;
+
+    & > * {
+        overflow-y: hidden;
+    }
+
+    .he-top-left {
+        grid-column: span 1;
+    }
+
+    .he-top-center {
+        grid-column: span 1;
+    }
+
+    .he-top-right {
+        grid-column: span 1;
+
+        & > * {
+            color: @color-black;
+        }
+    }
+
+    :global(.profile-dropdown-image) {
+        height: 24px;
+        width: 24px;
+    }
+
+    :global(.profile-dropdown-trigger) {
+        height: 32px;
+        font-size: @size-links-tiny;
+    }
+
+    .navigation-link {
+        margin: 6px 2px;
+        padding: 6px 6px;
+        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: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;
+        }
+    }
+}
+
+.navigation-link {
+    // styles specific to extra nav links
+    color: @color-black;
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    text-wrap: nowrap;
+
+    .navigation-item-counter {
+        color: @color-white;
+        font-weight: @font-weight-semibold;
+        font-size: 8px !important;
+        min-width: 12px;
+        position: absolute;
+        top: 4px;
+        right: -2px;
+    }
+
+    .navigation-item-label {
+        color: inherit;
+        font-size: @typescale-1;
+        font-family: @base-font-family;
+        font-weight: @font-weight-semibold;
+        margin-left: @spacing-half;
+    }
+
+    &.navigation-item-counter-long {
+        right: -8px;
+    }
+}

package/src/components/left-navigation/header-navigation-tiny.module.less.d.ts

@@ -0,0 +1,15 @@
+export const __esModule: true;
+export const heTopCenter: string;
+export const heTopLeft: string;
+export const heTopRight: string;
+export const headerTiny: string;
+export const navigationIcon: string;
+export const navigationIconActive: string;
+export const navigationItemActive: string;
+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/{header-navigation → left-navigation}/header-navigation-tiny.stories.tsx

@@ -6,18 +6,13 @@ import SvgRocket from '@servicetitan/anvil2/assets/icons/st/gnav_titan_advisor_i
 
 import { Input, Stack } from '@servicetitan/design-system';
 import { FC, Fragment } from 'react';
-import {
-    CallsNavigationTrigger,
-    NavLinkMock,
-    SearchIcon,
-    withAnvil,
-    withMemoryRouter,
-} from '../../test/data.stories';
+import { CallsNavigationTrigger, SearchIcon, withAnvil, withMemoryRouter } from '../../test/data';
+import * as Styles from '../header-navigation/header-navigation-stories.module.less';
 import { LogoCompanyTitle } from '../logo/logo-company-title';
 import { LogoTitan, LogoTitanTitle } from '../logo/logo-titan-text';
 import { ProfileDropdown } from '../profile-dropdown/profile-dropdown';
-import * as Styles from './header-navigation-stories.module.less';
-import { HeaderNavigationLink, HeaderNavigationTiny } from './';
+import { HeaderNavigationTiny } from './header-navigation-tiny';
+import { HeaderNavigationLink } from './header-navigation-tiny-links';
 
 export default {
     title: 'Navigation/HeaderNavigationTiny',
@@ -34,12 +29,11 @@ export default {
     ],
 };
 
-export const defaultNavigation = () => (
+export const DefaultTinyNavigation = () => (
     <HeaderNavigationTiny
         className="border-bottom"
         left={<LogoCompanyTitle className="m-l-1" size="150" />}
         leftClassName="d-f align-items-center"
-        navigationComponent={NavLinkMock}
     />
 );
 
@@ -54,7 +48,6 @@ export const WithAllMonolithData = () => (
         className="border-bottom"
         left={<LogoCompanyTitle className="m-l-1" size="150" />}
         leftClassName="d-f align-items-center"
-        navigationComponent={NavLinkMock}
         right={
             <Fragment>
                 <TimeZoneOffset />
@@ -122,7 +115,6 @@ export const WithAllMonolithDataCommercial = () => (
             </Stack>
         }
         leftClassName="d-f align-items-center"
-        navigationComponent={NavLinkMock}
         right={
             <Fragment>
                 <TimeZoneOffset />

package/src/components/left-navigation/header-navigation-tiny.tsx

@@ -0,0 +1,65 @@
+import classNames from 'classnames';
+import { FC, ReactElement, ReactNode } from 'react';
+import * as Styles from './header-navigation-tiny.module.less';
+
+export interface HeaderNavigationTinyProps {
+    /** container class name */
+    className?: string;
+    /** extra navigation */
+    right?: ReactNode;
+    /** extra navigation container class name */
+    rightClassName?: string;
+    /** container id */
+    id?: string;
+    /** left content (usually used for logo) */
+    left?: ReactElement;
+    /** left container class name */
+    leftClassName?: string;
+    /** center content */
+    center?: ReactElement;
+    /** center container class name */
+    centerClassName?: string;
+    /** minimal width for navigation bar */
+    minWidth?: number;
+}
+
+export const HeaderNavigationTiny: FC<HeaderNavigationTinyProps> = ({
+    className,
+    id,
+    left,
+    leftClassName,
+    right,
+    rightClassName,
+    center,
+    centerClassName,
+    minWidth = 800,
+}) => {
+    return (
+        <div
+            className={classNames(Styles.headerTiny, className)}
+            style={{ minWidth: `${minWidth}px` }}
+            id={id}
+            data-cy="header-navigation"
+        >
+            <div className={classNames(Styles.heTopLeft, leftClassName)} data-cy="navigation-left">
+                {left}
+            </div>
+            <div
+                className={classNames(Styles.heTopCenter, centerClassName)}
+                data-cy="navigation-center"
+            >
+                {center}
+            </div>
+            <div
+                className={classNames(
+                    'd-f flex-row justify-content-end align-items-center',
+                    Styles.heTopRight,
+                    rightClassName
+                )}
+                data-cy="navigation-right"
+            >
+                {right}
+            </div>
+        </div>
+    );
+};

package/src/components/left-navigation/index.ts

@@ -0,0 +1,2 @@
+export * from './header-navigation-tiny';
+export * from './side-navigation';

package/src/components/{side-navigation → left-navigation}/side-navigation.module.less

@@ -111,7 +111,7 @@
     }
 }
 
-.navigation-icon {
+.navigation-icon[data-anv][data-anv] {
     height: 24px;
     width: 24px;
     color: inherit;
@@ -146,13 +146,13 @@
         background-color: @bg-color-hover;
     }
 
-    .options-icon {
+    .options-icon-wrapper {
         height: 24px;
         width: 24px;
         padding-left: @spacing-1;
         padding-right: @spacing-1;
 
-        & > span > svg {
+        .options-icon[data-anv][data-anv] > svg {
             height: 24px;
             width: 24px;
             color: @text-color;

package/src/components/{side-navigation → left-navigation}/side-navigation.module.less.d.ts

@@ -8,6 +8,7 @@ export const navigationItemCounter: string;
 export const navigationItemIconState: string;
 export const navigationItemText: string;
 export const optionsIcon: string;
+export const optionsIconWrapper: string;
 export const optionsItem: string;
 export const optionsItemText: string;
 export const sideNav: string;

package/src/components/{side-navigation → left-navigation}/side-navigation.stories.tsx

@@ -1,5 +1,5 @@
 import { ComponentType, useState } from 'react';
-import { NavLinkMock, items, withAnvil, withMemoryRouter } from '../../test/data.stories';
+import { NavLinkMock, items, withAnvil, withMemoryRouter } from '../../test/data';
 import { SideNavigation } from './';
 
 const layout = (Story: ComponentType) => {

package/src/components/{side-navigation → left-navigation}/side-navigation.tsx

@@ -160,8 +160,8 @@ export const SideNavigationOptionsToggle: FC<{
             className={classNames(Styles.optionsItem)}
             onClick={() => onExpandedChange(!expanded)}
         >
-            <div className={Styles.optionsIcon}>
-                <Icon svg={expanded ? SvgCollapse : SvgExpand} />
+            <div className={Styles.optionsIconWrapper}>
+                <Icon className={Styles.optionsIcon} svg={expanded ? SvgCollapse : SvgExpand} />
             </div>
 
             {!!expanded && <span className={Styles.optionsItemText}>Collapse Menu</span>}