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

package/src/components/header-navigation/header-navigation.module.less.d.ts

@@ -0,0 +1,22 @@
+export const __esModule: true;
+export const calculating: string;
+export const center: string;
+export const heBottom: string;
+export const heTopCenter: string;
+export const heTopLeft: string;
+export const heTopRight: string;
+export const header: string;
+export const headerStacked: string;
+export const navigationIcon: string;
+export const navigationItem: string;
+export const navigationItemActive: string;
+export const navigationItemCounter: string;
+export const navigationItemCounterLong: string;
+export const navigationItemMain: string;
+export const navigationItemOverflow: string;
+export const navigationItemTitle: string;
+export const navigationLink: string;
+export const navigationOverflow: string;
+export const overflowPopover: string;
+export const right: string;
+

package/src/components/header-navigation/header-navigation.stories.tsx

@@ -154,7 +154,7 @@ export const WithAllMonolithData = () => (
                 Task Management
             </ProfileDropdown.Link>
             <ProfileDropdown.Divider />
-            <ProfileDropdown.Link id="sign-out" to="https://googgle.com">
+            <ProfileDropdown.Link id="sign-out" to="https://googgle.com" text="Sign Out">
                 Sign Out <span className="c-neutral-100 m-l-half t-truncate">James Bond</span>
             </ProfileDropdown.Link>
             <ProfileDropdown.Section id="userid" className="c-neutral-100 fs-1">

package/src/components/left-navigation/header-navigation-tiny.module.less.d.ts

@@ -0,0 +1,15 @@
+export const __esModule: true;
+export const heTopCenter: string;
+export const heTopLeft: string;
+export const heTopRight: string;
+export const headerTiny: string;
+export const navigationIcon: string;
+export const navigationIconActive: string;
+export const navigationItemActive: string;
+export const navigationItemCounter: string;
+export const navigationItemCounterLong: string;
+export const navigationItemIconState: string;
+export const navigationItemLabel: string;
+export const navigationItemOverflow: string;
+export const navigationLink: string;
+

package/src/components/left-navigation/header-navigation-tiny.stories.tsx

@@ -93,7 +93,7 @@ export const WithAllMonolithData = () => (
                         Task Management
                     </ProfileDropdown.Link>
                     <ProfileDropdown.Divider />
-                    <ProfileDropdown.Link id="sign-out" to="https://googgle.com">
+                    <ProfileDropdown.Link id="sign-out" to="https://googgle.com" text="Sign Out">
                         Sign Out{' '}
                         <span className="c-neutral-100 m-l-half t-truncate">James Bond</span>
                     </ProfileDropdown.Link>
@@ -162,7 +162,7 @@ export const WithAllMonolithDataCommercial = () => (
                         Task Management
                     </ProfileDropdown.Link>
                     <ProfileDropdown.Divider />
-                    <ProfileDropdown.Link id="sign-out" to="https://googgle.com">
+                    <ProfileDropdown.Link id="sign-out" to="https://googgle.com" text="Sign Out">
                         Sign Out{' '}
                         <span className="c-neutral-100 m-l-half t-truncate">James Bond</span>
                     </ProfileDropdown.Link>

package/src/components/left-navigation/side-navigation-links.tsx

@@ -11,7 +11,7 @@ import {
 } from './side-navigation-links-internal';
 
 const WrappedLink: FC<{
-    children: ReactElement;
+    children: ReactElement<any>;
     wrapper: NonNullable<SideNavigationLinkProps['wrapper']>;
 }> = ({ children, wrapper: WrapperComponent }) => {
     return (

package/src/components/left-navigation/side-navigation.module.less.d.ts

@@ -0,0 +1,48 @@
+export const __esModule: true;
+export const divider: string;
+export const navigationGroupItem: string;
+export const navigationGroupWrapper: string;
+export const navigationIcon: string;
+export const navigationIconActive: string;
+export const navigationIconInactive: string;
+export const navigationItem: string;
+export const navigationItemActive: string;
+export const navigationItemCounter: string;
+export const navigationItemCounterLong: string;
+export const navigationItemGroupToggle: string;
+export const navigationItemGroupToggleClick: string;
+export const navigationItemGroupToggleWrapper: string;
+export const navigationItemIconSwitch: string;
+export const navigationItemIconWrapper: string;
+export const navigationItemTextCollapsed: string;
+export const navigationItemTextExpanded: string;
+export const navigationItemTextSmall: string;
+export const optionsIcon: string;
+export const optionsIconWrapper: string;
+export const optionsItem: string;
+export const optionsItemContent: string;
+export const optionsItemText: string;
+export const sideNav: string;
+export const sideNavBottom: string;
+export const sideNavContent: string;
+export const sideNavExpanded: string;
+export const sideNavFooter: string;
+export const sideNavMain: string;
+export const sideNavNavigation: string;
+export const sideNavSlim: string;
+export const sideNavSubmenuBar: string;
+export const sideNavSubmenuDrawer: string;
+export const sideNavTop: string;
+export const sideNavV1: string;
+export const sideNavV2: string;
+export const submenu: string;
+export const submenuBar: string;
+export const submenuGroupHeader: string;
+export const submenuGroupHeaderEmpty: string;
+export const submenuLink: string;
+export const submenuLinkActive: string;
+export const submenuLinkCounter: string;
+export const submenuPopover: string;
+export const submenuWrapper: string;
+export const submenuWrapperCollapsed: string;
+

package/src/components/logo/logo-titan-text.module.less.d.ts

@@ -0,0 +1,6 @@
+export const __esModule: true;
+export const container: string;
+export const logoTextDescription: string;
+export const logoTextTitle: string;
+export const logoWrapper: string;
+

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

@@ -3,7 +3,7 @@ import { CSSProperties, FC, ReactNode } from 'react';
 import { LogoTitanSvg } from './logo-titan';
 import * as Styles from './logo-titan-text.module.less';
 
-export type WrapperProps = FC<{ className: string; children: ReactNode; style?: CSSProperties }>;
+export type WrapperProps = FC<{ className?: string; children: ReactNode; style?: CSSProperties }>;
 
 export interface LogoTitanProps {
     mantleFill?: string;

package/src/components/profile-dropdown/profile-dropdown.module.less

@@ -143,6 +143,8 @@
         position: absolute;
         top: @spacing-half;
         margin-left: @spacing-half;
+        min-width: 12px !important;
+        min-height: 12px !important;
     }
 }
 

package/src/components/profile-dropdown/profile-dropdown.module.less.d.ts

@@ -0,0 +1,21 @@
+export const __esModule: true;
+export const avatarBadge: string;
+export const badge: string;
+export const badgeNoContent: string;
+export const badgeWithContent: string;
+export const counter: string;
+export const dropdown: string;
+export const dropdownContent: string;
+export const dropdownContentBottomLeft: string;
+export const dropdownContentWrapper: string;
+export const dropdownLink: string;
+export const dropdownSection: string;
+export const expandIcon: string;
+export const hint: string;
+export const hintContent: string;
+export const info: string;
+export const profileImage: string;
+export const triggerContainer: string;
+export const triggerContainerHintArrow: string;
+export const triggerContainerLegacy: string;
+

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

@@ -6,6 +6,7 @@ import SvgAccountInactive from '@servicetitan/anvil2/assets/icons/st/gnav_accoun
 import { BodyText, Popover, PopoverPropsStrict } from '@servicetitan/design-system';
 import classNames from 'classnames';
 import {
+    ComponentPropsWithoutRef,
     FC,
     HTMLAttributeAnchorTarget,
     MouseEvent,
@@ -147,6 +148,10 @@ const ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps> = ({
     );
 };
 
+export type ProfileItemContent =
+    | { children: string; text?: string }
+    | { children: ReactNode; text: string };
+
 export interface ProfileDropdownSectionPropsStrict {
     children: ReactNode;
     id: string;
@@ -155,14 +160,15 @@ export interface ProfileDropdownSectionPropsStrict {
     onClick?(e: MouseEvent): void;
 }
 
-export interface ProfileDropdownSectionProps extends ProfileDropdownSectionPropsStrict {
-    [key: string]: any;
-}
+export type ProfileDropdownSectionProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> &
+    ProfileDropdownSectionPropsStrict &
+    ProfileItemContent;
 
 export const ProfileDropdownSection: FC<ProfileDropdownSectionProps> = ({
     children,
     className,
     id,
+    text,
     tooltip,
     onClick,
     ...rest
@@ -206,9 +212,9 @@ export interface ProfileDropdownLinkPropsStrict {
     counter?: CounterTagValue;
 }
 
-export interface ProfileDropdownLinkProps extends ProfileDropdownLinkPropsStrict {
-    [key: string]: any;
-}
+export type ProfileDropdownLinkProps = Omit<ComponentPropsWithoutRef<'a'>, 'children'> &
+    ProfileDropdownLinkPropsStrict &
+    ProfileItemContent;
 
 export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
     children,
@@ -218,6 +224,7 @@ export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
     counter,
     tag,
     target,
+    text,
     to,
     tooltip,
     onClick,

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

@@ -4,28 +4,29 @@
 @size-links-tiny: 24px;
 
 .header {
-    display: grid;
+    --nav-top-content-height: 32px;
+    display: flex;
+    justify-content: space-between;
 
     background-color: @color-white;
     color: @color-black;
+    box-sizing: border-box;
+    outline: 1px solid #dfe0e1;
 
     & > * {
         overflow-y: hidden;
     }
 
     .he-top-left {
-        grid-column: span 1;
         display: flex;
         align-items: center;
     }
 
     .he-top-center {
-        grid-column: span 1;
+        overflow: hidden;
     }
 
     .he-top-right {
-        grid-column: span 1;
-
         & > * {
             color: @color-black;
         }
@@ -92,31 +93,67 @@
 // desktop
 @media only screen and (min-width: 768px) {
     .header {
-        grid-template-columns: repeat(3, 1fr);
-        grid-template-rows: 48px;
-
+        height: var(--nav-offset-top);
         .navigation-link {
             margin: 6px 2px;
             padding: 6px 6px;
         }
+
+        .he-top-left {
+            padding-left: @spacing-1;
+        }
+        .he-top-center {
+            flex: 1;
+            margin-left: @spacing-2;
+            margin-right: @spacing-2;
+            max-width: 400px;
+        }
     }
+}
+// desktop wide
+@media only screen and (min-width: 1200px) {
+    .header {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        grid-template-rows: 48px;
 
-    .he-top-left {
-        padding-left: @spacing-1;
+        .he-top-left,
+        .he-top-center,
+        .he-top-right {
+            grid-column: span 1;
+        }
+
+        .he-top-center {
+            max-width: unset;
+        }
     }
 }
 
 // mobile
 @media only screen and (max-width: 768px) {
     .header {
-        grid-template-columns: repeat(3, 1fr);
-        grid-template-rows: 44px;
-
-        padding: @spacing-1 @spacing-half;
+        padding: @spacing-2 @spacing-0;
+        height: var(--nav-offset-top);
+        --nav-top-content-height: 40px;
 
         .navigation-link {
             padding: 10px;
         }
+
+        .he-top-center {
+            max-width: unset;
+            flex: 1;
+            margin-left: @spacing-3;
+            margin-right: @spacing-3;
+        }
+
+        .he-top-left {
+            margin-left: @spacing-half;
+        }
+
+        .he-top-right {
+            margin-right: @spacing-half;
+        }
     }
 }
 
@@ -133,7 +170,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;
@@ -151,3 +189,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.module.less.d.ts

@@ -0,0 +1,16 @@
+export const __esModule: true;
+export const heTopCenter: string;
+export const heTopLeft: string;
+export const heTopRight: string;
+export const heTopRightText: string;
+export const header: string;
+export const navigationIcon: string;
+export const navigationIconActive: string;
+export const navigationItemActive: string;
+export const navigationItemCounter: string;
+export const navigationItemCounterLong: string;
+export const navigationItemIconState: string;
+export const navigationItemLabel: string;
+export const navigationItemOverflow: string;
+export const navigationLink: string;
+

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,12 +60,17 @@ export const LayoutHeader: FC<LayoutHeaderProps> = ({
                             iconActive={SvgBurgerMenu}
                             className="m-r-1"
                             onClick={onBurgerClick}
+                            tag={{ value: hasNotifications }}
                         />
                     )}
                     {logo}
                 </div>
                 <div
-                    className={classNames(Styles.heTopCenter, centerClassName)}
+                    className={classNames(
+                        Styles.heTopCenter,
+                        'd-f align-items-center justify-content-center',
+                        centerClassName
+                    )}
                     data-cy="navigation-center"
                 >
                     {center}

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')}>
@@ -33,5 +33,14 @@ export const ProfileDefault = withTitanLayout(
             third link
         </ProfileDropdown.Link>
         <ProfileDropdown.Divider />
+        <ProfileDropdown.Section
+            id="forth"
+            onClick={() => alert('forth click')}
+            text="Sign Out user"
+        >
+            Sign Out
+            <span className="c-neutral-60 m-l-1">user</span>
+        </ProfileDropdown.Section>
+        <ProfileDropdown.Divider />
     </ProfileDropdown>
 );

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>
     );
 };
 
@@ -70,6 +88,18 @@ const ProfileDropdownDivider: FC = () => {
     );
 };
 
+const getText = (props: any): string | undefined => {
+    if (typeof props.children === 'string') {
+        return props.children;
+    }
+
+    if (typeof props.text === 'string') {
+        return props.text;
+    }
+
+    return undefined;
+};
+
 const ProfileDropdownSection: FC<ProfileDropdownSectionProps> = props => {
     const { breakpoint } = useTitanLayoutContext();
     return breakpoint.isMobile ? (
@@ -79,9 +109,9 @@ const ProfileDropdownSection: FC<ProfileDropdownSectionProps> = props => {
     );
 };
 const MobileProfileDropdownSection: FC<ProfileDropdownSectionProps> = props => {
-    const title = typeof props.children === 'string' ? props.children : undefined;
-    return title ? (
-        <InternalSideNavigationGroupTrigger id={props.id} title={title} onClick={props.onClick} />
+    const text = getText(props);
+    return text ? (
+        <InternalSideNavigationGroupTrigger id={props.id} title={text} onClick={props.onClick} />
     ) : null;
 };
 
@@ -94,17 +124,22 @@ const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = props => {
     );
 };
 const MobileProfileDropdownLink: FC<ProfileDropdownLinkProps & NavigationComponentProps> = ({
+    external,
     to,
     navigationComponent,
     ...props
 }) => {
-    const title = typeof props.children === 'string' ? props.children : undefined;
-    return title ? (
+    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={title}
-            navigationComponent={navigationComponent}
+            title={text}
+            navigationComponent={isExternalLink ? ExternalNavComponent : navigationComponent}
         />
     ) : null;
 };