@servicetitan/navigation 11.0.0-canary.237.c4efaad.0 → 11.0.0-canary.237.dd4db7e.0

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

@@ -13,10 +13,12 @@
     margin-top: var(--nav-offset-top);
 
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
 
     .side {
         flex-basis: var(--nav-offset-left);
+        flex-grow: 0;
+        flex-shrink: 0;
     }
 
     .content {
@@ -28,47 +30,78 @@
     }
 }
 
-.layout-legacy,
 .layout-anvil2 {
+    .content-header {
+        position: sticky;
+        top: var(--nav-offset-top);
+        z-index: 989;
+    }
+}
+
+.layout-desktop {
     padding-left: var(--nav-offset-left);
 
-    .top-placeholder {
-        height: var(--nav-offset-top);
+    .side {
+        position: fixed;
+        top: var(--nav-offset-top);
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: @z-index-global-nav;
     }
+}
 
-    &:not(.layout-mobile) {
-        .side {
-            position: fixed;
-            top: var(--nav-offset-top);
-            bottom: 0;
-            left: 0;
-            right: 0;
-            z-index: @z-index-global-nav;
-        }
+.layout-legacy,
+.layout-anvil2 {
+    overflow-x: auto;
+    .top-placeholder {
+        height: var(--nav-offset-top);
     }
 }
 
 .layout {
-    --nav-offset-top: 49px;
+    --nav-offset-top: 0;
+    --nav-offset-left: 0;
+
+    &.layout-desktop.layout-top {
+        --nav-offset-top: 48px;
+    }
 
-    &.layout-mobile {
-        --nav-offset-top: 61px;
-        --nav-offset-left: 0;
+    &.layout-mobile.layout-top {
+        --nav-offset-top: 72px;
     }
 
-    &.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;
+        width: 100vw;
         top: 0;
         left: 0;
-        right: 0;
         z-index: 991;
     }
+
+    .content-header {
+        position: sticky;
+        left: 0;
+        right: 0;
+    }
+}
+
+@media print {
+    .layout {
+        --nav-offset-left: 0px !important;
+        --nav-offset-right: 0px !important;
+
+        .side,
+        .top {
+            display: none !important;
+        }
+    }
 }

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

@@ -1,12 +1,15 @@
 export const __esModule: true;
 export const content: string;
+export const contentHeader: 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 layoutTop: 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,32 @@ 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;
+    emptyNav: 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,
+        emptyNav: false,
+    } as LayoutContentArgs,
 };
 
 const mainNavItems = [
@@ -51,6 +72,7 @@ const profile = (
             to="https://google.com"
             tooltip="Google it"
             target="_blank"
+            tag={{ value: true }}
         >
             first link
         </ProfileDropdown.Link>
@@ -131,9 +153,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 +164,176 @@ 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 m-x-half-i" />
+);
+
+const useLayoutProps = (args: LayoutContentArgs): TitanLayoutProps => {
     const [state, setState] = useState<TitanLayoutState | undefined>(undefined);
 
     return {
         state,
         onStateChange: setState,
 
-        navigationMainItems: mainNavItems,
+        navigationComponent: NavLinkMock,
+        navigationMainItems: args.emptyNav ? [] : 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 && !args.emptyNav ? 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>