@servicetitan/navigation 11.0.0 → 11.1.1

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} className={Styles.logoLink}>
+                        <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} className={Styles.logoLink}>
+                            <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-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

@@ -64,11 +64,16 @@
     --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
@@ -199,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,
@@ -309,38 +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"
-                style={{ position: 'absolute', width: 'calc(100% - var(--nav-offset-left));' }}
-            >
-                <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>
 );