@servicetitan/navigation 12.0.2 → 13.0.0-canary.256.5761ed1.0

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

@@ -1,6 +1,6 @@
 import { FC, ReactElement } from 'react';
 import { getCounterTag } from '../../utils/side-nav';
-import { TitanLayoutSidebarLinkProps, TitanLayoutSidebarTriggerProps } from './interface';
+import { TitanLayoutLinkProps, TitanLayoutTriggerProps } from './interface';
 import { useTitanLayoutContext } from './layout-context';
 import {
     InternalSideNavigationLink,
@@ -10,62 +10,111 @@ import { useNotificationsContext } from './notifications-context';
 
 const WrappedLink: FC<{
     children: ReactElement<any>;
-    wrapper: NonNullable<TitanLayoutSidebarLinkProps['wrapper']>;
-}> = ({ children, wrapper: WrapperComponent }) => {
+    wrapper: NonNullable<TitanLayoutLinkProps['wrapper']>;
+    isMobile: boolean;
+}> = ({ children, isMobile, wrapper: WrapperComponent }) => {
     const { sidebar } = useTitanLayoutContext();
-    return <WrapperComponent context={sidebar}>{children}</WrapperComponent>;
+    return (
+        <WrapperComponent isMobile={isMobile} context={sidebar}>
+            {children}
+        </WrapperComponent>
+    );
 };
 
 /** Side Navigation menu link */
-export function TitanLayoutSidebarLink({ wrapper, ...props }: TitanLayoutSidebarLinkProps) {
+export function LayoutSidebarLink({
+    id,
+    to,
+    title,
+    isActive,
+    icon,
+    iconActive,
+    counter,
+    tag,
+    className,
+
+    tooltip,
+    wrapper,
+    extra,
+    side,
+    ...rest
+}: TitanLayoutLinkProps) {
     const {
         NavigationComponent,
         breakpoint: { isMobile },
     } = useTitanLayoutContext();
     const { onNotificationsUpdate } = useNotificationsContext();
-    const tag = getCounterTag(props.counter, props.tag);
+    const tagData = getCounterTag(side?.counter ?? counter, tag);
 
-    onNotificationsUpdate(props.id, !!tag);
+    onNotificationsUpdate(id, !!tagData);
 
     const element = (
         <InternalSideNavigationLink
-            {...props}
+            id={id}
+            to={to}
+            title={title}
+            isActive={isActive}
+            icon={icon}
+            iconActive={iconActive}
+            tag={tagData}
+            className={className}
+            {...rest}
             navigationComponent={NavigationComponent}
             submenuExpanded={undefined}
-            dataPrefix="navigation-item"
-            tag={tag}
         />
     );
 
-    return wrapper && !isMobile ? <WrappedLink wrapper={wrapper}>{element}</WrappedLink> : element;
+    return wrapper ? (
+        <WrappedLink isMobile={isMobile} wrapper={wrapper}>
+            {element}
+        </WrappedLink>
+    ) : (
+        element
+    );
 }
 
 /** Side Navigation menu trigger */
-export function TitanLayoutSidebarTrigger({
+export function LayoutSidebarTrigger({
+    id,
+    title,
+    isActive,
+    icon,
+    iconActive,
+    counter,
+    tag,
+    className,
+
+    tooltip,
     wrapper,
-    onMobileClick,
-    onClick,
-    ...props
-}: TitanLayoutSidebarTriggerProps) {
+    extra,
+    side,
+    ...rest
+}: TitanLayoutTriggerProps) {
     const {
         breakpoint: { isMobile },
     } = useTitanLayoutContext();
     const { onNotificationsUpdate } = useNotificationsContext();
-    const tag = getCounterTag(props.counter, props.tag);
+    const tagData = getCounterTag(side?.counter ?? counter, tag);
 
-    onNotificationsUpdate(props.id, !!tag);
+    onNotificationsUpdate(id, !!tagData);
 
     const element = (
         <InternalSideNavigationTrigger
-            {...props}
+            id={id}
+            title={title}
+            isActive={isActive}
+            icon={icon}
+            iconActive={iconActive}
+            tag={tagData}
+            className={className}
+            {...rest}
             submenuExpanded={undefined}
-            dataPrefix="navigation-trigger"
-            tag={tag}
-            onClick={isMobile && !!onMobileClick ? onMobileClick : onClick}
         />
     );
-    return wrapper && (!isMobile || !onMobileClick) ? (
-        <WrappedLink wrapper={wrapper}>{element}</WrappedLink>
+    return wrapper ? (
+        <WrappedLink isMobile={isMobile} wrapper={wrapper}>
+            {element}
+        </WrappedLink>
     ) : (
         element
     );

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

@@ -95,22 +95,28 @@ export const LayoutSidebar: FC<LayoutSidebarProps> = ({
                             item.submenu ? (
                                 <SideNavigationGroupItem
                                     key={item.id}
+                                    item={item}
                                     barExpanded={mobile ? drawerOpened : barExpanded}
                                     submenuExpanded={!!item.id && submenuExpanded === 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)
                                     )}
+                                    submenuExpanded={undefined}
+                                    navigationComponent={navigationComponent}
                                 />
                             )
                         )}
@@ -170,24 +176,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 +200,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 +228,16 @@ 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}
+                            submenuExpanded={undefined}
+                            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, 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.followUps,
+    navItems.inventory,
+
+    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,
@@ -315,30 +316,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 +327,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 +372,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 +400,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';