@servicetitan/navigation 8.1.1 → 8.1.3

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.
@@ -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;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"}
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,CAqDlD,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"}
@@ -10,7 +10,7 @@ import * as Styles from './side-navigation.module.less';
10
10
  import { withTooltip } from './with-tooltip';
11
11
  export const SideNavigation = ({ className, expanded, id, items, itemsTop, onExpandedChange, }) => {
12
12
  const NavigationComponent = useContext(NavigationComponentContext);
13
- return (_jsxs("div", { className: classNames(Styles.sideNav, expanded ? Styles.sideNavExpanded : Styles.sideNavSlim, className), id: id, "data-cy": "side-navigation", children: [!!(itemsTop === null || itemsTop === void 0 ? void 0 : itemsTop.length) && (_jsxs(Fragment, { children: [_jsx("div", { className: Styles.sideNavTop, "data-cy": "navigation-items-top", children: itemsTop.map(item => (_jsx(SideNavigationItem, { expanded: expanded, navigationComponent: NavigationComponent, ...item }, item.id))) }), _jsx("div", { className: Styles.divider })] })), _jsx("div", { className: Styles.sideNavContent, "data-cy": "navigation-items", children: items === null || items === void 0 ? void 0 : items.map(item => (_jsx(SideNavigationItem, { expanded: expanded, navigationComponent: NavigationComponent, ...item }, item.id))) }), _jsx("div", { className: Styles.sideNavBottom, children: _jsx(SideNavigationOptionsToggle, { expanded: expanded, onExpandedChange: onExpandedChange }) })] }));
13
+ return (_jsxs("div", { className: classNames(Styles.sideNav, expanded ? Styles.sideNavExpanded : Styles.sideNavSlim, className), id: id, "data-cy": "side-navigation", children: [!!(itemsTop === null || itemsTop === void 0 ? void 0 : itemsTop.length) && (_jsxs(Fragment, { children: [_jsx("div", { className: Styles.sideNavTop, "data-cy": "navigation-items-top", children: itemsTop.map(item => (_jsx(SideNavigationItem, { expanded: expanded, navigationComponent: NavigationComponent, ...item }, item.id))) }), _jsx("div", { className: Styles.divider })] })), _jsx("div", { className: Styles.sideNavContent, "data-cy": "navigation-items", children: items === null || items === void 0 ? void 0 : items.map(item => (_jsx(SideNavigationItem, { expanded: expanded, navigationComponent: NavigationComponent, ...item }, item.id))) }), _jsx("div", { className: Styles.divider }), _jsx("div", { className: Styles.sideNavBottom, children: _jsx(SideNavigationOptionsToggle, { expanded: expanded, onExpandedChange: onExpandedChange }) })] }));
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, }) => {
@@ -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":"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"}
@@ -20,16 +20,6 @@
20
20
 
21
21
  background-color: @bg-color;
22
22
 
23
- .side-nav-bottom {
24
- margin-left: @spacing-1;
25
- margin-right: @spacing-1;
26
- border-top: 1px solid @border-color;
27
-
28
- display: flex;
29
- flex-direction: column;
30
- justify-content: center;
31
- }
32
-
33
23
  &.side-nav-slim {
34
24
  width: 64px;
35
25
 
@@ -38,7 +28,7 @@
38
28
  width: 64px;
39
29
  overflow-x: hidden;
40
30
  padding-top: @spacing-1;
41
- margin-bottom: @spacing-1;
31
+ margin-bottom: @spacing-half;
42
32
 
43
33
  .navigation-item-counter {
44
34
  position: absolute;
@@ -51,7 +41,6 @@
51
41
 
52
42
  .navigation-item-icon-wrapper {
53
43
  flex: 1;
54
- border-radius: 8px;
55
44
  padding: @spacing-half;
56
45
  }
57
46
 
@@ -59,23 +48,33 @@
59
48
  font-family: @base-font-family;
60
49
  font-size: 11px;
61
50
  line-height: 11px;
62
- margin: 2px @spacing-half @spacing-half;
51
+ margin: 2px @spacing-half @spacing-0;
63
52
  text-align: center;
64
53
  }
65
54
  }
55
+
56
+ .options-item {
57
+ margin-left: @spacing-2;
58
+ margin-right: @spacing-2;
59
+
60
+ .options-icon-wrapper {
61
+ padding-left: @spacing-half;
62
+ padding-right: @spacing-half;
63
+ }
64
+ }
66
65
  }
67
66
 
68
67
  &.side-nav-expanded {
69
- width: 204px;
68
+ width: 212px;
70
69
 
71
70
  .navigation-item {
72
71
  flex-direction: row;
72
+ margin-bottom: @spacing-half;
73
+ margin-left: @spacing-1;
74
+ margin-right: @spacing-1;
73
75
 
74
76
  .navigation-item-icon-wrapper {
75
77
  flex: 1;
76
- margin-left: @spacing-1;
77
- margin-right: @spacing-1;
78
- border-radius: 12px;
79
78
  padding: @spacing-1;
80
79
  }
81
80
 
@@ -86,6 +85,22 @@
86
85
  flex: 1;
87
86
  }
88
87
  }
88
+
89
+ .options-item {
90
+ margin-left: @spacing-1;
91
+ margin-right: @spacing-1;
92
+
93
+ .options-icon-wrapper {
94
+ padding-left: @spacing-1;
95
+ padding-right: @spacing-1;
96
+ }
97
+
98
+ .options-item-text {
99
+ font-family: @base-font-family;
100
+ font-size: @typescale-3;
101
+ padding-left: @spacing-1;
102
+ }
103
+ }
89
104
  }
90
105
 
91
106
  .side-nav-content {
@@ -108,6 +123,12 @@
108
123
  padding-top: @spacing-1;
109
124
  padding-bottom: @spacing-1;
110
125
  }
126
+
127
+ .side-nav-bottom {
128
+ display: flex;
129
+ flex-direction: column;
130
+ justify-content: center;
131
+ }
111
132
  }
112
133
 
113
134
  .navigation-item {
@@ -120,6 +141,7 @@
120
141
  align-items: center;
121
142
 
122
143
  .navigation-item-icon-wrapper {
144
+ border-radius: @border-radius-2;
123
145
  display: flex;
124
146
  justify-content: flex-start;
125
147
  align-items: center;
@@ -180,11 +202,11 @@
180
202
  flex-wrap: nowrap;
181
203
  text-wrap: nowrap;
182
204
  cursor: pointer;
183
- height: 48px;
205
+ height: 32px;
184
206
 
185
- margin-top: @spacing-1;
186
- margin-bottom: @spacing-1;
187
- border-radius: 8px;
207
+ margin-top: @spacing-2;
208
+ margin-bottom: @spacing-2;
209
+ border-radius: @border-radius-2;
188
210
 
189
211
  &:hover {
190
212
  background-color: @bg-color-hover;
@@ -193,8 +215,6 @@
193
215
  .options-icon-wrapper {
194
216
  height: 24px;
195
217
  width: 24px;
196
- padding-left: 12px;
197
- padding-right: 12px;
198
218
 
199
219
  .options-icon[data-anv][data-anv] > svg {
200
220
  height: 24px;
@@ -206,13 +226,12 @@
206
226
  .options-item-text {
207
227
  font-family: @base-font-family;
208
228
  font-size: @typescale-3;
209
- padding-left: @spacing-1;
210
229
  flex: 1;
211
230
  }
212
231
  }
213
232
 
214
233
  .divider {
215
234
  border-top: 1px solid @border-color;
216
- margin-left: 12px;
217
- margin-right: 12px;
235
+ margin-left: @spacing-1;
236
+ margin-right: @spacing-1;
218
237
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@servicetitan/navigation",
3
- "version": "8.1.1",
3
+ "version": "8.1.3",
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": "6c12f4949c5aeb824f1775d53dd0890282ccbc47"
46
+ "gitHead": "c9ff96061565ac25b6de1c242ba95eee5c036a63"
47
47
  }
@@ -20,16 +20,6 @@
20
20
 
21
21
  background-color: @bg-color;
22
22
 
23
- .side-nav-bottom {
24
- margin-left: @spacing-1;
25
- margin-right: @spacing-1;
26
- border-top: 1px solid @border-color;
27
-
28
- display: flex;
29
- flex-direction: column;
30
- justify-content: center;
31
- }
32
-
33
23
  &.side-nav-slim {
34
24
  width: 64px;
35
25
 
@@ -38,7 +28,7 @@
38
28
  width: 64px;
39
29
  overflow-x: hidden;
40
30
  padding-top: @spacing-1;
41
- margin-bottom: @spacing-1;
31
+ margin-bottom: @spacing-half;
42
32
 
43
33
  .navigation-item-counter {
44
34
  position: absolute;
@@ -51,7 +41,6 @@
51
41
 
52
42
  .navigation-item-icon-wrapper {
53
43
  flex: 1;
54
- border-radius: 8px;
55
44
  padding: @spacing-half;
56
45
  }
57
46
 
@@ -59,23 +48,33 @@
59
48
  font-family: @base-font-family;
60
49
  font-size: 11px;
61
50
  line-height: 11px;
62
- margin: 2px @spacing-half @spacing-half;
51
+ margin: 2px @spacing-half @spacing-0;
63
52
  text-align: center;
64
53
  }
65
54
  }
55
+
56
+ .options-item {
57
+ margin-left: @spacing-2;
58
+ margin-right: @spacing-2;
59
+
60
+ .options-icon-wrapper {
61
+ padding-left: @spacing-half;
62
+ padding-right: @spacing-half;
63
+ }
64
+ }
66
65
  }
67
66
 
68
67
  &.side-nav-expanded {
69
- width: 204px;
68
+ width: 212px;
70
69
 
71
70
  .navigation-item {
72
71
  flex-direction: row;
72
+ margin-bottom: @spacing-half;
73
+ margin-left: @spacing-1;
74
+ margin-right: @spacing-1;
73
75
 
74
76
  .navigation-item-icon-wrapper {
75
77
  flex: 1;
76
- margin-left: @spacing-1;
77
- margin-right: @spacing-1;
78
- border-radius: 12px;
79
78
  padding: @spacing-1;
80
79
  }
81
80
 
@@ -86,6 +85,22 @@
86
85
  flex: 1;
87
86
  }
88
87
  }
88
+
89
+ .options-item {
90
+ margin-left: @spacing-1;
91
+ margin-right: @spacing-1;
92
+
93
+ .options-icon-wrapper {
94
+ padding-left: @spacing-1;
95
+ padding-right: @spacing-1;
96
+ }
97
+
98
+ .options-item-text {
99
+ font-family: @base-font-family;
100
+ font-size: @typescale-3;
101
+ padding-left: @spacing-1;
102
+ }
103
+ }
89
104
  }
90
105
 
91
106
  .side-nav-content {
@@ -108,6 +123,12 @@
108
123
  padding-top: @spacing-1;
109
124
  padding-bottom: @spacing-1;
110
125
  }
126
+
127
+ .side-nav-bottom {
128
+ display: flex;
129
+ flex-direction: column;
130
+ justify-content: center;
131
+ }
111
132
  }
112
133
 
113
134
  .navigation-item {
@@ -120,6 +141,7 @@
120
141
  align-items: center;
121
142
 
122
143
  .navigation-item-icon-wrapper {
144
+ border-radius: @border-radius-2;
123
145
  display: flex;
124
146
  justify-content: flex-start;
125
147
  align-items: center;
@@ -180,11 +202,11 @@
180
202
  flex-wrap: nowrap;
181
203
  text-wrap: nowrap;
182
204
  cursor: pointer;
183
- height: 48px;
205
+ height: 32px;
184
206
 
185
- margin-top: @spacing-1;
186
- margin-bottom: @spacing-1;
187
- border-radius: 8px;
207
+ margin-top: @spacing-2;
208
+ margin-bottom: @spacing-2;
209
+ border-radius: @border-radius-2;
188
210
 
189
211
  &:hover {
190
212
  background-color: @bg-color-hover;
@@ -193,8 +215,6 @@
193
215
  .options-icon-wrapper {
194
216
  height: 24px;
195
217
  width: 24px;
196
- padding-left: 12px;
197
- padding-right: 12px;
198
218
 
199
219
  .options-icon[data-anv][data-anv] > svg {
200
220
  height: 24px;
@@ -206,13 +226,12 @@
206
226
  .options-item-text {
207
227
  font-family: @base-font-family;
208
228
  font-size: @typescale-3;
209
- padding-left: @spacing-1;
210
229
  flex: 1;
211
230
  }
212
231
  }
213
232
 
214
233
  .divider {
215
234
  border-top: 1px solid @border-color;
216
- margin-left: 12px;
217
- margin-right: 12px;
235
+ margin-left: @spacing-1;
236
+ margin-right: @spacing-1;
218
237
  }
@@ -68,6 +68,7 @@ export const SideNavigation: FC<SideNavigationProps> = ({
68
68
  />
69
69
  ))}
70
70
  </div>
71
+ <div className={Styles.divider} />
71
72
  <div className={Styles.sideNavBottom}>
72
73
  <SideNavigationOptionsToggle
73
74
  expanded={expanded}