@servicetitan/navigation 0.1.0 → 0.2.0

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

@@ -0,0 +1,136 @@
+/* stylelint-disable no-descending-specificity */
+@import (reference) '@servicetitan/tokens/core/tokens.less';
+
+.trigger-container {
+    height: 40px;
+    position: relative;
+
+    .profile-image {
+        height: 32px;
+        width: 32px;
+        border-radius: @border-radius-circular;
+    }
+
+    .info {
+        margin-left: @spacing-1;
+        max-width: 80px;
+    }
+
+    .avatar-badge {
+        position: absolute;
+        top: 8px;
+        left: 0;
+        height: 12px;
+        width: 12px;
+        border-radius: @border-radius-circular;
+    }
+
+    .badge {
+        position: absolute;
+        right: 16px;
+        color: @color-white;
+        font-size: @typescale-1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-weight: @font-weight-semibold;
+    }
+
+    .badge-no-content {
+        top: 8px;
+        height: 12px;
+        width: 12px;
+        border-radius: @border-radius-2;
+    }
+
+    .badge-with-content {
+        top: 4px;
+        height: 16px;
+        min-width: 12px;
+        padding-left: 2px;
+        padding-right: 2px;
+        border-radius: 8px;
+    }
+
+    &.trigger-container-hint-arrow:first-child:before {
+        display: none;
+        content: '';
+        position: absolute;
+        background-color: @color-white;
+        height: 12px;
+        width: 12px;
+        bottom: -11px;
+        left: 14px;
+        z-index: (@z-index-popover + 2);
+        transform: rotateY(0deg) rotate(45deg);
+        border-left: 1px solid var(--colorsBorderGrey, @color-neutral-60);
+        border-top: 1px solid var(--colorsBorderGrey, @color-neutral-60);
+    }
+}
+
+.dropdown {
+    :global(.Popover__content) {
+        padding: @spacing-0;
+    }
+
+    :global(.Popover__divider) {
+        margin: @spacing-half @spacing-0;
+        width: 100%;
+    }
+
+    :global(.Popover__content).dropdown-content {
+        padding: @spacing-1 @spacing-0;
+        font-size: @typescale-2;
+        position: relative;
+    }
+
+    .dropdown-content-bottom-left {
+        .dropdown-content-wrapper::before {
+            content: '';
+            position: absolute;
+            top: -8px;
+            right: 8px;
+            height: 8px;
+            width: 8px;
+            background-color: coral;
+        }
+    }
+
+    .dropdown-section {
+        padding: @spacing-1 @spacing-2;
+    }
+
+    .dropdown-link {
+        display: block;
+        cursor: pointer;
+        color: @color-black;
+
+        &:hover {
+            background-color: rgba(0, 0, 0, 0.1);
+        }
+    }
+}
+
+.hint {
+    background-color: @color-white;
+    padding: @spacing-0 !important;
+
+    .hint-content {
+        padding: @spacing-1 @spacing-2;
+        background-color: inherit;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: -6px;
+            right: 29px;
+            height: 12px;
+            width: 12px;
+            background-color: inherit;
+            transform: rotateY(0deg) rotate(45deg);
+            border-left: 1px solid @color-neutral-60;
+            border-top: 1px solid @color-neutral-60;
+            z-index: (@z-index-popover + 2);
+        }
+    }
+}

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

@@ -0,0 +1,18 @@
+export const __esModule: true;
+export const triggerContainer: string;
+export const profileImage: string;
+export const info: string;
+export const avatarBadge: string;
+export const badge: string;
+export const badgeNoContent: string;
+export const badgeWithContent: string;
+export const triggerContainerHintArrow: string;
+export const dropdown: string;
+export const dropdownContent: string;
+export const dropdownContentBottomLeft: string;
+export const dropdownContentWrapper: string;
+export const dropdownSection: string;
+export const dropdownLink: string;
+export const hint: string;
+export const hintContent: string;
+

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

@@ -0,0 +1,127 @@
+import { FC } from 'react';
+import { HeaderNavigationComponentProps } from '../../utils/navigation';
+import { HeaderNavigation } from '../header-navigation/header-navigation';
+import { ProfileDropdown } from './profile-dropdown';
+
+export default {
+    title: 'Navigation/ProfileDropdown',
+    component: ProfileDropdown,
+    parameters: {},
+};
+
+const NavLinkMock: FC<HeaderNavigationComponentProps> = props => (
+    <a
+        href={props.to}
+        target={props.target}
+        onClick={e => {
+            e.preventDefault();
+        }}
+        className={props.className}
+    >
+        {props.children}
+    </a>
+);
+
+export const profileDropdownDefault = () => (
+    <HeaderNavigation navigationComponent={NavLinkMock}>
+        <ProfileDropdown>
+            <ProfileDropdown.Link to="https://google.com">first link</ProfileDropdown.Link>
+            <ProfileDropdown.Link onClick={() => alert('second click')}>
+                second link
+            </ProfileDropdown.Link>
+            <ProfileDropdown.Divider />
+            <ProfileDropdown.Section>some content</ProfileDropdown.Section>
+            <ProfileDropdown.Divider />
+            <ProfileDropdown.Link to="https://google.com">third link</ProfileDropdown.Link>
+        </ProfileDropdown>
+    </HeaderNavigation>
+);
+
+export const profileDropdownWithLogo = () => (
+    <HeaderNavigation>
+        <ProfileDropdown
+            trigger={{
+                imageSrc: 'https://upload.wikimedia.org/wikipedia/en/1/11/Milhouse_Van_Houten.png',
+            }}
+        />
+    </HeaderNavigation>
+);
+
+export const profileDropdownWithErrorLogo = () => (
+    <HeaderNavigation>
+        <ProfileDropdown
+            trigger={{
+                imageSrc: 'https://some.incorrect.url/logo.png',
+            }}
+        />
+    </HeaderNavigation>
+);
+
+export const profileDropdownWithInfo = () => (
+    <HeaderNavigation>
+        <ProfileDropdown
+            trigger={{
+                info: { text: 'first', title: 'tenant user' },
+                avatarBadge: true,
+            }}
+        />
+    </HeaderNavigation>
+);
+
+export const profileDropdownWithCounter = () => (
+    <HeaderNavigation>
+        <ProfileDropdown
+            trigger={{
+                info: { text: 'first', title: 'tenant user' },
+                avatarBadge: true,
+                badge: { content: 3, className: 'bg-red-500' },
+            }}
+        />
+    </HeaderNavigation>
+);
+
+export const profileDropdownWithBothBadges = () => (
+    <HeaderNavigation>
+        <ProfileDropdown
+            trigger={{
+                avatarBadge: 'yellow-500',
+                badge: { className: 'bg-red-400' },
+            }}
+        />
+    </HeaderNavigation>
+);
+
+export const profileDropdownWithHintPopup = () => (
+    <HeaderNavigation navigationComponent={NavLinkMock}>
+        <ProfileDropdown
+            trigger={{
+                avatarBadge: 'yellow-500',
+                badge: { className: 'bg-red-400' },
+            }}
+            hintPopup={{
+                className: 'bg-blue-500-i c-white',
+                content: <div>hello</div>,
+                width: 's',
+            }}
+        >
+            <ProfileDropdown.Link to="https://google.com">first item</ProfileDropdown.Link>
+            <ProfileDropdown.Divider />
+            <ProfileDropdown.Section>second item</ProfileDropdown.Section>
+        </ProfileDropdown>
+    </HeaderNavigation>
+);
+
+export const profileDropdownWithHintAndInfoPopup = () => (
+    <HeaderNavigation navigationComponent={NavLinkMock}>
+        <ProfileDropdown
+            trigger={{
+                avatarBadge: 'yellow-500',
+                badge: { className: 'bg-red-400' },
+                info: { title: 'some text', text: 'qq' },
+            }}
+            hintPopup={{
+                content: <div>hello</div>,
+            }}
+        />
+    </HeaderNavigation>
+);

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

@@ -0,0 +1,258 @@
+import { BodyText, Icon, Popover, PopoverPropsStrict } from '@servicetitan/design-system';
+import classNames from 'classnames';
+import {
+    FC,
+    HTMLAttributeAnchorTarget,
+    MouseEvent,
+    MouseEventHandler,
+    ReactNode,
+    useCallback,
+    useContext,
+    useEffect,
+    useState,
+} from 'react';
+
+import { NavigationContext } from '../../utils/navigation-context';
+import * as Styles from './profile-dropdown.module.less';
+import { ProfileLogo } from './profile-icon';
+
+interface ProfileDropdownTriggerProps {
+    className?: string;
+    info?: { title: string; text: string };
+    imageSrc?: string | null;
+    avatarBadge?: boolean | string;
+    badge?: { content?: number | string; className: string };
+    hintArrow?: boolean;
+    onClick?(e: MouseEvent): void;
+}
+
+const ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps> = ({
+    avatarBadge,
+    badge,
+    className,
+    hintArrow,
+    imageSrc,
+    info,
+    onClick,
+}) => {
+    const [avatarSource, setAvatarSource] = useState(imageSrc ?? '');
+    const [avatarSourceError, setAvatarSourceError] = useState(false);
+
+    useEffect(() => {
+        const src = imageSrc ?? '';
+
+        if (src === avatarSource) {
+            return;
+        }
+
+        setAvatarSource(src);
+        setAvatarSourceError(false);
+    }, [imageSrc, avatarSource]);
+
+    const onAvatarError = useCallback(() => {
+        setAvatarSourceError(true);
+    }, []);
+
+    return (
+        <div
+            className={classNames(
+                'd-f align-items-center cursor-pointer position-relative p-y-1 p-x-1',
+                Styles.triggerContainer,
+                { [Styles.triggerContainerHintArrow]: hintArrow },
+                className
+            )}
+            onClick={onClick}
+        >
+            {avatarSource && !avatarSourceError ? (
+                <img
+                    src={avatarSource}
+                    className={Styles.profileImage}
+                    onError={onAvatarError}
+                    alt="user dropdown menu"
+                />
+            ) : (
+                <ProfileLogo size={24} />
+            )}
+
+            {!!info && (
+                <div className={Styles.info}>
+                    <BodyText bold title={info.title} className="t-truncate c-white" size="xsmall">
+                        {info.title}
+                    </BodyText>
+                    <BodyText
+                        title={info.text}
+                        className="t-truncate c-neutral-70 tt-uppercase"
+                        size="xsmall"
+                    >
+                        {info.text}
+                    </BodyText>
+                </div>
+            )}
+
+            <Icon className="m-l-half" name="expand_more" size={12} />
+
+            {!!avatarBadge && (
+                <div
+                    className={classNames(
+                        Styles.avatarBadge,
+                        avatarBadge === true ? 'bg-blue-500' : `bg-${avatarBadge}`
+                    )}
+                />
+            )}
+            {!!badge && (
+                <span
+                    className={classNames(
+                        Styles.badge,
+                        badge.content ? Styles.badgeWithContent : Styles.badgeNoContent,
+                        badge.className
+                    )}
+                >
+                    {badge.content}
+                </span>
+            )}
+        </div>
+    );
+};
+
+interface ProfileDropdownSectionProps {
+    children: ReactNode;
+    className?: string;
+    onClick?(e: MouseEvent): void;
+}
+
+const ProfileDropdownSection: FC<ProfileDropdownSectionProps> = ({
+    children,
+    className,
+    onClick,
+}) => {
+    const clickHandler: MouseEventHandler<never> = e => {
+        if (onClick) {
+            onClick(e);
+        } else {
+            e.stopPropagation();
+        }
+    };
+
+    return (
+        <div className={classNames(Styles.dropdownSection, className)} onClick={clickHandler}>
+            {children}
+        </div>
+    );
+};
+
+type ProfileDropdownLinkProps = {
+    children: ReactNode;
+} & (
+    | { target?: HTMLAttributeAnchorTarget; to: string; onClick?: () => void }
+    | { target?: never; to?: never; onClick(): void }
+);
+
+const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
+    children,
+    target,
+    to,
+    onClick,
+}: ProfileDropdownLinkProps) => {
+    const NavigationComponent = useContext(NavigationContext);
+
+    const clickHandler = (e: MouseEvent<any>) => {
+        e.preventDefault();
+        onClick?.();
+    };
+
+    return to ? (
+        <NavigationComponent
+            className={classNames(Styles.dropdownSection, Styles.dropdownLink)}
+            target={target}
+            to={to}
+        >
+            {children}
+        </NavigationComponent>
+    ) : (
+        <a
+            className={classNames(Styles.dropdownSection, Styles.dropdownLink)}
+            onClick={clickHandler}
+        >
+            {children}
+        </a>
+    );
+};
+
+export interface ProfileDropdownProps {
+    children?: ReactNode;
+    trigger?: Omit<ProfileDropdownTriggerProps, 'onClick'>;
+    hintPopup?: {
+        className?: string;
+        content: ReactNode;
+        width?: PopoverPropsStrict['width'];
+        onClose?: () => void;
+    };
+}
+
+export interface ProfileDropdownType extends FC<ProfileDropdownProps> {
+    Divider: typeof Popover.Divider;
+    Link: typeof ProfileDropdownLink;
+    Section: typeof ProfileDropdownSection;
+}
+
+export const ProfileDropdown: ProfileDropdownType = (({ children, hintPopup, trigger }) => {
+    const [open, setOpen] = useState(false);
+    const onClose = useCallback(() => {
+        setOpen(false);
+    }, []);
+    const onTriggerClick = useCallback(
+        (e: MouseEvent) => {
+            e.stopPropagation();
+            setOpen(!open);
+        },
+        [open]
+    );
+    const hintShown = !!hintPopup && !open;
+
+    const triggerElement = (
+        <ProfileDropdownTrigger
+            {...trigger}
+            onClick={children ? onTriggerClick : undefined}
+            hintArrow={hintShown}
+        />
+    );
+
+    return (
+        <div className="position-relative">
+            {!!hintPopup && hintShown ? (
+                <Popover
+                    direction="bl"
+                    width={hintPopup.width ?? 'xs'}
+                    trigger={triggerElement}
+                    popoverContentClassName={Styles.hint}
+                    open
+                >
+                    <div className={classNames(Styles.hintContent, hintPopup.className)}>
+                        {hintPopup.content}
+                    </div>
+                </Popover>
+            ) : (
+                <Popover
+                    direction="bl"
+                    width="xs"
+                    trigger={triggerElement}
+                    open={open}
+                    onClickOutside={onClose}
+                    className={Styles.dropdown}
+                    popoverContentClassName={classNames(
+                        Styles.dropdownContent,
+                        Styles.dropdownContentBottomLeft
+                    )}
+                >
+                    <div className={Styles.dropdownContentWrapper} onClick={onClose}>
+                        {children}
+                    </div>
+                </Popover>
+            )}
+        </div>
+    );
+}) as ProfileDropdownType;
+
+ProfileDropdown.Divider = Popover.Divider;
+ProfileDropdown.Link = ProfileDropdownLink;
+ProfileDropdown.Section = ProfileDropdownSection;

package/src/components/profile-dropdown/profile-icon.tsx

@@ -0,0 +1,52 @@
+import { FC } from 'react';
+
+export const ProfileLogo: FC<{ size: number }> = ({ size }) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        version="1.1"
+        width={size}
+        height={size}
+        viewBox="0 0 256 256"
+    >
+        <g
+            stroke="none"
+            strokeWidth="0"
+            strokeDasharray="none"
+            strokeLinecap="butt"
+            strokeLinejoin="miter"
+            strokeMiterlimit="10"
+            fill="none"
+            fillRule="nonzero"
+            opacity="1"
+            transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)"
+        >
+            <path
+                d="M 45 53.718 c -10.022 0 -18.175 -8.153 -18.175 -18.175 S 34.978 17.368 45 17.368 c 10.021 0 18.175 8.153 18.175 18.175 S 55.021 53.718 45 53.718 z"
+                stroke="none"
+                strokeWidth="1"
+                strokeDasharray="none"
+                strokeLinecap="round"
+                strokeLinejoin="miter"
+                strokeMiterlimit="10"
+                fill="rgb(255,255,255)"
+                fillRule="nonzero"
+                opacity="1"
+                transform=" matrix(1 0 0 1 0 0) "
+            />
+
+            <path
+                d="M 45 0 C 20.187 0 0 20.187 0 45 c 0 24.813 20.187 45 45 45 c 24.813 0 45 -20.187 45 -45 C 90 20.187 69.813 0 45 0 z M 74.821 70.096 c -3.543 -5.253 -8.457 -9.568 -14.159 -12.333 c -2.261 -1.096 -4.901 -1.08 -7.247 0.047 c -2.638 1.268 -5.47 1.91 -8.415 1.91 c -2.945 0 -5.776 -0.643 -8.415 -1.91 c -2.343 -1.125 -4.984 -1.143 -7.247 -0.047 c -5.702 2.765 -10.616 7.08 -14.16 12.333 C 9.457 63.308 6 54.552 6 45 C 6 23.495 23.495 6 45 6 s 39 17.495 39 39 C 84 54.552 80.543 63.308 74.821 70.096 z"
+                stroke="none"
+                strokeWidth="1"
+                strokeDasharray="none"
+                strokeLinecap="round"
+                strokeLinejoin="miter"
+                strokeMiterlimit="10"
+                fill="rgb(255,255,255)"
+                fillRule="nonzero"
+                opacity="1"
+                transform=" matrix(1 0 0 1 0 0) "
+            />
+        </g>
+    </svg>
+);

package/src/index.ts

@@ -1 +1,5 @@
 export * from './components/header-navigation/header-navigation';
+export * from './components/profile-dropdown/profile-dropdown';
+export * from './components/logo/logo-company-title';
+export * from './components/logo/logo-titan';
+export * from './components/logo/logo-titan-text';

package/src/utils/navigation-context.tsx

@@ -0,0 +1,12 @@
+import { FC, createContext } from 'react';
+import { NavLink } from 'react-router-dom';
+import { HeaderNavigationComponentProps } from './navigation';
+
+export const DefaultNavigationComponent: FC<HeaderNavigationComponentProps> = props => (
+    <NavLink
+        {...props}
+        isActive={props.isActive && ((_, { pathname }) => props.isActive!(pathname))}
+    />
+);
+
+export const NavigationContext = createContext(DefaultNavigationComponent);

package/src/utils/navigation.ts

@@ -1,5 +1,5 @@
 import { IconPropsStrict } from '@servicetitan/design-system';
-import { FC, ReactNode } from 'react';
+import { FC, HTMLAttributeAnchorTarget, ReactNode } from 'react';
 
 export interface HeaderNavigationLinkData {
     /** link href */
@@ -38,11 +38,12 @@ export interface HeaderNavigationLinkData {
 
 export interface HeaderNavigationComponentPropsStrict {
     to: string;
-    title: string;
+    title?: string;
     className?: string;
     activeClassName?: string;
     children: ReactNode;
     isActive?: (pathname: string) => boolean;
+    target?: HTMLAttributeAnchorTarget;
 }
 
 export interface HeaderNavigationComponentProps extends HeaderNavigationComponentPropsStrict {