@servicetitan/navigation 11.0.0-canary.237.6ce8e81.0 → 11.0.0-canary.237.7d5e2c9.0

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

@@ -6,6 +6,7 @@ import {
     InternalSideNavigationLink,
     InternalSideNavigationTrigger,
 } from './layout-sidebar-links-internal';
+import { useNotificationsContext } from './notifications-context';
 
 const WrappedLink: FC<{
     children: ReactElement<any>;
@@ -21,6 +22,10 @@ export function TitanLayoutSidebarLink({ wrapper, ...props }: TitanLayoutSidebar
         NavigationComponent,
         breakpoint: { isMobile },
     } = useTitanLayoutContext();
+    const { onNotificationsUpdate } = useNotificationsContext();
+    const tag = getCounterTag(props.counter, props.tag);
+
+    onNotificationsUpdate(props.id, !!tag);
 
     const element = (
         <InternalSideNavigationLink
@@ -28,7 +33,7 @@ export function TitanLayoutSidebarLink({ wrapper, ...props }: TitanLayoutSidebar
             navigationComponent={NavigationComponent}
             submenuExpanded={undefined}
             dataPrefix="navigation-link"
-            tag={getCounterTag(props.counter, props.tag)}
+            tag={tag}
         />
     );
 
@@ -45,13 +50,17 @@ export function TitanLayoutSidebarTrigger({
     const {
         breakpoint: { isMobile },
     } = useTitanLayoutContext();
+    const { onNotificationsUpdate } = useNotificationsContext();
+    const tag = getCounterTag(props.counter, props.tag);
+
+    onNotificationsUpdate(props.id, !!tag);
 
     const element = (
         <InternalSideNavigationTrigger
             {...props}
             submenuExpanded={undefined}
             dataPrefix="navigation-trigger"
-            tag={getCounterTag(props.counter, props.tag)}
+            tag={tag}
             onClick={isMobile && !!onMobileClick ? onMobileClick : onClick}
         />
     );

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

@@ -17,15 +17,20 @@
 
 // mobile version
 .nav-drawer {
-    display: none;
+    // display: none;
     position: fixed;
     max-width: 400px;
     width: 0;
+    height: 100vh;
     top: 0;
-    bottom: 0;
-    left: 0;
+    left: -100vh;
     z-index: 991;
 
+    -webkit-transition: width 200ms ease-in-out;
+    -moz-transition: width 200ms ease-in-out;
+    -o-transition: width 200ms ease-in-out;
+    transition: width 200ms ease-in-out;
+
     .nav-main {
         padding-left: @spacing-2;
         padding-right: @spacing-2;
@@ -39,6 +44,7 @@
             padding-top: @spacing-2;
             padding-left: @spacing-2;
             padding-right: @spacing-2;
+            cursor: pointer;
         }
     }
 
@@ -61,10 +67,21 @@
     }
 }
 
+.nav-drawer-backdrop {
+    position: fixed;
+    height: 100vh;
+    width: 100vw;
+    top: 0;
+    left: 0;
+    z-index: 991;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
 // mobile version opened
 .nav-drawer-opened {
     display: flex;
     width: 90vw;
+    left: 0;
 }
 
 @media only screen and (min-width: 361px) {
@@ -142,6 +159,11 @@
 .nav-wide {
     width: var(--nav-offset-left);
 
+    .nav-item {
+        margin-left: @spacing-1;
+        margin-right: @spacing-1;
+    }
+
     .toggle {
         .toggle-content {
             margin: @spacing-2;
@@ -171,8 +193,6 @@
 .nav-wide {
     .nav-item {
         flex-direction: row;
-        margin-left: @spacing-1;
-        margin-right: @spacing-1;
 
         .nav-item-icon-wrapper {
             flex: 1;

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

@@ -5,6 +5,7 @@ export const navBottom: string;
 export const navClose: string;
 export const navCloseWrapper: string;
 export const navDrawer: string;
+export const navDrawerBackdrop: string;
 export const navDrawerOpened: string;
 export const navFooter: string;
 export const navGroupItem: string;

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

@@ -33,9 +33,11 @@ export interface LayoutSidebarProps {
     mainItems?: NavigationItemData[];
     barExpanded: boolean;
     submenuExpanded: string | undefined;
+    drawerOpened: boolean;
     mobile: boolean;
     navigationComponent: FC<NavLinkComponentProps>;
     onBarExpandChange(expanded: boolean): void;
+    onDrawerOpenChange(expanded: boolean): void;
     onSubmenuExpandChange(id: string, expanded: boolean): void;
 }
 
@@ -44,29 +46,36 @@ export const LayoutSidebar: FC<LayoutSidebarProps> = ({
     mobile,
     barExpanded,
     submenuExpanded,
+    drawerOpened,
     onBarExpandChange,
     onSubmenuExpandChange,
+    onDrawerOpenChange,
     mainItems,
     top,
     bottom,
     navigationComponent,
 }) => {
-    const handleClick = (e: MouseEvent<never>) => {
-        e.stopPropagation();
+    const closeDrawer = () => {
+        if (mobile) {
+            onDrawerOpenChange?.(false);
+        }
     };
 
     return (
         <LayoutPlacementContext.Provider value="side">
+            {mobile && drawerOpened && (
+                <div className={Styles.navDrawerBackdrop} onClick={closeDrawer} />
+            )}
             <div
                 className={classNames(
                     Styles.nav,
                     mobile && Styles.navDrawer,
-                    mobile && barExpanded && Styles.navDrawerOpened,
+                    mobile && drawerOpened && Styles.navDrawerOpened,
                     !mobile && (barExpanded ? Styles.navWide : Styles.navSlim),
                     className
                 )}
                 data-cy="side-navigation"
-                onClick={handleClick}
+                onClick={closeDrawer}
             >
                 <ThemeProvider mode="dark" className={Styles.navMain}>
                     {mobile && (
@@ -86,7 +95,7 @@ export const LayoutSidebar: FC<LayoutSidebarProps> = ({
                             item.submenu ? (
                                 <SideNavigationGroupItem
                                     key={item.id}
-                                    barExpanded={barExpanded}
+                                    barExpanded={mobile ? drawerOpened : barExpanded}
                                     submenuExpanded={!!item.id && submenuExpanded === item.id}
                                     onSubmenuExpand={onSubmenuExpandChange}
                                     navigationComponent={navigationComponent}

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

@@ -0,0 +1,44 @@
+import {
+    FC,
+    PropsWithChildren,
+    createContext,
+    useCallback,
+    useContext,
+    useRef,
+    useState,
+} from 'react';
+
+interface NotificationsContextType {
+    onNotificationsUpdate: (id: string, hasNotifications: boolean) => void;
+}
+
+const NotificationsContext = createContext<NotificationsContextType>({
+    onNotificationsUpdate: () => {},
+});
+
+export const useNotificationsContext = () => useContext(NotificationsContext);
+
+export const useNotificationsState = () => {
+    const [hasNotifications, setHasNotifications] = useState(false);
+    const items = useRef(new Set<string>());
+    const onNotificationsUpdate = useCallback((id: string, hasNotifications: boolean) => {
+        if (hasNotifications && !items.current.has(id)) {
+            items.current.add(id);
+            setHasNotifications(!!items.current.size);
+        } else if (!hasNotifications && items.current.has(id)) {
+            items.current.delete(id);
+            setHasNotifications(!!items.current.size);
+        }
+    }, []);
+
+    const NotificationsContextProvider: FC<PropsWithChildren> = useCallback(
+        ({ children }) => (
+            <NotificationsContext.Provider value={{ onNotificationsUpdate }}>
+                {children}
+            </NotificationsContext.Provider>
+        ),
+        [onNotificationsUpdate]
+    );
+
+    return { NotificationsContextProvider, hasNotifications };
+};

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

@@ -13,7 +13,7 @@
     margin-top: var(--nav-offset-top);
 
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
 
     .side {
         flex-basis: var(--nav-offset-left);
@@ -31,7 +31,7 @@
 }
 
 .layout-anvil2 {
-    .header {
+    .content-header {
         position: sticky;
         top: var(--nav-offset-top);
         z-index: 989;
@@ -59,11 +59,15 @@
 }
 
 .layout {
-    --nav-offset-top: 49px;
+    --nav-offset-top: 0px;
+    --nav-offset-left: 0px;
 
-    &.layout-mobile {
-        --nav-offset-top: 61px;
-        --nav-offset-left: 0;
+    &.layout-desktop.layout-top {
+        --nav-offset-top: 48px;
+    }
+
+    &.layout-mobile.layout-top {
+        --nav-offset-top: 72px;
     }
 
     &.layout-desktop.layout-nav-slim {
@@ -76,9 +80,27 @@
 
     .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,6 +1,6 @@
 export const __esModule: true;
 export const content: string;
-export const header: string;
+export const contentHeader: string;
 export const layout: string;
 export const layoutAnvil1: string;
 export const layoutAnvil2: string;
@@ -9,6 +9,7 @@ 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

@@ -27,6 +27,8 @@ interface LayoutContentArgs {
     search: boolean;
     longContent: boolean;
     wideContent: boolean;
+    minWidth: boolean;
+    emptyNav: boolean;
 }
 
 export default {
@@ -41,6 +43,8 @@ export default {
         search: true,
         longContent: true,
         wideContent: false,
+        minWidth: false,
+        emptyNav: false,
     } as LayoutContentArgs,
 };
 
@@ -68,6 +72,7 @@ const profile = (
             to="https://google.com"
             tooltip="Google it"
             target="_blank"
+            tag={{ value: true }}
         >
             first link
         </ProfileDropdown.Link>
@@ -180,7 +185,9 @@ const ContentHeader = () => {
         </Fragment>
     );
 };
-const SearchBar = () => <TextField size="small" placeholder="Search" className="w-100-i" />;
+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);
@@ -190,7 +197,7 @@ const useLayoutProps = (args: LayoutContentArgs): TitanLayoutProps => {
         onStateChange: setState,
 
         navigationComponent: NavLinkMock,
-        navigationMainItems: mainNavItems,
+        navigationMainItems: args.emptyNav ? [] : mainNavItems,
 
         profile,
         top: args.search ? <SearchBar /> : undefined,
@@ -200,14 +207,16 @@ const useLayoutProps = (args: LayoutContentArgs): TitanLayoutProps => {
         extraLinksTop,
         extraText: args.extraText ? 'EST (-8 hrs)' : undefined,
 
-        sideTop: args.sideTop ? sidebarTop() : undefined,
+        sideTop: args.sideTop && !args.emptyNav ? sidebarTop() : undefined,
+
+        minContentWidth: args.minWidth ? 900 : undefined,
     };
 };
 
 const Content = (args: LayoutContentArgs) => {
     return (
         <Fragment>
-            <LocationInfo />
+            <LocationInfo className="m-b-3" />
             {args.wideContent && (
                 <div style={{ width: '1200px' }}>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor