@servicetitan/navigation 12.0.3 → 13.0.0-canary.256.44cf055.0

package/src/components/titan-layout/{titan-layout.stories.tsx → titan-layout-default.stories.tsx}

@@ -6,68 +6,63 @@ import SvgSettings from '@servicetitan/anvil2/assets/icons/st/gnav_settings_inac
 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 { Page as Anvil1Page } from '@servicetitan/design-system';
-import { FC, Fragment, useState } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 import {
     CallsNavigationTrigger,
     LocationInfo,
     NavLinkMock,
-    items,
+    navItems,
     withAnvil,
     withDefaultRedirects,
     withMemoryRouter,
 } from '../../test/data';
-import { SideNavigationLinkWrapperProps } from '../left-navigation';
-import { HeaderNavigationLink, HeaderNavigationTrigger } from '../links';
-import { ProfileDropdown, TitanLayout, TitanLayoutProps, TitanLayoutState } from './';
-
-interface LayoutContentArgs {
-    header: boolean;
-    sideTop: boolean;
-    extraText: boolean;
-    search: boolean;
-    longContent: boolean;
-    wideContent: boolean;
-    minWidth: boolean;
-    emptyNav: boolean;
-}
+import {
+    LayoutContentArgs,
+    getDefaultArgs,
+    useDefaultLayoutProps,
+    withDefaultLayoutProps,
+} from '../../test/titan-layout';
+import {
+    ProfileDropdown,
+    TitanLayout,
+    TitanLayoutLinkWrapper,
+    TitanLayoutProps,
+    TitanLayoutState,
+} from './';
 
 export default {
-    title: 'Navigation/TitanLayout',
-    decorators: [withDefaultRedirects, withMemoryRouter, withAnvil],
+    title: 'Navigation/TitanLayout/Default',
+    decorators: [
+        withDefaultLayoutProps({ navVariant: 'left' }),
+        withDefaultRedirects,
+        withMemoryRouter,
+        withAnvil,
+    ],
     parameters: {},
     argTypes: {},
-    args: {
-        header: true,
-        sideTop: true,
-        extraText: true,
-        search: true,
-        longContent: true,
-        wideContent: false,
-        minWidth: false,
-        emptyNav: false,
-    } as LayoutContentArgs,
+    args: getDefaultArgs(),
 };
 
 const mainNavItems = [
-    items.dashboard,
-    items.calendar,
-    items.calls,
-    items.accountingWithSubmenu,
-    items.dispatch,
-
-    items.fleet,
-    items.followUps,
-    items.inventory,
-
-    items.marketing,
-    items.priceBook,
-    items.pointOfSale,
-    items.reports,
+    navItems.dashboard,
+    navItems.calendar,
+    navItems.calls,
+    navItems.accountingWithSubmenu,
+    navItems.dispatch,
+
+    navItems.fleet,
+    navItems.followUpsWithSubmenu,
+    navItems.purchasingWithSubmenu,
+
+    navItems.marketing,
+    navItems.priceBook,
+    navItems.pointOfSale,
+    navItems.reports,
 ];
 
 const overflowNavItems = [
-    { ...items.accounting, id: 'accounting-overflow', title: 'Other Accounting' },
-    { ...items.reports, id: 'reports-overflow', title: 'Other Reports' },
+    { ...navItems.accounting, id: 'accounting-overflow', title: 'Other Accounting' },
+    { ...navItems.reports, id: 'reports-overflow', title: 'Other Reports' },
 ];
 
 const profile = (
@@ -101,14 +96,22 @@ const profile = (
     </ProfileDropdown>
 );
 
+const profileEmpty = (
+    <ProfileDropdown>
+        <ProfileDropdown.Link id="sign-out" to="/sign-out">
+            sign out
+        </ProfileDropdown.Link>
+        <ProfileDropdown.Divider />
+    </ProfileDropdown>
+);
+
 const extraLinks = (
     <Fragment>
-        <HeaderNavigationLink
+        <TitanLayout.Link
             id="search"
             to="https://google.com"
             target="_blank"
             title="Search"
-            hint="Search: for all the questions"
             tooltip="Search"
             icon={SvgSearch}
             iconActive={SvgSearch}
@@ -116,7 +119,7 @@ const extraLinks = (
 
         <CallsNavigationTrigger />
 
-        <HeaderNavigationLink
+        <TitanLayout.Link
             id="titanAdvisor"
             to="/titanAdvisor"
             title="Titan Advisor"
@@ -124,13 +127,12 @@ const extraLinks = (
             iconActive={SvgRocketActive}
         />
 
-        <HeaderNavigationLink
+        <TitanLayout.Link
             id="settings"
             to="/settings"
             title="Settings"
             target="_blank"
-            aria-label="search"
-            hint="Settings"
+            aria-label="settings"
             icon={SvgSettings}
             iconActive={SvgSettingsActive}
         />
@@ -138,7 +140,7 @@ const extraLinks = (
 );
 
 const extraLinksTop = (
-    <HeaderNavigationTrigger
+    <TitanLayout.Trigger
         id="atlas"
         title="Atlas"
         icon={SvgAtlas}
@@ -149,7 +151,7 @@ const extraLinksTop = (
     />
 );
 
-const SideLinkPopoverWrapper: FC<SideNavigationLinkWrapperProps> = ({ children, context }) => {
+const SideLinkPopoverWrapper: TitanLayoutLinkWrapper = ({ children, context }) => {
     return (
         <Popover placement="right" openOnHover>
             <Popover.Trigger>{(props: any) => <div {...props}>{children}</div>}</Popover.Trigger>
@@ -159,14 +161,13 @@ const SideLinkPopoverWrapper: FC<SideNavigationLinkWrapperProps> = ({ children,
 };
 
 const sidebarTop = () => [
-    <TitanLayout.Link key="tasks" {...items.tasks} />,
-    <TitanLayout.Link key="calls" {...items.calls} />,
+    <TitanLayout.Link key="tasks" {...navItems.tasks} />,
+    <TitanLayout.Link key="calls" {...navItems.calls} />,
     <TitanLayout.Trigger
         key="marketing"
-        {...items.marketing}
+        {...navItems.marketing}
         isActive={false}
         wrapper={SideLinkPopoverWrapper}
-        onMobileClick={() => alert('clicked')}
         counter={50}
     />,
 ];
@@ -204,7 +205,7 @@ const useLayoutProps = (args: LayoutContentArgs): TitanLayoutProps => {
 
         navigationComponent: NavLinkMock,
         navigationMainItems: args.emptyNav ? [] : mainNavItems,
-        navigationOverflowItems: args.emptyNav ? [] : overflowNavItems,
+        navigationOverflowItems: args.emptyNav || !args.overflowItems ? [] : overflowNavItems,
 
         profile,
         top: args.search ? <SearchBar /> : undefined,
@@ -223,10 +224,15 @@ const useLayoutProps = (args: LayoutContentArgs): TitanLayoutProps => {
 };
 
 const Content = (args: LayoutContentArgs) => {
+    const [info, setInfo] = useState('');
+    useEffect(() => {
+        setInfo(new Date().toLocaleTimeString());
+    }, []);
     return (
         <Fragment>
             <LocationInfo className="m-b-3" />
-            <div className="m-b-3">rendered - {new Date().toLocaleTimeString()}</div>
+            <div className="m-b-3">component rendered - {info}</div>
+            <div className="m-b-3">rerendered - {new Date().toLocaleTimeString()}</div>
             {args.wideContent && (
                 <div style={{ width: '1200px' }}>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
@@ -315,30 +321,8 @@ const Content = (args: LayoutContentArgs) => {
     );
 };
 
-export const TitanLayoutLegacy = (args: LayoutContentArgs) => (
-    <TitanLayout {...useLayoutProps(args)} appearance="legacy">
-        <div
-            className="p-3"
-            style={{ position: 'absolute', width: 'calc(100% - var(--nav-offset-left))' }}
-        >
-            <Content {...args} />
-        </div>
-    </TitanLayout>
-);
-
-export const TitanLayoutLegacyTopNav = (args: LayoutContentArgs) => (
-    <TitanLayout {...useLayoutProps(args)} appearance="legacy" navVariant="top">
-        <div
-            className="p-3"
-            style={{ position: 'absolute', width: 'calc(100% - var(--nav-offset-left))' }}
-        >
-            <Content {...args} />
-        </div>
-    </TitanLayout>
-);
-
-export const TitanLayoutLegacyTop = (args: LayoutContentArgs) => (
-    <TitanLayout {...useLayoutProps(args)} appearance="legacy" navVariant="top" top={undefined}>
+export const ContentLegacy = (args: LayoutContentArgs) => (
+    <TitanLayout {...useLayoutProps(args)} appearance="legacy" {...useDefaultLayoutProps()}>
         <div
             className="p-3"
             style={{ position: 'absolute', width: 'calc(100% - var(--nav-offset-left))' }}
@@ -348,46 +332,43 @@ export const TitanLayoutLegacyTop = (args: LayoutContentArgs) => (
     </TitanLayout>
 );
 
-export const TitanLayoutAnvil1 = (args: LayoutContentArgs) => (
-    <TitanLayout {...useLayoutProps(args)} appearance="anvil1">
+export const ContentAnvil1 = (args: LayoutContentArgs) => (
+    <TitanLayout {...useLayoutProps(args)} appearance="anvil1" {...useDefaultLayoutProps()}>
         <Anvil1Page>
             <Content {...args} />
         </Anvil1Page>
     </TitanLayout>
 );
 
-export const TitanLayoutAnvil1TopNav = (args: LayoutContentArgs) => (
-    <TitanLayout {...useLayoutProps(args)} appearance="anvil1" navVariant="top">
-        <Anvil1Page>
-            <Content {...args} />
-        </Anvil1Page>
+export const ContentAnvil2 = (args: LayoutContentArgs) => (
+    <TitanLayout {...useLayoutProps(args)} appearance="anvil2" {...useDefaultLayoutProps()}>
+        <Anvil2Page>
+            <Anvil2Page.Content>
+                <Content {...args} />
+            </Anvil2Page.Content>
+        </Anvil2Page>
     </TitanLayout>
 );
 
-export const TitanLayoutAnvil1Top = (args: LayoutContentArgs) => (
+export const ExtraWithTitle = (args: LayoutContentArgs) => (
     <TitanLayout
         {...useLayoutProps(args)}
-        appearance="anvil1"
-        navVariant="top"
-        top={undefined}
-        navigationOverflowItems={undefined}
+        appearance="anvil2"
+        profile={profileEmpty}
+        sideTop={undefined}
+        navigationMainItems={[navItems.projects]}
+        extraLinks={
+            <TitanLayout.Link
+                id="search"
+                to="/search"
+                title="Search"
+                icon={SvgSearch}
+                iconActive={SvgSearch}
+                extra={{ showTitle: true }}
+            />
+        }
+        {...useDefaultLayoutProps()}
     >
-        <Anvil1Page>
-            <Content {...args} />
-        </Anvil1Page>
-    </TitanLayout>
-);
-
-export const TitanLayoutAnvil1TopOverflow = (args: LayoutContentArgs) => (
-    <TitanLayout {...useLayoutProps(args)} appearance="anvil1" navVariant="top" top={undefined}>
-        <Anvil1Page>
-            <Content {...args} />
-        </Anvil1Page>
-    </TitanLayout>
-);
-
-export const TitanLayoutAnvil2 = (args: LayoutContentArgs) => (
-    <TitanLayout {...useLayoutProps(args)} appearance="anvil2">
         <Anvil2Page>
             <Anvil2Page.Content>
                 <Content {...args} />
@@ -396,8 +377,26 @@ export const TitanLayoutAnvil2 = (args: LayoutContentArgs) => (
     </TitanLayout>
 );
 
-export const TitanLayoutAnvil2TopNav = (args: LayoutContentArgs) => (
-    <TitanLayout {...useLayoutProps(args)} appearance="anvil2" navVariant="top">
+export const ExtraWithFlashing = (args: LayoutContentArgs) => (
+    <TitanLayout
+        {...useLayoutProps(args)}
+        appearance="anvil2"
+        profile={profileEmpty}
+        sideTop={undefined}
+        navigationMainItems={[navItems.projects]}
+        extraLinks={
+            <TitanLayout.Link
+                id="search"
+                to="/search"
+                title="Search"
+                icon={SvgSearch}
+                iconActive={SvgSearch}
+                extra={{ flashing: true }}
+                side={{ counter: true }}
+            />
+        }
+        {...useDefaultLayoutProps()}
+    >
         <Anvil2Page>
             <Anvil2Page.Content>
                 <Content {...args} />
@@ -406,8 +405,26 @@ export const TitanLayoutAnvil2TopNav = (args: LayoutContentArgs) => (
     </TitanLayout>
 );
 
-export const TitanLayoutAnvil2Top = (args: LayoutContentArgs) => (
-    <TitanLayout {...useLayoutProps(args)} appearance="anvil2" navVariant="top" top={undefined}>
+export const ExtraWithTitleFlashing = (args: LayoutContentArgs) => (
+    <TitanLayout
+        {...useLayoutProps(args)}
+        appearance="anvil2"
+        profile={profileEmpty}
+        sideTop={undefined}
+        navigationMainItems={[navItems.projects]}
+        extraLinks={
+            <TitanLayout.Link
+                id="search"
+                to="/search"
+                title="Search"
+                icon={SvgSearch}
+                iconActive={SvgSearch}
+                extra={{ showTitle: true, flashing: true }}
+                side={{ counter: true }}
+            />
+        }
+        {...useDefaultLayoutProps()}
+    >
         <Anvil2Page>
             <Anvil2Page.Content>
                 <Content {...args} />

package/src/components/titan-layout/titan-layout-legacy.stories.tsx

@@ -0,0 +1,24 @@
+import { withAnvil, withDefaultRedirects, withMemoryRouter } from '../../test/data';
+import { getDefaultArgs, withDefaultLayoutProps } from '../../test/titan-layout';
+
+export default {
+    title: 'Navigation/TitanLayout/Legacy',
+    decorators: [
+        withDefaultLayoutProps({ navVariant: 'top', top: undefined }),
+        withDefaultRedirects,
+        withMemoryRouter,
+        withAnvil,
+    ],
+    parameters: {},
+    argTypes: {},
+    args: getDefaultArgs(),
+};
+
+export {
+    ContentLegacy,
+    ContentAnvil1,
+    ContentAnvil2,
+    ExtraWithTitle,
+    ExtraWithFlashing,
+    ExtraWithTitleFlashing,
+} from './titan-layout-default.stories';

package/src/components/titan-layout/titan-layout-links.tsx

@@ -0,0 +1,34 @@
+import { FC } from 'react';
+
+import { TitanLayoutLinkProps, TitanLayoutTriggerProps } from './interface';
+import { useTitanLayoutPlacementContext } from './layout-context';
+import { LayoutHeaderNavigationLink, LayoutHeaderNavigationTrigger } from './layout-header-links';
+import { LayoutSidebarLink, LayoutSidebarTrigger } from './layout-sidebar-links';
+
+export const TitanLayoutLink: FC<TitanLayoutLinkProps> = props => {
+    const placement = useTitanLayoutPlacementContext();
+
+    if (placement === 'top') {
+        return <LayoutHeaderNavigationLink {...props} />;
+    }
+
+    if (placement === 'side') {
+        return <LayoutSidebarLink {...props} />;
+    }
+
+    return null;
+};
+
+export const TitanLayoutTrigger: FC<TitanLayoutTriggerProps> = props => {
+    const placement = useTitanLayoutPlacementContext();
+
+    if (placement === 'top') {
+        return <LayoutHeaderNavigationTrigger {...props} />;
+    }
+
+    if (placement === 'side') {
+        return <LayoutSidebarTrigger {...props} />;
+    }
+
+    return null;
+};

package/src/components/titan-layout/titan-layout-stacked.stories.tsx

@@ -0,0 +1,30 @@
+import { TextField } from '@servicetitan/anvil2';
+
+import { withAnvil, withDefaultRedirects, withMemoryRouter } from '../../test/data';
+import { getDefaultArgs, withDefaultLayoutProps } from '../../test/titan-layout';
+
+const SearchBar = () => (
+    <TextField size="small" placeholder="Search" className="w-100-i m-x-half-i" />
+);
+
+export default {
+    title: 'Navigation/TitanLayout/Stacked',
+    decorators: [
+        withDefaultLayoutProps({ navVariant: 'top', top: <SearchBar /> }),
+        withDefaultRedirects,
+        withMemoryRouter,
+        withAnvil,
+    ],
+    parameters: {},
+    argTypes: {},
+    args: getDefaultArgs(),
+};
+
+export {
+    ContentLegacy,
+    ContentAnvil1,
+    ContentAnvil2,
+    ExtraWithTitle,
+    ExtraWithFlashing,
+    ExtraWithTitleFlashing,
+} from './titan-layout-default.stories';

package/src/components/titan-layout/titan-layout.tsx

@@ -4,6 +4,7 @@ import {
     ComponentPropsWithoutRef,
     FC,
     Fragment,
+    MouseEvent,
     ReactElement,
     ReactNode,
     useCallback,
@@ -26,9 +27,9 @@ import { LayoutHeader } from './layout-header';
 import { LayoutHeaderDark } from './layout-header-dark';
 import { TitanLayoutLogoProps } from './layout-logo';
 import { LayoutSidebar } from './layout-sidebar';
-import { TitanLayoutSidebarLink, TitanLayoutSidebarTrigger } from './layout-sidebar-links';
 import { InternalSideNavigationTrigger } from './layout-sidebar-links-internal';
 import { useNotificationsState } from './notifications-context';
+import { TitanLayoutLink, TitanLayoutTrigger } from './titan-layout-links';
 import * as Styles from './titan-layout.module.less';
 
 export type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'style'> & {
@@ -92,7 +93,7 @@ const useAppearance = (appearance: TitanLayoutProps['appearance']) =>
         };
     }, [appearance]);
 
-const TitanLayoutComponent: FC<TitanLayoutProps> = ({
+function TitanLayoutComponent({
     appearance = 'anvil2',
     navVariant = 'left',
     id,
@@ -112,7 +113,7 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
     extraText,
     minContentWidth,
     sideTop,
-}) => {
+}: TitanLayoutProps) {
     const breakpoint = useTitanBreakpoint();
     const context: TitanLayoutContextType = useMemo(
         () => ({
@@ -148,10 +149,18 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
         }
     }, [view.isAnvil1]);
 
-    const onBurgerClick = useCallback((e: MouseEvent) => {
-        setMobileDrawerOpened(true);
-        e.stopPropagation();
-    }, []);
+    const onBurgerClick = useCallback(
+        (e: MouseEvent<never>) => {
+            if (isMobile) {
+                setMobileDrawerOpened(true);
+            } else {
+                onStateChange?.({ navCollapsed: !state?.navCollapsed });
+            }
+
+            e.stopPropagation();
+        },
+        [isMobile, state?.navCollapsed, onStateChange]
+    );
 
     const onBarExpandChange = useCallback(
         (expanded: boolean) => {
@@ -167,7 +176,10 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
         (id: string, expanded: boolean) => {
             onStateChange?.({
                 navCollapsed: state?.navCollapsed ?? false,
-                submenuExpanded: expanded ? id : undefined,
+                submenusExpanded: [
+                    ...(state?.submenusExpanded ?? []).filter(i => i !== id),
+                    ...(expanded ? [id] : []),
+                ],
             });
         },
         [state, onStateChange]
@@ -271,7 +283,17 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
                                     </Fragment>
                                 }
                                 isMobile={isMobile}
-                                hasNotifications={hasNotifications || hasMenuNotifications}
+                                hasNotifications={
+                                    isMobile && (hasNotifications || hasMenuNotifications)
+                                }
+                                hasBurger={hasSideBar}
+                                burgerTooltip={
+                                    isMobile
+                                        ? undefined
+                                        : state?.navCollapsed
+                                          ? 'Expand'
+                                          : 'Collapse'
+                                }
                                 onBurgerClick={onBurgerClick}
                             />
                         ) : (
@@ -290,6 +312,7 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
                                 isMobile={isMobile}
                                 hasNotifications={hasNotifications || hasMenuNotifications}
                                 onBurgerClick={onBurgerClick}
+                                hasBurger={isMobile}
                                 navigationMainItems={navigationMainItems}
                                 navigationOverflowItems={navigationOverflowItems}
                             />
@@ -302,7 +325,7 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
                                 mobile={breakpoint.isMobile}
                                 barExpanded={!state?.navCollapsed}
                                 onBarExpandChange={onBarExpandChange}
-                                submenuExpanded={state?.submenuExpanded}
+                                submenusExpanded={state?.submenusExpanded}
                                 onSubmenuExpandChange={onSubmenuExpandChange}
                                 drawerOpened={mobileDrawerOpened}
                                 onDrawerOpenChange={setMobileDrawerOpened}
@@ -318,10 +341,11 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
                                                 <InternalSideNavigationTrigger
                                                     id="--extra-text"
                                                     title={extraText}
-                                                    submenuExpanded={undefined}
-                                                    tag={undefined}
+                                                    isActive={undefined}
                                                     icon={undefined}
                                                     iconActive={undefined}
+                                                    tag={undefined}
+                                                    className={undefined}
                                                 />
                                             )}
                                         </Fragment>
@@ -351,7 +375,7 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
             </LayoutPlacementContext.Provider>
         </LayoutContext.Provider>
     );
-};
+}
 
 const TitanLayoutHeaderObserved: FC<{
     children: ReactNode;
@@ -445,6 +469,6 @@ const LayoutContentLegacy: FC<{
 };
 
 export const TitanLayout = Object.assign(TitanLayoutComponent, {
-    Link: TitanLayoutSidebarLink,
-    Trigger: TitanLayoutSidebarTrigger,
+    Link: TitanLayoutLink,
+    Trigger: TitanLayoutTrigger,
 });

package/src/index.ts

@@ -1,19 +1,8 @@
-export * from './components/header-navigation';
 export * from './components/logo/logo-company-title';
 export * from './components/logo/logo-titan';
 export * from './components/logo/logo-titan-text';
 export * from './components/counter-tag';
-export * from './components/left-navigation';
 export * from './components/titan-layout';
-export * from './components/links';
 export type * from './utils/navigation';
-export type {
-    NavLinkComponentPropsStrict,
-    NavLinkComponentProps,
-    NavigationLocationContextType,
-    NavigationLocationInfo,
-    NavigationActiveLinkMatcher,
-} from './utils/navigation-context';
-export { NavigationComponentContext, NavigationLocationContext } from './utils/navigation-context';
-export type * from './utils/navigation-legacy';
+export type { NavLinkComponentProps } from './utils/navigation-context';
 export * from './utils/use-breakpoint';