@servicetitan/navigation 1.5.2 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/counter-tag.d.ts +1 -1
- package/dist/components/counter-tag.d.ts.map +1 -1
- package/dist/components/counter-tag.js +1 -1
- package/dist/components/counter-tag.js.map +1 -1
- package/dist/components/header-navigation/header-navigation-extra.stories.d.ts +1 -1
- package/dist/components/header-navigation/header-navigation-extra.stories.d.ts.map +1 -1
- package/dist/components/header-navigation/header-navigation-extra.stories.js +7 -7
- package/dist/components/header-navigation/header-navigation-extra.stories.js.map +1 -1
- package/dist/components/header-navigation/header-navigation.d.ts +34 -4
- package/dist/components/header-navigation/header-navigation.d.ts.map +1 -1
- package/dist/components/header-navigation/header-navigation.js +21 -54
- package/dist/components/header-navigation/header-navigation.js.map +1 -1
- package/dist/components/header-navigation/header-navigation.stories.d.ts.map +1 -1
- package/dist/components/header-navigation/header-navigation.stories.js +7 -7
- package/dist/components/header-navigation/header-navigation.stories.js.map +1 -1
- package/dist/components/logo/logo-company-title.js +1 -1
- package/dist/components/logo/logo-company-title.js.map +1 -1
- package/dist/components/logo/logo-titan-text.js +2 -2
- package/dist/components/logo/logo-titan-text.js.map +1 -1
- package/dist/components/logo/logo-titan.js +1 -1
- package/dist/components/logo/logo-titan.js.map +1 -1
- package/dist/components/logo/logo.stories.js +3 -3
- package/dist/components/logo/logo.stories.js.map +1 -1
- package/dist/components/profile-dropdown/profile-dropdown.js +2 -2
- package/dist/components/profile-dropdown/profile-dropdown.js.map +1 -1
- package/dist/components/profile-dropdown/profile-dropdown.stories.js +10 -10
- package/dist/components/profile-dropdown/profile-dropdown.stories.js.map +1 -1
- package/dist/components/profile-dropdown/profile-icon.js +1 -1
- package/dist/components/profile-dropdown/profile-icon.js.map +1 -1
- package/package.json +3 -3
- package/src/components/header-navigation/header-navigation-extra.stories.tsx +11 -5
- package/src/components/header-navigation/header-navigation.stories.tsx +0 -2
- package/src/components/header-navigation/header-navigation.tsx +92 -101
- package/src/components/logo/logo-titan-text.tsx +1 -1
- package/src/components/logo/logo.stories.tsx +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"logo-titan.js","sourceRoot":"","sources":["../../../src/components/logo/logo-titan.tsx"],"names":[],"mappings":";AASA,qCAAqC;AACrC,MAAM,CAAC,MAAM,SAAS,GAAuB,CAAC,KAAqB,EAAE,EAAE;;IACnE,MAAM,UAAU,GAAG;QACf,KAAK,EAAE,MAAA,KAAK,CAAC,KAAK,mCAAI,GAAG;QACzB,MAAM,EAAE,MAAA,KAAK,CAAC,MAAM,mCAAI,GAAG;KAC9B,CAAC;IACF,MAAM,IAAI,GAAG,MAAA,KAAK,CAAC,IAAI,mCAAI,SAAS,CAAC;IACrC,MAAM,UAAU,GAAG,MAAA,KAAK,CAAC,UAAU,mCAAI,IAAI,CAAC;IAE5C,OAAO,CACH,6BACI,KAAK,EAAC,4BAA4B,EAClC,UAAU,EAAC,8BAA8B,IACrC,UAAU,IACd,OAAO,EAAC,aAAa,
|
|
1
|
+
{"version":3,"file":"logo-titan.js","sourceRoot":"","sources":["../../../src/components/logo/logo-titan.tsx"],"names":[],"mappings":";AASA,qCAAqC;AACrC,MAAM,CAAC,MAAM,SAAS,GAAuB,CAAC,KAAqB,EAAE,EAAE;;IACnE,MAAM,UAAU,GAAG;QACf,KAAK,EAAE,MAAA,KAAK,CAAC,KAAK,mCAAI,GAAG;QACzB,MAAM,EAAE,MAAA,KAAK,CAAC,MAAM,mCAAI,GAAG;KAC9B,CAAC;IACF,MAAM,IAAI,GAAG,MAAA,KAAK,CAAC,IAAI,mCAAI,SAAS,CAAC;IACrC,MAAM,UAAU,GAAG,MAAA,KAAK,CAAC,UAAU,mCAAI,IAAI,CAAC;IAE5C,OAAO,CACH,6BACI,KAAK,EAAC,4BAA4B,EAClC,UAAU,EAAC,8BAA8B,IACrC,UAAU,IACd,OAAO,EAAC,aAAa,aAErB,yBACI,eAAM,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,qBAAqB,GAAG,GACpC,EACP,aAAG,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,aAC7B,eACI,IAAI,EAAE,UAAU,EAChB,CAAC,EAAC,mHAAmH,GACvH,EACF,aAAG,SAAS,EAAC,iBAAiB,aAC1B,eAAM,EAAE,EAAC,GAAG,EAAC,IAAI,EAAC,MAAM,YACpB,cAAK,SAAS,EAAC,IAAI,GAAG,GACnB,EACP,eACI,IAAI,EAAE,UAAU,EAChB,CAAC,EAAC,wQAAwQ,EAC1Q,IAAI,EAAC,SAAS,GAChB,IACF,EACJ,eACI,IAAI,EAAE,IAAI,EACV,CAAC,EAAC,qJAAqJ,GACzJ,EACF,eACI,IAAI,EAAE,IAAI,EACV,CAAC,EAAC,klKAAklK,GACtlK,EACF,eACI,IAAI,EAAE,UAAU,EAChB,CAAC,EAAC,8PAA8P,GAClQ,IACF,KACF,CACT,CAAC;AACN,CAAC,CAAC"}
|
|
@@ -10,9 +10,9 @@ export default {
|
|
|
10
10
|
export const logoTitan = () => _jsx(LogoTitan, {});
|
|
11
11
|
export const logoTitanBlueMantle = () => _jsx(LogoTitan, { mantleFill: "#2270EE" });
|
|
12
12
|
export const logoCompanyTitle = () => _jsx(LogoCompanyTitle, {});
|
|
13
|
-
export const logoTitanText = () => (_jsx(LogoTitanText, { className: "bg-neutral-300 border", mantleFill: "#2270EE", title: "
|
|
14
|
-
const NavLinkMock = ({ className, children }) => (_jsx("a",
|
|
13
|
+
export const logoTitanText = () => (_jsx(LogoTitanText, { className: "bg-neutral-300 border", mantleFill: "#2270EE", title: "Widgets", description: "tenant tenant tenant tenant tenant" }));
|
|
14
|
+
const NavLinkMock = ({ className, children }) => (_jsx("a", { href: "/", onClick: e => {
|
|
15
15
|
e.preventDefault();
|
|
16
|
-
}, className: className
|
|
16
|
+
}, className: className, children: children }));
|
|
17
17
|
export const logoTitanTextWithLink = () => (_jsx(LogoTitanText, { className: "bg-neutral-300 border", mantleFill: "#2270EE", title: "Commercial", description: "tenant tenant tenant tenant tenant", logoWrapper: NavLinkMock }));
|
|
18
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":";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,
|
|
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,SAAS,EACf,WAAW,EAAC,oCAAoC,GAClD,CACL,CAAC;AAEF,MAAM,WAAW,GAAmD,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAC7F,YACI,IAAI,EAAC,GAAG,EACR,OAAO,EAAE,CAAC,CAAC,EAAE;QACT,CAAC,CAAC,cAAc,EAAE,CAAC;IACvB,CAAC,EACD,SAAS,EAAE,SAAS,YAEnB,QAAQ,GACT,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"}
|
|
@@ -31,7 +31,7 @@ const ProfileDropdownTrigger = ({ avatarBadge, badge, className, hintArrow, imag
|
|
|
31
31
|
const onAvatarError = useCallback(() => {
|
|
32
32
|
setAvatarSourceError(true);
|
|
33
33
|
}, []);
|
|
34
|
-
return (_jsxs("div",
|
|
34
|
+
return (_jsxs("div", { className: classNames('d-f align-items-center cursor-pointer position-relative p-x-1 p-y-half', Styles.triggerContainer, { [Styles.triggerContainerHintArrow]: hintArrow }, className), onClick: onClick, "data-cy": "profile-dropdown-trigger", "data-pendo": "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", { className: Styles.info, children: [_jsx(BodyText, { bold: true, title: info.title, className: "t-truncate c-white", size: "xsmall", children: info.title }), _jsx(BodyText, { 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", { className: classNames(Styles.badge, badge.content ? Styles.badgeWithContent : Styles.badgeNoContent, badge.className), children: badge.content }))] }));
|
|
35
35
|
};
|
|
36
36
|
export const ProfileDropdownSection = (_a) => {
|
|
37
37
|
var { children, className, id, onClick } = _a, rest = __rest(_a, ["children", "className", "id", "onClick"]);
|
|
@@ -81,7 +81,7 @@ export const ProfileDropdown = (({ children, className, direction, hintPopup, on
|
|
|
81
81
|
const hintShown = !!hintPopup && !open;
|
|
82
82
|
const HintComponent = hintPopup === null || hintPopup === void 0 ? void 0 : hintPopup.content;
|
|
83
83
|
const triggerElement = (_jsx(ProfileDropdownTrigger, Object.assign({}, trigger, { onClick: children ? onTriggerClick : undefined, hintArrow: hintShown })));
|
|
84
|
-
return (_jsx("div",
|
|
84
|
+
return (_jsx("div", { className: classNames('position-relative', className), "data-cy": "profile-dropdown", children: !!hintPopup && hintShown && HintComponent ? (_jsx(Popover, { direction: direction !== null && direction !== void 0 ? 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", { className: classNames(Styles.hintContent, hintPopup.className), children: _jsx(HintComponent, { openProfile: handleOpen }) }) })) : (_jsx(Popover, { direction: direction !== null && direction !== void 0 ? direction : 'bl', width: width !== null && width !== void 0 ? width : 'xs', trigger: triggerElement, open: open, portal: portal, onClickOutside: handleClose, className: Styles.dropdown, popoverContentClassName: classNames(Styles.dropdownContent, Styles.dropdownContentBottomLeft), children: _jsx("div", { className: Styles.dropdownContentWrapper, onClick: handleClose, "data-cy": "profile-dropdown-content", children: children }) })) }));
|
|
85
85
|
});
|
|
86
86
|
ProfileDropdown.Divider = ProfileDropdownDivider;
|
|
87
87
|
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,SAAS,EACT,OAAO,EACP,QAAQ,GACX,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAuB,MAAM,gBAAgB,CAAC;AACjE,OAAO,KAAK,MAAM,MAAM,gCAAgC,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAY7C,MAAM,sBAAsB,GAAoC,CAAC,EAC7D,WAAW,EACX,KAAK,EACL,SAAS,EACT,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,OAAO,GACV,EAAE,EAAE;IACD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,EAAE,CAAC,CAAC;IACjE,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElE,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,GAAG,GAAG,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,EAAE,CAAC;QAE3B,IAAI,GAAG,KAAK,YAAY,EAAE;
|
|
1
|
+
{"version":3,"file":"profile-dropdown.js","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.tsx"],"names":[],"mappings":"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"}
|
|
@@ -7,13 +7,13 @@ export default {
|
|
|
7
7
|
component: ProfileDropdown,
|
|
8
8
|
parameters: {},
|
|
9
9
|
};
|
|
10
|
-
const NavLinkMock = props => (_jsx("a",
|
|
10
|
+
const NavLinkMock = props => (_jsx("a", { href: props.to, target: props.target, onClick: e => {
|
|
11
11
|
e.preventDefault();
|
|
12
|
-
}, className: props.className
|
|
13
|
-
export const profileDropdownDefault = () => (_jsx(HeaderNavigation,
|
|
14
|
-
export const profileDropdownWithLogo = () => (_jsx(HeaderNavigation,
|
|
12
|
+
}, className: props.className, children: props.children }));
|
|
13
|
+
export const profileDropdownDefault = () => (_jsx(HeaderNavigation, { navigationComponent: NavLinkMock, children: _jsxs(ProfileDropdown, { children: [_jsx(ProfileDropdown.Link, { id: "first", to: "https://google.com", children: "first link" }), _jsx(ProfileDropdown.Link, { id: "second", onClick: () => alert('second click'), children: "second link" }), _jsx(ProfileDropdown.Divider, {}), _jsx(ProfileDropdown.Section, { id: "content", children: "some content" }), _jsx(ProfileDropdown.Divider, {}), _jsx(ProfileDropdown.Divider, {}), _jsx(ProfileDropdown.Divider, {}), _jsx(ProfileDropdown.Link, { id: "third", to: "https://google.com", children: "third link" }), _jsx(ProfileDropdown.Divider, {})] }) }));
|
|
14
|
+
export const profileDropdownWithLogo = () => (_jsx(HeaderNavigation, { navigationComponent: NavLinkMock, children: _jsxs(ProfileDropdown, { trigger: {
|
|
15
15
|
imageSrc: 'https://upload.wikimedia.org/wikipedia/en/1/11/Milhouse_Van_Houten.png',
|
|
16
|
-
}
|
|
16
|
+
}, children: [_jsx(ProfileDropdown.Link, { id: "first", to: "https://google.com", children: "first link" }), _jsx(ProfileDropdown.Link, { id: "second", onClick: () => alert('second click'), children: "second link" })] }) }));
|
|
17
17
|
export const profileDropdownWithErrorLogo = () => (_jsx(HeaderNavigation, { children: _jsx(ProfileDropdown, { trigger: {
|
|
18
18
|
imageSrc: 'https://some.incorrect.url/logo.png',
|
|
19
19
|
} }) }));
|
|
@@ -32,20 +32,20 @@ export const profileDropdownWithBothBadges = () => (_jsx(HeaderNavigation, { chi
|
|
|
32
32
|
} }) }));
|
|
33
33
|
// eslint-disable-next-line no-console
|
|
34
34
|
const log = (text) => console.log(text);
|
|
35
|
-
export const profileDropdownWithHintPopup = () => (_jsx(HeaderNavigation,
|
|
35
|
+
export const profileDropdownWithHintPopup = () => (_jsx(HeaderNavigation, { navigationComponent: NavLinkMock, children: _jsxs(ProfileDropdown, { trigger: {
|
|
36
36
|
avatarBadge: 'yellow-500',
|
|
37
37
|
badge: { className: 'bg-red-400' },
|
|
38
38
|
}, hintPopup: {
|
|
39
39
|
className: 'bg-blue-500-i c-white',
|
|
40
|
-
content: ({ openProfile }) => (_jsxs("div", { children: ["hello", ' ', _jsx(Button,
|
|
40
|
+
content: ({ openProfile }) => (_jsxs("div", { children: ["hello", ' ', _jsx(Button, { onClick: openProfile, size: "xsmall", children: "show me" })] })),
|
|
41
41
|
width: 's',
|
|
42
42
|
onClose: () => log('close profile dropdown hint'),
|
|
43
|
-
}, onOpen: () => log('open profile dropdown'), onClose: () => log('close profile dropdown')
|
|
44
|
-
export const profileDropdownWithHintAndInfoPopup = () => (_jsx(HeaderNavigation,
|
|
43
|
+
}, onOpen: () => log('open profile dropdown'), onClose: () => log('close profile dropdown'), children: [_jsx(ProfileDropdown.Link, { id: "first", to: "https://google.com", children: "first item" }), _jsx(ProfileDropdown.Divider, {}), _jsx(ProfileDropdown.Section, { id: "second", children: "second item" })] }) }));
|
|
44
|
+
export const profileDropdownWithHintAndInfoPopup = () => (_jsx(HeaderNavigation, { navigationComponent: NavLinkMock, children: _jsx(ProfileDropdown, { trigger: {
|
|
45
45
|
avatarBadge: 'yellow-500',
|
|
46
46
|
badge: { className: 'bg-red-400' },
|
|
47
47
|
info: { title: 'some text', text: 'qq' },
|
|
48
48
|
}, hintPopup: {
|
|
49
49
|
content: () => _jsx("div", { children: "hello" }),
|
|
50
|
-
} }) }))
|
|
50
|
+
} }) }));
|
|
51
51
|
//# sourceMappingURL=profile-dropdown.stories.js.map
|
|
@@ -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,GAA8B,KAAK,CAAC,EAAE,CAAC,CACpD,
|
|
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,3 +1,3 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
export const ProfileLogo = ({ size }) => (_jsx("svg",
|
|
2
|
+
export const ProfileLogo = ({ size }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: size, height: size, viewBox: "0 0 256 256", children: _jsxs("g", { stroke: "none", strokeWidth: "0", strokeDasharray: "none", strokeLinecap: "butt", strokeLinejoin: "miter", strokeMiterlimit: "10", fill: "currentColor", fillRule: "nonzero", opacity: "1", transform: "translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)", children: [_jsx("path", { d: "M 45 53.718 c -10.022 0 -18.175 -8.153 -18.175 -18.175 S 34.978 17.368 45 17.368 c 10.021 0 18.175 8.153 18.175 18.175 S 55.021 53.718 45 53.718 z", stroke: "none", strokeWidth: "1", strokeDasharray: "none", strokeLinecap: "round", strokeLinejoin: "miter", strokeMiterlimit: "10", fill: "rgb(255,255,255)", fillRule: "nonzero", opacity: "1", transform: " matrix(1 0 0 1 0 0) " }), _jsx("path", { d: "M 45 0 C 20.187 0 0 20.187 0 45 c 0 24.813 20.187 45 45 45 c 24.813 0 45 -20.187 45 -45 C 90 20.187 69.813 0 45 0 z M 74.821 70.096 c -3.543 -5.253 -8.457 -9.568 -14.159 -12.333 c -2.261 -1.096 -4.901 -1.08 -7.247 0.047 c -2.638 1.268 -5.47 1.91 -8.415 1.91 c -2.945 0 -5.776 -0.643 -8.415 -1.91 c -2.343 -1.125 -4.984 -1.143 -7.247 -0.047 c -5.702 2.765 -10.616 7.08 -14.16 12.333 C 9.457 63.308 6 54.552 6 45 C 6 23.495 23.495 6 45 6 s 39 17.495 39 39 C 84 54.552 80.543 63.308 74.821 70.096 z", stroke: "none", strokeWidth: "1", strokeDasharray: "none", strokeLinecap: "round", strokeLinejoin: "miter", strokeMiterlimit: "10", fill: "rgb(255,255,255)", fillRule: "nonzero", opacity: "1", transform: " matrix(1 0 0 1 0 0) " })] }) }));
|
|
3
3
|
//# sourceMappingURL=profile-icon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"profile-icon.js","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-icon.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAC3D,
|
|
1
|
+
{"version":3,"file":"profile-icon.js","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-icon.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAC3D,cACI,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,KAAK,EACb,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,OAAO,EAAC,aAAa,YAErB,aACI,MAAM,EAAC,MAAM,EACb,WAAW,EAAC,GAAG,EACf,eAAe,EAAC,MAAM,EACtB,aAAa,EAAC,MAAM,EACpB,cAAc,EAAC,OAAO,EACtB,gBAAgB,EAAC,IAAI,EACrB,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAC,SAAS,EAClB,OAAO,EAAC,GAAG,EACX,SAAS,EAAC,mEAAmE,aAE7E,eACI,CAAC,EAAC,oJAAoJ,EACtJ,MAAM,EAAC,MAAM,EACb,WAAW,EAAC,GAAG,EACf,eAAe,EAAC,MAAM,EACtB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,gBAAgB,EAAC,IAAI,EACrB,IAAI,EAAC,kBAAkB,EACvB,QAAQ,EAAC,SAAS,EAClB,OAAO,EAAC,GAAG,EACX,SAAS,EAAC,uBAAuB,GACnC,EAEF,eACI,CAAC,EAAC,ifAAif,EACnf,MAAM,EAAC,MAAM,EACb,WAAW,EAAC,GAAG,EACf,eAAe,EAAC,MAAM,EACtB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,gBAAgB,EAAC,IAAI,EACrB,IAAI,EAAC,kBAAkB,EACvB,QAAQ,EAAC,SAAS,EAClB,OAAO,EAAC,GAAG,EACX,SAAS,EAAC,uBAAuB,GACnC,IACF,GACF,CACT,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@servicetitan/navigation",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"description": "Navigation components",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@servicetitan/design-system": "~13.4.5",
|
|
30
|
-
"@servicetitan/react-ioc": "^
|
|
30
|
+
"@servicetitan/react-ioc": "^24.0.3",
|
|
31
31
|
"@servicetitan/tokens": ">=12.1.11",
|
|
32
32
|
"@testing-library/react": "^14.0.0",
|
|
33
33
|
"@types/react": "~18.2.55",
|
|
@@ -43,5 +43,5 @@
|
|
|
43
43
|
"less": true,
|
|
44
44
|
"webpack": false
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "ec561d050f09ecadafd3be2d2ffec54c1fc325a9"
|
|
47
47
|
}
|
|
@@ -15,7 +15,13 @@ export default {
|
|
|
15
15
|
parameters: {},
|
|
16
16
|
};
|
|
17
17
|
|
|
18
|
-
const NavLinkMock: FC<NavLinkComponentProps> = ({
|
|
18
|
+
const NavLinkMock: FC<NavLinkComponentProps> = ({
|
|
19
|
+
to,
|
|
20
|
+
children,
|
|
21
|
+
isActive,
|
|
22
|
+
activeClassName,
|
|
23
|
+
...rest
|
|
24
|
+
}) => (
|
|
19
25
|
<a
|
|
20
26
|
{...rest}
|
|
21
27
|
href={to}
|
|
@@ -41,7 +47,7 @@ export const extraLink = () => (
|
|
|
41
47
|
|
|
42
48
|
export const extraTrigger = () => (
|
|
43
49
|
<HeaderNavigation items={[]} navigationComponent={NavLinkMock} contentClassName="m-r-1">
|
|
44
|
-
<HeaderNavigationTrigger id="dialpad" iconName="phone" counter={2} />
|
|
50
|
+
<HeaderNavigationTrigger id="dialpad" iconName="phone" counter={2} tooltip="Phones pro" />
|
|
45
51
|
</HeaderNavigation>
|
|
46
52
|
);
|
|
47
53
|
|
|
@@ -53,15 +59,15 @@ export const extraCustomTrigger = () => (
|
|
|
53
59
|
</HeaderNavigation>
|
|
54
60
|
);
|
|
55
61
|
|
|
56
|
-
export const
|
|
62
|
+
export const extraWithTooltip = () => (
|
|
57
63
|
<HeaderNavigation items={[]} navigationComponent={NavLinkMock} contentClassName="m-r-1">
|
|
58
64
|
<HeaderNavigationLink
|
|
59
65
|
id="search"
|
|
60
66
|
to="https://google.com"
|
|
61
67
|
target="_blank"
|
|
62
68
|
iconName="search"
|
|
63
|
-
|
|
64
|
-
|
|
69
|
+
tooltip="Search: for all the questions"
|
|
70
|
+
hint="Google"
|
|
65
71
|
/>
|
|
66
72
|
|
|
67
73
|
<HeaderNavigationTrigger id="dialpad" iconName="phone" title="Dialpad" counter={2} />
|
|
@@ -134,8 +134,6 @@ const TimeZoneOffset: FC = () => (
|
|
|
134
134
|
export const withAllMonolithData = () => (
|
|
135
135
|
<HeaderNavigation
|
|
136
136
|
left={<LogoCompanyTitle className="m-l-1" fill="#fff" />}
|
|
137
|
-
align="left"
|
|
138
|
-
alignMinimized="center"
|
|
139
137
|
items={[
|
|
140
138
|
items.dashboard,
|
|
141
139
|
items.calendar,
|
|
@@ -14,8 +14,6 @@ import {
|
|
|
14
14
|
ReactNode,
|
|
15
15
|
useCallback,
|
|
16
16
|
useEffect,
|
|
17
|
-
useLayoutEffect,
|
|
18
|
-
useMemo,
|
|
19
17
|
useRef,
|
|
20
18
|
useState,
|
|
21
19
|
} from 'react';
|
|
@@ -36,38 +34,58 @@ function useForceUpdate() {
|
|
|
36
34
|
}
|
|
37
35
|
|
|
38
36
|
interface HeaderNavigationItemContentPropsStrict {
|
|
37
|
+
/** item text */
|
|
39
38
|
title?: string;
|
|
39
|
+
/** counter shown for item */
|
|
40
40
|
counter?: CounterTagPropsType;
|
|
41
|
+
/** icon component class name */
|
|
41
42
|
iconClassName?: string;
|
|
43
|
+
/** IconComponent custom icon component */
|
|
42
44
|
iconComponent?: FC;
|
|
45
|
+
/** iconName name of anvil icon */
|
|
43
46
|
iconName?: IconPropsStrict['name'];
|
|
47
|
+
/** iconSize size of anvil icon */
|
|
48
|
+
iconSize?: IconPropsStrict['size'];
|
|
44
49
|
}
|
|
45
|
-
export interface HeaderNavigationTriggerPropsStrict
|
|
50
|
+
export interface HeaderNavigationTriggerPropsStrict
|
|
51
|
+
extends Omit<HeaderNavigationItemContentPropsStrict, 'title'> {
|
|
52
|
+
/** unique identifier */
|
|
46
53
|
id: string;
|
|
54
|
+
/** tooltip text */
|
|
55
|
+
tooltip?: string;
|
|
56
|
+
/** item description */
|
|
47
57
|
hint?: string;
|
|
58
|
+
/** container class name */
|
|
48
59
|
className?: string;
|
|
49
60
|
}
|
|
50
61
|
|
|
51
62
|
interface HeaderNavigationTriggerProps extends HeaderNavigationTriggerPropsStrict {
|
|
63
|
+
/** unstrict props */
|
|
52
64
|
[key: string]: any;
|
|
53
65
|
}
|
|
54
66
|
|
|
55
67
|
export interface HeaderNavigationLinkPropsStrict extends HeaderNavigationTriggerPropsStrict {
|
|
68
|
+
/** link href */
|
|
56
69
|
to: string;
|
|
70
|
+
/** isActive */
|
|
57
71
|
isActive?: boolean | ((pathname: string) => boolean);
|
|
72
|
+
/** link html target */
|
|
58
73
|
target?: HTMLAttributeAnchorTarget;
|
|
59
74
|
}
|
|
60
75
|
|
|
61
76
|
export interface HeaderNavigationLinkProps extends HeaderNavigationLinkPropsStrict {
|
|
77
|
+
/** unstrict props */
|
|
62
78
|
[key: string]: any;
|
|
63
79
|
}
|
|
64
80
|
|
|
81
|
+
/** Content for navigation items */
|
|
65
82
|
export const HeaderNavigationItemContent: FC<HeaderNavigationItemContentPropsStrict> = ({
|
|
66
83
|
title,
|
|
67
84
|
counter,
|
|
68
85
|
iconClassName,
|
|
69
86
|
iconComponent: IconComponent,
|
|
70
87
|
iconName,
|
|
88
|
+
iconSize = '24px',
|
|
71
89
|
}) => (
|
|
72
90
|
<Fragment>
|
|
73
91
|
{IconComponent ? (
|
|
@@ -76,7 +94,7 @@ export const HeaderNavigationItemContent: FC<HeaderNavigationItemContentPropsStr
|
|
|
76
94
|
</i>
|
|
77
95
|
) : iconName ? (
|
|
78
96
|
<Icon
|
|
79
|
-
size=
|
|
97
|
+
size={iconSize}
|
|
80
98
|
name={iconName}
|
|
81
99
|
className={classNames(Styles.icon, iconClassName)}
|
|
82
100
|
/>
|
|
@@ -96,11 +114,21 @@ export const HeaderNavigationItemContent: FC<HeaderNavigationItemContentPropsStr
|
|
|
96
114
|
</Fragment>
|
|
97
115
|
);
|
|
98
116
|
|
|
117
|
+
const withTooltip = (element: ReactNode, tooltip?: string) =>
|
|
118
|
+
tooltip ? (
|
|
119
|
+
<Tooltip el="div" direction="b" text={tooltip}>
|
|
120
|
+
{element}
|
|
121
|
+
</Tooltip>
|
|
122
|
+
) : (
|
|
123
|
+
element
|
|
124
|
+
);
|
|
125
|
+
|
|
126
|
+
/** Navigation extra item with link */
|
|
99
127
|
export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
|
|
100
128
|
id,
|
|
101
129
|
to,
|
|
102
|
-
title,
|
|
103
130
|
hint,
|
|
131
|
+
tooltip,
|
|
104
132
|
counter,
|
|
105
133
|
className,
|
|
106
134
|
iconClassName,
|
|
@@ -112,7 +140,7 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
|
|
|
112
140
|
}) => {
|
|
113
141
|
const NavigationComponent = useNavLink();
|
|
114
142
|
|
|
115
|
-
return (
|
|
143
|
+
return withTooltip(
|
|
116
144
|
<NavigationComponent
|
|
117
145
|
data-cy={`navigation-link-${id}`}
|
|
118
146
|
data-pendo={`navigation-link-${id}`}
|
|
@@ -128,13 +156,13 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
|
|
|
128
156
|
target={target}
|
|
129
157
|
>
|
|
130
158
|
<HeaderNavigationItemContent
|
|
131
|
-
title={title}
|
|
132
159
|
counter={counter}
|
|
133
160
|
iconComponent={iconComponent}
|
|
134
161
|
iconClassName={iconClassName}
|
|
135
162
|
iconName={iconName}
|
|
136
163
|
/>
|
|
137
|
-
</NavigationComponent
|
|
164
|
+
</NavigationComponent>,
|
|
165
|
+
tooltip
|
|
138
166
|
);
|
|
139
167
|
};
|
|
140
168
|
|
|
@@ -143,6 +171,7 @@ interface HeaderNavigationItemPropsStrict extends HeaderNavigationItemData {
|
|
|
143
171
|
main: boolean;
|
|
144
172
|
}
|
|
145
173
|
|
|
174
|
+
/** Navigation main menu item */
|
|
146
175
|
const HeaderNavigationItem: FC<HeaderNavigationItemPropsStrict> = ({
|
|
147
176
|
id,
|
|
148
177
|
to,
|
|
@@ -159,7 +188,7 @@ const HeaderNavigationItem: FC<HeaderNavigationItemPropsStrict> = ({
|
|
|
159
188
|
}) => {
|
|
160
189
|
const NavigationComponent = useNavLink();
|
|
161
190
|
|
|
162
|
-
|
|
191
|
+
return withTooltip(
|
|
163
192
|
<NavigationComponent
|
|
164
193
|
data-cy={`navigation-item-${id}`}
|
|
165
194
|
data-pendo={`navigation-item-${id}`}
|
|
@@ -183,60 +212,62 @@ const HeaderNavigationItem: FC<HeaderNavigationItemPropsStrict> = ({
|
|
|
183
212
|
iconComponent={iconComponent}
|
|
184
213
|
iconClassName={iconClassName}
|
|
185
214
|
iconName={iconName}
|
|
215
|
+
iconSize="20px"
|
|
186
216
|
/>
|
|
187
|
-
</NavigationComponent
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
return minimized && title ? (
|
|
191
|
-
<Tooltip el="div" direction="b" text={title}>
|
|
192
|
-
{trigger}
|
|
193
|
-
</Tooltip>
|
|
194
|
-
) : (
|
|
195
|
-
trigger
|
|
217
|
+
</NavigationComponent>,
|
|
218
|
+
minimized ? title : undefined
|
|
196
219
|
);
|
|
197
220
|
};
|
|
198
221
|
|
|
222
|
+
/** Navigation extra item with icon button */
|
|
199
223
|
export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
|
|
200
224
|
id,
|
|
201
|
-
hint,
|
|
202
225
|
className,
|
|
203
226
|
counter,
|
|
204
227
|
iconClassName,
|
|
205
228
|
iconComponent,
|
|
206
229
|
iconName,
|
|
207
|
-
|
|
230
|
+
hint,
|
|
231
|
+
tooltip,
|
|
208
232
|
...rest
|
|
209
|
-
}) =>
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
233
|
+
}) =>
|
|
234
|
+
withTooltip(
|
|
235
|
+
<div
|
|
236
|
+
data-cy={`navigation-trigger-${id}`}
|
|
237
|
+
data-pendo={`navigation-trigger-${id}`}
|
|
238
|
+
{...rest}
|
|
239
|
+
title={hint}
|
|
240
|
+
className={classNames(Styles.link, 'cursor-pointer', className)}
|
|
241
|
+
>
|
|
242
|
+
<HeaderNavigationItemContent
|
|
243
|
+
counter={counter}
|
|
244
|
+
iconComponent={iconComponent}
|
|
245
|
+
iconClassName={iconClassName}
|
|
246
|
+
iconName={iconName}
|
|
247
|
+
/>
|
|
248
|
+
</div>,
|
|
249
|
+
tooltip
|
|
250
|
+
);
|
|
226
251
|
|
|
252
|
+
/** Navigation extra item with custom content */
|
|
227
253
|
export const HeaderNavigationTriggerCustom: FC<
|
|
228
|
-
Omit<
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
)
|
|
254
|
+
Omit<
|
|
255
|
+
HeaderNavigationTriggerProps,
|
|
256
|
+
'counter' | 'iconSize' | 'iconName' | 'iconComponent' | 'iconClassName'
|
|
257
|
+
> & { children: ReactNode }
|
|
258
|
+
> = ({ children, id, className, tooltip, title, ...rest }) =>
|
|
259
|
+
withTooltip(
|
|
260
|
+
<div
|
|
261
|
+
data-cy={`navigation-custom-${id}`}
|
|
262
|
+
data-pendo={`navigation-custom-${id}`}
|
|
263
|
+
{...rest}
|
|
264
|
+
title={title}
|
|
265
|
+
className={classNames(Styles.link, 'cursor-pointer', className)}
|
|
266
|
+
>
|
|
267
|
+
{children}
|
|
268
|
+
</div>,
|
|
269
|
+
tooltip
|
|
270
|
+
);
|
|
240
271
|
|
|
241
272
|
export interface HeaderNavigationOverflowProps {
|
|
242
273
|
direction: PopoverPropsStrict['direction'];
|
|
@@ -285,23 +316,30 @@ const HeaderNavigationOverflow: FC<{
|
|
|
285
316
|
};
|
|
286
317
|
|
|
287
318
|
export interface HeaderNavigationProps {
|
|
319
|
+
/** extra navigation */
|
|
288
320
|
children?: ReactNode;
|
|
321
|
+
/** container class name */
|
|
289
322
|
className?: string;
|
|
323
|
+
/** extra navigation container class name */
|
|
290
324
|
contentClassName?: string;
|
|
325
|
+
/** container id */
|
|
291
326
|
id?: string;
|
|
327
|
+
/** left content (usually used for logo) */
|
|
292
328
|
left?: ReactElement;
|
|
329
|
+
/** left container class name */
|
|
293
330
|
leftClassName?: string;
|
|
331
|
+
/** minimal width for navigation bar */
|
|
294
332
|
minWidth?: number;
|
|
333
|
+
/** main navigation items */
|
|
295
334
|
items?: HeaderNavigationItemData[];
|
|
335
|
+
/** main navigation overflow items */
|
|
296
336
|
itemsOverflow?: HeaderNavigationItemData[];
|
|
337
|
+
/** navigation component used for routing */
|
|
297
338
|
navigationComponent?: FC<NavLinkComponentProps>;
|
|
298
|
-
|
|
299
|
-
alignMinimized?: 'left' | 'right' | 'center';
|
|
339
|
+
/** props for main items overflow component */
|
|
300
340
|
overflow?: HeaderNavigationOverflowProps;
|
|
301
341
|
}
|
|
302
342
|
|
|
303
|
-
const shortItemWidth = 44;
|
|
304
|
-
|
|
305
343
|
enum MinimizedState {
|
|
306
344
|
Calculating,
|
|
307
345
|
Minimized,
|
|
@@ -309,8 +347,6 @@ enum MinimizedState {
|
|
|
309
347
|
}
|
|
310
348
|
|
|
311
349
|
export const HeaderNavigation: FC<HeaderNavigationProps> = ({
|
|
312
|
-
align,
|
|
313
|
-
alignMinimized,
|
|
314
350
|
children,
|
|
315
351
|
className,
|
|
316
352
|
contentClassName,
|
|
@@ -330,45 +366,6 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
|
|
|
330
366
|
const forceUpdate = useForceUpdate();
|
|
331
367
|
const [minimized, setMinimized] = useState(MinimizedState.Calculating);
|
|
332
368
|
|
|
333
|
-
const navigationAlign = useMemo(() => {
|
|
334
|
-
if (alignMinimized && minimized === MinimizedState.Minimized) {
|
|
335
|
-
return alignMinimized;
|
|
336
|
-
}
|
|
337
|
-
|
|
338
|
-
return align ?? 'left';
|
|
339
|
-
}, [align, alignMinimized, minimized]);
|
|
340
|
-
|
|
341
|
-
const navigationAlignClass = useMemo(() => {
|
|
342
|
-
switch (navigationAlign) {
|
|
343
|
-
case 'center':
|
|
344
|
-
return 'justify-content-center';
|
|
345
|
-
case 'right':
|
|
346
|
-
return 'justify-content-end';
|
|
347
|
-
default:
|
|
348
|
-
return 'justify-content-start';
|
|
349
|
-
}
|
|
350
|
-
}, [navigationAlign]);
|
|
351
|
-
|
|
352
|
-
const calculatePaddings = useCallback(() => {
|
|
353
|
-
if (leftRef.current && rightRef.current && centerRef.current) {
|
|
354
|
-
let diff = leftRef.current.clientWidth - rightRef.current.clientWidth;
|
|
355
|
-
const margin = 8;
|
|
356
|
-
|
|
357
|
-
// if no enough space to show navigation links in the middle of page
|
|
358
|
-
if (centerRef.current.clientWidth < (items?.length ?? 0) * shortItemWidth) {
|
|
359
|
-
// show them in the middle of available space
|
|
360
|
-
diff = 0;
|
|
361
|
-
}
|
|
362
|
-
|
|
363
|
-
if (navigationAlign !== 'center') {
|
|
364
|
-
diff = 0;
|
|
365
|
-
}
|
|
366
|
-
|
|
367
|
-
centerRef.current.style.marginLeft = `${margin + (diff < 0 ? -diff : 0)}px`;
|
|
368
|
-
centerRef.current.style.marginRight = `${margin + (diff > 0 ? diff : 0)}px`;
|
|
369
|
-
}
|
|
370
|
-
}, [items, navigationAlign]);
|
|
371
|
-
|
|
372
369
|
useEffect(() => {
|
|
373
370
|
const handleResize = () => {
|
|
374
371
|
setMinimized(MinimizedState.Calculating);
|
|
@@ -384,15 +381,10 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
|
|
|
384
381
|
forceUpdate();
|
|
385
382
|
}, [items, itemsOverflow, forceUpdate]);
|
|
386
383
|
|
|
387
|
-
useLayoutEffect(() => {
|
|
388
|
-
calculatePaddings();
|
|
389
|
-
}, [calculatePaddings]);
|
|
390
|
-
|
|
391
384
|
const updateIsMinimized = () => {
|
|
392
385
|
if (centerRef.current && navigationRef.current) {
|
|
393
386
|
if (navigationRef.current.clientWidth > centerRef.current.clientWidth) {
|
|
394
387
|
setMinimized(MinimizedState.Minimized);
|
|
395
|
-
calculatePaddings();
|
|
396
388
|
} else if (minimized === MinimizedState.Calculating) {
|
|
397
389
|
setMinimized(MinimizedState.Full);
|
|
398
390
|
}
|
|
@@ -420,8 +412,7 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
|
|
|
420
412
|
<div
|
|
421
413
|
ref={centerRef}
|
|
422
414
|
className={classNames(
|
|
423
|
-
'd-if flex-grow-1 flex-basis-0',
|
|
424
|
-
navigationAlignClass,
|
|
415
|
+
'd-if flex-grow-1 flex-basis-0 justify-content-center',
|
|
425
416
|
Styles.center
|
|
426
417
|
)}
|
|
427
418
|
data-cy="navigation-items"
|
|
@@ -32,7 +32,7 @@ export const LogoTitanText: FC<LogoTitanTextProps> = ({
|
|
|
32
32
|
<LogoTitan width={40} height={40} mantleFill={mantleFill} />
|
|
33
33
|
</LogoWrapper>
|
|
34
34
|
<div className="d-if p-l-1 c-white flex-column justify-content-center align-items-start">
|
|
35
|
-
<span className={classNames(Styles.logoTextTitle, 'ff-display t-truncate')}>
|
|
35
|
+
<span className={classNames(Styles.logoTextTitle, 'ff-display t-truncate p-b-half')}>
|
|
36
36
|
{title}
|
|
37
37
|
</span>
|
|
38
38
|
<span className={classNames(Styles.logoTextDescription, 'ff-default t-truncate')}>
|