@servicetitan/navigation 10.7.0 → 11.0.0-canary.237.4cefc6a.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/navigation",
-    "version": "10.7.0",
+    "version": "11.0.0-canary.237.4cefc6a.0",
     "description": "Navigation components",
     "repository": {
         "type": "git",
@@ -17,7 +17,7 @@
         "classnames": "~2.3.1"
     },
     "peerDependencies": {
-        "@servicetitan/anvil2": ">=1.34.0",
+        "@servicetitan/anvil2": ">=1.47.1",
         "@servicetitan/design-system": ">=14.0.0",
         "@servicetitan/react-ioc": ">=14.1.1",
         "@servicetitan/tokens": ">=12.0.0",
@@ -26,7 +26,7 @@
         "react": ">=18.0.0"
     },
     "devDependencies": {
-        "@servicetitan/anvil2": "~1.34.0",
+        "@servicetitan/anvil2": "~1.47.1",
         "@servicetitan/design-system": "~14.5.1",
         "@servicetitan/react-ioc": "^30.2.1",
         "@servicetitan/tokens": ">=12.1.11",
@@ -43,5 +43,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "2e6d50be0ec53777ff6afa390645fd11cfd7444e"
+    "gitHead": "4cefc6a6c7aa880897f643ee1e90e3b30f6f2421"
 }

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

@@ -23,6 +23,7 @@ export default {
 export const ExtraLink = () => (
     <HeaderNavigationLink
         id="search"
+        title="Search"
         to="https://google.com"
         target="_blank"
         iconName="search"
@@ -35,6 +36,7 @@ export const ExtraLink = () => (
 export const ExtraTrigger = () => (
     <HeaderNavigationTrigger
         id="dialpad"
+        title="Dialpad"
         iconName="phone"
         counter={2}
         tooltip="Phones pro"
@@ -47,6 +49,7 @@ export const ExtraWithTooltip = () => (
     <Fragment>
         <HeaderNavigationLink
             id="search"
+            title="Search"
             to="https://google.com"
             target="_blank"
             iconName="search"
@@ -58,6 +61,7 @@ export const ExtraWithTooltip = () => (
 
         <HeaderNavigationTrigger
             id="dialpad"
+            title="Dialpad"
             iconName="phone"
             hint="Dialpad"
             counter={2}
@@ -99,6 +103,7 @@ const HelpTrigger = () => {
     return (
         <HeaderNavigationTrigger
             id="help"
+            title="Help"
             iconName="help_outline"
             hint="Help"
             icon={SvgHelp}
@@ -113,6 +118,7 @@ export const ExtraWithLabel = () => (
     <Fragment>
         <HeaderNavigationLink
             id="search"
+            title="Search"
             to="https://google.com"
             target="_blank"
             iconName="search"
@@ -125,6 +131,7 @@ export const ExtraWithLabel = () => (
         <HelpTrigger />
         <HeaderNavigationTrigger
             id="dialpad"
+            title="Dialpad"
             iconName="phone"
             hint="Dialpad"
             tag={{ value: 2 }}

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

@@ -28,6 +28,7 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
     labelClassName,
     tag,
     target,
+    title,
     ...rest
 }) => {
     const NavigationComponent = useContext(NavigationComponentContext);
@@ -76,6 +77,7 @@ export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
     hint,
     tag,
     tooltip,
+    title,
     ...rest
 }) => {
     return withTooltip(

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

@@ -85,6 +85,7 @@ export const WithAllMonolithData = () => (
 
                 <HeaderNavigationLink
                     id="search"
+                    title="Search"
                     to="https://google.com"
                     target="_blank"
                     iconComponent={SearchIcon}
@@ -95,6 +96,7 @@ export const WithAllMonolithData = () => (
 
                 <HeaderNavigationTrigger
                     id="dialpad"
+                    title="Dialpad"
                     iconName="phone"
                     tag={{ value: 2 }}
                     icon={SvgIcon}
@@ -103,6 +105,7 @@ export const WithAllMonolithData = () => (
 
                 <HeaderNavigationTrigger
                     id="titanAdvisor"
+                    title="Titan Advisor"
                     iconName="rocket"
                     iconClassName={Styles.rocketIcon}
                     icon={SvgIcon}
@@ -111,6 +114,7 @@ export const WithAllMonolithData = () => (
 
                 <HeaderNavigationLink
                     id="settings"
+                    title="Settings"
                     to="https://google.com"
                     target="_blank"
                     iconName="settings"

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

@@ -64,6 +64,7 @@ const HelpCenterButton = () => {
             trigger={
                 <HeaderNavigationTrigger
                     id="help"
+                    title="Help"
                     iconName="help_outline"
                     onClick={() => setOpen(true)}
                     icon={SvgIcon}
@@ -107,6 +108,7 @@ export const WithAllMonolithData = () => (
 
         <HeaderNavigationTrigger
             id="dialpad"
+            title="Dialpad"
             iconName="phone"
             counter={2}
             icon={SvgIcon}
@@ -115,6 +117,7 @@ export const WithAllMonolithData = () => (
 
         <HeaderNavigationLink
             id="search"
+            title="Search"
             to="https://google.com"
             target="_blank"
             iconComponent={SearchIcon}
@@ -126,6 +129,7 @@ export const WithAllMonolithData = () => (
         <HelpCenterButton />
         <HeaderNavigationTrigger
             id="titanAdvisor"
+            title="Titan Advisor"
             iconName="rocket"
             iconClassName={Styles.rocketIcon}
             icon={SvgIcon}
@@ -134,6 +138,7 @@ export const WithAllMonolithData = () => (
 
         <HeaderNavigationLink
             id="settings"
+            title="Settings"
             to="https://google.com"
             target="_blank"
             iconName="settings"

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

@@ -54,6 +54,7 @@ export const WithAllMonolithData = () => (
 
                 <HeaderNavigationLink
                     id="search"
+                    title="Search"
                     to="https://google.com"
                     target="_blank"
                     iconComponent={SearchIcon}
@@ -67,6 +68,7 @@ export const WithAllMonolithData = () => (
 
                 <HeaderNavigationLink
                     id="titanAdvisor"
+                    title="Titan Advisor"
                     to="titanAdvisor"
                     iconName="rocket"
                     iconClassName={Styles.rocketIcon}
@@ -76,6 +78,7 @@ export const WithAllMonolithData = () => (
 
                 <HeaderNavigationLink
                     id="settings"
+                    title="Settings"
                     to="settings"
                     target="_blank"
                     iconName="settings"
@@ -121,6 +124,7 @@ export const WithAllMonolithDataCommercial = () => (
 
                 <HeaderNavigationLink
                     id="search"
+                    title="Search"
                     to="https://google.com"
                     target="_blank"
                     iconComponent={SearchIcon}
@@ -133,6 +137,7 @@ export const WithAllMonolithDataCommercial = () => (
 
                 <HeaderNavigationLink
                     id="titanAdvisor"
+                    title="Titan Advisor"
                     to="titanAdvisor"
                     iconName="rocket"
                     iconClassName={Styles.rocketIcon}
@@ -142,6 +147,7 @@ export const WithAllMonolithDataCommercial = () => (
 
                 <HeaderNavigationLink
                     id="settings"
+                    title="Settings"
                     to="settings"
                     iconName="settings"
                     aria-label="search"

package/src/components/links.tsx

@@ -1,5 +1,4 @@
-import { FC, useContext } from 'react';
-import { NavigationLegacyContext } from '../utils/navigation-context';
+import { FC } from 'react';
 import {
     HeaderNavigationLinkProps,
     HeaderNavigationTriggerProps,
@@ -8,27 +7,48 @@ import {
     HeaderNavigationLink as HeaderNavigationLinkLegacy,
     HeaderNavigationTrigger as HeaderNavigationTriggerLegacy,
 } from './header-navigation/header-navigation-links';
+import { useTitanLayoutPlacementContext } from './titan-layout';
 import {
-    HeaderNavigationLink as HeaderNavigationLinkModern,
-    HeaderNavigationTrigger as HeaderNavigationTriggerModern,
-} from './left-navigation/header-navigation-tiny-links';
+    LayoutHeaderNavigationLink,
+    LayoutHeaderNavigationTrigger,
+} from './titan-layout/layout-header-links';
+import {
+    TitanLayoutSidebarLink,
+    TitanLayoutSidebarTrigger,
+} from './titan-layout/layout-sidebar-links';
 
 export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = props => {
-    const isLegacy = useContext(NavigationLegacyContext);
+    const placement = useTitanLayoutPlacementContext();
 
-    return isLegacy ? (
-        <HeaderNavigationLinkLegacy {...props} />
+    return placement === 'top' ? (
+        <LayoutHeaderNavigationLink {...props} />
+    ) : placement === 'side' ? (
+        <TitanLayoutSidebarLink
+            id={props.id}
+            icon={props.icon}
+            iconActive={props.iconActive}
+            to={props.to}
+            title={props.title}
+            counter={props.counter}
+        />
     ) : (
-        <HeaderNavigationLinkModern {...props} />
+        <HeaderNavigationLinkLegacy {...props} />
     );
 };
 
 export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = props => {
-    const isLegacy = useContext(NavigationLegacyContext);
+    const placement = useTitanLayoutPlacementContext();
 
-    return isLegacy ? (
-        <HeaderNavigationTriggerLegacy {...props} />
+    return placement === 'top' ? (
+        <LayoutHeaderNavigationTrigger {...props} />
+    ) : placement === 'side' ? (
+        <TitanLayoutSidebarTrigger
+            id={props.id}
+            title={props.title}
+            icon={props.icon}
+            iconActive={props.iconActive}
+        />
     ) : (
-        <HeaderNavigationTriggerModern {...props} />
+        <HeaderNavigationTriggerLegacy {...props} />
     );
 };

package/src/components/logo/logo-company-title.tsx

@@ -1,15 +1,17 @@
 import { FC } from 'react';
 
 /* tslint:disable: max-line-length */
-export const LogoCompanyTitle: FC<{ className?: string; fill?: string; size?: string }> = ({
-    className,
-    fill = 'currentColor',
-    size = '162',
-}) => {
+export const LogoCompanyTitle: FC<{
+    className?: string;
+    fill?: string;
+    size?: string;
+    height?: string | number;
+}> = ({ className, fill = 'currentColor', size = '162', height }) => {
     return (
         <svg
             className={className}
-            width={size}
+            width={height ? undefined : size}
+            height={height}
             viewBox="0 0 322 80"
             xmlns="http://www.w3.org/2000/svg"
         >

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

@@ -105,6 +105,10 @@
         position: relative;
     }
 
+    .dropdown-content-wrapper > span {
+        display: block !important;
+    }
+
     .dropdown-content-bottom-left {
         .dropdown-content-wrapper::before {
             content: '';

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

@@ -21,9 +21,9 @@ export const ProfileDropdownDefault = () => (
         <ProfileDropdown.Link id="first" to="https://google.com">
             first link
         </ProfileDropdown.Link>
-        <ProfileDropdown.Link id="second" onClick={() => alert('second click')}>
+        <ProfileDropdown.Section id="second" onClick={() => alert('second click')}>
             second link
-        </ProfileDropdown.Link>
+        </ProfileDropdown.Section>
         <ProfileDropdown.Divider />
         <ProfileDropdown.Section id="content">some content</ProfileDropdown.Section>
         <ProfileDropdown.Divider />
@@ -45,9 +45,9 @@ export const ProfileDropdownWithLogo = () => (
         <ProfileDropdown.Link id="first" to="https://google.com">
             first link
         </ProfileDropdown.Link>
-        <ProfileDropdown.Link id="second" onClick={() => alert('second click')}>
+        <ProfileDropdown.Section id="second" onClick={() => alert('second click')}>
             second link
-        </ProfileDropdown.Link>
+        </ProfileDropdown.Section>
     </ProfileDropdown>
 );
 

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

@@ -25,6 +25,7 @@ import {
 } from '../../utils/navigation-context';
 import { getCounterTag } from '../../utils/side-nav';
 import { CounterTag } from '../counter-tag';
+import { withTooltip } from '../titan-layout/with-tooltip';
 import * as Styles from './profile-dropdown.module.less';
 import { ProfileLogo } from './profile-icon';
 
@@ -149,11 +150,12 @@ const ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps> = ({
 export interface ProfileDropdownSectionPropsStrict {
     children: ReactNode;
     id: string;
+    tooltip?: string;
     className?: string;
     onClick?(e: MouseEvent): void;
 }
 
-interface ProfileDropdownSectionProps extends ProfileDropdownSectionPropsStrict {
+export interface ProfileDropdownSectionProps extends ProfileDropdownSectionPropsStrict {
     [key: string]: any;
 }
 
@@ -161,6 +163,7 @@ export const ProfileDropdownSection: FC<ProfileDropdownSectionProps> = ({
     children,
     className,
     id,
+    tooltip,
     onClick,
     ...rest
 }) => {
@@ -172,16 +175,20 @@ export const ProfileDropdownSection: FC<ProfileDropdownSectionProps> = ({
         }
     };
 
-    return (
+    return withTooltip(
         <div
-            className={classNames(Styles.dropdownSection, className)}
+            className={classNames(Styles.dropdownSection, className, {
+                'cursor-pointer': !!onClick,
+            })}
             onClick={clickHandler}
             data-cy={`profile-dropdown-section-${id}`}
             data-pendo={`profile-dropdown-section-${id}`}
             {...rest}
         >
             {children}
-        </div>
+        </div>,
+        tooltip,
+        'left'
     );
 };
 
@@ -193,10 +200,10 @@ export interface ProfileDropdownLinkPropsStrict {
     className?: string;
     external?: boolean;
     target?: HTMLAttributeAnchorTarget;
-    to?: string;
+    tooltip?: string;
+    to: string;
     tag?: CounterTagData;
     counter?: CounterTagValue;
-    onClick?: () => void;
 }
 
 export interface ProfileDropdownLinkProps extends ProfileDropdownLinkPropsStrict {
@@ -212,16 +219,12 @@ export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
     tag,
     target,
     to,
+    tooltip,
     onClick,
     ...rest
 }: ProfileDropdownLinkProps) => {
     const NavigationComponent = useContext(NavigationComponentContext);
 
-    const clickHandler = (e: MouseEvent<any>) => {
-        e.preventDefault();
-        onClick?.();
-    };
-
     const isExternalLink = external ?? to?.startsWith('http');
 
     const tagElement = useMemo(
@@ -229,41 +232,34 @@ export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
         [counter, tag]
     );
 
-    return isExternalLink ? (
-        <a
-            className={classNames(Styles.dropdownSection, Styles.dropdownLink, className)}
-            href={to}
-            target={target}
-            data-cy={`profile-dropdown-link-${id}`}
-            data-pendo={`profile-dropdown-link-${id}`}
-            {...rest}
-        >
-            {children}
-            {tagElement}
-        </a>
-    ) : to ? (
-        <NavigationComponent
-            className={classNames(Styles.dropdownSection, Styles.dropdownLink, className)}
-            target={target}
-            to={to}
-            data-cy={`profile-dropdown-link-${id}`}
-            data-pendo={`profile-dropdown-link-${id}`}
-            {...rest}
-        >
-            {children}
-            {tagElement}
-        </NavigationComponent>
-    ) : (
-        <a
-            className={classNames(Styles.dropdownSection, Styles.dropdownLink, className)}
-            onClick={clickHandler}
-            data-cy={`profile-dropdown-link-${id}`}
-            data-pendo={`profile-dropdown-link-${id}`}
-            {...rest}
-        >
-            {children}
-            {tagElement}
-        </a>
+    return withTooltip(
+        isExternalLink ? (
+            <a
+                className={classNames(Styles.dropdownSection, Styles.dropdownLink, className)}
+                href={to}
+                target={target}
+                data-cy={`profile-dropdown-link-${id}`}
+                data-pendo={`profile-dropdown-link-${id}`}
+                {...rest}
+            >
+                {children}
+                {tagElement}
+            </a>
+        ) : (
+            <NavigationComponent
+                className={classNames(Styles.dropdownSection, Styles.dropdownLink, className)}
+                target={target}
+                to={to}
+                data-cy={`profile-dropdown-link-${id}`}
+                data-pendo={`profile-dropdown-link-${id}`}
+                {...rest}
+            >
+                {children}
+                {tagElement}
+            </NavigationComponent>
+        ),
+        tooltip,
+        'left'
     );
 };
 
@@ -291,6 +287,7 @@ export interface ProfileDropdownProps extends ProfileDropdownPropsStrict {
 export interface ProfileDropdownType extends FC<ProfileDropdownProps> {
     Divider: typeof ProfileDropdownDivider;
     Link: typeof ProfileDropdownLink;
+    Trigger: typeof ProfileDropdownTrigger;
     Section: typeof ProfileDropdownSection;
 }
 

package/src/components/titan-layout/index.ts

@@ -0,0 +1,5 @@
+export * from './titan-layout';
+export * from './layout-profile';
+export * from './layout-context';
+export * from './layout-logo';
+export * from './interface';

package/src/components/titan-layout/interface-internal.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import { NavLinkComponentProps } from '../../utils/navigation-context';
+
+export interface NavigationComponentProps {
+    navigationComponent: FC<NavLinkComponentProps>;
+}

package/src/components/titan-layout/interface.ts

@@ -0,0 +1,26 @@
+import { FC, ReactElement } from 'react';
+import { NavigationItemData } from '../../utils/navigation';
+import { TitanLayoutSidebarContextType } from './layout-context';
+
+export interface TitanLayoutSidebarLinkWrapperProps {
+    children:
+        | ReactElement<TitanLayoutSidebarLinkProps>
+        | ReactElement<TitanLayoutSidebarTriggerProps>;
+    context: TitanLayoutSidebarContextType;
+}
+
+export interface TitanLayoutSidebarLinkProps extends Omit<NavigationItemData, 'submenu'> {
+    wrapper?: FC<TitanLayoutSidebarLinkWrapperProps>;
+}
+export interface TitanLayoutSidebarTriggerProps
+    extends Omit<TitanLayoutSidebarLinkProps, 'to' | 'isActive'> {
+    isActive?: boolean;
+    wrapper?: FC<TitanLayoutSidebarLinkWrapperProps>;
+    onClick?: () => void;
+    onMobileClick?: () => void;
+}
+
+export interface TitanLayoutState {
+    navCollapsed: boolean;
+    submenuExpanded?: string;
+}

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

@@ -0,0 +1,30 @@
+import { CSSProperties, FC, createContext, useContext } from 'react';
+import { DefaultNavLinkComponent, NavLinkComponentProps } from '../../utils/navigation-context';
+import { TitanBreakpoint } from '../../utils/use-breakpoint';
+
+export interface TitanLayoutSidebarContextType {
+    styles: {
+        popoverContent: CSSProperties;
+    };
+}
+
+export type TitanLayoutPlacement = 'top' | 'side' | 'unset';
+
+export interface TitanLayoutContextType {
+    NavigationComponent: FC<NavLinkComponentProps>;
+    breakpoint: TitanBreakpoint;
+    isTitanLayout: boolean;
+    sidebar: TitanLayoutSidebarContextType;
+}
+
+export const LayoutContext = createContext<TitanLayoutContextType>({
+    NavigationComponent: DefaultNavLinkComponent,
+    breakpoint: { name: 'lg', isMobile: false },
+    isTitanLayout: false,
+    sidebar: { styles: { popoverContent: {} } },
+});
+
+export const useTitanLayoutContext = () => useContext(LayoutContext);
+
+export const LayoutPlacementContext = createContext<TitanLayoutPlacement | undefined>(undefined);
+export const useTitanLayoutPlacementContext = () => useContext(LayoutPlacementContext);