@servicetitan/navigation 1.4.7 → 1.4.8
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 +7 -1
- package/dist/components/header-navigation/header-navigation.d.ts.map +1 -1
- package/dist/components/header-navigation/header-navigation.js +10 -9
- package/dist/components/header-navigation/header-navigation.js.map +1 -1
- package/dist/components/header-navigation/header-navigation.module.less +57 -50
- package/dist/components/header-navigation/header-navigation.stories.d.ts.map +1 -1
- package/dist/components/header-navigation/header-navigation.stories.js +4 -1
- package/dist/components/header-navigation/header-navigation.stories.js.map +1 -1
- package/package.json +2 -2
- package/src/components/header-navigation/header-navigation.module.less +57 -50
- package/src/components/header-navigation/header-navigation.module.less.d.ts +1 -0
- package/src/components/header-navigation/header-navigation.stories.tsx +10 -1
- package/src/components/header-navigation/header-navigation.tsx +43 -14
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { IconPropsStrict } from '@servicetitan/design-system';
|
|
1
|
+
import { IconPropsStrict, PopoverPropsStrict } from '@servicetitan/design-system';
|
|
2
2
|
import { FC, HTMLAttributeAnchorTarget, ReactElement, ReactNode } from 'react';
|
|
3
3
|
import { HeaderNavigationItemData, NavLinkComponentProps } from '../../utils/navigation';
|
|
4
4
|
interface HeaderNavigationItemContentPropsStrict {
|
|
@@ -30,6 +30,11 @@ export declare const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps>;
|
|
|
30
30
|
export declare const HeaderNavigationTriggerCustom: FC<HeaderNavigationTriggerProps & {
|
|
31
31
|
children: ReactNode;
|
|
32
32
|
}>;
|
|
33
|
+
export interface HeaderNavigationOverflowProps {
|
|
34
|
+
direction: PopoverPropsStrict['direction'];
|
|
35
|
+
width: PopoverPropsStrict['width'];
|
|
36
|
+
portal?: boolean;
|
|
37
|
+
}
|
|
33
38
|
export interface HeaderNavigationProps {
|
|
34
39
|
children?: ReactNode;
|
|
35
40
|
className?: string;
|
|
@@ -43,6 +48,7 @@ export interface HeaderNavigationProps {
|
|
|
43
48
|
navigationComponent?: FC<NavLinkComponentProps>;
|
|
44
49
|
align?: 'left' | 'right' | 'center';
|
|
45
50
|
alignMinimized?: 'left' | 'right' | 'center';
|
|
51
|
+
overflow?: HeaderNavigationOverflowProps;
|
|
46
52
|
}
|
|
47
53
|
export declare const HeaderNavigation: FC<HeaderNavigationProps>;
|
|
48
54
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"header-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,eAAe,EAEf,kBAAkB,EAGrB,MAAM,6BAA6B,CAAC;AAErC,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;AAsDF,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;AAEF,MAAM,WAAW,6BAA6B;IAC1C,SAAS,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC3C,KAAK,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACnC,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB;AA8CD,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,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,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;IAC7C,QAAQ,CAAC,EAAE,6BAA6B,CAAC;CAC5C;AAUD,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAkJtD,CAAC"}
|
|
@@ -11,7 +11,7 @@ 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, Tooltip } from '@servicetitan/design-system';
|
|
14
|
+
import { Icon, Popover, Tag, Tooltip, } from '@servicetitan/design-system';
|
|
15
15
|
import classNames from 'classnames';
|
|
16
16
|
import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
|
|
17
17
|
import { DefaultNavLinkComponent, NavLinkContext, useNavLink, } from '../../utils/navigation-context';
|
|
@@ -26,29 +26,30 @@ export const HeaderNavigationItemContent = ({ title, counter, iconClassName, ico
|
|
|
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
28
|
const NavigationComponent = useNavLink();
|
|
29
|
-
return (_createElement(NavigationComponent, Object.assign({ "data-cy": `
|
|
29
|
+
return (_createElement(NavigationComponent, Object.assign({ "data-cy": `navigation-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, }) => {
|
|
34
|
+
const HeaderNavigationItem = ({ cyPrefix, id, to, title, hint, counter, className, iconClassName, iconComponent, iconName, isActive, minimized, }) => {
|
|
35
35
|
const NavigationComponent = useNavLink();
|
|
36
|
-
const trigger = (_jsx(NavigationComponent, Object.assign({ "data-cy":
|
|
36
|
+
const trigger = (_jsx(NavigationComponent, Object.assign({ "data-cy": `${cyPrefix}-${id}`, to: to, title: hint, className: classNames(Styles.link, className, {
|
|
37
37
|
[Styles.active]: isActive === true,
|
|
38
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
39
|
return minimized && title ? (_jsx(Tooltip, Object.assign({ el: "div", direction: "b", text: title }, { children: trigger }))) : (trigger);
|
|
40
40
|
};
|
|
41
41
|
export const HeaderNavigationTrigger = (_a) => {
|
|
42
42
|
var { id, hint, className, iconClassName, iconComponent, iconName } = _a, rest = __rest(_a, ["id", "hint", "className", "iconClassName", "iconComponent", "iconName"]);
|
|
43
|
-
return (_jsx("div", Object.assign({ "data-cy": `
|
|
43
|
+
return (_jsx("div", Object.assign({ "data-cy": `navigation-trigger-${id}` }, rest, { title: hint, className: classNames(Styles.link, 'cursor-pointer', className) }, { children: _jsx(HeaderNavigationItemContent, { iconComponent: iconComponent, iconClassName: iconClassName, iconName: iconName }) }), id));
|
|
44
44
|
};
|
|
45
45
|
export const HeaderNavigationTriggerCustom = (_a) => {
|
|
46
46
|
var { children, id, hint, className, iconClassName, iconComponent, iconName } = _a, rest = __rest(_a, ["children", "id", "hint", "className", "iconClassName", "iconComponent", "iconName"]);
|
|
47
47
|
return (_jsx("div", Object.assign({ "data-cy": `nav-item-${id}` }, rest, { title: hint, className: classNames(Styles.link, 'cursor-pointer', className) }, { children: children }), id));
|
|
48
48
|
};
|
|
49
|
-
const HeaderNavigationOverflow = ({ items }) => {
|
|
49
|
+
const HeaderNavigationOverflow = ({ items, overflow }) => {
|
|
50
|
+
var _a, _b;
|
|
50
51
|
const [isOpen, setIsOpen] = useState(false);
|
|
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:
|
|
52
|
+
return (_jsx(Popover, Object.assign({ open: isOpen, trigger: _jsx(Icon, { name: "more_vert", size: "24px", className: "c-pointer", onClick: () => setIsOpen(true), color: "white", "data-cy": "navigation-overflow-trigger" }), direction: (_a = overflow === null || overflow === void 0 ? void 0 : overflow.direction) !== null && _a !== void 0 ? _a : 'bl', width: (_b = overflow === null || overflow === void 0 ? void 0 : overflow.width) !== null && _b !== void 0 ? _b : 'xs', portal: overflow === null || overflow === void 0 ? void 0 : overflow.portal, onClickOutside: () => setIsOpen(false), wrapperClassName: "d-if-i align-items-center", popoverContentClassName: Styles.overflowPopover }, { children: _jsx("div", Object.assign({ onClick: () => setIsOpen(false), className: Styles.navigationOverflow, "data-cy": "navigation-overflow-content" }, { children: items.map(item => (_createElement(HeaderNavigationItem, Object.assign({}, item, { key: item.id, minimized: false, cyPrefix: "navigation-overflow-item" })))) })) })));
|
|
52
53
|
};
|
|
53
54
|
const shortItemWidth = 44;
|
|
54
55
|
var MinimizedState;
|
|
@@ -57,7 +58,7 @@ var MinimizedState;
|
|
|
57
58
|
MinimizedState[MinimizedState["Minimized"] = 1] = "Minimized";
|
|
58
59
|
MinimizedState[MinimizedState["Full"] = 2] = "Full";
|
|
59
60
|
})(MinimizedState || (MinimizedState = {}));
|
|
60
|
-
export const HeaderNavigation = ({ align, alignMinimized, children, className, contentClassName, id, items, itemsOverflow, left, leftClassName, minWidth = 800, navigationComponent = DefaultNavLinkComponent, }) => {
|
|
61
|
+
export const HeaderNavigation = ({ align, alignMinimized, children, className, contentClassName, id, items, itemsOverflow, left, leftClassName, minWidth = 800, navigationComponent = DefaultNavLinkComponent, overflow, }) => {
|
|
61
62
|
const leftRef = useRef(null);
|
|
62
63
|
const rightRef = useRef(null);
|
|
63
64
|
const centerRef = useRef(null);
|
|
@@ -129,6 +130,6 @@ export const HeaderNavigation = ({ align, alignMinimized, children, className, c
|
|
|
129
130
|
return (_jsx(NavLinkContext.Provider, Object.assign({ value: navigationComponent }, { children: _jsxs("div", Object.assign({ className: classNames(Styles.header, className, {
|
|
130
131
|
[Styles.minimized]: minimized === MinimizedState.Minimized,
|
|
131
132
|
[Styles.calculating]: minimized === MinimizedState.Calculating,
|
|
132
|
-
}), style: { minWidth: `${minWidth}px` }, id: id, "data-cy": "header-navigation" }, { children: [_jsx("div", Object.assign({ className: leftClassName, ref: leftRef, "data-cy": "
|
|
133
|
+
}), style: { minWidth: `${minWidth}px` }, id: id, "data-cy": "header-navigation" }, { children: [_jsx("div", Object.assign({ className: leftClassName, ref: leftRef, "data-cy": "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": "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, cyPrefix: "navigation-item", key: item.id })))), !!(itemsOverflow === null || itemsOverflow === void 0 ? void 0 : itemsOverflow.length) && (_jsx(HeaderNavigationOverflow, { items: itemsOverflow, overflow: overflow }))] })) })), _jsx("div", Object.assign({ className: classNames('d-f flex-row justify-content-end align-items-center', Styles.right, contentClassName), ref: rightRef, "data-cy": "navigation-content" }, { children: children }))] })) })));
|
|
133
134
|
};
|
|
134
135
|
//# 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,
|
|
1
|
+
{"version":3,"file":"header-navigation.js","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.tsx"],"names":[],"mappings":"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"}
|
|
@@ -31,25 +31,37 @@
|
|
|
31
31
|
|
|
32
32
|
.link {
|
|
33
33
|
max-height: 56px;
|
|
34
|
-
|
|
35
|
-
color: @color-white;
|
|
36
34
|
font-family: @base-font-family;
|
|
37
|
-
|
|
38
35
|
position: relative;
|
|
39
36
|
|
|
40
|
-
ins {
|
|
41
|
-
margin-left: @spacing-half;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
37
|
.counter {
|
|
45
38
|
color: @color-white;
|
|
46
|
-
position: absolute;
|
|
47
|
-
top: @spacing-1;
|
|
48
|
-
right: -@spacing-half;
|
|
49
|
-
|
|
50
39
|
font-size: @typescale-0;
|
|
51
40
|
font-weight: @font-weight-semibold;
|
|
52
41
|
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.navigation-items > .link {
|
|
45
|
+
// styles specific to main nav links
|
|
46
|
+
padding: 18px 12px;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.navigation-items .link {
|
|
50
|
+
// styles specific to main nav links and overflow nav links
|
|
51
|
+
i {
|
|
52
|
+
height: 20px;
|
|
53
|
+
width: 20px;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
ins {
|
|
57
|
+
margin-left: @spacing-half;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.navigation-items > .link,
|
|
62
|
+
.right .link {
|
|
63
|
+
// styles specific to main nav links and extra nav links
|
|
64
|
+
color: @color-white;
|
|
53
65
|
|
|
54
66
|
&.active {
|
|
55
67
|
color: @color-blue-200;
|
|
@@ -58,6 +70,37 @@
|
|
|
58
70
|
&:hover:not(.active) {
|
|
59
71
|
opacity: 0.7;
|
|
60
72
|
}
|
|
73
|
+
|
|
74
|
+
.counter {
|
|
75
|
+
position: absolute;
|
|
76
|
+
top: @spacing-1;
|
|
77
|
+
right: -@spacing-1;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.navigation-overflow .link {
|
|
82
|
+
// styles specific to overflow links
|
|
83
|
+
display: inline-flex;
|
|
84
|
+
color: @color-black;
|
|
85
|
+
padding: @spacing-1 12px;
|
|
86
|
+
|
|
87
|
+
&.active:not(:hover) {
|
|
88
|
+
color: @color-blue-500;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
&:hover {
|
|
92
|
+
background-color: @color-blue-500;
|
|
93
|
+
color: @color-white;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
ins {
|
|
97
|
+
margin-left: @spacing-1;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.counter {
|
|
101
|
+
margin-left: @spacing-half;
|
|
102
|
+
margin-top: -@spacing-1;
|
|
103
|
+
}
|
|
61
104
|
}
|
|
62
105
|
|
|
63
106
|
.right {
|
|
@@ -94,47 +137,11 @@
|
|
|
94
137
|
}
|
|
95
138
|
}
|
|
96
139
|
|
|
97
|
-
.navigation-items {
|
|
98
|
-
.link {
|
|
99
|
-
padding: 18px 12px;
|
|
100
|
-
|
|
101
|
-
i {
|
|
102
|
-
height: 20px;
|
|
103
|
-
width: 20px;
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
|
|
108
140
|
.overflow-popover {
|
|
109
141
|
padding: @spacing-1 @spacing-0 !important;
|
|
110
142
|
|
|
111
|
-
.
|
|
112
|
-
display:
|
|
113
|
-
|
|
114
|
-
padding: @spacing-1 12px;
|
|
115
|
-
position: relative;
|
|
116
|
-
|
|
117
|
-
&.active {
|
|
118
|
-
color: @color-blue-500;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
&:hover {
|
|
122
|
-
background-color: @color-blue-500;
|
|
123
|
-
color: @color-white;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
ins {
|
|
127
|
-
margin-left: @spacing-1;
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
.counter {
|
|
131
|
-
color: @color-white;
|
|
132
|
-
position: absolute;
|
|
133
|
-
top: @spacing-1;
|
|
134
|
-
margin-left: @spacing-half;
|
|
135
|
-
|
|
136
|
-
font-size: @typescale-0;
|
|
137
|
-
font-weight: @font-weight-semibold;
|
|
138
|
-
}
|
|
143
|
+
.navigation-overflow {
|
|
144
|
+
display: flex;
|
|
145
|
+
flex-direction: column;
|
|
139
146
|
}
|
|
140
147
|
}
|
|
@@ -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;;;;;;AAarC,wBAIE;
|
|
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;;;;;;AAarC,wBAIE;AAkDF,eAAO,MAAM,iBAAiB,+CAa7B,CAAC;AAEF,eAAO,MAAM,uBAAuB,+CAqBnC,CAAC;AA6BF,eAAO,MAAM,mBAAmB,+CA+D/B,CAAC"}
|
|
@@ -11,6 +11,7 @@ export default {
|
|
|
11
11
|
parameters: {},
|
|
12
12
|
};
|
|
13
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
|
+
const InventoryIcon = () => (_jsxs("svg", Object.assign({ width: "20", xmlns: "http://www.w3.org/2000/svg", viewBox: "-293 385 24 24", fill: "currentColor" }, { children: [_jsx("polyline", { points: "-288,400.9 -282,404.3 -282,397.6 -288,394.2 -288,400.9 " }), _jsx("path", { d: "M-272,401.5c0,0.4-0.2,0.7-0.5,0.9l-7.9,4.4c-0.2,0.1-0.4,0.2-0.6,0.2s-0.4-0.1-0.6-0.2l-7.9-4.4c-0.3-0.2-0.5-0.5-0.5-0.9v-9c0-0.4,0.2-0.7,0.5-0.9l7.9-4.4c0.2-0.1,0.4-0.2,0.6-0.2s0.4,0.1,0.6,0.2l7.9,4.4c0.3,0.2,0.5,0.5,0.5,0.9V401.5 M-287,392.5 l6,3.4l5.9-3.3l-5.9-3.4L-287,392.5 M-274,400.9v-6.7l-6,3.4v6.7L-274,400.9z" })] })));
|
|
14
15
|
const items = {
|
|
15
16
|
calendar: getItem('calendar', { iconName: 'event' }),
|
|
16
17
|
calls: getItem('calls', { iconName: 'local_phone', isActive: true, counter: 12 }),
|
|
@@ -19,6 +20,7 @@ const items = {
|
|
|
19
20
|
fleet: getItem('fleet', { iconName: 'fleet-pro', title: 'Fleet Pro' }),
|
|
20
21
|
followUps: getItem('followUps', { iconName: 'flag', title: 'Follow Ups' }),
|
|
21
22
|
inventory: getItem('inventory', { iconName: 'toys' }),
|
|
23
|
+
purchasing: getItem('purchasing', { iconComponent: InventoryIcon }),
|
|
22
24
|
accounting: getItem('accounting', { iconName: 'assignment' }),
|
|
23
25
|
marketing: getItem('marketing', { iconName: 'bullhorn' }),
|
|
24
26
|
priceBook: getItem('priceBook', { iconName: 'book' }),
|
|
@@ -43,8 +45,9 @@ export const withLogoTextAndOverflow = () => (_jsx(HeaderNavigation, { left: _js
|
|
|
43
45
|
items.calls,
|
|
44
46
|
items.accounting,
|
|
45
47
|
items.dispatch,
|
|
48
|
+
items.purchasing,
|
|
46
49
|
items.fleet,
|
|
47
|
-
], itemsOverflow: [items.calls, items.accounting, items.dispatch], navigationComponent: NavLinkMock }));
|
|
50
|
+
], itemsOverflow: [items.calls, items.accounting, items.purchasing, items.dispatch], navigationComponent: NavLinkMock }));
|
|
48
51
|
const HelpCenterButton = () => {
|
|
49
52
|
const [open, setOpen] = useState(false);
|
|
50
53
|
return (_jsx(Popover, Object.assign({ onClickOutside: () => setOpen(false), open: open, direction: "bl", width: "xs", trigger: _jsx("div", Object.assign({ onClick: () => setOpen(true) }, { children: _jsx(HeaderNavigationItemContent, { iconName: "help_outline" }) })), portal: true }, { children: "help center" })));
|
|
@@ -1 +1 @@
|
|
|
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
|
+
{"version":3,"file":"header-navigation.stories.js","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.stories.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@servicetitan/navigation",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.8",
|
|
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": "d870974110922028f755add508282a9893e6d7fc"
|
|
47
47
|
}
|
|
@@ -31,25 +31,37 @@
|
|
|
31
31
|
|
|
32
32
|
.link {
|
|
33
33
|
max-height: 56px;
|
|
34
|
-
|
|
35
|
-
color: @color-white;
|
|
36
34
|
font-family: @base-font-family;
|
|
37
|
-
|
|
38
35
|
position: relative;
|
|
39
36
|
|
|
40
|
-
ins {
|
|
41
|
-
margin-left: @spacing-half;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
37
|
.counter {
|
|
45
38
|
color: @color-white;
|
|
46
|
-
position: absolute;
|
|
47
|
-
top: @spacing-1;
|
|
48
|
-
right: -@spacing-half;
|
|
49
|
-
|
|
50
39
|
font-size: @typescale-0;
|
|
51
40
|
font-weight: @font-weight-semibold;
|
|
52
41
|
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.navigation-items > .link {
|
|
45
|
+
// styles specific to main nav links
|
|
46
|
+
padding: 18px 12px;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.navigation-items .link {
|
|
50
|
+
// styles specific to main nav links and overflow nav links
|
|
51
|
+
i {
|
|
52
|
+
height: 20px;
|
|
53
|
+
width: 20px;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
ins {
|
|
57
|
+
margin-left: @spacing-half;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.navigation-items > .link,
|
|
62
|
+
.right .link {
|
|
63
|
+
// styles specific to main nav links and extra nav links
|
|
64
|
+
color: @color-white;
|
|
53
65
|
|
|
54
66
|
&.active {
|
|
55
67
|
color: @color-blue-200;
|
|
@@ -58,6 +70,37 @@
|
|
|
58
70
|
&:hover:not(.active) {
|
|
59
71
|
opacity: 0.7;
|
|
60
72
|
}
|
|
73
|
+
|
|
74
|
+
.counter {
|
|
75
|
+
position: absolute;
|
|
76
|
+
top: @spacing-1;
|
|
77
|
+
right: -@spacing-1;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.navigation-overflow .link {
|
|
82
|
+
// styles specific to overflow links
|
|
83
|
+
display: inline-flex;
|
|
84
|
+
color: @color-black;
|
|
85
|
+
padding: @spacing-1 12px;
|
|
86
|
+
|
|
87
|
+
&.active:not(:hover) {
|
|
88
|
+
color: @color-blue-500;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
&:hover {
|
|
92
|
+
background-color: @color-blue-500;
|
|
93
|
+
color: @color-white;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
ins {
|
|
97
|
+
margin-left: @spacing-1;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.counter {
|
|
101
|
+
margin-left: @spacing-half;
|
|
102
|
+
margin-top: -@spacing-1;
|
|
103
|
+
}
|
|
61
104
|
}
|
|
62
105
|
|
|
63
106
|
.right {
|
|
@@ -94,47 +137,11 @@
|
|
|
94
137
|
}
|
|
95
138
|
}
|
|
96
139
|
|
|
97
|
-
.navigation-items {
|
|
98
|
-
.link {
|
|
99
|
-
padding: 18px 12px;
|
|
100
|
-
|
|
101
|
-
i {
|
|
102
|
-
height: 20px;
|
|
103
|
-
width: 20px;
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
|
|
108
140
|
.overflow-popover {
|
|
109
141
|
padding: @spacing-1 @spacing-0 !important;
|
|
110
142
|
|
|
111
|
-
.
|
|
112
|
-
display:
|
|
113
|
-
|
|
114
|
-
padding: @spacing-1 12px;
|
|
115
|
-
position: relative;
|
|
116
|
-
|
|
117
|
-
&.active {
|
|
118
|
-
color: @color-blue-500;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
&:hover {
|
|
122
|
-
background-color: @color-blue-500;
|
|
123
|
-
color: @color-white;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
ins {
|
|
127
|
-
margin-left: @spacing-1;
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
.counter {
|
|
131
|
-
color: @color-white;
|
|
132
|
-
position: absolute;
|
|
133
|
-
top: @spacing-1;
|
|
134
|
-
margin-left: @spacing-half;
|
|
135
|
-
|
|
136
|
-
font-size: @typescale-0;
|
|
137
|
-
font-weight: @font-weight-semibold;
|
|
138
|
-
}
|
|
143
|
+
.navigation-overflow {
|
|
144
|
+
display: flex;
|
|
145
|
+
flex-direction: column;
|
|
139
146
|
}
|
|
140
147
|
}
|
|
@@ -29,6 +29,13 @@ const getItem = (
|
|
|
29
29
|
...(data ?? {}),
|
|
30
30
|
});
|
|
31
31
|
|
|
32
|
+
const InventoryIcon = () => (
|
|
33
|
+
<svg width="20" xmlns="http://www.w3.org/2000/svg" viewBox="-293 385 24 24" fill="currentColor">
|
|
34
|
+
<polyline points="-288,400.9 -282,404.3 -282,397.6 -288,394.2 -288,400.9 " />
|
|
35
|
+
<path d="M-272,401.5c0,0.4-0.2,0.7-0.5,0.9l-7.9,4.4c-0.2,0.1-0.4,0.2-0.6,0.2s-0.4-0.1-0.6-0.2l-7.9-4.4c-0.3-0.2-0.5-0.5-0.5-0.9v-9c0-0.4,0.2-0.7,0.5-0.9l7.9-4.4c0.2-0.1,0.4-0.2,0.6-0.2s0.4,0.1,0.6,0.2l7.9,4.4c0.3,0.2,0.5,0.5,0.5,0.9V401.5 M-287,392.5 l6,3.4l5.9-3.3l-5.9-3.4L-287,392.5 M-274,400.9v-6.7l-6,3.4v6.7L-274,400.9z" />
|
|
36
|
+
</svg>
|
|
37
|
+
);
|
|
38
|
+
|
|
32
39
|
const items = {
|
|
33
40
|
calendar: getItem('calendar', { iconName: 'event' }),
|
|
34
41
|
calls: getItem('calls', { iconName: 'local_phone', isActive: true, counter: 12 }),
|
|
@@ -37,6 +44,7 @@ const items = {
|
|
|
37
44
|
fleet: getItem('fleet', { iconName: 'fleet-pro', title: 'Fleet Pro' }),
|
|
38
45
|
followUps: getItem('followUps', { iconName: 'flag', title: 'Follow Ups' }),
|
|
39
46
|
inventory: getItem('inventory', { iconName: 'toys' }),
|
|
47
|
+
purchasing: getItem('purchasing', { iconComponent: InventoryIcon }),
|
|
40
48
|
accounting: getItem('accounting', { iconName: 'assignment' }),
|
|
41
49
|
marketing: getItem('marketing', { iconName: 'bullhorn' }),
|
|
42
50
|
priceBook: getItem('priceBook', { iconName: 'book' }),
|
|
@@ -88,9 +96,10 @@ export const withLogoTextAndOverflow = () => (
|
|
|
88
96
|
items.calls,
|
|
89
97
|
items.accounting,
|
|
90
98
|
items.dispatch,
|
|
99
|
+
items.purchasing,
|
|
91
100
|
items.fleet,
|
|
92
101
|
]}
|
|
93
|
-
itemsOverflow={[items.calls, items.accounting, items.dispatch]}
|
|
102
|
+
itemsOverflow={[items.calls, items.accounting, items.purchasing, items.dispatch]}
|
|
94
103
|
navigationComponent={NavLinkMock}
|
|
95
104
|
/>
|
|
96
105
|
);
|
|
@@ -1,4 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {
|
|
2
|
+
Icon,
|
|
3
|
+
IconPropsStrict,
|
|
4
|
+
Popover,
|
|
5
|
+
PopoverPropsStrict,
|
|
6
|
+
Tag,
|
|
7
|
+
Tooltip,
|
|
8
|
+
} from '@servicetitan/design-system';
|
|
2
9
|
import classNames from 'classnames';
|
|
3
10
|
import {
|
|
4
11
|
FC,
|
|
@@ -106,7 +113,7 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
|
|
|
106
113
|
|
|
107
114
|
return (
|
|
108
115
|
<NavigationComponent
|
|
109
|
-
data-cy={`
|
|
116
|
+
data-cy={`navigation-link-${id}`}
|
|
110
117
|
{...rest}
|
|
111
118
|
key={id}
|
|
112
119
|
to={to}
|
|
@@ -131,9 +138,11 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
|
|
|
131
138
|
|
|
132
139
|
interface HeaderNavigationItemPropsStrict extends HeaderNavigationItemData {
|
|
133
140
|
minimized: boolean;
|
|
141
|
+
cyPrefix: string;
|
|
134
142
|
}
|
|
135
143
|
|
|
136
144
|
const HeaderNavigationItem: FC<HeaderNavigationItemPropsStrict> = ({
|
|
145
|
+
cyPrefix,
|
|
137
146
|
id,
|
|
138
147
|
to,
|
|
139
148
|
title,
|
|
@@ -150,7 +159,7 @@ const HeaderNavigationItem: FC<HeaderNavigationItemPropsStrict> = ({
|
|
|
150
159
|
|
|
151
160
|
const trigger = (
|
|
152
161
|
<NavigationComponent
|
|
153
|
-
data-cy={
|
|
162
|
+
data-cy={`${cyPrefix}-${id}`}
|
|
154
163
|
key={id}
|
|
155
164
|
to={to}
|
|
156
165
|
title={hint}
|
|
@@ -190,7 +199,7 @@ export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
|
|
|
190
199
|
}) => (
|
|
191
200
|
<div
|
|
192
201
|
key={id}
|
|
193
|
-
data-cy={`
|
|
202
|
+
data-cy={`navigation-trigger-${id}`}
|
|
194
203
|
{...rest}
|
|
195
204
|
title={hint}
|
|
196
205
|
className={classNames(Styles.link, 'cursor-pointer', className)}
|
|
@@ -217,9 +226,16 @@ export const HeaderNavigationTriggerCustom: FC<
|
|
|
217
226
|
</div>
|
|
218
227
|
);
|
|
219
228
|
|
|
229
|
+
export interface HeaderNavigationOverflowProps {
|
|
230
|
+
direction: PopoverPropsStrict['direction'];
|
|
231
|
+
width: PopoverPropsStrict['width'];
|
|
232
|
+
portal?: boolean;
|
|
233
|
+
}
|
|
234
|
+
|
|
220
235
|
const HeaderNavigationOverflow: FC<{
|
|
221
236
|
items: HeaderNavigationItemData[];
|
|
222
|
-
|
|
237
|
+
overflow?: HeaderNavigationOverflowProps;
|
|
238
|
+
}> = ({ items, overflow }) => {
|
|
223
239
|
const [isOpen, setIsOpen] = useState(false);
|
|
224
240
|
|
|
225
241
|
return (
|
|
@@ -232,18 +248,28 @@ const HeaderNavigationOverflow: FC<{
|
|
|
232
248
|
className="c-pointer"
|
|
233
249
|
onClick={() => setIsOpen(true)}
|
|
234
250
|
color="white"
|
|
251
|
+
data-cy="navigation-overflow-trigger"
|
|
235
252
|
/>
|
|
236
253
|
}
|
|
237
|
-
direction=
|
|
238
|
-
width=
|
|
254
|
+
direction={overflow?.direction ?? 'bl'}
|
|
255
|
+
width={overflow?.width ?? 'xs'}
|
|
256
|
+
portal={overflow?.portal}
|
|
239
257
|
onClickOutside={() => setIsOpen(false)}
|
|
240
258
|
wrapperClassName="d-if-i align-items-center"
|
|
241
259
|
popoverContentClassName={Styles.overflowPopover}
|
|
242
|
-
portal
|
|
243
260
|
>
|
|
244
|
-
<div
|
|
261
|
+
<div
|
|
262
|
+
onClick={() => setIsOpen(false)}
|
|
263
|
+
className={Styles.navigationOverflow}
|
|
264
|
+
data-cy="navigation-overflow-content"
|
|
265
|
+
>
|
|
245
266
|
{items.map(item => (
|
|
246
|
-
<HeaderNavigationItem
|
|
267
|
+
<HeaderNavigationItem
|
|
268
|
+
{...item}
|
|
269
|
+
key={item.id}
|
|
270
|
+
minimized={false}
|
|
271
|
+
cyPrefix="navigation-overflow-item"
|
|
272
|
+
/>
|
|
247
273
|
))}
|
|
248
274
|
</div>
|
|
249
275
|
</Popover>
|
|
@@ -263,6 +289,7 @@ export interface HeaderNavigationProps {
|
|
|
263
289
|
navigationComponent?: FC<NavLinkComponentProps>;
|
|
264
290
|
align?: 'left' | 'right' | 'center';
|
|
265
291
|
alignMinimized?: 'left' | 'right' | 'center';
|
|
292
|
+
overflow?: HeaderNavigationOverflowProps;
|
|
266
293
|
}
|
|
267
294
|
|
|
268
295
|
const shortItemWidth = 44;
|
|
@@ -286,6 +313,7 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
|
|
|
286
313
|
leftClassName,
|
|
287
314
|
minWidth = 800,
|
|
288
315
|
navigationComponent = DefaultNavLinkComponent,
|
|
316
|
+
overflow,
|
|
289
317
|
}) => {
|
|
290
318
|
const leftRef = useRef<HTMLDivElement>(null);
|
|
291
319
|
const rightRef = useRef<HTMLDivElement>(null);
|
|
@@ -378,7 +406,7 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
|
|
|
378
406
|
id={id}
|
|
379
407
|
data-cy="header-navigation"
|
|
380
408
|
>
|
|
381
|
-
<div className={leftClassName} ref={leftRef} data-cy="
|
|
409
|
+
<div className={leftClassName} ref={leftRef} data-cy="navigation-left">
|
|
382
410
|
{left}
|
|
383
411
|
</div>
|
|
384
412
|
<div
|
|
@@ -388,18 +416,19 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
|
|
|
388
416
|
navigationAlignClass,
|
|
389
417
|
Styles.center
|
|
390
418
|
)}
|
|
391
|
-
data-cy="
|
|
419
|
+
data-cy="navigation-items"
|
|
392
420
|
>
|
|
393
421
|
<div ref={navigationRef} className={classNames(Styles.navigationItems, 'd-if')}>
|
|
394
422
|
{items?.map(item => (
|
|
395
423
|
<HeaderNavigationItem
|
|
396
424
|
{...item}
|
|
397
425
|
minimized={minimized === MinimizedState.Minimized}
|
|
426
|
+
cyPrefix="navigation-item"
|
|
398
427
|
key={item.id}
|
|
399
428
|
/>
|
|
400
429
|
))}
|
|
401
430
|
{!!itemsOverflow?.length && (
|
|
402
|
-
<HeaderNavigationOverflow items={itemsOverflow} />
|
|
431
|
+
<HeaderNavigationOverflow items={itemsOverflow} overflow={overflow} />
|
|
403
432
|
)}
|
|
404
433
|
</div>
|
|
405
434
|
</div>
|
|
@@ -410,7 +439,7 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
|
|
|
410
439
|
contentClassName
|
|
411
440
|
)}
|
|
412
441
|
ref={rightRef}
|
|
413
|
-
data-cy="
|
|
442
|
+
data-cy="navigation-content"
|
|
414
443
|
>
|
|
415
444
|
{children}
|
|
416
445
|
</div>
|