@servicetitan/navigation 0.1.0 → 0.2.0

package/dist/components/header-navigation/header-navigation.d.ts

@@ -1,5 +1,28 @@
-import { FC, ReactElement, ReactNode } from 'react';
+import { IconPropsStrict } from '@servicetitan/design-system';
+import { FC, HTMLAttributeAnchorTarget, ReactElement, ReactNode } from 'react';
 import { HeaderNavigationComponentProps, HeaderNavigationLinkData } from '../../utils/navigation';
+interface HeaderNavigationItemContentPropsStrict {
+    title?: string;
+    counter?: number;
+    iconClassName?: string;
+    iconComponent?: FC;
+    iconName?: IconPropsStrict['name'];
+}
+export interface HeaderNavigationTriggerPropsStrict extends HeaderNavigationItemContentPropsStrict {
+    key: string;
+    hint?: string;
+    className?: string;
+}
+interface HeaderNavigationTriggerProps extends HeaderNavigationTriggerPropsStrict {
+    [key: string]: any;
+}
+export interface HeaderNavigationLinkProps extends HeaderNavigationTriggerPropsStrict {
+    to: string;
+    isActive?: boolean | ((pathname: string) => boolean);
+    target?: HTMLAttributeAnchorTarget;
+}
+export declare const HeaderNavigationLink: FC<HeaderNavigationLinkProps>;
+export declare const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps>;
 export interface HeaderNavigationProps {
     children?: ReactNode;
     className?: string;
@@ -12,4 +35,5 @@ export interface HeaderNavigationProps {
     navigationComponent?: FC<HeaderNavigationComponentProps>;
 }
 export declare const HeaderNavigation: FC<HeaderNavigationProps>;
+export {};
 //# sourceMappingURL=header-navigation.d.ts.map

package/dist/components/header-navigation/header-navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"header-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.tsx"],"names":[],"mappings":"AAEA,OAAO,EACH,EAAE,EACF,YAAY,EACZ,SAAS,EAMZ,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,8BAA8B,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AA6FlG,MAAM,WAAW,qBAAqB;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACnC,aAAa,CAAC,EAAE,wBAAwB,EAAE,CAAC;IAC3C,mBAAmB,CAAC,EAAE,EAAE,CAAC,8BAA8B,CAAC,CAAC;CAC5D;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAqFtD,CAAC"}
+{"version":3,"file":"header-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,eAAe,EAAgB,MAAM,6BAA6B,CAAC;AAElF,OAAO,EACH,EAAE,EAEF,yBAAyB,EACzB,YAAY,EACZ,SAAS,EAOZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,8BAA8B,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAYlG,UAAU,sCAAsC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,EAAE,CAAC;IACnB,QAAQ,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;CACtC;AACD,MAAM,WAAW,kCAAmC,SAAQ,sCAAsC;IAC9F,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,4BAA6B,SAAQ,kCAAkC;IAC7E,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,MAAM,WAAW,yBAA0B,SAAQ,kCAAkC;IACjF,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC;IACrD,MAAM,CAAC,EAAE,yBAAyB,CAAC;CACtC;AA8BD,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CAqC9D,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CAsBpE,CAAC;AAmCF,MAAM,WAAW,qBAAqB;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACnC,aAAa,CAAC,EAAE,wBAAwB,EAAE,CAAC;IAC3C,mBAAmB,CAAC,EAAE,EAAE,CAAC,8BAA8B,CAAC,CAAC;CAC5D;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAuFtD,CAAC"}

package/dist/components/header-navigation/header-navigation.js

@@ -9,11 +9,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon, Popover, Tag } from '@servicetitan/design-system';
 import classNames from 'classnames';
-import { useCallback, useEffect, useLayoutEffect, useRef, useState, } from 'react';
-import { NavLink } from 'react-router-dom';
+import { Fragment, useCallback, useContext, useEffect, useLayoutEffect, useRef, useState, } from 'react';
+import { DefaultNavigationComponent, NavigationContext } from '../../utils/navigation-context';
 import * as Styles from './header-navigation.module.less';
 function useForceUpdate() {
     const [, setTick] = useState(0);
@@ -21,18 +22,22 @@ function useForceUpdate() {
         setTick(tick => tick + 1);
     }, []);
 }
-const DefaultNavigationComponent = props => (_jsx(NavLink, Object.assign({}, props, { isActive: props.isActive && ((_, { pathname }) => props.isActive(pathname)) })));
-const HeaderNavigationLink = (_a) => {
-    var _b = _a.item, { iconComponent: IconComponent } = _b, item = __rest(_b, ["iconComponent"]), { navigationComponent: NavigationComponent = DefaultNavigationComponent } = _a;
-    return (_jsxs(NavigationComponent, Object.assign({ to: item.to, title: item.hint, className: classNames(Styles.link, item.className, {
-            [Styles.active]: item.isActive === true,
-        }), isActive: typeof item.isActive === 'function' ? item.isActive : undefined, activeClassName: Styles.active, "data-cy": `nav-item-${item.key}` }, { children: [IconComponent ? (_jsx("i", Object.assign({ className: Styles.icon }, { children: _jsx(IconComponent, {}) }))) : item.iconName ? (_jsx(Icon, { name: item.iconName, size: 20, className: Styles.icon })) : (_jsx("i", { className: classNames(Styles.icon, item.iconClassName) })), _jsx("ins", { children: item.title }), !!item.counter && (_jsx(Tag, Object.assign({ className: Styles.counter, compact: true, badge: true, color: "critical" }, { children: item.counter })))] }), item.key));
+const HeaderNavigationItemContent = ({ title, counter, iconClassName, iconComponent: IconComponent, iconName, }) => (_jsxs(Fragment, { children: [IconComponent ? (_jsx("i", Object.assign({ className: Styles.icon }, { children: _jsx(IconComponent, {}) }))) : iconName ? (_jsx(Icon, { size: "inherit", name: iconName, className: Styles.icon })) : (_jsx("i", { className: classNames(Styles.icon, iconClassName) })), !!title && _jsx("ins", { children: title }), !!counter && (_jsx(Tag, Object.assign({ className: Styles.counter, compact: true, badge: true, color: "critical" }, { children: counter })))] }));
+export const HeaderNavigationLink = ({ key, to, title, hint, counter, className, iconClassName, iconComponent, iconName, isActive, target, }) => {
+    const NavigationComponent = useContext(NavigationContext);
+    return (_jsx(NavigationComponent, Object.assign({ to: to, title: hint, className: classNames(Styles.link, className, {
+            [Styles.active]: isActive === true,
+        }), isActive: typeof isActive === 'function' ? isActive : undefined, activeClassName: Styles.active, "data-cy": `nav-item-${key}`, target: target }, { children: _jsx(HeaderNavigationItemContent, { title: title, counter: counter, iconComponent: iconComponent, iconClassName: iconClassName, iconName: iconName }) }), key));
 };
-const HeaderNavigationOverflow = ({ items, navigationComponent }) => {
+export const HeaderNavigationTrigger = (_a) => {
+    var { key, hint, className, iconClassName, iconComponent, iconName } = _a, rest = __rest(_a, ["key", "hint", "className", "iconClassName", "iconComponent", "iconName"]);
+    return (_jsx("div", Object.assign({}, rest, { title: hint, className: classNames(Styles.link, 'cursor-pointer', className), "data-cy": `nav-item-${key}` }, { children: _jsx(HeaderNavigationItemContent, { iconComponent: iconComponent, iconClassName: iconClassName, iconName: iconName }) }), key));
+};
+const HeaderNavigationOverflow = ({ items }) => {
     const [isOpen, setIsOpen] = useState(false);
-    return (_jsx(Popover, Object.assign({ open: isOpen, trigger: _jsx(Icon, { name: "more_vert", size: "24px", className: "c-pointer", onClick: () => setIsOpen(true), color: "white" }), direction: "bl", width: "xs", onClickOutside: () => setIsOpen(false), wrapperClassName: "d-if-i align-items-center", popoverContentClassName: Styles.overflowPopover, portal: true }, { children: _jsx("div", Object.assign({ onClick: () => setIsOpen(false) }, { children: items.map(item => (_jsx(HeaderNavigationLink, { item: item, navigationComponent: navigationComponent }, item.key))) })) })));
+    return (_jsx(Popover, Object.assign({ open: isOpen, trigger: _jsx(Icon, { name: "more_vert", size: "24px", className: "c-pointer", onClick: () => setIsOpen(true), color: "white" }), direction: "bl", width: "xs", onClickOutside: () => setIsOpen(false), wrapperClassName: "d-if-i align-items-center", popoverContentClassName: Styles.overflowPopover, portal: true }, { children: _jsx("div", Object.assign({ onClick: () => setIsOpen(false), className: Styles.navigationLinks }, { children: items.map(item => (_createElement(HeaderNavigationLink, Object.assign({}, item, { key: item.key })))) })) })));
 };
-export const HeaderNavigation = ({ children, className, contentClassName, id, items, itemsOverflow, left, leftClassName, navigationComponent, }) => {
+export const HeaderNavigation = ({ children, className, contentClassName, id, items, itemsOverflow, left, leftClassName, navigationComponent = DefaultNavigationComponent, }) => {
     const leftRef = useRef(null);
     const rightRef = useRef(null);
     const centerRef = useRef(null);
@@ -65,8 +70,8 @@ export const HeaderNavigation = ({ children, className, contentClassName, id, it
     useEffect(() => {
         updateIsMinimized();
     });
-    return (_jsxs("div", Object.assign({ className: classNames(Styles.header, className, {
-            [Styles.minimized]: isMinimized,
-        }), id: id }, { children: [_jsx("div", Object.assign({ className: leftClassName, ref: leftRef }, { children: left })), _jsx("div", Object.assign({ ref: centerRef, className: "d-if justify-content-center flex-grow-1 flex-basis-0" }, { children: _jsxs("div", Object.assign({ ref: navigationRef, className: "d-if" }, { children: [items === null || items === void 0 ? void 0 : items.map(item => (_jsx(HeaderNavigationLink, { item: item, navigationComponent: navigationComponent }, item.key))), !!(itemsOverflow === null || itemsOverflow === void 0 ? void 0 : itemsOverflow.length) && (_jsx(HeaderNavigationOverflow, { items: itemsOverflow, navigationComponent: navigationComponent }))] })) })), _jsx("div", Object.assign({ className: classNames('d-f flex-row justify-content-end', contentClassName), ref: rightRef }, { children: children }))] })));
+    return (_jsx(NavigationContext.Provider, Object.assign({ value: navigationComponent }, { children: _jsxs("div", Object.assign({ className: classNames(Styles.header, className, {
+                [Styles.minimized]: isMinimized,
+            }), id: id }, { children: [_jsx("div", Object.assign({ className: leftClassName, ref: leftRef }, { children: left })), _jsx("div", Object.assign({ ref: centerRef, className: "d-if justify-content-center flex-grow-1 flex-basis-0" }, { children: _jsxs("div", Object.assign({ ref: navigationRef, className: classNames(Styles.navigationLinks, 'd-if') }, { children: [items === null || items === void 0 ? void 0 : items.map(item => (_createElement(HeaderNavigationLink, Object.assign({}, item, { key: item.key })))), !!(itemsOverflow === null || itemsOverflow === void 0 ? void 0 : itemsOverflow.length) && (_jsx(HeaderNavigationOverflow, { items: itemsOverflow }))] })) })), _jsx("div", Object.assign({ className: classNames('d-f flex-row justify-content-end align-items-center', Styles.right, contentClassName), ref: rightRef }, { children: children }))] })) })));
 };
 //# sourceMappingURL=header-navigation.js.map

package/dist/components/header-navigation/header-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"header-navigation.js","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"header-navigation.js","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.tsx"],"names":[],"mappings":"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"}

package/dist/components/header-navigation/header-navigation.module.less

@@ -27,7 +27,6 @@
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
 
     .link {
-        padding: 18px 12px;
         max-height: 56px;
 
         color: @color-white;
@@ -58,6 +57,27 @@
         }
     }
 
+    .right {
+        padding-right: @spacing-1;
+
+        .link {
+            padding: 18px @spacing-1;
+
+            & > i {
+                height: 24px;
+                width: 24px;
+            }
+        }
+
+        & > * {
+            color: @color-white;
+
+            &:hover {
+                color: @color-neutral-20;
+            }
+        }
+    }
+
     &.minimized .link {
         ins {
             display: none;
@@ -81,6 +101,17 @@
     }
 }
 
+.navigation-links {
+    .link {
+        padding: 18px 12px;
+
+        i {
+            height: 20px;
+            width: 20px;
+        }
+    }
+}
+
 .overflow-popover {
     padding: @spacing-1 @spacing-0 !important;
 

package/dist/components/header-navigation/header-navigation.stories.d.ts

@@ -7,4 +7,5 @@ declare const _default: {
 export default _default;
 export declare const defaultNavigation: () => JSX.Element;
 export declare const withLogoTextAndOverflow: () => JSX.Element;
+export declare const withAllMonolithData: () => JSX.Element;
 //# sourceMappingURL=header-navigation.stories.d.ts.map

package/dist/components/header-navigation/header-navigation.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"header-navigation.stories.d.ts","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;;;;;;AAG3B,wBAIE;AAkCF,eAAO,MAAM,iBAAiB,mBAa7B,CAAC;AAEF,eAAO,MAAM,uBAAuB,mBAoBnC,CAAC"}
+{"version":3,"file":"header-navigation.stories.d.ts","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;;;;;;AAWrC,wBAIE;AA0CF,eAAO,MAAM,iBAAiB,mBAa7B,CAAC;AAEF,eAAO,MAAM,uBAAuB,mBAoBnC,CAAC;AAgCF,eAAO,MAAM,mBAAmB,mBAsD/B,CAAC"}

package/dist/components/header-navigation/header-navigation.stories.js

@@ -1,7 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { HeaderNavigation } from './header-navigation';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Popover } from '@servicetitan/design-system';
+import { useState } from 'react';
 import { LogoCompanyTitle } from '../logo/logo-company-title';
 import { LogoTitanText } from '../logo/logo-titan-text';
+import { ProfileDropdown } from '../profile-dropdown/profile-dropdown';
+import { HeaderNavigation, HeaderNavigationLink, HeaderNavigationTrigger, } from './header-navigation';
 export default {
     title: 'Navigation/HeaderNavigation',
     component: HeaderNavigation,
@@ -9,14 +12,21 @@ export default {
 };
 const getItem = (key, data) => (Object.assign({ key, to: '/', title: key[0].toUpperCase() + key.substring(1), hint: key }, (data !== null && data !== void 0 ? data : {})));
 const items = {
-    dashboard: getItem('dashboard', { iconName: 'dashboard', isActive: true }),
     calendar: getItem('calendar', { iconName: 'schedule' }),
     calls: getItem('calls', { iconName: 'phone', isActive: true, counter: 12 }),
-    accounting: getItem('accounting', { iconName: 'assignment' }),
+    dashboard: getItem('dashboard', { iconName: 'dashboard', isActive: true }),
     dispatch: getItem('dispatch', { iconName: 'location_disabled' }),
     fleet: getItem('fleet', { iconName: 'fleet-pro', title: 'Fleet Pro' }),
+    followUps: getItem('followUps', { iconName: 'flag', title: 'Follow Ups' }),
+    inventory: getItem('inventory', { iconName: 'toys' }),
+    accounting: getItem('accounting', { iconName: 'assignment' }),
+    marketing: getItem('marketing', { iconName: 'bullhorn' }),
+    priceBook: getItem('priceBook', { iconName: 'book' }),
+    pointOfSale: getItem('pointOfSale', { iconName: 'cash-register' }),
+    projects: getItem('projects', { iconName: 'folder_special' }),
+    reports: getItem('reports', { iconName: 'poll' }),
 };
-const NavLinkMock = props => (_jsx("a", Object.assign({ href: "#", onClick: e => {
+const NavLinkMock = props => (_jsx("a", Object.assign({ href: props.to, target: props.target, onClick: e => {
         e.preventDefault();
     }, className: props.className }, { children: props.children })));
 export const defaultNavigation = () => (_jsx(HeaderNavigation, { left: _jsx(LogoCompanyTitle, { className: "m-l-1", fill: "#fff" }), items: [
@@ -35,4 +45,23 @@ export const withLogoTextAndOverflow = () => (_jsx(HeaderNavigation, { left: _js
         items.dispatch,
         items.fleet,
     ], itemsOverflow: [items.calls, items.accounting, items.dispatch], navigationComponent: NavLinkMock }));
+const HelpCenterButton = () => {
+    const [open, setOpen] = useState(false);
+    return (_jsx(Popover, Object.assign({ onClickOutside: () => setOpen(false), open: open, direction: "bl", width: "xs", trigger: _jsx(HeaderNavigationTrigger, { iconName: "help_outline", onClick: () => setOpen(true), hint: "Help center" }, "help-center"), portal: true }, { children: "help center" })));
+};
+const TimeZoneOffset = () => (_jsx("div", Object.assign({ className: "fs-2 fw-bold p-x-1" }, { children: _jsx("span", { children: "EST (-9 hrs)" }) })));
+export const withAllMonolithData = () => (_jsxs(HeaderNavigation, Object.assign({ left: _jsx(LogoCompanyTitle, { className: "m-l-1", fill: "#fff" }), items: [
+        items.dashboard,
+        items.calendar,
+        items.calls,
+        items.accounting,
+        items.dispatch,
+        items.fleet,
+        items.followUps,
+        items.inventory,
+        items.marketing,
+        items.priceBook,
+        items.pointOfSale,
+        items.reports,
+    ], navigationComponent: NavLinkMock }, { children: [_jsx(TimeZoneOffset, {}), _jsx(HeaderNavigationTrigger, { iconName: "phone" }, "dialpad"), _jsx(HeaderNavigationLink, { to: "https://google.com", target: "_blank", iconName: "search", hint: "Search: for all the questions" }, "search"), _jsx(HelpCenterButton, {}), _jsx(HeaderNavigationTrigger, { iconName: "rocket" }, "titanAdvisor"), _jsx(HeaderNavigationLink, { to: "https://google.com", target: "_blank", iconName: "settings", "aria-label": "search", hint: "Settings" }, "settings"), _jsxs(ProfileDropdown, { children: [_jsx(ProfileDropdown.Link, Object.assign({ to: "https://googgle.com" }, { children: "Task Management" })), _jsx(ProfileDropdown.Divider, {}), _jsxs(ProfileDropdown.Link, Object.assign({ to: "https://googgle.com" }, { children: ["Sign Out ", _jsx("span", Object.assign({ className: "c-neutral-100 m-l-half t-truncate" }, { children: "James Bond" }))] })), _jsx(ProfileDropdown.Section, Object.assign({ className: "c-neutral-100 fs-1" }, { children: "User ID: 007" }))] })] })));
 //# sourceMappingURL=header-navigation.stories.js.map

package/dist/components/header-navigation/header-navigation.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"header-navigation.stories.js","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAE9D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,eAAe;IACX,KAAK,EAAE,6BAA6B;IACpC,SAAS,EAAE,gBAAgB;IAC3B,UAAU,EAAE,EAAE;CACjB,CAAC;AAEF,MAAM,OAAO,GAAG,CACZ,GAAW,EACX,IAAuC,EACf,EAAE,CAAC,iBAC3B,GAAG,EACH,EAAE,EAAE,GAAG,EACP,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,EAC9C,IAAI,EAAE,GAAG,IACN,CAAC,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,EAAE,CAAC,EACjB,CAAC;AAEH,MAAM,KAAK,GAAG;IACV,SAAS,EAAE,OAAO,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IAC1E,QAAQ,EAAE,OAAO,CAAC,UAAU,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;IACvD,KAAK,EAAE,OAAO,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;IAC3E,UAAU,EAAE,OAAO,CAAC,YAAY,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC;IAC7D,QAAQ,EAAE,OAAO,CAAC,UAAU,EAAE,EAAE,QAAQ,EAAE,mBAAmB,EAAE,CAAC;IAChE,KAAK,EAAE,OAAO,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC;CACzE,CAAC;AAEF,MAAM,WAAW,GAAuC,KAAK,CAAC,EAAE,CAAC,CAC7D,0BACI,IAAI,EAAC,GAAG,EACR,OAAO,EAAE,CAAC,CAAC,EAAE;QACT,CAAC,CAAC,cAAc,EAAE,CAAC;IACvB,CAAC,EACD,SAAS,EAAE,KAAK,CAAC,SAAS,gBAEzB,KAAK,CAAC,QAAQ,IACf,CACP,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,CACnC,KAAC,gBAAgB,IACb,IAAI,EAAE,KAAC,gBAAgB,IAAC,SAAS,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,GAAG,EACxD,KAAK,EAAE;QACH,KAAK,CAAC,SAAS;QACf,KAAK,CAAC,QAAQ;QACd,KAAK,CAAC,KAAK;QACX,KAAK,CAAC,UAAU;QAChB,KAAK,CAAC,QAAQ;QACd,KAAK,CAAC,KAAK;KACd,EACD,mBAAmB,EAAE,WAAW,GAClC,CACL,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,EAAE,CAAC,CACzC,KAAC,gBAAgB,IACb,IAAI,EACA,KAAC,aAAa,IACV,UAAU,EAAC,SAAS,EACpB,KAAK,EAAC,YAAY,EAClB,WAAW,EAAC,oCAAoC,GAClD,EAEN,KAAK,EAAE;QACH,KAAK,CAAC,SAAS;QACf,KAAK,CAAC,QAAQ;QACd,KAAK,CAAC,KAAK;QACX,KAAK,CAAC,UAAU;QAChB,KAAK,CAAC,QAAQ;QACd,KAAK,CAAC,KAAK;KACd,EACD,aAAa,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,EAC9D,mBAAmB,EAAE,WAAW,GAClC,CACL,CAAC"}
+{"version":3,"file":"header-navigation.stories.js","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/logo/logo.stories.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { LogoTitan } from './logo-titan';
 import { LogoCompanyTitle } from './logo-company-title';
+import { LogoTitan } from './logo-titan';
 import { LogoTitanText } from './logo-titan-text';
 export default {
     title: 'Navigation/Logo',

package/dist/components/logo/logo.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"logo.stories.js","sourceRoot":"","sources":["../../../src/components/logo/logo.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,eAAe;IACX,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE,EAAE;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,KAAC,SAAS,KAAG,CAAC;AAC7C,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,KAAC,SAAS,IAAC,UAAU,EAAC,SAAS,GAAG,CAAC;AAC5E,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,KAAC,gBAAgB,KAAG,CAAC;AAC3D,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,CAC/B,KAAC,aAAa,IACV,SAAS,EAAC,uBAAuB,EACjC,UAAU,EAAC,SAAS,EACpB,KAAK,EAAC,YAAY,EAClB,WAAW,EAAC,oCAAoC,GAClD,CACL,CAAC"}
+{"version":3,"file":"logo.stories.js","sourceRoot":"","sources":["../../../src/components/logo/logo.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,eAAe;IACX,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE,EAAE;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,KAAC,SAAS,KAAG,CAAC;AAC7C,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,KAAC,SAAS,IAAC,UAAU,EAAC,SAAS,GAAG,CAAC;AAC5E,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,KAAC,gBAAgB,KAAG,CAAC;AAC3D,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,CAC/B,KAAC,aAAa,IACV,SAAS,EAAC,uBAAuB,EACjC,UAAU,EAAC,SAAS,EACpB,KAAK,EAAC,YAAY,EAClB,WAAW,EAAC,oCAAoC,GAClD,CACL,CAAC"}

package/dist/components/profile-dropdown/profile-dropdown.d.ts

@@ -0,0 +1,53 @@
+import { Popover, PopoverPropsStrict } from '@servicetitan/design-system';
+import { FC, HTMLAttributeAnchorTarget, MouseEvent, ReactNode } from 'react';
+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;
+}
+interface ProfileDropdownSectionProps {
+    children: ReactNode;
+    className?: string;
+    onClick?(e: MouseEvent): void;
+}
+declare const ProfileDropdownSection: FC<ProfileDropdownSectionProps>;
+declare type ProfileDropdownLinkProps = {
+    children: ReactNode;
+} & ({
+    target?: HTMLAttributeAnchorTarget;
+    to: string;
+    onClick?: () => void;
+} | {
+    target?: never;
+    to?: never;
+    onClick(): void;
+});
+declare const ProfileDropdownLink: FC<ProfileDropdownLinkProps>;
+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 declare const ProfileDropdown: ProfileDropdownType;
+export {};
+//# sourceMappingURL=profile-dropdown.d.ts.map

package/dist/components/profile-dropdown/profile-dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"profile-dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAE1F,OAAO,EACH,EAAE,EACF,yBAAyB,EACzB,UAAU,EAEV,SAAS,EAKZ,MAAM,OAAO,CAAC;AAMf,UAAU,2BAA2B;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;CACjC;AA0FD,UAAU,2BAA2B;IACjC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;CACjC;AAED,QAAA,MAAM,sBAAsB,EAAE,EAAE,CAAC,2BAA2B,CAkB3D,CAAC;AAEF,aAAK,wBAAwB,GAAG;IAC5B,QAAQ,EAAE,SAAS,CAAC;CACvB,GAAG,CACE;IAAE,MAAM,CAAC,EAAE,yBAAyB,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,GACxE;IAAE,MAAM,CAAC,EAAE,KAAK,CAAC;IAAC,EAAE,CAAC,EAAE,KAAK,CAAC;IAAC,OAAO,IAAI,IAAI,CAAA;CAAE,CACpD,CAAC;AAEF,QAAA,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CA6BrD,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,IAAI,CAAC,2BAA2B,EAAE,SAAS,CAAC,CAAC;IACvD,SAAS,CAAC,EAAE;QACR,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,EAAE,SAAS,CAAC;QACnB,KAAK,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;QACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;KACxB,CAAC;CACL;AAED,MAAM,WAAW,mBAAoB,SAAQ,EAAE,CAAC,oBAAoB,CAAC;IACjE,OAAO,EAAE,OAAO,OAAO,CAAC,OAAO,CAAC;IAChC,IAAI,EAAE,OAAO,mBAAmB,CAAC;IACjC,OAAO,EAAE,OAAO,sBAAsB,CAAC;CAC1C;AAED,eAAO,MAAM,eAAe,EAAE,mBAwDL,CAAC"}

package/dist/components/profile-dropdown/profile-dropdown.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BodyText, Icon, Popover } from '@servicetitan/design-system';
+import classNames from 'classnames';
+import { 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';
+const ProfileDropdownTrigger = ({ avatarBadge, badge, className, hintArrow, imageSrc, info, onClick, }) => {
+    const [avatarSource, setAvatarSource] = useState(imageSrc !== null && imageSrc !== void 0 ? imageSrc : '');
+    const [avatarSourceError, setAvatarSourceError] = useState(false);
+    useEffect(() => {
+        const src = imageSrc !== null && imageSrc !== void 0 ? imageSrc : '';
+        if (src === avatarSource) {
+            return;
+        }
+        setAvatarSource(src);
+        setAvatarSourceError(false);
+    }, [imageSrc, avatarSource]);
+    const onAvatarError = useCallback(() => {
+        setAvatarSourceError(true);
+    }, []);
+    return (_jsxs("div", Object.assign({ 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 }, { children: [avatarSource && !avatarSourceError ? (_jsx("img", { src: avatarSource, className: Styles.profileImage, onError: onAvatarError, alt: "user dropdown menu" })) : (_jsx(ProfileLogo, { size: 24 })), !!info && (_jsxs("div", Object.assign({ className: Styles.info }, { children: [_jsx(BodyText, Object.assign({ bold: true, title: info.title, className: "t-truncate c-white", size: "xsmall" }, { children: info.title })), _jsx(BodyText, Object.assign({ title: info.text, className: "t-truncate c-neutral-70 tt-uppercase", size: "xsmall" }, { children: info.text }))] }))), _jsx(Icon, { className: "m-l-half", name: "expand_more", size: 12 }), !!avatarBadge && (_jsx("div", { className: classNames(Styles.avatarBadge, avatarBadge === true ? 'bg-blue-500' : `bg-${avatarBadge}`) })), !!badge && (_jsx("span", Object.assign({ className: classNames(Styles.badge, badge.content ? Styles.badgeWithContent : Styles.badgeNoContent, badge.className) }, { children: badge.content })))] })));
+};
+const ProfileDropdownSection = ({ children, className, onClick, }) => {
+    const clickHandler = e => {
+        if (onClick) {
+            onClick(e);
+        }
+        else {
+            e.stopPropagation();
+        }
+    };
+    return (_jsx("div", Object.assign({ className: classNames(Styles.dropdownSection, className), onClick: clickHandler }, { children: children })));
+};
+const ProfileDropdownLink = ({ children, target, to, onClick, }) => {
+    const NavigationComponent = useContext(NavigationContext);
+    const clickHandler = (e) => {
+        e.preventDefault();
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    };
+    return to ? (_jsx(NavigationComponent, Object.assign({ className: classNames(Styles.dropdownSection, Styles.dropdownLink), target: target, to: to }, { children: children }))) : (_jsx("a", Object.assign({ className: classNames(Styles.dropdownSection, Styles.dropdownLink), onClick: clickHandler }, { children: children })));
+};
+export const ProfileDropdown = (({ children, hintPopup, trigger }) => {
+    var _a;
+    const [open, setOpen] = useState(false);
+    const onClose = useCallback(() => {
+        setOpen(false);
+    }, []);
+    const onTriggerClick = useCallback((e) => {
+        e.stopPropagation();
+        setOpen(!open);
+    }, [open]);
+    const hintShown = !!hintPopup && !open;
+    const triggerElement = (_jsx(ProfileDropdownTrigger, Object.assign({}, trigger, { onClick: children ? onTriggerClick : undefined, hintArrow: hintShown })));
+    return (_jsx("div", Object.assign({ className: "position-relative" }, { children: !!hintPopup && hintShown ? (_jsx(Popover, Object.assign({ direction: "bl", width: (_a = hintPopup.width) !== null && _a !== void 0 ? _a : 'xs', trigger: triggerElement, popoverContentClassName: Styles.hint, open: true }, { children: _jsx("div", Object.assign({ className: classNames(Styles.hintContent, hintPopup.className) }, { children: hintPopup.content })) }))) : (_jsx(Popover, Object.assign({ direction: "bl", width: "xs", trigger: triggerElement, open: open, onClickOutside: onClose, className: Styles.dropdown, popoverContentClassName: classNames(Styles.dropdownContent, Styles.dropdownContentBottomLeft) }, { children: _jsx("div", Object.assign({ className: Styles.dropdownContentWrapper, onClick: onClose }, { children: children })) }))) })));
+});
+ProfileDropdown.Divider = Popover.Divider;
+ProfileDropdown.Link = ProfileDropdownLink;
+ProfileDropdown.Section = ProfileDropdownSection;
+//# sourceMappingURL=profile-dropdown.js.map

package/dist/components/profile-dropdown/profile-dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"profile-dropdown.js","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.tsx"],"names":[],"mappings":"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"}

package/dist/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/dist/components/profile-dropdown/profile-dropdown.stories.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("./profile-dropdown").ProfileDropdownType;
+    parameters: {};
+};
+export default _default;
+export declare const profileDropdownDefault: () => JSX.Element;
+export declare const profileDropdownWithLogo: () => JSX.Element;
+export declare const profileDropdownWithErrorLogo: () => JSX.Element;
+export declare const profileDropdownWithInfo: () => JSX.Element;
+export declare const profileDropdownWithCounter: () => JSX.Element;
+export declare const profileDropdownWithBothBadges: () => JSX.Element;
+export declare const profileDropdownWithHintPopup: () => JSX.Element;
+export declare const profileDropdownWithHintAndInfoPopup: () => JSX.Element;
+//# sourceMappingURL=profile-dropdown.stories.d.ts.map

package/dist/components/profile-dropdown/profile-dropdown.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"profile-dropdown.stories.d.ts","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.stories.tsx"],"names":[],"mappings":";;;;;;AAKA,wBAIE;AAeF,eAAO,MAAM,sBAAsB,mBAalC,CAAC;AAEF,eAAO,MAAM,uBAAuB,mBAQnC,CAAC;AAEF,eAAO,MAAM,4BAA4B,mBAQxC,CAAC;AAEF,eAAO,MAAM,uBAAuB,mBASnC,CAAC;AAEF,eAAO,MAAM,0BAA0B,mBAUtC,CAAC;AAEF,eAAO,MAAM,6BAA6B,mBASzC,CAAC;AAEF,eAAO,MAAM,4BAA4B,mBAkBxC,CAAC;AAEF,eAAO,MAAM,mCAAmC,mBAa/C,CAAC"}