@servicetitan/navigation 2.0.0 → 2.1.0

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

@@ -4,13 +4,7 @@ import { HeaderNavigationItemData, NavLinkComponentProps } from '../../utils/nav
 import { LogoCompanyTitle } from '../logo/logo-company-title';
 import { LogoTitanText } from '../logo/logo-titan-text';
 import { ProfileDropdown } from '../profile-dropdown/profile-dropdown';
-import {
-    HeaderNavigation,
-    HeaderNavigationItemContent,
-    HeaderNavigationLink,
-    HeaderNavigationTrigger,
-    HeaderNavigationTriggerCustom,
-} from './header-navigation';
+import { HeaderNavigation, HeaderNavigationLink, HeaderNavigationTrigger } from './';
 
 export default {
     title: 'Navigation/HeaderNavigation',
@@ -114,9 +108,11 @@ const HelpCenterButton = () => {
             direction="bl"
             width="xs"
             trigger={
-                <div onClick={() => setOpen(true)}>
-                    <HeaderNavigationItemContent iconName="help_outline" />
-                </div>
+                <HeaderNavigationTrigger
+                    id="help"
+                    iconName="help_outline"
+                    onClick={() => setOpen(true)}
+                />
             }
             portal
         >
@@ -139,15 +135,15 @@ export const withAllMonolithData = () => (
             items.calendar,
             items.calls,
             items.accounting,
-            items.dispatch,
+            // items.dispatch,
 
             items.fleet,
-            items.followUps,
+            // items.followUps,
             items.inventory,
 
-            items.marketing,
+            // items.marketing,
             items.priceBook,
-            items.pointOfSale,
+            // items.pointOfSale,
             items.reports,
         ]}
         navigationComponent={NavLinkMock}
@@ -164,9 +160,7 @@ export const withAllMonolithData = () => (
             hint="Search: for all the questions"
         />
 
-        <HeaderNavigationTriggerCustom id="help-center">
-            <HelpCenterButton />
-        </HeaderNavigationTriggerCustom>
+        <HelpCenterButton />
         <HeaderNavigationTrigger id="titanAdvisor" iconName="rocket" />
 
         <HeaderNavigationLink

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

@@ -1,29 +1,9 @@
-import {
-    Icon,
-    IconPropsStrict,
-    Popover,
-    PopoverPropsStrict,
-    Tooltip,
-} from '@servicetitan/design-system';
+import { Icon, Popover, PopoverPropsStrict } from '@servicetitan/design-system';
 import classNames from 'classnames';
-import {
-    FC,
-    Fragment,
-    HTMLAttributeAnchorTarget,
-    ReactElement,
-    ReactNode,
-    useCallback,
-    useEffect,
-    useRef,
-    useState,
-} from 'react';
+import { FC, ReactElement, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { HeaderNavigationItemData, NavLinkComponentProps } from '../../utils/navigation';
-import {
-    DefaultNavLinkComponent,
-    NavLinkContext,
-    useNavLink,
-} from '../../utils/navigation-context';
-import { CounterTag, CounterTagPropsType } from '../counter-tag';
+import { DefaultNavLinkComponent, NavLinkContext } from '../../utils/navigation-context';
+import { HeaderNavigationItem } from './header-navigation-content';
 import * as Styles from './header-navigation.module.less';
 
 function useForceUpdate() {
@@ -33,242 +13,6 @@ function useForceUpdate() {
     }, []);
 }
 
-interface HeaderNavigationItemContentPropsStrict {
-    /** item text */
-    title?: string;
-    /** counter shown for item */
-    counter?: CounterTagPropsType;
-    /** icon component class name */
-    iconClassName?: string;
-    /** IconComponent custom icon component */
-    iconComponent?: FC;
-    /** iconName name of anvil icon */
-    iconName?: IconPropsStrict['name'];
-    /** iconSize size of anvil icon */
-    iconSize?: IconPropsStrict['size'];
-}
-export interface HeaderNavigationTriggerPropsStrict
-    extends Omit<HeaderNavigationItemContentPropsStrict, 'title'> {
-    /** unique identifier */
-    id: string;
-    /** tooltip text */
-    tooltip?: string;
-    /** item description */
-    hint?: string;
-    /** container class name */
-    className?: string;
-}
-
-interface HeaderNavigationTriggerProps extends HeaderNavigationTriggerPropsStrict {
-    /** unstrict props */
-    [key: string]: any;
-}
-
-export interface HeaderNavigationLinkPropsStrict extends HeaderNavigationTriggerPropsStrict {
-    /** link href */
-    to: string;
-    /** isActive */
-    isActive?: boolean | ((pathname: string) => boolean);
-    /** link html target */
-    target?: HTMLAttributeAnchorTarget;
-}
-
-export interface HeaderNavigationLinkProps extends HeaderNavigationLinkPropsStrict {
-    /** unstrict props */
-    [key: string]: any;
-}
-
-/** Content for navigation items */
-export const HeaderNavigationItemContent: FC<HeaderNavigationItemContentPropsStrict> = ({
-    title,
-    counter,
-    iconClassName,
-    iconComponent: IconComponent,
-    iconName,
-    iconSize = '24px',
-}) => (
-    <Fragment>
-        {IconComponent ? (
-            <i className={classNames(Styles.icon, iconClassName)}>
-                <IconComponent />
-            </i>
-        ) : iconName ? (
-            <Icon
-                size={iconSize}
-                name={iconName}
-                className={classNames(Styles.icon, iconClassName)}
-            />
-        ) : (
-            <i className={classNames(Styles.icon, iconClassName)} />
-        )}
-
-        {!!title && <ins>{title}</ins>}
-
-        {!!counter && (
-            <CounterTag
-                data={counter}
-                className={Styles.counter}
-                longClassName={Styles.counterLong}
-            />
-        )}
-    </Fragment>
-);
-
-const withTooltip = (element: ReactNode, tooltip?: string) =>
-    tooltip ? (
-        <Tooltip el="div" direction="b" text={tooltip}>
-            {element}
-        </Tooltip>
-    ) : (
-        element
-    );
-
-/** Navigation extra item with link */
-export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
-    id,
-    to,
-    hint,
-    tooltip,
-    counter,
-    className,
-    iconClassName,
-    iconComponent,
-    iconName,
-    isActive,
-    target,
-    ...rest
-}) => {
-    const NavigationComponent = useNavLink();
-
-    return withTooltip(
-        <NavigationComponent
-            data-cy={`navigation-link-${id}`}
-            data-pendo={`navigation-link-${id}`}
-            {...rest}
-            key={id}
-            to={to}
-            title={hint}
-            className={classNames(Styles.link, className, {
-                [Styles.active]: isActive === true,
-            })}
-            isActive={typeof isActive === 'function' ? isActive : undefined}
-            activeClassName={Styles.active}
-            target={target}
-        >
-            <HeaderNavigationItemContent
-                counter={counter}
-                iconComponent={iconComponent}
-                iconClassName={iconClassName}
-                iconName={iconName}
-            />
-        </NavigationComponent>,
-        tooltip
-    );
-};
-
-interface HeaderNavigationItemPropsStrict extends HeaderNavigationItemData {
-    minimized: boolean;
-    main: boolean;
-}
-
-/** Navigation main menu item */
-const HeaderNavigationItem: FC<HeaderNavigationItemPropsStrict> = ({
-    id,
-    to,
-    title,
-    hint,
-    counter,
-    className,
-    iconClassName,
-    iconComponent,
-    iconName,
-    isActive,
-    main,
-    minimized,
-}) => {
-    const NavigationComponent = useNavLink();
-
-    return withTooltip(
-        <NavigationComponent
-            data-cy={`navigation-item-${id}`}
-            data-pendo={`navigation-item-${id}`}
-            key={id}
-            to={to}
-            title={hint}
-            className={classNames(
-                Styles.link,
-                className,
-                main ? Styles.linkMain : Styles.linkOverflow,
-                {
-                    [Styles.active]: isActive === true,
-                }
-            )}
-            isActive={typeof isActive === 'function' ? isActive : undefined}
-            activeClassName={Styles.active}
-        >
-            <HeaderNavigationItemContent
-                title={minimized ? undefined : title}
-                counter={counter}
-                iconComponent={iconComponent}
-                iconClassName={iconClassName}
-                iconName={iconName}
-                iconSize="20px"
-            />
-        </NavigationComponent>,
-        minimized ? title : undefined
-    );
-};
-
-/** Navigation extra item with icon button */
-export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
-    id,
-    className,
-    counter,
-    iconClassName,
-    iconComponent,
-    iconName,
-    hint,
-    tooltip,
-    ...rest
-}) =>
-    withTooltip(
-        <div
-            data-cy={`navigation-trigger-${id}`}
-            data-pendo={`navigation-trigger-${id}`}
-            {...rest}
-            title={hint}
-            className={classNames(Styles.link, 'cursor-pointer', className)}
-        >
-            <HeaderNavigationItemContent
-                counter={counter}
-                iconComponent={iconComponent}
-                iconClassName={iconClassName}
-                iconName={iconName}
-            />
-        </div>,
-        tooltip
-    );
-
-/** Navigation extra item with custom content */
-export const HeaderNavigationTriggerCustom: FC<
-    Omit<
-        HeaderNavigationTriggerProps,
-        'counter' | 'iconSize' | 'iconName' | 'iconComponent' | 'iconClassName'
-    > & { children: ReactNode }
-> = ({ children, id, className, tooltip, title, ...rest }) =>
-    withTooltip(
-        <div
-            data-cy={`navigation-custom-${id}`}
-            data-pendo={`navigation-custom-${id}`}
-            {...rest}
-            title={title}
-            className={classNames(Styles.link, 'cursor-pointer', className)}
-        >
-            {children}
-        </div>,
-        tooltip
-    );
-
 export interface HeaderNavigationOverflowProps {
     direction: PopoverPropsStrict['direction'];
     width: PopoverPropsStrict['width'];
@@ -321,7 +65,7 @@ export interface HeaderNavigationProps {
     /** container class name */
     className?: string;
     /** extra navigation container class name */
-    contentClassName?: string;
+    rightClassName?: string;
     /** container id */
     id?: string;
     /** left content (usually used for logo) */
@@ -349,12 +93,12 @@ enum MinimizedState {
 export const HeaderNavigation: FC<HeaderNavigationProps> = ({
     children,
     className,
-    contentClassName,
     id,
     items,
     itemsOverflow,
     left,
     leftClassName,
+    rightClassName,
     minWidth = 800,
     navigationComponent = DefaultNavLinkComponent,
     overflow,
@@ -399,7 +143,6 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
         <NavLinkContext.Provider value={navigationComponent}>
             <div
                 className={classNames(Styles.header, className, {
-                    [Styles.minimized]: minimized === MinimizedState.Minimized,
                     [Styles.calculating]: minimized === MinimizedState.Calculating,
                 })}
                 style={{ minWidth: `${minWidth}px` }}
@@ -417,7 +160,7 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
                     )}
                     data-cy="navigation-items"
                 >
-                    <div ref={navigationRef} className={classNames(Styles.navigationItems, 'd-if')}>
+                    <div ref={navigationRef} className={classNames('d-if')}>
                         {items?.map(item => (
                             <HeaderNavigationItem
                                 {...item}
@@ -435,10 +178,10 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
                     className={classNames(
                         'd-f flex-row justify-content-end align-items-center',
                         Styles.right,
-                        contentClassName
+                        rightClassName
                     )}
                     ref={rightRef}
-                    data-cy="navigation-content"
+                    data-cy="navigation-right"
                 >
                     {children}
                 </div>
@@ -446,3 +189,145 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
         </NavLinkContext.Provider>
     );
 };
+
+export interface HeaderNavigationStackedProps {
+    /** 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;
+    /** main navigation items */
+    items?: HeaderNavigationItemData[];
+    /** main navigation overflow items */
+    itemsOverflow?: HeaderNavigationItemData[];
+    /** navigation component used for routing */
+    navigationComponent?: FC<NavLinkComponentProps>;
+    /** props for main items overflow component */
+    overflow?: HeaderNavigationOverflowProps;
+}
+
+export const HeaderNavigationStacked: FC<HeaderNavigationStackedProps> = ({
+    className,
+    id,
+    items,
+    itemsOverflow,
+    left,
+    leftClassName,
+    right,
+    rightClassName,
+    center,
+    centerClassName,
+    minWidth = 800,
+    navigationComponent = DefaultNavLinkComponent,
+    overflow,
+}) => {
+    const bottomRef = useRef<HTMLDivElement>(null);
+    const navigationRef = useRef<HTMLDivElement>(null);
+    const forceUpdate = useForceUpdate();
+    const [minimized, setMinimized] = useState(MinimizedState.Calculating);
+
+    useEffect(() => {
+        const handleResize = () => {
+            setMinimized(MinimizedState.Calculating);
+            forceUpdate();
+        };
+
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [forceUpdate]);
+
+    useEffect(() => {
+        setMinimized(MinimizedState.Calculating);
+        forceUpdate();
+    }, [items, itemsOverflow, forceUpdate]);
+
+    const updateIsMinimized = () => {
+        if (bottomRef.current && navigationRef.current) {
+            if (navigationRef.current.clientWidth + 16 > bottomRef.current.clientWidth) {
+                setMinimized(MinimizedState.Minimized);
+            } else if (minimized === MinimizedState.Calculating) {
+                setMinimized(MinimizedState.Full);
+            }
+        }
+    };
+
+    useEffect(() => {
+        updateIsMinimized();
+    });
+
+    return (
+        <NavLinkContext.Provider value={navigationComponent}>
+            <div
+                className={classNames(
+                    Styles.headerStacked,
+                    {
+                        [Styles.calculating]: minimized === MinimizedState.Calculating,
+                    },
+                    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
+                    ref={bottomRef}
+                    className={classNames(
+                        Styles.heBottom,
+                        'd-if flex-grow-1 flex-basis-0 justify-content-center',
+                        Styles.center
+                    )}
+                    data-cy="navigation-items"
+                >
+                    <div ref={navigationRef} className={classNames('d-if')}>
+                        {items?.map(item => (
+                            <HeaderNavigationItem
+                                {...item}
+                                minimized={minimized === MinimizedState.Minimized}
+                                main
+                                key={item.id}
+                            />
+                        ))}
+                        {!!itemsOverflow?.length && (
+                            <HeaderNavigationOverflow items={itemsOverflow} overflow={overflow} />
+                        )}
+                    </div>
+                </div>
+            </div>
+        </NavLinkContext.Provider>
+    );
+};

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

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

package/src/components/logo/logo-titan-text.module.less

@@ -1,5 +1,16 @@
 @import (reference) '@servicetitan/tokens/core/tokens.less';
 
+.logo-text-title {
+    font-weight: @font-weight-semibold;
+    font-size: 21px;
+    line-height: 24px;
+}
+
+.logo-text-description {
+    font-size: @typescale-1;
+    line-height: 16px;
+}
+
 .container {
     height: 56px;
     max-width: 200px;
@@ -13,16 +24,8 @@
         }
     }
 
-    .logo-text-title {
-        font-weight: @font-weight-semibold;
-        font-size: 21px;
-        max-width: 140px;
-        line-height: 24px;
-    }
-
+    .logo-text-title,
     .logo-text-description {
-        font-size: @typescale-1;
         max-width: 140px;
-        line-height: 16px;
     }
 }

package/src/components/logo/logo-titan-text.tsx

@@ -1,43 +1,85 @@
 import classNames from 'classnames';
-import { FC, ReactNode } from 'react';
-import { LogoTitan } from './logo-titan';
+import { CSSProperties, FC, ReactNode } from 'react';
+import { LogoTitanSvg } from './logo-titan';
 import * as Styles from './logo-titan-text.module.less';
 
+export type WrapperProps = FC<{ className: string; children: ReactNode; style?: CSSProperties }>;
+
+export interface LogoTitanProps {
+    mantleFill?: string;
+    className?: string;
+    logoWrapper?: WrapperProps;
+    size?: number;
+    innerSize?: number;
+}
+
 export interface LogoTitanTextProps {
     mantleFill?: string;
     className?: string;
     title: string;
     description: string;
-    logoWrapper?: FC<{ className: string; children: ReactNode }>;
+    logoWrapper?: WrapperProps;
 }
 
-const DefaultLogoWrapper: FC<{ className: string; children: ReactNode }> = ({
-    className,
-    children,
-}) => <div className={className}>{children}</div>;
-export const LogoTitanText: FC<LogoTitanTextProps> = ({
+export interface LogoTitanTitleProps {
+    className?: string;
+    children: ReactNode;
+}
+
+const DefaultLogoWrapper: WrapperProps = ({ className, children, style }) => (
+    <div className={className} style={style}>
+        {children}
+    </div>
+);
+
+export const LogoTitan: FC<LogoTitanProps> = ({
     className,
-    description,
     logoWrapper: LogoWrapper = DefaultLogoWrapper,
     mantleFill,
-    title,
-}) => (
-    <div className={classNames('d-f', Styles.container, className)}>
+    size = 56,
+    innerSize,
+}) => {
+    const is = innerSize ? Math.min(innerSize, size) : Math.round(size * 0.7);
+
+    return (
         <LogoWrapper
             className={classNames(
                 'bg-white d-if justify-content-center align-items-center',
-                Styles.logoWrapper
+                className
             )}
+            style={{ height: `${size}px`, width: `${size}px` }}
         >
-            <LogoTitan width={40} height={40} mantleFill={mantleFill} />
+            <LogoTitanSvg width={is} height={is} mantleFill={mantleFill} />
         </LogoWrapper>
+    );
+};
+
+export const LogoTitanTitle: FC<LogoTitanTitleProps> = ({ className, children }) => (
+    <div className={classNames(Styles.logoTextTitle, 'ff-display', className)}>{children}</div>
+);
+
+export const LogoTitanDescription: FC<LogoTitanTitleProps> = ({ className, children }) => (
+    <div className={classNames(Styles.logoTextDescription, 'ff-default', className)}>
+        {children}
+    </div>
+);
+
+export const LogoTitanText: FC<LogoTitanTextProps> = ({
+    className,
+    description,
+    logoWrapper,
+    mantleFill,
+    title,
+}) => (
+    <div className={classNames('d-f', Styles.container, className)}>
+        <LogoTitan
+            className={Styles.logoWrapper}
+            logoWrapper={logoWrapper}
+            mantleFill={mantleFill}
+        />
         <div className="d-if p-l-1 c-white flex-column justify-content-center align-items-start">
-            <span className={classNames(Styles.logoTextTitle, 'ff-display t-truncate p-b-half')}>
-                {title}
-            </span>
-            <span className={classNames(Styles.logoTextDescription, 'ff-default t-truncate')}>
-                {description}
-            </span>
+            <LogoTitanTitle className="t-truncate p-b-half">{title}</LogoTitanTitle>
+            <LogoTitanDescription className="t-truncate">{description}</LogoTitanDescription>
         </div>
     </div>
 );

package/src/components/logo/logo-titan.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 
-export interface LogoTitanProps {
+export interface LogoTitanSvgProps {
     height?: number;
     width?: number;
     fill?: string;
@@ -8,7 +8,7 @@ export interface LogoTitanProps {
 }
 
 /* tslint:disable: max-line-length */
-export const LogoTitan: FC<LogoTitanProps> = (props: LogoTitanProps) => {
+export const LogoTitanSvg: FC<LogoTitanSvgProps> = props => {
     const dimensions = {
         width: props.width ?? 116,
         height: props.height ?? 106,