@servicetitan/navigation 12.0.2 → 13.0.0-canary.256.b43c6d7.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 (201) hide show
  1. package/dist/components/profile-dropdown/{profile-dropdown-tiny.stories.d.ts → profile-dropdown-legacy.stories.d.ts} +1 -1
  2. package/dist/components/profile-dropdown/profile-dropdown-legacy.stories.d.ts.map +1 -0
  3. package/dist/components/profile-dropdown/profile-dropdown-stacked.stories.d.ts.map +1 -1
  4. package/dist/components/profile-dropdown/profile-dropdown.d.ts.map +1 -1
  5. package/dist/components/profile-dropdown/profile-dropdown.js +5 -8
  6. package/dist/components/profile-dropdown/profile-dropdown.js.map +1 -1
  7. package/dist/components/profile-dropdown/profile-dropdown.stories.d.ts.map +1 -1
  8. package/dist/components/titan-layout/interface.d.ts +14 -12
  9. package/dist/components/titan-layout/interface.d.ts.map +1 -1
  10. package/dist/components/titan-layout/interface.js.map +1 -1
  11. package/dist/components/titan-layout/layout-header-dark.js +1 -1
  12. package/dist/components/titan-layout/layout-header-dark.js.map +1 -1
  13. package/dist/components/titan-layout/layout-header-links.d.ts +3 -3
  14. package/dist/components/titan-layout/layout-header-links.d.ts.map +1 -1
  15. package/dist/components/titan-layout/layout-header-links.js.map +1 -1
  16. package/dist/components/titan-layout/layout-header.d.ts +2 -2
  17. package/dist/components/titan-layout/layout-header.d.ts.map +1 -1
  18. package/dist/components/titan-layout/layout-header.js.map +1 -1
  19. package/dist/components/titan-layout/layout-header.module.less +5 -0
  20. package/dist/components/titan-layout/layout-profile.d.ts.map +1 -1
  21. package/dist/components/titan-layout/layout-profile.js +1 -7
  22. package/dist/components/titan-layout/layout-profile.js.map +1 -1
  23. package/dist/components/titan-layout/layout-sidebar-links-internal.d.ts +10 -17
  24. package/dist/components/titan-layout/layout-sidebar-links-internal.d.ts.map +1 -1
  25. package/dist/components/titan-layout/layout-sidebar-links-internal.js +34 -41
  26. package/dist/components/titan-layout/layout-sidebar-links-internal.js.map +1 -1
  27. package/dist/components/titan-layout/layout-sidebar-links.d.ts +3 -3
  28. package/dist/components/titan-layout/layout-sidebar-links.d.ts.map +1 -1
  29. package/dist/components/titan-layout/layout-sidebar-links.js +13 -13
  30. package/dist/components/titan-layout/layout-sidebar-links.js.map +1 -1
  31. package/dist/components/titan-layout/layout-sidebar.js +5 -3
  32. package/dist/components/titan-layout/layout-sidebar.js.map +1 -1
  33. package/dist/components/titan-layout/titan-layout-links.d.ts +5 -0
  34. package/dist/components/titan-layout/titan-layout-links.d.ts.map +1 -0
  35. package/dist/components/titan-layout/titan-layout-links.js +34 -0
  36. package/dist/components/titan-layout/titan-layout-links.js.map +1 -0
  37. package/dist/components/titan-layout/titan-layout.d.ts +2 -3
  38. package/dist/components/titan-layout/titan-layout.d.ts.map +1 -1
  39. package/dist/components/titan-layout/titan-layout.js +3 -3
  40. package/dist/components/titan-layout/titan-layout.js.map +1 -1
  41. package/dist/components/titan-layout/titan-layout.stories.d.ts.map +1 -1
  42. package/dist/index.d.ts +1 -5
  43. package/dist/index.d.ts.map +1 -1
  44. package/dist/index.js +0 -4
  45. package/dist/index.js.map +1 -1
  46. package/dist/test/data.d.ts +27 -2
  47. package/dist/test/data.d.ts.map +1 -1
  48. package/dist/test/data.js +181 -27
  49. package/dist/test/data.js.map +1 -1
  50. package/dist/utils/navigation-context.d.ts +3 -22
  51. package/dist/utils/navigation-context.d.ts.map +1 -1
  52. package/dist/utils/navigation-context.js +2 -10
  53. package/dist/utils/navigation-context.js.map +1 -1
  54. package/dist/utils/navigation.d.ts +2 -5
  55. package/dist/utils/navigation.d.ts.map +1 -1
  56. package/dist/utils/navigation.js.map +1 -1
  57. package/package.json +2 -2
  58. package/src/components/profile-dropdown/{profile-dropdown-tiny.stories.tsx → profile-dropdown-legacy.stories.tsx} +6 -6
  59. package/src/components/profile-dropdown/profile-dropdown-stacked.stories.tsx +12 -4
  60. package/src/components/profile-dropdown/profile-dropdown.stories.tsx +16 -9
  61. package/src/components/profile-dropdown/profile-dropdown.tsx +2 -11
  62. package/src/components/titan-layout/interface.ts +19 -15
  63. package/src/components/titan-layout/layout-header-dark.tsx +1 -1
  64. package/src/components/titan-layout/layout-header-links.tsx +3 -6
  65. package/src/components/titan-layout/layout-header.module.less +5 -0
  66. package/src/components/titan-layout/layout-header.tsx +2 -2
  67. package/src/components/titan-layout/layout-profile.tsx +2 -6
  68. package/src/components/titan-layout/layout-sidebar-links-internal.tsx +69 -81
  69. package/src/components/titan-layout/layout-sidebar-links.tsx +38 -24
  70. package/src/components/titan-layout/layout-sidebar.tsx +1 -1
  71. package/src/components/titan-layout/titan-layout-links.tsx +34 -0
  72. package/src/components/titan-layout/titan-layout.stories.tsx +34 -33
  73. package/src/components/titan-layout/titan-layout.tsx +5 -4
  74. package/src/index.ts +1 -11
  75. package/src/test/data.tsx +152 -39
  76. package/src/utils/navigation-context.tsx +9 -35
  77. package/src/utils/navigation.ts +3 -7
  78. package/dist/components/header-navigation/header-navigation-content.d.ts +0 -30
  79. package/dist/components/header-navigation/header-navigation-content.d.ts.map +0 -1
  80. package/dist/components/header-navigation/header-navigation-content.js +0 -58
  81. package/dist/components/header-navigation/header-navigation-content.js.map +0 -1
  82. package/dist/components/header-navigation/header-navigation-extra-stacked.stories.d.ts +0 -9
  83. package/dist/components/header-navigation/header-navigation-extra-stacked.stories.d.ts.map +0 -1
  84. package/dist/components/header-navigation/header-navigation-extra.stories.d.ts +0 -12
  85. package/dist/components/header-navigation/header-navigation-extra.stories.d.ts.map +0 -1
  86. package/dist/components/header-navigation/header-navigation-links.d.ts +0 -11
  87. package/dist/components/header-navigation/header-navigation-links.d.ts.map +0 -1
  88. package/dist/components/header-navigation/header-navigation-links.js +0 -62
  89. package/dist/components/header-navigation/header-navigation-links.js.map +0 -1
  90. package/dist/components/header-navigation/header-navigation-stacked.stories.d.ts +0 -12
  91. package/dist/components/header-navigation/header-navigation-stacked.stories.d.ts.map +0 -1
  92. package/dist/components/header-navigation/header-navigation-stories.module.less +0 -6
  93. package/dist/components/header-navigation/header-navigation-stories.module.less.d.ts +0 -3
  94. package/dist/components/header-navigation/header-navigation.d.ts +0 -59
  95. package/dist/components/header-navigation/header-navigation.d.ts.map +0 -1
  96. package/dist/components/header-navigation/header-navigation.js +0 -228
  97. package/dist/components/header-navigation/header-navigation.js.map +0 -1
  98. package/dist/components/header-navigation/header-navigation.module.less +0 -260
  99. package/dist/components/header-navigation/header-navigation.module.less.d.ts +0 -22
  100. package/dist/components/header-navigation/header-navigation.stories.d.ts +0 -12
  101. package/dist/components/header-navigation/header-navigation.stories.d.ts.map +0 -1
  102. package/dist/components/header-navigation/index.d.ts +0 -2
  103. package/dist/components/header-navigation/index.d.ts.map +0 -1
  104. package/dist/components/header-navigation/index.js +0 -3
  105. package/dist/components/header-navigation/index.js.map +0 -1
  106. package/dist/components/header-navigation/with-tooltip.d.ts +0 -4
  107. package/dist/components/header-navigation/with-tooltip.d.ts.map +0 -1
  108. package/dist/components/header-navigation/with-tooltip.js +0 -10
  109. package/dist/components/header-navigation/with-tooltip.js.map +0 -1
  110. package/dist/components/layout.stories.d.ts +0 -13
  111. package/dist/components/layout.stories.d.ts.map +0 -1
  112. package/dist/components/left-navigation/header-navigation-extra-tiny.stories.d.ts +0 -9
  113. package/dist/components/left-navigation/header-navigation-extra-tiny.stories.d.ts.map +0 -1
  114. package/dist/components/left-navigation/header-navigation-tiny-links.d.ts +0 -18
  115. package/dist/components/left-navigation/header-navigation-tiny-links.d.ts.map +0 -1
  116. package/dist/components/left-navigation/header-navigation-tiny-links.js +0 -79
  117. package/dist/components/left-navigation/header-navigation-tiny-links.js.map +0 -1
  118. package/dist/components/left-navigation/header-navigation-tiny.d.ts +0 -23
  119. package/dist/components/left-navigation/header-navigation-tiny.d.ts.map +0 -1
  120. package/dist/components/left-navigation/header-navigation-tiny.js +0 -32
  121. package/dist/components/left-navigation/header-navigation-tiny.js.map +0 -1
  122. package/dist/components/left-navigation/header-navigation-tiny.module.less +0 -117
  123. package/dist/components/left-navigation/header-navigation-tiny.module.less.d.ts +0 -15
  124. package/dist/components/left-navigation/header-navigation-tiny.stories.d.ts +0 -12
  125. package/dist/components/left-navigation/header-navigation-tiny.stories.d.ts.map +0 -1
  126. package/dist/components/left-navigation/index.d.ts +0 -5
  127. package/dist/components/left-navigation/index.d.ts.map +0 -1
  128. package/dist/components/left-navigation/index.js +0 -5
  129. package/dist/components/left-navigation/index.js.map +0 -1
  130. package/dist/components/left-navigation/interface-internal.d.ts +0 -10
  131. package/dist/components/left-navigation/interface-internal.d.ts.map +0 -1
  132. package/dist/components/left-navigation/interface-internal.js +0 -3
  133. package/dist/components/left-navigation/interface-internal.js.map +0 -1
  134. package/dist/components/left-navigation/interface.d.ts +0 -20
  135. package/dist/components/left-navigation/interface.d.ts.map +0 -1
  136. package/dist/components/left-navigation/interface.js +0 -3
  137. package/dist/components/left-navigation/interface.js.map +0 -1
  138. package/dist/components/left-navigation/side-navigation-context.d.ts +0 -8
  139. package/dist/components/left-navigation/side-navigation-context.d.ts.map +0 -1
  140. package/dist/components/left-navigation/side-navigation-context.js +0 -8
  141. package/dist/components/left-navigation/side-navigation-context.js.map +0 -1
  142. package/dist/components/left-navigation/side-navigation-links-internal.d.ts +0 -28
  143. package/dist/components/left-navigation/side-navigation-links-internal.d.ts.map +0 -1
  144. package/dist/components/left-navigation/side-navigation-links-internal.js +0 -89
  145. package/dist/components/left-navigation/side-navigation-links-internal.js.map +0 -1
  146. package/dist/components/left-navigation/side-navigation-links.d.ts +0 -6
  147. package/dist/components/left-navigation/side-navigation-links.d.ts.map +0 -1
  148. package/dist/components/left-navigation/side-navigation-links.js +0 -48
  149. package/dist/components/left-navigation/side-navigation-links.js.map +0 -1
  150. package/dist/components/left-navigation/side-navigation.d.ts +0 -29
  151. package/dist/components/left-navigation/side-navigation.d.ts.map +0 -1
  152. package/dist/components/left-navigation/side-navigation.js +0 -411
  153. package/dist/components/left-navigation/side-navigation.js.map +0 -1
  154. package/dist/components/left-navigation/side-navigation.module.less +0 -530
  155. package/dist/components/left-navigation/side-navigation.module.less.d.ts +0 -48
  156. package/dist/components/left-navigation/side-navigation.stories.d.ts +0 -17
  157. package/dist/components/left-navigation/side-navigation.stories.d.ts.map +0 -1
  158. package/dist/components/left-navigation/with-tooltip.d.ts +0 -4
  159. package/dist/components/left-navigation/with-tooltip.d.ts.map +0 -1
  160. package/dist/components/left-navigation/with-tooltip.js +0 -15
  161. package/dist/components/left-navigation/with-tooltip.js.map +0 -1
  162. package/dist/components/links.d.ts +0 -5
  163. package/dist/components/links.d.ts.map +0 -1
  164. package/dist/components/links.js +0 -35
  165. package/dist/components/links.js.map +0 -1
  166. package/dist/components/profile-dropdown/profile-dropdown-tiny.stories.d.ts.map +0 -1
  167. package/dist/components/titan-layout/layout-profile.stories.d.ts +0 -13
  168. package/dist/components/titan-layout/layout-profile.stories.d.ts.map +0 -1
  169. package/src/components/header-navigation/header-navigation-content.tsx +0 -120
  170. package/src/components/header-navigation/header-navigation-extra-stacked.stories.tsx +0 -19
  171. package/src/components/header-navigation/header-navigation-extra.stories.tsx +0 -142
  172. package/src/components/header-navigation/header-navigation-links.tsx +0 -141
  173. package/src/components/header-navigation/header-navigation-stacked.stories.tsx +0 -146
  174. package/src/components/header-navigation/header-navigation-stories.module.less +0 -6
  175. package/src/components/header-navigation/header-navigation-stories.module.less.d.ts +0 -3
  176. package/src/components/header-navigation/header-navigation.module.less +0 -260
  177. package/src/components/header-navigation/header-navigation.module.less.d.ts +0 -22
  178. package/src/components/header-navigation/header-navigation.stories.tsx +0 -165
  179. package/src/components/header-navigation/header-navigation.tsx +0 -327
  180. package/src/components/header-navigation/index.ts +0 -1
  181. package/src/components/header-navigation/with-tooltip.tsx +0 -15
  182. package/src/components/layout.stories.tsx +0 -103
  183. package/src/components/left-navigation/header-navigation-extra-tiny.stories.tsx +0 -21
  184. package/src/components/left-navigation/header-navigation-tiny-links.tsx +0 -145
  185. package/src/components/left-navigation/header-navigation-tiny.module.less +0 -117
  186. package/src/components/left-navigation/header-navigation-tiny.module.less.d.ts +0 -15
  187. package/src/components/left-navigation/header-navigation-tiny.stories.tsx +0 -178
  188. package/src/components/left-navigation/header-navigation-tiny.tsx +0 -65
  189. package/src/components/left-navigation/index.ts +0 -4
  190. package/src/components/left-navigation/interface-internal.ts +0 -11
  191. package/src/components/left-navigation/interface.ts +0 -26
  192. package/src/components/left-navigation/side-navigation-context.tsx +0 -13
  193. package/src/components/left-navigation/side-navigation-links-internal.tsx +0 -151
  194. package/src/components/left-navigation/side-navigation-links.tsx +0 -57
  195. package/src/components/left-navigation/side-navigation.module.less +0 -530
  196. package/src/components/left-navigation/side-navigation.module.less.d.ts +0 -48
  197. package/src/components/left-navigation/side-navigation.stories.tsx +0 -226
  198. package/src/components/left-navigation/side-navigation.tsx +0 -543
  199. package/src/components/left-navigation/with-tooltip.tsx +0 -16
  200. package/src/components/links.tsx +0 -54
  201. package/src/components/titan-layout/layout-profile.stories.tsx +0 -46
@@ -1,530 +0,0 @@
1
- /* stylelint-disable no-descending-specificity */
2
- @import (reference) '@servicetitan/tokens/core/tokens.less';
3
-
4
- @text-color: var(--colorsTextInverted, @color-white);
5
- @text-color-active: var(--colorsTextPrimarySubdued, @color-blue-300);
6
- @border-color: var(--colorsTextOnGrey, @color-neutral-200);
7
- @bg-color: #0f1d26;
8
- @bg-color-hover: rgba(255, 255, 255, 0.08);
9
- @bg-color-active: rgba(120, 187, 250, 0.2);
10
-
11
- .side-nav {
12
- display: flex;
13
- flex-direction: column;
14
- align-items: stretch;
15
-
16
- &.side-nav-v1 {
17
- &.side-nav-slim {
18
- width: 64px;
19
- }
20
- &.side-nav-expanded {
21
- width: 212px;
22
-
23
- .navigation-item {
24
- flex-direction: row;
25
- margin-left: @spacing-1;
26
- margin-right: @spacing-1;
27
-
28
- .navigation-item-icon-wrapper {
29
- flex: 1;
30
- padding: @spacing-1 @spacing-half;
31
- }
32
-
33
- .navigation-item-text-expanded {
34
- font-family: @base-font-family;
35
- font-size: @typescale-3;
36
- padding-left: @spacing-1;
37
- flex: 1;
38
- }
39
-
40
- .navigation-item-text-collapsed {
41
- display: none;
42
- }
43
-
44
- .navigation-item-counter {
45
- margin-right: @spacing-1;
46
- position: relative;
47
- transform: unset;
48
- }
49
- }
50
- }
51
-
52
- .divider {
53
- margin-left: @spacing-1;
54
- margin-right: @spacing-1;
55
- }
56
- }
57
-
58
- &.side-nav-v2 {
59
- .navigation-item {
60
- margin-bottom: @spacing-half;
61
- }
62
- &.side-nav-slim {
63
- width: 64px;
64
- }
65
- &.side-nav-expanded {
66
- width: 268px;
67
-
68
- .options-item-text {
69
- padding-left: @spacing-0 !important;
70
- }
71
- }
72
- }
73
-
74
- &.side-nav-v1.side-nav-slim,
75
- &.side-nav-v2 {
76
- .navigation-item {
77
- flex-direction: column;
78
- width: 64px;
79
- overflow-x: hidden;
80
- padding-top: @spacing-1;
81
-
82
- &:not(:first-child) {
83
- margin-top: @spacing-half;
84
- }
85
-
86
- .navigation-item-counter {
87
- position: absolute;
88
- right: 0;
89
- top: 4px;
90
- z-index: auto;
91
-
92
- &.navigation-item-counter-long {
93
- right: 2px;
94
- }
95
- }
96
-
97
- .navigation-item-icon-wrapper {
98
- flex: 1;
99
- padding: @spacing-half;
100
- }
101
-
102
- .navigation-item-text-expanded {
103
- display: none;
104
- }
105
- .navigation-item-text-collapsed {
106
- font-family: @base-font-family;
107
- font-size: 11px;
108
- line-height: 11px;
109
- margin: 2px @spacing-half @spacing-0;
110
- text-align: center;
111
- }
112
-
113
- .navigation-item-text-collapsed.navigation-item-text-small {
114
- font-size: 10.5px;
115
- }
116
- }
117
- }
118
-
119
- &.side-nav-expanded {
120
- -webkit-transition: width 100ms ease-in-out;
121
- -moz-transition: width 100ms ease-in-out;
122
- -o-transition: width 100ms ease-in-out;
123
- transition: width 100ms ease-in-out;
124
- }
125
- }
126
-
127
- .side-nav-main {
128
- display: flex;
129
- flex-direction: row;
130
- align-items: stretch;
131
- flex: 1;
132
- position: relative;
133
- }
134
-
135
- .side-nav-footer {
136
- display: flex;
137
- flex-direction: column;
138
- align-items: stretch;
139
- background-color: @bg-color;
140
- }
141
- .side-nav-submenu-bar {
142
- background-color: @bg-color;
143
- border-left: 1px solid @color-neutral-200;
144
- width: 204px;
145
- }
146
- .side-nav-submenu-drawer {
147
- background-color: @bg-color;
148
- border-left: 1px solid @color-neutral-200;
149
- width: 204px;
150
- position: absolute;
151
- top: 0;
152
- bottom: 0;
153
- left: 64px;
154
- z-index: @z-index-overlay;
155
- }
156
-
157
- .side-nav-navigation {
158
- display: flex;
159
- flex-direction: column;
160
- align-items: stretch;
161
- padding-top: @spacing-1;
162
- flex: 1;
163
-
164
- background-color: @bg-color;
165
-
166
- .side-nav-content {
167
- overflow-y: auto;
168
- padding-bottom: @spacing-1;
169
- flex-grow: 1;
170
- flex-basis: 0;
171
-
172
- &::-webkit-scrollbar {
173
- width: 0;
174
- height: 0;
175
- }
176
- }
177
-
178
- .side-nav-top {
179
- display: flex;
180
- flex-direction: column;
181
- align-items: stretch;
182
- padding-bottom: @spacing-1;
183
- }
184
-
185
- .side-nav-bottom {
186
- display: flex;
187
- flex-direction: column;
188
- justify-content: center;
189
- }
190
- }
191
-
192
- .navigation-item {
193
- font-family: @base-font-family;
194
- color: @text-color;
195
- position: relative;
196
- display: flex;
197
- flex-direction: row;
198
- justify-content: flex-start;
199
- align-items: center;
200
- outline: none;
201
- overflow: hidden;
202
-
203
- .navigation-item-icon-wrapper {
204
- border-radius: @border-radius-2;
205
- display: flex;
206
- justify-content: flex-start;
207
- align-items: center;
208
- flex-wrap: nowrap;
209
- text-wrap: nowrap;
210
- position: relative;
211
- }
212
-
213
- &.navigation-item-active {
214
- color: @text-color-active;
215
-
216
- .navigation-item-icon-wrapper {
217
- background-color: @bg-color-active;
218
- }
219
- }
220
-
221
- &.navigation-item-icon-switch {
222
- &.navigation-item-active {
223
- .navigation-icon-inactive[data-anv][data-anv] {
224
- display: none;
225
- }
226
- .navigation-icon-active[data-anv][data-anv] {
227
- display: block;
228
- }
229
- }
230
- &:not(.navigation-item-active) {
231
- .navigation-icon-inactive[data-anv][data-anv] {
232
- display: block;
233
- }
234
- .navigation-icon-active[data-anv][data-anv] {
235
- display: none;
236
- }
237
- }
238
- }
239
-
240
- &:hover:not(.navigation-item-active) .navigation-item-icon-wrapper {
241
- background-color: @bg-color-hover;
242
- }
243
-
244
- .navigation-item-counter {
245
- min-width: 12px !important;
246
- min-height: 12px !important;
247
- }
248
-
249
- .navigation-item-group-toggle-wrapper {
250
- position: relative;
251
- display: flex;
252
- justify-content: center;
253
- align-items: center;
254
-
255
- .navigation-item-group-toggle[data-anv][data-anv] {
256
- color: inherit;
257
- font-weight: @font-weight-semibold;
258
- }
259
-
260
- .navigation-item-group-toggle-click {
261
- position: absolute;
262
- left: -@spacing-2;
263
- right: -@spacing-half;
264
- top: -@spacing-1;
265
- bottom: -@spacing-1;
266
- }
267
- }
268
-
269
- .navigation-icon[data-anv][data-anv] {
270
- height: 24px;
271
- width: 24px;
272
- color: inherit;
273
-
274
- & > svg {
275
- height: 24px;
276
- width: 24px;
277
- }
278
- }
279
- }
280
-
281
- .navigation-group-wrapper {
282
- .navigation-group-item {
283
- position: relative;
284
- }
285
-
286
- .submenu-wrapper:not(.submenu-wrapper-collapsed) {
287
- max-height: 2000px;
288
- transition: max-height 0.7s ease-in-out;
289
- }
290
- }
291
-
292
- .submenu-wrapper {
293
- max-height: 0;
294
- overflow: hidden;
295
- transition: max-height unset;
296
- }
297
-
298
- .submenu {
299
- margin-left: @spacing-3;
300
- }
301
-
302
- .submenu-bar {
303
- margin-left: 6px;
304
-
305
- .submenu-link-active:before {
306
- left: -6px !important;
307
- }
308
-
309
- > *,
310
- > *[data-anv][data-anv] {
311
- line-height: 18px;
312
- }
313
- }
314
-
315
- .submenu,
316
- .submenu-bar {
317
- padding-left: @spacing-1;
318
- padding-right: @spacing-1;
319
- margin-bottom: @spacing-1;
320
- position: relative;
321
- font-family: @base-font-family;
322
-
323
- .submenu-group-header[data-anv][data-anv] {
324
- padding-top: @spacing-2;
325
- padding-bottom: @spacing-half;
326
- }
327
- .submenu-group-header.submenu-group-header-empty[data-anv][data-anv] {
328
- padding-top: @spacing-1;
329
- }
330
-
331
- .submenu-link {
332
- padding: @spacing-1;
333
- }
334
-
335
- .submenu-link-active {
336
- position: relative;
337
- }
338
-
339
- .submenu-link-active:before {
340
- content: '';
341
- position: absolute;
342
- background-color: @text-color-active;
343
- width: 3px;
344
- top: @spacing-1;
345
- bottom: @spacing-1;
346
- left: -12px;
347
- }
348
-
349
- .submenu-link:before:not(.submenu-link-active) {
350
- background-color: @bg-color-hover;
351
- }
352
-
353
- > *,
354
- > *[data-anv][data-anv] {
355
- border-left: 3px solid transparent;
356
- padding-left: @spacing-1;
357
- }
358
-
359
- > *:last-child {
360
- margin-bottom: @spacing-0;
361
- }
362
- }
363
-
364
- .submenu-popover {
365
- margin-left: -@spacing-1;
366
- margin-right: -@spacing-1;
367
- min-width: 240px;
368
-
369
- .submenu-group-header[data-anv][data-anv] {
370
- margin-top: @spacing-2;
371
- padding-bottom: @spacing-half;
372
- }
373
-
374
- .submenu-group-header.submenu-group-header-empty[data-anv][data-anv] {
375
- margin-top: @spacing-1;
376
- }
377
-
378
- .submenu-link {
379
- padding-top: @spacing-1;
380
- padding-bottom: @spacing-1;
381
- }
382
-
383
- .submenu-link-active {
384
- background-color: @bg-color-active;
385
- }
386
- .submenu-link:hover:not(.submenu-link-active) {
387
- background-color: @bg-color-hover;
388
- }
389
-
390
- > *,
391
- > *[data-anv][data-anv] {
392
- padding-left: @spacing-1;
393
- padding-right: @spacing-1;
394
- }
395
- }
396
-
397
- .submenu,
398
- .submenu-popover,
399
- .submenu-bar {
400
- display: flex;
401
- flex-direction: column;
402
-
403
- .submenu-group-header[data-anv][data-anv] {
404
- color: @color-neutral-70;
405
- }
406
-
407
- .submenu-link {
408
- color: @text-color;
409
- font-size: @typescale-2;
410
- border-radius: @border-radius-2;
411
- display: flex;
412
- flex-direction: row;
413
- justify-content: space-between;
414
- align-items: center;
415
- }
416
-
417
- .submenu-link-active {
418
- color: @text-color-active;
419
- }
420
-
421
- .submenu-link-counter {
422
- position: relative !important;
423
- transform: unset !important;
424
- }
425
-
426
- .submenu-link:hover:not(.submenu-link-active) {
427
- background-color: @bg-color-hover;
428
- }
429
- }
430
-
431
- .options-item {
432
- font-family: @base-font-family;
433
- color: @text-color;
434
- position: relative;
435
- cursor: pointer;
436
- outline: none;
437
-
438
- &:hover {
439
- .options-item-content {
440
- background-color: @bg-color-hover;
441
- }
442
- }
443
-
444
- .options-item-content {
445
- display: flex;
446
- justify-content: flex-start;
447
- align-items: center;
448
- flex-wrap: nowrap;
449
- text-wrap: nowrap;
450
- height: 32px;
451
-
452
- border-radius: @border-radius-2;
453
- }
454
-
455
- .options-icon-wrapper {
456
- height: 24px;
457
- width: 24px;
458
-
459
- .options-icon[data-anv][data-anv] > svg {
460
- height: 24px;
461
- width: 24px;
462
- color: @text-color;
463
- }
464
- }
465
-
466
- .options-item-text {
467
- font-family: @base-font-family;
468
- font-size: @typescale-3;
469
- flex: 1;
470
- }
471
- }
472
-
473
- .side-nav-slim .side-nav-footer .options-item {
474
- .options-item-content {
475
- margin: @spacing-2;
476
-
477
- .options-icon-wrapper {
478
- padding-left: @spacing-half;
479
- padding-right: @spacing-half;
480
- }
481
- }
482
- }
483
-
484
- .side-nav-slim .side-nav-navigation .options-item {
485
- .options-item-content {
486
- background-color: @color-blue-grey-500;
487
- }
488
- }
489
-
490
- .side-nav-expanded .side-nav-footer .options-item {
491
- .options-item-content {
492
- margin: @spacing-2 @spacing-1;
493
-
494
- .options-icon-wrapper {
495
- padding-left: @spacing-1;
496
- padding-right: @spacing-1;
497
- }
498
-
499
- .options-item-text {
500
- font-family: @base-font-family;
501
- font-size: @typescale-3;
502
- padding-left: @spacing-1;
503
- }
504
- }
505
- }
506
-
507
- .side-nav-submenu-bar .options-item {
508
- .options-item-content {
509
- margin-right: @spacing-2;
510
- justify-content: center;
511
- width: 32px;
512
- }
513
- }
514
-
515
- .side-nav-navigation .options-item {
516
- width: 64px;
517
- margin-top: @spacing-1;
518
- margin-bottom: 12px;
519
- display: flex;
520
- justify-content: center;
521
-
522
- .options-icon-wrapper {
523
- padding-left: @spacing-half;
524
- padding-right: @spacing-half;
525
- }
526
- }
527
-
528
- .divider {
529
- border-top: 1px solid @border-color;
530
- }
@@ -1,48 +0,0 @@
1
- export const __esModule: true;
2
- export const divider: string;
3
- export const navigationGroupItem: string;
4
- export const navigationGroupWrapper: string;
5
- export const navigationIcon: string;
6
- export const navigationIconActive: string;
7
- export const navigationIconInactive: string;
8
- export const navigationItem: string;
9
- export const navigationItemActive: string;
10
- export const navigationItemCounter: string;
11
- export const navigationItemCounterLong: string;
12
- export const navigationItemGroupToggle: string;
13
- export const navigationItemGroupToggleClick: string;
14
- export const navigationItemGroupToggleWrapper: string;
15
- export const navigationItemIconSwitch: string;
16
- export const navigationItemIconWrapper: string;
17
- export const navigationItemTextCollapsed: string;
18
- export const navigationItemTextExpanded: string;
19
- export const navigationItemTextSmall: string;
20
- export const optionsIcon: string;
21
- export const optionsIconWrapper: string;
22
- export const optionsItem: string;
23
- export const optionsItemContent: string;
24
- export const optionsItemText: string;
25
- export const sideNav: string;
26
- export const sideNavBottom: string;
27
- export const sideNavContent: string;
28
- export const sideNavExpanded: string;
29
- export const sideNavFooter: string;
30
- export const sideNavMain: string;
31
- export const sideNavNavigation: string;
32
- export const sideNavSlim: string;
33
- export const sideNavSubmenuBar: string;
34
- export const sideNavSubmenuDrawer: string;
35
- export const sideNavTop: string;
36
- export const sideNavV1: string;
37
- export const sideNavV2: string;
38
- export const submenu: string;
39
- export const submenuBar: string;
40
- export const submenuGroupHeader: string;
41
- export const submenuGroupHeaderEmpty: string;
42
- export const submenuLink: string;
43
- export const submenuLinkActive: string;
44
- export const submenuLinkCounter: string;
45
- export const submenuPopover: string;
46
- export const submenuWrapper: string;
47
- export const submenuWrapperCollapsed: string;
48
-
@@ -1,17 +0,0 @@
1
- import { FC } from 'react';
2
- declare const _default: {
3
- title: string;
4
- component: (({ className, children, expanded, id, items, appearance, onExpandedChange, }: import("./side-navigation").SideNavigationProps) => import("react/jsx-runtime").JSX.Element) & {
5
- Top: FC<import("./side-navigation").SideNavigationTopProps>;
6
- };
7
- decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
8
- parameters: {};
9
- };
10
- export default _default;
11
- export declare const DefaultSideNavigation: () => import("react/jsx-runtime").JSX.Element;
12
- export declare const SideNavigationLinksOnly: () => import("react/jsx-runtime").JSX.Element;
13
- export declare const SideNavigationWithSubmenu: () => import("react/jsx-runtime").JSX.Element;
14
- export declare const SideNavigationWithCustomTopElements: () => import("react/jsx-runtime").JSX.Element;
15
- export declare const SideNavigationWithSubmenuBar: () => import("react/jsx-runtime").JSX.Element;
16
- export declare const SideNavigationWithSubmenuBarAndTop: () => import("react/jsx-runtime").JSX.Element;
17
- //# sourceMappingURL=side-navigation.stories.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"side-navigation.stories.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,EAAE,EAAY,MAAM,OAAO,CAAC;;;;;;;;;AA4BpD,wBAKE;AAEF,eAAO,MAAM,qBAAqB,+CA4BjC,CAAC;AAEF,eAAO,MAAM,uBAAuB,+CAwBnC,CAAC;AAEF,eAAO,MAAM,yBAAyB,+CA0BrC,CAAC;AAWF,eAAO,MAAM,mCAAmC,+CAkC/C,CAAC;AAEF,eAAO,MAAM,4BAA4B,+CA0BxC,CAAC;AAEF,eAAO,MAAM,kCAAkC,+CA+B9C,CAAC"}
@@ -1,4 +0,0 @@
1
- import { TooltipProps } from '@servicetitan/anvil2';
2
- import { ReactElement } from 'react';
3
- export declare const withTooltip: (element: ReactElement, tooltip: string | undefined, placement?: TooltipProps["placement"]) => import("react/jsx-runtime").JSX.Element;
4
- //# sourceMappingURL=with-tooltip.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"with-tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/with-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,eAAO,MAAM,WAAW,GACpB,SAAS,YAAY,EACrB,SAAS,MAAM,GAAG,SAAS,EAC3B,YAAW,YAAY,CAAC,WAAW,CAAY,4CAS9C,CAAC"}
@@ -1,15 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Tooltip } from '@servicetitan/anvil2';
3
- export const withTooltip = (element, tooltip, placement = 'bottom')=>tooltip ? /*#__PURE__*/ _jsxs(Tooltip, {
4
- placement: placement,
5
- children: [
6
- /*#__PURE__*/ _jsx(Tooltip.Content, {
7
- children: tooltip
8
- }),
9
- /*#__PURE__*/ _jsx(Tooltip.Trigger, {
10
- children: element
11
- })
12
- ]
13
- }) : element;
14
-
15
- //# sourceMappingURL=with-tooltip.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/components/left-navigation/with-tooltip.tsx"],"sourcesContent":["import { Tooltip, TooltipProps } from '@servicetitan/anvil2';\nimport { ReactElement } from 'react';\n\nexport const withTooltip = (\n element: ReactElement,\n tooltip: string | undefined,\n placement: TooltipProps['placement'] = 'bottom'\n) =>\n tooltip ? (\n <Tooltip placement={placement}>\n <Tooltip.Content>{tooltip}</Tooltip.Content>\n <Tooltip.Trigger>{element}</Tooltip.Trigger>\n </Tooltip>\n ) : (\n element\n );\n"],"names":["Tooltip","withTooltip","element","tooltip","placement","Content","Trigger"],"mappings":";AAAA,SAASA,OAAO,QAAsB,uBAAuB;AAG7D,OAAO,MAAMC,cAAc,CACvBC,SACAC,SACAC,YAAuC,QAAQ,GAE/CD,wBACI,MAACH;QAAQI,WAAWA;;0BAChB,KAACJ,QAAQK,OAAO;0BAAEF;;0BAClB,KAACH,QAAQM,OAAO;0BAAEJ;;;SAGtBA,QACF"}
@@ -1,5 +0,0 @@
1
- import { FC } from 'react';
2
- import { HeaderNavigationLinkProps, HeaderNavigationTriggerProps } from '../utils/navigation-legacy';
3
- export declare const HeaderNavigationLink: FC<HeaderNavigationLinkProps>;
4
- export declare const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps>;
5
- //# sourceMappingURL=links.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"links.d.ts","sourceRoot":"","sources":["../../src/components/links.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EACH,yBAAyB,EACzB,4BAA4B,EAC/B,MAAM,4BAA4B,CAAC;AAepC,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CAiB9D,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CAepE,CAAC"}
@@ -1,35 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { HeaderNavigationLink as HeaderNavigationLinkLegacy, HeaderNavigationTrigger as HeaderNavigationTriggerLegacy } from './header-navigation/header-navigation-links';
3
- import { useTitanLayoutPlacementContext } from './titan-layout';
4
- import { LayoutHeaderNavigationLink, LayoutHeaderNavigationTrigger } from './titan-layout/layout-header-links';
5
- import { TitanLayoutSidebarLink, TitanLayoutSidebarTrigger } from './titan-layout/layout-sidebar-links';
6
- export const HeaderNavigationLink = (props)=>{
7
- const placement = useTitanLayoutPlacementContext();
8
- return placement === 'top' ? /*#__PURE__*/ _jsx(LayoutHeaderNavigationLink, {
9
- ...props
10
- }) : placement === 'side' ? /*#__PURE__*/ _jsx(TitanLayoutSidebarLink, {
11
- id: props.id,
12
- icon: props.icon,
13
- iconActive: props.iconActive,
14
- to: props.to,
15
- title: props.title,
16
- counter: props.counter
17
- }) : /*#__PURE__*/ _jsx(HeaderNavigationLinkLegacy, {
18
- ...props
19
- });
20
- };
21
- export const HeaderNavigationTrigger = (props)=>{
22
- const placement = useTitanLayoutPlacementContext();
23
- return placement === 'top' ? /*#__PURE__*/ _jsx(LayoutHeaderNavigationTrigger, {
24
- ...props
25
- }) : placement === 'side' ? /*#__PURE__*/ _jsx(TitanLayoutSidebarTrigger, {
26
- id: props.id,
27
- title: props.title,
28
- icon: props.icon,
29
- iconActive: props.iconActive
30
- }) : /*#__PURE__*/ _jsx(HeaderNavigationTriggerLegacy, {
31
- ...props
32
- });
33
- };
34
-
35
- //# sourceMappingURL=links.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/links.tsx"],"sourcesContent":["import { FC } from 'react';\nimport {\n HeaderNavigationLinkProps,\n HeaderNavigationTriggerProps,\n} from '../utils/navigation-legacy';\nimport {\n HeaderNavigationLink as HeaderNavigationLinkLegacy,\n HeaderNavigationTrigger as HeaderNavigationTriggerLegacy,\n} from './header-navigation/header-navigation-links';\nimport { useTitanLayoutPlacementContext } from './titan-layout';\nimport {\n LayoutHeaderNavigationLink,\n LayoutHeaderNavigationTrigger,\n} from './titan-layout/layout-header-links';\nimport {\n TitanLayoutSidebarLink,\n TitanLayoutSidebarTrigger,\n} from './titan-layout/layout-sidebar-links';\n\nexport const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = props => {\n const placement = useTitanLayoutPlacementContext();\n\n return placement === 'top' ? (\n <LayoutHeaderNavigationLink {...props} />\n ) : placement === 'side' ? (\n <TitanLayoutSidebarLink\n id={props.id}\n icon={props.icon}\n iconActive={props.iconActive}\n to={props.to}\n title={props.title}\n counter={props.counter}\n />\n ) : (\n <HeaderNavigationLinkLegacy {...props} />\n );\n};\n\nexport const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = props => {\n const placement = useTitanLayoutPlacementContext();\n\n return placement === 'top' ? (\n <LayoutHeaderNavigationTrigger {...props} />\n ) : placement === 'side' ? (\n <TitanLayoutSidebarTrigger\n id={props.id}\n title={props.title}\n icon={props.icon}\n iconActive={props.iconActive}\n />\n ) : (\n <HeaderNavigationTriggerLegacy {...props} />\n );\n};\n"],"names":["HeaderNavigationLink","HeaderNavigationLinkLegacy","HeaderNavigationTrigger","HeaderNavigationTriggerLegacy","useTitanLayoutPlacementContext","LayoutHeaderNavigationLink","LayoutHeaderNavigationTrigger","TitanLayoutSidebarLink","TitanLayoutSidebarTrigger","props","placement","id","icon","iconActive","to","title","counter"],"mappings":";AAKA,SACIA,wBAAwBC,0BAA0B,EAClDC,2BAA2BC,6BAA6B,QACrD,8CAA8C;AACrD,SAASC,8BAA8B,QAAQ,iBAAiB;AAChE,SACIC,0BAA0B,EAC1BC,6BAA6B,QAC1B,qCAAqC;AAC5C,SACIC,sBAAsB,EACtBC,yBAAyB,QACtB,sCAAsC;AAE7C,OAAO,MAAMR,uBAAsDS,CAAAA;IAC/D,MAAMC,YAAYN;IAElB,OAAOM,cAAc,sBACjB,KAACL;QAA4B,GAAGI,KAAK;SACrCC,cAAc,uBACd,KAACH;QACGI,IAAIF,MAAME,EAAE;QACZC,MAAMH,MAAMG,IAAI;QAChBC,YAAYJ,MAAMI,UAAU;QAC5BC,IAAIL,MAAMK,EAAE;QACZC,OAAON,MAAMM,KAAK;QAClBC,SAASP,MAAMO,OAAO;uBAG1B,KAACf;QAA4B,GAAGQ,KAAK;;AAE7C,EAAE;AAEF,OAAO,MAAMP,0BAA4DO,CAAAA;IACrE,MAAMC,YAAYN;IAElB,OAAOM,cAAc,sBACjB,KAACJ;QAA+B,GAAGG,KAAK;SACxCC,cAAc,uBACd,KAACF;QACGG,IAAIF,MAAME,EAAE;QACZI,OAAON,MAAMM,KAAK;QAClBH,MAAMH,MAAMG,IAAI;QAChBC,YAAYJ,MAAMI,UAAU;uBAGhC,KAACV;QAA+B,GAAGM,KAAK;;AAEhD,EAAE"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"profile-dropdown-tiny.stories.d.ts","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown-tiny.stories.tsx"],"names":[],"mappings":";;;;;;AAQA,wBAKE;AAEF,OAAO,EACH,sBAAsB,EACtB,6BAA6B,EAC7B,0BAA0B,EAC1B,4BAA4B,EAC5B,uBAAuB,EACvB,mCAAmC,EACnC,4BAA4B,EAC5B,uBAAuB,GAC1B,MAAM,4BAA4B,CAAC"}