@servicetitan/navigation 11.0.0-canary.237.64cfcfe.0 → 11.0.0-canary.237.8fa0e61.0

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

@@ -1,4 +1,4 @@
-import { Announcement, Page as Anvil2Page, Button, 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';
@@ -24,6 +24,10 @@ interface LayoutContentArgs {
     header: boolean;
     sideTop: boolean;
     extraText: boolean;
+    search: boolean;
+    longContent: boolean;
+    wideContent: boolean;
+    minWidth: boolean;
 }
 
 export default {
@@ -35,6 +39,10 @@ export default {
         header: true,
         sideTop: true,
         extraText: true,
+        search: true,
+        longContent: true,
+        wideContent: false,
+        minWidth: false,
     } as LayoutContentArgs,
 };
 
@@ -174,6 +182,8 @@ const ContentHeader = () => {
         </Fragment>
     );
 };
+const SearchBar = () => <TextField size="small" placeholder="Search" className="w-100-i" />;
+
 const useLayoutProps = (args: LayoutContentArgs): TitanLayoutProps => {
     const [state, setState] = useState<TitanLayoutState | undefined>(undefined);
 
@@ -185,7 +195,7 @@ const useLayoutProps = (args: LayoutContentArgs): TitanLayoutProps => {
         navigationMainItems: mainNavItems,
 
         profile,
-
+        top: args.search ? <SearchBar /> : undefined,
         header: args.header ? <ContentHeader /> : undefined,
 
         extraLinks,
@@ -193,14 +203,110 @@ const useLayoutProps = (args: LayoutContentArgs): TitanLayoutProps => {
         extraText: args.extraText ? 'EST (-8 hrs)' : undefined,
 
         sideTop: args.sideTop ? sidebarTop() : undefined,
+
+        minContentWidth: args.minWidth ? 900 : undefined,
     };
 };
 
+const Content = (args: LayoutContentArgs) => {
+    return (
+        <Fragment>
+            <LocationInfo />
+            {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>
 );
@@ -210,7 +316,7 @@ export const TitanLayoutAnvil1 = (args: LayoutContentArgs) => (
         <TitanLayout.Logo title />
         <TitanLayout.Content>
             <Anvil1Page>
-                <LocationInfo />
+                <Content {...args} />
             </Anvil1Page>
         </TitanLayout.Content>
     </TitanLayout>
@@ -222,7 +328,7 @@ export const TitanLayoutAnvil2 = (args: LayoutContentArgs) => (
         <TitanLayout.Content>
             <Anvil2Page>
                 <Anvil2Page.Content>
-                    <LocationInfo />
+                    <Content {...args} />
                 </Anvil2Page.Content>
             </Anvil2Page>
         </TitanLayout.Content>

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

@@ -57,6 +57,7 @@ export type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'
     extraLinks?: ReactElement;
     extraLinksTop?: ReactElement;
     extraText?: string;
+    minContentWidth?: number;
 };
 
 const defaultSidebarContext: TitanLayoutSidebarContextType = {
@@ -125,6 +126,7 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
     extraLinks,
     extraLinksTop,
     extraText,
+    minContentWidth,
     sideTop,
 }) => {
     const breakpoint = useTitanBreakpoint();
@@ -157,6 +159,13 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
         return () => document.removeEventListener('click', listener);
     }, [isMobile]);
 
+    useEffect(() => {
+        if (variant.isAnvil1) {
+            document.body.classList.add('of-hidden-i');
+            return () => document.body.classList.remove('of-hidden');
+        }
+    }, [variant.isAnvil1]);
+
     const onBurgerClick = useCallback((e: MouseEvent) => {
         setMobileDrawerOpened(true);
         e.stopPropagation();
@@ -249,7 +258,12 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
                         }
                     />
 
-                    <LayoutContent header={header} anvil2={variant.isAnvil2}>
+                    <LayoutContent
+                        header={header}
+                        anvil2={variant.isAnvil2}
+                        anvil1={variant.isAnvil1}
+                        minWidth={minContentWidth}
+                    >
                         {content}
                     </LayoutContent>
                 </div>
@@ -287,7 +301,7 @@ const TitanLayoutHeaderObserved: FC<{
         };
     }, [heightChange]);
     return (
-        <div ref={ref} className={Styles.header}>
+        <div ref={ref} className={Styles.contentHeader} data-cy="layout-content-header">
             {children}
         </div>
     );
@@ -298,28 +312,48 @@ export interface TitanLayoutContentProps {
 }
 const TitanLayoutContent: FC<TitanLayoutContentProps> = ({ children }) => children;
 
-const LayoutContent: FC<{ children: ReactNode; header?: ReactNode; anvil2: boolean }> = ({
-    anvil2,
-    children,
-    header,
-}) => {
+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 (
-        <div className={Styles.content} style={anvil2Styles}>
+        <Fragment>
             {!!header &&
                 (anvil2 ? (
                     <TitanLayoutHeaderObserved heightChange={updateIndicatorsHeight}>
                         {header}
                     </TitanLayoutHeaderObserved>
                 ) : (
-                    header
+                    <div className={Styles.contentHeader} data-cy="layout-content-header">
+                        {header}
+                    </div>
                 ))}
-            {children}
-        </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>
     );
 };