@servicetitan/navigation 1.6.0 → 2.1.0

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

@@ -0,0 +1,118 @@
+import { Icon, IconPropsStrict } from '@servicetitan/design-system';
+import classNames from 'classnames';
+import { FC, Fragment } from 'react';
+import { HeaderNavigationItemData } from '../../utils/navigation';
+import { useNavLink } from '../../utils/navigation-context';
+import { withTooltip } from '../../utils/with-tooltip';
+import { CounterTag, CounterTagPropsType } from '../counter-tag';
+import * as Styles from './header-navigation.module.less';
+
+export interface HeaderNavigationItemContentPropsStrict {
+    /** item text */
+    title?: string;
+    /** text component class name */
+    titleClassName?: string;
+    /** counter shown for item */
+    counter?: CounterTagPropsType;
+    /** counter component class name */
+    counterClassName?: string;
+    /** icon component class name */
+    iconClassName?: string;
+    /** IconComponent custom icon component */
+    iconComponent?: FC;
+    /** iconName name of anvil icon */
+    iconName?: IconPropsStrict['name'];
+}
+
+/** Content for navigation items */
+export const HeaderNavigationItemContent: FC<HeaderNavigationItemContentPropsStrict> = ({
+    title,
+    titleClassName,
+    counter,
+    counterClassName,
+    iconClassName,
+    iconComponent: IconComponent,
+    iconName,
+}) => {
+    const iconClass = classNames(Styles.navigationIcon, iconClassName);
+    return (
+        <Fragment>
+            {IconComponent ? (
+                <i className={iconClass}>
+                    <IconComponent />
+                </i>
+            ) : iconName ? (
+                <Icon name={iconName} className={iconClass} />
+            ) : (
+                <i className={iconClass} />
+            )}
+
+            {!!title && (
+                <span className={classNames(Styles.navigationItemTitle, titleClassName)}>
+                    {title}
+                </span>
+            )}
+
+            {!!counter && (
+                <CounterTag
+                    data={counter}
+                    className={classNames(Styles.navigationItemCounter, counterClassName)}
+                    longClassName={Styles.navigationItemCounterLong}
+                />
+            )}
+        </Fragment>
+    );
+};
+
+interface HeaderNavigationItemPropsStrict extends HeaderNavigationItemData {
+    minimized: boolean;
+    main: boolean;
+}
+
+/** Navigation main menu item */
+export const HeaderNavigationItem: FC<HeaderNavigationItemPropsStrict> = ({
+    id,
+    to,
+    title,
+    hint,
+    counter,
+    className,
+    iconClassName,
+    iconComponent,
+    iconName,
+    isActive,
+    main,
+    minimized,
+}) => {
+    const NavigationComponent = useNavLink();
+
+    return withTooltip(
+        <NavigationComponent
+            data-cy={`navigation-item-${id}`}
+            data-pendo={`navigation-item-${id}`}
+            key={id}
+            to={to}
+            title={hint}
+            className={classNames(
+                Styles.navigationItem,
+                main ? Styles.navigationItemMain : Styles.navigationItemOverflow,
+                className,
+                {
+                    [Styles.navigationItemActive]: isActive === true,
+                }
+            )}
+            isActive={typeof isActive === 'function' ? isActive : undefined}
+            activeClassName={Styles.navigationItemActive}
+        >
+            <HeaderNavigationItemContent
+                title={minimized ? undefined : title}
+                titleClassName={main ? '' : 'm-l-half'}
+                counter={counter}
+                iconComponent={iconComponent}
+                iconClassName={iconClassName}
+                iconName={iconName}
+            />
+        </NavigationComponent>,
+        minimized ? title : undefined
+    );
+};

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

@@ -1,13 +1,12 @@
-import { Popover } from '@servicetitan/design-system';
+import { Button, Popover } from '@servicetitan/design-system';
 import { FC, useState } from 'react';
 import { NavLinkComponentProps } from '../../utils/navigation';
 import {
     HeaderNavigation,
-    HeaderNavigationItemContent,
     HeaderNavigationLink,
     HeaderNavigationTrigger,
     HeaderNavigationTriggerCustom,
-} from './header-navigation';
+} from './';
 
 export default {
     title: 'Navigation/HeaderNavigationExtra',
@@ -15,7 +14,13 @@ export default {
     parameters: {},
 };
 
-const NavLinkMock: FC<NavLinkComponentProps> = ({ to, children, ...rest }) => (
+const NavLinkMock: FC<NavLinkComponentProps> = ({
+    to,
+    children,
+    isActive,
+    activeClassName,
+    ...rest
+}) => (
     <a
         {...rest}
         href={to}
@@ -28,7 +33,7 @@ const NavLinkMock: FC<NavLinkComponentProps> = ({ to, children, ...rest }) => (
 );
 
 export const extraLink = () => (
-    <HeaderNavigation items={[]} navigationComponent={NavLinkMock} contentClassName="m-r-1">
+    <HeaderNavigation items={[]} navigationComponent={NavLinkMock} rightClassName="m-r-1">
         <HeaderNavigationLink
             id="search"
             to="https://google.com"
@@ -40,8 +45,8 @@ export const extraLink = () => (
 );
 
 export const extraTrigger = () => (
-    <HeaderNavigation items={[]} navigationComponent={NavLinkMock} contentClassName="m-r-1">
-        <HeaderNavigationTrigger id="dialpad" iconName="phone" counter={2} />
+    <HeaderNavigation items={[]} navigationComponent={NavLinkMock} rightClassName="m-r-1">
+        <HeaderNavigationTrigger id="dialpad" iconName="phone" counter={2} tooltip="Phones pro" />
     </HeaderNavigation>
 );
 
@@ -53,22 +58,20 @@ export const extraCustomTrigger = () => (
     </HeaderNavigation>
 );
 
-export const extraWithTitle = () => (
-    <HeaderNavigation items={[]} navigationComponent={NavLinkMock} contentClassName="m-r-1">
+export const extraWithTooltip = () => (
+    <HeaderNavigation items={[]} navigationComponent={NavLinkMock} rightClassName="m-r-1">
         <HeaderNavigationLink
             id="search"
             to="https://google.com"
             target="_blank"
             iconName="search"
-            hint="Search: for all the questions"
-            title="Google"
+            tooltip="Search: for all the questions"
+            hint="Google"
         />
 
         <HeaderNavigationTrigger id="dialpad" iconName="phone" title="Dialpad" counter={2} />
 
-        <HeaderNavigationTriggerCustom id="help-center">
-            <HelpCenterButton />
-        </HeaderNavigationTriggerCustom>
+        <HelpCenterButton />
     </HeaderNavigation>
 );
 
@@ -82,9 +85,12 @@ const HelpCenterButton = () => {
             direction="bl"
             width="xs"
             trigger={
-                <div onClick={() => setOpen(true)}>
-                    <HeaderNavigationItemContent iconName="help_outline" />
-                </div>
+                <Button
+                    className="c-white"
+                    iconName="help_outline"
+                    fill="subtle"
+                    onClick={() => setOpen(true)}
+                />
             }
             portal
         >

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

@@ -0,0 +1,143 @@
+import classNames from 'classnames';
+import { FC, HTMLAttributeAnchorTarget, ReactNode } from 'react';
+import { useNavLink } from '../../utils/navigation-context';
+import { withTooltip } from '../../utils/with-tooltip';
+import {
+    HeaderNavigationItemContent,
+    HeaderNavigationItemContentPropsStrict,
+} from './header-navigation-content';
+import * as Styles from './header-navigation.module.less';
+
+export interface HeaderNavigationTriggerPropsStrict
+    extends Omit<HeaderNavigationItemContentPropsStrict, 'title' | 'size'> {
+    /** unique identifier */
+    id: string;
+    /** tooltip text */
+    tooltip?: string;
+    /** item description */
+    hint?: string;
+    /** container class name */
+    className?: string;
+}
+
+interface HeaderNavigationTriggerProps extends HeaderNavigationTriggerPropsStrict {
+    /** unstrict props */
+    [key: string]: any;
+}
+
+export interface HeaderNavigationLinkPropsStrict extends HeaderNavigationTriggerPropsStrict {
+    /** link href */
+    to: string;
+    /** isActive */
+    isActive?: boolean | ((pathname: string) => boolean);
+    /** link html target */
+    target?: HTMLAttributeAnchorTarget;
+}
+
+export interface HeaderNavigationLinkProps extends HeaderNavigationLinkPropsStrict {
+    /** unstrict props */
+    [key: string]: any;
+}
+
+/** Navigation extra item with link */
+export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
+    id,
+    to,
+    hint,
+    tooltip,
+    counter,
+    className,
+    iconClassName,
+    iconComponent,
+    iconName,
+    isActive,
+    target,
+    ...rest
+}) => {
+    const NavigationComponent = useNavLink();
+
+    return withTooltip(
+        <NavigationComponent
+            data-cy={`navigation-link-${id}`}
+            data-pendo={`navigation-link-${id}`}
+            {...rest}
+            key={id}
+            to={to}
+            title={hint}
+            className={classNames(Styles.navigationLink, Styles.navigationItem, className, {
+                [Styles.navigationItemActive]: isActive === true,
+            })}
+            isActive={typeof isActive === 'function' ? isActive : undefined}
+            activeClassName={Styles.navigationItemActive}
+            target={target}
+        >
+            <HeaderNavigationItemContent
+                counter={counter}
+                iconComponent={iconComponent}
+                iconClassName={iconClassName}
+                iconName={iconName}
+            />
+        </NavigationComponent>,
+        tooltip
+    );
+};
+
+/** Navigation extra item with icon button */
+export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
+    id,
+    className,
+    counter,
+    iconClassName,
+    iconComponent,
+    iconName,
+    hint,
+    tooltip,
+    ...rest
+}) =>
+    withTooltip(
+        <div
+            data-cy={`navigation-trigger-${id}`}
+            data-pendo={`navigation-trigger-${id}`}
+            {...rest}
+            title={hint}
+            className={classNames(
+                Styles.navigationItem,
+                Styles.navigationLink,
+                'cursor-pointer',
+                className
+            )}
+        >
+            <HeaderNavigationItemContent
+                counter={counter}
+                iconComponent={iconComponent}
+                iconClassName={iconClassName}
+                iconName={iconName}
+            />
+        </div>,
+        tooltip
+    );
+
+/** Navigation extra item with custom content */
+export const HeaderNavigationTriggerCustom: FC<
+    Omit<
+        HeaderNavigationTriggerProps,
+        'counter' | 'iconSize' | 'iconName' | 'iconComponent' | 'iconClassName'
+    > & { children: ReactNode }
+> = ({ children, id, className, tooltip, title, ...rest }) =>
+    withTooltip(
+        <div
+            data-cy={`navigation-custom-${id}`}
+            data-pendo={`navigation-custom-${id}`}
+            {...rest}
+            title={title}
+            className={classNames(
+                Styles.navigationItem,
+                Styles.navigationLink,
+                'cursor-pointer',
+                className
+            )}
+        >
+            {children}
+        </div>,
+        tooltip
+    );

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

@@ -0,0 +1,172 @@
+import { Input, Stack } from '@servicetitan/design-system';
+import { FC, Fragment } from 'react';
+import { HeaderNavigationItemData, NavLinkComponentProps } from '../../utils/navigation';
+import { LogoCompanyTitle } from '../logo/logo-company-title';
+import { LogoTitan, LogoTitanTitle } from '../logo/logo-titan-text';
+import { ProfileDropdown } from '../profile-dropdown/profile-dropdown';
+import { HeaderNavigationLink, HeaderNavigationStacked, HeaderNavigationTrigger } from './';
+
+export default {
+    title: 'Navigation/HeaderNavigationStacked',
+    component: HeaderNavigationStacked,
+    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', 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>
+);
+
+export const defaultNavigation = () => (
+    <HeaderNavigationStacked
+        left={<LogoCompanyTitle className="m-l-1" fill="#fff" />}
+        leftClassName="d-f align-items-center"
+        items={[
+            items.dashboard,
+            items.calendar,
+            items.calls,
+            items.accounting,
+            items.dispatch,
+            items.fleet,
+        ]}
+        navigationComponent={NavLinkMock}
+    />
+);
+
+export const withLogoTextAndOverflow = () => (
+    <HeaderNavigationStacked
+        left={
+            <Stack alignItems="center">
+                <LogoTitan mantleFill="#2270EE" size={44} />
+                <LogoTitanTitle className="c-white m-l-1">Commercial</LogoTitanTitle>
+            </Stack>
+        }
+        items={[
+            items.dashboard,
+            items.calendar,
+            items.calls,
+            items.accounting,
+            items.dispatch,
+            items.purchasing,
+            items.fleet,
+        ]}
+        itemsOverflow={[items.calls, items.accounting, items.purchasing, items.dispatch]}
+        navigationComponent={NavLinkMock}
+    />
+);
+
+const TimeZoneOffset: FC = () => (
+    <div className="fs-2 fw-bold p-x-1">
+        <span>EST (-9 hrs)</span>
+    </div>
+);
+
+export const withAllMonolithData = () => (
+    <HeaderNavigationStacked
+        left={<LogoCompanyTitle className="m-l-1" fill="#fff" />}
+        leftClassName="d-f align-items-center"
+        items={[
+            items.dashboard,
+            items.calendar,
+            items.calls,
+            items.accounting,
+            items.dispatch,
+
+            items.fleet,
+            items.followUps,
+            items.inventory,
+
+            items.marketing,
+            items.priceBook,
+            items.pointOfSale,
+            items.reports,
+        ]}
+        navigationComponent={NavLinkMock}
+        right={
+            <Fragment>
+                <TimeZoneOffset />
+
+                <HeaderNavigationTrigger id="dialpad" iconName="phone" counter={2} />
+
+                <HeaderNavigationLink
+                    id="search"
+                    to="https://google.com"
+                    target="_blank"
+                    iconName="search"
+                    hint="Search: for all the questions"
+                />
+
+                <HeaderNavigationTrigger id="titanAdvisor" iconName="rocket" />
+
+                <HeaderNavigationLink
+                    id="settings"
+                    to="https://google.com"
+                    target="_blank"
+                    iconName="settings"
+                    aria-label="search"
+                    hint="Settings"
+                    isActive
+                />
+
+                <ProfileDropdown>
+                    <ProfileDropdown.Link id="tasks" to="https://googgle.com" counter={10}>
+                        Task Management
+                    </ProfileDropdown.Link>
+                    <ProfileDropdown.Divider />
+                    <ProfileDropdown.Link id="sign-out" to="https://googgle.com">
+                        Sign Out{' '}
+                        <span className="c-neutral-100 m-l-half t-truncate">James Bond</span>
+                    </ProfileDropdown.Link>
+                    <ProfileDropdown.Section id="userid" className="c-neutral-100 fs-1">
+                        User ID: 007
+                    </ProfileDropdown.Section>
+                </ProfileDropdown>
+            </Fragment>
+        }
+        center={<Input placeholder="Search smth" size="xsmall" className="w-100" />}
+        centerClassName="d-f align-items-center"
+    />
+);