@servicetitan/navigation 3.3.0 → 4.1.0

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

@@ -0,0 +1,171 @@
+import { Icon } from '@servicetitan/anvil2';
+import SvgCollapse from '@servicetitan/anvil2/assets/icons/st/gnav_menu_collapse.svg';
+import SvgExpand from '@servicetitan/anvil2/assets/icons/st/gnav_menu_expand.svg';
+import classNames from 'classnames';
+import { FC, Fragment } from 'react';
+import { HeaderNavigationItemData, NavLinkComponentProps } from '../../utils/navigation';
+import { DefaultNavLinkComponent } from '../../utils/navigation-context';
+import { withTooltip } from '../../utils/with-tooltip';
+import { CounterTag } from '../counter-tag';
+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 (
+        <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}
+                                navigationComponent={navigationComponent}
+                                {...item}
+                            />
+                        ))}
+                    </div>
+                    <div className={Styles.divider} />
+                </Fragment>
+            )}
+            <div className={Styles.sideNavContent} data-cy="navigation-items">
+                {items?.map(item => (
+                    <SideNavigationItem
+                        key={item.id}
+                        expanded={expanded}
+                        navigationComponent={navigationComponent}
+                        {...item}
+                    />
+                ))}
+            </div>
+            <div className={Styles.sideNavBottom}>
+                <SideNavigationOptionsToggle
+                    expanded={expanded}
+                    onExpandedChange={onExpandedChange}
+                />
+            </div>
+        </div>
+    );
+};
+
+interface SideNavigationItemProps extends HeaderNavigationItemData {
+    navigationComponent: FC<NavLinkComponentProps>;
+    expanded?: boolean;
+}
+
+/** Side Navigation menu item */
+const SideNavigationItem: FC<SideNavigationItemProps> = ({
+    id,
+    to,
+    title,
+    hint,
+    counter,
+    className,
+    iconClassName,
+    iconComponent: IconComponent,
+    icon,
+    iconActive,
+    isActive,
+    navigationComponent: NavigationComponent,
+    expanded,
+}) => {
+    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,
+                [Styles.navigationItemIconState]: !!icon && !!iconActive,
+            })}
+            isActive={typeof isActive === 'function' ? isActive : undefined}
+            activeClassName={Styles.navigationItemActive}
+        >
+            {IconComponent ? (
+                <i className={classNames(Styles.navigationIcon, iconClassName)}>
+                    <IconComponent />
+                </i>
+            ) : (
+                <Fragment>
+                    {icon && (
+                        <Icon
+                            svg={icon}
+                            className={classNames(Styles.navigationIcon, iconClassName)}
+                        />
+                    )}
+                    {iconActive && (
+                        <Icon
+                            svg={iconActive}
+                            className={classNames(
+                                Styles.navigationIcon,
+                                Styles.navigationIconActive,
+                                iconClassName
+                            )}
+                        />
+                    )}
+                </Fragment>
+            )}
+
+            {!!expanded && <span className={Styles.navigationItemText}>{title}</span>}
+            {!!counter && <CounterTag data={counter} className={Styles.navigationItemCounter} />}
+        </NavigationComponent>,
+        expanded ? undefined : title,
+        'right'
+    );
+};
+
+/** 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.optionsIconWrapper}>
+                <Icon className={Styles.optionsIcon} svg={expanded ? SvgCollapse : SvgExpand} />
+            </div>
+
+            {!!expanded && <span className={Styles.optionsItemText}>Collapse Menu</span>}
+        </div>,
+        expanded ? undefined : 'Expand Menu',
+        'right'
+    );

package/src/components/links.tsx

@@ -0,0 +1,31 @@
+import { FC, useContext } from 'react';
+import { HeaderNavigationLinkProps, HeaderNavigationTriggerProps } from '../utils/navigation';
+import { NavigationLegacyContext } from '../utils/navigation-context';
+import {
+    HeaderNavigationLink as HeaderNavigationLinkLegacy,
+    HeaderNavigationTrigger as HeaderNavigationTriggerLegacy,
+} from './header-navigation/header-navigation-links';
+import {
+    HeaderNavigationLink as HeaderNavigationLinkModern,
+    HeaderNavigationTrigger as HeaderNavigationTriggerModern,
+} from './left-navigation/header-navigation-tiny-links';
+
+export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = props => {
+    const isLegacy = useContext(NavigationLegacyContext);
+
+    return isLegacy ? (
+        <HeaderNavigationLinkLegacy {...props} />
+    ) : (
+        <HeaderNavigationLinkModern {...props} />
+    );
+};
+
+export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = props => {
+    const isLegacy = useContext(NavigationLegacyContext);
+
+    return isLegacy ? (
+        <HeaderNavigationTriggerLegacy {...props} />
+    ) : (
+        <HeaderNavigationTriggerModern {...props} />
+    );
+};

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

@@ -1,178 +1,13 @@
-import { Button } from '@servicetitan/design-system';
-import { FC } from 'react';
-import { NavLinkComponentProps } from '../../utils/navigation';
+import { withAnvil, withMemoryRouter } from '../../test/data.stories';
 import { HeaderNavigationStacked } from '../header-navigation';
+export * from './profile-dropdown.stories';
 import { ProfileDropdown } from './profile-dropdown';
 
+const withHeaderNavigationStacked = (Story: any) => <HeaderNavigationStacked right={<Story />} />;
+
 export default {
     title: 'Navigation/ProfileDropdownStacked',
     component: ProfileDropdown,
     parameters: {},
+    decorators: [withMemoryRouter, withAnvil, withHeaderNavigationStacked],
 };
-
-const NavLinkMock: FC<NavLinkComponentProps> = props => (
-    <a
-        href={props.to}
-        target={props.target}
-        onClick={e => {
-            e.preventDefault();
-        }}
-        className={props.className}
-    >
-        {props.children}
-    </a>
-);
-
-export const profileDropdownDefault = () => (
-    <HeaderNavigationStacked
-        navigationComponent={NavLinkMock}
-        right={
-            <ProfileDropdown>
-                <ProfileDropdown.Link id="first" to="https://google.com">
-                    first link
-                </ProfileDropdown.Link>
-                <ProfileDropdown.Link id="second" onClick={() => alert('second click')}>
-                    second link
-                </ProfileDropdown.Link>
-                <ProfileDropdown.Divider />
-                <ProfileDropdown.Section id="content">some content</ProfileDropdown.Section>
-                <ProfileDropdown.Divider />
-                <ProfileDropdown.Divider />
-                <ProfileDropdown.Divider />
-                <ProfileDropdown.Link id="third" to="https://google.com">
-                    third link
-                </ProfileDropdown.Link>
-                <ProfileDropdown.Divider />
-            </ProfileDropdown>
-        }
-    />
-);
-
-export const profileDropdownWithLogo = () => (
-    <HeaderNavigationStacked
-        navigationComponent={NavLinkMock}
-        right={
-            <ProfileDropdown
-                trigger={{
-                    imageSrc:
-                        'https://upload.wikimedia.org/wikipedia/en/1/11/Milhouse_Van_Houten.png',
-                }}
-            >
-                <ProfileDropdown.Link id="first" to="https://google.com">
-                    first link
-                </ProfileDropdown.Link>
-                <ProfileDropdown.Link id="second" onClick={() => alert('second click')}>
-                    second link
-                </ProfileDropdown.Link>
-            </ProfileDropdown>
-        }
-    />
-);
-
-export const profileDropdownWithErrorLogo = () => (
-    <HeaderNavigationStacked
-        right={
-            <ProfileDropdown
-                trigger={{
-                    imageSrc: 'https://some.incorrect.url/logo.png',
-                }}
-            />
-        }
-    />
-);
-
-export const profileDropdownWithInfo = () => (
-    <HeaderNavigationStacked
-        right={
-            <ProfileDropdown
-                trigger={{
-                    info: { text: 'first', title: 'tenant user' },
-                    avatarBadge: true,
-                }}
-            />
-        }
-    />
-);
-
-export const profileDropdownWithCounter = () => (
-    <HeaderNavigationStacked
-        right={
-            <ProfileDropdown
-                trigger={{
-                    info: { text: 'first', title: 'tenant user' },
-                    avatarBadge: true,
-                    badge: { content: 3, className: 'bg-red-500' },
-                }}
-            />
-        }
-    />
-);
-
-export const profileDropdownWithBothBadges = () => (
-    <HeaderNavigationStacked
-        right={
-            <ProfileDropdown
-                trigger={{
-                    avatarBadge: 'yellow-500',
-                    badge: { className: 'bg-red-400' },
-                }}
-            />
-        }
-    />
-);
-
-// eslint-disable-next-line no-console
-const log = (text: string) => console.log(text);
-
-export const profileDropdownWithHintPopup = () => (
-    <HeaderNavigationStacked
-        navigationComponent={NavLinkMock}
-        right={
-            <ProfileDropdown
-                trigger={{
-                    avatarBadge: 'yellow-500',
-                    badge: { className: 'bg-red-400' },
-                }}
-                hintPopup={{
-                    className: 'bg-blue-500-i c-white',
-                    content: ({ openProfile }) => (
-                        <div>
-                            hello{' '}
-                            <Button onClick={openProfile} size="xsmall">
-                                show me
-                            </Button>
-                        </div>
-                    ),
-                    width: 's',
-                    onClose: () => log('close profile dropdown hint'),
-                }}
-                onOpen={() => log('open profile dropdown')}
-                onClose={() => log('close profile dropdown')}
-            >
-                <ProfileDropdown.Link id="first" to="https://google.com">
-                    first item
-                </ProfileDropdown.Link>
-                <ProfileDropdown.Divider />
-                <ProfileDropdown.Section id="second">second item</ProfileDropdown.Section>
-            </ProfileDropdown>
-        }
-    />
-);
-
-export const profileDropdownWithHintAndInfoPopup = () => (
-    <HeaderNavigationStacked
-        navigationComponent={NavLinkMock}
-        right={
-            <ProfileDropdown
-                trigger={{
-                    avatarBadge: 'yellow-500',
-                    badge: { className: 'bg-red-400' },
-                    info: { title: 'some text', text: 'qq' },
-                }}
-                hintPopup={{
-                    content: () => <div>hello</div>,
-                }}
-            />
-        }
-    />
-);

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

@@ -0,0 +1,15 @@
+import { withAnvil, withMemoryRouter } from '../../test/data.stories';
+import { HeaderNavigationTiny } from '../left-navigation';
+export * from './profile-dropdown.stories';
+import { ProfileDropdown } from './profile-dropdown';
+
+const withHeaderNavigationTiny = (Story: any) => (
+    <HeaderNavigationTiny className="border" right={<Story />} />
+);
+
+export default {
+    title: 'Navigation/ProfileDropdownTiny',
+    component: ProfileDropdown,
+    parameters: {},
+    decorators: [withMemoryRouter, withAnvil, withHeaderNavigationTiny],
+};

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

@@ -17,7 +17,7 @@
     .avatar-badge {
         position: absolute;
         top: 8px;
-        left: 0;
+        left: 4px;
         height: 12px;
         width: 12px;
         border-radius: @border-radius-circular;
@@ -50,6 +50,12 @@
         border-radius: 8px;
     }
 
+    &.trigger-container-legacy {
+        .avatar-badge {
+            left: 0;
+        }
+    }
+
     &.trigger-container-hint-arrow:first-child:before {
         display: none;
         content: '';

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

@@ -16,4 +16,5 @@ export const info: string;
 export const profileImage: string;
 export const triggerContainer: string;
 export const triggerContainerHintArrow: string;
+export const triggerContainerLegacy: string;