@servicetitan/navigation 2.3.1 → 2.4.1

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.
Files changed (25) hide show
  1. package/dist/components/header-navigation/header-navigation.module.less +12 -0
  2. package/dist/components/profile-dropdown/profile-dropdown.d.ts.map +1 -1
  3. package/dist/components/profile-dropdown/profile-dropdown.js +1 -1
  4. package/dist/components/profile-dropdown/profile-dropdown.js.map +1 -1
  5. package/dist/components/side-navigation/side-navigation.d.ts +9 -1
  6. package/dist/components/side-navigation/side-navigation.d.ts.map +1 -1
  7. package/dist/components/side-navigation/side-navigation.js +8 -7
  8. package/dist/components/side-navigation/side-navigation.js.map +1 -1
  9. package/dist/components/side-navigation/side-navigation.module.less +70 -11
  10. package/dist/components/side-navigation/side-navigation.stories.d.ts +1 -1
  11. package/dist/components/side-navigation/side-navigation.stories.d.ts.map +1 -1
  12. package/dist/components/side-navigation/side-navigation.stories.js +19 -15
  13. package/dist/components/side-navigation/side-navigation.stories.js.map +1 -1
  14. package/dist/utils/with-tooltip.d.ts +2 -1
  15. package/dist/utils/with-tooltip.d.ts.map +1 -1
  16. package/dist/utils/with-tooltip.js +1 -1
  17. package/dist/utils/with-tooltip.js.map +1 -1
  18. package/package.json +2 -2
  19. package/src/components/header-navigation/header-navigation.module.less +12 -0
  20. package/src/components/profile-dropdown/profile-dropdown.tsx +1 -0
  21. package/src/components/side-navigation/side-navigation.module.less +70 -11
  22. package/src/components/side-navigation/side-navigation.module.less.d.ts +4 -0
  23. package/src/components/side-navigation/side-navigation.stories.tsx +26 -21
  24. package/src/components/side-navigation/side-navigation.tsx +57 -32
  25. package/src/utils/with-tooltip.tsx +7 -3
package/dist/components/header-navigation/header-navigation.module.less CHANGED
@@ -50,6 +50,10 @@
50
50
  width: 32px;
51
51
  }
52
52
 
53
+ :global(.profile-dropdown-trigger) {
54
+ height: 40px;
55
+ }
56
+
53
57
  :global(.profile-dropdown-svg) {
54
58
  height: 28px;
55
59
  width: 28px;
@@ -138,6 +142,10 @@
138
142
  width: 24px;
139
143
  }
140
144
 
145
+ :global(.profile-dropdown-trigger) {
146
+ height: 30px;
147
+ }
148
+
141
149
  :global(.profile-dropdown-svg) {
142
150
  height: 20px;
143
151
  width: 20px;
@@ -200,6 +208,10 @@
200
208
  width: 24px;
201
209
  }
202
210
 
211
+ :global(.profile-dropdown-trigger) {
212
+ height: 32px;
213
+ }
214
+
203
215
  :global(.profile-dropdown-svg) {
204
216
  height: 20px;
205
217
  width: 20px;
package/dist/components/profile-dropdown/profile-dropdown.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"profile-dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"profile-dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.tsx"],"names":[],"mappings":"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"}
package/dist/components/profile-dropdown/profile-dropdown.js CHANGED
@@ -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", { 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: classNames(Styles.profileImage, 'profile-dropdown-image'), onError: onAvatarError, alt: "user dropdown menu" })) : (_jsx(ProfileLogo, { size: size })), !!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 }))] }));
34
+ return (_jsxs("div", { className: classNames('d-f align-items-center cursor-pointer position-relative p-x-1 p-y-half', 'profile-dropdown-trigger', 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: classNames(Styles.profileImage, 'profile-dropdown-image'), onError: onAvatarError, alt: "user dropdown menu" })) : (_jsx(ProfileLogo, { size: size })), !!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"]);
package/dist/components/profile-dropdown/profile-dropdown.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"profile-dropdown.js","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"profile-dropdown.js","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.tsx"],"names":[],"mappings":"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"}
package/dist/components/side-navigation/side-navigation.d.ts CHANGED
@@ -7,10 +7,18 @@ export interface SideNavigationProps {
7
7
  id?: string;
8
8
  /** main navigation items */
9
9
  items?: HeaderNavigationItemData[];
10
+ /** is menu expanded */
11
+ expanded?: boolean;
10
12
  /** navigation component used for routing */
11
13
  navigationComponent?: FC<NavLinkComponentProps>;
14
+ /** expand change handler */
15
+ onExpandChange?(expanded: boolean): void;
12
16
  }
13
17
  export declare const SideNavigation: FC<SideNavigationProps>;
18
+ interface SideNavigationItemProps extends HeaderNavigationItemData {
19
+ expanded?: boolean;
20
+ }
14
21
  /** Side Navigation menu item */
15
- export declare const SideNavigationItem: FC<HeaderNavigationItemData>;
22
+ export declare const SideNavigationItem: FC<SideNavigationItemProps>;
23
+ export {};
16
24
  //# sourceMappingURL=side-navigation.d.ts.map
package/dist/components/side-navigation/side-navigation.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"side-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/side-navigation/side-navigation.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AASzF,MAAM,WAAW,mBAAmB;IAChC,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,4BAA4B;IAC5B,KAAK,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACnC,4CAA4C;IAC5C,mBAAmB,CAAC,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAqBlD,CAAC;AAEF,gCAAgC;AAChC,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,wBAAwB,CA6C3D,CAAC"}
1
+ {"version":3,"file":"side-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/side-navigation/side-navigation.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAUzF,MAAM,WAAW,mBAAmB;IAChC,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,4BAA4B;IAC5B,KAAK,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACnC,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,mBAAmB,CAAC,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAChD,4BAA4B;IAC5B,cAAc,CAAC,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CAC5C;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAqClD,CAAC;AAEF,UAAU,uBAAwB,SAAQ,wBAAwB;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,gCAAgC;AAChC,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CA6C1D,CAAC"}
package/dist/components/side-navigation/side-navigation.js CHANGED
@@ -1,18 +1,19 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Icon, Tooltip } from '@servicetitan/design-system';
2
+ import { Button, Icon } from '@servicetitan/design-system';
3
3
  import classNames from 'classnames';
4
4
  import { DefaultNavLinkComponent, NavLinkContext, useNavLink, } from '../../utils/navigation-context';
5
+ import { withTooltip } from '../../utils/with-tooltip';
5
6
  import { CounterTag } from '../counter-tag';
6
7
  import * as Styles from './side-navigation.module.less';
7
- export const SideNavigation = ({ className, id, items, navigationComponent = DefaultNavLinkComponent, }) => {
8
- return (_jsx(NavLinkContext.Provider, { value: navigationComponent, children: _jsx("div", { className: classNames(Styles.sideNav, className), id: id, "data-cy": "side-navigation", children: _jsx("div", { className: Styles.sideNavContent, children: items === null || items === void 0 ? void 0 : items.map(item => (_jsx(SideNavigationItem, Object.assign({}, item), item.id))) }) }) }));
8
+ export const SideNavigation = ({ className, expanded, id, items, navigationComponent = DefaultNavLinkComponent, onExpandChange, }) => {
9
+ return (_jsx(NavLinkContext.Provider, { value: navigationComponent, children: _jsxs("div", { className: classNames(Styles.sideNav, expanded ? Styles.sideNavExpanded : Styles.sideNavCollapsed, className), id: id, "data-cy": "side-navigation", children: [_jsx("div", { className: Styles.sideNavTop, children: _jsx(Button, { iconName: "keyboard_tab", fill: "subtle", onClick: () => onExpandChange === null || onExpandChange === void 0 ? void 0 : onExpandChange(!expanded), "aria-label": expanded ? 'Collapse menu' : 'Expand menu', children: expanded ? 'Collapse menu' : undefined }) }), _jsx("div", { className: Styles.sideNavContent, children: items === null || items === void 0 ? void 0 : items.map(item => (_jsx(SideNavigationItem, Object.assign({ expanded: expanded }, item), item.id))) })] }) }));
9
10
  };
10
11
  /** Side Navigation menu item */
11
- export const SideNavigationItem = ({ id, to, title, hint, counter, className, iconClassName, iconComponent: IconComponent, iconName, isActive, }) => {
12
+ export const SideNavigationItem = ({ id, to, title, hint, counter, className, iconClassName, iconComponent: IconComponent, iconName, isActive, expanded, }) => {
12
13
  const NavigationComponent = useNavLink();
13
14
  const iconClass = classNames(Styles.navigationIcon, iconClassName);
14
- return (_jsx(Tooltip, { el: "div", direction: "r", text: title, children: _jsxs(NavigationComponent, { "data-cy": `navigation-item-${id}`, "data-pendo": `navigation-item-${id}`, to: to, title: hint, className: classNames(Styles.navigationItem, className, {
15
- [Styles.navigationItemActive]: isActive === true,
16
- }), isActive: typeof isActive === 'function' ? isActive : undefined, activeClassName: Styles.navigationItemActive, children: [IconComponent ? (_jsx("i", { className: iconClass, children: _jsx(IconComponent, {}) })) : iconName ? (_jsx(Icon, { name: iconName, className: iconClass })) : (_jsx("i", { className: iconClass })), !!counter && (_jsx(CounterTag, { data: counter, className: Styles.navigationItemCounter }))] }, id) }));
15
+ return withTooltip(_jsxs(NavigationComponent, { "data-cy": `navigation-item-${id}`, "data-pendo": `navigation-item-${id}`, to: to, title: hint, className: classNames(Styles.navigationItem, className, {
16
+ [Styles.navigationItemActive]: isActive === true,
17
+ }), isActive: typeof isActive === 'function' ? isActive : undefined, activeClassName: Styles.navigationItemActive, children: [IconComponent ? (_jsx("i", { className: iconClass, children: _jsx(IconComponent, {}) })) : iconName ? (_jsx(Icon, { name: iconName, className: iconClass })) : (_jsx("i", { className: iconClass })), !!expanded && _jsx("span", { className: Styles.navigationItemText, children: title }), !!counter && _jsx(CounterTag, { data: counter, className: Styles.navigationItemCounter })] }, id), expanded ? undefined : title, 'r');
17
18
  };
18
19
  //# sourceMappingURL=side-navigation.js.map
package/dist/components/side-navigation/side-navigation.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"side-navigation.js","sourceRoot":"","sources":["../../../src/components/side-navigation/side-navigation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,UAAU,MAAM,YAAY,CAAC;AAGpC,OAAO,EACH,uBAAuB,EACvB,cAAc,EACd,UAAU,GACb,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,KAAK,MAAM,MAAM,+BAA+B,CAAC;AAaxD,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EACpD,SAAS,EACT,EAAE,EACF,KAAK,EACL,mBAAmB,GAAG,uBAAuB,GAChD,EAAE,EAAE;IACD,OAAO,CACH,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,mBAAmB,YAC/C,cACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,EAChD,EAAE,EAAE,EAAE,aACE,iBAAiB,YAEzB,cAAK,SAAS,EAAE,MAAM,CAAC,cAAc,YAChC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAChB,KAAC,kBAAkB,oBAAmB,IAAI,GAAjB,IAAI,CAAC,EAAE,CAAc,CACjD,CAAC,GACA,GACJ,GACgB,CAC7B,CAAC;AACN,CAAC,CAAC;AAEF,gCAAgC;AAChC,MAAM,CAAC,MAAM,kBAAkB,GAAiC,CAAC,EAC7D,EAAE,EACF,EAAE,EACF,KAAK,EACL,IAAI,EACJ,OAAO,EACP,SAAS,EACT,aAAa,EACb,aAAa,EAAE,aAAa,EAC5B,QAAQ,EACR,QAAQ,GACX,EAAE,EAAE;IACD,MAAM,mBAAmB,GAAG,UAAU,EAAE,CAAC;IACzC,MAAM,SAAS,GAAG,UAAU,CAAC,MAAM,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC;IAEnE,OAAO,CACH,KAAC,OAAO,IAAC,EAAE,EAAC,KAAK,EAAC,SAAS,EAAC,GAAG,EAAC,IAAI,EAAE,KAAK,YACvC,MAAC,mBAAmB,eACP,mBAAmB,EAAE,EAAE,gBACpB,mBAAmB,EAAE,EAAE,EAEnC,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,cAAc,EAAE,SAAS,EAAE;gBACpD,CAAC,MAAM,CAAC,oBAAoB,CAAC,EAAE,QAAQ,KAAK,IAAI;aACnD,CAAC,EACF,QAAQ,EAAE,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC/D,eAAe,EAAE,MAAM,CAAC,oBAAoB,aAE3C,aAAa,CAAC,CAAC,CAAC,CACb,YAAG,SAAS,EAAE,SAAS,YACnB,KAAC,aAAa,KAAG,GACjB,CACP,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CACX,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,GAAI,CACjD,CAAC,CAAC,CAAC,CACA,YAAG,SAAS,EAAE,SAAS,GAAI,CAC9B,EAEA,CAAC,CAAC,OAAO,IAAI,CACV,KAAC,UAAU,IAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,qBAAqB,GAAI,CACzE,KArBI,EAAE,CAsBW,GAChB,CACb,CAAC;AACN,CAAC,CAAC"}
1
+ {"version":3,"file":"side-navigation.js","sourceRoot":"","sources":["../../../src/components/side-navigation/side-navigation.tsx"],"names":[],"mappings":"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"}
package/dist/components/side-navigation/side-navigation.module.less CHANGED
@@ -2,18 +2,70 @@
2
2
  @import (reference) '@servicetitan/tokens/core/tokens.less';
3
3
 
4
4
  .side-nav {
5
- width: 56px;
6
5
  display: flex;
7
6
  flex-direction: column;
8
- align-items: center;
7
+ align-items: stretch;
8
+
9
+ -webkit-transition: width 100ms ease-in-out;
10
+ -moz-transition: width 100ms ease-in-out;
11
+ -o-transition: width 100ms ease-in-out;
12
+ transition: width 100ms ease-in-out;
9
13
 
10
14
  background-color: #ebebeb;
11
15
  border-right: 1px solid #c5c5cb;
12
16
 
17
+ .side-nav-top {
18
+ display: flex;
19
+ flex-direction: row;
20
+ align-items: center;
21
+ height: 56px;
22
+ flex-basis: 56px;
23
+ flex-grow: 0;
24
+ flex-shrink: 0;
25
+ border-bottom: 1px solid #c5c5cb;
26
+ padding-left: @spacing-1;
27
+ }
28
+
29
+ &.side-nav-collapsed {
30
+ width: 56px;
31
+
32
+ .navigation-item-counter {
33
+ position: absolute;
34
+ right: -7px;
35
+ top: -2px;
36
+ z-index: auto;
37
+ }
38
+ }
39
+
40
+ &.side-nav-expanded {
41
+ width: 240px;
42
+
43
+ .side-nav-top :global(.Button) {
44
+ padding: @spacing-1 !important;
45
+ border-radius: 12px;
46
+ cursor: pointer;
47
+
48
+ :global(.Button__content) {
49
+ overflow: hidden;
50
+ white-space: nowrap;
51
+ }
52
+
53
+ :global(.Button__icon) {
54
+ font-size: 24px;
55
+ padding-left: @spacing-0;
56
+ padding-right: @spacing-1;
57
+
58
+ svg {
59
+ transform: rotateY(180deg);
60
+ }
61
+ }
62
+ }
63
+ }
64
+
13
65
  .side-nav-content {
14
66
  display: flex;
15
67
  flex-direction: column;
16
- align-items: center;
68
+ align-items: stretch;
17
69
  overflow-y: auto;
18
70
  margin-top: @spacing-1;
19
71
  margin-bottom: @spacing-1;
@@ -21,20 +73,23 @@
21
73
  }
22
74
 
23
75
  .navigation-item {
24
- width: 56px;
25
76
  font-family: @base-font-family;
26
77
  color: #383838;
27
78
  position: relative;
28
79
  display: flex;
29
- justify-content: center;
80
+ justify-content: flex-start;
81
+ align-items: center;
30
82
  flex-wrap: nowrap;
31
83
  text-wrap: nowrap;
32
84
 
33
- padding-top: @spacing-1;
34
- padding-bottom: @spacing-1;
85
+ padding: @spacing-1;
86
+ margin-left: @spacing-1;
87
+ margin-right: @spacing-1;
88
+ border-radius: 12px;
35
89
 
36
90
  &.navigation-item-active {
37
- color: @color-purple-600 !important;
91
+ color: @color-white !important;
92
+ background-color: @color-neutral-500;
38
93
  }
39
94
 
40
95
  &:hover:not(.navigation-item-active) {
@@ -44,9 +99,13 @@
44
99
  .navigation-item-counter {
45
100
  color: @color-white;
46
101
  font-weight: @font-weight-semibold;
47
- position: absolute;
48
- right: 2px;
49
- top: -2px;
102
+ }
103
+
104
+ .navigation-item-text {
105
+ font-family: @base-font-family;
106
+ font-size: @typescale-3;
107
+ padding-left: @spacing-2;
108
+ flex: 1;
50
109
  }
51
110
  }
52
111
 
package/dist/components/side-navigation/side-navigation.stories.d.ts CHANGED
@@ -6,5 +6,5 @@ declare const _default: {
6
6
  parameters: {};
7
7
  };
8
8
  export default _default;
9
- export declare const defaultSideNavigation: () => import("react/jsx-runtime").JSX.Element;
9
+ export declare const DefaultSideNavigation: () => import("react/jsx-runtime").JSX.Element;
10
10
  //# sourceMappingURL=side-navigation.stories.d.ts.map
package/dist/components/side-navigation/side-navigation.stories.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"side-navigation.stories.d.ts","sourceRoot":"","sources":["../../../src/components/side-navigation/side-navigation.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;;;;;;;AAY1C,wBAKE;AAkDF,eAAO,MAAM,qBAAqB,+CAoBjC,CAAC"}
1
+ {"version":3,"file":"side-navigation.stories.d.ts","sourceRoot":"","sources":["../../../src/components/side-navigation/side-navigation.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;;;;;;;AAYpD,wBAKE;AAkDF,eAAO,MAAM,qBAAqB,+CAyBjC,CAAC"}
package/dist/components/side-navigation/side-navigation.stories.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { useState } from 'react';
2
3
  import { SideNavigation } from './';
3
4
  const layout = (Story) => {
4
5
  return (_jsxs("div", { className: "d-f border", style: { height: '800px' }, children: [_jsx(Story, {}), _jsx("div", { className: "flex-grow-1 flex-basis-0" })] }));
@@ -14,7 +15,7 @@ const InventoryIcon = () => (_jsxs("svg", { width: "20", xmlns: "http://www.w3.o
14
15
  const items = {
15
16
  calendar: getItem('calendar', { iconName: 'event' }),
16
17
  calls: getItem('calls', { iconName: 'local_phone', isActive: true, counter: 12 }),
17
- dashboard: getItem('dashboard', { iconName: 'odometer', isActive: true }),
18
+ dashboard: getItem('dashboard', { iconName: 'odometer' }),
18
19
  dispatch: getItem('dispatch', { iconName: 'location_disabled', counter: 1 }),
19
20
  fleet: getItem('fleet', { iconName: 'fleet-pro', title: 'Fleet Pro' }),
20
21
  followUps: getItem('followUps', { iconName: 'flag', title: 'Follow Ups' }),
@@ -30,18 +31,21 @@ const items = {
30
31
  const NavLinkMock = props => (_jsx("a", { href: props.to, target: props.target, onClick: e => {
31
32
  e.preventDefault();
32
33
  }, className: props.className, children: props.children }));
33
- export const defaultSideNavigation = () => (_jsx(SideNavigation, { navigationComponent: NavLinkMock, items: [
34
- items.dashboard,
35
- items.calendar,
36
- items.calls,
37
- items.accounting,
38
- items.dispatch,
39
- items.fleet,
40
- items.followUps,
41
- items.inventory,
42
- items.marketing,
43
- items.priceBook,
44
- items.pointOfSale,
45
- items.reports,
46
- ] }));
34
+ export const DefaultSideNavigation = () => {
35
+ const [expanded, setExpanded] = useState(false);
36
+ return (_jsx(SideNavigation, { navigationComponent: NavLinkMock, expanded: expanded, onExpandChange: setExpanded, items: [
37
+ items.dashboard,
38
+ items.calendar,
39
+ items.calls,
40
+ items.accounting,
41
+ items.dispatch,
42
+ items.fleet,
43
+ items.followUps,
44
+ items.inventory,
45
+ items.marketing,
46
+ items.priceBook,
47
+ items.pointOfSale,
48
+ items.reports,
49
+ ] }));
50
+ };
47
51
  //# sourceMappingURL=side-navigation.stories.js.map
package/dist/components/side-navigation/side-navigation.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"side-navigation.stories.js","sourceRoot":"","sources":["../../../src/components/side-navigation/side-navigation.stories.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"side-navigation.stories.js","sourceRoot":"","sources":["../../../src/components/side-navigation/side-navigation.stories.tsx"],"names":[],"mappings":"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"}
package/dist/utils/with-tooltip.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { TooltipPropsStrict } from '@servicetitan/design-system';
1
2
  import { ReactNode } from 'react';
2
- export declare const withTooltip: (element: ReactNode, tooltip?: string) => string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;
3
+ export declare const withTooltip: (element: ReactNode, tooltip: string | undefined, direction?: TooltipPropsStrict['direction']) => string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;
3
4
  //# sourceMappingURL=with-tooltip.d.ts.map
package/dist/utils/with-tooltip.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"with-tooltip.d.ts","sourceRoot":"","sources":["../../src/utils/with-tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,eAAO,MAAM,WAAW,YAAa,SAAS,YAAY,MAAM,iHAO3D,CAAC"}
1
+ {"version":3,"file":"with-tooltip.d.ts","sourceRoot":"","sources":["../../src/utils/with-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,eAAO,MAAM,WAAW,YACX,SAAS,WACT,MAAM,GAAG,SAAS,cAChB,kBAAkB,CAAC,WAAW,CAAC,iHAQzC,CAAC"}
package/dist/utils/with-tooltip.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { Tooltip } from '@servicetitan/design-system';
3
- export const withTooltip = (element, tooltip) => tooltip ? (_jsx(Tooltip, { el: "div", direction: "b", text: tooltip, children: element })) : (element);
3
+ export const withTooltip = (element, tooltip, direction = 'b') => tooltip ? (_jsx(Tooltip, { el: "div", direction: direction, text: tooltip, children: element })) : (element);
4
4
  //# sourceMappingURL=with-tooltip.js.map
package/dist/utils/with-tooltip.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"with-tooltip.js","sourceRoot":"","sources":["../../src/utils/with-tooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAGtD,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,OAAkB,EAAE,OAAgB,EAAE,EAAE,CAChE,OAAO,CAAC,CAAC,CAAC,CACN,KAAC,OAAO,IAAC,EAAE,EAAC,KAAK,EAAC,SAAS,EAAC,GAAG,EAAC,IAAI,EAAE,OAAO,YACxC,OAAO,GACF,CACb,CAAC,CAAC,CAAC,CACA,OAAO,CACV,CAAC"}
1
+ {"version":3,"file":"with-tooltip.js","sourceRoot":"","sources":["../../src/utils/with-tooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAsB,MAAM,6BAA6B,CAAC;AAG1E,MAAM,CAAC,MAAM,WAAW,GAAG,CACvB,OAAkB,EAClB,OAA2B,EAC3B,YAA6C,GAAG,EAClD,EAAE,CACA,OAAO,CAAC,CAAC,CAAC,CACN,KAAC,OAAO,IAAC,EAAE,EAAC,KAAK,EAAC,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,YAChD,OAAO,GACF,CACb,CAAC,CAAC,CAAC,CACA,OAAO,CACV,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@servicetitan/navigation",
3
- "version": "2.3.1",
3
+ "version": "2.4.1",
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": "6e800b5fe48b4e0aaf85de5f0dd8b5b9ee794968"
46
+ "gitHead": "86816f981fd26bbad59a1043b07bf375ad15c125"
47
47
  }
package/src/components/header-navigation/header-navigation.module.less CHANGED
@@ -50,6 +50,10 @@
50
50
  width: 32px;
51
51
  }
52
52
 
53
+ :global(.profile-dropdown-trigger) {
54
+ height: 40px;
55
+ }
56
+
53
57
  :global(.profile-dropdown-svg) {
54
58
  height: 28px;
55
59
  width: 28px;
@@ -138,6 +142,10 @@
138
142
  width: 24px;
139
143
  }
140
144
 
145
+ :global(.profile-dropdown-trigger) {
146
+ height: 30px;
147
+ }
148
+
141
149
  :global(.profile-dropdown-svg) {
142
150
  height: 20px;
143
151
  width: 20px;
@@ -200,6 +208,10 @@
200
208
  width: 24px;
201
209
  }
202
210
 
211
+ :global(.profile-dropdown-trigger) {
212
+ height: 32px;
213
+ }
214
+
203
215
  :global(.profile-dropdown-svg) {
204
216
  height: 20px;
205
217
  width: 20px;
package/src/components/profile-dropdown/profile-dropdown.tsx CHANGED
@@ -60,6 +60,7 @@ const ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps> = ({
60
60
  <div
61
61
  className={classNames(
62
62
  'd-f align-items-center cursor-pointer position-relative p-x-1 p-y-half',
63
+ 'profile-dropdown-trigger',
63
64
  Styles.triggerContainer,
64
65
  { [Styles.triggerContainerHintArrow]: hintArrow },
65
66
  className
package/src/components/side-navigation/side-navigation.module.less CHANGED
@@ -2,18 +2,70 @@
2
2
  @import (reference) '@servicetitan/tokens/core/tokens.less';
3
3
 
4
4
  .side-nav {
5
- width: 56px;
6
5
  display: flex;
7
6
  flex-direction: column;
8
- align-items: center;
7
+ align-items: stretch;
8
+
9
+ -webkit-transition: width 100ms ease-in-out;
10
+ -moz-transition: width 100ms ease-in-out;
11
+ -o-transition: width 100ms ease-in-out;
12
+ transition: width 100ms ease-in-out;
9
13
 
10
14
  background-color: #ebebeb;
11
15
  border-right: 1px solid #c5c5cb;
12
16
 
17
+ .side-nav-top {
18
+ display: flex;
19
+ flex-direction: row;
20
+ align-items: center;
21
+ height: 56px;
22
+ flex-basis: 56px;
23
+ flex-grow: 0;
24
+ flex-shrink: 0;
25
+ border-bottom: 1px solid #c5c5cb;
26
+ padding-left: @spacing-1;
27
+ }
28
+
29
+ &.side-nav-collapsed {
30
+ width: 56px;
31
+
32
+ .navigation-item-counter {
33
+ position: absolute;
34
+ right: -7px;
35
+ top: -2px;
36
+ z-index: auto;
37
+ }
38
+ }
39
+
40
+ &.side-nav-expanded {
41
+ width: 240px;
42
+
43
+ .side-nav-top :global(.Button) {
44
+ padding: @spacing-1 !important;
45
+ border-radius: 12px;
46
+ cursor: pointer;
47
+
48
+ :global(.Button__content) {
49
+ overflow: hidden;
50
+ white-space: nowrap;
51
+ }
52
+
53
+ :global(.Button__icon) {
54
+ font-size: 24px;
55
+ padding-left: @spacing-0;
56
+ padding-right: @spacing-1;
57
+
58
+ svg {
59
+ transform: rotateY(180deg);
60
+ }
61
+ }
62
+ }
63
+ }
64
+
13
65
  .side-nav-content {
14
66
  display: flex;
15
67
  flex-direction: column;
16
- align-items: center;
68
+ align-items: stretch;
17
69
  overflow-y: auto;
18
70
  margin-top: @spacing-1;
19
71
  margin-bottom: @spacing-1;
@@ -21,20 +73,23 @@
21
73
  }
22
74
 
23
75
  .navigation-item {
24
- width: 56px;
25
76
  font-family: @base-font-family;
26
77
  color: #383838;
27
78
  position: relative;
28
79
  display: flex;
29
- justify-content: center;
80
+ justify-content: flex-start;
81
+ align-items: center;
30
82
  flex-wrap: nowrap;
31
83
  text-wrap: nowrap;
32
84
 
33
- padding-top: @spacing-1;
34
- padding-bottom: @spacing-1;
85
+ padding: @spacing-1;
86
+ margin-left: @spacing-1;
87
+ margin-right: @spacing-1;
88
+ border-radius: 12px;
35
89
 
36
90
  &.navigation-item-active {
37
- color: @color-purple-600 !important;
91
+ color: @color-white !important;
92
+ background-color: @color-neutral-500;
38
93
  }
39
94
 
40
95
  &:hover:not(.navigation-item-active) {
@@ -44,9 +99,13 @@
44
99
  .navigation-item-counter {
45
100
  color: @color-white;
46
101
  font-weight: @font-weight-semibold;
47
- position: absolute;
48
- right: 2px;
49
- top: -2px;
102
+ }
103
+
104
+ .navigation-item-text {
105
+ font-family: @base-font-family;
106
+ font-size: @typescale-3;
107
+ padding-left: @spacing-2;
108
+ flex: 1;
50
109
  }
51
110
  }
52
111
 
package/src/components/side-navigation/side-navigation.module.less.d.ts CHANGED
@@ -3,6 +3,10 @@ export const navigationIcon: string;
3
3
  export const navigationItem: string;
4
4
  export const navigationItemActive: string;
5
5
  export const navigationItemCounter: string;
6
+ export const navigationItemText: string;
6
7
  export const sideNav: string;
8
+ export const sideNavCollapsed: string;
7
9
  export const sideNavContent: string;
10
+ export const sideNavExpanded: string;
11
+ export const sideNavTop: string;
8
12
 
package/src/components/side-navigation/side-navigation.stories.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { ComponentType, FC } from 'react';
1
+ import { ComponentType, FC, useState } from 'react';
2
2
  import { HeaderNavigationItemData, NavLinkComponentProps } from '../../utils/navigation';
3
3
  import { SideNavigation } from './';
4
4
 
@@ -38,7 +38,7 @@ const InventoryIcon = () => (
38
38
  const items = {
39
39
  calendar: getItem('calendar', { iconName: 'event' }),
40
40
  calls: getItem('calls', { iconName: 'local_phone', isActive: true, counter: 12 }),
41
- dashboard: getItem('dashboard', { iconName: 'odometer', isActive: true }),
41
+ dashboard: getItem('dashboard', { iconName: 'odometer' }),
42
42
  dispatch: getItem('dispatch', { iconName: 'location_disabled', counter: 1 }),
43
43
  fleet: getItem('fleet', { iconName: 'fleet-pro', title: 'Fleet Pro' }),
44
44
  followUps: getItem('followUps', { iconName: 'flag', title: 'Follow Ups' }),
@@ -65,24 +65,29 @@ const NavLinkMock: FC<NavLinkComponentProps> = props => (
65
65
  </a>
66
66
  );
67
67
 
68
- export const defaultSideNavigation = () => (
69
- <SideNavigation
70
- navigationComponent={NavLinkMock}
71
- items={[
72
- items.dashboard,
73
- items.calendar,
74
- items.calls,
75
- items.accounting,
76
- items.dispatch,
68
+ export const DefaultSideNavigation = () => {
69
+ const [expanded, setExpanded] = useState(false);
70
+ return (
71
+ <SideNavigation
72
+ navigationComponent={NavLinkMock}
73
+ expanded={expanded}
74
+ onExpandChange={setExpanded}
75
+ items={[
76
+ items.dashboard,
77
+ items.calendar,
78
+ items.calls,
79
+ items.accounting,
80
+ items.dispatch,
77
81
 
78
- items.fleet,
79
- items.followUps,
80
- items.inventory,
82
+ items.fleet,
83
+ items.followUps,
84
+ items.inventory,
81
85
 
82
- items.marketing,
83
- items.priceBook,
84
- items.pointOfSale,
85
- items.reports,
86
- ]}
87
- />
88
- );
86
+ items.marketing,
87
+ items.priceBook,
88
+ items.pointOfSale,
89
+ items.reports,
90
+ ]}
91
+ />
92
+ );
93
+ };
package/src/components/side-navigation/side-navigation.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { Icon, Tooltip } from '@servicetitan/design-system';
1
+ import { Button, Icon } from '@servicetitan/design-system';
2
2
  import classNames from 'classnames';
3
3
  import { FC } from 'react';
4
4
  import { HeaderNavigationItemData, NavLinkComponentProps } from '../../utils/navigation';
@@ -7,6 +7,7 @@ import {
7
7
  NavLinkContext,
8
8
  useNavLink,
9
9
  } from '../../utils/navigation-context';
10
+ import { withTooltip } from '../../utils/with-tooltip';
10
11
  import { CounterTag } from '../counter-tag';
11
12
  import * as Styles from './side-navigation.module.less';
12
13
 
@@ -17,26 +18,46 @@ export interface SideNavigationProps {
17
18
  id?: string;
18
19
  /** main navigation items */
19
20
  items?: HeaderNavigationItemData[];
21
+ /** is menu expanded */
22
+ expanded?: boolean;
20
23
  /** navigation component used for routing */
21
24
  navigationComponent?: FC<NavLinkComponentProps>;
25
+ /** expand change handler */
26
+ onExpandChange?(expanded: boolean): void;
22
27
  }
23
28
 
24
29
  export const SideNavigation: FC<SideNavigationProps> = ({
25
30
  className,
31
+ expanded,
26
32
  id,
27
33
  items,
28
34
  navigationComponent = DefaultNavLinkComponent,
35
+ onExpandChange,
29
36
  }) => {
30
37
  return (
31
38
  <NavLinkContext.Provider value={navigationComponent}>
32
39
  <div
33
- className={classNames(Styles.sideNav, className)}
40
+ className={classNames(
41
+ Styles.sideNav,
42
+ expanded ? Styles.sideNavExpanded : Styles.sideNavCollapsed,
43
+ className
44
+ )}
34
45
  id={id}
35
46
  data-cy="side-navigation"
36
47
  >
48
+ <div className={Styles.sideNavTop}>
49
+ <Button
50
+ iconName="keyboard_tab"
51
+ fill="subtle"
52
+ onClick={() => onExpandChange?.(!expanded)}
53
+ aria-label={expanded ? 'Collapse menu' : 'Expand menu'}
54
+ >
55
+ {expanded ? 'Collapse menu' : undefined}
56
+ </Button>
57
+ </div>
37
58
  <div className={Styles.sideNavContent}>
38
59
  {items?.map(item => (
39
- <SideNavigationItem key={item.id} {...item} />
60
+ <SideNavigationItem key={item.id} expanded={expanded} {...item} />
40
61
  ))}
41
62
  </div>
42
63
  </div>
@@ -44,8 +65,12 @@ export const SideNavigation: FC<SideNavigationProps> = ({
44
65
  );
45
66
  };
46
67
 
68
+ interface SideNavigationItemProps extends HeaderNavigationItemData {
69
+ expanded?: boolean;
70
+ }
71
+
47
72
  /** Side Navigation menu item */
48
- export const SideNavigationItem: FC<HeaderNavigationItemData> = ({
73
+ export const SideNavigationItem: FC<SideNavigationItemProps> = ({
49
74
  id,
50
75
  to,
51
76
  title,
@@ -56,38 +81,38 @@ export const SideNavigationItem: FC<HeaderNavigationItemData> = ({
56
81
  iconComponent: IconComponent,
57
82
  iconName,
58
83
  isActive,
84
+ expanded,
59
85
  }) => {
60
86
  const NavigationComponent = useNavLink();
61
87
  const iconClass = classNames(Styles.navigationIcon, iconClassName);
62
88
 
63
- return (
64
- <Tooltip el="div" direction="r" text={title}>
65
- <NavigationComponent
66
- data-cy={`navigation-item-${id}`}
67
- data-pendo={`navigation-item-${id}`}
68
- key={id}
69
- to={to}
70
- title={hint}
71
- className={classNames(Styles.navigationItem, className, {
72
- [Styles.navigationItemActive]: isActive === true,
73
- })}
74
- isActive={typeof isActive === 'function' ? isActive : undefined}
75
- activeClassName={Styles.navigationItemActive}
76
- >
77
- {IconComponent ? (
78
- <i className={iconClass}>
79
- <IconComponent />
80
- </i>
81
- ) : iconName ? (
82
- <Icon name={iconName} className={iconClass} />
83
- ) : (
84
- <i className={iconClass} />
85
- )}
89
+ return withTooltip(
90
+ <NavigationComponent
91
+ data-cy={`navigation-item-${id}`}
92
+ data-pendo={`navigation-item-${id}`}
93
+ key={id}
94
+ to={to}
95
+ title={hint}
96
+ className={classNames(Styles.navigationItem, className, {
97
+ [Styles.navigationItemActive]: isActive === true,
98
+ })}
99
+ isActive={typeof isActive === 'function' ? isActive : undefined}
100
+ activeClassName={Styles.navigationItemActive}
101
+ >
102
+ {IconComponent ? (
103
+ <i className={iconClass}>
104
+ <IconComponent />
105
+ </i>
106
+ ) : iconName ? (
107
+ <Icon name={iconName} className={iconClass} />
108
+ ) : (
109
+ <i className={iconClass} />
110
+ )}
86
111
 
87
- {!!counter && (
88
- <CounterTag data={counter} className={Styles.navigationItemCounter} />
89
- )}
90
- </NavigationComponent>
91
- </Tooltip>
112
+ {!!expanded && <span className={Styles.navigationItemText}>{title}</span>}
113
+ {!!counter && <CounterTag data={counter} className={Styles.navigationItemCounter} />}
114
+ </NavigationComponent>,
115
+ expanded ? undefined : title,
116
+ 'r'
92
117
  );
93
118
  };
package/src/utils/with-tooltip.tsx CHANGED
@@ -1,9 +1,13 @@
1
- import { Tooltip } from '@servicetitan/design-system';
1
+ import { Tooltip, TooltipPropsStrict } from '@servicetitan/design-system';
2
2
  import { ReactNode } from 'react';
3
3
 
4
- export const withTooltip = (element: ReactNode, tooltip?: string) =>
4
+ export const withTooltip = (
5
+ element: ReactNode,
6
+ tooltip: string | undefined,
7
+ direction: TooltipPropsStrict['direction'] = 'b'
8
+ ) =>
5
9
  tooltip ? (
6
- <Tooltip el="div" direction="b" text={tooltip}>
10
+ <Tooltip el="div" direction={direction} text={tooltip}>
7
11
  {element}
8
12
  </Tooltip>
9
13
  ) : (