@servicetitan/navigation 8.2.0 → 9.0.0

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

@@ -12,14 +12,16 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
     to,
     hint,
     tooltip,
-    counter,
     className,
+    icon,
+    iconActive,
     iconClassName,
     iconComponent,
     iconName,
     isActive,
     label,
     labelClassName,
+    tag,
     target,
     ...rest
 }) => {
@@ -41,7 +43,7 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
             target={target}
         >
             <HeaderNavigationItemContent
-                counter={counter}
+                tag={tag}
                 iconComponent={iconComponent}
                 iconClassName={iconClassName}
                 iconName={iconName}
@@ -57,7 +59,6 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
 export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
     id,
     className,
-    counter,
     iconClassName,
     iconComponent,
     iconName,
@@ -65,6 +66,7 @@ export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
     label,
     labelClassName,
     hint,
+    tag,
     tooltip,
     ...rest
 }) => {
@@ -85,7 +87,7 @@ export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
             )}
         >
             <HeaderNavigationItemContent
-                counter={counter}
+                tag={tag}
                 iconComponent={iconComponent}
                 iconClassName={iconClassName}
                 iconName={iconName}

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

@@ -96,7 +96,7 @@ export const WithAllMonolithData = () => (
                 <HeaderNavigationTrigger
                     id="dialpad"
                     iconName="phone"
-                    counter={2}
+                    tag={2}
                     icon={SvgIcon}
                     iconActive={SvgIcon}
                 />
@@ -122,7 +122,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 />

package/src/components/header-navigation/header-navigation.module.less

@@ -219,7 +219,8 @@
     .navigation-item-counter {
         color: @color-white;
         font-weight: @font-weight-semibold;
-        min-width: 12px;
+        min-width: 12px !important;
+        min-height: 12px !important;
     }
 
     &:not(.navigation-item-overflow) .navigation-item-counter {

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

@@ -108,7 +108,7 @@ export const WithAllMonolithData = () => (
         <HeaderNavigationTrigger
             id="dialpad"
             iconName="phone"
-            counter={2}
+            tag={2}
             icon={SvgIcon}
             iconActive={SvgIcon}
         />
@@ -145,7 +145,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 />

package/src/components/layout.stories.tsx

@@ -1,3 +1,4 @@
+import { Page, Sidebar } from '@servicetitan/design-system';
 import { LocationInfo, withAnvil, withMemoryRouter } from '../test/data';
 import {
     WithAllMonolithData,
@@ -57,8 +58,10 @@ export const LeftNavLayoutSubmenu = () => {
             <WithAllMonolithDataCommercial />
             <div className="flex-grow-1 flex-basis-0 d-f">
                 <SideNavigationWithSubmenu />
-                <div className="flex-grow-1 flex-basis-0 p-5">
-                    <LocationInfo />
+                <div className="flex-grow-1 flex-basis-0">
+                    <Page sidebar={<Sidebar localStorageKey="undefined">sidebar</Sidebar>}>
+                        <LocationInfo />
+                    </Page>
                 </div>
             </div>
         </div>

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 />
@@ -107,7 +107,7 @@ export const WithAllMonolithData = () => (
 
 export const WithAllMonolithDataCommercial = () => (
     <HeaderNavigationTiny
-        className="border-bottom"
+        className="border-bottom z-global-nav"
         left={
             <Flex alignItems="center">
                 <LogoTitan mantleFill="#2270EE" className="p-x-half" size={48} />
@@ -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

@@ -4,7 +4,7 @@
 @text-color: var(--colorsTextInverted, @color-white);
 @text-color-active: var(--colorsTextPrimarySubdued, @color-blue-300);
 @border-color: var(--colorsTextOnGrey, @color-neutral-200);
-@bg-color: var(--colorsSurfaceInvertedStrong, @color-neutral-400);
+@bg-color: #0f1d26;
 @bg-color-hover: rgba(255, 255, 255, 0.08);
 @bg-color-active: rgba(120, 187, 250, 0.2);
 
@@ -51,6 +51,10 @@
                 margin: 2px @spacing-half @spacing-0;
                 text-align: center;
             }
+
+            .navigation-item-text.navigation-item-text-small {
+                font-size: 10.5px;
+            }
         }
 
         .options-item {
@@ -69,7 +73,6 @@
 
         .navigation-item {
             flex-direction: row;
-            margin-bottom: @spacing-half;
             margin-left: @spacing-1;
             margin-right: @spacing-1;
 
@@ -81,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 {
@@ -185,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] {
@@ -211,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;
@@ -301,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

@@ -10,6 +10,7 @@ export const navigationItemGroupToggle: string;
 export const navigationItemIconSwitch: string;
 export const navigationItemIconWrapper: string;
 export const navigationItemText: string;
+export const navigationItemTextSmall: string;
 export const optionsIcon: string;
 export const optionsIconWrapper: string;
 export const optionsItem: string;
@@ -24,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,13 +1,16 @@
+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 (
         <div className="d-f border" style={{ height: '800px' }}>
             <Story />
-            <div className="flex-grow-1 flex-basis-0 p-5">
-                <LocationInfo />
+            <div className="flex-grow-1 flex-basis-0">
+                <Page sidebar={<Sidebar localStorageKey="undefined">qq</Sidebar>}>
+                    <LocationInfo />
+                </Page>
             </div>
         </div>
     );
@@ -20,7 +23,7 @@ export default {
 };
 
 export const DefaultSideNavigation = () => {
-    const [expanded, setExpanded] = useState(false);
+    const [expanded, setExpanded] = useState<SideNavigationExpandedState | undefined>(undefined);
     return (
         <SideNavigation
             expanded={expanded}
@@ -47,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}
@@ -73,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}
@@ -87,7 +90,7 @@ export const SideNavigationWithSubmenu = () => {
                 items.accountingWithSubmenu,
                 items.purchasingWithSubmenu,
 
-                items.followUps,
+                items.followUpsWithSubmenu,
                 items.reports,
                 items.marketing,
                 items.priceBook,

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,46 +181,68 @@ 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 && <div className={Styles.navigationItemText}>{title}</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> = ({ ...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 ?? []}
@@ -231,12 +255,16 @@ 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>
-            <Popover.Content style={submenuPopoverStyles}>
+            <Popover.Content style={submenuPopoverStyles} className="z-global-nav-i">
                 <div className={Styles.submenuPopover}>
                     <Headline size="small" className="c-white m-b-half-i m-t-1">
                         {props.title}
@@ -256,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>
                 );
@@ -285,8 +310,9 @@ const SideNavigationGroupContent: FC<HeaderNavigationItemSubmenu & NavigationCom
         </Fragment>
     );
 };
-const SideNavigationGroupLink: FC<HeaderNavigationItemLinkProps & NavigationComponentProps> = ({
+const SideNavigationGroupLink: FC<HeaderNavigationItemSubmenuLink & NavigationComponentProps> = ({
     id,
+    tag,
     title,
     to,
     isActive,
@@ -304,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} />