@servicetitan/navigation 11.0.0-canary.237.f2d512b.0 → 11.0.0-canary.237.f92c882.0

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,30 @@ 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;
+}
+
 export default {
     title: 'Navigation/TitanLayout',
-    component: TitanLayout,
     decorators: [withDefaultRedirects, withMemoryRouter, withAnvil],
     parameters: {},
+    argTypes: {},
+    args: {
+        header: true,
+        sideTop: true,
+        extraText: true,
+        search: true,
+        longContent: true,
+        wideContent: false,
+        minWidth: false,
+    } as LayoutContentArgs,
 };
 
 const mainNavItems = [
@@ -51,6 +70,7 @@ const profile = (
             to="https://google.com"
             tooltip="Google it"
             target="_blank"
+            tag={{ value: true }}
         >
             first link
         </ProfileDropdown.Link>
@@ -131,9 +151,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,51 +162,174 @@ 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,
+
+        minContentWidth: args.minWidth ? 900 : undefined,
     };
 };
 
-export const TitanLayoutLegacy = () => (
-    <TitanLayout {...useLayoutProps()} appearance="legacy">
+const Content = (args: LayoutContentArgs) => {
+    return (
+        <Fragment>
+            <LocationInfo className="m-b-3" />
+            {args.wideContent && (
+                <div style={{ width: '1200px' }}>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+                    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+                    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+                    culpa qui officia deserunt mollit anim id est laborum.
+                </div>
+            )}
+
+            {args.longContent && (
+                <div>
+                    <p>Lorem</p>
+                    <p>ipsum</p>
+                    <p>dolor</p>
+                    <p>sit</p>
+                    <p>amet,</p>
+                    <p>consectetur</p>
+                    <p>adipiscing</p>
+                    <p>elit,</p>
+                    <p>sed</p>
+                    <p>do</p>
+                    <p>eiusmod</p>
+                    <p>tempor</p>
+                    <p>incididunt</p>
+                    <p>ut</p>
+                    <p>labore</p>
+                    <p>et</p>
+                    <p>dolore</p>
+                    <p>magna</p>
+                    <p>aliqua.</p>
+                    <p>Ut</p>
+                    <p>enim</p>
+                    <p>ad</p>
+                    <p>minim</p>
+                    <p>veniam,</p>
+                    <p>quis</p>
+                    <p>nostrud</p>
+                    <p>exercitation</p>
+                    <p>ullamco</p>
+                    <p>laboris</p>
+                    <p>nisi</p>
+                    <p>ut</p>
+                    <p>aliquip</p>
+                    <p>ex</p>
+                    <p>ea</p>
+                    <p>commodo</p>
+                    <p>consequat.</p>
+                    <p>Duis</p>
+                    <p>aute</p>
+                    <p>irure</p>
+                    <p>dolor</p>
+                    <p>in</p>
+                    <p>reprehenderit</p>
+                    <p>in</p>
+                    <p>voluptate</p>
+                    <p>velit</p>
+                    <p>esse</p>
+                    <p>cillum</p>
+                    <p>dolore</p>
+                    <p>eu</p>
+                    <p>fugiat</p>
+                    <p>nulla</p>
+                    <p>pariatur.</p>
+                    <p>Excepteur</p>
+                    <p>sint</p>
+                    <p>occaecat</p>
+                    <p>cupidatat</p>
+                    <p>non</p>
+                    <p>proident,</p>
+                    <p>sunt</p>
+                    <p>in</p>
+                    <p>culpa</p>
+                    <p>qui</p>
+                    <p>officia</p>
+                    <p>deserunt</p>
+                    <p>mollit</p>
+                    <p>anim</p>
+                    <p>id</p>
+                    <p>est</p>
+                    <p>laborum.</p>
+                </div>
+            )}
+        </Fragment>
+    );
+};
+
+export const TitanLayoutLegacy = (args: LayoutContentArgs) => (
+    <TitanLayout {...useLayoutProps(args)} appearance="legacy">
         <TitanLayout.Logo title />
         <TitanLayout.Content>
-            <LocationInfo />
+            <div className="p-3">
+                <Content {...args} />
+            </div>
         </TitanLayout.Content>
     </TitanLayout>
 );
 
-export const TitanLayoutAnvil1 = () => (
-    <TitanLayout {...useLayoutProps()} appearance="anvil1">
+export const TitanLayoutAnvil1 = (args: LayoutContentArgs) => (
+    <TitanLayout {...useLayoutProps(args)} appearance="anvil1">
         <TitanLayout.Logo title />
         <TitanLayout.Content>
             <Anvil1Page>
-                <LocationInfo />
+                <Content {...args} />
             </Anvil1Page>
         </TitanLayout.Content>
     </TitanLayout>
 );
 
-export const TitanLayoutAnvil2 = () => (
-    <TitanLayout {...useLayoutProps()} appearance="anvil2">
+export const TitanLayoutAnvil2 = (args: LayoutContentArgs) => (
+    <TitanLayout {...useLayoutProps(args)} appearance="anvil2">
         <TitanLayout.Logo title />
         <TitanLayout.Content>
             <Anvil2Page>
                 <Anvil2Page.Content>
-                    <LocationInfo />
+                    <Content {...args} />
                 </Anvil2Page.Content>
             </Anvil2Page>
         </TitanLayout.Content>

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';
@@ -28,6 +29,7 @@ import { TitanLayoutLogo, TitanLayoutLogoProps } from './layout-logo';
 import { LayoutSidebar } from './layout-sidebar';
 import { TitanLayoutSidebarLink, TitanLayoutSidebarTrigger } from './layout-sidebar-links';
 import { InternalSideNavigationTrigger } from './layout-sidebar-links-internal';
+import { useNotificationsState } from './notifications-context';
 import * as Styles from './titan-layout.module.less';
 
 type TitanLayoutChild = ReactElement<TitanLayoutContentProps> | ReactElement<TitanLayoutLogoProps>;
@@ -50,11 +52,13 @@ 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[];
+    minContentWidth?: number;
 };
 
 const defaultSidebarContext: TitanLayoutSidebarContextType = {
@@ -115,6 +119,7 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
     children,
     navigationComponent,
     header,
+    top,
     profile,
     state,
     onStateChange,
@@ -122,7 +127,8 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
     extraLinks,
     extraLinksTop,
     extraText,
-    sidebarTop,
+    minContentWidth,
+    sideTop,
 }) => {
     const breakpoint = useTitanBreakpoint();
     const isMobile = breakpoint.isMobile;
@@ -138,21 +144,15 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
     const variant = useVariant(appearance);
     const [mobileDrawerOpened, setMobileDrawerOpened] = useState(false);
     const { content, logo } = useLayoutChildren(children);
+    const { hasNotifications, NotificationsContextProvider } = useNotificationsState();
 
     useEffect(() => {
-        if (!isMobile) {
-            setMobileDrawerOpened(false);
-            return;
+        if (variant.isAnvil1) {
+            const bodyClassName = 'of-hidden-i';
+            document.body.classList.add(bodyClassName);
+            return () => document.body.classList.remove(bodyClassName);
         }
-
-        const listener = () => {
-            setMobileDrawerOpened(false);
-        };
-
-        document.addEventListener('click', listener);
-
-        return () => document.removeEventListener('click', listener);
-    }, [isMobile]);
+    }, [variant.isAnvil1]);
 
     const onBurgerClick = useCallback((e: MouseEvent) => {
         setMobileDrawerOpened(true);
@@ -179,8 +179,6 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
         [state, onStateChange]
     );
 
-    const [layoutStyles] = useState<object>({});
-
     const layoutClass = variant.isLegacy
         ? Styles.layoutLegacy
         : variant.isAnvil1
@@ -194,21 +192,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>
@@ -216,57 +212,147 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
                                 {!isMobile && extraLinks}
                             </Fragment>
                         }
+                        isMobile={isMobile}
+                        hasNotifications={hasNotifications}
                         onBurgerClick={onBurgerClick}
                     />
 
-                    <LayoutSidebar
-                        className={Styles.side}
-                        mobile={breakpoint.isMobile}
-                        barExpanded={isMobile ? mobileDrawerOpened : !state?.navCollapsed}
-                        submenuExpanded={state?.submenuExpanded}
-                        onBarExpandChange={onBarExpandChange}
-                        onSubmenuExpandChange={onSubmenuExpandChange}
-                        top={sidebarTop}
-                        mainItems={navigationMainItems}
-                        navigationComponent={context.NavigationComponent}
-                        bottom={
-                            isMobile ? (
-                                <Fragment>
-                                    {profile}
-                                    {extraLinks}
-                                    {!!extraText && (
-                                        <InternalSideNavigationTrigger
-                                            id="__extra_text"
-                                            title={extraText}
-                                            submenuExpanded={undefined}
-                                            dataPrefix="navigation-extra-text"
-                                            tag={undefined}
-                                            icon={undefined}
-                                            iconActive={undefined}
-                                        />
-                                    )}
-                                </Fragment>
-                            ) : undefined
-                        }
-                    />
-
-                    {content}
+                    <NotificationsContextProvider>
+                        <LayoutSidebar
+                            className={Styles.side}
+                            mobile={breakpoint.isMobile}
+                            barExpanded={!state?.navCollapsed}
+                            onBarExpandChange={onBarExpandChange}
+                            submenuExpanded={state?.submenuExpanded}
+                            onSubmenuExpandChange={onSubmenuExpandChange}
+                            drawerOpened={mobileDrawerOpened}
+                            onDrawerOpenChange={setMobileDrawerOpened}
+                            top={sideTop}
+                            mainItems={navigationMainItems}
+                            navigationComponent={context.NavigationComponent}
+                            bottom={
+                                isMobile ? (
+                                    <Fragment>
+                                        {profile}
+                                        {extraLinks}
+                                        {!!extraText && (
+                                            <InternalSideNavigationTrigger
+                                                id="__extra_text"
+                                                title={extraText}
+                                                submenuExpanded={undefined}
+                                                dataPrefix="navigation-extra-text"
+                                                tag={undefined}
+                                                icon={undefined}
+                                                iconActive={undefined}
+                                            />
+                                        )}
+                                    </Fragment>
+                                ) : undefined
+                            }
+                        />
+                    </NotificationsContextProvider>
+                    <LayoutContent
+                        header={header}
+                        anvil2={variant.isAnvil2}
+                        anvil1={variant.isAnvil1}
+                        minWidth={minContentWidth}
+                    >
+                        {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.contentHeader} data-cy="layout-content-header">
+            {children}
+        </div>
+    );
+};
+
 export interface TitanLayoutContentProps {
     children: ReactNode;
 }
-const TitanLayoutContent: FC<TitanLayoutContentProps> = ({ children }) => (
-    <div className={Styles.content}>{children}</div>
-);
+const TitanLayoutContent: FC<TitanLayoutContentProps> = ({ children }) => children;
+
+const LayoutContent: FC<{
+    children: ReactNode;
+    header?: ReactNode;
+    anvil1: boolean;
+    anvil2: boolean;
+    minWidth: number | undefined;
+}> = ({ anvil1, anvil2, children, header, minWidth }) => {
+    const [anvil2Styles, setAnvil2Styles] = useState<object>({});
+    const updateIndicatorsHeight = useCallback((offset: number) => {
+        setAnvil2Styles({ '--offset': `calc(var(--nav-offset-top) + ${offset}px)` });
+    }, []);
+
+    const contentStyles = useMemo(
+        () => ({
+            ...(minWidth ? { minWidth: `${minWidth}px` } : {}),
+            ...(anvil2 ? anvil2Styles : {}),
+        }),
+        [anvil2, minWidth, anvil2Styles]
+    );
+
+    return (
+        <Fragment>
+            {!!header &&
+                (anvil2 ? (
+                    <TitanLayoutHeaderObserved heightChange={updateIndicatorsHeight}>
+                        {header}
+                    </TitanLayoutHeaderObserved>
+                ) : (
+                    <div className={Styles.contentHeader} data-cy="layout-content-header">
+                        {header}
+                    </div>
+                ))}
+            <div className={Styles.content} style={contentStyles} data-cy="layout-content">
+                {anvil1 ? (
+                    <div className="position-relative d-f flex-grow-1 flex-basis-0 of-hidden">
+                        {children}
+                    </div>
+                ) : (
+                    children
+                )}
+            </div>
+        </Fragment>
+    );
+};
 
 export const TitanLayout = Object.assign(TitanLayoutComponent, {
     Content: TitanLayoutContent,
     Logo: TitanLayoutLogo,
-    SidebarLink: TitanLayoutSidebarLink,
-    SidebarTrigger: TitanLayoutSidebarTrigger,
+    Link: TitanLayoutSidebarLink,
+    Trigger: TitanLayoutSidebarTrigger,
 });

package/src/test/data.tsx

@@ -66,7 +66,6 @@ export const NavLinkMock = forwardRef<any, NavLinkComponentProps>(
                 {...rest}
                 onClick={e => {
                     e.preventDefault();
-                    e.stopPropagation();
 
                     if (!to.startsWith('http')) {
                         history.replace(to);
@@ -82,10 +81,10 @@ export const NavLinkMock = forwardRef<any, NavLinkComponentProps>(
     }
 );
 
-export const LocationInfo = () => {
+export const LocationInfo: FC<{ className?: string }> = ({ className }) => {
     const location = useLocation();
 
-    return <BodyText>current location - {location.pathname}</BodyText>;
+    return <BodyText className={className}>current location - {location.pathname}</BodyText>;
 };
 
 const LocationProvider: FC<{ children: any }> = ({ children }) => {