@servicetitan/navigation 2.0.0 → 2.1.0

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"
+    />
+);

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

@@ -1,25 +1,6 @@
 /* stylelint-disable no-descending-specificity */
 @import (reference) '@servicetitan/tokens/core/tokens.less';
 
-.link {
-    display: flex;
-    align-items: center;
-    flex-wrap: nowrap;
-
-    .icon {
-        display: inline-block;
-    }
-
-    ins {
-        font-size: @typescale-2;
-    }
-
-    & * {
-        text-decoration: none;
-        white-space: nowrap;
-    }
-}
-
 .header {
     height: 56px;
     display: flex;
@@ -29,96 +10,106 @@
     background-color: @color-neutral-300;
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
 
-    .link {
-        max-height: 56px;
-        font-family: @base-font-family;
-        position: relative;
+    .right > * {
+        color: @color-white;
+    }
 
-        .counter {
-            color: @color-white;
-            font-size: @typescale-0;
-            font-weight: @font-weight-semibold;
+    .right {
+        .navigation-icon {
+            height: 24px;
+            width: 24px;
+            font-size: 24px;
         }
     }
 
-    .link-main {
-        // styles specific to main nav links
-        padding: 18px 12px;
-    }
+    .center {
+        min-width: 0;
+        overflow-x: hidden;
+        overflow-y: hidden;
 
-    .navigation-items .link {
-        // styles specific to main nav links and overflow nav links
-        i {
+        .navigation-icon {
             height: 20px;
             width: 20px;
+            font-size: @typescale-4;
         }
+    }
+
+    .navigation-item-main {
+        // styles specific to main nav links
+        padding: 18px 12px;
+    }
 
-        ins {
-            margin-left: @spacing-half;
+    &.calculating {
+        .center {
+            opacity: 0;
         }
     }
 
-    .link-main,
-    .right .link {
-        // styles specific to main nav links and extra nav links
-        color: @color-white;
+    :global(.profile-dropdown-image) {
+        height: 32px;
+        width: 32px;
+    }
 
-        &.active {
-            color: @color-blue-200;
-        }
+    :global(.profile-dropdown-svg) {
+        height: 28px;
+        width: 28px;
+    }
 
-        &:hover:not(.active) {
-            opacity: 0.7;
-        }
+    .navigation-item-counter {
+        font-size: @typescale-0 !important;
+    }
 
-        .counter {
-            position: absolute;
-            top: @spacing-1;
-            right: 0;
+    .navigation-item-main .navigation-item-counter {
+        top: 8px;
+        right: -4px;
 
-            &.counter-long {
-                right: -@spacing-half;
-            }
+        &.navigation-item-counter-long {
+            right: -8px;
         }
     }
 
-    .link-overflow {
-        // styles specific to overflow links
-        display: inline-flex;
-        color: @color-black;
-        padding: @spacing-1 12px;
+    .navigation-link .navigation-item-counter {
+        top: 8px;
+        right: -4px;
+    }
+}
 
-        &.active:not(:hover) {
-            color: @color-blue-500;
-        }
+.overflow-popover {
+    padding: @spacing-1 @spacing-0 !important;
 
-        &:hover {
-            background-color: @color-blue-500;
-            color: @color-white;
-        }
+    .navigation-overflow {
+        display: flex;
+        flex-direction: column;
+    }
+}
 
-        ins {
-            margin-left: @spacing-1;
-        }
+.header-stacked {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: 44px 36px;
 
-        .counter {
-            margin-left: @spacing-half;
-            margin-top: -@spacing-1;
-        }
+    background-color: @color-neutral-500;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
+
+    & > * {
+        overflow-y: hidden;
     }
 
-    .right {
-        .link {
-            padding: 18px @spacing-1;
+    .he-top-left {
+        grid-column: span 1;
+    }
 
-            .icon {
-                height: 24px;
-                width: 24px;
-            }
+    .he-top-center {
+        grid-column: span 1;
+    }
+
+    .he-top-right {
+        grid-column: span 1;
 
-            ins {
-                margin-left: @spacing-half;
-            }
+        .navigation-icon {
+            height: 20px;
+            width: 20px;
+            font-size: @typescale-4;
         }
 
         & > * {
@@ -126,30 +117,116 @@
         }
     }
 
-    .center {
-        min-width: 0;
-        overflow-x: hidden;
-        overflow-y: hidden;
+    .he-bottom {
+        grid-column: span 3;
+        border-top: 1px solid @color-neutral-200;
+
+        .navigation-icon {
+            height: 20px;
+            width: 20px;
+            font-size: @typescale-4;
+        }
     }
 
     &.calculating {
-        .center {
+        .he-bottom {
             opacity: 0;
         }
     }
 
-    &.minimized .link-main {
-        ins {
-            display: none;
+    :global(.profile-dropdown-image) {
+        height: 24px;
+        width: 24px;
+    }
+
+    :global(.profile-dropdown-svg) {
+        height: 20px;
+        width: 20px;
+    }
+
+    .navigation-item-counter {
+        font-size: 8px !important;
+    }
+
+    .navigation-item-main .navigation-item-counter {
+        top: 4px;
+        right: -4px;
+
+        &.navigation-item-counter-long {
+            right: -8px;
         }
     }
+
+    .navigation-link .navigation-item-counter {
+        top: 12px;
+        right: 0;
+    }
 }
 
-.overflow-popover {
-    padding: @spacing-1 @spacing-0 !important;
+.navigation-icon {
+    display: inline-block;
+}
 
-    .navigation-overflow {
-        display: flex;
-        flex-direction: column;
+.navigation-item {
+    // styles specific to main nav links and extra nav links
+    font-family: @base-font-family;
+    color: @color-white;
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    text-wrap: nowrap;
+
+    &.navigation-item-active:not(.navigation-item-overflow) {
+        color: @color-blue-200 !important;
+    }
+
+    &:hover:not(.navigation-item-active):not(.navigation-item-overflow) {
+        opacity: 0.7;
+    }
+
+    .navigation-item-counter {
+        color: @color-white;
+        font-weight: @font-weight-semibold;
+    }
+
+    &:not(.navigation-item-overflow) .navigation-item-counter {
+        position: absolute;
+    }
+
+    .navigation-item-title {
+        font-family: @base-font-family;
+        font-size: @typescale-2;
+        margin-left: @spacing-half;
+    }
+}
+
+.navigation-item-main {
+    // styles specific to main nav links
+    padding: 6px 10px;
+}
+
+.navigation-item-overflow {
+    // styles specific to overflow links
+    display: inline-flex;
+    color: @color-black;
+    padding: @spacing-1 12px;
+
+    &.navigation-item-active:not(:hover) {
+        color: @color-blue-500;
     }
+
+    &:hover {
+        background-color: @color-blue-500;
+        color: @color-white;
+    }
+
+    .navigation-item-counter {
+        margin-left: @spacing-half;
+        margin-top: -@spacing-1;
+    }
+}
+
+.navigation-link {
+    padding: 18px @spacing-1;
 }

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

@@ -1,16 +1,21 @@
 export const __esModule: true;
-export const active: string;
 export const calculating: string;
 export const center: string;
-export const counter: string;
-export const counterLong: string;
+export const heBottom: string;
+export const heTopCenter: string;
+export const heTopLeft: string;
+export const heTopRight: string;
 export const header: string;
-export const icon: string;
-export const link: string;
-export const linkMain: string;
-export const linkOverflow: string;
-export const minimized: string;
-export const navigationItems: string;
+export const headerStacked: string;
+export const navigationIcon: string;
+export const navigationItem: string;
+export const navigationItemActive: string;
+export const navigationItemCounter: string;
+export const navigationItemCounterLong: string;
+export const navigationItemMain: string;
+export const navigationItemOverflow: string;
+export const navigationItemTitle: string;
+export const navigationLink: string;
 export const navigationOverflow: string;
 export const overflowPopover: string;
 export const right: string;