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

package/src/components/profile-dropdown/profile-dropdown.tsx

@@ -148,7 +148,9 @@ const ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps> = ({
     );
 };
 
-export type ProfileItemContent = { children: string } | { children: ReactNode; text: string };
+export type ProfileItemContent =
+    | { children: string; text?: string }
+    | { children: ReactNode; text: string };
 
 export interface ProfileDropdownSectionPropsStrict {
     children: ReactNode;
@@ -166,6 +168,7 @@ export const ProfileDropdownSection: FC<ProfileDropdownSectionProps> = ({
     children,
     className,
     id,
+    text,
     tooltip,
     onClick,
     ...rest
@@ -221,6 +224,7 @@ export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
     counter,
     tag,
     target,
+    text,
     to,
     tooltip,
     onClick,

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

@@ -10,6 +10,7 @@
     background-color: @color-white;
     color: @color-black;
     border-bottom: 1px solid @color-neutral-60;
+    box-sizing: border-box;
 
     & > * {
         overflow-y: hidden;
@@ -20,6 +21,10 @@
         align-items: center;
     }
 
+    .he-top-center {
+        overflow: hidden;
+    }
+
     .he-top-right {
         & > * {
             color: @color-black;
@@ -126,7 +131,8 @@
 // mobile
 @media only screen and (max-width: 768px) {
     .header {
-        padding: @spacing-1 @spacing-half;
+        padding: @spacing-2 @spacing-0;
+        height: var(--nav-offset-top);
 
         .navigation-link {
             padding: 10px;
@@ -138,6 +144,14 @@
             margin-left: @spacing-3;
             margin-right: @spacing-3;
         }
+
+        .he-top-left {
+            margin-left: @spacing-half;
+        }
+
+        .he-top-right {
+            margin-right: @spacing-half;
+        }
     }
 }
 
@@ -154,7 +168,8 @@
         color: @color-white;
         font-weight: @font-weight-semibold;
         font-size: 8px !important;
-        min-width: 12px;
+        min-width: 16px !important;
+        height: 16px !important;
         position: absolute;
         top: 4px;
         right: -2px;
@@ -172,3 +187,12 @@
         right: -8px;
     }
 }
+
+@media only screen and (min-width: 768px) {
+    .navigation-link {
+        .navigation-item-counter {
+            min-width: 12px !important;
+            height: 12px !important;
+        }
+    }
+}

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

@@ -1,7 +1,7 @@
 import SvgBurgerMenu from '@servicetitan/anvil2/assets/icons/material/round/menu.svg';
 import classNames from 'classnames';
 import { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from 'react';
-import { LayoutPlacementContext, useTitanLayoutContext } from './layout-context';
+import { LayoutPlacementContext } from './layout-context';
 import { LayoutHeaderNavigationTrigger } from './layout-header-links';
 import * as Styles from './layout-header.module.less';
 import { TitanLayoutLogoProps } from './layout-logo';
@@ -25,6 +25,8 @@ export type LayoutHeaderProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'
     logo: ReactElement<TitanLayoutLogoProps>;
     profile?: ReactElement;
 
+    isMobile: boolean;
+    hasNotifications: boolean;
     onBurgerClick?: (e: MouseEvent) => void;
 };
 
@@ -35,13 +37,13 @@ export const LayoutHeader: FC<LayoutHeaderProps> = ({
     rightClassName,
     center,
     centerClassName,
+    isMobile,
+    hasNotifications,
     logo,
     profile,
     onBurgerClick,
     ...rest
 }) => {
-    const { breakpoint } = useTitanLayoutContext();
-
     return (
         <LayoutPlacementContext.Provider value="top">
             <div
@@ -50,7 +52,7 @@ export const LayoutHeader: FC<LayoutHeaderProps> = ({
                 data-cy="header-navigation"
             >
                 <div className={classNames(Styles.heTopLeft)} data-cy="navigation-left">
-                    {breakpoint.isMobile && (
+                    {isMobile && (
                         <LayoutHeaderNavigationTrigger
                             id="burger"
                             title=""
@@ -58,6 +60,7 @@ export const LayoutHeader: FC<LayoutHeaderProps> = ({
                             iconActive={SvgBurgerMenu}
                             className="m-r-1"
                             onClick={onBurgerClick}
+                            tag={{ value: hasNotifications }}
                         />
                     )}
                     {logo}

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

@@ -33,20 +33,27 @@ export const TitanLayoutLogo: FC<TitanLayoutLogoProps> = ({
     const Wrapper = logoWrapper;
     const logoSize = isMobile ? 44 : 56;
     const logoCompanySize = 48;
+    const showCompanyTitle = title === true && !isMobile;
 
     return (
-        <div className={classNames('d-f align-items-center', className)}>
-            {typeof title === 'string' ? (
+        <div
+            className={classNames(
+                'd-f align-items-center',
+                { 'p-t-half': showCompanyTitle },
+                className
+            )}
+        >
+            {showCompanyTitle ? (
+                <Wrapper>
+                    <LogoCompanyTitle height={logoCompanySize} />
+                </Wrapper>
+            ) : typeof title === 'string' ? (
                 <Fragment>
                     <LogoTitan size={logoSize} mantleFill={mantleFill} logoWrapper={Wrapper} />
                     {!isMobile && (
                         <LogoTitanTitle className="c-inherit m-l-1">{title}</LogoTitanTitle>
                     )}
                 </Fragment>
-            ) : title === true && !isMobile ? (
-                <Wrapper className="">
-                    <LogoCompanyTitle height={logoCompanySize} />
-                </Wrapper>
             ) : (
                 <LogoTitan size={logoSize} mantleFill={mantleFill} logoWrapper={Wrapper} />
             )}

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

@@ -18,7 +18,7 @@ export default {
 
 export const ProfileDefault = withTitanLayout(
     <ProfileDropdown>
-        <ProfileDropdown.Link id="first" to="https://google.com">
+        <ProfileDropdown.Link id="first" to="https://google.com" external>
             first link
         </ProfileDropdown.Link>
         <ProfileDropdown.Section id="second" onClick={() => alert('second click')}>

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

@@ -1,8 +1,8 @@
 import SvgAccountActive from '@servicetitan/anvil2/assets/icons/st/gnav_account_active.svg';
 import SvgAccountInactive from '@servicetitan/anvil2/assets/icons/st/gnav_account_inactive.svg';
 
-import { FC, useState } from 'react';
-import { NavigationComponentContext } from '../../utils/navigation-context';
+import { FC, MouseEvent, useEffect, useState } from 'react';
+import { NavLinkComponentProps, NavigationComponentContext } from '../../utils/navigation-context';
 import {
     ProfileDropdown as DesktopProfileDropdown,
     ProfileDropdownLinkProps,
@@ -17,6 +17,7 @@ import {
     InternalSideNavigationGroupLink,
     InternalSideNavigationGroupTrigger,
 } from './layout-sidebar-links-internal';
+import { useNotificationsContext, useNotificationsState } from './notifications-context';
 
 export type {
     ProfileDropdownProps,
@@ -24,6 +25,10 @@ export type {
     ProfileDropdownLinkProps,
 } from '../profile-dropdown/profile-dropdown';
 
+const ExternalNavComponent: FC<NavLinkComponentProps> = ({ children, isActive, ...props }) => (
+    <a {...props}>{children}</a>
+);
+
 const ProfileDropdownContent: FC<ProfileDropdownProps> = props => {
     const { breakpoint, NavigationComponent } = useTitanLayoutContext();
     return breakpoint.isMobile ? (
@@ -40,24 +45,37 @@ const MobileProfileDropdown: FC<ProfileDropdownProps & NavigationComponentProps>
     children,
     ...props
 }) => {
+    const id = '__profile';
     const [expanded, setExpanded] = useState(false);
-    const onExpandToggle = () => setExpanded(!expanded);
+    const { hasNotifications, NotificationsContextProvider } = useNotificationsState();
+    const { onNotificationsUpdate } = useNotificationsContext();
+    const onExpandToggle = (e: MouseEvent<never>) => {
+        e.stopPropagation();
+        setExpanded(!expanded);
+    };
+
+    useEffect(() => {
+        onNotificationsUpdate(id, hasNotifications);
+    }, [hasNotifications, onNotificationsUpdate]);
+
     return (
-        <InternalSideNavigationGroup
-            id="__profile"
-            to={undefined}
-            title="Profile"
-            icon={SvgAccountInactive}
-            iconActive={SvgAccountActive}
-            isActive={expanded}
-            {...props}
-            submenuExpanded={expanded}
-            onExpandToggle={onExpandToggle}
-            onClick={onExpandToggle}
-            tag={undefined}
-        >
-            {children}
-        </InternalSideNavigationGroup>
+        <NotificationsContextProvider>
+            <InternalSideNavigationGroup
+                id={id}
+                to={undefined}
+                title="Profile"
+                icon={SvgAccountInactive}
+                iconActive={SvgAccountActive}
+                isActive={expanded}
+                {...props}
+                submenuExpanded={expanded}
+                onExpandToggle={onExpandToggle}
+                onClick={onExpandToggle}
+                tag={{ value: hasNotifications }}
+            >
+                {children}
+            </InternalSideNavigationGroup>
+        </NotificationsContextProvider>
     );
 };
 
@@ -106,17 +124,22 @@ const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = props => {
     );
 };
 const MobileProfileDropdownLink: FC<ProfileDropdownLinkProps & NavigationComponentProps> = ({
+    external,
     to,
     navigationComponent,
     ...props
 }) => {
+    const { onNotificationsUpdate } = useNotificationsContext();
     const text = getText(props);
+    const isExternalLink = external ?? to?.startsWith('http');
+    onNotificationsUpdate(props.id, !!props.tag?.value);
+
     return text ? (
         <InternalSideNavigationGroupLink
             {...props}
             to={to}
             title={text}
-            navigationComponent={navigationComponent}
+            navigationComponent={isExternalLink ? ExternalNavComponent : navigationComponent}
         />
     ) : null;
 };

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

@@ -156,7 +156,9 @@ export const InternalSideNavigationLink: FC<InternalSideNavigationLinkProps> = (
 
 /** Side Navigation menu trigger (for internal usage) */
 export const InternalSideNavigationTrigger: FC<
-    Omit<InternalSideNavigationLinkProps, 'to' | 'navigationComponent'> & { onClick?: () => void }
+    Omit<InternalSideNavigationLinkProps, 'to' | 'navigationComponent'> & {
+        onClick?: (e: MouseEvent<never>) => void;
+    }
 > = ({ className, dataPrefix, isActive, submenuExpanded, onExpandToggle, onClick, ...props }) => {
     return (
         <div
@@ -180,12 +182,22 @@ export const InternalSideNavigationTrigger: FC<
 
 export const InternalSideNavigationGroupLink: FC<
     NavigationSubmenuItemData & NavigationComponentProps
-> = ({ id, counter, tag, title, to, isActive, navigationComponent: NavigationComponent }) => {
+> = ({
+    id,
+    counter,
+    tag,
+    title,
+    to,
+    isActive,
+    navigationComponent: NavigationComponent,
+    ...rest
+}) => {
     return (
         <NavigationComponent
+            key={id}
             data-cy={`navigation-item-${id}`}
             data-pendo={`navigation-item-${id}`}
-            key={id}
+            {...rest}
             to={to}
             className={classNames(Styles.submenuItem, Styles.submenuLink, {
                 [Styles.submenuLinkActive]: isActive === true,
@@ -201,12 +213,13 @@ export const InternalSideNavigationGroupLink: FC<
 
 export const InternalSideNavigationGroupTrigger: FC<
     Omit<NavigationSubmenuItemData, 'to'> & { onClick?: (e: MouseEvent<any>) => void }
-> = ({ id, counter, onClick, tag, title, isActive }) => {
+> = ({ id, counter, onClick, tag, title, isActive, ...rest }) => {
     return (
         <div
             data-cy={`navigation-item-${id}`}
             data-pendo={`navigation-item-${id}`}
             key={id}
+            {...rest}
             className={classNames(Styles.submenuItem, {
                 [Styles.submenuLink]: !!onClick,
                 [Styles.submenuLinkActive]: isActive === true,
@@ -231,7 +244,7 @@ export const InternalSideNavigationGroup: FC<
             onExpandToggle?: (e: MouseEvent<never>) => void;
             tag: BadgeTagProps | undefined;
             to: NavigationItemData['to'] | undefined;
-            onClick?: () => void;
+            onClick?: (e: MouseEvent<never>) => void;
         }
 > = ({ children, submenuExpanded, to, onExpandToggle, onClick, ...props }) => {
     return (

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

@@ -21,8 +21,8 @@
     position: fixed;
     max-width: 400px;
     width: 0;
+    height: 100vh;
     top: 0;
-    bottom: 0;
     left: 0;
     z-index: 991;
 
@@ -61,6 +61,16 @@
     }
 }
 
+.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;
@@ -142,6 +152,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 +186,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;
@@ -53,17 +53,22 @@
 
 .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-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 +81,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;