@servicetitan/navigation 12.0.2 → 13.0.0-canary.256.299dd08.0

package/src/components/titan-layout/layout-sidebar.module.less

@@ -17,7 +17,6 @@
 
 // mobile version
 .nav-drawer {
-    // display: none;
     position: fixed;
     max-width: 400px;
     width: 0;
@@ -65,6 +64,24 @@
             margin-bottom: @spacing-half;
         }
     }
+
+    .nav-group-item {
+        .nav-item {
+            margin-right: 36px;
+
+            &.nav-item-active {
+                margin-right: @spacing-0;
+
+                .nav-item-icon-wrapper {
+                    padding-right: 40px;
+                }
+            }
+        }
+
+        .nav-item-group-toggle-wrapper {
+            right: @spacing-0;
+        }
+    }
 }
 
 .nav-drawer-backdrop {
@@ -184,19 +201,38 @@
     }
 
     .nav-top .divider {
-        margin-top: @spacing-1;
+        margin-top: @spacing-half;
         margin-bottom: @spacing-1;
     }
 
     .nav-main {
         padding-top: @spacing-1;
     }
+
+    .nav-group-item {
+        .nav-item {
+            margin-right: 44px;
+
+            &.nav-item-active {
+                margin-right: @spacing-1;
+
+                .nav-item-icon-wrapper {
+                    padding-right: 40px;
+                }
+            }
+        }
+
+        .nav-item-group-toggle-wrapper {
+            right: @spacing-1;
+        }
+    }
 }
 
 .nav-drawer,
 .nav-wide {
     .nav-item {
         flex-direction: row;
+        margin-bottom: @spacing-half;
 
         .nav-item-icon-wrapper {
             flex: 1;
@@ -355,26 +391,6 @@
         min-height: 12px !important;
     }
 
-    .nav-item-group-toggle-wrapper {
-        position: relative;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        .nav-item-group-toggle[data-anv][data-anv] {
-            color: inherit;
-            font-weight: @font-weight-semibold;
-        }
-
-        .nav-item-group-toggle-click {
-            position: absolute;
-            left: -@spacing-2;
-            right: -@spacing-half;
-            top: -@spacing-1;
-            bottom: -@spacing-1;
-        }
-    }
-
     .nav-icon[data-anv][data-anv] {
         height: 24px;
         width: 24px;
@@ -397,6 +413,42 @@
 .nav-group-wrapper {
     .nav-group-item {
         position: relative;
+
+        .nav-item {
+            .nav-item-counter[data-anv][data-anv] {
+                margin-right: @spacing-0;
+            }
+        }
+
+        &:has(.nav-item-active) {
+            .nav-item-group-toggle-wrapper {
+                color: @text-color-active;
+            }
+        }
+    }
+
+    .nav-item-group-toggle-wrapper {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        right: @spacing-0;
+        color: @text-color;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .nav-item-group-toggle[data-anv][data-anv] {
+            color: inherit;
+            font-weight: @font-weight-semibold;
+        }
+
+        .nav-item-group-toggle-click {
+            position: absolute;
+            left: -@spacing-2;
+            right: -@spacing-half;
+            top: -@spacing-1;
+            bottom: -@spacing-1;
+        }
     }
 
     .submenu-wrapper:not(.submenu-wrapper-collapsed) {

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

@@ -32,7 +32,7 @@ export interface LayoutSidebarProps {
     bottom?: ReactElement;
     mainItems?: NavigationItemData[];
     barExpanded: boolean;
-    submenuExpanded: string | undefined;
+    submenusExpanded: string[] | undefined;
     drawerOpened: boolean;
     mobile: boolean;
     navigationComponent: FC<NavLinkComponentProps>;
@@ -45,7 +45,7 @@ export const LayoutSidebar: FC<LayoutSidebarProps> = ({
     className,
     mobile,
     barExpanded,
-    submenuExpanded,
+    submenusExpanded,
     drawerOpened,
     onBarExpandChange,
     onSubmenuExpandChange,
@@ -95,22 +95,29 @@ export const LayoutSidebar: FC<LayoutSidebarProps> = ({
                             item.submenu ? (
                                 <SideNavigationGroupItem
                                     key={item.id}
+                                    item={item}
                                     barExpanded={mobile ? drawerOpened : barExpanded}
-                                    submenuExpanded={!!item.id && submenuExpanded === item.id}
+                                    submenuExpanded={
+                                        !!item.id && !!submenusExpanded?.includes(item.id)
+                                    }
                                     onSubmenuExpand={onSubmenuExpandChange}
                                     navigationComponent={navigationComponent}
-                                    {...item}
                                 />
                             ) : (
                                 <InternalSideNavigationLink
                                     key={item.id}
-                                    submenuExpanded={undefined}
-                                    navigationComponent={navigationComponent}
-                                    {...item}
+                                    id={item.id}
+                                    to={item.to}
+                                    title={item.title}
+                                    isActive={item.isActive}
+                                    icon={item.icon}
+                                    iconActive={item.iconActive}
+                                    className={item.className}
                                     tag={getSubmenuGroupTag(
                                         item.submenu,
                                         getCounterTag(item.counter, item.tag)
                                     )}
+                                    navigationComponent={navigationComponent}
                                 />
                             )
                         )}
@@ -170,24 +177,23 @@ const SideNavigationOptionsToggle: FC<{
     );
 
 /** Side Navigation menu item */
-const SideNavigationGroupItem: FC<
-    NavigationItemData & {
-        navigationComponent: FC<NavLinkComponentProps>;
-        barExpanded: boolean;
-        submenuExpanded: boolean;
-        onSubmenuExpand: undefined | ((id: string, expanded: boolean) => void);
-    }
-> = ({ onSubmenuExpand, barExpanded, submenuExpanded, ...props }) => {
+const SideNavigationGroupItem: FC<{
+    item: NavigationItemData;
+    navigationComponent: FC<NavLinkComponentProps>;
+    barExpanded: boolean;
+    submenuExpanded: boolean;
+    onSubmenuExpand: undefined | ((id: string, expanded: boolean) => void);
+}> = ({ item, onSubmenuExpand, barExpanded, submenuExpanded, navigationComponent }) => {
     const onExpandToggle = useCallback(
         (e: MouseEvent<never>) => {
             e.preventDefault();
             e.stopPropagation();
 
-            if (props.id) {
-                onSubmenuExpand?.(props.id, !submenuExpanded);
+            if (item.id) {
+                onSubmenuExpand?.(item.id, !submenuExpanded);
             }
         },
-        [props.id, submenuExpanded, onSubmenuExpand]
+        [item.id, submenuExpanded, onSubmenuExpand]
     );
     const {
         sidebar: {
@@ -195,19 +201,26 @@ const SideNavigationGroupItem: FC<
         },
     } = useTitanLayoutContext();
 
-    const tag = getSubmenuGroupTag(props.submenu, getCounterTag(props.counter, props.tag));
+    const tag = getSubmenuGroupTag(item.submenu, getCounterTag(item.counter, item.tag));
 
     return barExpanded ? (
         <InternalSideNavigationGroup
-            {...props}
+            id={item.id}
+            to={item.to}
+            title={item.title}
+            isActive={item.isActive}
+            icon={item.icon}
+            iconActive={item.iconActive}
+            className={item.className}
+            tag={tag}
             submenuExpanded={submenuExpanded}
             onExpandToggle={onExpandToggle}
-            tag={tag}
+            navigationComponent={navigationComponent}
         >
             <SideNavigationGroupContent
-                parentId={props.id}
-                groups={props.submenu?.groups ?? []}
-                navigationComponent={props.navigationComponent}
+                parentId={item.id}
+                groups={item.submenu?.groups ?? []}
+                navigationComponent={navigationComponent}
             />
         </InternalSideNavigationGroup>
     ) : (
@@ -216,9 +229,15 @@ const SideNavigationGroupItem: FC<
                 {(triggerProps: any) => (
                     <div {...triggerProps}>
                         <InternalSideNavigationLink
-                            {...props}
-                            submenuExpanded={undefined}
+                            id={item.id}
+                            to={item.to}
+                            title={item.title}
+                            isActive={item.isActive}
+                            icon={item.icon}
+                            iconActive={item.iconActive}
+                            className={item.className}
                             tag={tag}
+                            navigationComponent={navigationComponent}
                         />
                     </div>
                 )}
@@ -231,12 +250,12 @@ const SideNavigationGroupItem: FC<
                         size="small"
                         className="c-white m-b-half-i m-t-1"
                     >
-                        {props.title}
+                        {item.title}
                     </Text>
                     <SideNavigationGroupContent
-                        parentId={props.id}
-                        groups={props.submenu?.groups ?? []}
-                        navigationComponent={props.navigationComponent}
+                        parentId={item.id}
+                        groups={item.submenu?.groups ?? []}
+                        navigationComponent={navigationComponent}
                     />
                 </div>
             </Popover.Content>
@@ -270,7 +289,12 @@ const SideNavigationGroupContent: FC<
                     ...group.links.map((link, index) => (
                         <InternalSideNavigationGroupLink
                             key={`:${parentId}:${link.id}:${index}`}
-                            {...link}
+                            id={link.id}
+                            to={link.to}
+                            title={link.title}
+                            isActive={link.isActive}
+                            className={undefined}
+                            tag={getCounterTag(link.counter, link.tag)}
                             parentId={parentId}
                             navigationComponent={navigationComponent}
                         />

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} />