@servicetitan/navigation 12.0.3 → 13.0.0-canary.256.5761ed1.0

package/src/components/left-navigation/header-navigation-tiny.module.less

@@ -1,117 +0,0 @@
-/* stylelint-disable no-descending-specificity */
-@import (reference) '@servicetitan/tokens/core/tokens.less';
-
-@size-links-tiny: 24px;
-
-.header-tiny {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: 48px;
-
-    background-color: @color-white;
-    color: @color-black;
-
-    & > * {
-        overflow-y: hidden;
-    }
-
-    .he-top-left {
-        grid-column: span 1;
-    }
-
-    .he-top-center {
-        grid-column: span 1;
-    }
-
-    .he-top-right {
-        grid-column: span 1;
-
-        & > * {
-            color: @color-black;
-        }
-    }
-
-    :global(.profile-dropdown-image) {
-        height: 24px;
-        width: 24px;
-    }
-
-    :global(.profile-dropdown-trigger) {
-        height: 32px;
-        font-size: @size-links-tiny;
-    }
-
-    .navigation-link {
-        margin: 6px 2px;
-        padding: 6px 6px;
-        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;
-        }
-    }
-}
-
-.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/left-navigation/header-navigation-tiny.module.less.d.ts

@@ -1,15 +0,0 @@
-export const __esModule: true;
-export const heTopCenter: string;
-export const heTopLeft: string;
-export const heTopRight: string;
-export const headerTiny: 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/left-navigation/header-navigation-tiny.stories.tsx

@@ -1,178 +0,0 @@
-import { Flex, TextField } from '@servicetitan/anvil2';
-import SvgSearch from '@servicetitan/anvil2/assets/icons/material/round/search.svg';
-import SvgSettingsActive from '@servicetitan/anvil2/assets/icons/st/gnav_settings_active.svg';
-import SvgSettings from '@servicetitan/anvil2/assets/icons/st/gnav_settings_inactive.svg';
-import SvgRocketActive from '@servicetitan/anvil2/assets/icons/st/gnav_titan_advisor_active.svg';
-import SvgRocket from '@servicetitan/anvil2/assets/icons/st/gnav_titan_advisor_inactive.svg';
-
-import { FC, Fragment } from 'react';
-import { CallsNavigationTrigger, SearchIcon, withAnvil, withMemoryRouter } from '../../test/data';
-import * as Styles from '../header-navigation/header-navigation-stories.module.less';
-import { LogoCompanyTitle } from '../logo/logo-company-title';
-import { LogoTitan, LogoTitanTitle } from '../logo/logo-titan-text';
-import { ProfileDropdown } from '../profile-dropdown/profile-dropdown';
-import { HeaderNavigationTiny } from './header-navigation-tiny';
-import { HeaderNavigationLink } from './header-navigation-tiny-links';
-
-export default {
-    title: 'Navigation/HeaderNavigationTiny',
-    component: HeaderNavigationTiny,
-    parameters: {},
-    decorators: [
-        withMemoryRouter,
-        withAnvil,
-        (Story: any) => (
-            <div className="border" style={{ height: '500px' }}>
-                <Story />
-            </div>
-        ),
-    ],
-};
-
-export const DefaultTinyNavigation = () => (
-    <HeaderNavigationTiny
-        className="border-bottom"
-        left={<LogoCompanyTitle className="m-l-1" size="150" />}
-        leftClassName="d-f align-items-center"
-    />
-);
-
-const TimeZoneOffset: FC = () => (
-    <div className="fs-2 ff-default fw-bold p-r-1">
-        <span>EST (-9 hrs)</span>
-    </div>
-);
-
-export const WithAllMonolithData = () => (
-    <HeaderNavigationTiny
-        className="border-bottom"
-        left={<LogoCompanyTitle className="m-l-1" size="150" />}
-        leftClassName="d-f align-items-center"
-        right={
-            <Fragment>
-                <TimeZoneOffset />
-
-                <HeaderNavigationLink
-                    id="search"
-                    title="Search"
-                    to="https://google.com"
-                    target="_blank"
-                    iconComponent={SearchIcon}
-                    hint="Search: for all the questions"
-                    tooltip="Search"
-                    icon={SvgSearch}
-                    iconActive={SvgSearch}
-                />
-
-                <CallsNavigationTrigger />
-
-                <HeaderNavigationLink
-                    id="titanAdvisor"
-                    title="Titan Advisor"
-                    to="titanAdvisor"
-                    iconName="rocket"
-                    iconClassName={Styles.rocketIcon}
-                    icon={SvgRocket}
-                    iconActive={SvgRocketActive}
-                />
-
-                <HeaderNavigationLink
-                    id="settings"
-                    title="Settings"
-                    to="settings"
-                    target="_blank"
-                    iconName="settings"
-                    aria-label="search"
-                    hint="Settings"
-                    icon={SvgSettings}
-                    iconActive={SvgSettingsActive}
-                />
-
-                <ProfileDropdown>
-                    <ProfileDropdown.Link id="tasks" to="https://googgle.com" counter={10}>
-                        Task Management
-                    </ProfileDropdown.Link>
-                    <ProfileDropdown.Divider />
-                    <ProfileDropdown.Link id="sign-out" to="https://googgle.com" text="Sign Out">
-                        Sign Out{' '}
-                        <span className="c-neutral-100 m-l-half t-truncate">James Bond</span>
-                    </ProfileDropdown.Link>
-                    <ProfileDropdown.Section id="userid" className="c-neutral-100 fs-1">
-                        User ID: 007
-                    </ProfileDropdown.Section>
-                </ProfileDropdown>
-            </Fragment>
-        }
-        center={<TextField placeholder="Search smth" size="small" className="w-100-i" />}
-        centerClassName="d-f align-items-center p-x-1"
-    />
-);
-
-export const WithAllMonolithDataCommercial = () => (
-    <HeaderNavigationTiny
-        className="border-bottom z-global-nav"
-        left={
-            <Flex alignItems="center">
-                <LogoTitan mantleFill="#2270EE" className="p-x-half" size={48} />
-                <LogoTitanTitle>Commercial</LogoTitanTitle>
-            </Flex>
-        }
-        leftClassName="d-f align-items-center"
-        right={
-            <Fragment>
-                <TimeZoneOffset />
-
-                <HeaderNavigationLink
-                    id="search"
-                    title="Search"
-                    to="https://google.com"
-                    target="_blank"
-                    iconComponent={SearchIcon}
-                    hint="Search: for all the questions"
-                    icon={SvgSearch}
-                    iconActive={SvgSearch}
-                />
-
-                <CallsNavigationTrigger />
-
-                <HeaderNavigationLink
-                    id="titanAdvisor"
-                    title="Titan Advisor"
-                    to="titanAdvisor"
-                    iconName="rocket"
-                    iconClassName={Styles.rocketIcon}
-                    icon={SvgRocket}
-                    iconActive={SvgRocketActive}
-                />
-
-                <HeaderNavigationLink
-                    id="settings"
-                    title="Settings"
-                    to="settings"
-                    iconName="settings"
-                    aria-label="search"
-                    hint="Settings"
-                    tooltip="Settings"
-                    icon={SvgSettings}
-                    iconActive={SvgSettingsActive}
-                />
-
-                <ProfileDropdown>
-                    <ProfileDropdown.Link id="tasks" to="https://googgle.com" counter={10}>
-                        Task Management
-                    </ProfileDropdown.Link>
-                    <ProfileDropdown.Divider />
-                    <ProfileDropdown.Link id="sign-out" to="https://googgle.com" text="Sign Out">
-                        Sign Out{' '}
-                        <span className="c-neutral-100 m-l-half t-truncate">James Bond</span>
-                    </ProfileDropdown.Link>
-                    <ProfileDropdown.Section id="userid" className="c-neutral-100 fs-1">
-                        User ID: 007
-                    </ProfileDropdown.Section>
-                </ProfileDropdown>
-            </Fragment>
-        }
-        center={<TextField placeholder="Search smth" size="small" className="w-100-i" />}
-        centerClassName="d-f align-items-center p-x-1"
-    />
-);

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

@@ -1,65 +0,0 @@
-import classNames from 'classnames';
-import { FC, ReactElement, ReactNode } from 'react';
-import * as Styles from './header-navigation-tiny.module.less';
-
-export interface HeaderNavigationTinyProps {
-    /** container class name */
-    className?: string;
-    /** extra navigation */
-    right?: ReactNode;
-    /** extra navigation container class name */
-    rightClassName?: string;
-    /** container id */
-    id?: string;
-    /** left content (usually used for logo) */
-    left?: ReactElement;
-    /** left container class name */
-    leftClassName?: string;
-    /** center content */
-    center?: ReactElement;
-    /** center container class name */
-    centerClassName?: string;
-    /** minimal width for navigation bar */
-    minWidth?: number;
-}
-
-export const HeaderNavigationTiny: FC<HeaderNavigationTinyProps> = ({
-    className,
-    id,
-    left,
-    leftClassName,
-    right,
-    rightClassName,
-    center,
-    centerClassName,
-    minWidth = 800,
-}) => {
-    return (
-        <div
-            className={classNames(Styles.headerTiny, className)}
-            style={{ minWidth: `${minWidth}px` }}
-            id={id}
-            data-cy="header-navigation"
-        >
-            <div className={classNames(Styles.heTopLeft, leftClassName)} data-cy="navigation-left">
-                {left}
-            </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"
-            >
-                {right}
-            </div>
-        </div>
-    );
-};

package/src/components/left-navigation/index.ts

@@ -1,4 +0,0 @@
-export * from './header-navigation-tiny';
-export * from './side-navigation';
-export * from './side-navigation-links';
-export type * from './interface';

package/src/components/left-navigation/interface-internal.ts

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

package/src/components/left-navigation/interface.ts

@@ -1,26 +0,0 @@
-import { FC, ReactElement } from 'react';
-import { NavigationItemData } from '../../utils/navigation';
-import { SideNavigationContextType } from './side-navigation-context';
-
-export interface SideNavigationExpandedState {
-    // expanded bar (classic)
-    bar: boolean;
-    // expanded submenu item (classic)
-    expandedSubmenu?: string;
-    // collapsed bar (experimental submenu bar)
-    collapsedBar?: boolean;
-}
-
-export interface SideNavigationLinkWrapperProps {
-    children: ReactElement<SideNavigationLinkProps> | ReactElement<SideNavigationTriggerProps>;
-    context: SideNavigationContextType;
-}
-
-export interface SideNavigationLinkProps extends Omit<NavigationItemData, 'submenu'> {
-    wrapper?: FC<SideNavigationLinkWrapperProps>;
-}
-export interface SideNavigationTriggerProps
-    extends Omit<SideNavigationLinkProps, 'to' | 'isActive'> {
-    isActive?: boolean;
-    wrapper?: FC<SideNavigationLinkWrapperProps>;
-}

package/src/components/left-navigation/side-navigation-context.tsx

@@ -1,13 +0,0 @@
-import { CSSProperties, createContext } from 'react';
-
-export interface SideNavigationContextType {
-    styles: {
-        popoverContent: CSSProperties;
-    };
-}
-
-export const SideNavigationContext = createContext<SideNavigationContextType>({
-    styles: {
-        popoverContent: {},
-    },
-});

package/src/components/left-navigation/side-navigation-links-internal.tsx

@@ -1,151 +0,0 @@
-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 } from 'react';
-import { NavigationItemData } from '../../utils/navigation';
-import { BadgeTag, BadgeTagProps } from '../badge-tag';
-import { SideNavigationTriggerProps } from './interface';
-import { NavigationComponentProps, SideNavigationExpandedProps } from './interface-internal';
-import * as Styles from './side-navigation.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.navigationItemIconWrapper}>
-            {IconComponent ? (
-                <i className={classNames(Styles.navigationIcon, iconClassName)}>
-                    <IconComponent />
-                </i>
-            ) : (
-                <Fragment>
-                    {icon && (
-                        <Icon
-                            svg={icon}
-                            className={classNames(
-                                Styles.navigationIcon,
-                                Styles.navigationIconInactive,
-                                iconClassName
-                            )}
-                        />
-                    )}
-                    {iconActive && (
-                        <Icon
-                            svg={iconActive}
-                            className={classNames(
-                                Styles.navigationIcon,
-                                Styles.navigationIconActive,
-                                iconClassName
-                            )}
-                        />
-                    )}
-                </Fragment>
-            )}
-
-            <div className={Styles.navigationItemTextExpanded}>{title}</div>
-            {!!tag && (
-                <BadgeTag
-                    data={tag}
-                    className={Styles.navigationItemCounter}
-                    longClassName={Styles.navigationItemCounterLong}
-                />
-            )}
-            {typeof submenuExpanded === 'boolean' && (
-                <div className={Styles.navigationItemGroupToggleWrapper}>
-                    <Icon
-                        svg={submenuExpanded ? SvgGroupCollapse : SvgGroupExpand}
-                        className={Styles.navigationItemGroupToggle}
-                        onClick={onExpandToggle}
-                    />
-                    <div
-                        className={Styles.navigationItemGroupToggleClick}
-                        onClick={onExpandToggle}
-                    />
-                </div>
-            )}
-        </div>
-
-        <div
-            className={classNames(Styles.navigationItemTextCollapsed, {
-                [Styles.navigationItemTextSmall]: title.length >= 10,
-            })}
-        >
-            {title}
-        </div>
-    </Fragment>
-);
-
-export interface InternalSideNavigationLinkProps
-    extends Omit<NavigationItemData, 'iconName' | 'counter' | 'tag'>,
-        NavigationComponentProps,
-        SideNavigationExpandedProps {
-    submenuExpanded: boolean | undefined;
-    dataPrefix?: string;
-    tag: BadgeTagProps | undefined;
-    onExpandToggle?: (e: MouseEvent<never>) => void;
-}
-
-export const internalNavigationContentContainerProps = ({
-    className,
-    icon,
-    iconActive,
-    iconComponent,
-    id,
-    isActive,
-    prefix,
-}: Omit<SideNavigationTriggerProps, 'isActive' | 'tag'> & { prefix: string; isActive?: any }) => ({
-    'data-cy': `${prefix}-${id}`,
-    'data-pendo': `${prefix}-${id}`,
-    'className': classNames(Styles.navigationItem, className, {
-        [Styles.navigationItemActive]: isActive === true,
-        [Styles.navigationItemIconSwitch]: !!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,
-            })}
-            to={to}
-            isActive={typeof isActive === 'function' ? isActive : undefined}
-            activeClassName={Styles.navigationItemActive}
-        >
-            <InternalSideNavigationItemContent
-                submenuExpanded={submenuExpanded}
-                onExpandToggle={onExpandToggle}
-                {...props}
-            />
-        </NavigationComponent>
-    );
-};

package/src/components/left-navigation/side-navigation-links.tsx

@@ -1,57 +0,0 @@
-import classNames from 'classnames';
-import { FC, ReactElement, useContext } from 'react';
-import { NavigationComponentContext } from '../../utils/navigation-context';
-import { getCounterTag } from '../../utils/side-nav';
-import { SideNavigationLinkProps, SideNavigationTriggerProps } from './interface';
-import { SideNavigationContext } from './side-navigation-context';
-import {
-    InternalSideNavigationItemContent,
-    InternalSideNavigationLink,
-    internalNavigationContentContainerProps,
-} from './side-navigation-links-internal';
-
-const WrappedLink: FC<{
-    children: ReactElement<any>;
-    wrapper: NonNullable<SideNavigationLinkProps['wrapper']>;
-}> = ({ children, wrapper: WrapperComponent }) => {
-    return (
-        <WrapperComponent context={useContext(SideNavigationContext)}>{children}</WrapperComponent>
-    );
-};
-/** Side Navigation menu link */
-export function SideNavigationLink({ wrapper, ...props }: SideNavigationLinkProps) {
-    const NavigationComponent = useContext(NavigationComponentContext);
-
-    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 SideNavigationTrigger({ wrapper, ...props }: SideNavigationTriggerProps) {
-    const element = (
-        <div
-            {...internalNavigationContentContainerProps({
-                ...props,
-                prefix: 'navigation-trigger',
-                className: classNames(props.className, 'cursor-pointer'),
-                isActive: props.isActive,
-            })}
-        >
-            <InternalSideNavigationItemContent
-                submenuExpanded={undefined}
-                {...props}
-                tag={getCounterTag(props.counter, props.tag)}
-            />
-        </div>
-    );
-    return wrapper ? <WrappedLink wrapper={wrapper}>{element}</WrappedLink> : element;
-}