@servicetitan/navigation 3.2.0 → 4.0.0

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

@@ -1,157 +1,134 @@
 import { Button } from '@servicetitan/design-system';
-import { FC } from 'react';
-import { NavLinkComponentProps } from '../../utils/navigation';
+import { NavLinkMock, withAnvil, withMemoryRouter } from '../../test/data.stories';
 import { HeaderNavigation } from '../header-navigation';
 import { ProfileDropdown } from './profile-dropdown';
 
+const withHeaderNavigation = (Story: any) => (
+    <HeaderNavigation navigationComponent={NavLinkMock}>
+        <Story />
+    </HeaderNavigation>
+);
+
 export default {
     title: 'Navigation/ProfileDropdown',
     component: ProfileDropdown,
     parameters: {},
+    decorators: [withMemoryRouter, withAnvil, withHeaderNavigation],
 };
 
-const NavLinkMock: FC<NavLinkComponentProps> = props => (
-    <a
-        href={props.to}
-        target={props.target}
-        onClick={e => {
-            e.preventDefault();
-        }}
-        className={props.className}
-    >
-        {props.children}
-    </a>
-);
-
-export const profileDropdownDefault = () => (
-    <HeaderNavigation navigationComponent={NavLinkMock}>
-        <ProfileDropdown>
-            <ProfileDropdown.Link id="first" to="https://google.com">
-                first link
-            </ProfileDropdown.Link>
-            <ProfileDropdown.Link id="second" onClick={() => alert('second click')}>
-                second link
-            </ProfileDropdown.Link>
-            <ProfileDropdown.Divider />
-            <ProfileDropdown.Section id="content">some content</ProfileDropdown.Section>
-            <ProfileDropdown.Divider />
-            <ProfileDropdown.Divider />
-            <ProfileDropdown.Divider />
-            <ProfileDropdown.Link id="third" to="https://google.com">
-                third link
-            </ProfileDropdown.Link>
-            <ProfileDropdown.Divider />
-        </ProfileDropdown>
-    </HeaderNavigation>
+export const ProfileDropdownDefault = () => (
+    <ProfileDropdown>
+        <ProfileDropdown.Link id="first" to="https://google.com">
+            first link
+        </ProfileDropdown.Link>
+        <ProfileDropdown.Link id="second" onClick={() => alert('second click')}>
+            second link
+        </ProfileDropdown.Link>
+        <ProfileDropdown.Divider />
+        <ProfileDropdown.Section id="content">some content</ProfileDropdown.Section>
+        <ProfileDropdown.Divider />
+        <ProfileDropdown.Divider />
+        <ProfileDropdown.Divider />
+        <ProfileDropdown.Link id="third" to="third">
+            third link
+        </ProfileDropdown.Link>
+        <ProfileDropdown.Divider />
+    </ProfileDropdown>
 );
 
-export const profileDropdownWithLogo = () => (
-    <HeaderNavigation navigationComponent={NavLinkMock}>
-        <ProfileDropdown
-            trigger={{
-                imageSrc: 'https://upload.wikimedia.org/wikipedia/en/1/11/Milhouse_Van_Houten.png',
-            }}
-        >
-            <ProfileDropdown.Link id="first" to="https://google.com">
-                first link
-            </ProfileDropdown.Link>
-            <ProfileDropdown.Link id="second" onClick={() => alert('second click')}>
-                second link
-            </ProfileDropdown.Link>
-        </ProfileDropdown>
-    </HeaderNavigation>
+export const ProfileDropdownWithLogo = () => (
+    <ProfileDropdown
+        trigger={{
+            imageSrc: 'https://upload.wikimedia.org/wikipedia/en/1/11/Milhouse_Van_Houten.png',
+        }}
+    >
+        <ProfileDropdown.Link id="first" to="https://google.com">
+            first link
+        </ProfileDropdown.Link>
+        <ProfileDropdown.Link id="second" onClick={() => alert('second click')}>
+            second link
+        </ProfileDropdown.Link>
+    </ProfileDropdown>
 );
 
-export const profileDropdownWithErrorLogo = () => (
-    <HeaderNavigation>
-        <ProfileDropdown
-            trigger={{
-                imageSrc: 'https://some.incorrect.url/logo.png',
-            }}
-        />
-    </HeaderNavigation>
+export const ProfileDropdownWithErrorLogo = () => (
+    <ProfileDropdown
+        trigger={{
+            imageSrc: 'https://some.incorrect.url/logo.png',
+        }}
+    />
 );
 
-export const profileDropdownWithInfo = () => (
-    <HeaderNavigation>
-        <ProfileDropdown
-            trigger={{
-                info: { text: 'first', title: 'tenant user' },
-                avatarBadge: true,
-            }}
-        />
-    </HeaderNavigation>
+export const ProfileDropdownWithInfo = () => (
+    <ProfileDropdown
+        trigger={{
+            info: { text: 'first', title: 'tenant user' },
+            avatarBadge: true,
+        }}
+    />
 );
 
-export const profileDropdownWithCounter = () => (
-    <HeaderNavigation>
-        <ProfileDropdown
-            trigger={{
-                info: { text: 'first', title: 'tenant user' },
-                avatarBadge: true,
-                badge: { content: 3, className: 'bg-red-500' },
-            }}
-        />
-    </HeaderNavigation>
+export const ProfileDropdownWithCounter = () => (
+    <ProfileDropdown
+        trigger={{
+            info: { text: 'first', title: 'tenant user' },
+            avatarBadge: true,
+            badge: { content: 3, className: 'bg-red-500' },
+        }}
+    />
 );
 
-export const profileDropdownWithBothBadges = () => (
-    <HeaderNavigation>
-        <ProfileDropdown
-            trigger={{
-                avatarBadge: 'yellow-500',
-                badge: { className: 'bg-red-400' },
-            }}
-        />
-    </HeaderNavigation>
+export const ProfileDropdownWithBothBadges = () => (
+    <ProfileDropdown
+        trigger={{
+            avatarBadge: 'yellow-500',
+            badge: { className: 'bg-red-400' },
+        }}
+    />
 );
 
 // eslint-disable-next-line no-console
 const log = (text: string) => console.log(text);
 
-export const profileDropdownWithHintPopup = () => (
-    <HeaderNavigation navigationComponent={NavLinkMock}>
-        <ProfileDropdown
-            trigger={{
-                avatarBadge: 'yellow-500',
-                badge: { className: 'bg-red-400' },
-            }}
-            hintPopup={{
-                className: 'bg-blue-500-i c-white',
-                content: ({ openProfile }) => (
-                    <div>
-                        hello{' '}
-                        <Button onClick={openProfile} size="xsmall">
-                            show me
-                        </Button>
-                    </div>
-                ),
-                width: 's',
-                onClose: () => log('close profile dropdown hint'),
-            }}
-            onOpen={() => log('open profile dropdown')}
-            onClose={() => log('close profile dropdown')}
-        >
-            <ProfileDropdown.Link id="first" to="https://google.com">
-                first item
-            </ProfileDropdown.Link>
-            <ProfileDropdown.Divider />
-            <ProfileDropdown.Section id="second">second item</ProfileDropdown.Section>
-        </ProfileDropdown>
-    </HeaderNavigation>
+export const ProfileDropdownWithHintPopup = () => (
+    <ProfileDropdown
+        trigger={{
+            avatarBadge: 'yellow-500',
+            badge: { className: 'bg-red-400' },
+        }}
+        hintPopup={{
+            className: 'bg-blue-500-i c-white',
+            content: ({ openProfile }) => (
+                <div>
+                    hello{' '}
+                    <Button onClick={openProfile} size="xsmall">
+                        show me
+                    </Button>
+                </div>
+            ),
+            width: 's',
+            onClose: () => log('close profile dropdown hint'),
+        }}
+        onOpen={() => log('open profile dropdown')}
+        onClose={() => log('close profile dropdown')}
+    >
+        <ProfileDropdown.Link id="first" to="https://google.com">
+            first item
+        </ProfileDropdown.Link>
+        <ProfileDropdown.Divider />
+        <ProfileDropdown.Section id="second">second item</ProfileDropdown.Section>
+    </ProfileDropdown>
 );
 
-export const profileDropdownWithHintAndInfoPopup = () => (
-    <HeaderNavigation navigationComponent={NavLinkMock}>
-        <ProfileDropdown
-            trigger={{
-                avatarBadge: 'yellow-500',
-                badge: { className: 'bg-red-400' },
-                info: { title: 'some text', text: 'qq' },
-            }}
-            hintPopup={{
-                content: () => <div>hello</div>,
-            }}
-        />
-    </HeaderNavigation>
+export const ProfileDropdownWithHintAndInfoPopup = () => (
+    <ProfileDropdown
+        trigger={{
+            avatarBadge: 'yellow-500',
+            badge: { className: 'bg-red-400' },
+            info: { title: 'some text', text: 'qq' },
+        }}
+        hintPopup={{
+            content: () => <div>hello</div>,
+        }}
+    />
 );

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

@@ -1,4 +1,9 @@
-import { BodyText, Icon, Popover, PopoverPropsStrict } from '@servicetitan/design-system';
+import { Icon } from '@servicetitan/anvil2';
+import SvgExpandLess from '@servicetitan/anvil2/assets/icons/material/round/expand_less.svg';
+import SvgExpandMore from '@servicetitan/anvil2/assets/icons/material/round/expand_more.svg';
+import SvgAccountActive from '@servicetitan/anvil2/assets/icons/st/gnav_account_active.svg';
+import SvgAccountInactive from '@servicetitan/anvil2/assets/icons/st/gnav_account_inactive.svg';
+import { BodyText, Popover, PopoverPropsStrict } from '@servicetitan/design-system';
 import classNames from 'classnames';
 import {
     FC,
@@ -7,12 +12,13 @@ import {
     MouseEventHandler,
     ReactNode,
     useCallback,
+    useContext,
     useEffect,
     useMemo,
     useState,
 } from 'react';
 
-import { useNavLink } from '../../utils/navigation-context';
+import { NavigationContext } from '../../utils/navigation-context';
 import { CounterTag, CounterTagPropsType } from '../counter-tag';
 import * as Styles from './profile-dropdown.module.less';
 import { ProfileLogo } from './profile-icon';
@@ -24,6 +30,7 @@ export interface ProfileDropdownTriggerProps {
     avatarBadge?: boolean | string;
     badge?: { content?: number | string; className: string };
     hintArrow?: boolean;
+    open: boolean;
     onClick?(e: MouseEvent): void;
 }
 
@@ -35,9 +42,11 @@ const ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps> = ({
     imageSrc,
     info,
     onClick,
+    open,
 }) => {
     const [avatarSource, setAvatarSource] = useState(imageSrc ?? '');
     const [avatarSourceError, setAvatarSourceError] = useState(false);
+    const { isLegacy } = useContext(NavigationContext);
 
     useEffect(() => {
         const src = imageSrc ?? '';
@@ -60,7 +69,10 @@ const ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps> = ({
                 'd-f align-items-center cursor-pointer position-relative p-x-1 p-y-half',
                 'profile-dropdown-trigger',
                 Styles.triggerContainer,
-                { [Styles.triggerContainerHintArrow]: hintArrow },
+                {
+                    [Styles.triggerContainerHintArrow]: hintArrow,
+                    [Styles.triggerContainerLegacy]: isLegacy,
+                },
                 className
             )}
             onClick={onClick}
@@ -74,13 +86,20 @@ const ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps> = ({
                     onError={onAvatarError}
                     alt="user dropdown menu"
                 />
-            ) : (
+            ) : isLegacy ? (
                 <ProfileLogo />
+            ) : (
+                <Icon size="large" svg={open ? SvgAccountActive : SvgAccountInactive} />
             )}
 
             {!!info && (
                 <div className={Styles.info}>
-                    <BodyText bold title={info.title} className="t-truncate c-white" size="xsmall">
+                    <BodyText
+                        bold
+                        title={info.title}
+                        className="t-truncate c-inherit"
+                        size="xsmall"
+                    >
                         {info.title}
                     </BodyText>
                     <BodyText
@@ -93,7 +112,11 @@ const ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps> = ({
                 </div>
             )}
 
-            <Icon className="m-l-half d-f align-items-center" name="expand_more" size={12} />
+            <Icon
+                svg={open ? SvgExpandLess : SvgExpandMore}
+                className={classNames('d-f align-items-center c-inherit', { 'm-l-half': isLegacy })}
+                size="small"
+            />
 
             {!!avatarBadge && (
                 <div
@@ -185,7 +208,7 @@ export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
     onClick,
     ...rest
 }: ProfileDropdownLinkProps) => {
-    const NavigationComponent = useNavLink();
+    const { NavigationComponent } = useContext(NavigationContext);
 
     const clickHandler = (e: MouseEvent<any>) => {
         e.preventDefault();
@@ -241,7 +264,7 @@ export interface ProfileDropdownPropsStrict {
     children?: ReactNode;
     className?: string;
     direction?: PopoverPropsStrict['direction'];
-    trigger?: Omit<ProfileDropdownTriggerProps, 'onClick' | 'hintArrow'>;
+    trigger?: Omit<ProfileDropdownTriggerProps, 'onClick' | 'open' | 'hintArrow'>;
     hintPopup?: {
         className?: string;
         content: FC<{ openProfile(): void }>;
@@ -305,6 +328,7 @@ export const ProfileDropdown: ProfileDropdownType = (({
             {...trigger}
             onClick={children ? onTriggerClick : undefined}
             hintArrow={hintShown}
+            open={open}
         />
     );
 

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

@@ -84,6 +84,16 @@
         color: @text-color-active;
     }
 
+    &.navigation-item-icon-state.navigation-item-active {
+        .navigation-icon:not(.navigation-icon-active) {
+            display: none;
+        }
+
+        .navigation-icon.navigation-icon-active {
+            display: block;
+        }
+    }
+
     &:hover:not(.navigation-item-active) {
         background-color: @bg-color-hover;
     }
@@ -104,7 +114,16 @@
 .navigation-icon {
     height: 24px;
     width: 24px;
-    font-size: 24px;
+    color: inherit;
+
+    & > svg {
+        height: 24px;
+        width: 24px;
+    }
+
+    &.navigation-icon-active {
+        display: none;
+    }
 }
 
 .options-item {
@@ -130,9 +149,14 @@
     .options-icon {
         height: 24px;
         width: 24px;
-        font-size: 24px;
         padding-left: @spacing-1;
         padding-right: @spacing-1;
+
+        & > span > svg {
+            height: 24px;
+            width: 24px;
+            color: @text-color;
+        }
     }
 
     .options-item-text {
@@ -143,24 +167,6 @@
     }
 }
 
-.options-popover-item-clickable {
-    cursor: pointer;
-
-    &:hover {
-        background-color: @color-neutral-60;
-    }
-}
-
-.options-popover-item-active {
-    background-color: @color-blue-100;
-    color: @color-blue-500;
-}
-
-.options-popover-item-inactive,
-.options-popover-item-active {
-    border-radius: @border-radius-1;
-}
-
 .divider {
     border-top: 1px solid @border-color;
     margin-left: 12px;

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

@@ -1,16 +1,15 @@
 export const __esModule: true;
 export const divider: string;
 export const navigationIcon: string;
+export const navigationIconActive: string;
 export const navigationItem: string;
 export const navigationItemActive: string;
 export const navigationItemCounter: string;
+export const navigationItemIconState: string;
 export const navigationItemText: string;
 export const optionsIcon: string;
 export const optionsItem: string;
 export const optionsItemText: string;
-export const optionsPopoverItemActive: string;
-export const optionsPopoverItemClickable: string;
-export const optionsPopoverItemInactive: string;
 export const sideNav: string;
 export const sideNavBottom: string;
 export const sideNavContent: string;

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

@@ -1,5 +1,5 @@
-import { ComponentType, FC, useState } from 'react';
-import { HeaderNavigationItemData, NavLinkComponentProps } from '../../utils/navigation';
+import { ComponentType, useState } from 'react';
+import { NavLinkMock, items, withAnvil, withMemoryRouter } from '../../test/data.stories';
 import { SideNavigation } from './';
 
 const layout = (Story: ComponentType) => {
@@ -13,59 +13,10 @@ const layout = (Story: ComponentType) => {
 export default {
     title: 'Navigation/SideNavigation',
     component: SideNavigation,
-    decorators: [layout],
+    decorators: [layout, withMemoryRouter, withAnvil],
     parameters: {},
 };
 
-const getItem = (
-    id: string,
-    data: Partial<HeaderNavigationItemData>
-): HeaderNavigationItemData => ({
-    id,
-    to: '/',
-    title: id[0].toUpperCase() + id.substring(1),
-    hint: id,
-    ...(data ?? {}),
-});
-
-const InventoryIcon = () => (
-    <svg width="20" xmlns="http://www.w3.org/2000/svg" viewBox="-293 385 24 24" fill="currentColor">
-        <polyline points="-288,400.9 -282,404.3 -282,397.6 -288,394.2 -288,400.9 " />
-        <path d="M-272,401.5c0,0.4-0.2,0.7-0.5,0.9l-7.9,4.4c-0.2,0.1-0.4,0.2-0.6,0.2s-0.4-0.1-0.6-0.2l-7.9-4.4c-0.3-0.2-0.5-0.5-0.5-0.9v-9c0-0.4,0.2-0.7,0.5-0.9l7.9-4.4c0.2-0.1,0.4-0.2,0.6-0.2s0.4,0.1,0.6,0.2l7.9,4.4c0.3,0.2,0.5,0.5,0.5,0.9V401.5 M-287,392.5 l6,3.4l5.9-3.3l-5.9-3.4L-287,392.5 M-274,400.9v-6.7l-6,3.4v6.7L-274,400.9z" />
-    </svg>
-);
-
-const items = {
-    calendar: getItem('calendar', { iconName: 'event' }),
-    calls: getItem('calls', { iconName: 'local_phone', isActive: true, counter: 12 }),
-    dashboard: getItem('dashboard', { iconName: 'odometer' }),
-    dispatch: getItem('dispatch', { iconName: 'location_disabled', counter: 1 }),
-    fleet: getItem('fleet', { iconName: 'fleet-pro', title: 'Fleet Pro' }),
-    followUps: getItem('followUps', { iconName: 'flag', title: 'Follow Ups' }),
-    inventory: getItem('inventory', { iconName: 'toys' }),
-    purchasing: getItem('purchasing', { iconComponent: InventoryIcon }),
-    accounting: getItem('accounting', { iconName: 'assignment' }),
-    marketing: getItem('marketing', { iconName: 'bullhorn' }),
-    priceBook: getItem('priceBook', { iconName: 'book' }),
-    pointOfSale: getItem('pointOfSale', { iconName: 'cash-register' }),
-    projects: getItem('projects', { iconName: 'folder_special' }),
-    reports: getItem('reports', { iconName: 'poll' }),
-    tasks: getItem('tasks', { iconName: 'format_list_bulleted' }),
-};
-
-const NavLinkMock: FC<NavLinkComponentProps> = props => (
-    <a
-        href={props.to}
-        target={props.target}
-        onClick={e => {
-            e.preventDefault();
-        }}
-        className={props.className}
-    >
-        {props.children}
-    </a>
-);
-
 export const DefaultSideNavigation = () => {
     const [expanded, setExpanded] = useState(false);
     return (