@servicetitan/navigation 10.6.1 → 11.0.0-canary.237.0c461af.0

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,
@@ -25,6 +26,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';
 
@@ -146,21 +148,28 @@ const ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps> = ({
     );
 };
 
+export type ProfileItemContent =
+    | { children: string; text?: string }
+    | { children: ReactNode; text: string };
+
 export interface ProfileDropdownSectionPropsStrict {
     children: ReactNode;
     id: string;
+    tooltip?: string;
     className?: string;
     onClick?(e: MouseEvent): void;
 }
 
-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
 }) => {
@@ -172,16 +181,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,15 +206,15 @@ 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 {
-    [key: string]: any;
-}
+export type ProfileDropdownLinkProps = Omit<ComponentPropsWithoutRef<'a'>, 'children'> &
+    ProfileDropdownLinkPropsStrict &
+    ProfileItemContent;
 
 export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
     children,
@@ -211,17 +224,14 @@ export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
     counter,
     tag,
     target,
+    text,
     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 +239,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 +294,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);

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

@@ -0,0 +1,144 @@
+import { Icon, IconProps } from '@servicetitan/anvil2';
+import classNames from 'classnames';
+import { FC, Fragment } from 'react';
+import {
+    HeaderNavigationLinkProps,
+    HeaderNavigationTriggerProps,
+} from '../../utils/navigation-legacy';
+import { getCounterTag } from '../../utils/side-nav';
+import { CounterTag, CounterTagProps } from '../counter-tag';
+// use v1 tooltips due to bug with v2 in monolith
+import { withTooltip } from '../header-navigation/with-tooltip';
+import { useTitanLayoutContext } from './layout-context';
+import * as Styles from './layout-header.module.less';
+
+/** Content for navigation items */
+const HeaderNavigationItemContent: FC<{
+    tag?: CounterTagProps;
+    counterClassName?: string;
+    icon: IconProps['svg'] | undefined;
+    iconActive?: IconProps['svg'];
+    label?: string;
+    labelClassName?: string;
+}> = ({ counterClassName, icon, iconActive, label, labelClassName, tag }) => {
+    return (
+        <Fragment>
+            {!!icon && <Icon svg={icon} className={Styles.navigationIcon} />}
+            {!!iconActive && (
+                <Icon
+                    svg={iconActive}
+                    className={classNames(Styles.navigationIcon, Styles.navigationIconActive)}
+                />
+            )}
+
+            {!!label && (
+                <span className={classNames(Styles.navigationItemLabel, labelClassName)}>
+                    {label}
+                </span>
+            )}
+
+            {!!tag && (
+                <CounterTag
+                    data={tag}
+                    className={classNames(Styles.navigationItemCounter, counterClassName)}
+                    longClassName={Styles.navigationItemCounterLong}
+                />
+            )}
+        </Fragment>
+    );
+};
+
+/** Navigation extra item with link */
+export const LayoutHeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
+    id,
+    to,
+    hint,
+    tooltip,
+    className,
+    counter,
+    icon,
+    iconActive,
+    iconClassName,
+    iconComponent,
+    iconName,
+    isActive,
+    label,
+    labelClassName,
+    tag,
+    target,
+    ...rest
+}) => {
+    const { NavigationComponent } = useTitanLayoutContext();
+
+    return withTooltip(
+        <NavigationComponent
+            data-cy={`navigation-link-${id}`}
+            data-pendo={`navigation-link-${id}`}
+            {...rest}
+            key={id}
+            to={to}
+            title={hint}
+            className={classNames(Styles.navigationLink, className, {
+                [Styles.navigationItemActive]: isActive === true,
+                [Styles.navigationItemIconState]: !!icon && !!iconActive,
+            })}
+            isActive={typeof isActive === 'function' ? isActive : undefined}
+            activeClassName={Styles.navigationItemActive}
+            target={target}
+        >
+            <HeaderNavigationItemContent
+                tag={getCounterTag(counter, tag)}
+                icon={icon}
+                iconActive={iconActive}
+                label={label}
+                labelClassName={labelClassName}
+            />
+        </NavigationComponent>,
+        tooltip
+    );
+};
+
+/** Navigation extra item with icon button */
+export const LayoutHeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
+    id,
+    className,
+    counter,
+    icon,
+    iconActive,
+    iconName,
+    isActive,
+    hint,
+    label,
+    labelClassName,
+    tag,
+    tooltip,
+    title,
+    titleClassName,
+    ...rest
+}) => {
+    return withTooltip(
+        <div
+            data-cy={`navigation-trigger-${id}`}
+            data-pendo={`navigation-trigger-${id}`}
+            {...rest}
+            title={hint}
+            className={classNames(
+                Styles.navigationLink,
+                {
+                    [Styles.navigationItemActive]: isActive === true,
+                    [Styles.navigationItemIconState]: !!icon && !!iconActive,
+                },
+                'cursor-pointer',
+                className
+            )}
+        >
+            <HeaderNavigationItemContent
+                tag={getCounterTag(counter, tag)}
+                icon={isActive && iconActive ? iconActive : icon}
+                label={label}
+                labelClassName={labelClassName}
+            />
+        </div>,
+        tooltip
+    );
+};

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

@@ -0,0 +1,174 @@
+/* stylelint-disable no-descending-specificity */
+@import (reference) '@servicetitan/tokens/core/tokens.less';
+
+@size-links-tiny: 24px;
+
+.header {
+    display: flex;
+    justify-content: space-between;
+
+    background-color: @color-white;
+    color: @color-black;
+    border-bottom: 1px solid @color-neutral-60;
+
+    & > * {
+        overflow-y: hidden;
+    }
+
+    .he-top-left {
+        display: flex;
+        align-items: center;
+    }
+
+    .he-top-right {
+        & > * {
+            color: @color-black;
+        }
+
+        .he-top-right-text {
+            font-size: @typescale-2;
+            font-weight: @font-weight-bold;
+            font-family: @base-font-family;
+            margin-right: @spacing-1;
+        }
+    }
+
+    :global(.profile-dropdown-image) {
+        height: 24px;
+        width: 24px;
+    }
+
+    :global(.profile-dropdown-trigger) {
+        height: 32px;
+        font-size: @size-links-tiny;
+    }
+
+    .navigation-link {
+        border-radius: 12px;
+        font-size: @size-links-tiny;
+        color: inherit;
+
+        &.navigation-item-active:not(.navigation-item-overflow) {
+            background-color: @color-blue-100 !important;
+            color: @color-blue-500 !important;
+        }
+        &:hover:not(.navigation-item-active):not(.navigation-item-overflow) {
+            background-color: rgba(0, 0, 0, 0.12) !important;
+        }
+
+        &.navigation-item-icon-state.navigation-item-active {
+            .navigation-icon:not(.navigation-icon-active) {
+                display: none;
+            }
+
+            .navigation-icon.navigation-icon-active[data-anv][data-anv] {
+                display: block;
+            }
+        }
+    }
+
+    .navigation-icon[data-anv][data-anv] {
+        display: inline-block;
+        color: inherit;
+        height: 24px;
+        width: 24px;
+
+        > svg {
+            height: @size-links-tiny;
+            width: @size-links-tiny;
+        }
+
+        &.navigation-icon-active {
+            display: none;
+        }
+    }
+}
+
+// desktop
+@media only screen and (min-width: 768px) {
+    .header {
+        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,
+        .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 {
+        padding: @spacing-1 @spacing-half;
+
+        .navigation-link {
+            padding: 10px;
+        }
+
+        .he-top-center {
+            max-width: unset;
+            flex: 1;
+            margin-left: @spacing-3;
+            margin-right: @spacing-3;
+        }
+    }
+}
+
+.navigation-link {
+    // styles specific to extra nav links
+    color: @color-black;
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    text-wrap: nowrap;
+
+    .navigation-item-counter {
+        color: @color-white;
+        font-weight: @font-weight-semibold;
+        font-size: 8px !important;
+        min-width: 12px;
+        position: absolute;
+        top: 4px;
+        right: -2px;
+    }
+
+    .navigation-item-label {
+        color: inherit;
+        font-size: @typescale-1;
+        font-family: @base-font-family;
+        font-weight: @font-weight-semibold;
+        margin-left: @spacing-half;
+    }
+
+    &.navigation-item-counter-long {
+        right: -8px;
+    }
+}

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

@@ -0,0 +1,90 @@
+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 { LayoutHeaderNavigationTrigger } from './layout-header-links';
+import * as Styles from './layout-header.module.less';
+import { TitanLayoutLogoProps } from './layout-logo';
+
+export interface TitanLayoutHeaderLogoProps {
+    title?: true | string;
+    mantleFill?: string;
+    to?: string;
+}
+
+export type LayoutHeaderProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {
+    right?: ReactNode;
+    rightText?: string;
+    rightClassName?: string;
+
+    id?: string;
+
+    center?: ReactElement;
+    centerClassName?: string;
+
+    logo: ReactElement<TitanLayoutLogoProps>;
+    profile?: ReactElement;
+
+    onBurgerClick?: (e: MouseEvent) => void;
+};
+
+export const LayoutHeader: FC<LayoutHeaderProps> = ({
+    className,
+    right,
+    rightText,
+    rightClassName,
+    center,
+    centerClassName,
+    logo,
+    profile,
+    onBurgerClick,
+    ...rest
+}) => {
+    const { breakpoint } = useTitanLayoutContext();
+
+    return (
+        <LayoutPlacementContext.Provider value="top">
+            <div
+                className={classNames(Styles.header, className)}
+                {...rest}
+                data-cy="header-navigation"
+            >
+                <div className={classNames(Styles.heTopLeft)} data-cy="navigation-left">
+                    {breakpoint.isMobile && (
+                        <LayoutHeaderNavigationTrigger
+                            id="burger"
+                            title=""
+                            icon={SvgBurgerMenu}
+                            iconActive={SvgBurgerMenu}
+                            className="m-r-1"
+                            onClick={onBurgerClick}
+                        />
+                    )}
+                    {logo}
+                </div>
+                <div
+                    className={classNames(
+                        Styles.heTopCenter,
+                        'd-f align-items-center justify-content-center',
+                        centerClassName
+                    )}
+                    data-cy="navigation-center"
+                >
+                    {center}
+                </div>
+                <div
+                    className={classNames(
+                        'd-f flex-row justify-content-end align-items-center',
+                        Styles.heTopRight,
+                        rightClassName
+                    )}
+                    data-cy="navigation-right"
+                >
+                    {!!rightText && <div className={Styles.heTopRightText}>{rightText}</div>}
+                    {right}
+                    {profile}
+                </div>
+            </div>
+        </LayoutPlacementContext.Provider>
+    );
+};