@servicetitan/navigation 13.0.0-canary.256.b43c6d7.0 → 13.0.0

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

@@ -2,6 +2,18 @@
 /* stylelint-disable no-duplicate-selectors */
 @import (reference) '@servicetitan/tokens/core/tokens.less';
 
+@keyframes ExtraPulseAnimation {
+    0% {
+        opacity: 0.7;
+    }
+    50% {
+        opacity: 0.5;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
 @size-links-tiny: 24px;
 @bg-light: @color-white;
 @bg-dark: @color-neutral-300;
@@ -36,6 +48,11 @@
         overflow-y: hidden;
     }
 
+    .he-top-left {
+        display: flex;
+        flex-direction: row;
+    }
+
     .he-top-center {
         overflow: hidden;
     }
@@ -146,7 +163,7 @@
         grid-template-columns: repeat(3, 1fr);
         grid-template-rows: 48px;
 
-        .logo,
+        .he-top-left,
         .he-top-center,
         .he-top-right {
             grid-column: span 1;
@@ -352,6 +369,25 @@
     }
 }
 
+.he-top-right .navigation-item-flashing {
+    &::before {
+        content: '';
+        position: absolute;
+        animation-name: ExtraPulseAnimation;
+        will-change: opacity;
+        background-color: var(--color-neutral-60, @color-neutral-60);
+        animation-iteration-count: infinite;
+        animation-duration: 500ms;
+        animation-direction: alternate;
+        border-radius: 12px;
+        inset: 0;
+    }
+
+    &.navigation-item-active::before {
+        background-color: var(--color-blue-200, @color-blue-200);
+    }
+}
+
 // styles specific to main nav links
 .header-navigation .navigation-link {
     font-family: @base-font-family;

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

@@ -1,7 +1,9 @@
 export const __esModule: true;
 export const burger: string;
 export const calculating: string;
+export const extraPulseAnimation: string;
 export const heTopCenter: string;
+export const heTopLeft: string;
 export const heTopRight: string;
 export const heTopRightText: string;
 export const header: string;
@@ -29,6 +31,7 @@ export const navigationIconActive: string;
 export const navigationItemActive: string;
 export const navigationItemCounter: string;
 export const navigationItemCounterLong: string;
+export const navigationItemFlashing: string;
 export const navigationItemIconState: string;
 export const navigationItemLabel: string;
 export const navigationLink: string;

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

@@ -5,6 +5,7 @@ import { LayoutPlacementContext } from './layout-context';
 import { LayoutHeaderNavigationTrigger } from './layout-header-links';
 import * as Styles from './layout-header.module.less';
 import { LayoutLogo, TitanLayoutLogoProps, isLogoCustom } from './layout-logo';
+import { withTooltip } from './with-tooltip';
 
 export type LayoutHeaderProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {
     right?: ReactNode;
@@ -22,6 +23,8 @@ export type LayoutHeaderProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'
     isMobile: boolean;
     variant: 'light' | 'dark';
     hasNotifications: boolean;
+    hasBurger: boolean;
+    burgerTooltip?: string;
     onBurgerClick?: (e: MouseEvent<never>) => void;
 };
 
@@ -37,9 +40,24 @@ export const LayoutHeader: FC<LayoutHeaderProps> = ({
     logo,
     profile,
     variant,
+    hasBurger,
+    burgerTooltip,
     onBurgerClick,
     ...rest
 }) => {
+    const burgerElement = hasBurger && (
+        <div className={Styles.burger}>
+            <LayoutHeaderNavigationTrigger
+                id="burger"
+                title=""
+                icon={SvgBurgerMenu}
+                iconActive={undefined}
+                onClick={onBurgerClick}
+                tag={{ value: hasNotifications }}
+            />
+        </div>
+    );
+
     return (
         <LayoutPlacementContext.Provider value="top">
             <div
@@ -53,19 +71,14 @@ export const LayoutHeader: FC<LayoutHeaderProps> = ({
                 data-cy="header-navigation"
                 {...rest}
             >
-                {isMobile && (
-                    <div className={Styles.burger}>
-                        <LayoutHeaderNavigationTrigger
-                            id="burger"
-                            title=""
-                            icon={SvgBurgerMenu}
-                            iconActive={undefined}
-                            onClick={onBurgerClick}
-                            tag={{ value: hasNotifications }}
-                        />
-                    </div>
-                )}
-                <LayoutLogo {...logo} />
+                <div className={Styles.heTopLeft}>
+                    {burgerElement &&
+                        (burgerTooltip
+                            ? withTooltip(burgerElement, burgerTooltip, { placement: 'bottom-end' })
+                            : burgerElement)}
+                    <LayoutLogo {...logo} />
+                </div>
+
                 <div
                     className={classNames(
                         Styles.heTopCenter,

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

@@ -3,12 +3,13 @@ import SvgAccountInactive from '@servicetitan/anvil2/assets/icons/st/gnav_accoun
 
 import { FC, MouseEvent, useEffect, useState } from 'react';
 import { NavLinkComponentProps } from '../../utils/navigation-context';
+import { getCounterTag } from '../../utils/side-nav';
 import {
-    ProfileDropdown as DesktopProfileDropdown,
     ProfileDropdownLinkProps,
     ProfileDropdownProps,
     ProfileDropdownSectionProps,
-} from '../profile-dropdown/profile-dropdown';
+} from '../profile-dropdown/interface';
+import { DesktopProfileDropdown } from '../profile-dropdown/profile-dropdown';
 import { NavigationComponentProps } from './interface-internal';
 import { useTitanLayoutContext } from './layout-context';
 import {
@@ -23,7 +24,7 @@ export type {
     ProfileDropdownProps,
     ProfileDropdownSectionProps,
     ProfileDropdownLinkProps,
-} from '../profile-dropdown/profile-dropdown';
+} from '../profile-dropdown/interface';
 
 const ExternalNavComponent: FC<NavLinkComponentProps> = ({
     children,
@@ -37,20 +38,27 @@ const ExternalNavComponent: FC<NavLinkComponentProps> = ({
     </a>
 );
 
-const ProfileDropdownContent: FC<ProfileDropdownProps> = props => {
+function ProfileDropdownComponent(props: ProfileDropdownProps) {
     const { breakpoint, NavigationComponent } = useTitanLayoutContext();
     return breakpoint.isMobile ? (
         <MobileProfileDropdown {...props} navigationComponent={NavigationComponent} />
     ) : (
         <DesktopProfileDropdown {...props} />
     );
-};
-ProfileDropdownContent.displayName = 'ProfileDropdown';
+}
 const profileId = '--profile';
 
 const MobileProfileDropdown: FC<ProfileDropdownProps & NavigationComponentProps> = ({
+    direction,
+    trigger,
+    hintPopup,
+    portal,
+    width,
+    onClose,
+    onOpen,
+    className,
     children,
-    ...props
+    ...rest
 }) => {
     const [expanded, setExpanded] = useState(false);
     const { hasNotifications, NotificationsContextProvider } = useNotificationsState();
@@ -73,7 +81,8 @@ const MobileProfileDropdown: FC<ProfileDropdownProps & NavigationComponentProps>
                 icon={SvgAccountInactive}
                 iconActive={SvgAccountActive}
                 isActive={expanded}
-                {...props}
+                className={className}
+                {...rest}
                 submenuExpanded={expanded}
                 onExpandToggle={onExpandToggle}
                 onClick={onExpandToggle}
@@ -106,71 +115,85 @@ const getText = (children: any, text: any): string | undefined => {
     return undefined;
 };
 
-const getTag = (
-    tag: ProfileDropdownLinkProps['tag'],
-    counter: ProfileDropdownLinkProps['counter']
-): boolean => {
-    return !!tag?.value || !!counter;
-};
-
-const ProfileDropdownSection: FC<ProfileDropdownSectionProps> = props => {
+function ProfileDropdownSection(props: ProfileDropdownSectionProps) {
     const { breakpoint } = useTitanLayoutContext();
     return breakpoint.isMobile ? (
         <MobileProfileDropdownSection {...props} />
     ) : (
         <DesktopProfileDropdown.Section {...props} />
     );
-};
+}
 const MobileProfileDropdownSection: FC<ProfileDropdownSectionProps> = ({
+    id,
+    tooltip,
+    tag,
+    counter,
+
+    className,
     children,
     text,
-    tooltip,
-    title,
-    ...props
+    ...rest
 }) => {
     const sectionText = getText(children, text);
     const { onNotificationsUpdate } = useNotificationsContext();
-    onNotificationsUpdate(props.id, getTag(props.tag, props.counter));
+    const tagData = getCounterTag(counter, tag);
+    onNotificationsUpdate(id, !!tagData);
 
     return sectionText ? (
-        <InternalSideNavigationGroupTrigger {...props} title={sectionText} />
+        <InternalSideNavigationGroupTrigger
+            {...rest}
+            id={id}
+            title={sectionText}
+            isActive={undefined}
+            tag={tagData}
+            className={className}
+        />
     ) : null;
 };
 
-const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = props => {
+function ProfileDropdownLink(props: ProfileDropdownLinkProps) {
     const { breakpoint, NavigationComponent } = useTitanLayoutContext();
     return breakpoint.isMobile ? (
         <MobileProfileDropdownLink {...props} navigationComponent={NavigationComponent} />
     ) : (
         <DesktopProfileDropdown.Link {...props} />
     );
-};
+}
 const MobileProfileDropdownLink: FC<ProfileDropdownLinkProps & NavigationComponentProps> = ({
+    id,
     external,
     to,
     tooltip,
     text,
     children,
+    className,
     navigationComponent,
-    ...props
+    tag,
+    counter,
+    ...rest
 }) => {
     const { onNotificationsUpdate } = useNotificationsContext();
     const linkText = getText(children, text);
     const isExternalLink = external ?? to?.startsWith('http');
-    onNotificationsUpdate(props.id, getTag(props.tag, props.counter));
+    const tagData = getCounterTag(counter, tag);
+    onNotificationsUpdate(id, !!tagData);
 
     return linkText ? (
         <InternalSideNavigationGroupLink
-            {...props}
+            {...rest}
+            id={id}
             to={to}
             title={linkText}
+            isActive={undefined}
+            className={className}
+            tag={tagData}
             parentId={profileId}
             navigationComponent={isExternalLink ? ExternalNavComponent : navigationComponent}
         />
     ) : null;
 };
 
-export const ProfileDropdown = Object.assign(ProfileDropdownContent, {
+export const ProfileDropdown = Object.assign(ProfileDropdownComponent, {
     Divider: ProfileDropdownDivider,
     Link: ProfileDropdownLink,
     Section: ProfileDropdownSection,