@servicetitan/navigation 8.2.1 → 9.0.0

package/src/components/left-navigation/header-navigation-tiny-links.tsx

@@ -9,13 +9,13 @@ import { withTooltip } from './with-tooltip';
 
 /** Content for navigation items */
 export const HeaderNavigationItemContent: FC<{
-    counter?: CounterTagPropsType;
+    tag?: CounterTagPropsType;
     counterClassName?: string;
     icon: IconProps['svg'] | undefined;
     iconActive: IconProps['svg'] | undefined;
     label?: string;
     labelClassName?: string;
-}> = ({ counter, counterClassName, icon, iconActive, label, labelClassName }) => {
+}> = ({ counterClassName, icon, iconActive, label, labelClassName, tag }) => {
     return (
         <Fragment>
             {!!icon && <Icon svg={icon} className={Styles.navigationIcon} />}
@@ -32,9 +32,9 @@ export const HeaderNavigationItemContent: FC<{
                 </span>
             )}
 
-            {!!counter && (
+            {!!tag && (
                 <CounterTag
-                    data={counter}
+                    data={tag}
                     className={classNames(Styles.navigationItemCounter, counterClassName)}
                     longClassName={Styles.navigationItemCounterLong}
                 />
@@ -49,13 +49,13 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
     to,
     hint,
     tooltip,
-    counter,
     className,
     icon,
     iconActive,
     isActive,
     label,
     labelClassName,
+    tag,
     target,
     ...rest
 }) => {
@@ -78,7 +78,7 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
             target={target}
         >
             <HeaderNavigationItemContent
-                counter={counter}
+                tag={tag}
                 icon={icon}
                 iconActive={iconActive}
                 label={label}
@@ -93,13 +93,13 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
 export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
     id,
     className,
-    counter,
     icon,
     iconActive,
     isActive,
     hint,
     label,
     labelClassName,
+    tag,
     tooltip,
     title,
     titleClassName,
@@ -122,7 +122,7 @@ export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
             )}
         >
             <HeaderNavigationItemContent
-                counter={counter}
+                tag={tag}
                 icon={icon}
                 iconActive={iconActive}
                 label={label}

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

@@ -86,7 +86,7 @@ export const WithAllMonolithData = () => (
                 />
 
                 <ProfileDropdown>
-                    <ProfileDropdown.Link id="tasks" to="https://googgle.com" counter={10}>
+                    <ProfileDropdown.Link id="tasks" to="https://googgle.com" tag={10}>
                         Task Management
                     </ProfileDropdown.Link>
                     <ProfileDropdown.Divider />
@@ -152,7 +152,7 @@ export const WithAllMonolithDataCommercial = () => (
                 />
 
                 <ProfileDropdown>
-                    <ProfileDropdown.Link id="tasks" to="https://googgle.com" counter={10}>
+                    <ProfileDropdown.Link id="tasks" to="https://googgle.com" tag={10}>
                         Task Management
                     </ProfileDropdown.Link>
                     <ProfileDropdown.Divider />

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

@@ -73,7 +73,6 @@
 
         .navigation-item {
             flex-direction: row;
-            margin-bottom: @spacing-half;
             margin-left: @spacing-1;
             margin-right: @spacing-1;
 
@@ -85,9 +84,13 @@
             .navigation-item-text {
                 font-family: @base-font-family;
                 font-size: @typescale-3;
-                padding-left: @spacing-2;
+                padding-left: @spacing-1;
                 flex: 1;
             }
+
+            .navigation-item-counter {
+                margin-right: @spacing-1;
+            }
         }
 
         .options-item {
@@ -189,6 +192,8 @@
     .navigation-item-counter {
         color: @color-white;
         font-weight: @font-weight-semibold;
+        min-width: 12px !important;
+        min-height: 12px !important;
     }
 
     .navigation-item-group-toggle[data-anv][data-anv] {
@@ -215,16 +220,6 @@
     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;
@@ -305,12 +300,25 @@
         color: @text-color;
         font-size: @typescale-2;
         border-radius: @border-radius-2;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
     }
 
     .submenu-link-active {
         color: @text-color-active;
     }
 
+    .submenu-link-counter {
+        min-height: 19px !important;
+        min-width: 19px !important;
+
+        > span:first-child {
+            color: @color-black;
+        }
+    }
+
     .submenu-link:hover:not(.submenu-link-active) {
         background-color: @bg-color-hover;
     }

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

@@ -25,5 +25,6 @@ export const submenu: string;
 export const submenuGroupHeader: string;
 export const submenuLink: string;
 export const submenuLinkActive: string;
+export const submenuLinkCounter: string;
 export const submenuPopover: string;
 

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

@@ -1,7 +1,7 @@
 import { Page, Sidebar } from '@servicetitan/design-system';
 import { ComponentType, useState } from 'react';
 import { LocationInfo, items, withAnvil, withMemoryRouter } from '../../test/data';
-import { SideNavigation } from './';
+import { SideNavigation, SideNavigationExpandedState } from './';
 
 const layout = (Story: ComponentType) => {
     return (
@@ -23,7 +23,7 @@ export default {
 };
 
 export const DefaultSideNavigation = () => {
-    const [expanded, setExpanded] = useState(false);
+    const [expanded, setExpanded] = useState<SideNavigationExpandedState | undefined>(undefined);
     return (
         <SideNavigation
             expanded={expanded}
@@ -50,7 +50,7 @@ export const DefaultSideNavigation = () => {
 };
 
 export const SideNavigationLinksOnly = () => {
-    const [expanded, setExpanded] = useState(false);
+    const [expanded, setExpanded] = useState<SideNavigationExpandedState | undefined>(undefined);
     return (
         <SideNavigation
             expanded={expanded}
@@ -76,7 +76,7 @@ export const SideNavigationLinksOnly = () => {
 };
 
 export const SideNavigationWithSubmenu = () => {
-    const [expanded, setExpanded] = useState(false);
+    const [expanded, setExpanded] = useState<SideNavigationExpandedState | undefined>(undefined);
     return (
         <SideNavigation
             expanded={expanded}

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

@@ -14,12 +14,11 @@ import {
     ReactElement,
     useCallback,
     useContext,
-    useState,
 } from 'react';
 import {
     HeaderNavigationItemData,
-    HeaderNavigationItemLinkProps,
     HeaderNavigationItemSubmenu,
+    HeaderNavigationItemSubmenuLink,
     NavLinkComponentProps,
 } from '../../utils/navigation';
 import { NavigationComponentContext } from '../../utils/navigation-context';
@@ -27,6 +26,11 @@ import { CounterTag } from '../counter-tag';
 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;
@@ -37,9 +41,9 @@ export interface SideNavigationProps {
     /** top navigation items */
     itemsTop?: HeaderNavigationItemData[];
     /** is menu expanded */
-    expanded?: boolean;
+    expanded?: SideNavigationExpandedState;
     /** expand change handler */
-    onExpandedChange(expanded: boolean): void;
+    onExpandedChange?(expanded: SideNavigationExpandedState): void;
 }
 
 export const SideNavigation: FC<SideNavigationProps> = ({
@@ -55,7 +59,7 @@ export const SideNavigation: FC<SideNavigationProps> = ({
         <div
             className={classNames(
                 Styles.sideNav,
-                expanded ? Styles.sideNavExpanded : Styles.sideNavSlim,
+                expanded?.bar ? Styles.sideNavExpanded : Styles.sideNavSlim,
                 className
             )}
             id={id}
@@ -82,6 +86,7 @@ export const SideNavigation: FC<SideNavigationProps> = ({
                         <SideNavigationGroupItem
                             key={item.id}
                             expanded={expanded}
+                            onExpandedChange={onExpandedChange}
                             navigationComponent={NavigationComponent}
                             {...item}
                         />
@@ -111,18 +116,14 @@ interface NavigationComponentProps {
 }
 
 interface SideNavigationItemProps extends HeaderNavigationItemData, NavigationComponentProps {
-    expanded?: boolean;
-    submenuExpanded?: boolean;
+    expanded?: SideNavigationExpandedState;
 }
 
 /** Side Navigation menu item */
 const SideNavigationItem: FC<SideNavigationItemProps> = ({
     id,
-    submenuExpanded,
     to,
     title,
-    hint,
-    counter,
     className,
     iconClassName,
     iconComponent: IconComponent,
@@ -130,10 +131,12 @@ const SideNavigationItem: FC<SideNavigationItemProps> = ({
     iconActive,
     isActive,
     navigationComponent: NavigationComponent,
+    tag,
     expanded,
+    submenu,
 }) => {
     const iconSwitch = !!icon && !!iconActive && !IconComponent;
-    const hasSubmenu = submenuExpanded === true || submenuExpanded === false;
+    const hasSubmenu = !!submenu;
 
     return (
         <NavigationComponent
@@ -141,7 +144,6 @@ const SideNavigationItem: FC<SideNavigationItemProps> = ({
             data-pendo={`navigation-item-${id}`}
             key={id}
             to={to}
-            title={hint}
             className={classNames(Styles.navigationItem, className, {
                 [Styles.navigationItemActive]: isActive === true,
                 [Styles.navigationItemIconSwitch]: iconSwitch,
@@ -179,19 +181,17 @@ const SideNavigationItem: FC<SideNavigationItemProps> = ({
                     </Fragment>
                 )}
 
-                {!!expanded && <div className={Styles.navigationItemText}>{title}</div>}
-                {!!counter && (
-                    <CounterTag data={counter} className={Styles.navigationItemCounter} />
-                )}
-                {hasSubmenu && !!expanded && (
+                {!!expanded?.bar && <div className={Styles.navigationItemText}>{title}</div>}
+                {!!tag && <CounterTag data={tag} className={Styles.navigationItemCounter} />}
+                {hasSubmenu && !!expanded?.bar && (
                     <Icon
-                        svg={submenuExpanded ? SvgGroupCollapse : SvgGroupExpand}
+                        svg={expanded?.submenus?.includes(id) ? SvgGroupCollapse : SvgGroupExpand}
                         className={Styles.navigationItemGroupToggle}
                     />
                 )}
             </div>
 
-            {!expanded && (
+            {!expanded?.bar && (
                 <div
                     className={classNames(Styles.navigationItemText, {
                         [Styles.navigationItemTextSmall]: title.length >= 10,
@@ -205,28 +205,44 @@ const SideNavigationItem: FC<SideNavigationItemProps> = ({
 };
 
 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> = ({ ...props }) => {
-    const [submenuExpanded, setSubmenuExpanded] = useState(false);
+const SideNavigationGroupItem: FC<
+    SideNavigationItemProps & {
+        onExpandedChange: undefined | ((expanded: SideNavigationExpandedState) => void);
+    }
+> = ({ onExpandedChange, ...props }) => {
     const triggerClick = useCallback(
         (e: MouseEvent<HTMLDivElement>) => {
             e.stopPropagation();
             e.preventDefault();
 
-            if (props.expanded) {
-                setSubmenuExpanded(exp => !exp);
-            }
+            const isSubmenuExpanded = props.expanded?.submenus?.includes(props.id);
+            onExpandedChange?.({
+                bar: !!props.expanded?.bar,
+                submenus: [
+                    ...(props.expanded?.submenus?.filter(id => id !== props.id) ?? []),
+                    ...(isSubmenuExpanded ? [] : [props.id]),
+                ],
+            });
         },
-        [props.expanded]
+        [props.id, props.expanded, onExpandedChange]
     );
 
-    return props.expanded ? (
+    const tag = props.submenu?.groups.some(group => group.links.some(link => !!link.tag))
+        ? true
+        : props.tag;
+
+    return props.expanded?.bar ? (
         <Fragment>
             <div onClickCapture={triggerClick}>
-                <SideNavigationItem {...props} submenuExpanded={submenuExpanded} />
+                <SideNavigationItem {...props} tag={tag} />
             </div>
-            <Collapsible open={submenuExpanded} animate>
+            <Collapsible open={props.expanded?.submenus?.includes(props.id)} animate>
                 <div className={Styles.submenu}>
                     <SideNavigationGroupContent
                         groups={props.submenu?.groups ?? []}
@@ -239,8 +255,12 @@ const SideNavigationGroupItem: FC<SideNavigationItemProps> = ({ ...props }) => {
         <Popover placement="right-start" openOnHover>
             <Popover.Trigger>
                 {(triggerProps: PopoverTriggerProps) => (
-                    <div {...triggerProps} onClickCapture={triggerClick}>
-                        <SideNavigationItem {...props} />
+                    <div {...triggerProps}>
+                        <SideNavigationItem
+                            {...props}
+                            to={getFirstSubmenuLinkTo(props.submenu, props.to)}
+                            tag={tag}
+                        />
                     </div>
                 )}
             </Popover.Trigger>
@@ -264,17 +284,14 @@ const SideNavigationGroupContent: FC<HeaderNavigationItemSubmenu & NavigationCom
 }) => {
     return (
         <Fragment>
-            {groups.reduce((out, group) => {
+            {groups.reduce((out, group, index) => {
                 if (!group.links.length) {
                     return out;
                 }
 
+                const key = `:group:${index}:title`;
                 out.push(
-                    <Text
-                        key=":group:title"
-                        variant="eyebrow"
-                        className={Styles.submenuGroupHeader}
-                    >
+                    <Text key={key} variant="eyebrow" className={Styles.submenuGroupHeader}>
                         {group.title}
                     </Text>
                 );
@@ -293,8 +310,9 @@ const SideNavigationGroupContent: FC<HeaderNavigationItemSubmenu & NavigationCom
         </Fragment>
     );
 };
-const SideNavigationGroupLink: FC<HeaderNavigationItemLinkProps & NavigationComponentProps> = ({
+const SideNavigationGroupLink: FC<HeaderNavigationItemSubmenuLink & NavigationComponentProps> = ({
     id,
+    tag,
     title,
     to,
     isActive,
@@ -312,22 +330,25 @@ const SideNavigationGroupLink: FC<HeaderNavigationItemLinkProps & NavigationComp
             isActive={typeof isActive === 'function' ? isActive : undefined}
             activeClassName={Styles.submenuLinkActive}
         >
-            {title}
+            <span>{title}</span>
+            {!!tag && <CounterTag data={tag} className={Styles.submenuLinkCounter} />}
         </NavigationComponent>
     );
 };
 
 /** Side Navigation options toggle */
 export const SideNavigationOptionsToggle: FC<{
-    expanded?: boolean;
-    onExpandedChange(expanded: boolean): void;
+    expanded?: SideNavigationExpandedState;
+    onExpandedChange?(expanded: SideNavigationExpandedState): void;
 }> = ({ expanded, onExpandedChange }) =>
     withTooltip(
         <div
             data-cy="navigation-left-options"
             data-pendo="navigation-left-options"
             className={classNames(Styles.optionsItem)}
-            onClick={() => onExpandedChange(!expanded)}
+            onClick={() =>
+                onExpandedChange?.({ bar: !expanded?.bar, submenus: expanded?.submenus })
+            }
         >
             <div className={Styles.optionsIconWrapper}>
                 <Icon className={Styles.optionsIcon} svg={expanded ? SvgCollapse : SvgExpand} />

package/src/components/profile-dropdown/profile-dropdown.tsx

@@ -192,7 +192,7 @@ export interface ProfileDropdownLinkPropsStrict {
     external?: boolean;
     target?: HTMLAttributeAnchorTarget;
     to?: string;
-    counter?: CounterTagPropsType;
+    tag?: CounterTagPropsType;
     onClick?: () => void;
 }
 
@@ -203,9 +203,9 @@ export interface ProfileDropdownLinkProps extends ProfileDropdownLinkPropsStrict
 export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
     children,
     className,
-    counter,
     external,
     id,
+    tag,
     target,
     to,
     onClick,
@@ -220,10 +220,7 @@ export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
 
     const isExternalLink = external ?? to?.startsWith('http');
 
-    const counterElement = useMemo(
-        () => <CounterTag data={counter} className={Styles.counter} />,
-        [counter]
-    );
+    const tagElement = useMemo(() => <CounterTag data={tag} className={Styles.counter} />, [tag]);
 
     return isExternalLink ? (
         <a
@@ -235,7 +232,7 @@ export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
             {...rest}
         >
             {children}
-            {counterElement}
+            {tagElement}
         </a>
     ) : to ? (
         <NavigationComponent
@@ -247,7 +244,7 @@ export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
             {...rest}
         >
             {children}
-            {counterElement}
+            {tagElement}
         </NavigationComponent>
     ) : (
         <a
@@ -258,7 +255,7 @@ export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
             {...rest}
         >
             {children}
-            {counterElement}
+            {tagElement}
         </a>
     );
 };

package/src/test/data.tsx

@@ -40,8 +40,8 @@ import { MemoryRouter, useHistory, useLocation } from 'react-router-dom';
 import { HeaderNavigationTrigger } from '../components/links';
 import {
     HeaderNavigationItemData,
-    HeaderNavigationItemLinkProps,
     HeaderNavigationItemSubmenuGroup,
+    HeaderNavigationItemSubmenuLink,
     NavLinkComponentProps,
 } from '../utils/navigation';
 import { NavigationComponentContext } from '../utils/navigation-context';
@@ -145,8 +145,8 @@ const getItem = (
 
 const getSubItem = (
     id: string,
-    data: Partial<HeaderNavigationItemLinkProps>
-): HeaderNavigationItemLinkProps => ({
+    data: Partial<HeaderNavigationItemSubmenuLink>
+): HeaderNavigationItemSubmenuLink => ({
     id,
     to: id,
     title: id[0].toUpperCase() + id.substring(1),
@@ -155,7 +155,7 @@ const getSubItem = (
 
 const getGroup = (
     title: string,
-    links: HeaderNavigationItemLinkProps[]
+    links: HeaderNavigationItemSubmenuLink[]
 ): HeaderNavigationItemSubmenuGroup => ({
     title,
     links,
@@ -176,7 +176,7 @@ export const items = {
         iconName: 'local_phone',
         icon: SvgCalls,
         iconActive: SvgCallsActive,
-        counter: 12,
+        tag: 12,
     }),
     dashboard: getItem('dashboard', {
         iconName: 'odometer',
@@ -187,7 +187,7 @@ export const items = {
         iconName: 'location_disabled',
         icon: SvgDispatch,
         iconActive: SvgDispatchActive,
-        counter: 1,
+        tag: 1,
     }),
     fleet: getItem('fleet', {
         iconName: 'fleet-pro',
@@ -241,6 +241,7 @@ export const items = {
         iconName: 'assignment',
         icon: SvgAccounting,
         iconActive: SvgAccountingActive,
+        tag: true,
     }),
     accountingWithSubmenu: getItem('accounting', {
         iconName: 'assignment',
@@ -250,9 +251,9 @@ export const items = {
             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('export', { title: 'Batch/Export Transactions', tag: true }),
+                    getSubItem('invoices', { title: 'Invoices', tag: 3 }),
+                    getSubItem('payments', { title: 'Customer Payments', tag: 2 }),
                     getSubItem('deposits', { title: 'Bank Deposits' }),
                 ]),
                 getGroup('Accounts Payable', [getSubItem('bills', { title: 'Bills' })]),
@@ -306,7 +307,7 @@ export const CallsNavigationTrigger = () => {
                 <HeaderNavigationTrigger
                     id="dialpad"
                     iconName="phone"
-                    counter={2}
+                    tag={2}
                     icon={SvgPhone}
                     iconActive={SvgPhoneActive}
                     onClick={() => setOpen(!open)}

package/src/utils/navigation.ts

@@ -25,8 +25,8 @@ export interface HeaderNavigationItemData extends HeaderNavigationItemLinkProps
     /** icon component of item (<svg />) */
     iconComponent?: FC;
 
-    /** item counter (optional). shown if it is set and greater than 0 */
-    counter?: CounterTagPropsType;
+    /** item tag (optional). shown if it is set and true or greater than 0 */
+    tag?: CounterTagPropsType;
 
     /** class name of link item */
     className?: string;
@@ -54,12 +54,17 @@ export interface HeaderNavigationItemSubmenu {
     groups: HeaderNavigationItemSubmenuGroup[];
 }
 
+export interface HeaderNavigationItemSubmenuLink extends HeaderNavigationItemLinkProps {
+    /** item tag (optional). shown if it is set and true or greater than 0 */
+    tag?: CounterTagPropsType;
+}
+
 export interface HeaderNavigationItemSubmenuGroup {
     /** submenu group title */
     title: string;
 
     /** submenu group links */
-    links: HeaderNavigationItemLinkProps[];
+    links: HeaderNavigationItemSubmenuLink[];
 }
 
 export interface NavLinkComponentPropsStrict {
@@ -91,8 +96,8 @@ export interface HeaderNavigationTriggerPropsStrict {
     labelClassName?: string;
     /** isActive */
     isActive?: boolean;
-    /** counter shown for item */
-    counter?: CounterTagPropsType;
+    /** counter tag shown for item */
+    tag?: CounterTagPropsType;
     /** counter component class name */
     counterClassName?: string;
     /** icon component class name */