@servicetitan/navigation 8.1.6 → 8.2.0

package/src/components/layout.stories.tsx

@@ -1,4 +1,4 @@
-import { withAnvil, withMemoryRouter } from '../test/data';
+import { LocationInfo, withAnvil, withMemoryRouter } from '../test/data';
 import {
     WithAllMonolithData,
     WithAllMonolithDataCommercial,
@@ -6,6 +6,7 @@ import {
 import {
     DefaultSideNavigation,
     SideNavigationLinksOnly,
+    SideNavigationWithSubmenu,
 } from './left-navigation/side-navigation.stories';
 
 export default {
@@ -49,3 +50,17 @@ export const LeftNavLayoutOnlyLinks = () => {
         </div>
     );
 };
+
+export const LeftNavLayoutSubmenu = () => {
+    return (
+        <div className="d-f border flex-column" style={{ height: '800px' }}>
+            <WithAllMonolithDataCommercial />
+            <div className="flex-grow-1 flex-basis-0 d-f">
+                <SideNavigationWithSubmenu />
+                <div className="flex-grow-1 flex-basis-0 p-5">
+                    <LocationInfo />
+                </div>
+            </div>
+        </div>
+    );
+};

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

@@ -75,7 +75,7 @@
 
             .navigation-item-icon-wrapper {
                 flex: 1;
-                padding: @spacing-1;
+                padding: @spacing-1 @spacing-half;
             }
 
             .navigation-item-text {
@@ -160,7 +160,7 @@
     }
 
     &.navigation-item-icon-switch {
-        &.navigation-icon-active {
+        &.navigation-item-active {
             .navigation-icon-inactive[data-anv][data-anv] {
                 display: none;
             }
@@ -168,7 +168,7 @@
                 display: block;
             }
         }
-        &:not(.navigation-icon-active) {
+        &:not(.navigation-item-active) {
             .navigation-icon-inactive[data-anv][data-anv] {
                 display: block;
             }
@@ -187,6 +187,11 @@
         font-weight: @font-weight-semibold;
     }
 
+    .navigation-item-group-toggle[data-anv][data-anv] {
+        color: inherit;
+        font-weight: @font-weight-semibold;
+    }
+
     .navigation-icon[data-anv][data-anv] {
         height: 24px;
         width: 24px;
@@ -199,6 +204,114 @@
     }
 }
 
+.submenu {
+    margin-left: @spacing-3;
+    padding-left: @spacing-1;
+    padding-right: @spacing-1;
+    margin-bottom: @spacing-1;
+    position: relative;
+
+    &:before {
+        content: '';
+        position: absolute;
+        border-left: 1px solid @color-neutral-100;
+        width: 1px;
+        top: @spacing-2;
+        bottom: @spacing-1;
+        left: 0;
+    }
+
+    .submenu-group-header[data-anv][data-anv] {
+        padding-top: @spacing-2;
+        padding-bottom: @spacing-half;
+    }
+
+    .submenu-link {
+        padding: @spacing-1;
+    }
+
+    .submenu-link-active {
+        position: relative;
+    }
+
+    .submenu-link-active:before {
+        content: '';
+        position: absolute;
+        background-color: @text-color-active;
+        width: 3px;
+        top: @spacing-1;
+        bottom: @spacing-1;
+        left: -12px;
+    }
+
+    .submenu-link:before:not(.submenu-link-active) {
+        background-color: @bg-color-hover;
+    }
+
+    > *,
+    > *[data-anv][data-anv] {
+        border-left: 3px solid transparent;
+        padding-left: @spacing-1;
+    }
+
+    > *:last-child {
+        margin-bottom: @spacing-0;
+    }
+}
+
+.submenu-popover {
+    margin-left: -@spacing-1;
+    margin-right: -@spacing-1;
+    min-width: 240px;
+
+    .submenu-group-header[data-anv][data-anv] {
+        margin-top: @spacing-2;
+        padding-bottom: @spacing-half;
+    }
+
+    .submenu-link {
+        padding-top: @spacing-1;
+        padding-bottom: @spacing-1;
+    }
+
+    .submenu-link-active {
+        background-color: @bg-color-active;
+    }
+    .submenu-link:hover:not(.submenu-link-active) {
+        background-color: @bg-color-hover;
+    }
+
+    > *,
+    > *[data-anv][data-anv] {
+        padding-left: @spacing-1;
+        padding-right: @spacing-1;
+    }
+}
+
+.submenu,
+.submenu-popover {
+    display: flex;
+    flex-direction: column;
+
+    .submenu-group-header[data-anv][data-anv] {
+        color: @color-neutral-70;
+    }
+
+    .submenu-link {
+        color: @text-color;
+        font-size: @typescale-2;
+        border-radius: @border-radius-2;
+    }
+
+    .submenu-link-active {
+        color: @text-color-active;
+    }
+
+    .submenu-link:hover:not(.submenu-link-active) {
+        background-color: @bg-color-hover;
+    }
+}
+
 .options-item {
     font-family: @base-font-family;
     color: @text-color;

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

@@ -6,6 +6,7 @@ export const navigationIconInactive: string;
 export const navigationItem: string;
 export const navigationItemActive: string;
 export const navigationItemCounter: string;
+export const navigationItemGroupToggle: string;
 export const navigationItemIconSwitch: string;
 export const navigationItemIconWrapper: string;
 export const navigationItemText: string;
@@ -19,4 +20,9 @@ export const sideNavContent: string;
 export const sideNavExpanded: string;
 export const sideNavSlim: string;
 export const sideNavTop: string;
+export const submenu: string;
+export const submenuGroupHeader: string;
+export const submenuLink: string;
+export const submenuLinkActive: string;
+export const submenuPopover: string;
 

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

@@ -1,12 +1,14 @@
 import { ComponentType, useState } from 'react';
-import { items, withAnvil, withMemoryRouter } from '../../test/data';
+import { LocationInfo, items, withAnvil, withMemoryRouter } from '../../test/data';
 import { SideNavigation } from './';
 
 const layout = (Story: ComponentType) => {
     return (
         <div className="d-f border" style={{ height: '800px' }}>
             <Story />
-            <div className="flex-grow-1 flex-basis-0" />
+            <div className="flex-grow-1 flex-basis-0 p-5">
+                <LocationInfo />
+            </div>
         </div>
     );
 };
@@ -69,3 +71,29 @@ export const SideNavigationLinksOnly = () => {
         />
     );
 };
+
+export const SideNavigationWithSubmenu = () => {
+    const [expanded, setExpanded] = useState(false);
+    return (
+        <SideNavigation
+            expanded={expanded}
+            onExpandedChange={setExpanded}
+            items={[
+                items.dashboard,
+                items.calls,
+                items.schedule,
+                items.dispatch,
+
+                items.accountingWithSubmenu,
+                items.purchasingWithSubmenu,
+
+                items.followUps,
+                items.reports,
+                items.marketing,
+                items.priceBook,
+
+                items.projects,
+            ]}
+        />
+    );
+};

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

@@ -1,9 +1,27 @@
-import { Icon } from '@servicetitan/anvil2';
+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';
+
 import classNames from 'classnames';
-import { FC, Fragment, useContext } from 'react';
-import { HeaderNavigationItemData, NavLinkComponentProps } from '../../utils/navigation';
+import {
+    CSSProperties,
+    FC,
+    Fragment,
+    MouseEvent,
+    ReactElement,
+    useCallback,
+    useContext,
+    useState,
+} from 'react';
+import {
+    HeaderNavigationItemData,
+    HeaderNavigationItemLinkProps,
+    HeaderNavigationItemSubmenu,
+    NavLinkComponentProps,
+} from '../../utils/navigation';
 import { NavigationComponentContext } from '../../utils/navigation-context';
 import { CounterTag } from '../counter-tag';
 import * as Styles from './side-navigation.module.less';
@@ -59,14 +77,23 @@ export const SideNavigation: FC<SideNavigationProps> = ({
                 </Fragment>
             )}
             <div className={Styles.sideNavContent} data-cy="navigation-items">
-                {items?.map(item => (
-                    <SideNavigationItem
-                        key={item.id}
-                        expanded={expanded}
-                        navigationComponent={NavigationComponent}
-                        {...item}
-                    />
-                ))}
+                {items?.map(item =>
+                    item.submenu ? (
+                        <SideNavigationGroupItem
+                            key={item.id}
+                            expanded={expanded}
+                            navigationComponent={NavigationComponent}
+                            {...item}
+                        />
+                    ) : (
+                        <SideNavigationItem
+                            key={item.id}
+                            expanded={expanded}
+                            navigationComponent={NavigationComponent}
+                            {...item}
+                        />
+                    )
+                )}
             </div>
             <div className={Styles.divider} />
             <div className={Styles.sideNavBottom}>
@@ -79,14 +106,19 @@ export const SideNavigation: FC<SideNavigationProps> = ({
     );
 };
 
-interface SideNavigationItemProps extends HeaderNavigationItemData {
+interface NavigationComponentProps {
     navigationComponent: FC<NavLinkComponentProps>;
+}
+
+interface SideNavigationItemProps extends HeaderNavigationItemData, NavigationComponentProps {
     expanded?: boolean;
+    submenuExpanded?: boolean;
 }
 
 /** Side Navigation menu item */
 const SideNavigationItem: FC<SideNavigationItemProps> = ({
     id,
+    submenuExpanded,
     to,
     title,
     hint,
@@ -101,6 +133,7 @@ const SideNavigationItem: FC<SideNavigationItemProps> = ({
     expanded,
 }) => {
     const iconSwitch = !!icon && !!iconActive && !IconComponent;
+    const hasSubmenu = submenuExpanded === true || submenuExpanded === false;
 
     return (
         <NavigationComponent
@@ -150,6 +183,12 @@ const SideNavigationItem: FC<SideNavigationItemProps> = ({
                 {!!counter && (
                     <CounterTag data={counter} className={Styles.navigationItemCounter} />
                 )}
+                {hasSubmenu && !!expanded && (
+                    <Icon
+                        svg={submenuExpanded ? SvgGroupCollapse : SvgGroupExpand}
+                        className={Styles.navigationItemGroupToggle}
+                    />
+                )}
             </div>
 
             {!expanded && <div className={Styles.navigationItemText}>{title}</div>}
@@ -157,6 +196,119 @@ const SideNavigationItem: FC<SideNavigationItemProps> = ({
     );
 };
 
+const submenuPopoverStyles = { '--background-color-strong': '#24323C' } as CSSProperties;
+
+/** Side Navigation menu item */
+const SideNavigationGroupItem: FC<SideNavigationItemProps> = ({ ...props }) => {
+    const [submenuExpanded, setSubmenuExpanded] = useState(false);
+    const triggerClick = useCallback(
+        (e: MouseEvent<HTMLDivElement>) => {
+            e.stopPropagation();
+            e.preventDefault();
+
+            if (props.expanded) {
+                setSubmenuExpanded(exp => !exp);
+            }
+        },
+        [props.expanded]
+    );
+
+    return props.expanded ? (
+        <Fragment>
+            <div onClickCapture={triggerClick}>
+                <SideNavigationItem {...props} submenuExpanded={submenuExpanded} />
+            </div>
+            <Collapsible open={submenuExpanded} animate>
+                <div className={Styles.submenu}>
+                    <SideNavigationGroupContent
+                        groups={props.submenu?.groups ?? []}
+                        navigationComponent={props.navigationComponent}
+                    />
+                </div>
+            </Collapsible>
+        </Fragment>
+    ) : (
+        <Popover placement="right-start" openOnHover>
+            <Popover.Trigger>
+                {(triggerProps: PopoverTriggerProps) => (
+                    <div {...triggerProps} onClickCapture={triggerClick}>
+                        <SideNavigationItem {...props} />
+                    </div>
+                )}
+            </Popover.Trigger>
+            <Popover.Content style={submenuPopoverStyles}>
+                <div className={Styles.submenuPopover}>
+                    <Headline size="small" className="c-white m-b-half-i m-t-1">
+                        {props.title}
+                    </Headline>
+                    <SideNavigationGroupContent
+                        groups={props.submenu?.groups ?? []}
+                        navigationComponent={props.navigationComponent}
+                    />
+                </div>
+            </Popover.Content>
+        </Popover>
+    );
+};
+const SideNavigationGroupContent: FC<HeaderNavigationItemSubmenu & NavigationComponentProps> = ({
+    groups,
+    navigationComponent,
+}) => {
+    return (
+        <Fragment>
+            {groups.reduce((out, group) => {
+                if (!group.links.length) {
+                    return out;
+                }
+
+                out.push(
+                    <Text
+                        key=":group:title"
+                        variant="eyebrow"
+                        className={Styles.submenuGroupHeader}
+                    >
+                        {group.title}
+                    </Text>
+                );
+
+                out.push(
+                    ...group.links.map(link => (
+                        <SideNavigationGroupLink
+                            key={link.id}
+                            {...link}
+                            navigationComponent={navigationComponent}
+                        />
+                    ))
+                );
+                return out;
+            }, [] as ReactElement[])}
+        </Fragment>
+    );
+};
+const SideNavigationGroupLink: FC<HeaderNavigationItemLinkProps & NavigationComponentProps> = ({
+    id,
+    title,
+    to,
+    isActive,
+    navigationComponent: NavigationComponent,
+}) => {
+    return (
+        <NavigationComponent
+            data-cy={`navigation-item-${id}`}
+            data-pendo={`navigation-item-${id}`}
+            key={id}
+            to={to}
+            className={classNames(Styles.submenuLink, {
+                [Styles.submenuLinkActive]: isActive === true,
+            })}
+            isActive={typeof isActive === 'function' ? isActive : undefined}
+            activeClassName={Styles.submenuLinkActive}
+        >
+            {title}
+        </NavigationComponent>
+    );
+};
+
 /** Side Navigation options toggle */
 export const SideNavigationOptionsToggle: FC<{
     expanded?: boolean;

package/src/test/data.tsx

@@ -30,7 +30,7 @@ import SvgSchedule from '@servicetitan/anvil2/assets/icons/st/gnav_schedule_inac
 import SvgTasksActive from '@servicetitan/anvil2/assets/icons/st/gnav_tasks_active.svg';
 import SvgTasks from '@servicetitan/anvil2/assets/icons/st/gnav_tasks_inactive.svg';
 
-import { Popover } from '@servicetitan/design-system';
+import { BodyText, Popover } from '@servicetitan/design-system';
 
 import classNames from 'classnames';
 import { forwardRef, useState } from 'react';
@@ -38,7 +38,12 @@ import { forwardRef, useState } from 'react';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { MemoryRouter, useHistory, useLocation } from 'react-router-dom';
 import { HeaderNavigationTrigger } from '../components/links';
-import { HeaderNavigationItemData, NavLinkComponentProps } from '../utils/navigation';
+import {
+    HeaderNavigationItemData,
+    HeaderNavigationItemLinkProps,
+    HeaderNavigationItemSubmenuGroup,
+    NavLinkComponentProps,
+} from '../utils/navigation';
 import { NavigationComponentContext } from '../utils/navigation-context';
 import * as Styles from './data-stories.module.less';
 
@@ -46,20 +51,21 @@ export const NavLinkMock = forwardRef<any, NavLinkComponentProps>(
     ({ to, children, activeClassName, className, isActive, ...rest }, ref) => {
         const history = useHistory();
         const location = useLocation();
-        const linkActive = location.pathname.replace('/', '') === to;
+        const linkActive = location.pathname.startsWith(to);
 
         return (
             <a
                 {...rest}
-                className={classNames(className, linkActive ? activeClassName : '')}
-                href={to}
                 onClick={e => {
                     e.preventDefault();
+                    e.stopPropagation();
 
                     if (!to.startsWith('http')) {
-                        history.push(to);
+                        history.replace(to);
                     }
                 }}
+                className={classNames(className, linkActive ? activeClassName : '')}
+                href={to}
                 ref={ref}
             >
                 {children}
@@ -68,6 +74,12 @@ export const NavLinkMock = forwardRef<any, NavLinkComponentProps>(
     }
 );
 
+export const LocationInfo = () => {
+    const location = useLocation();
+
+    return <BodyText>current location - {location.pathname}</BodyText>;
+};
+
 export const withMemoryRouter = (Story: any) => (
     <MemoryRouter>
         <NavigationComponentContext.Provider value={NavLinkMock}>
@@ -111,12 +123,42 @@ const getItem = (
     data: Partial<HeaderNavigationItemData>
 ): HeaderNavigationItemData => ({
     id,
-    to: id,
+    to: '/' + id,
     title: id[0].toUpperCase() + id.substring(1),
     hint: id,
     icon: undefined,
     iconActive: undefined,
     ...(data ?? {}),
+    submenu: data.submenu
+        ? {
+              ...data.submenu,
+              groups: data.submenu.groups.map(group => ({
+                  ...group,
+                  links: group.links.map(link => ({
+                      ...link,
+                      to: `/${id}/${link.to}`,
+                  })),
+              })),
+          }
+        : undefined,
+});
+
+const getSubItem = (
+    id: string,
+    data: Partial<HeaderNavigationItemLinkProps>
+): HeaderNavigationItemLinkProps => ({
+    id,
+    to: id,
+    title: id[0].toUpperCase() + id.substring(1),
+    ...(data ?? {}),
+});
+
+const getGroup = (
+    title: string,
+    links: HeaderNavigationItemLinkProps[]
+): HeaderNavigationItemSubmenuGroup => ({
+    title,
+    links,
 });
 
 export const items = {
@@ -165,11 +207,45 @@ export const items = {
         iconActive: SvgInventoryActive,
     }),
     purchasing: getItem('purchasing', { iconComponent: InventoryIcon }),
+    purchasingWithSubmenu: getItem('purchasing', {
+        iconName: 'toys',
+        icon: SvgInventory,
+        iconActive: SvgInventoryActive,
+        submenu: {
+            groups: [
+                getGroup('Purchase', [
+                    getSubItem('repl', { title: 'Replenishment' }),
+                    getSubItem('orders', { title: 'Purchase Orders' }),
+                    getSubItem('receipts', { title: 'Receipts' }),
+                    getSubItem('returns', { title: 'Returns' }),
+                ]),
+            ],
+        },
+    }),
     accounting: getItem('accounting', {
         iconName: 'assignment',
         icon: SvgAccounting,
         iconActive: SvgAccountingActive,
     }),
+    accountingWithSubmenu: getItem('accounting', {
+        iconName: 'assignment',
+        icon: SvgAccounting,
+        iconActive: SvgAccountingActive,
+        submenu: {
+            groups: [
+                getGroup('Accounts Receivable', [
+                    getSubItem('ar', { title: 'AR Management' }),
+                    getSubItem('export', { title: 'Batch/Export Transactions' }),
+                    getSubItem('invoices', { title: 'Invoices' }),
+                    getSubItem('payments', { title: 'Customer Payments' }),
+                    getSubItem('deposits', { title: 'Bank Deposits' }),
+                ]),
+                getGroup('Accounts Payable', [getSubItem('bills', { title: 'Bills' })]),
+                getGroup('Financing', [getSubItem('dashboard', { title: 'Dashboard' })]),
+                getGroup('Others', [getSubItem('at', { title: 'Accounting Audit Trail' })]),
+            ],
+        },
+    }),
     marketing: getItem('marketing', {
         iconName: 'bullhorn',
         icon: SvgMarketing,

package/src/utils/navigation.ts

@@ -3,22 +3,10 @@ import { IconPropsStrict } from '@servicetitan/design-system';
 import { FC, HTMLAttributeAnchorTarget, ReactNode } from 'react';
 import { CounterTagPropsType } from '../components/counter-tag';
 
-export interface HeaderNavigationItemData {
-    /** link id */
-    id: string;
-
-    /** link href */
-    to: string;
-
-    /** link title */
-    title: string;
-
+export interface HeaderNavigationItemData extends HeaderNavigationItemLinkProps {
     /** link description */
     hint: string;
 
-    /** callback to return active state. By default, it compares link href with current pathname */
-    isActive?: boolean | ((pathname: string) => boolean);
-
     /** flag if the link is not shown (based on FG and/or user permissions) */
     isHidden?: boolean;
 
@@ -42,6 +30,36 @@ export interface HeaderNavigationItemData {
 
     /** class name of link item */
     className?: string;
+
+    /** optional submenu of link item */
+    submenu?: HeaderNavigationItemSubmenu;
+}
+
+export interface HeaderNavigationItemLinkProps {
+    /** link id */
+    id: string;
+
+    /** link href */
+    to: string;
+
+    /** link title */
+    title: string;
+
+    /** callback to return active state. By default, it compares link href with current pathname */
+    isActive?: boolean | ((pathname: string) => boolean);
+}
+
+export interface HeaderNavigationItemSubmenu {
+    /** submenu groups */
+    groups: HeaderNavigationItemSubmenuGroup[];
+}
+
+export interface HeaderNavigationItemSubmenuGroup {
+    /** submenu group title */
+    title: string;
+
+    /** submenu group links */
+    links: HeaderNavigationItemLinkProps[];
 }
 
 export interface NavLinkComponentPropsStrict {