@servicetitan/navigation 9.0.0 → 9.1.0

package/src/components/left-navigation/side-navigation.tsx

@@ -1,6 +1,4 @@
 import { Icon, Popover, PopoverTriggerProps, Text } from '@servicetitan/anvil2';
-import SvgGroupCollapse from '@servicetitan/anvil2/assets/icons/material/round/expand_less.svg';
-import SvgGroupExpand from '@servicetitan/anvil2/assets/icons/material/round/expand_more.svg';
 import SvgCollapse from '@servicetitan/anvil2/assets/icons/st/gnav_menu_collapse.svg';
 import SvgExpand from '@servicetitan/anvil2/assets/icons/st/gnav_menu_expand.svg';
 import { Collapsible, Headline } from '@servicetitan/design-system';
@@ -12,6 +10,7 @@ import {
     Fragment,
     MouseEvent,
     ReactElement,
+    ReactNode,
     useCallback,
     useContext,
 } from 'react';
@@ -19,18 +18,16 @@ import {
     HeaderNavigationItemData,
     HeaderNavigationItemSubmenu,
     HeaderNavigationItemSubmenuLink,
-    NavLinkComponentProps,
 } from '../../utils/navigation';
 import { NavigationComponentContext } from '../../utils/navigation-context';
+import { getSubmenuGroupTag } from '../../utils/side-nav';
 import { CounterTag } from '../counter-tag';
+import { SideNavigationExpandedState } from './interface';
+import { NavigationComponentProps, SideNavigationExpandedProps } from './interface-internal';
+import { InternalSideNavigationLink } from './side-navigation-links-internal';
 import * as Styles from './side-navigation.module.less';
 import { withTooltip } from './with-tooltip';
 
-export interface SideNavigationExpandedState {
-    bar: boolean;
-    submenus?: string[];
-}
-
 export interface SideNavigationProps {
     /** container class name */
     className?: string;
@@ -39,7 +36,7 @@ export interface SideNavigationProps {
     /** main navigation items */
     items?: HeaderNavigationItemData[];
     /** top navigation items */
-    itemsTop?: HeaderNavigationItemData[];
+    itemsTop?: ReactNode;
     /** is menu expanded */
     expanded?: SideNavigationExpandedState;
     /** expand change handler */
@@ -65,17 +62,10 @@ export const SideNavigation: FC<SideNavigationProps> = ({
             id={id}
             data-cy="side-navigation"
         >
-            {!!itemsTop?.length && (
+            {!!itemsTop && (
                 <Fragment>
                     <div className={Styles.sideNavTop} data-cy="navigation-items-top">
-                        {itemsTop.map(item => (
-                            <SideNavigationItem
-                                key={item.id}
-                                expanded={expanded}
-                                navigationComponent={NavigationComponent}
-                                {...item}
-                            />
-                        ))}
+                        {itemsTop}
                     </div>
                     <div className={Styles.divider} />
                 </Fragment>
@@ -91,9 +81,9 @@ export const SideNavigation: FC<SideNavigationProps> = ({
                             {...item}
                         />
                     ) : (
-                        <SideNavigationItem
+                        <InternalSideNavigationLink
                             key={item.id}
-                            expanded={expanded}
+                            submenuExpanded={undefined}
                             navigationComponent={NavigationComponent}
                             {...item}
                         />
@@ -111,117 +101,22 @@ export const SideNavigation: FC<SideNavigationProps> = ({
     );
 };
 
-interface NavigationComponentProps {
-    navigationComponent: FC<NavLinkComponentProps>;
-}
-
-interface SideNavigationItemProps extends HeaderNavigationItemData, NavigationComponentProps {
-    expanded?: SideNavigationExpandedState;
-}
-
-/** Side Navigation menu item */
-const SideNavigationItem: FC<SideNavigationItemProps> = ({
-    id,
-    to,
-    title,
-    className,
-    iconClassName,
-    iconComponent: IconComponent,
-    icon,
-    iconActive,
-    isActive,
-    navigationComponent: NavigationComponent,
-    tag,
-    expanded,
-    submenu,
-}) => {
-    const iconSwitch = !!icon && !!iconActive && !IconComponent;
-    const hasSubmenu = !!submenu;
-
-    return (
-        <NavigationComponent
-            data-cy={`navigation-item-${id}`}
-            data-pendo={`navigation-item-${id}`}
-            key={id}
-            to={to}
-            className={classNames(Styles.navigationItem, className, {
-                [Styles.navigationItemActive]: isActive === true,
-                [Styles.navigationItemIconSwitch]: iconSwitch,
-            })}
-            isActive={typeof isActive === 'function' ? isActive : undefined}
-            activeClassName={Styles.navigationItemActive}
-        >
-            <div className={Styles.navigationItemIconWrapper}>
-                {IconComponent ? (
-                    <i className={classNames(Styles.navigationIcon, iconClassName)}>
-                        <IconComponent />
-                    </i>
-                ) : (
-                    <Fragment>
-                        {icon && (
-                            <Icon
-                                svg={icon}
-                                className={classNames(
-                                    Styles.navigationIcon,
-                                    Styles.navigationIconInactive,
-                                    iconClassName
-                                )}
-                            />
-                        )}
-                        {iconActive && (
-                            <Icon
-                                svg={iconActive}
-                                className={classNames(
-                                    Styles.navigationIcon,
-                                    Styles.navigationIconActive,
-                                    iconClassName
-                                )}
-                            />
-                        )}
-                    </Fragment>
-                )}
-
-                {!!expanded?.bar && <div className={Styles.navigationItemText}>{title}</div>}
-                {!!tag && <CounterTag data={tag} className={Styles.navigationItemCounter} />}
-                {hasSubmenu && !!expanded?.bar && (
-                    <Icon
-                        svg={expanded?.submenus?.includes(id) ? SvgGroupCollapse : SvgGroupExpand}
-                        className={Styles.navigationItemGroupToggle}
-                    />
-                )}
-            </div>
-
-            {!expanded?.bar && (
-                <div
-                    className={classNames(Styles.navigationItemText, {
-                        [Styles.navigationItemTextSmall]: title.length >= 10,
-                    })}
-                >
-                    {title}
-                </div>
-            )}
-        </NavigationComponent>
-    );
-};
-
 const submenuPopoverStyles = { '--background-color-strong': '#24323C' } as CSSProperties;
-const getFirstSubmenuLinkTo = (
-    submenu: HeaderNavigationItemSubmenu | undefined,
-    defaultTo: string
-) => submenu?.groups[0]?.links?.[0].to ?? defaultTo;
 
 /** Side Navigation menu item */
 const SideNavigationGroupItem: FC<
-    SideNavigationItemProps & {
-        onExpandedChange: undefined | ((expanded: SideNavigationExpandedState) => void);
-    }
+    HeaderNavigationItemData &
+        SideNavigationExpandedProps &
+        NavigationComponentProps & {
+            onExpandedChange: undefined | ((expanded: SideNavigationExpandedState) => void);
+        }
 > = ({ onExpandedChange, ...props }) => {
+    const isSubmenuExpanded = props.expanded?.submenus?.includes(props.id) ?? false;
     const triggerClick = useCallback(
         (e: MouseEvent<HTMLDivElement>) => {
             e.stopPropagation();
             e.preventDefault();
 
-            const isSubmenuExpanded = props.expanded?.submenus?.includes(props.id);
             onExpandedChange?.({
                 bar: !!props.expanded?.bar,
                 submenus: [
@@ -230,17 +125,19 @@ const SideNavigationGroupItem: FC<
                 ],
             });
         },
-        [props.id, props.expanded, onExpandedChange]
+        [props.id, props.expanded, isSubmenuExpanded, onExpandedChange]
     );
 
-    const tag = props.submenu?.groups.some(group => group.links.some(link => !!link.tag))
-        ? true
-        : props.tag;
+    const tag = getSubmenuGroupTag(props.submenu, props.tag);
 
     return props.expanded?.bar ? (
         <Fragment>
             <div onClickCapture={triggerClick}>
-                <SideNavigationItem {...props} tag={tag} />
+                <InternalSideNavigationLink
+                    {...props}
+                    submenuExpanded={isSubmenuExpanded}
+                    tag={tag}
+                />
             </div>
             <Collapsible open={props.expanded?.submenus?.includes(props.id)} animate>
                 <div className={Styles.submenu}>
@@ -256,9 +153,9 @@ const SideNavigationGroupItem: FC<
             <Popover.Trigger>
                 {(triggerProps: PopoverTriggerProps) => (
                     <div {...triggerProps}>
-                        <SideNavigationItem
+                        <InternalSideNavigationLink
                             {...props}
-                            to={getFirstSubmenuLinkTo(props.submenu, props.to)}
+                            submenuExpanded={undefined}
                             tag={tag}
                         />
                     </div>
@@ -337,7 +234,7 @@ const SideNavigationGroupLink: FC<HeaderNavigationItemSubmenuLink & NavigationCo
 };
 
 /** Side Navigation options toggle */
-export const SideNavigationOptionsToggle: FC<{
+const SideNavigationOptionsToggle: FC<{
     expanded?: SideNavigationExpandedState;
     onExpandedChange?(expanded: SideNavigationExpandedState): void;
 }> = ({ expanded, onExpandedChange }) =>
@@ -354,8 +251,8 @@ export const SideNavigationOptionsToggle: FC<{
                 <Icon className={Styles.optionsIcon} svg={expanded ? SvgCollapse : SvgExpand} />
             </div>
 
-            {!!expanded && <span className={Styles.optionsItemText}>Collapse Menu</span>}
+            {!!expanded?.bar && <span className={Styles.optionsItemText}>Collapse Menu</span>}
         </div>,
-        expanded ? undefined : 'Expand Menu',
+        expanded?.bar ? undefined : 'Expand Menu',
         'right'
     );

package/src/test/data.tsx

@@ -33,10 +33,10 @@ import SvgTasks from '@servicetitan/anvil2/assets/icons/st/gnav_tasks_inactive.s
 import { BodyText, Popover } from '@servicetitan/design-system';
 
 import classNames from 'classnames';
-import { forwardRef, useState } from 'react';
+import { Fragment, forwardRef, useState } from 'react';
 // needed only for storybook and added in root dependencies
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { MemoryRouter, useHistory, useLocation } from 'react-router-dom';
+import { MemoryRouter, Redirect, Switch, useHistory, useLocation } from 'react-router-dom';
 import { HeaderNavigationTrigger } from '../components/links';
 import {
     HeaderNavigationItemData,
@@ -319,3 +319,14 @@ export const CallsNavigationTrigger = () => {
         </Popover>
     );
 };
+
+export const withDefaultRedirects = (Story: any) => (
+    <Fragment>
+        <Switch>
+            <Redirect from="/accounting" exact to="/accounting/export" />
+            <Redirect from="/purchasing" exact to="/purchasing/repl" />
+            <Redirect from="/followUps" exact to="/followUps/sold" />
+        </Switch>
+        <Story />
+    </Fragment>
+);

package/src/utils/counter-tag.ts

@@ -0,0 +1,11 @@
+import { CounterTagProps } from '../components/counter-tag';
+
+export interface CounterTagPropsStrict {
+    value: number | boolean;
+    className?: string;
+}
+
+export type CounterTagType = boolean | number | CounterTagProps;
+
+export const isCounterPropsObject = (tag?: CounterTagType): tag is CounterTagProps =>
+    !!tag && (tag as any).value !== undefined;

package/src/utils/side-nav.ts

@@ -0,0 +1,34 @@
+import { isCounterPropsObject } from './counter-tag';
+import { HeaderNavigationItemData, HeaderNavigationItemSubmenu } from './navigation';
+
+export function getSubmenuGroupTag(
+    submenu: HeaderNavigationItemSubmenu | undefined,
+    defaultTag: HeaderNavigationItemData['tag']
+): HeaderNavigationItemData['tag'] {
+    if (!submenu) {
+        return defaultTag;
+    }
+
+    let tagValue: number | boolean | undefined = undefined;
+
+    for (const group of submenu.groups) {
+        for (const link of group.links) {
+            const ltv: number | boolean | undefined = isCounterPropsObject(link.tag)
+                ? link.tag.value
+                : link.tag;
+
+            if (ltv) {
+                if (typeof ltv === 'number') {
+                    if (typeof tagValue !== 'number') {
+                        tagValue = 0;
+                    }
+                    tagValue += ltv;
+                } else if (typeof tagValue !== 'number') {
+                    tagValue = true;
+                }
+            }
+        }
+    }
+
+    return tagValue ?? defaultTag;
+}