@servicetitan/navigation 8.2.1 → 9.0.1

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

@@ -12,7 +12,6 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
     to,
     hint,
     tooltip,
-    counter,
     className,
     icon,
     iconActive,
@@ -22,6 +21,7 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
     isActive,
     label,
     labelClassName,
+    tag,
     target,
     ...rest
 }) => {
@@ -43,7 +43,7 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
             target={target}
         >
             <HeaderNavigationItemContent
-                counter={counter}
+                tag={tag}
                 iconComponent={iconComponent}
                 iconClassName={iconClassName}
                 iconName={iconName}
@@ -59,7 +59,6 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
 export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
     id,
     className,
-    counter,
     iconClassName,
     iconComponent,
     iconName,
@@ -67,6 +66,7 @@ export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
     label,
     labelClassName,
     hint,
+    tag,
     tooltip,
     ...rest
 }) => {
@@ -87,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,5 +1,5 @@
 import { Page, Sidebar } from '@servicetitan/design-system';
-import { LocationInfo, withAnvil, withMemoryRouter } from '../test/data';
+import { LocationInfo, withAnvil, withDefaultRedirects, withMemoryRouter } from '../test/data';
 import {
     WithAllMonolithData,
     WithAllMonolithDataCommercial,
@@ -13,7 +13,7 @@ import {
 export default {
     title: 'Navigation/Layout',
     parameters: {},
-    decorators: [withMemoryRouter, withAnvil],
+    decorators: [withDefaultRedirects, withMemoryRouter, withAnvil],
 };
 
 export const LeftNavLayout = () => {

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,14 +1,20 @@
-import { Page, Sidebar } from '@servicetitan/design-system';
+import { Page } from '@servicetitan/design-system';
 import { ComponentType, useState } from 'react';
-import { LocationInfo, items, withAnvil, withMemoryRouter } from '../../test/data';
-import { SideNavigation } from './';
+import {
+    LocationInfo,
+    items,
+    withAnvil,
+    withDefaultRedirects,
+    withMemoryRouter,
+} from '../../test/data';
+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">
-                <Page sidebar={<Sidebar localStorageKey="undefined">qq</Sidebar>}>
+                <Page>
                     <LocationInfo />
                 </Page>
             </div>
@@ -18,12 +24,12 @@ const layout = (Story: ComponentType) => {
 export default {
     title: 'Navigation/SideNavigation',
     component: SideNavigation,
-    decorators: [layout, withMemoryRouter, withAnvil],
+    decorators: [layout, withDefaultRedirects, withMemoryRouter, withAnvil],
     parameters: {},
 };
 
 export const DefaultSideNavigation = () => {
-    const [expanded, setExpanded] = useState(false);
+    const [expanded, setExpanded] = useState<SideNavigationExpandedState | undefined>(undefined);
     return (
         <SideNavigation
             expanded={expanded}
@@ -50,7 +56,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 +82,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,
@@ -207,26 +207,38 @@ 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 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 +251,8 @@ const SideNavigationGroupItem: FC<SideNavigationItemProps> = ({ ...props }) => {
         <Popover placement="right-start" openOnHover>
             <Popover.Trigger>
                 {(triggerProps: PopoverTriggerProps) => (
-                    <div {...triggerProps} onClickCapture={triggerClick}>
-                        <SideNavigationItem {...props} />
+                    <div {...triggerProps}>
+                        <SideNavigationItem {...props} tag={tag} />
                     </div>
                 )}
             </Popover.Trigger>
@@ -264,17 +276,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 +302,9 @@ const SideNavigationGroupContent: FC<HeaderNavigationItemSubmenu & NavigationCom
         </Fragment>
     );
 };
-const SideNavigationGroupLink: FC<HeaderNavigationItemLinkProps & NavigationComponentProps> = ({
+const SideNavigationGroupLink: FC<HeaderNavigationItemSubmenuLink & NavigationComponentProps> = ({
     id,
+    tag,
     title,
     to,
     isActive,
@@ -312,29 +322,32 @@ 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} />
             </div>
 
-            {!!expanded && <span className={Styles.optionsItemText}>Collapse Menu</span>}
+            {!!expanded?.bar && <span className={Styles.optionsItemText}>Collapse Menu</span>}
         </div>,
-        expanded ? undefined : 'Expand Menu',
+        expanded?.bar ? undefined : 'Expand Menu',
         'right'
     );

package/src/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>
     );
 };