@servicetitan/navigation 1.4.3 → 1.4.5
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 +4 -4
- package/dist/components/header-navigation/header-navigation.d.ts.map +1 -1
- package/dist/components/header-navigation/header-navigation.js +17 -10
- package/dist/components/header-navigation/header-navigation.js.map +1 -1
- package/dist/components/header-navigation/header-navigation.module.less +7 -18
- package/dist/components/header-navigation/header-navigation.stories.js.map +1 -1
- package/dist/components/logo/logo-titan-text.d.ts +5 -1
- package/dist/components/logo/logo-titan-text.d.ts.map +1 -1
- package/dist/components/logo/logo-titan-text.js +2 -1
- package/dist/components/logo/logo-titan-text.js.map +1 -1
- package/dist/components/logo/logo.stories.d.ts +3 -2
- package/dist/components/logo/logo.stories.d.ts.map +1 -1
- package/dist/components/logo/logo.stories.js +4 -0
- package/dist/components/logo/logo.stories.js.map +1 -1
- package/dist/components/profile-dropdown/profile-dropdown.d.ts +4 -1
- package/dist/components/profile-dropdown/profile-dropdown.d.ts.map +1 -1
- package/dist/components/profile-dropdown/profile-dropdown.js +5 -5
- package/dist/components/profile-dropdown/profile-dropdown.js.map +1 -1
- package/dist/components/profile-dropdown/profile-dropdown.stories.js.map +1 -1
- package/dist/utils/navigation-context.d.ts +4 -3
- package/dist/utils/navigation-context.d.ts.map +1 -1
- package/dist/utils/navigation-context.js +4 -3
- package/dist/utils/navigation-context.js.map +1 -1
- package/dist/utils/navigation.d.ts +4 -4
- package/dist/utils/navigation.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/components/header-navigation/header-navigation.module.less +7 -18
- package/src/components/header-navigation/header-navigation.module.less.d.ts +1 -1
- package/src/components/header-navigation/header-navigation.stories.tsx +4 -4
- package/src/components/header-navigation/header-navigation.tsx +79 -19
- package/src/components/logo/logo-titan-text.tsx +9 -3
- package/src/components/logo/logo.stories.tsx +23 -0
- package/src/components/profile-dropdown/profile-dropdown.stories.tsx +2 -2
- package/src/components/profile-dropdown/profile-dropdown.tsx +14 -6
- package/src/utils/navigation-context.tsx +5 -4
- package/src/utils/navigation.ts +4 -4
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { IconPropsStrict } from '@servicetitan/design-system';
|
|
2
2
|
import { FC, HTMLAttributeAnchorTarget, ReactElement, ReactNode } from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { HeaderNavigationItemData, NavLinkComponentProps } from '../../utils/navigation';
|
|
4
4
|
interface HeaderNavigationItemContentPropsStrict {
|
|
5
5
|
title?: string;
|
|
6
6
|
counter?: number;
|
|
@@ -37,9 +37,9 @@ export interface HeaderNavigationProps {
|
|
|
37
37
|
id?: string;
|
|
38
38
|
left?: ReactElement;
|
|
39
39
|
leftClassName?: string;
|
|
40
|
-
items?:
|
|
41
|
-
itemsOverflow?:
|
|
42
|
-
navigationComponent?: FC<
|
|
40
|
+
items?: HeaderNavigationItemData[];
|
|
41
|
+
itemsOverflow?: HeaderNavigationItemData[];
|
|
42
|
+
navigationComponent?: FC<NavLinkComponentProps>;
|
|
43
43
|
align?: 'left' | 'right' | 'center';
|
|
44
44
|
alignMinimized?: 'left' | 'right' | 'center';
|
|
45
45
|
}
|
|
@@ -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,
|
|
1
|
+
{"version":3,"file":"header-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,eAAe,EAAyB,MAAM,6BAA6B,CAAC;AAE3F,OAAO,EACH,EAAE,EAEF,yBAAyB,EACzB,YAAY,EACZ,SAAS,EAOZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAgBzF,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,+BAAgC,SAAQ,kCAAkC;IACvF,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;AAED,MAAM,WAAW,yBAA0B,SAAQ,+BAA+B;IAC9E,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,eAAO,MAAM,2BAA2B,EAAE,EAAE,CAAC,sCAAsC,CA8BlF,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CAuC9D,CAAC;AAoDF,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CAsBpE,CAAC;AAEF,eAAO,MAAM,6BAA6B,EAAE,EAAE,CAC1C,4BAA4B,GAAG;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,CAWzD,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,qBAAqB,CAAC,CAAC;IAChD,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;CAChD;AAUD,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAyItD,CAAC"}
|
|
@@ -11,10 +11,10 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
11
11
|
};
|
|
12
12
|
import { createElement as _createElement } from "react";
|
|
13
13
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
|
-
import { Icon, Popover, Tag } from '@servicetitan/design-system';
|
|
14
|
+
import { Icon, Popover, Tag, Tooltip } from '@servicetitan/design-system';
|
|
15
15
|
import classNames from 'classnames';
|
|
16
|
-
import { Fragment, useCallback,
|
|
17
|
-
import {
|
|
16
|
+
import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
|
|
17
|
+
import { DefaultNavLinkComponent, NavLinkContext, useNavLink, } from '../../utils/navigation-context';
|
|
18
18
|
import * as Styles from './header-navigation.module.less';
|
|
19
19
|
function useForceUpdate() {
|
|
20
20
|
const [, setTick] = useState(0);
|
|
@@ -25,15 +25,22 @@ function useForceUpdate() {
|
|
|
25
25
|
export const HeaderNavigationItemContent = ({ title, counter, iconClassName, iconComponent: IconComponent, iconName, }) => (_jsxs(Fragment, { children: [IconComponent ? (_jsx("i", Object.assign({ className: classNames(Styles.icon, iconClassName) }, { children: _jsx(IconComponent, {}) }))) : iconName ? (_jsx(Icon, { size: "inherit", name: iconName, className: classNames(Styles.icon, iconClassName) })) : (_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
26
|
export const HeaderNavigationLink = (_a) => {
|
|
27
27
|
var { id, to, title, hint, counter, className, iconClassName, iconComponent, iconName, isActive, target } = _a, rest = __rest(_a, ["id", "to", "title", "hint", "counter", "className", "iconClassName", "iconComponent", "iconName", "isActive", "target"]);
|
|
28
|
-
const NavigationComponent =
|
|
29
|
-
return (_createElement(NavigationComponent, Object.assign({ "data-cy": `nav-
|
|
28
|
+
const NavigationComponent = useNavLink();
|
|
29
|
+
return (_createElement(NavigationComponent, Object.assign({ "data-cy": `nav-link-${id}` }, rest, { key: id, to: to, title: hint, className: classNames(Styles.link, className, {
|
|
30
30
|
[Styles.active]: isActive === true,
|
|
31
31
|
}), isActive: typeof isActive === 'function' ? isActive : undefined, activeClassName: Styles.active, target: target }),
|
|
32
32
|
_jsx(HeaderNavigationItemContent, { title: title, counter: counter, iconComponent: iconComponent, iconClassName: iconClassName, iconName: iconName })));
|
|
33
33
|
};
|
|
34
|
+
const HeaderNavigationItem = ({ id, to, title, hint, counter, className, iconClassName, iconComponent, iconName, isActive, minimized, }) => {
|
|
35
|
+
const NavigationComponent = useNavLink();
|
|
36
|
+
const trigger = (_jsx(NavigationComponent, Object.assign({ "data-cy": `nav-item-${id}`, to: to, title: hint, className: classNames(Styles.link, className, {
|
|
37
|
+
[Styles.active]: isActive === true,
|
|
38
|
+
}), isActive: typeof isActive === 'function' ? isActive : undefined, activeClassName: Styles.active }, { children: _jsx(HeaderNavigationItemContent, { title: minimized ? undefined : title, counter: counter, iconComponent: iconComponent, iconClassName: iconClassName, iconName: iconName }) }), id));
|
|
39
|
+
return minimized && title ? (_jsx(Tooltip, Object.assign({ el: "div", direction: "b", text: title }, { children: trigger }))) : (trigger);
|
|
40
|
+
};
|
|
34
41
|
export const HeaderNavigationTrigger = (_a) => {
|
|
35
42
|
var { id, hint, className, iconClassName, iconComponent, iconName } = _a, rest = __rest(_a, ["id", "hint", "className", "iconClassName", "iconComponent", "iconName"]);
|
|
36
|
-
return (_jsx("div", Object.assign({ "data-cy": `nav-
|
|
43
|
+
return (_jsx("div", Object.assign({ "data-cy": `nav-trigger-${id}` }, rest, { title: hint, className: classNames(Styles.link, 'cursor-pointer', className) }, { children: _jsx(HeaderNavigationItemContent, { iconComponent: iconComponent, iconClassName: iconClassName, iconName: iconName }) }), id));
|
|
37
44
|
};
|
|
38
45
|
export const HeaderNavigationTriggerCustom = (_a) => {
|
|
39
46
|
var { children, id, hint, className, iconClassName, iconComponent, iconName } = _a, rest = __rest(_a, ["children", "id", "hint", "className", "iconClassName", "iconComponent", "iconName"]);
|
|
@@ -41,7 +48,7 @@ export const HeaderNavigationTriggerCustom = (_a) => {
|
|
|
41
48
|
};
|
|
42
49
|
const HeaderNavigationOverflow = ({ items }) => {
|
|
43
50
|
const [isOpen, setIsOpen] = useState(false);
|
|
44
|
-
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.
|
|
51
|
+
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.navigationItems }, { children: items.map(item => (_createElement(HeaderNavigationItem, Object.assign({}, item, { key: item.id, minimized: false })))) })) })));
|
|
45
52
|
};
|
|
46
53
|
const shortItemWidth = 44;
|
|
47
54
|
var MinimizedState;
|
|
@@ -50,7 +57,7 @@ var MinimizedState;
|
|
|
50
57
|
MinimizedState[MinimizedState["Minimized"] = 1] = "Minimized";
|
|
51
58
|
MinimizedState[MinimizedState["Full"] = 2] = "Full";
|
|
52
59
|
})(MinimizedState || (MinimizedState = {}));
|
|
53
|
-
export const HeaderNavigation = ({ align, alignMinimized, children, className, contentClassName, id, items, itemsOverflow, left, leftClassName, navigationComponent =
|
|
60
|
+
export const HeaderNavigation = ({ align, alignMinimized, children, className, contentClassName, id, items, itemsOverflow, left, leftClassName, navigationComponent = DefaultNavLinkComponent, }) => {
|
|
54
61
|
const leftRef = useRef(null);
|
|
55
62
|
const rightRef = useRef(null);
|
|
56
63
|
const centerRef = useRef(null);
|
|
@@ -115,9 +122,9 @@ export const HeaderNavigation = ({ align, alignMinimized, children, className, c
|
|
|
115
122
|
useEffect(() => {
|
|
116
123
|
updateIsMinimized();
|
|
117
124
|
});
|
|
118
|
-
return (_jsx(
|
|
125
|
+
return (_jsx(NavLinkContext.Provider, Object.assign({ value: navigationComponent }, { children: _jsxs("div", Object.assign({ className: classNames(Styles.header, className, {
|
|
119
126
|
[Styles.minimized]: minimized === MinimizedState.Minimized,
|
|
120
127
|
[Styles.calculating]: minimized === MinimizedState.Calculating,
|
|
121
|
-
}), 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, Styles.center) }, { children: _jsxs("div", Object.assign({ ref: navigationRef, className: classNames(Styles.
|
|
128
|
+
}), id: id, "data-cy": "header-navigation" }, { children: [_jsx("div", Object.assign({ className: leftClassName, ref: leftRef, "data-cy": "header-navigation-left" }, { children: left })), _jsx("div", Object.assign({ ref: centerRef, className: classNames('d-if flex-grow-1 flex-basis-0', navigationAlignClass, Styles.center), "data-cy": "header-navigation-items" }, { children: _jsxs("div", Object.assign({ ref: navigationRef, className: classNames(Styles.navigationItems, 'd-if') }, { children: [items === null || items === void 0 ? void 0 : items.map(item => (_createElement(HeaderNavigationItem, Object.assign({}, item, { minimized: minimized === MinimizedState.Minimized, 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, "data-cy": "header-navigation-content" }, { children: children }))] })) })));
|
|
122
129
|
};
|
|
123
130
|
//# 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;
|
|
1
|
+
{"version":3,"file":"header-navigation.js","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.tsx"],"names":[],"mappings":"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"}
|
|
@@ -10,6 +10,10 @@
|
|
|
10
10
|
display: inline-block;
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
+
ins {
|
|
14
|
+
font-size: @typescale-2;
|
|
15
|
+
}
|
|
16
|
+
|
|
13
17
|
& * {
|
|
14
18
|
text-decoration: none;
|
|
15
19
|
white-space: nowrap;
|
|
@@ -49,7 +53,7 @@
|
|
|
49
53
|
}
|
|
50
54
|
|
|
51
55
|
&.active {
|
|
52
|
-
color: @color-blue-
|
|
56
|
+
color: @color-blue-200;
|
|
53
57
|
}
|
|
54
58
|
|
|
55
59
|
&:hover:not(.active) {
|
|
@@ -77,6 +81,7 @@
|
|
|
77
81
|
.center {
|
|
78
82
|
min-width: 0;
|
|
79
83
|
overflow-x: auto;
|
|
84
|
+
overflow-y: hidden;
|
|
80
85
|
}
|
|
81
86
|
|
|
82
87
|
&.calculating {
|
|
@@ -88,27 +93,11 @@
|
|
|
88
93
|
&.minimized .link {
|
|
89
94
|
ins {
|
|
90
95
|
display: none;
|
|
91
|
-
color: @color-white;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
&:hover:not(.active) {
|
|
95
|
-
ins {
|
|
96
|
-
display: inline-block;
|
|
97
|
-
margin-left: @spacing-0;
|
|
98
|
-
position: absolute;
|
|
99
|
-
z-index: @z-index-notification;
|
|
100
|
-
background-color: @color-neutral-300;
|
|
101
|
-
bottom: -@spacing-half;
|
|
102
|
-
left: 50%;
|
|
103
|
-
transform: translate3d(-50%, 100%, 0);
|
|
104
|
-
padding: @spacing-1;
|
|
105
|
-
border-radius: @default-border-radius;
|
|
106
|
-
}
|
|
107
96
|
}
|
|
108
97
|
}
|
|
109
98
|
}
|
|
110
99
|
|
|
111
|
-
.navigation-
|
|
100
|
+
.navigation-items {
|
|
112
101
|
.link {
|
|
113
102
|
padding: 18px 12px;
|
|
114
103
|
|
|
@@ -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,2BAA2B,EAC3B,oBAAoB,EACpB,uBAAuB,EACvB,6BAA6B,GAChC,MAAM,qBAAqB,CAAC;AAE7B,eAAe;IACX,KAAK,EAAE,6BAA6B;IACpC,SAAS,EAAE,gBAAgB;IAC3B,UAAU,EAAE,EAAE;CACjB,CAAC;AAEF,MAAM,OAAO,GAAG,CACZ,EAAU,EACV,IAAuC,EACf,EAAE,CAAC,iBAC3B,EAAE,EACF,EAAE,EAAE,GAAG,EACP,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,EAC5C,IAAI,EAAE,EAAE,IACL,CAAC,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,EAAE,CAAC,EACjB,CAAC;AAEH,MAAM,KAAK,GAAG;IACV,QAAQ,EAAE,OAAO,CAAC,UAAU,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpD,KAAK,EAAE,OAAO,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;IACjF,SAAS,EAAE,OAAO,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IACzE,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;IACtE,SAAS,EAAE,OAAO,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC;IAC1E,SAAS,EAAE,OAAO,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC;IACrD,UAAU,EAAE,OAAO,CAAC,YAAY,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC;IAC7D,SAAS,EAAE,OAAO,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;IACzD,SAAS,EAAE,OAAO,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC;IACrD,WAAW,EAAE,OAAO,CAAC,aAAa,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE,CAAC;IAClE,QAAQ,EAAE,OAAO,CAAC,UAAU,EAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7D,OAAO,EAAE,OAAO,CAAC,SAAS,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC;CACpD,CAAC;AAEF,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"header-navigation.stories.js","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,13 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
1
|
+
import { FC, ReactNode } from 'react';
|
|
2
2
|
export interface LogoTitanTextProps {
|
|
3
3
|
mantleFill?: string;
|
|
4
4
|
className?: string;
|
|
5
5
|
title: string;
|
|
6
6
|
description: string;
|
|
7
|
+
logoWrapper?: FC<{
|
|
8
|
+
className: string;
|
|
9
|
+
children: ReactNode;
|
|
10
|
+
}>;
|
|
7
11
|
}
|
|
8
12
|
export declare const LogoTitanText: FC<LogoTitanTextProps>;
|
|
9
13
|
//# sourceMappingURL=logo-titan-text.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"logo-titan-text.d.ts","sourceRoot":"","sources":["../../../src/components/logo/logo-titan-text.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"logo-titan-text.d.ts","sourceRoot":"","sources":["../../../src/components/logo/logo-titan-text.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAItC,MAAM,WAAW,kBAAkB;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,EAAE,CAAC;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;CAChE;AAMD,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAuBhD,CAAC"}
|
|
@@ -2,5 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import classNames from 'classnames';
|
|
3
3
|
import { LogoTitan } from './logo-titan';
|
|
4
4
|
import * as Styles from './logo-titan-text.module.less';
|
|
5
|
-
|
|
5
|
+
const DefaultLogoWrapper = ({ className, children, }) => _jsx("div", Object.assign({ className: className }, { children: children }));
|
|
6
|
+
export const LogoTitanText = ({ className, description, logoWrapper: LogoWrapper = DefaultLogoWrapper, mantleFill, title, }) => (_jsxs("div", Object.assign({ className: classNames('d-f', Styles.container, className) }, { children: [_jsx(LogoWrapper, Object.assign({ className: classNames('bg-white d-if justify-content-center align-items-center', Styles.logoWrapper) }, { children: _jsx(LogoTitan, { width: 40, height: 40, mantleFill: mantleFill }) })), _jsxs("div", Object.assign({ className: "d-if p-l-1 c-white flex-column justify-content-center align-items-start" }, { children: [_jsx("span", Object.assign({ className: classNames(Styles.logoTextTitle, 'ff-display') }, { children: title })), _jsx("span", Object.assign({ className: classNames(Styles.logoTextDescription, 'fs-1 t-truncate m-b-1') }, { children: description }))] }))] })));
|
|
6
7
|
//# sourceMappingURL=logo-titan-text.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"logo-titan-text.js","sourceRoot":"","sources":["../../../src/components/logo/logo-titan-text.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,MAAM,MAAM,+BAA+B,CAAC;
|
|
1
|
+
{"version":3,"file":"logo-titan-text.js","sourceRoot":"","sources":["../../../src/components/logo/logo-titan-text.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,MAAM,MAAM,+BAA+B,CAAC;AAUxD,MAAM,kBAAkB,GAAmD,CAAC,EACxE,SAAS,EACT,QAAQ,GACX,EAAE,EAAE,CAAC,4BAAK,SAAS,EAAE,SAAS,gBAAG,QAAQ,IAAO,CAAC;AAClD,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EAClD,SAAS,EACT,WAAW,EACX,WAAW,EAAE,WAAW,GAAG,kBAAkB,EAC7C,UAAU,EACV,KAAK,GACR,EAAE,EAAE,CAAC,CACF,6BAAK,SAAS,EAAE,UAAU,CAAC,KAAK,EAAE,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,iBAC1D,KAAC,WAAW,kBACR,SAAS,EAAE,UAAU,CACjB,yDAAyD,EACzD,MAAM,CAAC,WAAW,CACrB,gBAED,KAAC,SAAS,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,UAAU,EAAE,UAAU,GAAI,IAClD,EACd,6BAAK,SAAS,EAAC,yEAAyE,iBACpF,6BAAM,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,aAAa,EAAE,YAAY,CAAC,gBAAG,KAAK,IAAQ,EAC/E,6BAAM,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,mBAAmB,EAAE,uBAAuB,CAAC,gBAC3E,WAAW,IACT,KACL,KACJ,CACT,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
import { FC } from 'react';
|
|
2
2
|
declare const _default: {
|
|
3
3
|
title: string;
|
|
4
|
-
component:
|
|
4
|
+
component: FC<import("./logo-titan").LogoTitanProps>;
|
|
5
5
|
parameters: {};
|
|
6
6
|
};
|
|
7
7
|
export default _default;
|
|
@@ -9,4 +9,5 @@ export declare const logoTitan: () => import("react/jsx-runtime").JSX.Element;
|
|
|
9
9
|
export declare const logoTitanBlueMantle: () => import("react/jsx-runtime").JSX.Element;
|
|
10
10
|
export declare const logoCompanyTitle: () => import("react/jsx-runtime").JSX.Element;
|
|
11
11
|
export declare const logoTitanText: () => import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export declare const logoTitanTextWithLink: () => import("react/jsx-runtime").JSX.Element;
|
|
12
13
|
//# sourceMappingURL=logo.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"logo.stories.d.ts","sourceRoot":"","sources":["../../../src/components/logo/logo.stories.tsx"],"names":[],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"logo.stories.d.ts","sourceRoot":"","sources":["../../../src/components/logo/logo.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAa,MAAM,OAAO,CAAC;;;;;;AAKtC,wBAIE;AAEF,eAAO,MAAM,SAAS,+CAAsB,CAAC;AAC7C,eAAO,MAAM,mBAAmB,+CAA2C,CAAC;AAC5E,eAAO,MAAM,gBAAgB,+CAA6B,CAAC;AAC3D,eAAO,MAAM,aAAa,+CAOzB,CAAC;AAcF,eAAO,MAAM,qBAAqB,+CAQjC,CAAC"}
|
|
@@ -11,4 +11,8 @@ export const logoTitan = () => _jsx(LogoTitan, {});
|
|
|
11
11
|
export const logoTitanBlueMantle = () => _jsx(LogoTitan, { mantleFill: "#2270EE" });
|
|
12
12
|
export const logoCompanyTitle = () => _jsx(LogoCompanyTitle, {});
|
|
13
13
|
export const logoTitanText = () => (_jsx(LogoTitanText, { className: "bg-neutral-300 border", mantleFill: "#2270EE", title: "Commercial", description: "tenant tenant tenant tenant tenant" }));
|
|
14
|
+
const NavLinkMock = ({ className, children }) => (_jsx("a", Object.assign({ href: "/", onClick: e => {
|
|
15
|
+
e.preventDefault();
|
|
16
|
+
}, className: className }, { children: children })));
|
|
17
|
+
export const logoTitanTextWithLink = () => (_jsx(LogoTitanText, { className: "bg-neutral-300 border", mantleFill: "#2270EE", title: "Commercial", description: "tenant tenant tenant tenant tenant", logoWrapper: NavLinkMock }));
|
|
14
18
|
//# sourceMappingURL=logo.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"logo.stories.js","sourceRoot":"","sources":["../../../src/components/logo/logo.stories.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"logo.stories.js","sourceRoot":"","sources":["../../../src/components/logo/logo.stories.tsx"],"names":[],"mappings":";AACA,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;AAEF,MAAM,WAAW,GAAmD,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAC7F,0BACI,IAAI,EAAC,GAAG,EACR,OAAO,EAAE,CAAC,CAAC,EAAE;QACT,CAAC,CAAC,cAAc,EAAE,CAAC;IACvB,CAAC,EACD,SAAS,EAAE,SAAS,gBAEnB,QAAQ,IACT,CACP,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,EAAE,CAAC,CACvC,KAAC,aAAa,IACV,SAAS,EAAC,uBAAuB,EACjC,UAAU,EAAC,SAAS,EACpB,KAAK,EAAC,YAAY,EAClB,WAAW,EAAC,oCAAoC,EAChD,WAAW,EAAE,WAAW,GAC1B,CACL,CAAC"}
|
|
@@ -37,7 +37,7 @@ export interface ProfileDropdownLinkProps extends ProfileDropdownLinkPropsStrict
|
|
|
37
37
|
[key: string]: any;
|
|
38
38
|
}
|
|
39
39
|
export declare const ProfileDropdownLink: FC<ProfileDropdownLinkProps>;
|
|
40
|
-
export interface
|
|
40
|
+
export interface ProfileDropdownPropsStrict {
|
|
41
41
|
children?: ReactNode;
|
|
42
42
|
trigger?: Omit<ProfileDropdownTriggerProps, 'onClick'>;
|
|
43
43
|
hintPopup?: {
|
|
@@ -52,6 +52,9 @@ export interface ProfileDropdownProps {
|
|
|
52
52
|
onClose?(): void;
|
|
53
53
|
onOpen?(): void;
|
|
54
54
|
}
|
|
55
|
+
export interface ProfileDropdownProps extends ProfileDropdownPropsStrict {
|
|
56
|
+
[key: string]: any;
|
|
57
|
+
}
|
|
55
58
|
export interface ProfileDropdownType extends FC<ProfileDropdownProps> {
|
|
56
59
|
Divider: typeof ProfileDropdownDivider;
|
|
57
60
|
Link: typeof ProfileDropdownLink;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"profile-dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2B,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAE1F,OAAO,EACH,EAAE,EACF,yBAAyB,EACzB,UAAU,EAEV,SAAS,
|
|
1
|
+
{"version":3,"file":"profile-dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2B,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAE1F,OAAO,EACH,EAAE,EACF,yBAAyB,EACzB,UAAU,EAEV,SAAS,EAIZ,MAAM,OAAO,CAAC;AAMf,MAAM,WAAW,2BAA2B;IACxC,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;AA2FD,MAAM,WAAW,iCAAiC;IAC9C,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;CACjC;AAED,UAAU,2BAA4B,SAAQ,iCAAiC;IAC3E,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,eAAO,MAAM,sBAAsB,EAAE,EAAE,CAAC,2BAA2B,CAuBlE,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,EAAoB,CAAC;AAE1D,MAAM,WAAW,8BAA8B;IAC3C,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,yBAAyB,CAAC;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,wBAAyB,SAAQ,8BAA8B;IAC5E,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CA6C5D,CAAC;AAEF,MAAM,WAAW,0BAA0B;IACvC,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,EAAE,CAAC;YAAE,WAAW,IAAI,IAAI,CAAA;SAAE,CAAC,CAAC;QACrC,KAAK,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;QACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;KACxB,CAAC;IACF,KAAK,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACpC,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,MAAM,CAAC,IAAI,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,oBAAqB,SAAQ,0BAA0B;IACpE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,MAAM,WAAW,mBAAoB,SAAQ,EAAE,CAAC,oBAAoB,CAAC;IACjE,OAAO,EAAE,OAAO,sBAAsB,CAAC;IACvC,IAAI,EAAE,OAAO,mBAAmB,CAAC;IACjC,OAAO,EAAE,OAAO,sBAAsB,CAAC;CAC1C;AAED,eAAO,MAAM,eAAe,EAAE,mBAgFL,CAAC"}
|
|
@@ -12,8 +12,8 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
import { BodyText, Icon, Popover } from '@servicetitan/design-system';
|
|
14
14
|
import classNames from 'classnames';
|
|
15
|
-
import { useCallback,
|
|
16
|
-
import {
|
|
15
|
+
import { useCallback, useEffect, useState, } from 'react';
|
|
16
|
+
import { useNavLink } from '../../utils/navigation-context';
|
|
17
17
|
import * as Styles from './profile-dropdown.module.less';
|
|
18
18
|
import { ProfileLogo } from './profile-icon';
|
|
19
19
|
const ProfileDropdownTrigger = ({ avatarBadge, badge, className, hintArrow, imageSrc, info, onClick, }) => {
|
|
@@ -30,7 +30,7 @@ const ProfileDropdownTrigger = ({ avatarBadge, badge, className, hintArrow, imag
|
|
|
30
30
|
const onAvatarError = useCallback(() => {
|
|
31
31
|
setAvatarSourceError(true);
|
|
32
32
|
}, []);
|
|
33
|
-
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: 28 })), !!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 })))] })));
|
|
33
|
+
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, "data-cy": "profile-dropdown-trigger" }, { children: [avatarSource && !avatarSourceError ? (_jsx("img", { src: avatarSource, className: Styles.profileImage, onError: onAvatarError, alt: "user dropdown menu" })) : (_jsx(ProfileLogo, { size: 28 })), !!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 })))] })));
|
|
34
34
|
};
|
|
35
35
|
export const ProfileDropdownSection = (_a) => {
|
|
36
36
|
var { children, className, onClick } = _a, rest = __rest(_a, ["children", "className", "onClick"]);
|
|
@@ -47,7 +47,7 @@ export const ProfileDropdownSection = (_a) => {
|
|
|
47
47
|
export const ProfileDropdownDivider = Popover.Divider;
|
|
48
48
|
export const ProfileDropdownLink = (_a) => {
|
|
49
49
|
var { children, className, external, target, to, onClick } = _a, rest = __rest(_a, ["children", "className", "external", "target", "to", "onClick"]);
|
|
50
|
-
const NavigationComponent =
|
|
50
|
+
const NavigationComponent = useNavLink();
|
|
51
51
|
const clickHandler = (e) => {
|
|
52
52
|
e.preventDefault();
|
|
53
53
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
@@ -79,7 +79,7 @@ export const ProfileDropdown = (({ children, hintPopup, onClose, onOpen, trigger
|
|
|
79
79
|
const hintShown = !!hintPopup && !open;
|
|
80
80
|
const HintComponent = hintPopup === null || hintPopup === void 0 ? void 0 : hintPopup.content;
|
|
81
81
|
const triggerElement = (_jsx(ProfileDropdownTrigger, Object.assign({}, trigger, { onClick: children ? onTriggerClick : undefined, hintArrow: hintShown })));
|
|
82
|
-
return (_jsx("div", Object.assign({ className: "position-relative" }, { children: !!hintPopup && hintShown && HintComponent ? (_jsx(Popover, Object.assign({ direction: "bl", width: (_a = hintPopup.width) !== null && _a !== void 0 ? _a : 'xs', trigger: triggerElement, popoverContentClassName: Styles.hint, onClickOutside: hintPopup === null || hintPopup === void 0 ? void 0 : hintPopup.onClose, open: true }, { children: _jsx("div", Object.assign({ className: classNames(Styles.hintContent, hintPopup.className) }, { children: _jsx(HintComponent, { openProfile: handleOpen }) })) }))) : (_jsx(Popover, Object.assign({ direction: "bl", width: width !== null && width !== void 0 ? width : 'xs', trigger: triggerElement, open: open, onClickOutside: handleClose, className: Styles.dropdown, popoverContentClassName: classNames(Styles.dropdownContent, Styles.dropdownContentBottomLeft) }, { children: _jsx("div", Object.assign({ className: Styles.dropdownContentWrapper, onClick: handleClose }, { children: children })) }))) })));
|
|
82
|
+
return (_jsx("div", Object.assign({ className: "position-relative", "data-cy": "profile-dropdown" }, { children: !!hintPopup && hintShown && HintComponent ? (_jsx(Popover, Object.assign({ direction: "bl", width: (_a = hintPopup.width) !== null && _a !== void 0 ? _a : 'xs', trigger: triggerElement, popoverContentClassName: Styles.hint, onClickOutside: hintPopup === null || hintPopup === void 0 ? void 0 : hintPopup.onClose, open: true }, { children: _jsx("div", Object.assign({ className: classNames(Styles.hintContent, hintPopup.className) }, { children: _jsx(HintComponent, { openProfile: handleOpen }) })) }))) : (_jsx(Popover, Object.assign({ direction: "bl", width: width !== null && width !== void 0 ? width : 'xs', trigger: triggerElement, open: open, onClickOutside: handleClose, className: Styles.dropdown, popoverContentClassName: classNames(Styles.dropdownContent, Styles.dropdownContentBottomLeft) }, { children: _jsx("div", Object.assign({ className: Styles.dropdownContentWrapper, onClick: handleClose, "data-cy": "profile-dropdown-content" }, { children: children })) }))) })));
|
|
83
83
|
});
|
|
84
84
|
ProfileDropdown.Divider = ProfileDropdownDivider;
|
|
85
85
|
ProfileDropdown.Link = ProfileDropdownLink;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"profile-dropdown.js","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAsB,MAAM,6BAA6B,CAAC;AAC1F,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAMH,WAAW,EACX,
|
|
1
|
+
{"version":3,"file":"profile-dropdown.js","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"profile-dropdown.stories.js","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAGrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD,eAAe;IACX,KAAK,EAAE,4BAA4B;IACnC,SAAS,EAAE,eAAe;IAC1B,UAAU,EAAE,EAAE;CACjB,CAAC;AAEF,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"profile-dropdown.stories.js","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
-
import {
|
|
3
|
-
export declare const
|
|
4
|
-
export declare const
|
|
2
|
+
import { NavLinkComponentProps } from './navigation';
|
|
3
|
+
export declare const DefaultNavLinkComponent: FC<NavLinkComponentProps>;
|
|
4
|
+
export declare const NavLinkContext: import("react").Context<FC<NavLinkComponentProps>>;
|
|
5
|
+
export declare const useNavLink: () => FC<NavLinkComponentProps>;
|
|
5
6
|
//# sourceMappingURL=navigation-context.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-context.d.ts","sourceRoot":"","sources":["../../src/utils/navigation-context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"navigation-context.d.ts","sourceRoot":"","sources":["../../src/utils/navigation-context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA6B,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAErD,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,qBAAqB,CAK7D,CAAC;AAEF,eAAO,MAAM,cAAc,oDAAyC,CAAC;AACrE,eAAO,MAAM,UAAU,iCAAmC,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { createContext } from 'react';
|
|
2
|
+
import { createContext, useContext } from 'react';
|
|
3
3
|
import { NavLink } from 'react-router-dom';
|
|
4
|
-
export const
|
|
5
|
-
export const
|
|
4
|
+
export const DefaultNavLinkComponent = props => (_jsx(NavLink, Object.assign({}, props, { isActive: props.isActive && ((_, { pathname }) => props.isActive(pathname)) })));
|
|
5
|
+
export const NavLinkContext = createContext(DefaultNavLinkComponent);
|
|
6
|
+
export const useNavLink = () => useContext(NavLinkContext);
|
|
6
7
|
//# sourceMappingURL=navigation-context.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-context.js","sourceRoot":"","sources":["../../src/utils/navigation-context.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,aAAa,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"navigation-context.js","sourceRoot":"","sources":["../../src/utils/navigation-context.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAG3C,MAAM,CAAC,MAAM,uBAAuB,GAA8B,KAAK,CAAC,EAAE,CAAC,CACvE,KAAC,OAAO,oBACA,KAAK,IACT,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,QAAS,CAAC,QAAQ,CAAC,CAAC,IAC9E,CACL,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAAC,uBAAuB,CAAC,CAAC;AACrE,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { IconPropsStrict } from '@servicetitan/design-system';
|
|
2
2
|
import { FC, HTMLAttributeAnchorTarget, ReactNode } from 'react';
|
|
3
|
-
export interface
|
|
3
|
+
export interface HeaderNavigationItemData {
|
|
4
4
|
/** link id */
|
|
5
5
|
id: string;
|
|
6
6
|
/** link href */
|
|
@@ -9,7 +9,7 @@ export interface HeaderNavigationLinkData {
|
|
|
9
9
|
title: string;
|
|
10
10
|
/** link description */
|
|
11
11
|
hint: string;
|
|
12
|
-
/** callback to return active state. By default it compares link href with current pathname */
|
|
12
|
+
/** callback to return active state. By default, it compares link href with current pathname */
|
|
13
13
|
isActive?: boolean | ((pathname: string) => boolean);
|
|
14
14
|
/** flag if the link is not shown (based on FG and/or user permissions) */
|
|
15
15
|
isHidden?: boolean;
|
|
@@ -24,7 +24,7 @@ export interface HeaderNavigationLinkData {
|
|
|
24
24
|
/** class name of link item */
|
|
25
25
|
className?: string;
|
|
26
26
|
}
|
|
27
|
-
export interface
|
|
27
|
+
export interface NavLinkComponentPropsStrict {
|
|
28
28
|
to: string;
|
|
29
29
|
title?: string;
|
|
30
30
|
className?: string;
|
|
@@ -33,7 +33,7 @@ export interface HeaderNavigationComponentPropsStrict {
|
|
|
33
33
|
isActive?: (pathname: string) => boolean;
|
|
34
34
|
target?: HTMLAttributeAnchorTarget;
|
|
35
35
|
}
|
|
36
|
-
export interface
|
|
36
|
+
export interface NavLinkComponentProps extends NavLinkComponentPropsStrict {
|
|
37
37
|
[key: string]: any;
|
|
38
38
|
}
|
|
39
39
|
//# sourceMappingURL=navigation.d.ts.map
|
|
@@ -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,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
|
|
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,+FAA+F;IAC/F,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,2BAA2B;IACxC,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,qBAAsB,SAAQ,2BAA2B;IACtE,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.4.
|
|
3
|
+
"version": "1.4.5",
|
|
4
4
|
"description": "Navigation components",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -43,5 +43,5 @@
|
|
|
43
43
|
"less": true,
|
|
44
44
|
"webpack": false
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "14ea22d6b04311a40b988e7fc7d336274ca5f66d"
|
|
47
47
|
}
|
|
@@ -10,6 +10,10 @@
|
|
|
10
10
|
display: inline-block;
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
+
ins {
|
|
14
|
+
font-size: @typescale-2;
|
|
15
|
+
}
|
|
16
|
+
|
|
13
17
|
& * {
|
|
14
18
|
text-decoration: none;
|
|
15
19
|
white-space: nowrap;
|
|
@@ -49,7 +53,7 @@
|
|
|
49
53
|
}
|
|
50
54
|
|
|
51
55
|
&.active {
|
|
52
|
-
color: @color-blue-
|
|
56
|
+
color: @color-blue-200;
|
|
53
57
|
}
|
|
54
58
|
|
|
55
59
|
&:hover:not(.active) {
|
|
@@ -77,6 +81,7 @@
|
|
|
77
81
|
.center {
|
|
78
82
|
min-width: 0;
|
|
79
83
|
overflow-x: auto;
|
|
84
|
+
overflow-y: hidden;
|
|
80
85
|
}
|
|
81
86
|
|
|
82
87
|
&.calculating {
|
|
@@ -88,27 +93,11 @@
|
|
|
88
93
|
&.minimized .link {
|
|
89
94
|
ins {
|
|
90
95
|
display: none;
|
|
91
|
-
color: @color-white;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
&:hover:not(.active) {
|
|
95
|
-
ins {
|
|
96
|
-
display: inline-block;
|
|
97
|
-
margin-left: @spacing-0;
|
|
98
|
-
position: absolute;
|
|
99
|
-
z-index: @z-index-notification;
|
|
100
|
-
background-color: @color-neutral-300;
|
|
101
|
-
bottom: -@spacing-half;
|
|
102
|
-
left: 50%;
|
|
103
|
-
transform: translate3d(-50%, 100%, 0);
|
|
104
|
-
padding: @spacing-1;
|
|
105
|
-
border-radius: @default-border-radius;
|
|
106
|
-
}
|
|
107
96
|
}
|
|
108
97
|
}
|
|
109
98
|
}
|
|
110
99
|
|
|
111
|
-
.navigation-
|
|
100
|
+
.navigation-items {
|
|
112
101
|
.link {
|
|
113
102
|
padding: 18px 12px;
|
|
114
103
|
|
|
@@ -7,7 +7,7 @@ export const header: string;
|
|
|
7
7
|
export const icon: string;
|
|
8
8
|
export const link: string;
|
|
9
9
|
export const minimized: string;
|
|
10
|
-
export const
|
|
10
|
+
export const navigationItems: string;
|
|
11
11
|
export const overflowPopover: string;
|
|
12
12
|
export const right: string;
|
|
13
13
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Popover } from '@servicetitan/design-system';
|
|
2
2
|
import { FC, useState } from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { HeaderNavigationItemData, NavLinkComponentProps } from '../../utils/navigation';
|
|
4
4
|
import { LogoCompanyTitle } from '../logo/logo-company-title';
|
|
5
5
|
import { LogoTitanText } from '../logo/logo-titan-text';
|
|
6
6
|
import { ProfileDropdown } from '../profile-dropdown/profile-dropdown';
|
|
@@ -20,8 +20,8 @@ export default {
|
|
|
20
20
|
|
|
21
21
|
const getItem = (
|
|
22
22
|
id: string,
|
|
23
|
-
data: Partial<
|
|
24
|
-
):
|
|
23
|
+
data: Partial<HeaderNavigationItemData>
|
|
24
|
+
): HeaderNavigationItemData => ({
|
|
25
25
|
id,
|
|
26
26
|
to: '/',
|
|
27
27
|
title: id[0].toUpperCase() + id.substring(1),
|
|
@@ -45,7 +45,7 @@ const items = {
|
|
|
45
45
|
reports: getItem('reports', { iconName: 'poll' }),
|
|
46
46
|
};
|
|
47
47
|
|
|
48
|
-
const NavLinkMock: FC<
|
|
48
|
+
const NavLinkMock: FC<NavLinkComponentProps> = props => (
|
|
49
49
|
<a
|
|
50
50
|
href={props.to}
|
|
51
51
|
target={props.target}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Icon, IconPropsStrict, Popover, Tag } from '@servicetitan/design-system';
|
|
1
|
+
import { Icon, IconPropsStrict, Popover, Tag, Tooltip } from '@servicetitan/design-system';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
3
|
import {
|
|
4
4
|
FC,
|
|
@@ -7,15 +7,18 @@ import {
|
|
|
7
7
|
ReactElement,
|
|
8
8
|
ReactNode,
|
|
9
9
|
useCallback,
|
|
10
|
-
useContext,
|
|
11
10
|
useEffect,
|
|
12
11
|
useLayoutEffect,
|
|
13
12
|
useMemo,
|
|
14
13
|
useRef,
|
|
15
14
|
useState,
|
|
16
15
|
} from 'react';
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
16
|
+
import { HeaderNavigationItemData, NavLinkComponentProps } from '../../utils/navigation';
|
|
17
|
+
import {
|
|
18
|
+
DefaultNavLinkComponent,
|
|
19
|
+
NavLinkContext,
|
|
20
|
+
useNavLink,
|
|
21
|
+
} from '../../utils/navigation-context';
|
|
19
22
|
|
|
20
23
|
import * as Styles from './header-navigation.module.less';
|
|
21
24
|
|
|
@@ -99,11 +102,11 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
|
|
|
99
102
|
target,
|
|
100
103
|
...rest
|
|
101
104
|
}) => {
|
|
102
|
-
const NavigationComponent =
|
|
105
|
+
const NavigationComponent = useNavLink();
|
|
103
106
|
|
|
104
107
|
return (
|
|
105
108
|
<NavigationComponent
|
|
106
|
-
data-cy={`nav-
|
|
109
|
+
data-cy={`nav-link-${id}`}
|
|
107
110
|
{...rest}
|
|
108
111
|
key={id}
|
|
109
112
|
to={to}
|
|
@@ -126,6 +129,56 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
|
|
|
126
129
|
);
|
|
127
130
|
};
|
|
128
131
|
|
|
132
|
+
interface HeaderNavigationItemPropsStrict extends HeaderNavigationItemData {
|
|
133
|
+
minimized: boolean;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
const HeaderNavigationItem: FC<HeaderNavigationItemPropsStrict> = ({
|
|
137
|
+
id,
|
|
138
|
+
to,
|
|
139
|
+
title,
|
|
140
|
+
hint,
|
|
141
|
+
counter,
|
|
142
|
+
className,
|
|
143
|
+
iconClassName,
|
|
144
|
+
iconComponent,
|
|
145
|
+
iconName,
|
|
146
|
+
isActive,
|
|
147
|
+
minimized,
|
|
148
|
+
}) => {
|
|
149
|
+
const NavigationComponent = useNavLink();
|
|
150
|
+
|
|
151
|
+
const trigger = (
|
|
152
|
+
<NavigationComponent
|
|
153
|
+
data-cy={`nav-item-${id}`}
|
|
154
|
+
key={id}
|
|
155
|
+
to={to}
|
|
156
|
+
title={hint}
|
|
157
|
+
className={classNames(Styles.link, className, {
|
|
158
|
+
[Styles.active]: isActive === true,
|
|
159
|
+
})}
|
|
160
|
+
isActive={typeof isActive === 'function' ? isActive : undefined}
|
|
161
|
+
activeClassName={Styles.active}
|
|
162
|
+
>
|
|
163
|
+
<HeaderNavigationItemContent
|
|
164
|
+
title={minimized ? undefined : title}
|
|
165
|
+
counter={counter}
|
|
166
|
+
iconComponent={iconComponent}
|
|
167
|
+
iconClassName={iconClassName}
|
|
168
|
+
iconName={iconName}
|
|
169
|
+
/>
|
|
170
|
+
</NavigationComponent>
|
|
171
|
+
);
|
|
172
|
+
|
|
173
|
+
return minimized && title ? (
|
|
174
|
+
<Tooltip el="div" direction="b" text={title}>
|
|
175
|
+
{trigger}
|
|
176
|
+
</Tooltip>
|
|
177
|
+
) : (
|
|
178
|
+
trigger
|
|
179
|
+
);
|
|
180
|
+
};
|
|
181
|
+
|
|
129
182
|
export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
|
|
130
183
|
id,
|
|
131
184
|
hint,
|
|
@@ -137,7 +190,7 @@ export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
|
|
|
137
190
|
}) => (
|
|
138
191
|
<div
|
|
139
192
|
key={id}
|
|
140
|
-
data-cy={`nav-
|
|
193
|
+
data-cy={`nav-trigger-${id}`}
|
|
141
194
|
{...rest}
|
|
142
195
|
title={hint}
|
|
143
196
|
className={classNames(Styles.link, 'cursor-pointer', className)}
|
|
@@ -165,7 +218,7 @@ export const HeaderNavigationTriggerCustom: FC<
|
|
|
165
218
|
);
|
|
166
219
|
|
|
167
220
|
const HeaderNavigationOverflow: FC<{
|
|
168
|
-
items:
|
|
221
|
+
items: HeaderNavigationItemData[];
|
|
169
222
|
}> = ({ items }) => {
|
|
170
223
|
const [isOpen, setIsOpen] = useState(false);
|
|
171
224
|
|
|
@@ -188,9 +241,9 @@ const HeaderNavigationOverflow: FC<{
|
|
|
188
241
|
popoverContentClassName={Styles.overflowPopover}
|
|
189
242
|
portal
|
|
190
243
|
>
|
|
191
|
-
<div onClick={() => setIsOpen(false)} className={Styles.
|
|
244
|
+
<div onClick={() => setIsOpen(false)} className={Styles.navigationItems}>
|
|
192
245
|
{items.map(item => (
|
|
193
|
-
<
|
|
246
|
+
<HeaderNavigationItem {...item} key={item.id} minimized={false} />
|
|
194
247
|
))}
|
|
195
248
|
</div>
|
|
196
249
|
</Popover>
|
|
@@ -204,9 +257,9 @@ export interface HeaderNavigationProps {
|
|
|
204
257
|
id?: string;
|
|
205
258
|
left?: ReactElement;
|
|
206
259
|
leftClassName?: string;
|
|
207
|
-
items?:
|
|
208
|
-
itemsOverflow?:
|
|
209
|
-
navigationComponent?: FC<
|
|
260
|
+
items?: HeaderNavigationItemData[];
|
|
261
|
+
itemsOverflow?: HeaderNavigationItemData[];
|
|
262
|
+
navigationComponent?: FC<NavLinkComponentProps>;
|
|
210
263
|
align?: 'left' | 'right' | 'center';
|
|
211
264
|
alignMinimized?: 'left' | 'right' | 'center';
|
|
212
265
|
}
|
|
@@ -230,7 +283,7 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
|
|
|
230
283
|
itemsOverflow,
|
|
231
284
|
left,
|
|
232
285
|
leftClassName,
|
|
233
|
-
navigationComponent =
|
|
286
|
+
navigationComponent = DefaultNavLinkComponent,
|
|
234
287
|
}) => {
|
|
235
288
|
const leftRef = useRef<HTMLDivElement>(null);
|
|
236
289
|
const rightRef = useRef<HTMLDivElement>(null);
|
|
@@ -308,15 +361,16 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
|
|
|
308
361
|
});
|
|
309
362
|
|
|
310
363
|
return (
|
|
311
|
-
<
|
|
364
|
+
<NavLinkContext.Provider value={navigationComponent}>
|
|
312
365
|
<div
|
|
313
366
|
className={classNames(Styles.header, className, {
|
|
314
367
|
[Styles.minimized]: minimized === MinimizedState.Minimized,
|
|
315
368
|
[Styles.calculating]: minimized === MinimizedState.Calculating,
|
|
316
369
|
})}
|
|
317
370
|
id={id}
|
|
371
|
+
data-cy="header-navigation"
|
|
318
372
|
>
|
|
319
|
-
<div className={leftClassName} ref={leftRef}>
|
|
373
|
+
<div className={leftClassName} ref={leftRef} data-cy="header-navigation-left">
|
|
320
374
|
{left}
|
|
321
375
|
</div>
|
|
322
376
|
<div
|
|
@@ -326,10 +380,15 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
|
|
|
326
380
|
navigationAlignClass,
|
|
327
381
|
Styles.center
|
|
328
382
|
)}
|
|
383
|
+
data-cy="header-navigation-items"
|
|
329
384
|
>
|
|
330
|
-
<div ref={navigationRef} className={classNames(Styles.
|
|
385
|
+
<div ref={navigationRef} className={classNames(Styles.navigationItems, 'd-if')}>
|
|
331
386
|
{items?.map(item => (
|
|
332
|
-
<
|
|
387
|
+
<HeaderNavigationItem
|
|
388
|
+
{...item}
|
|
389
|
+
minimized={minimized === MinimizedState.Minimized}
|
|
390
|
+
key={item.id}
|
|
391
|
+
/>
|
|
333
392
|
))}
|
|
334
393
|
{!!itemsOverflow?.length && (
|
|
335
394
|
<HeaderNavigationOverflow items={itemsOverflow} />
|
|
@@ -343,10 +402,11 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
|
|
|
343
402
|
contentClassName
|
|
344
403
|
)}
|
|
345
404
|
ref={rightRef}
|
|
405
|
+
data-cy="header-navigation-content"
|
|
346
406
|
>
|
|
347
407
|
{children}
|
|
348
408
|
</div>
|
|
349
409
|
</div>
|
|
350
|
-
</
|
|
410
|
+
</NavLinkContext.Provider>
|
|
351
411
|
);
|
|
352
412
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import classNames from 'classnames';
|
|
2
|
-
import { FC } from 'react';
|
|
2
|
+
import { FC, ReactNode } from 'react';
|
|
3
3
|
import { LogoTitan } from './logo-titan';
|
|
4
4
|
import * as Styles from './logo-titan-text.module.less';
|
|
5
5
|
|
|
@@ -8,23 +8,29 @@ export interface LogoTitanTextProps {
|
|
|
8
8
|
className?: string;
|
|
9
9
|
title: string;
|
|
10
10
|
description: string;
|
|
11
|
+
logoWrapper?: FC<{ className: string; children: ReactNode }>;
|
|
11
12
|
}
|
|
12
13
|
|
|
14
|
+
const DefaultLogoWrapper: FC<{ className: string; children: ReactNode }> = ({
|
|
15
|
+
className,
|
|
16
|
+
children,
|
|
17
|
+
}) => <div className={className}>{children}</div>;
|
|
13
18
|
export const LogoTitanText: FC<LogoTitanTextProps> = ({
|
|
14
19
|
className,
|
|
15
20
|
description,
|
|
21
|
+
logoWrapper: LogoWrapper = DefaultLogoWrapper,
|
|
16
22
|
mantleFill,
|
|
17
23
|
title,
|
|
18
24
|
}) => (
|
|
19
25
|
<div className={classNames('d-f', Styles.container, className)}>
|
|
20
|
-
<
|
|
26
|
+
<LogoWrapper
|
|
21
27
|
className={classNames(
|
|
22
28
|
'bg-white d-if justify-content-center align-items-center',
|
|
23
29
|
Styles.logoWrapper
|
|
24
30
|
)}
|
|
25
31
|
>
|
|
26
32
|
<LogoTitan width={40} height={40} mantleFill={mantleFill} />
|
|
27
|
-
</
|
|
33
|
+
</LogoWrapper>
|
|
28
34
|
<div className="d-if p-l-1 c-white flex-column justify-content-center align-items-start">
|
|
29
35
|
<span className={classNames(Styles.logoTextTitle, 'ff-display')}>{title}</span>
|
|
30
36
|
<span className={classNames(Styles.logoTextDescription, 'fs-1 t-truncate m-b-1')}>
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { FC, ReactNode } from 'react';
|
|
1
2
|
import { LogoCompanyTitle } from './logo-company-title';
|
|
2
3
|
import { LogoTitan } from './logo-titan';
|
|
3
4
|
import { LogoTitanText } from './logo-titan-text';
|
|
@@ -19,3 +20,25 @@ export const logoTitanText = () => (
|
|
|
19
20
|
description="tenant tenant tenant tenant tenant"
|
|
20
21
|
/>
|
|
21
22
|
);
|
|
23
|
+
|
|
24
|
+
const NavLinkMock: FC<{ className: string; children: ReactNode }> = ({ className, children }) => (
|
|
25
|
+
<a
|
|
26
|
+
href="/"
|
|
27
|
+
onClick={e => {
|
|
28
|
+
e.preventDefault();
|
|
29
|
+
}}
|
|
30
|
+
className={className}
|
|
31
|
+
>
|
|
32
|
+
{children}
|
|
33
|
+
</a>
|
|
34
|
+
);
|
|
35
|
+
|
|
36
|
+
export const logoTitanTextWithLink = () => (
|
|
37
|
+
<LogoTitanText
|
|
38
|
+
className="bg-neutral-300 border"
|
|
39
|
+
mantleFill="#2270EE"
|
|
40
|
+
title="Commercial"
|
|
41
|
+
description="tenant tenant tenant tenant tenant"
|
|
42
|
+
logoWrapper={NavLinkMock}
|
|
43
|
+
/>
|
|
44
|
+
);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Button } from '@servicetitan/design-system';
|
|
2
2
|
import { FC } from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { NavLinkComponentProps } from '../../utils/navigation';
|
|
4
4
|
import { HeaderNavigation } from '../header-navigation/header-navigation';
|
|
5
5
|
import { ProfileDropdown } from './profile-dropdown';
|
|
6
6
|
|
|
@@ -10,7 +10,7 @@ export default {
|
|
|
10
10
|
parameters: {},
|
|
11
11
|
};
|
|
12
12
|
|
|
13
|
-
const NavLinkMock: FC<
|
|
13
|
+
const NavLinkMock: FC<NavLinkComponentProps> = props => (
|
|
14
14
|
<a
|
|
15
15
|
href={props.to}
|
|
16
16
|
target={props.target}
|
|
@@ -7,12 +7,11 @@ import {
|
|
|
7
7
|
MouseEventHandler,
|
|
8
8
|
ReactNode,
|
|
9
9
|
useCallback,
|
|
10
|
-
useContext,
|
|
11
10
|
useEffect,
|
|
12
11
|
useState,
|
|
13
12
|
} from 'react';
|
|
14
13
|
|
|
15
|
-
import {
|
|
14
|
+
import { useNavLink } from '../../utils/navigation-context';
|
|
16
15
|
import * as Styles from './profile-dropdown.module.less';
|
|
17
16
|
import { ProfileLogo } from './profile-icon';
|
|
18
17
|
|
|
@@ -62,6 +61,7 @@ const ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps> = ({
|
|
|
62
61
|
className
|
|
63
62
|
)}
|
|
64
63
|
onClick={onClick}
|
|
64
|
+
data-cy="profile-dropdown-trigger"
|
|
65
65
|
>
|
|
66
66
|
{avatarSource && !avatarSourceError ? (
|
|
67
67
|
<img
|
|
@@ -173,7 +173,7 @@ export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
|
|
|
173
173
|
onClick,
|
|
174
174
|
...rest
|
|
175
175
|
}: ProfileDropdownLinkProps) => {
|
|
176
|
-
const NavigationComponent =
|
|
176
|
+
const NavigationComponent = useNavLink();
|
|
177
177
|
|
|
178
178
|
const clickHandler = (e: MouseEvent<any>) => {
|
|
179
179
|
e.preventDefault();
|
|
@@ -211,7 +211,7 @@ export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
|
|
|
211
211
|
);
|
|
212
212
|
};
|
|
213
213
|
|
|
214
|
-
export interface
|
|
214
|
+
export interface ProfileDropdownPropsStrict {
|
|
215
215
|
children?: ReactNode;
|
|
216
216
|
trigger?: Omit<ProfileDropdownTriggerProps, 'onClick'>;
|
|
217
217
|
hintPopup?: {
|
|
@@ -225,6 +225,10 @@ export interface ProfileDropdownProps {
|
|
|
225
225
|
onOpen?(): void;
|
|
226
226
|
}
|
|
227
227
|
|
|
228
|
+
export interface ProfileDropdownProps extends ProfileDropdownPropsStrict {
|
|
229
|
+
[key: string]: any;
|
|
230
|
+
}
|
|
231
|
+
|
|
228
232
|
export interface ProfileDropdownType extends FC<ProfileDropdownProps> {
|
|
229
233
|
Divider: typeof ProfileDropdownDivider;
|
|
230
234
|
Link: typeof ProfileDropdownLink;
|
|
@@ -273,7 +277,7 @@ export const ProfileDropdown: ProfileDropdownType = (({
|
|
|
273
277
|
);
|
|
274
278
|
|
|
275
279
|
return (
|
|
276
|
-
<div className="position-relative">
|
|
280
|
+
<div className="position-relative" data-cy="profile-dropdown">
|
|
277
281
|
{!!hintPopup && hintShown && HintComponent ? (
|
|
278
282
|
<Popover
|
|
279
283
|
direction="bl"
|
|
@@ -300,7 +304,11 @@ export const ProfileDropdown: ProfileDropdownType = (({
|
|
|
300
304
|
Styles.dropdownContentBottomLeft
|
|
301
305
|
)}
|
|
302
306
|
>
|
|
303
|
-
<div
|
|
307
|
+
<div
|
|
308
|
+
className={Styles.dropdownContentWrapper}
|
|
309
|
+
onClick={handleClose}
|
|
310
|
+
data-cy="profile-dropdown-content"
|
|
311
|
+
>
|
|
304
312
|
{children}
|
|
305
313
|
</div>
|
|
306
314
|
</Popover>
|
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
import { FC, createContext } from 'react';
|
|
1
|
+
import { FC, createContext, useContext } from 'react';
|
|
2
2
|
import { NavLink } from 'react-router-dom';
|
|
3
|
-
import {
|
|
3
|
+
import { NavLinkComponentProps } from './navigation';
|
|
4
4
|
|
|
5
|
-
export const
|
|
5
|
+
export const DefaultNavLinkComponent: FC<NavLinkComponentProps> = props => (
|
|
6
6
|
<NavLink
|
|
7
7
|
{...props}
|
|
8
8
|
isActive={props.isActive && ((_, { pathname }) => props.isActive!(pathname))}
|
|
9
9
|
/>
|
|
10
10
|
);
|
|
11
11
|
|
|
12
|
-
export const
|
|
12
|
+
export const NavLinkContext = createContext(DefaultNavLinkComponent);
|
|
13
|
+
export const useNavLink = () => useContext(NavLinkContext);
|
package/src/utils/navigation.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { IconPropsStrict } from '@servicetitan/design-system';
|
|
2
2
|
import { FC, HTMLAttributeAnchorTarget, ReactNode } from 'react';
|
|
3
3
|
|
|
4
|
-
export interface
|
|
4
|
+
export interface HeaderNavigationItemData {
|
|
5
5
|
/** link id */
|
|
6
6
|
id: string;
|
|
7
7
|
|
|
@@ -14,7 +14,7 @@ export interface HeaderNavigationLinkData {
|
|
|
14
14
|
/** link description */
|
|
15
15
|
hint: string;
|
|
16
16
|
|
|
17
|
-
/** callback to return active state. By default it compares link href with current pathname */
|
|
17
|
+
/** callback to return active state. By default, it compares link href with current pathname */
|
|
18
18
|
isActive?: boolean | ((pathname: string) => boolean);
|
|
19
19
|
|
|
20
20
|
/** flag if the link is not shown (based on FG and/or user permissions) */
|
|
@@ -36,7 +36,7 @@ export interface HeaderNavigationLinkData {
|
|
|
36
36
|
className?: string;
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
-
export interface
|
|
39
|
+
export interface NavLinkComponentPropsStrict {
|
|
40
40
|
to: string;
|
|
41
41
|
title?: string;
|
|
42
42
|
className?: string;
|
|
@@ -46,6 +46,6 @@ export interface HeaderNavigationComponentPropsStrict {
|
|
|
46
46
|
target?: HTMLAttributeAnchorTarget;
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
-
export interface
|
|
49
|
+
export interface NavLinkComponentProps extends NavLinkComponentPropsStrict {
|
|
50
50
|
[key: string]: any;
|
|
51
51
|
}
|