@servicetitan/navigation 2.0.0 → 2.2.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,187 @@
+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 * as Styles from './header-navigation-stories.module.less';
+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 SearchIcon = () => (
+    <svg width="24" height="24" viewBox="-4 2 26 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <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"
+            style={{ fill: 'white', fillOpacity: 1 }}
+        />
+    </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 ff-default p-r-2">
+        <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 />
+
+                <HeaderNavigationLink
+                    id="search"
+                    to="https://google.com"
+                    target="_blank"
+                    iconComponent={SearchIcon}
+                    hint="Search: for all the questions"
+                />
+
+                <HeaderNavigationTrigger id="dialpad" iconName="phone" counter={2} />
+
+                <HeaderNavigationTrigger
+                    id="titanAdvisor"
+                    iconName="rocket"
+                    iconClassName={Styles.rocketIcon}
+                />
+
+                <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-stories.module.less

@@ -0,0 +1,6 @@
+/* stylelint-disable no-descending-specificity */
+@import (reference) '@servicetitan/tokens/core/tokens.less';
+
+.rocket-icon {
+    transform: scale(0.9) translate(2px, -2px) rotate(45deg);
+}

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

@@ -0,0 +1,3 @@
+export const __esModule: true;
+export const rocketIcon: string;
+

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,105 @@
     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;
+
+    & > * {
+        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 +116,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;