@servicetitan/navigation 11.0.0-canary.237.ff793b3.0 → 11.1.0

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

@@ -1,31 +1,119 @@
 import { Chip } from '@servicetitan/anvil2';
-import { ReactElement } from 'react';
 import { withAnvil, withDefaultRedirects, withMemoryRouter } from '../../test/data';
-import { TitanLayoutLogo, TitanLayoutLogoProps } from './layout-logo';
-import { TitanLayout } from './titan-layout';
+import { LayoutLogo, TitanLayoutLogoProps } from './layout-logo';
+import { TitanLayout, TitanLayoutProps } from './titan-layout';
 
-const withTitanLayout = (element: ReactElement<TitanLayoutLogoProps>) => () => (
-    <TitanLayout navigationMainItems={[]}>
-        {element}
-        <TitanLayout.Content>logo</TitanLayout.Content>
-    </TitanLayout>
+const withTitanLayout = (logo: TitanLayoutLogoProps, layoutProps?: TitanLayoutProps) => () => (
+    <TitanLayout navigationMainItems={[]} {...layoutProps} logo={logo} />
 );
 
 export default {
     title: 'Navigation/TitanLayoutLogo',
-    component: TitanLayoutLogo,
+    component: LayoutLogo,
     decorators: [withDefaultRedirects, withMemoryRouter, withAnvil],
     parameters: {},
 };
 
-export const LogoDefault = withTitanLayout(<TitanLayoutLogo />);
+export const LogoTinyDefault = withTitanLayout({});
 
-export const LogoCompanyTitle = withTitanLayout(<TitanLayoutLogo title />);
+export const LogoTinyCompanyTitle = withTitanLayout({ title: true });
 
-export const LogoCommercial = withTitanLayout(
-    <TitanLayoutLogo title="Commercial" mantleFill="#2270EE" />
+export const LogoTinyCommercial = withTitanLayout({ title: 'Commercial', mantleFill: '#2270EE' });
+
+export const LogoTinyWithPostfix = withTitanLayout({
+    title: true,
+    postfix: <Chip size="small" label="demo" />,
+});
+
+export const LogoTinyCommercialWithPostfix = withTitanLayout({
+    title: 'Commercial',
+    mantleFill: '#2270EE',
+    postfix: <Chip size="small" label="demo" />,
+});
+
+export const LogoStackedDefault = withTitanLayout(
+    {},
+    {
+        navVariant: 'top',
+        top: <div />,
+    }
+);
+export const LogoStackedCompanyTitle = withTitanLayout(
+    { title: true },
+    {
+        navVariant: 'top',
+        top: <div />,
+    }
+);
+
+export const LogoStackedCommercial = withTitanLayout(
+    { title: 'Commercial', mantleFill: '#2270EE' },
+    {
+        navVariant: 'top',
+        top: <div />,
+    }
+);
+
+export const LogoStackedWithPostfix = withTitanLayout(
+    {
+        title: true,
+        postfix: <Chip size="small" label="demo" />,
+    },
+    {
+        navVariant: 'top',
+        top: <div />,
+    }
+);
+
+export const LogoStackedCommercialWithPostfix = withTitanLayout(
+    {
+        title: 'Commercial',
+        mantleFill: '#2270EE',
+        postfix: <Chip size="small" label="demo" />,
+    },
+    {
+        navVariant: 'top',
+        top: <div />,
+    }
+);
+
+export const LogoDarkDefault = withTitanLayout(
+    {},
+    {
+        navVariant: 'top',
+    }
+);
+export const LogoDarkCompanyTitle = withTitanLayout(
+    { title: true },
+    {
+        navVariant: 'top',
+    }
+);
+
+export const LogoDarkCommercial = withTitanLayout(
+    { title: 'Commercial', mantleFill: '#2270EE' },
+    {
+        navVariant: 'top',
+    }
+);
+
+export const LogoDarkWithPostfix = withTitanLayout(
+    {
+        title: true,
+        postfix: <Chip size="small" label="demo" />,
+    },
+    {
+        navVariant: 'top',
+    }
 );
 
-export const LogoWithPostfix = withTitanLayout(
-    <TitanLayoutLogo title postfix={<Chip className="m-l-2-i" label="demo" />} />
+export const LogoDarkCommercialWithPostfix = withTitanLayout(
+    {
+        title: 'Commercial',
+        mantleFill: '#2270EE',
+        postfix: <Chip size="small" label="demo" />,
+    },
+    {
+        navVariant: 'top',
+    }
 );

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

@@ -1,64 +1,61 @@
 import classNames from 'classnames';
 import { FC, Fragment, ReactNode } from 'react';
 import { LogoCompanyTitle } from '../logo/logo-company-title';
-import { LogoTitan, LogoTitanTitle, WrapperProps } from '../logo/logo-titan-text';
+import { LogoTitanSvg } from '../logo/logo-titan';
+import { LogoTitanTitle, WrapperProps } from '../logo/logo-titan-text';
 import { useTitanLayoutContext } from './layout-context';
+import * as Styles from './layout-header.module.less';
 
 export interface TitanLayoutLogoProps {
-    /** container class name */
-    className?: string;
-
     title?: string | boolean;
-
     postfix?: ReactNode;
-
     logoWrapper?: WrapperProps;
-
     mantleFill?: string;
+    to?: string;
 }
 
 const EmptyWrapper: FC<any> = ({ children }) => children;
 
-export const TitanLayoutLogo: FC<TitanLayoutLogoProps> = ({
-    className,
-    mantleFill,
-    postfix,
-    title,
-    logoWrapper = EmptyWrapper,
-}) => {
+export const isLogoCompany = (props: TitanLayoutLogoProps | undefined, isMobile: boolean) =>
+    props?.title === true && !isMobile;
+export const isLogoCustom = (props: TitanLayoutLogoProps | undefined, isMobile: boolean) =>
+    !isLogoCompany(props, isMobile) && !!props?.mantleFill;
+export const isLogoText = (props: TitanLayoutLogoProps | undefined, isMobile: boolean) =>
+    typeof props?.title === 'string' && !isMobile;
+
+export const LayoutLogo: FC<TitanLayoutLogoProps> = props => {
     const {
+        NavigationComponent,
         breakpoint: { isMobile },
     } = useTitanLayoutContext();
-
-    const Wrapper = logoWrapper;
-    const logoSize = isMobile ? 44 : 56;
-    const logoCompanySize = 48;
-    const showCompanyTitle = title === true && !isMobile;
+    const Wrapper: FC<any> = props.to ? NavigationComponent : EmptyWrapper;
+    const showCompanyTitle = isLogoCompany(props, isMobile);
 
     return (
-        <div
-            className={classNames(
-                'd-f align-items-center',
-                { 'p-t-half': showCompanyTitle },
-                className
-            )}
-        >
+        <div className={classNames(Styles.logo)} data-cy="navigation-left">
             {showCompanyTitle ? (
-                <Wrapper>
-                    <LogoCompanyTitle height={logoCompanySize} />
-                </Wrapper>
-            ) : typeof title === 'string' ? (
+                <div className={Styles.logoCompanyWrapper}>
+                    <Wrapper to={props.to}>
+                        <LogoCompanyTitle />
+                    </Wrapper>
+                </div>
+            ) : (
                 <Fragment>
-                    <LogoTitan size={logoSize} mantleFill={mantleFill} logoWrapper={Wrapper} />
-                    {!isMobile && (
-                        <LogoTitanTitle className="c-inherit m-l-1">{title}</LogoTitanTitle>
+                    <div className={Styles.logoShortWrapper}>
+                        <Wrapper to={props.to}>
+                            <LogoTitanSvg mantleFill={props.mantleFill} />
+                        </Wrapper>
+                    </div>
+
+                    {isLogoText(props, isMobile) && (
+                        <LogoTitanTitle className={Styles.logoTitle}>{props.title}</LogoTitanTitle>
                     )}
                 </Fragment>
-            ) : (
-                <LogoTitan size={logoSize} mantleFill={mantleFill} logoWrapper={Wrapper} />
             )}
 
-            {!isMobile && postfix}
+            {!isMobile && props.postfix && (
+                <div className={Styles.logoPostfix}>{props.postfix}</div>
+            )}
         </div>
     );
 };

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

@@ -5,7 +5,7 @@ import { TitanLayout } from './titan-layout';
 
 const withTitanLayout = (element: ReactElement) => () => (
     <TitanLayout navigationMainItems={[]} profile={element}>
-        <TitanLayout.Content>profile</TitanLayout.Content>
+        profile
     </TitanLayout>
 );
 

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

@@ -25,18 +25,28 @@ export type {
     ProfileDropdownLinkProps,
 } from '../profile-dropdown/profile-dropdown';
 
-const ExternalNavComponent: FC<NavLinkComponentProps> = ({ children, isActive, ...props }) => (
-    <a {...props}>{children}</a>
+const ExternalNavComponent: FC<NavLinkComponentProps> = ({
+    children,
+    isActive,
+    to,
+    activeClassName,
+    ...props
+}) => (
+    <a {...props} href={to}>
+        {children}
+    </a>
 );
 
 const ProfileDropdownContent: FC<ProfileDropdownProps> = props => {
-    const { breakpoint, NavigationComponent } = useTitanLayoutContext();
+    const { isTitanLayout, breakpoint, NavigationComponent } = useTitanLayoutContext();
     return breakpoint.isMobile ? (
         <MobileProfileDropdown {...props} navigationComponent={NavigationComponent} />
-    ) : (
+    ) : isTitanLayout ? (
         <NavigationComponentContext.Provider value={NavigationComponent}>
             <DesktopProfileDropdown {...props} />
         </NavigationComponentContext.Provider>
+    ) : (
+        <DesktopProfileDropdown {...props} />
     );
 };
 ProfileDropdownContent.displayName = 'ProfileDropdown';
@@ -88,18 +98,25 @@ const ProfileDropdownDivider: FC = () => {
     );
 };
 
-const getText = (props: any): string | undefined => {
-    if (typeof props.children === 'string') {
-        return props.children;
+const getText = (children: any, text: any): string | undefined => {
+    if (typeof children === 'string') {
+        return children;
     }
 
-    if (typeof props.text === 'string') {
-        return props.text;
+    if (typeof text === 'string') {
+        return text;
     }
 
     return undefined;
 };
 
+const getTag = (
+    tag: ProfileDropdownLinkProps['tag'],
+    counter: ProfileDropdownLinkProps['counter']
+): boolean => {
+    return !!tag?.value || !!counter;
+};
+
 const ProfileDropdownSection: FC<ProfileDropdownSectionProps> = props => {
     const { breakpoint } = useTitanLayoutContext();
     return breakpoint.isMobile ? (
@@ -108,10 +125,19 @@ const ProfileDropdownSection: FC<ProfileDropdownSectionProps> = props => {
         <DesktopProfileDropdown.Section {...props} />
     );
 };
-const MobileProfileDropdownSection: FC<ProfileDropdownSectionProps> = props => {
-    const text = getText(props);
-    return text ? (
-        <InternalSideNavigationGroupTrigger id={props.id} title={text} onClick={props.onClick} />
+const MobileProfileDropdownSection: FC<ProfileDropdownSectionProps> = ({
+    children,
+    text,
+    tooltip,
+    title,
+    ...props
+}) => {
+    const sectionText = getText(children, text);
+    const { onNotificationsUpdate } = useNotificationsContext();
+    onNotificationsUpdate(props.id, getTag(props.tag, props.counter));
+
+    return sectionText ? (
+        <InternalSideNavigationGroupTrigger {...props} title={sectionText} />
     ) : null;
 };
 
@@ -126,19 +152,22 @@ const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = props => {
 const MobileProfileDropdownLink: FC<ProfileDropdownLinkProps & NavigationComponentProps> = ({
     external,
     to,
+    tooltip,
+    text,
+    children,
     navigationComponent,
     ...props
 }) => {
     const { onNotificationsUpdate } = useNotificationsContext();
-    const text = getText(props);
+    const linkText = getText(children, text);
     const isExternalLink = external ?? to?.startsWith('http');
-    onNotificationsUpdate(props.id, !!props.tag?.value);
+    onNotificationsUpdate(props.id, getTag(props.tag, props.counter));
 
-    return text ? (
+    return linkText ? (
         <InternalSideNavigationGroupLink
             {...props}
             to={to}
-            title={text}
+            title={linkText}
             navigationComponent={isExternalLink ? ExternalNavComponent : navigationComponent}
         />
     ) : null;

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

@@ -64,5 +64,9 @@ export function TitanLayoutSidebarTrigger({
             onClick={isMobile && !!onMobileClick ? onMobileClick : onClick}
         />
     );
-    return wrapper && !isMobile ? <WrappedLink wrapper={wrapper}>{element}</WrappedLink> : element;
+    return wrapper && (!isMobile || !onMobileClick) ? (
+        <WrappedLink wrapper={wrapper}>{element}</WrappedLink>
+    ) : (
+        element
+    );
 }

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

@@ -85,10 +85,14 @@
 }
 
 @media only screen and (min-width: 361px) {
-    width: 85vw;
+    .nav-drawer-opened {
+        width: 85vw;
+    }
 }
 @media only screen and (min-width: 481px) {
-    width: 80vw;
+    .nav-drawer-opened {
+        width: 80vw;
+    }
 }
 
 // desktop version collapsed

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

@@ -166,7 +166,7 @@ const SideNavigationOptionsToggle: FC<{
             : appearance === 'collapse'
               ? 'Collapse Menu'
               : undefined,
-        'right'
+        { placement: 'right' }
     );
 
 /** Side Navigation menu item */

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

@@ -61,12 +61,19 @@
 .layout {
     --nav-offset-top: 0px;
     --nav-offset-left: 0px;
+    --content-offset-top: var(--nav-offset-top);
+    --offset: var(--content-offset-top);
 
-    &.layout-desktop.layout-top {
+    &.layout-desktop.layout-top-light {
         --nav-offset-top: 48px;
     }
 
-    &.layout-mobile.layout-top {
+    &.layout-desktop.layout-top-nav {
+        --nav-offset-top: 80px;
+    }
+
+    &.layout-mobile.layout-top-light,
+    &.layout-mobile.layout-top-nav {
         --nav-offset-top: 72px;
     }
 

package/src/components/titan-layout/titan-layout.module.less.d.ts

@@ -9,7 +9,8 @@ export const layoutLegacy: string;
 export const layoutMobile: string;
 export const layoutNavSlim: string;
 export const layoutNavWide: string;
-export const layoutTop: string;
+export const layoutTopLight: string;
+export const layoutTopNav: string;
 export const side: string;
 export const top: string;
 export const topPlaceholder: string;

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

@@ -65,6 +65,11 @@ const mainNavItems = [
     items.reports,
 ];
 
+const overflowNavItems = [
+    { ...items.accounting, id: 'accounting-overflow', title: 'Other Accounting' },
+    { ...items.reports, id: 'reports-overflow', title: 'Other Reports' },
+];
+
 const profile = (
     <ProfileDropdown>
         <ProfileDropdown.Link
@@ -80,6 +85,7 @@ const profile = (
             id="second"
             onClick={() => alert('second click')}
             tooltip="Second hint"
+            counter
         >
             second link
         </ProfileDropdown.Section>
@@ -198,11 +204,14 @@ const useLayoutProps = (args: LayoutContentArgs): TitanLayoutProps => {
 
         navigationComponent: NavLinkMock,
         navigationMainItems: args.emptyNav ? [] : mainNavItems,
+        navigationOverflowItems: args.emptyNav ? [] : overflowNavItems,
 
         profile,
         top: args.search ? <SearchBar /> : undefined,
         header: args.header ? <ContentHeader /> : undefined,
 
+        logo: { title: true },
+
         extraLinks,
         extraLinksTop,
         extraText: args.extraText ? 'EST (-8 hrs)' : undefined,
@@ -217,6 +226,7 @@ const Content = (args: LayoutContentArgs) => {
     return (
         <Fragment>
             <LocationInfo className="m-b-3" />
+            <div className="m-b-3">rendered - {new Date().toLocaleTimeString()}</div>
             {args.wideContent && (
                 <div style={{ width: '1200px' }}>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
@@ -307,35 +317,87 @@ const Content = (args: LayoutContentArgs) => {
 
 export const TitanLayoutLegacy = (args: LayoutContentArgs) => (
     <TitanLayout {...useLayoutProps(args)} appearance="legacy">
-        <TitanLayout.Logo title />
-        <TitanLayout.Content>
-            <div className="p-3">
-                <Content {...args} />
-            </div>
-        </TitanLayout.Content>
+        <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}>
+        <div
+            className="p-3"
+            style={{ position: 'absolute', width: 'calc(100% - var(--nav-offset-left))' }}
+        >
+            <Content {...args} />
+        </div>
     </TitanLayout>
 );
 
 export const TitanLayoutAnvil1 = (args: LayoutContentArgs) => (
     <TitanLayout {...useLayoutProps(args)} appearance="anvil1">
-        <TitanLayout.Logo title />
-        <TitanLayout.Content>
-            <Anvil1Page>
-                <Content {...args} />
-            </Anvil1Page>
-        </TitanLayout.Content>
+        <Anvil1Page>
+            <Content {...args} />
+        </Anvil1Page>
+    </TitanLayout>
+);
+
+export const TitanLayoutAnvil1TopNav = (args: LayoutContentArgs) => (
+    <TitanLayout {...useLayoutProps(args)} appearance="anvil1" navVariant="top">
+        <Anvil1Page>
+            <Content {...args} />
+        </Anvil1Page>
+    </TitanLayout>
+);
+
+export const TitanLayoutAnvil1Top = (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">
-        <TitanLayout.Logo title />
-        <TitanLayout.Content>
-            <Anvil2Page>
-                <Anvil2Page.Content>
-                    <Content {...args} />
-                </Anvil2Page.Content>
-            </Anvil2Page>
-        </TitanLayout.Content>
+        <Anvil2Page>
+            <Anvil2Page.Content>
+                <Content {...args} />
+            </Anvil2Page.Content>
+        </Anvil2Page>
+    </TitanLayout>
+);
+
+export const TitanLayoutAnvil2TopNav = (args: LayoutContentArgs) => (
+    <TitanLayout {...useLayoutProps(args)} appearance="anvil2" navVariant="top">
+        <Anvil2Page>
+            <Anvil2Page.Content>
+                <Content {...args} />
+            </Anvil2Page.Content>
+        </Anvil2Page>
+    </TitanLayout>
+);
+
+export const TitanLayoutAnvil2Top = (args: LayoutContentArgs) => (
+    <TitanLayout {...useLayoutProps(args)} appearance="anvil2" navVariant="top" top={undefined}>
+        <Anvil2Page>
+            <Anvil2Page.Content>
+                <Content {...args} />
+            </Anvil2Page.Content>
+        </Anvil2Page>
     </TitanLayout>
 );