@servicetitan/navigation 12.0.2 → 13.0.0-canary.256.299dd08.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;
@@ -225,6 +237,11 @@
 }
 
 .header-dark.header-logo-custom {
+    &.header-desktop .logo-short-wrapper {
+        background-color: @color-white;
+        color: @c-light;
+    }
+
     .burger .navigation-link {
         color: inherit !important;
     }
@@ -347,6 +364,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,6 +1,7 @@
 export const __esModule: true;
 export const burger: string;
 export const calculating: string;
+export const extraPulseAnimation: string;
 export const heTopCenter: string;
 export const heTopRight: string;
 export const heTopRightText: string;
@@ -29,6 +30,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

@@ -1,6 +1,6 @@
 import SvgBurgerMenu from '@servicetitan/anvil2/assets/icons/material/round/menu.svg';
 import classNames from 'classnames';
-import { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, FC, MouseEvent, ReactElement, ReactNode } from 'react';
 import { LayoutPlacementContext } from './layout-context';
 import { LayoutHeaderNavigationTrigger } from './layout-header-links';
 import * as Styles from './layout-header.module.less';
@@ -22,7 +22,7 @@ export type LayoutHeaderProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'
     isMobile: boolean;
     variant: 'light' | 'dark';
     hasNotifications: boolean;
-    onBurgerClick?: (e: MouseEvent) => void;
+    onBurgerClick?: (e: MouseEvent<never>) => void;
 };
 
 export const LayoutHeader: FC<LayoutHeaderProps> = ({

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

@@ -2,13 +2,14 @@ import SvgAccountActive from '@servicetitan/anvil2/assets/icons/st/gnav_account_
 import SvgAccountInactive from '@servicetitan/anvil2/assets/icons/st/gnav_account_inactive.svg';
 
 import { FC, MouseEvent, useEffect, useState } from 'react';
-import { NavLinkComponentProps, NavigationComponentContext } from '../../utils/navigation-context';
+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,24 +38,27 @@ const ExternalNavComponent: FC<NavLinkComponentProps> = ({
     </a>
 );
 
-const ProfileDropdownContent: FC<ProfileDropdownProps> = props => {
-    const { isTitanLayout, breakpoint, NavigationComponent } = useTitanLayoutContext();
+function ProfileDropdownComponent(props: ProfileDropdownProps) {
+    const { breakpoint, NavigationComponent } = useTitanLayoutContext();
     return breakpoint.isMobile ? (
         <MobileProfileDropdown {...props} navigationComponent={NavigationComponent} />
-    ) : isTitanLayout ? (
-        <NavigationComponentContext.Provider value={NavigationComponent}>
-            <DesktopProfileDropdown {...props} />
-        </NavigationComponentContext.Provider>
     ) : (
         <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();
@@ -77,7 +81,8 @@ const MobileProfileDropdown: FC<ProfileDropdownProps & NavigationComponentProps>
                 icon={SvgAccountInactive}
                 iconActive={SvgAccountActive}
                 isActive={expanded}
-                {...props}
+                className={className}
+                {...rest}
                 submenuExpanded={expanded}
                 onExpandToggle={onExpandToggle}
                 onClick={onExpandToggle}
@@ -110,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,