@servicetitan/navigation 2.0.0 → 2.2.0

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

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 
-export interface LogoTitanProps {
+export interface LogoTitanSvgProps {
     height?: number;
     width?: number;
     fill?: string;
@@ -8,7 +8,7 @@ export interface LogoTitanProps {
 }
 
 /* tslint:disable: max-line-length */
-export const LogoTitan: FC<LogoTitanProps> = (props: LogoTitanProps) => {
+export const LogoTitanSvg: FC<LogoTitanSvgProps> = props => {
     const dimensions = {
         width: props.width ?? 116,
         height: props.height ?? 106,

package/src/components/logo/logo.stories.tsx

@@ -1,7 +1,8 @@
+import { Stack, Tag } from '@servicetitan/design-system';
 import { FC, ReactNode } from 'react';
 import { LogoCompanyTitle } from './logo-company-title';
-import { LogoTitan } from './logo-titan';
-import { LogoTitanText } from './logo-titan-text';
+import { LogoTitanSvg } from './logo-titan';
+import { LogoTitan, LogoTitanText, LogoTitanTitle } from './logo-titan-text';
 
 export default {
     title: 'Navigation/Logo',
@@ -9,8 +10,8 @@ export default {
     parameters: {},
 };
 
-export const logoTitan = () => <LogoTitan />;
-export const logoTitanBlueMantle = () => <LogoTitan mantleFill="#2270EE" />;
+export const logoTitan = () => <LogoTitanSvg />;
+export const logoTitanBlueMantle = () => <LogoTitanSvg mantleFill="#2270EE" />;
 export const logoCompanyTitle = () => <LogoCompanyTitle />;
 export const logoTitanText = () => (
     <LogoTitanText
@@ -42,3 +43,11 @@ export const logoTitanTextWithLink = () => (
         logoWrapper={NavLinkMock}
     />
 );
+
+export const logoTitanWithText = () => (
+    <Stack className="border bg-neutral-300" alignItems="center">
+        <LogoTitan className="border-left m-r-1" mantleFill="#2270EE" />
+        <LogoTitanTitle className="m-x-1 p-b-half c-white">Contact Center</LogoTitanTitle>
+        <Tag color="info">pro</Tag>
+    </Stack>
+);

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

@@ -0,0 +1,178 @@
+import { Button } from '@servicetitan/design-system';
+import { FC } from 'react';
+import { NavLinkComponentProps } from '../../utils/navigation';
+import { HeaderNavigationStacked } from '../header-navigation';
+import { ProfileDropdown } from './profile-dropdown';
+
+export default {
+    title: 'Navigation/ProfileDropdownStacked',
+    component: ProfileDropdown,
+    parameters: {},
+};
+
+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.module.less

@@ -6,8 +6,6 @@
     position: relative;
 
     .profile-image {
-        height: 32px;
-        width: 32px;
         border-radius: @border-radius-circular;
     }
 

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

@@ -1,7 +1,7 @@
 import { Button } from '@servicetitan/design-system';
 import { FC } from 'react';
 import { NavLinkComponentProps } from '../../utils/navigation';
-import { HeaderNavigation } from '../header-navigation/header-navigation';
+import { HeaderNavigation } from '../header-navigation';
 import { ProfileDropdown } from './profile-dropdown';
 
 export default {

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

@@ -24,6 +24,7 @@ export interface ProfileDropdownTriggerProps {
     avatarBadge?: boolean | string;
     badge?: { content?: number | string; className: string };
     hintArrow?: boolean;
+    size?: number;
     onClick?(e: MouseEvent): void;
 }
 
@@ -35,6 +36,7 @@ const ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps> = ({
     imageSrc,
     info,
     onClick,
+    size,
 }) => {
     const [avatarSource, setAvatarSource] = useState(imageSrc ?? '');
     const [avatarSourceError, setAvatarSourceError] = useState(false);
@@ -69,12 +71,12 @@ const ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps> = ({
             {avatarSource && !avatarSourceError ? (
                 <img
                     src={avatarSource}
-                    className={Styles.profileImage}
+                    className={classNames(Styles.profileImage, 'profile-dropdown-image')}
                     onError={onAvatarError}
                     alt="user dropdown menu"
                 />
             ) : (
-                <ProfileLogo size={28} />
+                <ProfileLogo size={size} />
             )}
 
             {!!info && (
@@ -308,7 +310,7 @@ export const ProfileDropdown: ProfileDropdownType = (({
     );
 
     return (
-        <div className={classNames('position-relative', className)} data-cy="profile-dropdown">
+        <div className={className} data-cy="profile-dropdown">
             {!!hintPopup && hintShown && HintComponent ? (
                 <Popover
                     direction={direction ?? 'bl'}

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

@@ -1,7 +1,8 @@
 import { FC } from 'react';
 
-export const ProfileLogo: FC<{ size: number }> = ({ size }) => (
+export const ProfileLogo: FC<{ size?: number }> = ({ size }) => (
     <svg
+        className="profile-dropdown-svg"
         xmlns="http://www.w3.org/2000/svg"
         version="1.1"
         width={size}

package/src/index.ts

@@ -1,7 +1,8 @@
-export * from './components/header-navigation/header-navigation';
+export * from './components/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';
 export * from './components/counter-tag';
 export * from './utils/navigation';
+export * from './utils/with-tooltip';

package/src/utils/with-tooltip.tsx

@@ -0,0 +1,11 @@
+import { Tooltip } from '@servicetitan/design-system';
+import { ReactNode } from 'react';
+
+export const withTooltip = (element: ReactNode, tooltip?: string) =>
+    tooltip ? (
+        <Tooltip el="div" direction="b" text={tooltip}>
+            {element}
+        </Tooltip>
+    ) : (
+        element
+    );