@servicetitan/navigation 1.0.0 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/header-navigation/header-navigation.d.ts +3 -1
- package/dist/components/header-navigation/header-navigation.d.ts.map +1 -1
- package/dist/components/header-navigation/header-navigation.js +24 -8
- package/dist/components/header-navigation/header-navigation.js.map +1 -1
- package/dist/components/header-navigation/header-navigation.stories.d.ts.map +1 -1
- package/dist/components/header-navigation/header-navigation.stories.js +6 -6
- package/dist/components/header-navigation/header-navigation.stories.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/utils/navigation.d.ts +2 -2
- package/dist/utils/navigation.d.ts.map +1 -1
- package/package.json +4 -4
- package/src/components/header-navigation/header-navigation.stories.tsx +13 -12
- package/src/components/header-navigation/header-navigation.tsx +34 -10
- package/src/index.ts +1 -0
- package/src/utils/navigation.ts +2 -2
|
@@ -9,7 +9,7 @@ interface HeaderNavigationItemContentPropsStrict {
|
|
|
9
9
|
iconName?: IconPropsStrict['name'];
|
|
10
10
|
}
|
|
11
11
|
export interface HeaderNavigationTriggerPropsStrict extends HeaderNavigationItemContentPropsStrict {
|
|
12
|
-
|
|
12
|
+
id: string;
|
|
13
13
|
hint?: string;
|
|
14
14
|
className?: string;
|
|
15
15
|
}
|
|
@@ -33,6 +33,8 @@ export interface HeaderNavigationProps {
|
|
|
33
33
|
items?: HeaderNavigationLinkData[];
|
|
34
34
|
itemsOverflow?: HeaderNavigationLinkData[];
|
|
35
35
|
navigationComponent?: FC<HeaderNavigationComponentProps>;
|
|
36
|
+
align?: 'left' | 'right' | 'center';
|
|
37
|
+
alignMinimized?: 'left' | 'right' | 'center';
|
|
36
38
|
}
|
|
37
39
|
export declare const HeaderNavigation: FC<HeaderNavigationProps>;
|
|
38
40
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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,
|
|
1
|
+
{"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,EAQZ,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,EAAE,EAAE,MAAM,CAAC;IACX,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;IACzD,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;CAChD;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CA4GtD,CAAC"}
|
|
@@ -13,7 +13,7 @@ import { createElement as _createElement } from "react";
|
|
|
13
13
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
14
|
import { Icon, Popover, Tag } from '@servicetitan/design-system';
|
|
15
15
|
import classNames from 'classnames';
|
|
16
|
-
import { Fragment, useCallback, useContext, useEffect, useLayoutEffect, useRef, useState, } from 'react';
|
|
16
|
+
import { Fragment, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
|
|
17
17
|
import { DefaultNavigationComponent, NavigationContext } from '../../utils/navigation-context';
|
|
18
18
|
import * as Styles from './header-navigation.module.less';
|
|
19
19
|
function useForceUpdate() {
|
|
@@ -23,27 +23,43 @@ function useForceUpdate() {
|
|
|
23
23
|
}, []);
|
|
24
24
|
}
|
|
25
25
|
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 })))] }));
|
|
26
|
-
export const HeaderNavigationLink = ({
|
|
26
|
+
export const HeaderNavigationLink = ({ id, to, title, hint, counter, className, iconClassName, iconComponent, iconName, isActive, target, }) => {
|
|
27
27
|
const NavigationComponent = useContext(NavigationContext);
|
|
28
28
|
return (_jsx(NavigationComponent, Object.assign({ to: to, title: hint, className: classNames(Styles.link, className, {
|
|
29
29
|
[Styles.active]: isActive === true,
|
|
30
|
-
}), isActive: typeof isActive === 'function' ? isActive : undefined, activeClassName: Styles.active, "data-cy": `nav-item-${
|
|
30
|
+
}), isActive: typeof isActive === 'function' ? isActive : undefined, activeClassName: Styles.active, "data-cy": `nav-item-${id}`, target: target }, { children: _jsx(HeaderNavigationItemContent, { title: title, counter: counter, iconComponent: iconComponent, iconClassName: iconClassName, iconName: iconName }) }), id));
|
|
31
31
|
};
|
|
32
32
|
export const HeaderNavigationTrigger = (_a) => {
|
|
33
|
-
var {
|
|
34
|
-
return (_jsx("div", Object.assign({}, rest, { title: hint, className: classNames(Styles.link, 'cursor-pointer', className), "data-cy": `nav-item-${
|
|
33
|
+
var { id, hint, className, iconClassName, iconComponent, iconName } = _a, rest = __rest(_a, ["id", "hint", "className", "iconClassName", "iconComponent", "iconName"]);
|
|
34
|
+
return (_jsx("div", Object.assign({}, rest, { title: hint, className: classNames(Styles.link, 'cursor-pointer', className), "data-cy": `nav-item-${id}` }, { children: _jsx(HeaderNavigationItemContent, { iconComponent: iconComponent, iconClassName: iconClassName, iconName: iconName }) }), id));
|
|
35
35
|
};
|
|
36
36
|
const HeaderNavigationOverflow = ({ items }) => {
|
|
37
37
|
const [isOpen, setIsOpen] = useState(false);
|
|
38
|
-
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.
|
|
38
|
+
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.id })))) })) })));
|
|
39
39
|
};
|
|
40
|
-
export const HeaderNavigation = ({ children, className, contentClassName, id, items, itemsOverflow, left, leftClassName, navigationComponent = DefaultNavigationComponent, }) => {
|
|
40
|
+
export const HeaderNavigation = ({ align, alignMinimized, children, className, contentClassName, id, items, itemsOverflow, left, leftClassName, navigationComponent = DefaultNavigationComponent, }) => {
|
|
41
41
|
const leftRef = useRef(null);
|
|
42
42
|
const rightRef = useRef(null);
|
|
43
43
|
const centerRef = useRef(null);
|
|
44
44
|
const navigationRef = useRef(null);
|
|
45
45
|
const forceUpdate = useForceUpdate();
|
|
46
46
|
const [isMinimized, setIsMinimized] = useState(false);
|
|
47
|
+
const navigationAlignClass = useMemo(() => {
|
|
48
|
+
const al = (() => {
|
|
49
|
+
if (alignMinimized && isMinimized) {
|
|
50
|
+
return alignMinimized;
|
|
51
|
+
}
|
|
52
|
+
return align !== null && align !== void 0 ? align : 'left';
|
|
53
|
+
})();
|
|
54
|
+
switch (al) {
|
|
55
|
+
case 'center':
|
|
56
|
+
return 'justify-content-center';
|
|
57
|
+
case 'right':
|
|
58
|
+
return 'justify-content-end';
|
|
59
|
+
default:
|
|
60
|
+
return 'justify-content-start';
|
|
61
|
+
}
|
|
62
|
+
}, [align, alignMinimized, isMinimized]);
|
|
47
63
|
useEffect(() => {
|
|
48
64
|
const handleResize = () => {
|
|
49
65
|
setIsMinimized(false);
|
|
@@ -72,6 +88,6 @@ export const HeaderNavigation = ({ children, className, contentClassName, id, it
|
|
|
72
88
|
});
|
|
73
89
|
return (_jsx(NavigationContext.Provider, Object.assign({ value: navigationComponent }, { children: _jsxs("div", Object.assign({ className: classNames(Styles.header, className, {
|
|
74
90
|
[Styles.minimized]: isMinimized,
|
|
75
|
-
}), id: id }, { children: [_jsx("div", Object.assign({ className: leftClassName, ref: leftRef }, { children: left })), _jsx("div", Object.assign({ ref: centerRef, className:
|
|
91
|
+
}), id: id }, { children: [_jsx("div", Object.assign({ className: leftClassName, ref: leftRef }, { children: left })), _jsx("div", Object.assign({ ref: centerRef, className: classNames('d-if flex-grow-1 flex-basis-0', navigationAlignClass) }, { 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.id })))), !!(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 }))] })) })));
|
|
76
92
|
};
|
|
77
93
|
//# sourceMappingURL=header-navigation.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header-navigation.js","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.tsx"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,OAAO,EAAE,IAAI,EAAmB,OAAO,EAAE,GAAG,EAAE,MAAM,6BAA6B,CAAC;AAClF,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAEH,QAAQ,EAIR,WAAW,EACX,UAAU,EACV,SAAS,EACT,eAAe,EACf,MAAM,EACN,QAAQ,GACX,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,0BAA0B,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAE/F,OAAO,KAAK,MAAM,MAAM,iCAAiC,CAAC;AAE1D,SAAS,cAAc;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAChC,OAAO,WAAW,CAAC,GAAG,EAAE;QACpB,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC,CAAC;AACX,CAAC;AAyBD,MAAM,2BAA2B,GAA+C,CAAC,EAC7E,KAAK,EACL,OAAO,EACP,aAAa,EACb,aAAa,EAAE,aAAa,EAC5B,QAAQ,GACX,EAAE,EAAE,CAAC,CACF,MAAC,QAAQ,eACJ,aAAa,CAAC,CAAC,CAAC,CACb,0BAAG,SAAS,EAAE,MAAM,CAAC,IAAI,gBACrB,KAAC,aAAa,KAAG,IACjB,CACP,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CACX,KAAC,IAAI,IAAC,IAAI,EAAC,SAAS,EAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,GAAI,CAClE,CAAC,CAAC,CAAC,CACA,YAAG,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE,aAAa,CAAC,GAAI,CAC3D,EAEA,CAAC,CAAC,KAAK,IAAI,wBAAM,KAAK,GAAO,EAE7B,CAAC,CAAC,OAAO,IAAI,CACV,KAAC,GAAG,kBAAC,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,OAAO,QAAC,KAAK,QAAC,KAAK,EAAC,UAAU,gBACzD,OAAO,IACN,CACT,IACM,CACd,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAkC,CAAC,EAChE,
|
|
1
|
+
{"version":3,"file":"header-navigation.js","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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,+CAa7B,CAAC;AAEF,eAAO,MAAM,uBAAuB,+CAoBnC,CAAC;AAgCF,eAAO,MAAM,mBAAmB,+
|
|
1
|
+
{"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,+CAa7B,CAAC;AAEF,eAAO,MAAM,uBAAuB,+CAoBnC,CAAC;AAgCF,eAAO,MAAM,mBAAmB,+CAuD/B,CAAC"}
|
|
@@ -10,11 +10,11 @@ export default {
|
|
|
10
10
|
component: HeaderNavigation,
|
|
11
11
|
parameters: {},
|
|
12
12
|
};
|
|
13
|
-
const getItem = (
|
|
13
|
+
const getItem = (id, data) => (Object.assign({ id, to: '/', title: id[0].toUpperCase() + id.substring(1), hint: id }, (data !== null && data !== void 0 ? data : {})));
|
|
14
14
|
const items = {
|
|
15
|
-
calendar: getItem('calendar', { iconName: '
|
|
16
|
-
calls: getItem('calls', { iconName: '
|
|
17
|
-
dashboard: getItem('dashboard', { iconName: '
|
|
15
|
+
calendar: getItem('calendar', { iconName: 'event' }),
|
|
16
|
+
calls: getItem('calls', { iconName: 'local_phone', isActive: true, counter: 12 }),
|
|
17
|
+
dashboard: getItem('dashboard', { iconName: 'odometer', isActive: true }),
|
|
18
18
|
dispatch: getItem('dispatch', { iconName: 'location_disabled' }),
|
|
19
19
|
fleet: getItem('fleet', { iconName: 'fleet-pro', title: 'Fleet Pro' }),
|
|
20
20
|
followUps: getItem('followUps', { iconName: 'flag', title: 'Follow Ups' }),
|
|
@@ -47,7 +47,7 @@ export const withLogoTextAndOverflow = () => (_jsx(HeaderNavigation, { left: _js
|
|
|
47
47
|
], itemsOverflow: [items.calls, items.accounting, items.dispatch], navigationComponent: NavLinkMock }));
|
|
48
48
|
const HelpCenterButton = () => {
|
|
49
49
|
const [open, setOpen] = useState(false);
|
|
50
|
-
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" }
|
|
50
|
+
return (_jsx(Popover, Object.assign({ onClickOutside: () => setOpen(false), open: open, direction: "bl", width: "xs", trigger: _jsx(HeaderNavigationTrigger, { id: "help-center", iconName: "help_outline", onClick: () => setOpen(true), hint: "Help center" }), portal: true }, { children: "help center" })));
|
|
51
51
|
};
|
|
52
52
|
const TimeZoneOffset = () => (_jsx("div", Object.assign({ className: "fs-2 fw-bold p-x-1" }, { children: _jsx("span", { children: "EST (-9 hrs)" }) })));
|
|
53
53
|
export const withAllMonolithData = () => (_jsxs(HeaderNavigation, Object.assign({ left: _jsx(LogoCompanyTitle, { className: "m-l-1", fill: "#fff" }), items: [
|
|
@@ -63,5 +63,5 @@ export const withAllMonolithData = () => (_jsxs(HeaderNavigation, Object.assign(
|
|
|
63
63
|
items.priceBook,
|
|
64
64
|
items.pointOfSale,
|
|
65
65
|
items.reports,
|
|
66
|
-
], navigationComponent: NavLinkMock }, { children: [_jsx(TimeZoneOffset, {}), _jsx(HeaderNavigationTrigger, { iconName: "phone" }
|
|
66
|
+
], navigationComponent: NavLinkMock, alignMinimized: "center" }, { children: [_jsx(TimeZoneOffset, {}), _jsx(HeaderNavigationTrigger, { id: "dialpad", iconName: "phone" }), _jsx(HeaderNavigationLink, { id: "search", to: "https://google.com", target: "_blank", iconName: "search", hint: "Search: for all the questions" }), _jsx(HelpCenterButton, {}), _jsx(HeaderNavigationTrigger, { id: "titanAdvisor", iconName: "rocket" }), _jsx(HeaderNavigationLink, { id: "settings", to: "https://google.com", target: "_blank", iconName: "settings", "aria-label": "search", hint: "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" }))] })] })));
|
|
67
67
|
//# sourceMappingURL=header-navigation.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header-navigation.stories.js","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AACvE,OAAO,EACH,gBAAgB,EAChB,oBAAoB,EACpB,uBAAuB,GAC1B,MAAM,qBAAqB,CAAC;AAE7B,eAAe;IACX,KAAK,EAAE,6BAA6B;IACpC,SAAS,EAAE,gBAAgB;IAC3B,UAAU,EAAE,EAAE;CACjB,CAAC;AAEF,MAAM,OAAO,GAAG,CACZ,
|
|
1
|
+
{"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/index.d.ts
CHANGED
|
@@ -3,4 +3,5 @@ export * from './components/profile-dropdown/profile-dropdown';
|
|
|
3
3
|
export * from './components/logo/logo-company-title';
|
|
4
4
|
export * from './components/logo/logo-titan';
|
|
5
5
|
export * from './components/logo/logo-titan-text';
|
|
6
|
+
export * from './utils/navigation';
|
|
6
7
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kDAAkD,CAAC;AACjE,cAAc,gDAAgD,CAAC;AAC/D,cAAc,sCAAsC,CAAC;AACrD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mCAAmC,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kDAAkD,CAAC;AACjE,cAAc,gDAAgD,CAAC;AAC/D,cAAc,sCAAsC,CAAC;AACrD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mCAAmC,CAAC;AAClD,cAAc,oBAAoB,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -3,4 +3,5 @@ export * from './components/profile-dropdown/profile-dropdown';
|
|
|
3
3
|
export * from './components/logo/logo-company-title';
|
|
4
4
|
export * from './components/logo/logo-titan';
|
|
5
5
|
export * from './components/logo/logo-titan-text';
|
|
6
|
+
export * from './utils/navigation';
|
|
6
7
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kDAAkD,CAAC;AACjE,cAAc,gDAAgD,CAAC;AAC/D,cAAc,sCAAsC,CAAC;AACrD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mCAAmC,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kDAAkD,CAAC;AACjE,cAAc,gDAAgD,CAAC;AAC/D,cAAc,sCAAsC,CAAC;AACrD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mCAAmC,CAAC;AAClD,cAAc,oBAAoB,CAAC"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { IconPropsStrict } from '@servicetitan/design-system';
|
|
2
2
|
import { FC, HTMLAttributeAnchorTarget, ReactNode } from 'react';
|
|
3
3
|
export interface HeaderNavigationLinkData {
|
|
4
|
-
/** link
|
|
5
|
-
|
|
4
|
+
/** link id */
|
|
5
|
+
id: string;
|
|
6
6
|
/** link href */
|
|
7
7
|
to: string;
|
|
8
8
|
/** link title */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../src/utils/navigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,EAAE,EAAE,yBAAyB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjE,MAAM,WAAW,wBAAwB;IACrC,
|
|
1
|
+
{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../src/utils/navigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,EAAE,EAAE,yBAAyB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjE,MAAM,WAAW,wBAAwB;IACrC,cAAc;IACd,EAAE,EAAE,MAAM,CAAC;IAEX,gBAAgB;IAChB,EAAE,EAAE,MAAM,CAAC;IAEX,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IAEd,uBAAuB;IACvB,IAAI,EAAE,MAAM,CAAC;IAEb,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC;IAErD,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAEnC,uCAAuC;IACvC,aAAa,CAAC,EAAE,EAAE,CAAC;IAEnB,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,oCAAoC;IACjD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC;IACzC,MAAM,CAAC,EAAE,yBAAyB,CAAC;CACtC;AAED,MAAM,WAAW,8BAA+B,SAAQ,oCAAoC;IACxF,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@servicetitan/navigation",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"description": "Navigation components",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"@servicetitan/react-ioc": ">=14.1.1",
|
|
22
22
|
"@servicetitan/tokens": ">=12.2.1",
|
|
23
23
|
"mobx": "~6.3.2",
|
|
24
|
-
"mobx-react": "
|
|
24
|
+
"mobx-react": ">=7.5.1",
|
|
25
25
|
"react": ">=17.0.2",
|
|
26
26
|
"react-router-dom": "~5.3.0"
|
|
27
27
|
},
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"@testing-library/react": "^14.0.0",
|
|
33
33
|
"@types/react": "~18.2.55",
|
|
34
34
|
"mobx": "~6.3.2",
|
|
35
|
-
"mobx-react": "~7.
|
|
35
|
+
"mobx-react": "~7.5.1",
|
|
36
36
|
"react": "~18.2.0",
|
|
37
37
|
"react-router-dom": "~5.3.0"
|
|
38
38
|
},
|
|
@@ -43,5 +43,5 @@
|
|
|
43
43
|
"less": true,
|
|
44
44
|
"webpack": false
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "070fba30b279de53862c303a9fa5a6d98804a65e"
|
|
47
47
|
}
|
|
@@ -17,20 +17,20 @@ export default {
|
|
|
17
17
|
};
|
|
18
18
|
|
|
19
19
|
const getItem = (
|
|
20
|
-
|
|
20
|
+
id: string,
|
|
21
21
|
data: Partial<HeaderNavigationLinkData>
|
|
22
22
|
): HeaderNavigationLinkData => ({
|
|
23
|
-
|
|
23
|
+
id,
|
|
24
24
|
to: '/',
|
|
25
|
-
title:
|
|
26
|
-
hint:
|
|
25
|
+
title: id[0].toUpperCase() + id.substring(1),
|
|
26
|
+
hint: id,
|
|
27
27
|
...(data ?? {}),
|
|
28
28
|
});
|
|
29
29
|
|
|
30
30
|
const items = {
|
|
31
|
-
calendar: getItem('calendar', { iconName: '
|
|
32
|
-
calls: getItem('calls', { iconName: '
|
|
33
|
-
dashboard: getItem('dashboard', { iconName: '
|
|
31
|
+
calendar: getItem('calendar', { iconName: 'event' }),
|
|
32
|
+
calls: getItem('calls', { iconName: 'local_phone', isActive: true, counter: 12 }),
|
|
33
|
+
dashboard: getItem('dashboard', { iconName: 'odometer', isActive: true }),
|
|
34
34
|
dispatch: getItem('dispatch', { iconName: 'location_disabled' }),
|
|
35
35
|
fleet: getItem('fleet', { iconName: 'fleet-pro', title: 'Fleet Pro' }),
|
|
36
36
|
followUps: getItem('followUps', { iconName: 'flag', title: 'Follow Ups' }),
|
|
@@ -104,7 +104,7 @@ const HelpCenterButton = () => {
|
|
|
104
104
|
width="xs"
|
|
105
105
|
trigger={
|
|
106
106
|
<HeaderNavigationTrigger
|
|
107
|
-
|
|
107
|
+
id="help-center"
|
|
108
108
|
iconName="help_outline"
|
|
109
109
|
onClick={() => setOpen(true)}
|
|
110
110
|
hint="Help center"
|
|
@@ -141,13 +141,14 @@ export const withAllMonolithData = () => (
|
|
|
141
141
|
items.reports,
|
|
142
142
|
]}
|
|
143
143
|
navigationComponent={NavLinkMock}
|
|
144
|
+
alignMinimized="center"
|
|
144
145
|
>
|
|
145
146
|
<TimeZoneOffset />
|
|
146
147
|
|
|
147
|
-
<HeaderNavigationTrigger
|
|
148
|
+
<HeaderNavigationTrigger id="dialpad" iconName="phone" />
|
|
148
149
|
|
|
149
150
|
<HeaderNavigationLink
|
|
150
|
-
|
|
151
|
+
id="search"
|
|
151
152
|
to="https://google.com"
|
|
152
153
|
target="_blank"
|
|
153
154
|
iconName="search"
|
|
@@ -155,10 +156,10 @@ export const withAllMonolithData = () => (
|
|
|
155
156
|
/>
|
|
156
157
|
|
|
157
158
|
<HelpCenterButton />
|
|
158
|
-
<HeaderNavigationTrigger
|
|
159
|
+
<HeaderNavigationTrigger id="titanAdvisor" iconName="rocket" />
|
|
159
160
|
|
|
160
161
|
<HeaderNavigationLink
|
|
161
|
-
|
|
162
|
+
id="settings"
|
|
162
163
|
to="https://google.com"
|
|
163
164
|
target="_blank"
|
|
164
165
|
iconName="settings"
|
|
@@ -10,6 +10,7 @@ import {
|
|
|
10
10
|
useContext,
|
|
11
11
|
useEffect,
|
|
12
12
|
useLayoutEffect,
|
|
13
|
+
useMemo,
|
|
13
14
|
useRef,
|
|
14
15
|
useState,
|
|
15
16
|
} from 'react';
|
|
@@ -33,7 +34,7 @@ interface HeaderNavigationItemContentPropsStrict {
|
|
|
33
34
|
iconName?: IconPropsStrict['name'];
|
|
34
35
|
}
|
|
35
36
|
export interface HeaderNavigationTriggerPropsStrict extends HeaderNavigationItemContentPropsStrict {
|
|
36
|
-
|
|
37
|
+
id: string;
|
|
37
38
|
hint?: string;
|
|
38
39
|
className?: string;
|
|
39
40
|
}
|
|
@@ -77,7 +78,7 @@ const HeaderNavigationItemContent: FC<HeaderNavigationItemContentPropsStrict> =
|
|
|
77
78
|
);
|
|
78
79
|
|
|
79
80
|
export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
|
|
80
|
-
|
|
81
|
+
id,
|
|
81
82
|
to,
|
|
82
83
|
title,
|
|
83
84
|
hint,
|
|
@@ -93,7 +94,7 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
|
|
|
93
94
|
|
|
94
95
|
return (
|
|
95
96
|
<NavigationComponent
|
|
96
|
-
key={
|
|
97
|
+
key={id}
|
|
97
98
|
to={to}
|
|
98
99
|
title={hint}
|
|
99
100
|
className={classNames(Styles.link, className, {
|
|
@@ -101,7 +102,7 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
|
|
|
101
102
|
})}
|
|
102
103
|
isActive={typeof isActive === 'function' ? isActive : undefined}
|
|
103
104
|
activeClassName={Styles.active}
|
|
104
|
-
data-cy={`nav-item-${
|
|
105
|
+
data-cy={`nav-item-${id}`}
|
|
105
106
|
target={target}
|
|
106
107
|
>
|
|
107
108
|
<HeaderNavigationItemContent
|
|
@@ -116,7 +117,7 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
|
|
|
116
117
|
};
|
|
117
118
|
|
|
118
119
|
export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
|
|
119
|
-
|
|
120
|
+
id,
|
|
120
121
|
hint,
|
|
121
122
|
className,
|
|
122
123
|
iconClassName,
|
|
@@ -125,11 +126,11 @@ export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
|
|
|
125
126
|
...rest
|
|
126
127
|
}) => (
|
|
127
128
|
<div
|
|
128
|
-
key={
|
|
129
|
+
key={id}
|
|
129
130
|
{...rest}
|
|
130
131
|
title={hint}
|
|
131
132
|
className={classNames(Styles.link, 'cursor-pointer', className)}
|
|
132
|
-
data-cy={`nav-item-${
|
|
133
|
+
data-cy={`nav-item-${id}`}
|
|
133
134
|
>
|
|
134
135
|
<HeaderNavigationItemContent
|
|
135
136
|
iconComponent={iconComponent}
|
|
@@ -165,7 +166,7 @@ const HeaderNavigationOverflow: FC<{
|
|
|
165
166
|
>
|
|
166
167
|
<div onClick={() => setIsOpen(false)} className={Styles.navigationLinks}>
|
|
167
168
|
{items.map(item => (
|
|
168
|
-
<HeaderNavigationLink {...item} key={item.
|
|
169
|
+
<HeaderNavigationLink {...item} key={item.id} />
|
|
169
170
|
))}
|
|
170
171
|
</div>
|
|
171
172
|
</Popover>
|
|
@@ -182,9 +183,13 @@ export interface HeaderNavigationProps {
|
|
|
182
183
|
items?: HeaderNavigationLinkData[];
|
|
183
184
|
itemsOverflow?: HeaderNavigationLinkData[];
|
|
184
185
|
navigationComponent?: FC<HeaderNavigationComponentProps>;
|
|
186
|
+
align?: 'left' | 'right' | 'center';
|
|
187
|
+
alignMinimized?: 'left' | 'right' | 'center';
|
|
185
188
|
}
|
|
186
189
|
|
|
187
190
|
export const HeaderNavigation: FC<HeaderNavigationProps> = ({
|
|
191
|
+
align,
|
|
192
|
+
alignMinimized,
|
|
188
193
|
children,
|
|
189
194
|
className,
|
|
190
195
|
contentClassName,
|
|
@@ -202,6 +207,25 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
|
|
|
202
207
|
const forceUpdate = useForceUpdate();
|
|
203
208
|
const [isMinimized, setIsMinimized] = useState(false);
|
|
204
209
|
|
|
210
|
+
const navigationAlignClass = useMemo(() => {
|
|
211
|
+
const al = (() => {
|
|
212
|
+
if (alignMinimized && isMinimized) {
|
|
213
|
+
return alignMinimized;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
return align ?? 'left';
|
|
217
|
+
})();
|
|
218
|
+
|
|
219
|
+
switch (al) {
|
|
220
|
+
case 'center':
|
|
221
|
+
return 'justify-content-center';
|
|
222
|
+
case 'right':
|
|
223
|
+
return 'justify-content-end';
|
|
224
|
+
default:
|
|
225
|
+
return 'justify-content-start';
|
|
226
|
+
}
|
|
227
|
+
}, [align, alignMinimized, isMinimized]);
|
|
228
|
+
|
|
205
229
|
useEffect(() => {
|
|
206
230
|
const handleResize = () => {
|
|
207
231
|
setIsMinimized(false);
|
|
@@ -247,11 +271,11 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
|
|
|
247
271
|
</div>
|
|
248
272
|
<div
|
|
249
273
|
ref={centerRef}
|
|
250
|
-
className=
|
|
274
|
+
className={classNames('d-if flex-grow-1 flex-basis-0', navigationAlignClass)}
|
|
251
275
|
>
|
|
252
276
|
<div ref={navigationRef} className={classNames(Styles.navigationLinks, 'd-if')}>
|
|
253
277
|
{items?.map(item => (
|
|
254
|
-
<HeaderNavigationLink {...item} key={item.
|
|
278
|
+
<HeaderNavigationLink {...item} key={item.id} />
|
|
255
279
|
))}
|
|
256
280
|
{!!itemsOverflow?.length && (
|
|
257
281
|
<HeaderNavigationOverflow items={itemsOverflow} />
|
package/src/index.ts
CHANGED
package/src/utils/navigation.ts
CHANGED
|
@@ -2,8 +2,8 @@ import { IconPropsStrict } from '@servicetitan/design-system';
|
|
|
2
2
|
import { FC, HTMLAttributeAnchorTarget, ReactNode } from 'react';
|
|
3
3
|
|
|
4
4
|
export interface HeaderNavigationLinkData {
|
|
5
|
-
/** link
|
|
6
|
-
|
|
5
|
+
/** link id */
|
|
6
|
+
id: string;
|
|
7
7
|
|
|
8
8
|
/** link href */
|
|
9
9
|
to: string;
|