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

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

@@ -0,0 +1,86 @@
+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, 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>
+    );
+};

package/src/components/titan-layout/layout-logo.stories.tsx

@@ -0,0 +1,31 @@
+import { Chip } from '@servicetitan/anvil2';
+import { ReactElement } from 'react';
+import { withAnvil, withDefaultRedirects, withMemoryRouter } from '../../test/data';
+import { TitanLayoutLogo, TitanLayoutLogoProps } from './layout-logo';
+import { TitanLayout } from './titan-layout';
+
+const withTitanLayout = (element: ReactElement<TitanLayoutLogoProps>) => () => (
+    <TitanLayout navigationMainItems={[]}>
+        {element}
+        <TitanLayout.Content>logo</TitanLayout.Content>
+    </TitanLayout>
+);
+
+export default {
+    title: 'Navigation/TitanLayoutLogo',
+    component: TitanLayoutLogo,
+    decorators: [withDefaultRedirects, withMemoryRouter, withAnvil],
+    parameters: {},
+};
+
+export const LogoDefault = withTitanLayout(<TitanLayoutLogo />);
+
+export const LogoCompanyTitle = withTitanLayout(<TitanLayoutLogo title />);
+
+export const LogoCommercial = withTitanLayout(
+    <TitanLayoutLogo title="Commercial" mantleFill="#2270EE" />
+);
+
+export const LogoWithPostfix = withTitanLayout(
+    <TitanLayoutLogo title postfix={<Chip className="m-l-2-i" label="demo" />} />
+);

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

@@ -0,0 +1,57 @@
+import classNames from 'classnames';
+import { FC, Fragment, ReactNode } from 'react';
+import { LogoCompanyTitle } from '../logo/logo-company-title';
+import { LogoTitan, LogoTitanTitle, WrapperProps } from '../logo/logo-titan-text';
+import { useTitanLayoutContext } from './layout-context';
+
+export interface TitanLayoutLogoProps {
+    /** container class name */
+    className?: string;
+
+    title?: string | boolean;
+
+    postfix?: ReactNode;
+
+    logoWrapper?: WrapperProps;
+
+    mantleFill?: string;
+}
+
+const EmptyWrapper: FC<any> = ({ children }) => children;
+
+export const TitanLayoutLogo: FC<TitanLayoutLogoProps> = ({
+    className,
+    mantleFill,
+    postfix,
+    title,
+    logoWrapper = EmptyWrapper,
+}) => {
+    const {
+        breakpoint: { isMobile },
+    } = useTitanLayoutContext();
+
+    const Wrapper = logoWrapper;
+    const logoSize = isMobile ? 44 : 56;
+    const logoCompanySize = 48;
+
+    return (
+        <div className={classNames('d-f align-items-center', className)}>
+            {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} />
+            )}
+
+            {!isMobile && postfix}
+        </div>
+    );
+};

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

@@ -0,0 +1,37 @@
+import { ReactElement } from 'react';
+import { withAnvil, withDefaultRedirects, withMemoryRouter } from '../../test/data';
+import { ProfileDropdown } from './layout-profile';
+import { TitanLayout } from './titan-layout';
+
+const withTitanLayout = (element: ReactElement) => () => (
+    <TitanLayout navigationMainItems={[]} profile={element}>
+        <TitanLayout.Content>profile</TitanLayout.Content>
+    </TitanLayout>
+);
+
+export default {
+    title: 'Navigation/TitanLayoutProfile',
+    component: ProfileDropdown,
+    decorators: [withDefaultRedirects, withMemoryRouter, withAnvil],
+    parameters: {},
+};
+
+export const ProfileDefault = withTitanLayout(
+    <ProfileDropdown>
+        <ProfileDropdown.Link id="first" to="https://google.com">
+            first link
+        </ProfileDropdown.Link>
+        <ProfileDropdown.Section id="second" onClick={() => alert('second click')}>
+            second link
+        </ProfileDropdown.Section>
+        <ProfileDropdown.Divider />
+        <ProfileDropdown.Section id="content">some content</ProfileDropdown.Section>
+        <ProfileDropdown.Divider />
+        <ProfileDropdown.Divider />
+        <ProfileDropdown.Divider />
+        <ProfileDropdown.Link id="third" to="third">
+            third link
+        </ProfileDropdown.Link>
+        <ProfileDropdown.Divider />
+    </ProfileDropdown>
+);

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

@@ -0,0 +1,116 @@
+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 {
+    ProfileDropdown as DesktopProfileDropdown,
+    ProfileDropdownLinkProps,
+    ProfileDropdownProps,
+    ProfileDropdownSectionProps,
+} from '../profile-dropdown/profile-dropdown';
+import { NavigationComponentProps } from './interface-internal';
+import { useTitanLayoutContext } from './layout-context';
+import {
+    InternalSideNavigationGroup,
+    InternalSideNavigationGroupDivider,
+    InternalSideNavigationGroupLink,
+    InternalSideNavigationGroupTrigger,
+} from './layout-sidebar-links-internal';
+
+export type {
+    ProfileDropdownProps,
+    ProfileDropdownSectionProps,
+    ProfileDropdownLinkProps,
+} from '../profile-dropdown/profile-dropdown';
+
+const ProfileDropdownContent: FC<ProfileDropdownProps> = props => {
+    const { breakpoint, NavigationComponent } = useTitanLayoutContext();
+    return breakpoint.isMobile ? (
+        <MobileProfileDropdown {...props} navigationComponent={NavigationComponent} />
+    ) : (
+        <NavigationComponentContext.Provider value={NavigationComponent}>
+            <DesktopProfileDropdown {...props} />
+        </NavigationComponentContext.Provider>
+    );
+};
+ProfileDropdownContent.displayName = 'ProfileDropdown';
+
+const MobileProfileDropdown: FC<ProfileDropdownProps & NavigationComponentProps> = ({
+    children,
+    ...props
+}) => {
+    const [expanded, setExpanded] = useState(false);
+    const onExpandToggle = () => setExpanded(!expanded);
+    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>
+    );
+};
+
+const ProfileDropdownDivider: FC = () => {
+    const { breakpoint } = useTitanLayoutContext();
+    return breakpoint.isMobile ? (
+        <InternalSideNavigationGroupDivider />
+    ) : (
+        <DesktopProfileDropdown.Divider />
+    );
+};
+
+const ProfileDropdownSection: FC<ProfileDropdownSectionProps> = props => {
+    const { breakpoint } = useTitanLayoutContext();
+    return breakpoint.isMobile ? (
+        <MobileProfileDropdownSection {...props} />
+    ) : (
+        <DesktopProfileDropdown.Section {...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} />
+    ) : null;
+};
+
+const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = props => {
+    const { breakpoint, NavigationComponent } = useTitanLayoutContext();
+    return breakpoint.isMobile ? (
+        <MobileProfileDropdownLink {...props} navigationComponent={NavigationComponent} />
+    ) : (
+        <DesktopProfileDropdown.Link {...props} />
+    );
+};
+const MobileProfileDropdownLink: FC<ProfileDropdownLinkProps & NavigationComponentProps> = ({
+    to,
+    navigationComponent,
+    ...props
+}) => {
+    const title = typeof props.children === 'string' ? props.children : undefined;
+    return title ? (
+        <InternalSideNavigationGroupLink
+            {...props}
+            to={to}
+            title={title}
+            navigationComponent={navigationComponent}
+        />
+    ) : null;
+};
+
+export const ProfileDropdown = Object.assign(ProfileDropdownContent, {
+    Divider: ProfileDropdownDivider,
+    Link: ProfileDropdownLink,
+    Section: ProfileDropdownSection,
+});

package/src/components/titan-layout/layout-sidebar-links-internal.tsx

@@ -0,0 +1,265 @@
+import { Icon } from '@servicetitan/anvil2';
+import SvgGroupCollapse from '@servicetitan/anvil2/assets/icons/material/round/expand_less.svg';
+import SvgGroupExpand from '@servicetitan/anvil2/assets/icons/material/round/expand_more.svg';
+
+import classNames from 'classnames';
+import { FC, Fragment, MouseEvent, ReactNode } from 'react';
+import { NavigationItemData, NavigationSubmenuItemData } from '../../utils/navigation';
+import { getCounterTag } from '../../utils/side-nav';
+import { BadgeTag, BadgeTagProps } from '../badge-tag';
+import { TitanLayoutSidebarTriggerProps } from './interface';
+import { NavigationComponentProps } from './interface-internal';
+import * as Styles from './layout-sidebar.module.less';
+
+export interface InternalSideNavigationItemContentProps
+    extends Omit<NavigationItemData, 'iconName' | 'to' | 'counter' | 'tag'> {
+    submenuExpanded: boolean | undefined;
+    tag: BadgeTagProps | undefined;
+    onExpandToggle?: (e: MouseEvent<never>) => void;
+}
+
+export const InternalSideNavigationItemContent: FC<InternalSideNavigationItemContentProps> = ({
+    icon,
+    iconActive,
+    iconClassName,
+    iconComponent: IconComponent,
+    tag,
+    title,
+    submenuExpanded,
+    onExpandToggle,
+}) => (
+    <Fragment>
+        <div className={Styles.navItemIconWrapper}>
+            {IconComponent ? (
+                <i className={classNames(Styles.navIcon, iconClassName)}>
+                    <IconComponent />
+                </i>
+            ) : (
+                <Fragment>
+                    {icon && (
+                        <Icon
+                            svg={icon}
+                            className={classNames(
+                                Styles.navIcon,
+                                Styles.navIconInactive,
+                                iconClassName
+                            )}
+                        />
+                    )}
+                    {iconActive && (
+                        <Icon
+                            svg={iconActive}
+                            className={classNames(
+                                Styles.navIcon,
+                                Styles.navIconActive,
+                                iconClassName
+                            )}
+                        />
+                    )}
+                </Fragment>
+            )}
+
+            <div className={Styles.navItemTextExpanded}>{title}</div>
+            {!!tag && (
+                <BadgeTag
+                    data={tag}
+                    className={Styles.navItemCounter}
+                    longClassName={Styles.navItemCounterLong}
+                />
+            )}
+            {typeof submenuExpanded === 'boolean' && (
+                <div className={Styles.navItemGroupToggleWrapper}>
+                    <Icon
+                        svg={submenuExpanded ? SvgGroupCollapse : SvgGroupExpand}
+                        className={Styles.navItemGroupToggle}
+                        onClick={onExpandToggle}
+                    />
+                    <div className={Styles.navItemGroupToggleClick} onClick={onExpandToggle} />
+                </div>
+            )}
+        </div>
+
+        <div
+            className={classNames(Styles.navItemTextCollapsed, {
+                [Styles.navItemTextSmall]: !!title && title.length >= 10,
+            })}
+        >
+            {title}
+        </div>
+    </Fragment>
+);
+
+export interface InternalSideNavigationLinkProps
+    extends Omit<NavigationItemData, 'iconName' | 'counter' | 'tag'>,
+        NavigationComponentProps {
+    submenuExpanded: boolean | undefined;
+    dataPrefix?: string;
+    tag: BadgeTagProps | undefined;
+    onExpandToggle?: (e: MouseEvent<never>) => void;
+}
+
+export const internalNavigationContentContainerProps = ({
+    className,
+    icon,
+    iconActive,
+    iconComponent,
+    id,
+    isActive,
+    prefix,
+    isLink,
+}: Omit<TitanLayoutSidebarTriggerProps, 'isActive' | 'tag'> & {
+    prefix: string;
+    isActive?: any;
+    isLink: boolean;
+}) => ({
+    'data-cy': `${prefix}-${id}`,
+    'data-pendo': `${prefix}-${id}`,
+    'className': classNames(Styles.navItem, className, {
+        [Styles.navLink]: isLink,
+        [Styles.navItemActive]: isActive === true,
+        [Styles.navItemIconSwitch]: !!icon && !!iconActive && !iconComponent,
+    }),
+});
+
+/** Side Navigation menu item (for internal usage) */
+export const InternalSideNavigationLink: FC<InternalSideNavigationLinkProps> = ({
+    to,
+    className,
+    dataPrefix,
+    isActive,
+    navigationComponent: NavigationComponent,
+    submenuExpanded,
+    onExpandToggle,
+    ...props
+}) => {
+    return (
+        <NavigationComponent
+            {...internalNavigationContentContainerProps({
+                ...props,
+                prefix: dataPrefix ?? 'navigation-item',
+                className,
+                isActive,
+                isLink: true,
+            })}
+            to={to}
+            isActive={typeof isActive === 'function' ? isActive : undefined}
+            activeClassName={Styles.navItemActive}
+        >
+            <InternalSideNavigationItemContent
+                submenuExpanded={submenuExpanded}
+                onExpandToggle={onExpandToggle}
+                {...props}
+            />
+        </NavigationComponent>
+    );
+};
+
+/** Side Navigation menu trigger (for internal usage) */
+export const InternalSideNavigationTrigger: FC<
+    Omit<InternalSideNavigationLinkProps, 'to' | 'navigationComponent'> & { onClick?: () => void }
+> = ({ className, dataPrefix, isActive, submenuExpanded, onExpandToggle, onClick, ...props }) => {
+    return (
+        <div
+            {...internalNavigationContentContainerProps({
+                ...props,
+                prefix: dataPrefix ?? 'navigation-item',
+                className,
+                isActive,
+                isLink: !!onClick,
+            })}
+            onClick={onClick}
+        >
+            <InternalSideNavigationItemContent
+                submenuExpanded={submenuExpanded}
+                onExpandToggle={onExpandToggle}
+                {...props}
+            />
+        </div>
+    );
+};
+
+export const InternalSideNavigationGroupLink: FC<
+    NavigationSubmenuItemData & NavigationComponentProps
+> = ({ id, counter, tag, title, to, isActive, navigationComponent: NavigationComponent }) => {
+    return (
+        <NavigationComponent
+            data-cy={`navigation-item-${id}`}
+            data-pendo={`navigation-item-${id}`}
+            key={id}
+            to={to}
+            className={classNames(Styles.submenuItem, Styles.submenuLink, {
+                [Styles.submenuLinkActive]: isActive === true,
+            })}
+            isActive={typeof isActive === 'function' ? isActive : undefined}
+            activeClassName={Styles.submenuLinkActive}
+        >
+            <span>{title}</span>
+            <BadgeTag data={getCounterTag(counter, tag)} className={Styles.submenuLinkCounter} />
+        </NavigationComponent>
+    );
+};
+
+export const InternalSideNavigationGroupTrigger: FC<
+    Omit<NavigationSubmenuItemData, 'to'> & { onClick?: (e: MouseEvent<any>) => void }
+> = ({ id, counter, onClick, tag, title, isActive }) => {
+    return (
+        <div
+            data-cy={`navigation-item-${id}`}
+            data-pendo={`navigation-item-${id}`}
+            key={id}
+            className={classNames(Styles.submenuItem, {
+                [Styles.submenuLink]: !!onClick,
+                [Styles.submenuLinkActive]: isActive === true,
+            })}
+            onClick={onClick}
+        >
+            <span>{title}</span>
+            <BadgeTag data={getCounterTag(counter, tag)} className={Styles.submenuLinkCounter} />
+        </div>
+    );
+};
+
+export const InternalSideNavigationGroupDivider = () => {
+    return <div className={Styles.divider} />;
+};
+
+export const InternalSideNavigationGroup: FC<
+    Omit<NavigationItemData, 'tag' | 'counter' | 'to'> &
+        NavigationComponentProps & {
+            children: ReactNode;
+            submenuExpanded: boolean;
+            onExpandToggle?: (e: MouseEvent<never>) => void;
+            tag: BadgeTagProps | undefined;
+            to: NavigationItemData['to'] | undefined;
+            onClick?: () => void;
+        }
+> = ({ children, submenuExpanded, to, onExpandToggle, onClick, ...props }) => {
+    return (
+        <div className={classNames(Styles.navGroupWrapper)}>
+            <div className={Styles.navGroupItem}>
+                {to ? (
+                    <InternalSideNavigationLink
+                        {...props}
+                        to={to}
+                        submenuExpanded={submenuExpanded}
+                        onExpandToggle={onExpandToggle}
+                    />
+                ) : (
+                    <InternalSideNavigationTrigger
+                        {...props}
+                        submenuExpanded={submenuExpanded}
+                        onExpandToggle={onExpandToggle}
+                        onClick={onClick}
+                    />
+                )}
+            </div>
+            <div
+                className={classNames(Styles.submenuWrapper, {
+                    [Styles.submenuWrapperCollapsed]: !submenuExpanded,
+                })}
+            >
+                <div className={Styles.submenu}>{children}</div>
+            </div>
+        </div>
+    );
+};

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

@@ -0,0 +1,56 @@
+import { FC, ReactElement } from 'react';
+import { getCounterTag } from '../../utils/side-nav';
+import { TitanLayoutSidebarLinkProps, TitanLayoutSidebarTriggerProps } from './interface';
+import { useTitanLayoutContext } from './layout-context';
+import {
+    InternalSideNavigationLink,
+    InternalSideNavigationTrigger,
+} from './layout-sidebar-links-internal';
+
+const WrappedLink: FC<{
+    children: ReactElement<any>;
+    wrapper: NonNullable<TitanLayoutSidebarLinkProps['wrapper']>;
+}> = ({ children, wrapper: WrapperComponent }) => {
+    const { sidebar } = useTitanLayoutContext();
+    return <WrapperComponent context={sidebar}>{children}</WrapperComponent>;
+};
+
+/** Side Navigation menu link */
+export function TitanLayoutSidebarLink({ wrapper, ...props }: TitanLayoutSidebarLinkProps) {
+    const { NavigationComponent } = useTitanLayoutContext();
+
+    const element = (
+        <InternalSideNavigationLink
+            {...props}
+            navigationComponent={NavigationComponent}
+            submenuExpanded={undefined}
+            dataPrefix="navigation-link"
+            tag={getCounterTag(props.counter, props.tag)}
+        />
+    );
+
+    return wrapper ? <WrappedLink wrapper={wrapper}>{element}</WrappedLink> : element;
+}
+
+/** Side Navigation menu trigger */
+export function TitanLayoutSidebarTrigger({
+    wrapper,
+    onMobileClick,
+    onClick,
+    ...props
+}: TitanLayoutSidebarTriggerProps) {
+    const {
+        breakpoint: { isMobile },
+    } = useTitanLayoutContext();
+
+    const element = (
+        <InternalSideNavigationTrigger
+            {...props}
+            submenuExpanded={undefined}
+            dataPrefix="navigation-trigger"
+            tag={getCounterTag(props.counter, props.tag)}
+            onClick={isMobile && !!onMobileClick ? onMobileClick : onClick}
+        />
+    );
+    return wrapper && !isMobile ? <WrappedLink wrapper={wrapper}>{element}</WrappedLink> : element;
+}