@servicetitan/navigation 11.0.0-canary.237.c90556e.0 → 11.0.0-canary.237.fef17f5.0

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

@@ -31,7 +31,6 @@ export interface LayoutSidebarProps {
     top?: ReactElement[];
     bottom?: ReactElement;
     mainItems?: NavigationItemData[];
-    flex: boolean;
     barExpanded: boolean;
     submenuExpanded: string | undefined;
     mobile: boolean;
@@ -42,7 +41,6 @@ export interface LayoutSidebarProps {
 
 export const LayoutSidebar: FC<LayoutSidebarProps> = ({
     className,
-    flex,
     mobile,
     barExpanded,
     submenuExpanded,
@@ -65,7 +63,6 @@ export const LayoutSidebar: FC<LayoutSidebarProps> = ({
                     mobile && Styles.navDrawer,
                     mobile && barExpanded && Styles.navDrawerOpened,
                     !mobile && (barExpanded ? Styles.navWide : Styles.navSlim),
-                    !mobile && (flex ? Styles.navFlex : Styles.navFixed),
                     className
                 )}
                 data-cy="side-navigation"
@@ -82,7 +79,7 @@ export const LayoutSidebar: FC<LayoutSidebarProps> = ({
                             </div>
                         </div>
                     )}
-                    {top?.length && <SidebarTop>{top}</SidebarTop>}
+                    {!!top?.length && <SidebarTop>{top}</SidebarTop>}
 
                     <div data-cy="navigation-items">
                         {mainItems?.map(item =>

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

@@ -8,30 +8,53 @@
 @bg-color-hover: rgba(255, 255, 255, 0.08);
 @bg-color-active: rgba(120, 187, 250, 0.2);
 
-.layout-legacy {
-    padding-left: var(--nav-offset-left);
-}
-
 .layout-anvil1 {
-    display: block;
+    height: calc(100vh - var(--nav-offset-top));
+    margin-top: var(--nav-offset-top);
+
+    display: flex;
+    flex-direction: row;
+
+    .side {
+        flex-basis: var(--nav-offset-left);
+        flex-grow: 0;
+        flex-shrink: 0;
+    }
+
+    .content {
+        flex-grow: 1;
+
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+    }
 }
 
 .layout-anvil2 {
-    display: block;
+    .header {
+        position: sticky;
+        top: var(--nav-offset-top);
+        z-index: 989;
+    }
 }
 
 .layout-legacy,
 .layout-anvil2 {
+    padding-left: var(--nav-offset-left);
+
     .top-placeholder {
         height: var(--nav-offset-top);
     }
 
-    .top {
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        z-index: 991;
+    &.layout-desktop {
+        .side {
+            position: fixed;
+            top: var(--nav-offset-top);
+            bottom: 0;
+            left: 0;
+            right: 0;
+            z-index: @z-index-global-nav;
+        }
     }
 }
 
@@ -43,11 +66,19 @@
         --nav-offset-left: 0;
     }
 
-    &.layout-nav-slim {
+    &.layout-desktop.layout-nav-slim {
         --nav-offset-left: 64px;
     }
 
-    &.layout-nav-wide {
+    &.layout-desktop.layout-nav-wide {
         --nav-offset-left: 212px;
     }
+
+    .top {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 991;
+    }
 }

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

@@ -0,0 +1,15 @@
+export const __esModule: true;
+export const content: string;
+export const header: string;
+export const layout: string;
+export const layoutAnvil1: string;
+export const layoutAnvil2: string;
+export const layoutDesktop: string;
+export const layoutLegacy: string;
+export const layoutMobile: string;
+export const layoutNavSlim: string;
+export const layoutNavWide: string;
+export const side: string;
+export const top: string;
+export const topPlaceholder: string;
+

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

@@ -1,4 +1,4 @@
-import { Page as Anvil2Page, Popover } from '@servicetitan/anvil2';
+import { Announcement, Page as Anvil2Page, Button, Popover, TextField } from '@servicetitan/anvil2';
 import SvgSearch from '@servicetitan/anvil2/assets/icons/material/round/search.svg';
 import SvgAtlas from '@servicetitan/anvil2/assets/icons/st/atlas_logo.svg';
 import SvgSettingsActive from '@servicetitan/anvil2/assets/icons/st/gnav_settings_active.svg';
@@ -20,11 +20,24 @@ 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;
+}
+
 export default {
     title: 'Navigation/TitanLayout',
-    component: TitanLayout,
     decorators: [withDefaultRedirects, withMemoryRouter, withAnvil],
     parameters: {},
+    argTypes: {},
+    args: {
+        header: true,
+        sideTop: true,
+        extraText: true,
+        search: true,
+    } as LayoutContentArgs,
 };
 
 const mainNavItems = [
@@ -131,9 +144,9 @@ const SideLinkPopoverWrapper: FC<SideNavigationLinkWrapperProps> = ({ children,
 };
 
 const sidebarTop = () => [
-    <TitanLayout.SidebarLink key="tasks" {...items.tasks} />,
-    <TitanLayout.SidebarLink key="calls" {...items.calls} />,
-    <TitanLayout.SidebarTrigger
+    <TitanLayout.Link key="tasks" {...items.tasks} />,
+    <TitanLayout.Link key="calls" {...items.calls} />,
+    <TitanLayout.Trigger
         key="marketing"
         {...items.marketing}
         isActive={false}
@@ -142,26 +155,53 @@ const sidebarTop = () => [
         counter={50}
     />,
 ];
-const useLayoutProps = (): TitanLayoutProps => {
+const ContentHeader = () => {
+    const [longInfo, setLongInfo] = useState(false);
+
+    return (
+        <Fragment>
+            <Announcement title="Some info" status="info" />
+            <Announcement title="Some warning" status="warning" />
+            <div
+                className="d-f justify-content-center align-items-center bg-purple-100-i"
+                style={{ height: longInfo ? '120px' : '48px' }}
+            >
+                <div className="d-f align-items-center gap-1">
+                    custom content{' '}
+                    <Button onClick={() => setLongInfo(!longInfo)} size="small" aria-label="test">
+                        {longInfo ? '↑' : '↓'}
+                    </Button>
+                </div>
+            </div>
+        </Fragment>
+    );
+};
+const SearchBar = () => <TextField size="small" placeholder="Search" className="w-100-i" />;
+
+const useLayoutProps = (args: LayoutContentArgs): TitanLayoutProps => {
     const [state, setState] = useState<TitanLayoutState | undefined>(undefined);
 
     return {
         state,
         onStateChange: setState,
 
+        navigationComponent: NavLinkMock,
         navigationMainItems: mainNavItems,
+
         profile,
+        top: args.search ? <SearchBar /> : undefined,
+        header: args.header ? <ContentHeader /> : undefined,
+
         extraLinks,
         extraLinksTop,
+        extraText: args.extraText ? 'EST (-8 hrs)' : undefined,
 
-        sidebarTop: sidebarTop(),
-        navigationComponent: NavLinkMock,
-        extraText: 'EST (-8 hrs)',
+        sideTop: args.sideTop ? sidebarTop() : undefined,
     };
 };
 
-export const TitanLayoutLegacy = () => (
-    <TitanLayout {...useLayoutProps()} appearance="legacy">
+export const TitanLayoutLegacy = (args: LayoutContentArgs) => (
+    <TitanLayout {...useLayoutProps(args)} appearance="legacy">
         <TitanLayout.Logo title />
         <TitanLayout.Content>
             <LocationInfo />
@@ -169,8 +209,8 @@ export const TitanLayoutLegacy = () => (
     </TitanLayout>
 );
 
-export const TitanLayoutAnvil1 = () => (
-    <TitanLayout {...useLayoutProps()} appearance="anvil1">
+export const TitanLayoutAnvil1 = (args: LayoutContentArgs) => (
+    <TitanLayout {...useLayoutProps(args)} appearance="anvil1">
         <TitanLayout.Logo title />
         <TitanLayout.Content>
             <Anvil1Page>
@@ -180,8 +220,8 @@ export const TitanLayoutAnvil1 = () => (
     </TitanLayout>
 );
 
-export const TitanLayoutAnvil2 = () => (
-    <TitanLayout {...useLayoutProps()} appearance="anvil2">
+export const TitanLayoutAnvil2 = (args: LayoutContentArgs) => (
+    <TitanLayout {...useLayoutProps(args)} appearance="anvil2">
         <TitanLayout.Logo title />
         <TitanLayout.Content>
             <Anvil2Page>

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

@@ -11,6 +11,7 @@ import {
     useCallback,
     useEffect,
     useMemo,
+    useRef,
     useState,
 } from 'react';
 import { NavigationItemData } from '../../utils/navigation';
@@ -50,11 +51,12 @@ export type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'
     onStateChange?: (state: TitanLayoutState) => void;
 
     header?: ReactElement;
+    top?: ReactElement;
+    sideTop?: ReactElement[];
     profile?: ReactElement;
     extraLinks?: ReactElement;
     extraLinksTop?: ReactElement;
     extraText?: string;
-    sidebarTop?: ReactElement[];
 };
 
 const defaultSidebarContext: TitanLayoutSidebarContextType = {
@@ -76,7 +78,7 @@ const useVariant = (appearance: TitanLayoutProps['appearance']) =>
             isLegacy,
             isAnvil1,
             isAnvil2,
-            isSequent: isLegacy || isAnvil1,
+            isSequent: isLegacy || isAnvil2,
         };
     }, [appearance]);
 
@@ -115,6 +117,7 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
     children,
     navigationComponent,
     header,
+    top,
     profile,
     state,
     onStateChange,
@@ -122,7 +125,7 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
     extraLinks,
     extraLinksTop,
     extraText,
-    sidebarTop,
+    sideTop,
 }) => {
     const breakpoint = useTitanBreakpoint();
     const isMobile = breakpoint.isMobile;
@@ -179,8 +182,6 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
         [state, onStateChange]
     );
 
-    const [layoutStyles] = useState<object>({});
-
     const layoutClass = variant.isLegacy
         ? Styles.layoutLegacy
         : variant.isAnvil1
@@ -194,21 +195,19 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
                     id={id}
                     className={classNames(
                         Styles.layout,
-                        isMobile
-                            ? Styles.layoutMobile
-                            : state?.navCollapsed
-                              ? Styles.layoutNavSlim
-                              : Styles.layoutNavWide,
+                        isMobile ? Styles.layoutMobile : Styles.layoutDesktop,
+                        !isMobile && state?.navCollapsed
+                            ? Styles.layoutNavSlim
+                            : Styles.layoutNavWide,
                         layoutClass
                     )}
-                    style={layoutStyles}
                 >
                     {variant.isSequent && <div className={Styles.topPlaceholder} />}
                     <LayoutHeader
                         className={Styles.top}
                         logo={logo}
                         profile={isMobile ? undefined : profile}
-                        center={header}
+                        center={top}
                         rightText={isMobile ? undefined : extraText}
                         right={
                             <Fragment>
@@ -220,13 +219,13 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
                     />
 
                     <LayoutSidebar
-                        flex={!variant.isSequent}
+                        className={Styles.side}
                         mobile={breakpoint.isMobile}
                         barExpanded={isMobile ? mobileDrawerOpened : !state?.navCollapsed}
                         submenuExpanded={state?.submenuExpanded}
                         onBarExpandChange={onBarExpandChange}
                         onSubmenuExpandChange={onSubmenuExpandChange}
-                        top={sidebarTop}
+                        top={sideTop}
                         mainItems={navigationMainItems}
                         navigationComponent={context.NavigationComponent}
                         bottom={
@@ -250,21 +249,83 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
                         }
                     />
 
-                    {content}
+                    <LayoutContent header={header} anvil2={variant.isAnvil2}>
+                        {content}
+                    </LayoutContent>
                 </div>
             </LayoutPlacementContext.Provider>
         </LayoutContext.Provider>
     );
 };
 
+const TitanLayoutHeaderObserved: FC<{
+    children: ReactNode;
+    heightChange?(value: number): void;
+}> = ({ children, heightChange }) => {
+    const ref = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (ref.current) {
+            const updatePosition = () => {
+                if (ref.current && heightChange) {
+                    const pos = ref.current.getBoundingClientRect();
+                    heightChange(pos.height);
+                }
+            };
+
+            const observer = new ResizeObserver(updatePosition);
+            observer.observe(ref.current);
+
+            updatePosition();
+            return () => observer.disconnect();
+        }
+    }, [heightChange]);
+
+    useEffect(() => {
+        return () => {
+            heightChange?.(0);
+        };
+    }, [heightChange]);
+    return (
+        <div ref={ref} className={Styles.header}>
+            {children}
+        </div>
+    );
+};
+
 export interface TitanLayoutContentProps {
     children: ReactNode;
 }
 const TitanLayoutContent: FC<TitanLayoutContentProps> = ({ children }) => children;
 
+const LayoutContent: FC<{ children: ReactNode; header?: ReactNode; anvil2: boolean }> = ({
+    anvil2,
+    children,
+    header,
+}) => {
+    const [anvil2Styles, setAnvil2Styles] = useState<object>({});
+    const updateIndicatorsHeight = useCallback((offset: number) => {
+        setAnvil2Styles({ '--offset': `calc(var(--nav-offset-top) + ${offset}px)` });
+    }, []);
+
+    return (
+        <div className={Styles.content} style={anvil2Styles}>
+            {!!header &&
+                (anvil2 ? (
+                    <TitanLayoutHeaderObserved heightChange={updateIndicatorsHeight}>
+                        {header}
+                    </TitanLayoutHeaderObserved>
+                ) : (
+                    header
+                ))}
+            {children}
+        </div>
+    );
+};
+
 export const TitanLayout = Object.assign(TitanLayoutComponent, {
     Content: TitanLayoutContent,
     Logo: TitanLayoutLogo,
-    SidebarLink: TitanLayoutSidebarLink,
-    SidebarTrigger: TitanLayoutSidebarTrigger,
+    Link: TitanLayoutSidebarLink,
+    Trigger: TitanLayoutSidebarTrigger,
 });

package/src/test/data-stories.module.less.d.ts

@@ -0,0 +1,3 @@
+export const __esModule: true;
+export const fixIcons: string;
+