@servicetitan/navigation 3.3.0 → 4.1.0

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

@@ -1,82 +1,21 @@
 import { Input, Stack } from '@servicetitan/design-system';
 import { FC, Fragment } from 'react';
-import { HeaderNavigationItemData, NavLinkComponentProps } from '../../utils/navigation';
+import { SearchIcon, items, withMemoryRouter } from '../../test/data.stories';
 import { LogoCompanyTitle } from '../logo/logo-company-title';
 import { LogoTitan, LogoTitanTitle } from '../logo/logo-titan-text';
 import { ProfileDropdown } from '../profile-dropdown/profile-dropdown';
+import { HeaderNavigationLink, HeaderNavigationTrigger } from './header-navigation-links';
 import * as Styles from './header-navigation-stories.module.less';
-import { HeaderNavigationLink, HeaderNavigationStacked, HeaderNavigationTrigger } from './';
+import { HeaderNavigationStacked } from './';
 
 export default {
     title: 'Navigation/HeaderNavigationStacked',
     component: HeaderNavigationStacked,
     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 = () => (
     <HeaderNavigationStacked
@@ -90,7 +29,6 @@ export const defaultNavigation = () => (
             items.dispatch,
             items.fleet,
         ]}
-        navigationComponent={NavLinkMock}
     />
 );
 
@@ -112,7 +50,6 @@ export const withLogoTextAndOverflow = () => (
             items.fleet,
         ]}
         itemsOverflow={[items.calls, items.accounting, items.purchasing, items.dispatch]}
-        navigationComponent={NavLinkMock}
     />
 );
 
@@ -142,7 +79,6 @@ export const withAllMonolithData = () => (
             items.pointOfSale,
             items.reports,
         ]}
-        navigationComponent={NavLinkMock}
         right={
             <Fragment>
                 <TimeZoneOffset />
@@ -153,14 +89,24 @@ export const withAllMonolithData = () => (
                     target="_blank"
                     iconComponent={SearchIcon}
                     hint="Search: for all the questions"
+                    icon={SvgIcon}
+                    iconActive={SvgIcon}
                 />
 
-                <HeaderNavigationTrigger id="dialpad" iconName="phone" counter={2} />
+                <HeaderNavigationTrigger
+                    id="dialpad"
+                    iconName="phone"
+                    counter={2}
+                    icon={SvgIcon}
+                    iconActive={SvgIcon}
+                />
 
                 <HeaderNavigationTrigger
                     id="titanAdvisor"
                     iconName="rocket"
                     iconClassName={Styles.rocketIcon}
+                    icon={SvgIcon}
+                    iconActive={SvgIcon}
                 />
 
                 <HeaderNavigationLink
@@ -171,6 +117,8 @@ export const withAllMonolithData = () => (
                     aria-label="search"
                     hint="Settings"
                     isActive
+                    icon={SvgIcon}
+                    iconActive={SvgIcon}
                 />
 
                 <ProfileDropdown>

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

@@ -65,6 +65,7 @@
 
     .navigation-link {
         padding: @spacing-2 @spacing-1;
+        font-size: 24px;
 
         .navigation-item-counter {
             top: 8px;
@@ -171,6 +172,7 @@
 
     .navigation-link {
         padding: 12px @spacing-1;
+        font-size: @typescale-4;
 
         .navigation-item-counter {
             top: 8px;
@@ -193,78 +195,15 @@
     }
 }
 
-@size-links-tiny: 24px;
-
-.header-tiny {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: 48px;
-
-    background-color: @color-white;
-    color: @color-black;
-
-    & > * {
-        overflow-y: hidden;
-    }
-
-    .he-top-left {
-        grid-column: span 1;
-    }
-
-    .he-top-center {
-        grid-column: span 1;
-    }
-
-    .he-top-right {
-        grid-column: span 1;
-
-        .navigation-icon {
-            height: @size-links-tiny;
-            width: @size-links-tiny;
-            font-size: @size-links-tiny;
-        }
-
-        & > * {
-            color: @color-black;
-        }
-    }
-
-    :global(.profile-dropdown-image) {
-        height: 24px;
-        width: 24px;
-    }
-
-    :global(.profile-dropdown-trigger) {
-        height: 32px;
-        font-size: @size-links-tiny;
-    }
-
-    .navigation-item-counter {
-        font-size: 8px !important;
-    }
-
-    .navigation-link {
-        margin: 6px 2px;
-        padding: 6px 6px;
-        border-radius: 12px;
-
-        &.navigation-item-active:not(.navigation-item-overflow) {
-            background-color: @color-blue-100 !important;
-            color: @color-blue-500 !important;
-        }
-        &:hover:not(.navigation-item-active):not(.navigation-item-overflow) {
-            background-color: rgba(0, 0, 0, 0.12) !important;
-        }
-
-        .navigation-item-counter {
-            top: 4px;
-            right: -2px;
-        }
-    }
-}
-
 .navigation-icon {
     display: inline-block;
+    color: inherit;
+
+    & > svg {
+        height: 1em;
+        width: 1em;
+        font-size: 1em;
+    }
 }
 
 .navigation-item {
@@ -314,3 +253,7 @@
         margin-top: -@spacing-1;
     }
 }
+
+.navigation-link {
+    color: inherit;
+}

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

@@ -7,7 +7,6 @@ export const heTopLeft: string;
 export const heTopRight: string;
 export const header: string;
 export const headerStacked: string;
-export const headerTiny: string;
 export const navigationIcon: string;
 export const navigationItem: string;
 export const navigationItemActive: string;

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

@@ -1,82 +1,20 @@
 import { Popover } from '@servicetitan/design-system';
 import { FC, useState } from 'react';
-import { HeaderNavigationItemData, NavLinkComponentProps } from '../../utils/navigation';
+import { 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';
+import { HeaderNavigationLink, HeaderNavigationTrigger } from './header-navigation-links';
 import * as Styles from './header-navigation-stories.module.less';
-import { HeaderNavigation, HeaderNavigationLink, HeaderNavigationTrigger } from './';
+import { HeaderNavigation } from './';
 
 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
@@ -89,7 +27,6 @@ export const defaultNavigation = () => (
             items.dispatch,
             items.fleet,
         ]}
-        navigationComponent={NavLinkMock}
     />
 );
 
@@ -112,7 +49,6 @@ export const withLogoTextAndOverflow = () => (
             items.fleet,
         ]}
         itemsOverflow={[items.calls, items.accounting, items.purchasing, items.dispatch]}
-        navigationComponent={NavLinkMock}
     />
 );
 
@@ -130,6 +66,8 @@ const HelpCenterButton = () => {
                     id="help"
                     iconName="help_outline"
                     onClick={() => setOpen(true)}
+                    icon={SvgIcon}
+                    iconActive={SvgIcon}
                 />
             }
             portal
@@ -164,11 +102,16 @@ export const withAllMonolithData = () => (
             items.pointOfSale,
             items.reports,
         ]}
-        navigationComponent={NavLinkMock}
     >
         <TimeZoneOffset />
 
-        <HeaderNavigationTrigger id="dialpad" iconName="phone" counter={2} />
+        <HeaderNavigationTrigger
+            id="dialpad"
+            iconName="phone"
+            counter={2}
+            icon={SvgIcon}
+            iconActive={SvgIcon}
+        />
 
         <HeaderNavigationLink
             id="search"
@@ -176,6 +119,8 @@ export const withAllMonolithData = () => (
             target="_blank"
             iconComponent={SearchIcon}
             hint="Search: for all the questions"
+            icon={SvgIcon}
+            iconActive={SvgIcon}
         />
 
         <HelpCenterButton />
@@ -183,6 +128,8 @@ export const withAllMonolithData = () => (
             id="titanAdvisor"
             iconName="rocket"
             iconClassName={Styles.rocketIcon}
+            icon={SvgIcon}
+            iconActive={SvgIcon}
         />
 
         <HeaderNavigationLink
@@ -193,6 +140,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,8 @@
 import { Icon, Popover, PopoverPropsStrict } from '@servicetitan/design-system';
 import classNames from 'classnames';
 import { FC, ReactElement, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
-import { HeaderNavigationItemData, NavLinkComponentProps } from '../../utils/navigation';
-import { DefaultNavLinkComponent, NavLinkContext } from '../../utils/navigation-context';
+import { HeaderNavigationItemData } from '../../utils/navigation';
+import { NavigationLegacyContext } from '../../utils/navigation-context';
 import { HeaderNavigationItem } from './header-navigation-content';
 import * as Styles from './header-navigation.module.less';
 
@@ -78,8 +78,6 @@ export interface HeaderNavigationProps {
     items?: HeaderNavigationItemData[];
     /** main navigation overflow items */
     itemsOverflow?: HeaderNavigationItemData[];
-    /** navigation component used for routing */
-    navigationComponent?: FC<NavLinkComponentProps>;
     /** props for main items overflow component */
     overflow?: HeaderNavigationOverflowProps;
 }
@@ -100,7 +98,6 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
     leftClassName,
     rightClassName,
     minWidth = 800,
-    navigationComponent = DefaultNavLinkComponent,
     overflow,
 }) => {
     const leftRef = useRef<HTMLDivElement>(null);
@@ -140,7 +137,7 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
     });
 
     return (
-        <NavLinkContext.Provider value={navigationComponent}>
+        <NavigationLegacyContext.Provider value>
             <div
                 className={classNames(Styles.header, className, {
                     [Styles.calculating]: minimized === MinimizedState.Calculating,
@@ -186,7 +183,7 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
                     {children}
                 </div>
             </div>
-        </NavLinkContext.Provider>
+        </NavigationLegacyContext.Provider>
     );
 };
 
@@ -213,8 +210,6 @@ export interface HeaderNavigationStackedProps {
     items?: HeaderNavigationItemData[];
     /** main navigation overflow items */
     itemsOverflow?: HeaderNavigationItemData[];
-    /** navigation component used for routing */
-    navigationComponent?: FC<NavLinkComponentProps>;
     /** props for main items overflow component */
     overflow?: HeaderNavigationOverflowProps;
 }
@@ -231,7 +226,6 @@ export const HeaderNavigationStacked: FC<HeaderNavigationStackedProps> = ({
     center,
     centerClassName,
     minWidth = 800,
-    navigationComponent = DefaultNavLinkComponent,
     overflow,
 }) => {
     const bottomRef = useRef<HTMLDivElement>(null);
@@ -269,7 +263,7 @@ export const HeaderNavigationStacked: FC<HeaderNavigationStackedProps> = ({
     });
 
     return (
-        <NavLinkContext.Provider value={navigationComponent}>
+        <NavigationLegacyContext.Provider value>
             <div
                 className={classNames(
                     Styles.headerStacked,
@@ -328,76 +322,6 @@ export const HeaderNavigationStacked: FC<HeaderNavigationStackedProps> = ({
                     </div>
                 </div>
             </div>
-        </NavLinkContext.Provider>
-    );
-};
-
-export interface HeaderNavigationTinyProps {
-    /** container class name */
-    className?: string;
-    /** extra navigation */
-    right?: ReactNode;
-    /** extra navigation container class name */
-    rightClassName?: string;
-    /** container id */
-    id?: string;
-    /** left content (usually used for logo) */
-    left?: ReactElement;
-    /** left container class name */
-    leftClassName?: string;
-    /** center content */
-    center?: ReactElement;
-    /** center container class name */
-    centerClassName?: string;
-    /** minimal width for navigation bar */
-    minWidth?: number;
-    /** navigation component used for routing */
-    navigationComponent?: FC<NavLinkComponentProps>;
-}
-
-export const HeaderNavigationTiny: FC<HeaderNavigationTinyProps> = ({
-    className,
-    id,
-    left,
-    leftClassName,
-    right,
-    rightClassName,
-    center,
-    centerClassName,
-    minWidth = 800,
-    navigationComponent = DefaultNavLinkComponent,
-}) => {
-    return (
-        <NavLinkContext.Provider value={navigationComponent}>
-            <div
-                className={classNames(Styles.headerTiny, className)}
-                style={{ minWidth: `${minWidth}px` }}
-                id={id}
-                data-cy="header-navigation"
-            >
-                <div
-                    className={classNames(Styles.heTopLeft, leftClassName)}
-                    data-cy="navigation-left"
-                >
-                    {left}
-                </div>
-                <div
-                    className={classNames(Styles.heTopCenter, centerClassName)}
-                    data-cy="navigation-center"
-                >
-                    {center}
-                </div>
-                <div
-                    className={classNames(
-                        'd-f flex-row justify-content-end align-items-center',
-                        Styles.heTopRight,
-                        rightClassName
-                    )}
-                    data-cy="navigation-right"
-                >
-                    {right}
-                </div>
-            </div>
-        </NavLinkContext.Provider>
+        </NavigationLegacyContext.Provider>
     );
 };

package/src/components/header-navigation/index.ts

@@ -1,2 +1 @@
 export * from './header-navigation';
-export * from './header-navigation-links';

package/src/components/layout.stories.tsx

@@ -1,12 +1,14 @@
+import { withAnvil, withMemoryRouter } from '../test/data.stories';
 import {
     WithAllMonolithData,
     WithAllMonolithDataCommercial,
-} from './header-navigation/header-navigation-tiny.stories';
-import { DefaultSideNavigation } from './side-navigation/side-navigation.stories';
+} from './left-navigation/header-navigation-tiny.stories';
+import { DefaultSideNavigation } from './left-navigation/side-navigation.stories';
 
 export default {
     title: 'Navigation/Layout',
     parameters: {},
+    decorators: [withMemoryRouter, withAnvil],
 };
 
 export const LeftNavLayout = () => {