@servicetitan/navigation 4.0.0 → 5.0.0

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

@@ -1,66 +1,57 @@
+import SvgHelp from '@servicetitan/anvil2/assets/icons/material/round/help_outline.svg';
+import SvgPhone from '@servicetitan/anvil2/assets/icons/material/round/phone.svg';
+import SvgSearch from '@servicetitan/anvil2/assets/icons/material/round/search.svg';
 import { Button, Popover } from '@servicetitan/design-system';
-import { useState } from 'react';
-import { NavLinkMock, withAnvil, withMemoryRouter } from '../../test/data.stories';
-import {
-    HeaderNavigation,
-    HeaderNavigationLink,
-    HeaderNavigationTrigger,
-    HeaderNavigationTriggerCustom,
-} from './';
+import { Fragment, useState } from 'react';
+import { withAnvil, withMemoryRouter } from '../../test/data';
+import { HeaderNavigationLink, HeaderNavigationTrigger } from '../links';
+import { HeaderNavigation } from './';
+
+const withHeaderNavigation = (Story: any) => (
+    <HeaderNavigation rightClassName="m-r-1">
+        <Story />
+    </HeaderNavigation>
+);
 
 export default {
-    title: 'Navigation/HeaderNavigationExtra',
+    title: 'Navigation/Extra/Legacy',
     component: HeaderNavigationLink,
-    decorators: [withMemoryRouter, withAnvil],
+    decorators: [withHeaderNavigation, withMemoryRouter, withAnvil],
     parameters: {},
 };
 
-const SvgIcon = undefined as any;
-
-export const extraLink = () => (
-    <HeaderNavigation items={[]} navigationComponent={NavLinkMock} rightClassName="m-r-1">
-        <HeaderNavigationLink
-            id="search"
-            to="https://google.com"
-            target="_blank"
-            iconName="search"
-            icon={SvgIcon}
-            iconActive={SvgIcon}
-            hint="Search: for all the questions"
-        />
-    </HeaderNavigation>
-);
-
-export const extraTrigger = () => (
-    <HeaderNavigation items={[]} navigationComponent={NavLinkMock} rightClassName="m-r-1">
-        <HeaderNavigationTrigger
-            id="dialpad"
-            iconName="phone"
-            counter={2}
-            tooltip="Phones pro"
-            icon={SvgIcon}
-            iconActive={SvgIcon}
-        />
-    </HeaderNavigation>
+export const ExtraLink = () => (
+    <HeaderNavigationLink
+        id="search"
+        to="https://google.com"
+        target="_blank"
+        iconName="search"
+        icon={SvgSearch}
+        iconActive={undefined}
+        hint="Search: for all the questions"
+    />
 );
 
-export const extraCustomTrigger = () => (
-    <HeaderNavigation items={[]} navigationComponent={NavLinkMock}>
-        <HeaderNavigationTriggerCustom id="help-center">
-            <HelpCenterButton />
-        </HeaderNavigationTriggerCustom>
-    </HeaderNavigation>
+export const ExtraTrigger = () => (
+    <HeaderNavigationTrigger
+        id="dialpad"
+        iconName="phone"
+        counter={2}
+        tooltip="Phones pro"
+        icon={SvgPhone}
+        iconActive={undefined}
+    />
 );
 
-export const extraWithTooltip = () => (
-    <HeaderNavigation items={[]} navigationComponent={NavLinkMock} rightClassName="m-r-1">
+export const ExtraWithTooltip = () => (
+    <Fragment>
         <HeaderNavigationLink
             id="search"
             to="https://google.com"
             target="_blank"
             iconName="search"
-            icon={SvgIcon}
-            iconActive={SvgIcon}
+            icon={SvgSearch}
+            iconActive={undefined}
             tooltip="Search: for all the questions"
             hint="Google"
         />
@@ -68,14 +59,14 @@ export const extraWithTooltip = () => (
         <HeaderNavigationTrigger
             id="dialpad"
             iconName="phone"
-            title="Dialpad"
+            hint="Dialpad"
             counter={2}
-            icon={SvgIcon}
-            iconActive={SvgIcon}
+            icon={SvgPhone}
+            iconActive={undefined}
         />
 
         <HelpCenterButton />
-    </HeaderNavigation>
+    </Fragment>
 );
 
 const HelpCenterButton = () => {
@@ -89,7 +80,7 @@ const HelpCenterButton = () => {
             width="xs"
             trigger={
                 <Button
-                    className="c-white"
+                    className="c-inherit"
                     iconName="help_outline"
                     fill="subtle"
                     onClick={() => setOpen(true)}
@@ -101,3 +92,44 @@ const HelpCenterButton = () => {
         </Popover>
     );
 };
+
+const HelpTrigger = () => {
+    const [active, setActive] = useState(true);
+
+    return (
+        <HeaderNavigationTrigger
+            id="help"
+            iconName="help_outline"
+            hint="Help"
+            icon={SvgHelp}
+            iconActive={undefined}
+            label="Live Chat"
+            onClick={() => setActive(!active)}
+            isActive={active}
+        />
+    );
+};
+export const ExtraWithLabel = () => (
+    <Fragment>
+        <HeaderNavigationLink
+            id="search"
+            to="https://google.com"
+            target="_blank"
+            iconName="search"
+            icon={SvgSearch}
+            iconActive={undefined}
+            tooltip="Search: for all the questions"
+            hint="Google"
+        />
+
+        <HelpTrigger />
+        <HeaderNavigationTrigger
+            id="dialpad"
+            iconName="phone"
+            hint="Dialpad"
+            counter={2}
+            icon={SvgPhone}
+            iconActive={undefined}
+        />
+    </Fragment>
+);

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

@@ -1,47 +1,11 @@
 import classNames from 'classnames';
-import { FC, HTMLAttributeAnchorTarget, ReactNode, useContext } from 'react';
-import { NavigationContext } from '../../utils/navigation-context';
+import { FC, ReactNode, useContext } from 'react';
+import { HeaderNavigationLinkProps, HeaderNavigationTriggerProps } from '../../utils/navigation';
+import { NavigationComponentContext } from '../../utils/navigation-context';
 import { withTooltip } from '../../utils/with-tooltip';
-import {
-    HeaderNavigationItemContent,
-    HeaderNavigationItemContentPropsStrict,
-} from './header-navigation-content';
+import { HeaderNavigationItemContent } from './header-navigation-content';
 import * as Styles from './header-navigation.module.less';
 
-export interface HeaderNavigationTriggerPropsStrict
-    extends Omit<HeaderNavigationItemContentPropsStrict, 'title' | 'isLegacy'> {
-    /** unique identifier */
-    id: string;
-    /** tooltip text */
-    tooltip?: string;
-    /** item description */
-    hint?: string;
-    /** container class name */
-    className?: string;
-    /** isActive */
-    isActive?: boolean;
-}
-
-interface HeaderNavigationTriggerProps extends HeaderNavigationTriggerPropsStrict {
-    /** unstrict props */
-    [key: string]: any;
-}
-
-export interface HeaderNavigationLinkPropsStrict
-    extends Omit<HeaderNavigationTriggerPropsStrict, 'isActive'> {
-    /** 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,
@@ -53,13 +17,13 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
     iconClassName,
     iconComponent,
     iconName,
-    icon,
-    iconActive,
     isActive,
+    label,
+    labelClassName,
     target,
     ...rest
 }) => {
-    const { NavigationComponent, isLegacy } = useContext(NavigationContext);
+    const NavigationComponent = useContext(NavigationComponentContext);
 
     return withTooltip(
         <NavigationComponent
@@ -71,7 +35,6 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
             title={hint}
             className={classNames(Styles.navigationLink, Styles.navigationItem, className, {
                 [Styles.navigationItemActive]: isActive === true,
-                [Styles.navigationItemIconState]: !!icon && !!iconActive,
             })}
             isActive={typeof isActive === 'function' ? isActive : undefined}
             activeClassName={Styles.navigationItemActive}
@@ -82,9 +45,8 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
                 iconComponent={iconComponent}
                 iconClassName={iconClassName}
                 iconName={iconName}
-                icon={icon}
-                iconActive={iconActive}
-                isLegacy={isLegacy}
+                title={label}
+                titleClassName={labelClassName}
             />
         </NavigationComponent>,
         tooltip
@@ -99,15 +61,13 @@ export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
     iconClassName,
     iconComponent,
     iconName,
-    icon,
-    iconActive,
     isActive,
+    label,
+    labelClassName,
     hint,
     tooltip,
     ...rest
 }) => {
-    const { isLegacy } = useContext(NavigationContext);
-
     return withTooltip(
         <div
             data-cy={`navigation-trigger-${id}`}
@@ -119,7 +79,6 @@ export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
                 Styles.navigationLink,
                 {
                     [Styles.navigationItemActive]: isActive === true,
-                    [Styles.navigationItemIconState]: !!icon && !!iconActive,
                 },
                 'cursor-pointer',
                 className
@@ -130,9 +89,8 @@ export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
                 iconComponent={iconComponent}
                 iconClassName={iconClassName}
                 iconName={iconName}
-                icon={icon}
-                iconActive={iconActive}
-                isLegacy={isLegacy}
+                title={label}
+                titleClassName={labelClassName}
             />
         </div>,
         tooltip

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

@@ -1,11 +1,12 @@
 import { Input, Stack } from '@servicetitan/design-system';
 import { FC, Fragment } from 'react';
-import { NavLinkMock, SearchIcon, items, withMemoryRouter } from '../../test/data.stories';
+import { SearchIcon, items, withMemoryRouter } from '../../test/data';
 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',
@@ -16,7 +17,7 @@ export default {
 
 const SvgIcon = undefined as any;
 
-export const defaultNavigation = () => (
+export const DefaultNavigation = () => (
     <HeaderNavigationStacked
         left={<LogoCompanyTitle className="m-l-1" fill="#fff" size="150" />}
         leftClassName="d-f align-items-center"
@@ -28,11 +29,10 @@ export const defaultNavigation = () => (
             items.dispatch,
             items.fleet,
         ]}
-        navigationComponent={NavLinkMock}
     />
 );
 
-export const withLogoTextAndOverflow = () => (
+export const WithLogoTextAndOverflow = () => (
     <HeaderNavigationStacked
         left={
             <Stack alignItems="center">
@@ -50,7 +50,6 @@ export const withLogoTextAndOverflow = () => (
             items.fleet,
         ]}
         itemsOverflow={[items.calls, items.accounting, items.purchasing, items.dispatch]}
-        navigationComponent={NavLinkMock}
     />
 );
 
@@ -60,7 +59,7 @@ const TimeZoneOffset: FC = () => (
     </div>
 );
 
-export const withAllMonolithData = () => (
+export const WithAllMonolithData = () => (
     <HeaderNavigationStacked
         left={<LogoCompanyTitle className="m-l-1" fill="#fff" size="150" />}
         leftClassName="d-f align-items-center"
@@ -80,7 +79,6 @@ export const withAllMonolithData = () => (
             items.pointOfSale,
             items.reports,
         ]}
-        navigationComponent={NavLinkMock}
         right={
             <Fragment>
                 <TimeZoneOffset />

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,86 +195,6 @@
     }
 }
 
-@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-icon-state.navigation-item-active {
-            .navigation-icon:not(.navigation-icon-active) {
-                display: none;
-            }
-
-            .navigation-icon.navigation-icon-active {
-                display: block;
-            }
-        }
-
-        .navigation-item-counter {
-            top: 4px;
-            right: -2px;
-        }
-    }
-}
-
 .navigation-icon {
     display: inline-block;
     color: inherit;
@@ -282,10 +204,6 @@
         width: 1em;
         font-size: 1em;
     }
-
-    &.navigation-icon-active {
-        display: none;
-    }
 }
 
 .navigation-item {

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

@@ -7,14 +7,11 @@ 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 navigationIconActive: string;
 export const navigationItem: string;
 export const navigationItemActive: string;
 export const navigationItemCounter: string;
 export const navigationItemCounterLong: string;
-export const navigationItemIconState: string;
 export const navigationItemMain: string;
 export const navigationItemOverflow: string;
 export const navigationItemTitle: string;

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

@@ -1,11 +1,12 @@
 import { Popover } from '@servicetitan/design-system';
 import { FC, useState } from 'react';
-import { NavLinkMock, SearchIcon, items, withMemoryRouter } from '../../test/data.stories';
+import { SearchIcon, items, withMemoryRouter } from '../../test/data';
 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',
@@ -15,7 +16,7 @@ export default {
 };
 const SvgIcon = undefined as any;
 
-export const defaultNavigation = () => (
+export const DefaultNavigation = () => (
     <HeaderNavigation
         left={<LogoCompanyTitle className="m-l-1" fill="#fff" />}
         items={[
@@ -26,11 +27,10 @@ export const defaultNavigation = () => (
             items.dispatch,
             items.fleet,
         ]}
-        navigationComponent={NavLinkMock}
     />
 );
 
-export const withLogoTextAndOverflow = () => (
+export const WithLogoTextAndOverflow = () => (
     <HeaderNavigation
         left={
             <LogoTitanText
@@ -49,7 +49,6 @@ export const withLogoTextAndOverflow = () => (
             items.fleet,
         ]}
         itemsOverflow={[items.calls, items.accounting, items.purchasing, items.dispatch]}
-        navigationComponent={NavLinkMock}
     />
 );
 
@@ -84,7 +83,7 @@ const TimeZoneOffset: FC = () => (
     </div>
 );
 
-export const withAllMonolithData = () => (
+export const WithAllMonolithData = () => (
     <HeaderNavigation
         left={<LogoCompanyTitle className="m-l-1" fill="#fff" />}
         items={[
@@ -103,7 +102,6 @@ export const withAllMonolithData = () => (
             items.pointOfSale,
             items.reports,
         ]}
-        navigationComponent={NavLinkMock}
     >
         <TimeZoneOffset />