@servicetitan/navigation 8.0.1 → 8.1.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.
Files changed (12) hide show
  1. package/dist/components/left-navigation/side-navigation.d.ts.map +1 -1
  2. package/dist/components/left-navigation/side-navigation.js +2 -2
  3. package/dist/components/left-navigation/side-navigation.js.map +1 -1
  4. package/dist/components/left-navigation/side-navigation.module.less +70 -27
  5. package/dist/test/data.d.ts.map +1 -1
  6. package/dist/test/data.js +1 -0
  7. package/dist/test/data.js.map +1 -1
  8. package/package.json +4 -4
  9. package/src/components/left-navigation/side-navigation.module.less +70 -27
  10. package/src/components/left-navigation/side-navigation.module.less.d.ts +1 -0
  11. package/src/components/left-navigation/side-navigation.tsx +34 -30
  12. package/src/test/data.tsx +1 -0
package/dist/components/left-navigation/side-navigation.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"side-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,EAAE,EAAwB,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,wBAAwB,EAAyB,MAAM,wBAAwB,CAAC;AAMzF,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,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACtC,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,gBAAgB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CAC7C;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAoDlD,CAAC;AAsEF,qCAAqC;AACrC,eAAO,MAAM,2BAA2B,EAAE,EAAE,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CAC7C,CAgBI,CAAC"}
1
+ {"version":3,"file":"side-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,EAAE,EAAwB,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,wBAAwB,EAAyB,MAAM,wBAAwB,CAAC;AAMzF,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,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACtC,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,gBAAgB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CAC7C;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAoDlD,CAAC;AA0EF,qCAAqC;AACrC,eAAO,MAAM,2BAA2B,EAAE,EAAE,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CAC7C,CAgBI,CAAC"}
package/dist/components/left-navigation/side-navigation.js CHANGED
@@ -14,10 +14,10 @@ export const SideNavigation = ({ className, expanded, id, items, itemsTop, onExp
14
14
  };
15
15
  /** Side Navigation menu item */
16
16
  const SideNavigationItem = ({ id, to, title, hint, counter, className, iconClassName, iconComponent: IconComponent, icon, iconActive, isActive, navigationComponent: NavigationComponent, expanded, }) => {
17
- return withTooltip(_jsxs(NavigationComponent, { "data-cy": `navigation-item-${id}`, "data-pendo": `navigation-item-${id}`, to: to, title: hint, className: classNames(Styles.navigationItem, className, {
17
+ return (_jsxs(NavigationComponent, { "data-cy": `navigation-item-${id}`, "data-pendo": `navigation-item-${id}`, to: to, title: hint, className: classNames(Styles.navigationItem, className, {
18
18
  [Styles.navigationItemActive]: isActive === true,
19
19
  [Styles.navigationItemIconState]: !!icon && !!iconActive,
20
- }), isActive: typeof isActive === 'function' ? isActive : undefined, activeClassName: Styles.navigationItemActive, children: [IconComponent ? (_jsx("i", { className: classNames(Styles.navigationIcon, iconClassName), children: _jsx(IconComponent, {}) })) : (_jsxs(Fragment, { children: [icon && (_jsx(Icon, { svg: icon, className: classNames(Styles.navigationIcon, iconClassName) })), iconActive && (_jsx(Icon, { svg: iconActive, className: classNames(Styles.navigationIcon, Styles.navigationIconActive, iconClassName) }))] })), !!expanded && _jsx("span", { className: Styles.navigationItemText, children: title }), !!counter && _jsx(CounterTag, { data: counter, className: Styles.navigationItemCounter })] }, id), expanded ? undefined : title, 'right');
20
+ }), isActive: typeof isActive === 'function' ? isActive : undefined, activeClassName: Styles.navigationItemActive, children: [_jsxs("div", { className: Styles.navigationItemIconWrapper, children: [IconComponent ? (_jsx("i", { className: classNames(Styles.navigationIcon, iconClassName), children: _jsx(IconComponent, {}) })) : (_jsxs(Fragment, { children: [icon && (_jsx(Icon, { svg: icon, className: classNames(Styles.navigationIcon, iconClassName) })), iconActive && (_jsx(Icon, { svg: iconActive, className: classNames(Styles.navigationIcon, Styles.navigationIconActive, iconClassName) }))] })), !!expanded && _jsx("div", { className: Styles.navigationItemText, children: title }), !!counter && (_jsx(CounterTag, { data: counter, className: Styles.navigationItemCounter }))] }), !expanded && _jsx("div", { className: Styles.navigationItemText, children: title })] }, id));
21
21
  };
22
22
  /** Side Navigation options toggle */
23
23
  export const SideNavigationOptionsToggle = ({ expanded, onExpandedChange }) => withTooltip(_jsxs("div", { "data-cy": "navigation-left-options", "data-pendo": "navigation-left-options", className: classNames(Styles.optionsItem), onClick: () => onExpandedChange(!expanded), children: [_jsx("div", { className: Styles.optionsIconWrapper, children: _jsx(Icon, { className: Styles.optionsIcon, svg: expanded ? SvgCollapse : SvgExpand }) }), !!expanded && _jsx("span", { className: Styles.optionsItemText, children: "Collapse Menu" })] }), expanded ? undefined : 'Expand Menu', 'right');
package/dist/components/left-navigation/side-navigation.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"side-navigation.js","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"side-navigation.js","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,WAAW,MAAM,6DAA6D,CAAC;AACtF,OAAO,SAAS,MAAM,2DAA2D,CAAC;AAClF,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAM,QAAQ,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAC5E,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,KAAK,MAAM,MAAM,+BAA+B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAiB7C,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EACpD,SAAS,EACT,QAAQ,EACR,EAAE,EACF,KAAK,EACL,QAAQ,EACR,gBAAgB,GACnB,EAAE,EAAE;IACD,MAAM,mBAAmB,GAAG,UAAU,CAAC,0BAA0B,CAAC,CAAC;IACnE,OAAO,CACH,eACI,SAAS,EAAE,UAAU,CACjB,MAAM,CAAC,OAAO,EACd,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,EACtD,SAAS,CACZ,EACD,EAAE,EAAE,EAAE,aACE,iBAAiB,aAExB,CAAC,CAAC,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,MAAM,CAAA,IAAI,CACnB,MAAC,QAAQ,eACL,cAAK,SAAS,EAAE,MAAM,CAAC,UAAU,aAAU,sBAAsB,YAC5D,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAClB,KAAC,kBAAkB,IAEf,QAAQ,EAAE,QAAQ,EAClB,mBAAmB,EAAE,mBAAmB,KACpC,IAAI,IAHH,IAAI,CAAC,EAAE,CAId,CACL,CAAC,GACA,EACN,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,GAAI,IAC3B,CACd,EACD,cAAK,SAAS,EAAE,MAAM,CAAC,cAAc,aAAU,kBAAkB,YAC5D,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAChB,KAAC,kBAAkB,IAEf,QAAQ,EAAE,QAAQ,EAClB,mBAAmB,EAAE,mBAAmB,KACpC,IAAI,IAHH,IAAI,CAAC,EAAE,CAId,CACL,CAAC,GACA,EACN,cAAK,SAAS,EAAE,MAAM,CAAC,aAAa,YAChC,KAAC,2BAA2B,IACxB,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,gBAAgB,GACpC,GACA,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAOF,gCAAgC;AAChC,MAAM,kBAAkB,GAAgC,CAAC,EACrD,EAAE,EACF,EAAE,EACF,KAAK,EACL,IAAI,EACJ,OAAO,EACP,SAAS,EACT,aAAa,EACb,aAAa,EAAE,aAAa,EAC5B,IAAI,EACJ,UAAU,EACV,QAAQ,EACR,mBAAmB,EAAE,mBAAmB,EACxC,QAAQ,GACX,EAAE,EAAE;IACD,OAAO,CACH,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;YACpD,CAAC,MAAM,CAAC,oBAAoB,CAAC,EAAE,QAAQ,KAAK,IAAI;YAChD,CAAC,MAAM,CAAC,uBAAuB,CAAC,EAAE,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,UAAU;SAC3D,CAAC,EACF,QAAQ,EAAE,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC/D,eAAe,EAAE,MAAM,CAAC,oBAAoB,aAE5C,eAAK,SAAS,EAAE,MAAM,CAAC,yBAAyB,aAC3C,aAAa,CAAC,CAAC,CAAC,CACb,YAAG,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,cAAc,EAAE,aAAa,CAAC,YAC1D,KAAC,aAAa,KAAG,GACjB,CACP,CAAC,CAAC,CAAC,CACA,MAAC,QAAQ,eACJ,IAAI,IAAI,CACL,KAAC,IAAI,IACD,GAAG,EAAE,IAAI,EACT,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,cAAc,EAAE,aAAa,CAAC,GAC7D,CACL,EACA,UAAU,IAAI,CACX,KAAC,IAAI,IACD,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,UAAU,CACjB,MAAM,CAAC,cAAc,EACrB,MAAM,CAAC,oBAAoB,EAC3B,aAAa,CAChB,GACH,CACL,IACM,CACd,EAEA,CAAC,CAAC,QAAQ,IAAI,cAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,YAAG,KAAK,GAAO,EACtE,CAAC,CAAC,OAAO,IAAI,CACV,KAAC,UAAU,IAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,qBAAqB,GAAI,CACzE,IACC,EAEL,CAAC,QAAQ,IAAI,cAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,YAAG,KAAK,GAAO,KA1CjE,EAAE,CA2CW,CACzB,CAAC;AACN,CAAC,CAAC;AAEF,qCAAqC;AACrC,MAAM,CAAC,MAAM,2BAA2B,GAGnC,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,EAAE,EAAE,CACpC,WAAW,CACP,0BACY,yBAAyB,gBACtB,yBAAyB,EACpC,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,WAAW,CAAC,EACzC,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,CAAC,QAAQ,CAAC,aAE1C,cAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,YACrC,KAAC,IAAI,IAAC,SAAS,EAAE,MAAM,CAAC,WAAW,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,GAAI,GAC9E,EAEL,CAAC,CAAC,QAAQ,IAAI,eAAM,SAAS,EAAE,MAAM,CAAC,eAAe,8BAAsB,IAC1E,EACN,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,EACpC,OAAO,CACV,CAAC"}
package/dist/components/left-navigation/side-navigation.module.less CHANGED
@@ -5,7 +5,8 @@
5
5
  @text-color-active: var(--colorsTextPrimarySubdued, @color-blue-300);
6
6
  @border-color: var(--colorsTextOnGrey, @color-neutral-200);
7
7
  @bg-color: var(--colorsSurfaceInvertedStrong, @color-neutral-400);
8
- @bg-color-hover: rgba(255, 255, 255, 0.12);
8
+ @bg-color-hover: rgba(255, 255, 255, 0.08);
9
+ @bg-color-active: rgba(120, 187, 250, 0.2);
9
10
 
10
11
  .side-nav {
11
12
  display: flex;
@@ -20,8 +21,8 @@
20
21
  background-color: @bg-color;
21
22
 
22
23
  .side-nav-bottom {
23
- padding-left: @spacing-1;
24
- padding-right: @spacing-1;
24
+ margin-left: @spacing-1;
25
+ margin-right: @spacing-1;
25
26
  border-top: 1px solid @border-color;
26
27
 
27
28
  display: flex;
@@ -30,29 +31,70 @@
30
31
  }
31
32
 
32
33
  &.side-nav-slim {
33
- width: 56px;
34
+ width: 64px;
34
35
 
35
36
  .navigation-item-counter {
36
37
  position: absolute;
37
- right: -7px;
38
- top: -2px;
38
+ right: 2px;
39
+ top: 0;
39
40
  z-index: auto;
40
41
  }
42
+
43
+ .navigation-item {
44
+ flex-direction: column;
45
+ width: 64px;
46
+ overflow-x: hidden;
47
+
48
+ .navigation-item-icon-wrapper {
49
+ flex: 1;
50
+ margin-left: @spacing-half;
51
+ margin-right: @spacing-half;
52
+ }
53
+
54
+ .navigation-item-text {
55
+ font-family: @base-font-family;
56
+ font-size: 11px;
57
+ font-weight: @font-weight-semibold;
58
+ margin-left: @spacing-half;
59
+ margin-right: @spacing-half;
60
+ margin-bottom: @spacing-half;
61
+ text-align: center;
62
+ }
63
+ }
41
64
  }
42
65
 
43
66
  &.side-nav-expanded {
44
67
  width: 204px;
68
+
69
+ .navigation-item {
70
+ flex-direction: row;
71
+
72
+ .navigation-item-icon-wrapper {
73
+ flex: 1;
74
+ margin-left: @spacing-1;
75
+ margin-right: @spacing-1;
76
+ }
77
+
78
+ .navigation-item-text {
79
+ font-family: @base-font-family;
80
+ font-size: @typescale-3;
81
+ padding-left: @spacing-2;
82
+ flex: 1;
83
+ }
84
+ }
45
85
  }
46
86
 
47
87
  .side-nav-content {
48
- display: flex;
49
- flex-direction: column;
50
- align-items: stretch;
51
88
  overflow-y: auto;
52
89
  padding-top: @spacing-1;
53
90
  padding-bottom: @spacing-1;
54
91
  flex-grow: 1;
55
92
  flex-basis: 0;
93
+
94
+ &::-webkit-scrollbar {
95
+ width: 0;
96
+ height: 0;
97
+ }
56
98
  }
57
99
 
58
100
  .side-nav-top {
@@ -69,19 +111,27 @@
69
111
  color: @text-color;
70
112
  position: relative;
71
113
  display: flex;
114
+ flex-direction: row;
72
115
  justify-content: flex-start;
73
116
  align-items: center;
74
- flex-wrap: nowrap;
75
- text-wrap: nowrap;
76
117
 
77
- padding: @spacing-1;
78
- margin-left: @spacing-1;
79
- margin-right: @spacing-1;
80
- border-radius: 12px;
118
+ .navigation-item-icon-wrapper {
119
+ display: flex;
120
+ justify-content: flex-start;
121
+ align-items: center;
122
+ flex-wrap: nowrap;
123
+ text-wrap: nowrap;
124
+
125
+ padding: @spacing-1;
126
+ border-radius: 12px;
127
+ }
81
128
 
82
129
  &.navigation-item-active {
83
- background-color: rgba(2, 101, 220, 0.3);
84
130
  color: @text-color-active;
131
+
132
+ .navigation-item-icon-wrapper {
133
+ background-color: @bg-color-active;
134
+ }
85
135
  }
86
136
 
87
137
  &.navigation-item-icon-state.navigation-item-active {
@@ -94,7 +144,7 @@
94
144
  }
95
145
  }
96
146
 
97
- &:hover:not(.navigation-item-active) {
147
+ &:hover:not(.navigation-item-active) .navigation-item-icon-wrapper {
98
148
  background-color: @bg-color-hover;
99
149
  }
100
150
 
@@ -102,13 +152,6 @@
102
152
  color: @color-white;
103
153
  font-weight: @font-weight-semibold;
104
154
  }
105
-
106
- .navigation-item-text {
107
- font-family: @base-font-family;
108
- font-size: @typescale-3;
109
- padding-left: @spacing-2;
110
- flex: 1;
111
- }
112
155
  }
113
156
 
114
157
  .navigation-icon[data-anv][data-anv] {
@@ -136,7 +179,7 @@
136
179
  flex-wrap: nowrap;
137
180
  text-wrap: nowrap;
138
181
  cursor: pointer;
139
- height: 40px;
182
+ height: 48px;
140
183
 
141
184
  margin-top: @spacing-1;
142
185
  margin-bottom: @spacing-1;
@@ -149,8 +192,8 @@
149
192
  .options-icon-wrapper {
150
193
  height: 24px;
151
194
  width: 24px;
152
- padding-left: @spacing-1;
153
- padding-right: @spacing-1;
195
+ padding-left: 12px;
196
+ padding-right: 12px;
154
197
 
155
198
  .options-icon[data-anv][data-anv] > svg {
156
199
  height: 24px;
package/dist/test/data.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../src/test/data.tsx"],"names":[],"mappings":"AAwCA,OAAO,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAItF,eAAO,MAAM,WAAW,oHAwBvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,UAAW,GAAG,4CAM1C,CAAC;AAEF,eAAO,MAAM,SAAS,UAAW,GAAG,4CAInC,CAAC;AAEF,eAAO,MAAM,aAAa,+CAKzB,CAAC;AAEF,eAAO,MAAM,UAAU,+CAetB,CAAC;AAeF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;CA4EjB,CAAC;AAEF,eAAO,MAAM,sBAAsB,+CAuBlC,CAAC"}
1
+ {"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../src/test/data.tsx"],"names":[],"mappings":"AAwCA,OAAO,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAItF,eAAO,MAAM,WAAW,oHAwBvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,UAAW,GAAG,4CAM1C,CAAC;AAEF,eAAO,MAAM,SAAS,UAAW,GAAG,4CAInC,CAAC;AAEF,eAAO,MAAM,aAAa,+CAKzB,CAAC;AAEF,eAAO,MAAM,UAAU,+CAetB,CAAC;AAeF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;CA6EjB,CAAC;AAEF,eAAO,MAAM,sBAAsB,+CAuBlC,CAAC"}
package/dist/test/data.js CHANGED
@@ -123,6 +123,7 @@ export const items = {
123
123
  iconName: 'cash-register',
124
124
  icon: SvgPos,
125
125
  iconActive: SvgPosActive,
126
+ title: 'Point Of Sale',
126
127
  }),
127
128
  projects: getItem('projects', {
128
129
  iconName: 'folder_special',
package/dist/test/data.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"data.js","sourceRoot":"","sources":["../../src/test/data.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"data.js","sourceRoot":"","sources":["../../src/test/data.tsx"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@servicetitan/navigation",
3
- "version": "8.0.1",
3
+ "version": "8.1.0",
4
4
  "description": "Navigation components",
5
5
  "repository": {
6
6
  "type": "git",
@@ -26,9 +26,9 @@
26
26
  "react": ">=18.0.0"
27
27
  },
28
28
  "devDependencies": {
29
- "@servicetitan/anvil2": "~1.16.3",
29
+ "@servicetitan/anvil2": "~1.18.0",
30
30
  "@servicetitan/design-system": "~14.4.3",
31
- "@servicetitan/react-ioc": "^24.0.3",
31
+ "@servicetitan/react-ioc": "^28.3.3",
32
32
  "@servicetitan/tokens": ">=12.1.11",
33
33
  "@testing-library/react": "^14.0.0",
34
34
  "@types/react": "~18.2.55",
@@ -43,5 +43,5 @@
43
43
  "less": true,
44
44
  "webpack": false
45
45
  },
46
- "gitHead": "f702a7f3062fafb5460f9c149744c2431d167284"
46
+ "gitHead": "40c06e3d5cdef70eb72cae84f10544bfce634d3d"
47
47
  }
package/src/components/left-navigation/side-navigation.module.less CHANGED
@@ -5,7 +5,8 @@
5
5
  @text-color-active: var(--colorsTextPrimarySubdued, @color-blue-300);
6
6
  @border-color: var(--colorsTextOnGrey, @color-neutral-200);
7
7
  @bg-color: var(--colorsSurfaceInvertedStrong, @color-neutral-400);
8
- @bg-color-hover: rgba(255, 255, 255, 0.12);
8
+ @bg-color-hover: rgba(255, 255, 255, 0.08);
9
+ @bg-color-active: rgba(120, 187, 250, 0.2);
9
10
 
10
11
  .side-nav {
11
12
  display: flex;
@@ -20,8 +21,8 @@
20
21
  background-color: @bg-color;
21
22
 
22
23
  .side-nav-bottom {
23
- padding-left: @spacing-1;
24
- padding-right: @spacing-1;
24
+ margin-left: @spacing-1;
25
+ margin-right: @spacing-1;
25
26
  border-top: 1px solid @border-color;
26
27
 
27
28
  display: flex;
@@ -30,29 +31,70 @@
30
31
  }
31
32
 
32
33
  &.side-nav-slim {
33
- width: 56px;
34
+ width: 64px;
34
35
 
35
36
  .navigation-item-counter {
36
37
  position: absolute;
37
- right: -7px;
38
- top: -2px;
38
+ right: 2px;
39
+ top: 0;
39
40
  z-index: auto;
40
41
  }
42
+
43
+ .navigation-item {
44
+ flex-direction: column;
45
+ width: 64px;
46
+ overflow-x: hidden;
47
+
48
+ .navigation-item-icon-wrapper {
49
+ flex: 1;
50
+ margin-left: @spacing-half;
51
+ margin-right: @spacing-half;
52
+ }
53
+
54
+ .navigation-item-text {
55
+ font-family: @base-font-family;
56
+ font-size: 11px;
57
+ font-weight: @font-weight-semibold;
58
+ margin-left: @spacing-half;
59
+ margin-right: @spacing-half;
60
+ margin-bottom: @spacing-half;
61
+ text-align: center;
62
+ }
63
+ }
41
64
  }
42
65
 
43
66
  &.side-nav-expanded {
44
67
  width: 204px;
68
+
69
+ .navigation-item {
70
+ flex-direction: row;
71
+
72
+ .navigation-item-icon-wrapper {
73
+ flex: 1;
74
+ margin-left: @spacing-1;
75
+ margin-right: @spacing-1;
76
+ }
77
+
78
+ .navigation-item-text {
79
+ font-family: @base-font-family;
80
+ font-size: @typescale-3;
81
+ padding-left: @spacing-2;
82
+ flex: 1;
83
+ }
84
+ }
45
85
  }
46
86
 
47
87
  .side-nav-content {
48
- display: flex;
49
- flex-direction: column;
50
- align-items: stretch;
51
88
  overflow-y: auto;
52
89
  padding-top: @spacing-1;
53
90
  padding-bottom: @spacing-1;
54
91
  flex-grow: 1;
55
92
  flex-basis: 0;
93
+
94
+ &::-webkit-scrollbar {
95
+ width: 0;
96
+ height: 0;
97
+ }
56
98
  }
57
99
 
58
100
  .side-nav-top {
@@ -69,19 +111,27 @@
69
111
  color: @text-color;
70
112
  position: relative;
71
113
  display: flex;
114
+ flex-direction: row;
72
115
  justify-content: flex-start;
73
116
  align-items: center;
74
- flex-wrap: nowrap;
75
- text-wrap: nowrap;
76
117
 
77
- padding: @spacing-1;
78
- margin-left: @spacing-1;
79
- margin-right: @spacing-1;
80
- border-radius: 12px;
118
+ .navigation-item-icon-wrapper {
119
+ display: flex;
120
+ justify-content: flex-start;
121
+ align-items: center;
122
+ flex-wrap: nowrap;
123
+ text-wrap: nowrap;
124
+
125
+ padding: @spacing-1;
126
+ border-radius: 12px;
127
+ }
81
128
 
82
129
  &.navigation-item-active {
83
- background-color: rgba(2, 101, 220, 0.3);
84
130
  color: @text-color-active;
131
+
132
+ .navigation-item-icon-wrapper {
133
+ background-color: @bg-color-active;
134
+ }
85
135
  }
86
136
 
87
137
  &.navigation-item-icon-state.navigation-item-active {
@@ -94,7 +144,7 @@
94
144
  }
95
145
  }
96
146
 
97
- &:hover:not(.navigation-item-active) {
147
+ &:hover:not(.navigation-item-active) .navigation-item-icon-wrapper {
98
148
  background-color: @bg-color-hover;
99
149
  }
100
150
 
@@ -102,13 +152,6 @@
102
152
  color: @color-white;
103
153
  font-weight: @font-weight-semibold;
104
154
  }
105
-
106
- .navigation-item-text {
107
- font-family: @base-font-family;
108
- font-size: @typescale-3;
109
- padding-left: @spacing-2;
110
- flex: 1;
111
- }
112
155
  }
113
156
 
114
157
  .navigation-icon[data-anv][data-anv] {
@@ -136,7 +179,7 @@
136
179
  flex-wrap: nowrap;
137
180
  text-wrap: nowrap;
138
181
  cursor: pointer;
139
- height: 40px;
182
+ height: 48px;
140
183
 
141
184
  margin-top: @spacing-1;
142
185
  margin-bottom: @spacing-1;
@@ -149,8 +192,8 @@
149
192
  .options-icon-wrapper {
150
193
  height: 24px;
151
194
  width: 24px;
152
- padding-left: @spacing-1;
153
- padding-right: @spacing-1;
195
+ padding-left: 12px;
196
+ padding-right: 12px;
154
197
 
155
198
  .options-icon[data-anv][data-anv] > svg {
156
199
  height: 24px;
package/src/components/left-navigation/side-navigation.module.less.d.ts CHANGED
@@ -6,6 +6,7 @@ export const navigationItem: string;
6
6
  export const navigationItemActive: string;
7
7
  export const navigationItemCounter: string;
8
8
  export const navigationItemIconState: string;
9
+ export const navigationItemIconWrapper: string;
9
10
  export const navigationItemText: string;
10
11
  export const optionsIcon: string;
11
12
  export const optionsIconWrapper: string;
package/src/components/left-navigation/side-navigation.tsx CHANGED
@@ -99,7 +99,7 @@ const SideNavigationItem: FC<SideNavigationItemProps> = ({
99
99
  navigationComponent: NavigationComponent,
100
100
  expanded,
101
101
  }) => {
102
- return withTooltip(
102
+ return (
103
103
  <NavigationComponent
104
104
  data-cy={`navigation-item-${id}`}
105
105
  data-pendo={`navigation-item-${id}`}
@@ -113,36 +113,40 @@ const SideNavigationItem: FC<SideNavigationItemProps> = ({
113
113
  isActive={typeof isActive === 'function' ? isActive : undefined}
114
114
  activeClassName={Styles.navigationItemActive}
115
115
  >
116
- {IconComponent ? (
117
- <i className={classNames(Styles.navigationIcon, iconClassName)}>
118
- <IconComponent />
119
- </i>
120
- ) : (
121
- <Fragment>
122
- {icon && (
123
- <Icon
124
- svg={icon}
125
- className={classNames(Styles.navigationIcon, iconClassName)}
126
- />
127
- )}
128
- {iconActive && (
129
- <Icon
130
- svg={iconActive}
131
- className={classNames(
132
- Styles.navigationIcon,
133
- Styles.navigationIconActive,
134
- iconClassName
135
- )}
136
- />
137
- )}
138
- </Fragment>
139
- )}
116
+ <div className={Styles.navigationItemIconWrapper}>
117
+ {IconComponent ? (
118
+ <i className={classNames(Styles.navigationIcon, iconClassName)}>
119
+ <IconComponent />
120
+ </i>
121
+ ) : (
122
+ <Fragment>
123
+ {icon && (
124
+ <Icon
125
+ svg={icon}
126
+ className={classNames(Styles.navigationIcon, iconClassName)}
127
+ />
128
+ )}
129
+ {iconActive && (
130
+ <Icon
131
+ svg={iconActive}
132
+ className={classNames(
133
+ Styles.navigationIcon,
134
+ Styles.navigationIconActive,
135
+ iconClassName
136
+ )}
137
+ />
138
+ )}
139
+ </Fragment>
140
+ )}
140
141
 
141
- {!!expanded && <span className={Styles.navigationItemText}>{title}</span>}
142
- {!!counter && <CounterTag data={counter} className={Styles.navigationItemCounter} />}
143
- </NavigationComponent>,
144
- expanded ? undefined : title,
145
- 'right'
142
+ {!!expanded && <div className={Styles.navigationItemText}>{title}</div>}
143
+ {!!counter && (
144
+ <CounterTag data={counter} className={Styles.navigationItemCounter} />
145
+ )}
146
+ </div>
147
+
148
+ {!expanded && <div className={Styles.navigationItemText}>{title}</div>}
149
+ </NavigationComponent>
146
150
  );
147
151
  };
148
152
 
package/src/test/data.tsx CHANGED
@@ -179,6 +179,7 @@ export const items = {
179
179
  iconName: 'cash-register',
180
180
  icon: SvgPos,
181
181
  iconActive: SvgPosActive,
182
+ title: 'Point Of Sale',
182
183
  }),
183
184
  projects: getItem('projects', {
184
185
  iconName: 'folder_special',