@servicetitan/navigation 9.0.1 → 9.1.0

package/src/components/left-navigation/interface-internal.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { NavLinkComponentProps } from '../../utils/navigation';
+import { SideNavigationExpandedState } from './interface';
+
+export interface NavigationComponentProps {
+    navigationComponent: FC<NavLinkComponentProps>;
+}
+
+export interface SideNavigationExpandedProps {
+    expanded?: SideNavigationExpandedState;
+}

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

@@ -0,0 +1,13 @@
+import { HeaderNavigationItemData } from '../../utils/navigation';
+
+export interface SideNavigationExpandedState {
+    bar: boolean;
+    submenus?: string[];
+}
+
+export interface SideNavigationLinkProps
+    extends Omit<HeaderNavigationItemData, 'iconName' | 'submenu'> {}
+export interface SideNavigationTriggerProps
+    extends Omit<SideNavigationLinkProps, 'to' | 'isActive'> {
+    isActive?: boolean;
+}

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

@@ -0,0 +1,128 @@
+import { Icon } 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 classNames from 'classnames';
+import { FC, Fragment } from 'react';
+import { HeaderNavigationItemData } from '../../utils/navigation';
+import { CounterTag } from '../counter-tag';
+import { SideNavigationTriggerProps } from './interface';
+import { NavigationComponentProps, SideNavigationExpandedProps } from './interface-internal';
+import * as Styles from './side-navigation.module.less';
+
+export interface InternalSideNavigationItemContentProps
+    extends Omit<HeaderNavigationItemData, 'iconName' | 'to' | ''> {
+    submenuExpanded: boolean | undefined;
+}
+
+export const InternalSideNavigationItemContent: FC<InternalSideNavigationItemContentProps> = ({
+    icon,
+    iconActive,
+    iconClassName,
+    iconComponent: IconComponent,
+    tag,
+    title,
+    submenuExpanded,
+}) => (
+    <Fragment>
+        <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>
+            )}
+
+            <div className={Styles.navigationItemTextExpanded}>{title}</div>
+            {!!tag && <CounterTag data={tag} className={Styles.navigationItemCounter} />}
+            {typeof submenuExpanded === 'boolean' && (
+                <Icon
+                    svg={submenuExpanded ? SvgGroupCollapse : SvgGroupExpand}
+                    className={Styles.navigationItemGroupToggle}
+                />
+            )}
+        </div>
+
+        <div
+            className={classNames(Styles.navigationItemTextCollapsed, {
+                [Styles.navigationItemTextSmall]: title.length >= 10,
+            })}
+        >
+            {title}
+        </div>
+    </Fragment>
+);
+
+export interface InternalSideNavigationLinkProps
+    extends Omit<HeaderNavigationItemData, 'iconName'>,
+        NavigationComponentProps,
+        SideNavigationExpandedProps {
+    submenuExpanded: boolean | undefined;
+    dataPrefix?: string;
+}
+
+export const internalNavigationContentContainerProps = ({
+    className,
+    icon,
+    iconActive,
+    iconComponent,
+    id,
+    isActive,
+    prefix,
+}: Omit<SideNavigationTriggerProps, 'isActive'> & { prefix: string; isActive?: any }) => ({
+    'data-cy': `${prefix}-${id}`,
+    'data-pendo': `${prefix}-${id}`,
+    'className': classNames(Styles.navigationItem, className, {
+        [Styles.navigationItemActive]: isActive === true,
+        [Styles.navigationItemIconSwitch]: !!icon && !!iconActive && !iconComponent,
+    }),
+});
+
+/** Side Navigation menu item (for internal usage) */
+export const InternalSideNavigationLink: FC<InternalSideNavigationLinkProps> = ({
+    to,
+    className,
+    dataPrefix,
+    isActive,
+    navigationComponent: NavigationComponent,
+    submenuExpanded,
+    ...props
+}) => {
+    return (
+        <NavigationComponent
+            {...internalNavigationContentContainerProps({
+                ...props,
+                prefix: dataPrefix ?? 'navigation-item',
+                className,
+                isActive,
+            })}
+            to={to}
+            isActive={typeof isActive === 'function' ? isActive : undefined}
+            activeClassName={Styles.navigationItemActive}
+        >
+            <InternalSideNavigationItemContent submenuExpanded={submenuExpanded} {...props} />
+        </NavigationComponent>
+    );
+};

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

@@ -0,0 +1,39 @@
+import classNames from 'classnames';
+import { FC, useContext } from 'react';
+import { NavigationComponentContext } from '../../utils/navigation-context';
+import { SideNavigationLinkProps, SideNavigationTriggerProps } from './interface';
+import {
+    InternalSideNavigationItemContent,
+    InternalSideNavigationLink,
+    internalNavigationContentContainerProps,
+} from './side-navigation-links-internal';
+
+/** Side Navigation menu link */
+export const SideNavigationLink: FC<SideNavigationLinkProps> = props => {
+    const NavigationComponent = useContext(NavigationComponentContext);
+
+    return (
+        <InternalSideNavigationLink
+            {...props}
+            navigationComponent={NavigationComponent}
+            submenuExpanded={undefined}
+            dataPrefix="navigation-link"
+        />
+    );
+};
+
+/** Side Navigation menu link */
+export const SideNavigationTrigger: FC<SideNavigationTriggerProps> = props => {
+    return (
+        <div
+            {...internalNavigationContentContainerProps({
+                ...props,
+                prefix: 'navigation-trigger',
+                className: classNames(props.className, 'cursor-pointer'),
+                isActive: props.isActive,
+            })}
+        >
+            <InternalSideNavigationItemContent submenuExpanded={undefined} {...props} />
+        </div>
+    );
+};

package/src/components/left-navigation/side-navigation.module.less

@@ -44,7 +44,10 @@
                 padding: @spacing-half;
             }
 
-            .navigation-item-text {
+            .navigation-item-text-expanded {
+                display: none;
+            }
+            .navigation-item-text-collapsed {
                 font-family: @base-font-family;
                 font-size: 11px;
                 line-height: 11px;
@@ -52,7 +55,7 @@
                 text-align: center;
             }
 
-            .navigation-item-text.navigation-item-text-small {
+            .navigation-item-text-collapsed.navigation-item-text-small {
                 font-size: 10.5px;
             }
         }
@@ -81,13 +84,17 @@
                 padding: @spacing-1 @spacing-half;
             }
 
-            .navigation-item-text {
+            .navigation-item-text-expanded {
                 font-family: @base-font-family;
                 font-size: @typescale-3;
                 padding-left: @spacing-1;
                 flex: 1;
             }
 
+            .navigation-item-text-collapsed {
+                display: none;
+            }
+
             .navigation-item-counter {
                 margin-right: @spacing-1;
             }
@@ -190,7 +197,7 @@
     }
 
     .navigation-item-counter {
-        color: @color-white;
+        color: @color-black;
         font-weight: @font-weight-semibold;
         min-width: 12px !important;
         min-height: 12px !important;

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

@@ -9,7 +9,8 @@ export const navigationItemCounter: string;
 export const navigationItemGroupToggle: string;
 export const navigationItemIconSwitch: string;
 export const navigationItemIconWrapper: string;
-export const navigationItemText: string;
+export const navigationItemTextCollapsed: string;
+export const navigationItemTextExpanded: string;
 export const navigationItemTextSmall: string;
 export const optionsIcon: string;
 export const optionsIconWrapper: string;

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

@@ -1,5 +1,6 @@
+import { Popover } from '@servicetitan/anvil2';
 import { Page } from '@servicetitan/design-system';
-import { ComponentType, useState } from 'react';
+import { ComponentType, Fragment, useState } from 'react';
 import {
     LocationInfo,
     items,
@@ -7,7 +8,12 @@ import {
     withDefaultRedirects,
     withMemoryRouter,
 } from '../../test/data';
-import { SideNavigation, SideNavigationExpandedState } from './';
+import {
+    SideNavigation,
+    SideNavigationExpandedState,
+    SideNavigationLink,
+    SideNavigationTrigger,
+} from './';
 
 const layout = (Story: ComponentType) => {
     return (
@@ -50,7 +56,7 @@ export const DefaultSideNavigation = () => {
                 items.pointOfSale,
                 items.reports,
             ]}
-            itemsTop={[items.tasks]}
+            itemsTop={<SideNavigationLink {...items.tasks} />}
         />
     );
 };
@@ -106,3 +112,50 @@ export const SideNavigationWithSubmenu = () => {
         />
     );
 };
+
+const SideLinkWithPopover = () => {
+    return (
+        <Popover placement="right" openOnHover>
+            <Popover.Trigger>
+                {props => (
+                    <div {...props}>
+                        <SideNavigationTrigger {...items.marketing} isActive={false} />
+                    </div>
+                )}
+            </Popover.Trigger>
+            <Popover.Content>popover content</Popover.Content>
+        </Popover>
+    );
+};
+
+export const SideNavigationWithCustomTopElements = () => {
+    const [expanded, setExpanded] = useState<SideNavigationExpandedState | undefined>(undefined);
+    return (
+        <SideNavigation
+            expanded={expanded}
+            onExpandedChange={setExpanded}
+            items={[
+                items.dashboard,
+                items.schedule,
+                items.dispatch,
+
+                items.accountingWithSubmenu,
+                items.purchasingWithSubmenu,
+
+                items.followUpsWithSubmenu,
+                items.reports,
+                items.marketing,
+                items.priceBook,
+
+                items.projects,
+            ]}
+            itemsTop={
+                <Fragment>
+                    <SideNavigationLink {...items.calls} />
+                    <SideNavigationLink {...items.tasks} />
+                    <SideLinkWithPopover />
+                </Fragment>
+            }
+        />
+    );
+};

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,113 +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;
 
 /** 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: [
@@ -226,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}>
@@ -252,7 +153,11 @@ const SideNavigationGroupItem: FC<
             <Popover.Trigger>
                 {(triggerProps: PopoverTriggerProps) => (
                     <div {...triggerProps}>
-                        <SideNavigationItem {...props} tag={tag} />
+                        <InternalSideNavigationLink
+                            {...props}
+                            submenuExpanded={undefined}
+                            tag={tag}
+                        />
                     </div>
                 )}
             </Popover.Trigger>
@@ -329,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 }) =>

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;
+}