@servicetitan/navigation 3.3.0 → 4.1.0

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

@@ -1,224 +0,0 @@
-import { BodyText, Divider, Eyebrow, Icon, Popover, Stack } from '@servicetitan/design-system';
-import classNames from 'classnames';
-import { FC, Fragment, PropsWithChildren, useState } from 'react';
-import { HeaderNavigationItemData, NavLinkComponentProps } from '../../utils/navigation';
-import {
-    DefaultNavLinkComponent,
-    NavLinkContext,
-    useNavLink,
-} from '../../utils/navigation-context';
-import { withTooltip } from '../../utils/with-tooltip';
-import { CounterTag } from '../counter-tag';
-import { IconSideExpanded, IconSideOptions, IconSideSlim } from './icons';
-import * as Styles from './side-navigation.module.less';
-
-export interface SideNavigationProps {
-    /** container class name */
-    className?: string;
-    /** container id */
-    id?: string;
-    /** main navigation items */
-    items?: HeaderNavigationItemData[];
-    /** top navigation items */
-    itemsTop?: HeaderNavigationItemData[];
-    /** is menu expanded */
-    expanded?: boolean;
-    /** navigation component used for routing */
-    navigationComponent?: FC<NavLinkComponentProps>;
-    /** expand change handler */
-    onExpandedChange(expanded: boolean): void;
-}
-
-export const SideNavigation: FC<SideNavigationProps> = ({
-    className,
-    expanded,
-    id,
-    items,
-    itemsTop,
-    navigationComponent = DefaultNavLinkComponent,
-    onExpandedChange,
-}) => {
-    return (
-        <NavLinkContext.Provider value={navigationComponent}>
-            <div
-                className={classNames(
-                    Styles.sideNav,
-                    expanded ? Styles.sideNavExpanded : Styles.sideNavSlim,
-                    className
-                )}
-                id={id}
-                data-cy="side-navigation"
-            >
-                {!!itemsTop?.length && (
-                    <Fragment>
-                        <div className={Styles.sideNavTop} data-cy="navigation-items-top">
-                            {itemsTop.map(item => (
-                                <SideNavigationItem key={item.id} expanded={expanded} {...item} />
-                            ))}
-                        </div>
-                        <div className={Styles.divider} />
-                    </Fragment>
-                )}
-                <div className={Styles.sideNavContent} data-cy="navigation-items">
-                    {items?.map(item => (
-                        <SideNavigationItem key={item.id} expanded={expanded} {...item} />
-                    ))}
-                </div>
-                <div className={Styles.sideNavBottom}>
-                    <SideNavigationOptionsToggle
-                        expanded={expanded}
-                        onExpandedChange={onExpandedChange}
-                    />
-                </div>
-            </div>
-        </NavLinkContext.Provider>
-    );
-};
-
-interface SideNavigationItemProps extends HeaderNavigationItemData {
-    expanded?: boolean;
-}
-
-/** Side Navigation menu item */
-export const SideNavigationItem: FC<SideNavigationItemProps> = ({
-    id,
-    to,
-    title,
-    hint,
-    counter,
-    className,
-    iconClassName,
-    iconComponent: IconComponent,
-    iconName,
-    isActive,
-    expanded,
-}) => {
-    const NavigationComponent = useNavLink();
-    const iconClass = classNames(Styles.navigationIcon, iconClassName);
-
-    return withTooltip(
-        <NavigationComponent
-            data-cy={`navigation-item-${id}`}
-            data-pendo={`navigation-item-${id}`}
-            key={id}
-            to={to}
-            title={hint}
-            className={classNames(Styles.navigationItem, className, {
-                [Styles.navigationItemActive]: isActive === true,
-            })}
-            isActive={typeof isActive === 'function' ? isActive : undefined}
-            activeClassName={Styles.navigationItemActive}
-        >
-            {IconComponent ? (
-                <i className={iconClass}>
-                    <IconComponent />
-                </i>
-            ) : iconName ? (
-                <Icon name={iconName} className={iconClass} />
-            ) : (
-                <i className={iconClass} />
-            )}
-
-            {!!expanded && <span className={Styles.navigationItemText}>{title}</span>}
-            {!!counter && <CounterTag data={counter} className={Styles.navigationItemCounter} />}
-        </NavigationComponent>,
-        expanded ? undefined : title,
-        'r'
-    );
-};
-
-/** Side Navigation options toggle */
-export const SideNavigationOptionsToggle: FC<{
-    expanded?: boolean;
-    onExpandedChange(expanded: boolean): void;
-}> = ({ expanded, onExpandedChange }) =>
-    withTooltip(
-        <div
-            data-cy="navigation-left-options"
-            data-pendo="navigation-left-options"
-            className={classNames(Styles.optionsItem)}
-            onClick={() => onExpandedChange(!expanded)}
-        >
-            <div className={Styles.optionsIcon}>
-                <IconSideOptions expanded={expanded} />
-            </div>
-
-            {!!expanded && <span className={Styles.optionsItemText}>Collapse Menu</span>}
-        </div>,
-        expanded ? undefined : 'Expand Menu',
-        'r'
-    );
-
-/** Side Navigation options popover */
-export const SideNavigationOptionsPopover: FC<
-    PropsWithChildren<{
-        expanded?: boolean;
-        onExpandedChange(expanded: boolean): void;
-    }>
-> = ({ children, expanded, onExpandedChange }) => {
-    const [open, setOpen] = useState(false);
-
-    const onExpand = () => {
-        setOpen(false);
-        onExpandedChange(true);
-    };
-    const onCollapse = () => {
-        setOpen(false);
-        onExpandedChange(false);
-    };
-
-    return (
-        <Popover
-            className="bg-neutral-30"
-            trigger={children}
-            direction="tr"
-            onClickOutside={() => setOpen(false)}
-            open={open}
-            padding="s"
-            width="xs"
-        >
-            <Eyebrow className="p-l-2">menu options</Eyebrow>
-            <SideNavigationOptionsItem
-                active={!expanded}
-                icon={IconSideSlim}
-                title="Slim"
-                onClick={onCollapse}
-            />
-            <SideNavigationOptionsItem
-                active={!!expanded}
-                icon={IconSideExpanded}
-                title="Expanded"
-                onClick={onExpand}
-            />
-
-            <Divider className="m-x-half m-y-1" />
-
-            <SideNavigationOptionsItem
-                active={false}
-                icon={expanded ? IconSideExpanded : IconSideSlim}
-                title={expanded ? 'Expanded' : 'Slim'}
-            />
-        </Popover>
-    );
-};
-
-const SideNavigationOptionsItem: FC<{
-    active: boolean;
-    icon: FC;
-    title: string;
-    onClick?: () => void;
-}> = ({ active, onClick, title, icon: IconComponent }) => (
-    <Stack
-        className={classNames(
-            active ? Styles.optionsPopoverItemActive : Styles.optionsPopoverItemInactive,
-            'p-y-1 p-x-2',
-            { [Styles.optionsPopoverItemClickable]: onClick && !active }
-        )}
-        alignItems="center"
-        onClick={!active && onClick}
-    >
-        <IconComponent />
-        <BodyText className="c-inherit m-l-1 flex-grow-1 flex-basis-0">{title}</BodyText>
-        {active && <Icon name="check" />}
-    </Stack>
-);