@servicetitan/navigation 1.6.0 → 2.1.0

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

@@ -1,31 +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,
-    useLayoutEffect,
-    useMemo,
-    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() {
@@ -35,205 +13,6 @@ function useForceUpdate() {
     }, []);
 }
 
-interface HeaderNavigationItemContentPropsStrict {
-    title?: string;
-    counter?: CounterTagPropsType;
-    iconClassName?: string;
-    iconComponent?: FC;
-    iconName?: IconPropsStrict['name'];
-}
-export interface HeaderNavigationTriggerPropsStrict extends HeaderNavigationItemContentPropsStrict {
-    id: string;
-    hint?: string;
-    className?: string;
-}
-
-interface HeaderNavigationTriggerProps extends HeaderNavigationTriggerPropsStrict {
-    [key: string]: any;
-}
-
-export interface HeaderNavigationLinkPropsStrict extends HeaderNavigationTriggerPropsStrict {
-    to: string;
-    isActive?: boolean | ((pathname: string) => boolean);
-    target?: HTMLAttributeAnchorTarget;
-}
-
-export interface HeaderNavigationLinkProps extends HeaderNavigationLinkPropsStrict {
-    [key: string]: any;
-}
-
-export const HeaderNavigationItemContent: FC<HeaderNavigationItemContentPropsStrict> = ({
-    title,
-    counter,
-    iconClassName,
-    iconComponent: IconComponent,
-    iconName,
-}) => (
-    <Fragment>
-        {IconComponent ? (
-            <i className={classNames(Styles.icon, iconClassName)}>
-                <IconComponent />
-            </i>
-        ) : iconName ? (
-            <Icon size="20px" 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>
-);
-
-export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
-    id,
-    to,
-    title,
-    hint,
-    counter,
-    className,
-    iconClassName,
-    iconComponent,
-    iconName,
-    isActive,
-    target,
-    ...rest
-}) => {
-    const NavigationComponent = useNavLink();
-
-    return (
-        <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
-                title={title}
-                counter={counter}
-                iconComponent={iconComponent}
-                iconClassName={iconClassName}
-                iconName={iconName}
-            />
-        </NavigationComponent>
-    );
-};
-
-interface HeaderNavigationItemPropsStrict extends HeaderNavigationItemData {
-    minimized: boolean;
-    main: boolean;
-}
-
-const HeaderNavigationItem: FC<HeaderNavigationItemPropsStrict> = ({
-    id,
-    to,
-    title,
-    hint,
-    counter,
-    className,
-    iconClassName,
-    iconComponent,
-    iconName,
-    isActive,
-    main,
-    minimized,
-}) => {
-    const NavigationComponent = useNavLink();
-
-    const trigger = (
-        <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}
-            />
-        </NavigationComponent>
-    );
-
-    return minimized && title ? (
-        <Tooltip el="div" direction="b" text={title}>
-            {trigger}
-        </Tooltip>
-    ) : (
-        trigger
-    );
-};
-
-export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
-    id,
-    hint,
-    className,
-    counter,
-    iconClassName,
-    iconComponent,
-    iconName,
-    title,
-    ...rest
-}) => (
-    <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}
-            title={title}
-        />
-    </div>
-);
-
-export const HeaderNavigationTriggerCustom: FC<
-    Omit<HeaderNavigationTriggerProps, 'title'> & { children: ReactNode }
-> = ({ children, id, hint, className, iconClassName, iconComponent, iconName, ...rest }) => (
-    <div
-        data-cy={`navigation-custom-${id}`}
-        data-pendo={`navigation-custom-${id}`}
-        {...rest}
-        title={hint}
-        className={classNames(Styles.link, 'cursor-pointer', className)}
-    >
-        {children}
-    </div>
-);
-
 export interface HeaderNavigationOverflowProps {
     direction: PopoverPropsStrict['direction'];
     width: PopoverPropsStrict['width'];
@@ -281,23 +60,30 @@ const HeaderNavigationOverflow: FC<{
 };
 
 export interface HeaderNavigationProps {
+    /** extra navigation */
     children?: ReactNode;
+    /** container class name */
     className?: string;
-    contentClassName?: string;
+    /** 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;
+    /** 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>;
-    align?: 'left' | 'right' | 'center';
-    alignMinimized?: 'left' | 'right' | 'center';
+    /** props for main items overflow component */
     overflow?: HeaderNavigationOverflowProps;
 }
 
-const shortItemWidth = 44;
-
 enum MinimizedState {
     Calculating,
     Minimized,
@@ -305,16 +91,14 @@ enum MinimizedState {
 }
 
 export const HeaderNavigation: FC<HeaderNavigationProps> = ({
-    align,
-    alignMinimized,
     children,
     className,
-    contentClassName,
     id,
     items,
     itemsOverflow,
     left,
     leftClassName,
+    rightClassName,
     minWidth = 800,
     navigationComponent = DefaultNavLinkComponent,
     overflow,
@@ -326,45 +110,6 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
     const forceUpdate = useForceUpdate();
     const [minimized, setMinimized] = useState(MinimizedState.Calculating);
 
-    const navigationAlign = useMemo(() => {
-        if (alignMinimized && minimized === MinimizedState.Minimized) {
-            return alignMinimized;
-        }
-
-        return align ?? 'left';
-    }, [align, alignMinimized, minimized]);
-
-    const navigationAlignClass = useMemo(() => {
-        switch (navigationAlign) {
-            case 'center':
-                return 'justify-content-center';
-            case 'right':
-                return 'justify-content-end';
-            default:
-                return 'justify-content-start';
-        }
-    }, [navigationAlign]);
-
-    const calculatePaddings = useCallback(() => {
-        if (leftRef.current && rightRef.current && centerRef.current) {
-            let diff = leftRef.current.clientWidth - rightRef.current.clientWidth;
-            const margin = 8;
-
-            // if no enough space to show navigation links in the middle of page
-            if (centerRef.current.clientWidth < (items?.length ?? 0) * shortItemWidth) {
-                // show them in the middle of available space
-                diff = 0;
-            }
-
-            if (navigationAlign !== 'center') {
-                diff = 0;
-            }
-
-            centerRef.current.style.marginLeft = `${margin + (diff < 0 ? -diff : 0)}px`;
-            centerRef.current.style.marginRight = `${margin + (diff > 0 ? diff : 0)}px`;
-        }
-    }, [items, navigationAlign]);
-
     useEffect(() => {
         const handleResize = () => {
             setMinimized(MinimizedState.Calculating);
@@ -380,15 +125,10 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
         forceUpdate();
     }, [items, itemsOverflow, forceUpdate]);
 
-    useLayoutEffect(() => {
-        calculatePaddings();
-    }, [calculatePaddings]);
-
     const updateIsMinimized = () => {
         if (centerRef.current && navigationRef.current) {
             if (navigationRef.current.clientWidth > centerRef.current.clientWidth) {
                 setMinimized(MinimizedState.Minimized);
-                calculatePaddings();
             } else if (minimized === MinimizedState.Calculating) {
                 setMinimized(MinimizedState.Full);
             }
@@ -403,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` }}
@@ -416,13 +155,12 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
                 <div
                     ref={centerRef}
                     className={classNames(
-                        'd-if flex-grow-1 flex-basis-0',
-                        navigationAlignClass,
+                        'd-if flex-grow-1 flex-basis-0 justify-content-center',
                         Styles.center
                     )}
                     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}
@@ -440,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>
@@ -451,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,