@servicetitan/navigation 3.3.0 → 4.1.0

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

@@ -0,0 +1,110 @@
+import { Icon, IconProps } from '@servicetitan/anvil2';
+import classNames from 'classnames';
+import { FC, Fragment, useContext } from 'react';
+import { HeaderNavigationLinkProps, HeaderNavigationTriggerProps } from '../../utils/navigation';
+import { NavigationComponentContext } from '../../utils/navigation-context';
+import { withTooltip } from '../../utils/with-tooltip';
+import { CounterTag, CounterTagPropsType } from '../counter-tag';
+import * as Styles from './header-navigation-tiny.module.less';
+
+/** Content for navigation items */
+export const HeaderNavigationItemContent: FC<{
+    counter?: CounterTagPropsType;
+    counterClassName?: string;
+    icon: IconProps['svg'] | undefined;
+    iconActive: IconProps['svg'] | undefined;
+}> = ({ counter, counterClassName, icon, iconActive }) => {
+    return (
+        <Fragment>
+            {!!icon && <Icon svg={icon} className={Styles.navigationIcon} />}
+            {!!iconActive && (
+                <Icon
+                    svg={iconActive}
+                    className={classNames(Styles.navigationIcon, Styles.navigationIconActive)}
+                />
+            )}
+
+            {!!counter && (
+                <CounterTag
+                    data={counter}
+                    className={classNames(Styles.navigationItemCounter, counterClassName)}
+                    longClassName={Styles.navigationItemCounterLong}
+                />
+            )}
+        </Fragment>
+    );
+};
+
+/** Navigation extra item with link */
+export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
+    id,
+    to,
+    hint,
+    tooltip,
+    counter,
+    className,
+    icon,
+    iconActive,
+    isActive,
+    target,
+    ...rest
+}) => {
+    const NavigationComponent = useContext(NavigationComponentContext);
+
+    return withTooltip(
+        <NavigationComponent
+            data-cy={`navigation-link-${id}`}
+            data-pendo={`navigation-link-${id}`}
+            {...rest}
+            key={id}
+            to={to}
+            title={hint}
+            className={classNames(Styles.navigationLink, className, {
+                [Styles.navigationItemActive]: isActive === true,
+                [Styles.navigationItemIconState]: !!icon && !!iconActive,
+            })}
+            isActive={typeof isActive === 'function' ? isActive : undefined}
+            activeClassName={Styles.navigationItemActive}
+            target={target}
+        >
+            <HeaderNavigationItemContent counter={counter} icon={icon} iconActive={iconActive} />
+        </NavigationComponent>,
+        tooltip
+    );
+};
+
+/** Navigation extra item with icon button */
+export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
+    id,
+    className,
+    counter,
+    icon,
+    iconActive,
+    isActive,
+    hint,
+    tooltip,
+    title,
+    titleClassName,
+    ...rest
+}) => {
+    return withTooltip(
+        <div
+            data-cy={`navigation-trigger-${id}`}
+            data-pendo={`navigation-trigger-${id}`}
+            {...rest}
+            title={hint}
+            className={classNames(
+                Styles.navigationLink,
+                {
+                    [Styles.navigationItemActive]: isActive === true,
+                    [Styles.navigationItemIconState]: !!icon && !!iconActive,
+                },
+                'cursor-pointer',
+                className
+            )}
+        >
+            <HeaderNavigationItemContent counter={counter} icon={icon} iconActive={iconActive} />
+        </div>,
+        tooltip
+    );
+};

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

@@ -0,0 +1,109 @@
+/* stylelint-disable no-descending-specificity */
+@import (reference) '@servicetitan/tokens/core/tokens.less';
+
+@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;
+
+        & > * {
+            color: @color-black;
+        }
+    }
+
+    :global(.profile-dropdown-image) {
+        height: 24px;
+        width: 24px;
+    }
+
+    :global(.profile-dropdown-trigger) {
+        height: 32px;
+        font-size: @size-links-tiny;
+    }
+
+    .navigation-link {
+        margin: 6px 2px;
+        padding: 6px 6px;
+        border-radius: 12px;
+        font-size: @size-links-tiny;
+        color: inherit;
+
+        &.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-icon-state.navigation-item-active {
+            .navigation-icon:not(.navigation-icon-active) {
+                display: none;
+            }
+
+            .navigation-icon.navigation-icon-active[data-anv][data-anv] {
+                display: block;
+            }
+        }
+    }
+
+    .navigation-icon[data-anv][data-anv] {
+        display: inline-block;
+        color: inherit;
+        height: 24px;
+        width: 24px;
+
+        > svg {
+            height: @size-links-tiny;
+            width: @size-links-tiny;
+        }
+
+        &.navigation-icon-active {
+            display: none;
+        }
+    }
+}
+
+.navigation-link {
+    // styles specific to extra nav links
+    color: @color-black;
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    text-wrap: nowrap;
+
+    .navigation-item-counter {
+        color: @color-white;
+        font-weight: @font-weight-semibold;
+        font-size: 8px !important;
+        min-width: 12px;
+        position: absolute;
+        top: 4px;
+        right: -2px;
+    }
+
+    &.navigation-item-counter-long {
+        right: -8px;
+    }
+}

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

@@ -0,0 +1,14 @@
+export const __esModule: true;
+export const heTopCenter: string;
+export const heTopLeft: string;
+export const heTopRight: string;
+export const headerTiny: string;
+export const navigationIcon: string;
+export const navigationIconActive: string;
+export const navigationItemActive: string;
+export const navigationItemCounter: string;
+export const navigationItemCounterLong: string;
+export const navigationItemIconState: string;
+export const navigationItemOverflow: string;
+export const navigationLink: string;
+

package/src/components/{header-navigation → left-navigation}/header-navigation-tiny.stories.tsx

@@ -1,17 +1,31 @@
+import SvgSearch from '@servicetitan/anvil2/assets/icons/material/round/search.svg';
+import SvgSettingsActive from '@servicetitan/anvil2/assets/icons/st/gnav_settings_active.svg';
+import SvgSettings from '@servicetitan/anvil2/assets/icons/st/gnav_settings_inactive.svg';
+import SvgRocketActive from '@servicetitan/anvil2/assets/icons/st/gnav_titan_advisor_active.svg';
+import SvgRocket from '@servicetitan/anvil2/assets/icons/st/gnav_titan_advisor_inactive.svg';
+
 import { Input, Stack } from '@servicetitan/design-system';
 import { FC, Fragment } from 'react';
-import { NavLinkComponentProps } from '../../utils/navigation';
+import {
+    CallsNavigationTrigger,
+    SearchIcon,
+    withAnvil,
+    withMemoryRouter,
+} from '../../test/data.stories';
+import * as Styles from '../header-navigation/header-navigation-stories.module.less';
 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, HeaderNavigationTiny, HeaderNavigationTrigger } from './';
+import { HeaderNavigationTiny } from './header-navigation-tiny';
+import { HeaderNavigationLink } from './header-navigation-tiny-links';
 
 export default {
     title: 'Navigation/HeaderNavigationTiny',
     component: HeaderNavigationTiny,
     parameters: {},
     decorators: [
+        withMemoryRouter,
+        withAnvil,
         (Story: any) => (
             <div className="border" style={{ height: '500px' }}>
                 <Story />
@@ -20,42 +34,11 @@ export default {
     ],
 };
 
-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="currentColor"
-            />
-        </g>
-    </svg>
-);
-
-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 = () => (
+export const DefaultTinyNavigation = () => (
     <HeaderNavigationTiny
         className="border-bottom"
         left={<LogoCompanyTitle className="m-l-1" size="150" />}
         leftClassName="d-f align-items-center"
-        navigationComponent={NavLinkMock}
     />
 );
 
@@ -70,7 +53,6 @@ export const WithAllMonolithData = () => (
         className="border-bottom"
         left={<LogoCompanyTitle className="m-l-1" size="150" />}
         leftClassName="d-f align-items-center"
-        navigationComponent={NavLinkMock}
         right={
             <Fragment>
                 <TimeZoneOffset />
@@ -81,24 +63,31 @@ export const WithAllMonolithData = () => (
                     target="_blank"
                     iconComponent={SearchIcon}
                     hint="Search: for all the questions"
+                    tooltip="Search"
+                    icon={SvgSearch}
+                    iconActive={SvgSearch}
                 />
 
-                <HeaderNavigationTrigger id="dialpad" iconName="phone" counter={2} />
+                <CallsNavigationTrigger />
 
-                <HeaderNavigationTrigger
+                <HeaderNavigationLink
                     id="titanAdvisor"
+                    to="titanAdvisor"
                     iconName="rocket"
                     iconClassName={Styles.rocketIcon}
+                    icon={SvgRocket}
+                    iconActive={SvgRocketActive}
                 />
 
                 <HeaderNavigationLink
                     id="settings"
-                    to="https://google.com"
+                    to="settings"
                     target="_blank"
                     iconName="settings"
                     aria-label="search"
                     hint="Settings"
-                    isActive
+                    icon={SvgSettings}
+                    iconActive={SvgSettingsActive}
                 />
 
                 <ProfileDropdown>
@@ -131,7 +120,6 @@ export const WithAllMonolithDataCommercial = () => (
             </Stack>
         }
         leftClassName="d-f align-items-center"
-        navigationComponent={NavLinkMock}
         right={
             <Fragment>
                 <TimeZoneOffset />
@@ -142,24 +130,29 @@ export const WithAllMonolithDataCommercial = () => (
                     target="_blank"
                     iconComponent={SearchIcon}
                     hint="Search: for all the questions"
+                    icon={SvgSearch}
+                    iconActive={SvgSearch}
                 />
 
-                <HeaderNavigationTrigger id="dialpad" iconName="phone" counter={2} />
+                <CallsNavigationTrigger />
 
-                <HeaderNavigationTrigger
+                <HeaderNavigationLink
                     id="titanAdvisor"
+                    to="titanAdvisor"
                     iconName="rocket"
                     iconClassName={Styles.rocketIcon}
+                    icon={SvgRocket}
+                    iconActive={SvgRocketActive}
                 />
 
                 <HeaderNavigationLink
                     id="settings"
-                    to="https://google.com"
-                    target="_blank"
+                    to="settings"
                     iconName="settings"
                     aria-label="search"
                     hint="Settings"
-                    isActive
+                    icon={SvgSettings}
+                    iconActive={SvgSettingsActive}
                 />
 
                 <ProfileDropdown>

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

@@ -0,0 +1,65 @@
+import classNames from 'classnames';
+import { FC, ReactElement, ReactNode } from 'react';
+import * as Styles from './header-navigation-tiny.module.less';
+
+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;
+}
+
+export const HeaderNavigationTiny: FC<HeaderNavigationTinyProps> = ({
+    className,
+    id,
+    left,
+    leftClassName,
+    right,
+    rightClassName,
+    center,
+    centerClassName,
+    minWidth = 800,
+}) => {
+    return (
+        <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>
+    );
+};

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

@@ -0,0 +1,2 @@
+export * from './header-navigation-tiny';
+export * from './side-navigation';

package/src/components/{side-navigation → left-navigation}/side-navigation.module.less

@@ -84,6 +84,16 @@
         color: @text-color-active;
     }
 
+    &.navigation-item-icon-state.navigation-item-active {
+        .navigation-icon:not(.navigation-icon-active) {
+            display: none;
+        }
+
+        .navigation-icon.navigation-icon-active {
+            display: block;
+        }
+    }
+
     &:hover:not(.navigation-item-active) {
         background-color: @bg-color-hover;
     }
@@ -101,10 +111,19 @@
     }
 }
 
-.navigation-icon {
+.navigation-icon[data-anv][data-anv] {
     height: 24px;
     width: 24px;
-    font-size: 24px;
+    color: inherit;
+
+    & > svg {
+        height: 24px;
+        width: 24px;
+    }
+
+    &.navigation-icon-active {
+        display: none;
+    }
 }
 
 .options-item {
@@ -127,12 +146,17 @@
         background-color: @bg-color-hover;
     }
 
-    .options-icon {
+    .options-icon-wrapper {
         height: 24px;
         width: 24px;
-        font-size: 24px;
         padding-left: @spacing-1;
         padding-right: @spacing-1;
+
+        .options-icon[data-anv][data-anv] > svg {
+            height: 24px;
+            width: 24px;
+            color: @text-color;
+        }
     }
 
     .options-item-text {
@@ -143,24 +167,6 @@
     }
 }
 
-.options-popover-item-clickable {
-    cursor: pointer;
-
-    &:hover {
-        background-color: @color-neutral-60;
-    }
-}
-
-.options-popover-item-active {
-    background-color: @color-blue-100;
-    color: @color-blue-500;
-}
-
-.options-popover-item-inactive,
-.options-popover-item-active {
-    border-radius: @border-radius-1;
-}
-
 .divider {
     border-top: 1px solid @border-color;
     margin-left: 12px;

package/src/components/{side-navigation → left-navigation}/side-navigation.module.less.d.ts

@@ -1,16 +1,16 @@
 export const __esModule: true;
 export const divider: string;
 export const navigationIcon: string;
+export const navigationIconActive: string;
 export const navigationItem: string;
 export const navigationItemActive: string;
 export const navigationItemCounter: string;
+export const navigationItemIconState: string;
 export const navigationItemText: string;
 export const optionsIcon: string;
+export const optionsIconWrapper: string;
 export const optionsItem: string;
 export const optionsItemText: string;
-export const optionsPopoverItemActive: string;
-export const optionsPopoverItemClickable: string;
-export const optionsPopoverItemInactive: string;
 export const sideNav: string;
 export const sideNavBottom: string;
 export const sideNavContent: string;

package/src/components/left-navigation/side-navigation.stories.tsx

@@ -0,0 +1,46 @@
+import { ComponentType, useState } from 'react';
+import { NavLinkMock, items, withAnvil, withMemoryRouter } from '../../test/data.stories';
+import { SideNavigation } from './';
+
+const layout = (Story: ComponentType) => {
+    return (
+        <div className="d-f border" style={{ height: '800px' }}>
+            <Story />
+            <div className="flex-grow-1 flex-basis-0" />
+        </div>
+    );
+};
+export default {
+    title: 'Navigation/SideNavigation',
+    component: SideNavigation,
+    decorators: [layout, withMemoryRouter, withAnvil],
+    parameters: {},
+};
+
+export const DefaultSideNavigation = () => {
+    const [expanded, setExpanded] = useState(false);
+    return (
+        <SideNavigation
+            navigationComponent={NavLinkMock}
+            expanded={expanded}
+            onExpandedChange={setExpanded}
+            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,
+            ]}
+            itemsTop={[items.tasks]}
+        />
+    );
+};