@servicetitan/navigation 3.3.0 → 4.0.0

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

@@ -1,6 +1,6 @@
 import { Popover } from '@servicetitan/design-system';
 import { FC, useState } from 'react';
-import { HeaderNavigationItemData, NavLinkComponentProps } from '../../utils/navigation';
+import { NavLinkMock, SearchIcon, items, withMemoryRouter } from '../../test/data.stories';
 import { LogoCompanyTitle } from '../logo/logo-company-title';
 import { LogoTitanText } from '../logo/logo-titan-text';
 import { ProfileDropdown } from '../profile-dropdown/profile-dropdown';
@@ -11,72 +11,9 @@ export default {
     title: 'Navigation/HeaderNavigation',
     component: HeaderNavigation,
     parameters: {},
+    decorators: [withMemoryRouter],
 };
-
-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 SearchIcon = () => (
-    <svg
-        width="1em"
-        height="1em"
-        viewBox="0 0 24 24"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-    >
-        <g transform="translate(0,4)">
-            <path
-                d="M0 15.7992V13.9992H12V15.7992H0ZM0 9.49922V7.69922H6V9.49922H0ZM0 3.19922V1.39922H6V3.19922H0ZM22.74 15.7992L17.94 10.9992C17.42 11.3992 16.86 11.6992 16.26 11.8992C15.66 12.0992 15.04 12.1992 14.4 12.1992C12.74 12.1992 11.325 11.6142 10.155 10.4442C8.985 9.27422 8.4 7.85922 8.4 6.19922C8.4 4.53922 8.985 3.12422 10.155 1.95422C11.325 0.784219 12.74 0.199219 14.4 0.199219C16.06 0.199219 17.475 0.784219 18.645 1.95422C19.815 3.12422 20.4 4.53922 20.4 6.19922C20.4 6.83922 20.3 7.45922 20.1 8.05922C19.9 8.65922 19.6 9.21922 19.2 9.73922L24 14.5392L22.74 15.7992ZM14.393 10.3992C15.5577 10.3992 16.55 9.99157 17.37 9.17627C18.19 8.36099 18.6 7.37099 18.6 6.20627C18.6 5.04157 18.1923 4.04922 17.377 3.22922C16.5618 2.40922 15.5718 1.99922 14.407 1.99922C13.2423 1.99922 12.25 2.40687 11.43 3.22217C10.61 4.03745 10.2 5.02745 10.2 6.19217C10.2 7.35687 10.6077 8.34922 11.423 9.16922C12.2382 9.98922 13.2282 10.3992 14.393 10.3992Z"
-                fill="white"
-            />
-        </g>
-    </svg>
-);
-
-const items = {
-    calendar: getItem('calendar', { iconName: 'event' }),
-    calls: getItem('calls', { iconName: 'local_phone', isActive: true, counter: 12 }),
-    dashboard: getItem('dashboard', { iconName: 'odometer', isActive: true }),
-    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' }),
-};
-
-const NavLinkMock: FC<NavLinkComponentProps> = props => (
-    <a
-        href={props.to}
-        target={props.target}
-        onClick={e => {
-            e.preventDefault();
-        }}
-        className={props.className}
-    >
-        {props.children}
-    </a>
-);
+const SvgIcon = undefined as any;
 
 export const defaultNavigation = () => (
     <HeaderNavigation
@@ -130,6 +67,8 @@ const HelpCenterButton = () => {
                     id="help"
                     iconName="help_outline"
                     onClick={() => setOpen(true)}
+                    icon={SvgIcon}
+                    iconActive={SvgIcon}
                 />
             }
             portal
@@ -168,7 +107,13 @@ export const withAllMonolithData = () => (
     >
         <TimeZoneOffset />
 
-        <HeaderNavigationTrigger id="dialpad" iconName="phone" counter={2} />
+        <HeaderNavigationTrigger
+            id="dialpad"
+            iconName="phone"
+            counter={2}
+            icon={SvgIcon}
+            iconActive={SvgIcon}
+        />
 
         <HeaderNavigationLink
             id="search"
@@ -176,6 +121,8 @@ export const withAllMonolithData = () => (
             target="_blank"
             iconComponent={SearchIcon}
             hint="Search: for all the questions"
+            icon={SvgIcon}
+            iconActive={SvgIcon}
         />
 
         <HelpCenterButton />
@@ -183,6 +130,8 @@ export const withAllMonolithData = () => (
             id="titanAdvisor"
             iconName="rocket"
             iconClassName={Styles.rocketIcon}
+            icon={SvgIcon}
+            iconActive={SvgIcon}
         />
 
         <HeaderNavigationLink
@@ -193,6 +142,8 @@ export const withAllMonolithData = () => (
             aria-label="search"
             hint="Settings"
             isActive
+            icon={SvgIcon}
+            iconActive={SvgIcon}
         />
 
         <ProfileDropdown>

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

@@ -1,8 +1,21 @@
 import { Icon, Popover, PopoverPropsStrict } from '@servicetitan/design-system';
 import classNames from 'classnames';
-import { FC, ReactElement, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+import {
+    FC,
+    ReactElement,
+    ReactNode,
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
 import { HeaderNavigationItemData, NavLinkComponentProps } from '../../utils/navigation';
-import { DefaultNavLinkComponent, NavLinkContext } from '../../utils/navigation-context';
+import {
+    DefaultNavLinkComponent,
+    NavigationContext,
+    NavigationContextType,
+} from '../../utils/navigation-context';
 import { HeaderNavigationItem } from './header-navigation-content';
 import * as Styles from './header-navigation.module.less';
 
@@ -139,8 +152,16 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
         updateIsMinimized();
     });
 
+    const context: NavigationContextType = useMemo(
+        () => ({
+            NavigationComponent: navigationComponent,
+            isLegacy: true,
+        }),
+        [navigationComponent]
+    );
+
     return (
-        <NavLinkContext.Provider value={navigationComponent}>
+        <NavigationContext.Provider value={context}>
             <div
                 className={classNames(Styles.header, className, {
                     [Styles.calculating]: minimized === MinimizedState.Calculating,
@@ -186,7 +207,7 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
                     {children}
                 </div>
             </div>
-        </NavLinkContext.Provider>
+        </NavigationContext.Provider>
     );
 };
 
@@ -268,8 +289,16 @@ export const HeaderNavigationStacked: FC<HeaderNavigationStackedProps> = ({
         updateIsMinimized();
     });
 
+    const context: NavigationContextType = useMemo(
+        () => ({
+            NavigationComponent: navigationComponent,
+            isLegacy: true,
+        }),
+        [navigationComponent]
+    );
+
     return (
-        <NavLinkContext.Provider value={navigationComponent}>
+        <NavigationContext.Provider value={context}>
             <div
                 className={classNames(
                     Styles.headerStacked,
@@ -328,7 +357,7 @@ export const HeaderNavigationStacked: FC<HeaderNavigationStackedProps> = ({
                     </div>
                 </div>
             </div>
-        </NavLinkContext.Provider>
+        </NavigationContext.Provider>
     );
 };
 
@@ -367,8 +396,16 @@ export const HeaderNavigationTiny: FC<HeaderNavigationTinyProps> = ({
     minWidth = 800,
     navigationComponent = DefaultNavLinkComponent,
 }) => {
+    const context: NavigationContextType = useMemo(
+        () => ({
+            NavigationComponent: navigationComponent,
+            isLegacy: false,
+        }),
+        [navigationComponent]
+    );
+
     return (
-        <NavLinkContext.Provider value={navigationComponent}>
+        <NavigationContext.Provider value={context}>
             <div
                 className={classNames(Styles.headerTiny, className)}
                 style={{ minWidth: `${minWidth}px` }}
@@ -398,6 +435,6 @@ export const HeaderNavigationTiny: FC<HeaderNavigationTinyProps> = ({
                     {right}
                 </div>
             </div>
-        </NavLinkContext.Provider>
+        </NavigationContext.Provider>
     );
 };

package/src/components/layout.stories.tsx

@@ -1,3 +1,4 @@
+import { withAnvil, withMemoryRouter } from '../test/data.stories';
 import {
     WithAllMonolithData,
     WithAllMonolithDataCommercial,
@@ -7,6 +8,7 @@ import { DefaultSideNavigation } from './side-navigation/side-navigation.stories
 export default {
     title: 'Navigation/Layout',
     parameters: {},
+    decorators: [withMemoryRouter, withAnvil],
 };
 
 export const LeftNavLayout = () => {

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

@@ -1,178 +1,15 @@
-import { Button } from '@servicetitan/design-system';
-import { FC } from 'react';
-import { NavLinkComponentProps } from '../../utils/navigation';
+import { NavLinkMock, withAnvil, withMemoryRouter } from '../../test/data.stories';
 import { HeaderNavigationStacked } from '../header-navigation';
+export * from './profile-dropdown.stories';
 import { ProfileDropdown } from './profile-dropdown';
 
+const withHeaderNavigationStacked = (Story: any) => (
+    <HeaderNavigationStacked navigationComponent={NavLinkMock} right={<Story />} />
+);
+
 export default {
     title: 'Navigation/ProfileDropdownStacked',
     component: ProfileDropdown,
     parameters: {},
+    decorators: [withMemoryRouter, withAnvil, withHeaderNavigationStacked],
 };
-
-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 = () => (
-    <HeaderNavigationStacked
-        navigationComponent={NavLinkMock}
-        right={
-            <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>
-        }
-    />
-);
-
-export const profileDropdownWithLogo = () => (
-    <HeaderNavigationStacked
-        navigationComponent={NavLinkMock}
-        right={
-            <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 = () => (
-    <HeaderNavigationStacked
-        right={
-            <ProfileDropdown
-                trigger={{
-                    imageSrc: 'https://some.incorrect.url/logo.png',
-                }}
-            />
-        }
-    />
-);
-
-export const profileDropdownWithInfo = () => (
-    <HeaderNavigationStacked
-        right={
-            <ProfileDropdown
-                trigger={{
-                    info: { text: 'first', title: 'tenant user' },
-                    avatarBadge: true,
-                }}
-            />
-        }
-    />
-);
-
-export const profileDropdownWithCounter = () => (
-    <HeaderNavigationStacked
-        right={
-            <ProfileDropdown
-                trigger={{
-                    info: { text: 'first', title: 'tenant user' },
-                    avatarBadge: true,
-                    badge: { content: 3, className: 'bg-red-500' },
-                }}
-            />
-        }
-    />
-);
-
-export const profileDropdownWithBothBadges = () => (
-    <HeaderNavigationStacked
-        right={
-            <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 = () => (
-    <HeaderNavigationStacked
-        navigationComponent={NavLinkMock}
-        right={
-            <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 = () => (
-    <HeaderNavigationStacked
-        navigationComponent={NavLinkMock}
-        right={
-            <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-tiny.stories.tsx

@@ -0,0 +1,15 @@
+import { NavLinkMock, withAnvil, withMemoryRouter } from '../../test/data.stories';
+import { HeaderNavigationTiny } from '../header-navigation';
+export * from './profile-dropdown.stories';
+import { ProfileDropdown } from './profile-dropdown';
+
+const withHeaderNavigationTiny = (Story: any) => (
+    <HeaderNavigationTiny className="border" navigationComponent={NavLinkMock} right={<Story />} />
+);
+
+export default {
+    title: 'Navigation/ProfileDropdownTiny',
+    component: ProfileDropdown,
+    parameters: {},
+    decorators: [withMemoryRouter, withAnvil, withHeaderNavigationTiny],
+};

package/src/components/profile-dropdown/profile-dropdown.module.less

@@ -17,7 +17,7 @@
     .avatar-badge {
         position: absolute;
         top: 8px;
-        left: 0;
+        left: 4px;
         height: 12px;
         width: 12px;
         border-radius: @border-radius-circular;
@@ -50,6 +50,12 @@
         border-radius: 8px;
     }
 
+    &.trigger-container-legacy {
+        .avatar-badge {
+            left: 0;
+        }
+    }
+
     &.trigger-container-hint-arrow:first-child:before {
         display: none;
         content: '';

package/src/components/profile-dropdown/profile-dropdown.module.less.d.ts

@@ -16,4 +16,5 @@ export const info: string;
 export const profileImage: string;
 export const triggerContainer: string;
 export const triggerContainerHintArrow: string;
+export const triggerContainerLegacy: string;