@capillarytech/blaze-ui 6.1.5 → 6.1.6-beta.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 (55) hide show
  1. package/CapNavigationSPA/CapNavigationSPASidebar/index.d.ts +10 -0
  2. package/CapNavigationSPA/CapNavigationSPASidebar/index.d.ts.map +1 -0
  3. package/CapNavigationSPA/CapNavigationSPASidebar/index.js +373 -0
  4. package/CapNavigationSPA/CapNavigationSPASidebar/styles.css +318 -0
  5. package/CapNavigationSPA/CapNavigationSPASidebar/styles.module.scss.js +56 -0
  6. package/CapNavigationSPA/CapNavigationSPASidebar/styles.scss +385 -0
  7. package/CapNavigationSPA/CapNavigationSPASidebar/types.d.ts +31 -0
  8. package/CapNavigationSPA/CapNavigationSPASidebar/types.d.ts.map +1 -0
  9. package/CapNavigationSPA/CapNavigationSPASidebar/types.js +1 -0
  10. package/CapNavigationSPA/CapNavigationSPATopBar/index.d.ts +10 -0
  11. package/CapNavigationSPA/CapNavigationSPATopBar/index.d.ts.map +1 -0
  12. package/CapNavigationSPA/CapNavigationSPATopBar/index.js +119 -0
  13. package/CapNavigationSPA/CapNavigationSPATopBar/styles.css +141 -0
  14. package/CapNavigationSPA/CapNavigationSPATopBar/styles.module.scss.js +19 -0
  15. package/CapNavigationSPA/CapNavigationSPATopBar/styles.scss +163 -0
  16. package/CapNavigationSPA/CapNavigationSPATopBar/types.d.ts +28 -0
  17. package/CapNavigationSPA/CapNavigationSPATopBar/types.d.ts.map +1 -0
  18. package/CapNavigationSPA/CapNavigationSPATopBar/types.js +1 -0
  19. package/CapNavigationSPA/constants.d.ts +2 -0
  20. package/CapNavigationSPA/constants.d.ts.map +1 -0
  21. package/CapNavigationSPA/constants.js +4 -0
  22. package/CapNavigationSPA/index.d.ts +10 -0
  23. package/CapNavigationSPA/index.d.ts.map +1 -0
  24. package/CapNavigationSPA/index.js +436 -0
  25. package/CapNavigationSPA/messages.d.ts +13 -0
  26. package/CapNavigationSPA/messages.d.ts.map +1 -0
  27. package/CapNavigationSPA/messages.js +16 -0
  28. package/CapNavigationSPA/mockdata.d.ts +6 -0
  29. package/CapNavigationSPA/mockdata.d.ts.map +1 -0
  30. package/CapNavigationSPA/mockdata.js +4 -0
  31. package/CapNavigationSPA/styles.css +59 -0
  32. package/CapNavigationSPA/styles.module.scss.js +10 -0
  33. package/CapNavigationSPA/styles.scss +60 -0
  34. package/CapNavigationSPA/tests/CapNavigationSPA.mockData.d.ts +31 -0
  35. package/CapNavigationSPA/tests/CapNavigationSPA.mockData.d.ts.map +1 -0
  36. package/CapNavigationSPA/types.d.ts +39 -0
  37. package/CapNavigationSPA/types.d.ts.map +1 -0
  38. package/CapNavigationSPA/types.js +1 -0
  39. package/assets/svgIcons/Icons/AiraNav.js +23 -0
  40. package/assets/svgIcons/Icons/CreativesNav.js +22 -0
  41. package/assets/svgIcons/Icons/DataManagement.js +22 -0
  42. package/assets/svgIcons/Icons/EngageNav.js +23 -0
  43. package/assets/svgIcons/Icons/InsightsNav.js +22 -0
  44. package/assets/svgIcons/Icons/LoyaltyTag.js +22 -0
  45. package/assets/svgIcons/Icons/Members.js +22 -0
  46. package/assets/svgIcons/Icons/RewardsOutline.js +4 -6
  47. package/assets/svgIcons/Icons/SidebarCollapse.js +17 -0
  48. package/assets/svgIcons/Icons/SidebarExpand.js +22 -0
  49. package/assets/svgIcons/Icons/ThreeStars.js +36 -18
  50. package/assets/svgIcons/component.js +27 -0
  51. package/assets/svgIcons/index.js +612 -594
  52. package/index.d.ts +2 -0
  53. package/index.d.ts.map +1 -1
  54. package/index.js +195 -193
  55. package/package.json +1 -1
package/CapNavigationSPA/CapNavigationSPASidebar/styles.css ADDED
@@ -0,0 +1,318 @@
1
+ /* Color Palette */
2
+ /* Fonts */
3
+ /* Backward Compatibility Aliases */
4
+ /* Component Heights */
5
+ /* Border Radius */
6
+ /* Border Width */
7
+ /* Transition */
8
+ /* Timezones Footer */
9
+ .cap-navigation-spa-sidebar__wrapper {
10
+ position: relative;
11
+ display: flex;
12
+ flex-shrink: 0;
13
+ }
14
+ .cap-navigation-spa-sidebar {
15
+ width: 17.143rem;
16
+ min-width: 17.143rem;
17
+ height: 100%;
18
+ background-color: #fafbfc;
19
+ border-right: 1px solid #dfe2e7;
20
+ display: flex;
21
+ flex-direction: column;
22
+ flex-shrink: 0;
23
+ transition: width 0.2s ease, min-width 0.2s ease;
24
+ }
25
+ .cap-navigation-spa-sidebar--collapsed {
26
+ width: 5.714rem;
27
+ min-width: 5.714rem;
28
+ background-color: #fafbfc;
29
+ }
30
+ .cap-navigation-spa-sidebar__logo {
31
+ height: 5rem;
32
+ padding: 1rem 0.857rem 1rem 1.429rem;
33
+ display: flex;
34
+ align-items: center;
35
+ gap: 0.5rem;
36
+ flex-shrink: 0;
37
+ }
38
+ .cap-navigation-spa-sidebar--collapsed .cap-navigation-spa-sidebar__logo {
39
+ padding: 1rem 0.571rem;
40
+ justify-content: center;
41
+ }
42
+ .cap-navigation-spa-sidebar__logo-icon {
43
+ flex-shrink: 0;
44
+ display: flex;
45
+ align-items: center;
46
+ justify-content: center;
47
+ }
48
+ .cap-navigation-spa-sidebar__logo-text {
49
+ font-family: "Roboto", sans-serif;
50
+ font-size: 1.143rem;
51
+ font-weight: 500;
52
+ color: #091e42;
53
+ }
54
+ .cap-navigation-spa-sidebar__nav {
55
+ display: flex;
56
+ flex-direction: column;
57
+ flex: 1 1 auto;
58
+ min-height: 0;
59
+ padding: 0;
60
+ }
61
+ .cap-navigation-spa-sidebar__item {
62
+ display: flex;
63
+ align-items: center;
64
+ height: 2.857rem;
65
+ padding: 0 1.429rem 0 1.429rem;
66
+ gap: 1rem;
67
+ width: 100%;
68
+ border: none;
69
+ background: transparent;
70
+ cursor: pointer;
71
+ font-family: "Roboto", sans-serif;
72
+ font-size: 1rem;
73
+ font-weight: 400;
74
+ color: #091e42;
75
+ text-align: left;
76
+ transition: background-color 0.15s ease;
77
+ }
78
+ .cap-navigation-spa-sidebar__item:hover {
79
+ background-color: #ebecf0;
80
+ }
81
+ .cap-navigation-spa-sidebar--collapsed .cap-navigation-spa-sidebar__item {
82
+ padding: 0 0.571rem;
83
+ justify-content: center;
84
+ }
85
+ .cap-navigation-spa-sidebar__item-icon {
86
+ display: flex;
87
+ align-items: center;
88
+ justify-content: center;
89
+ width: 1rem;
90
+ height: 1rem;
91
+ flex-shrink: 0;
92
+ color: #091e42;
93
+ }
94
+ .cap-navigation-spa-sidebar__item-dot {
95
+ width: 0.25rem;
96
+ height: 0.25rem;
97
+ border-radius: 50%;
98
+ background-color: currentColor;
99
+ }
100
+ .cap-navigation-spa-sidebar__item-label {
101
+ white-space: nowrap;
102
+ overflow: hidden;
103
+ text-overflow: ellipsis;
104
+ flex: 1 1 auto;
105
+ min-width: 0;
106
+ }
107
+ .cap-navigation-spa-sidebar__item--expanded {
108
+ background-color: #ebecf0;
109
+ }
110
+ .cap-navigation-spa-sidebar__item--expanded-loyalty,
111
+ .cap-navigation-spa-sidebar__item--expanded-engage,
112
+ .cap-navigation-spa-sidebar__item--expanded-insights,
113
+ .cap-navigation-spa-sidebar__item--expanded-members,
114
+ .cap-navigation-spa-sidebar__item--expanded-rewards,
115
+ .cap-navigation-spa-sidebar__item--expanded-audiences,
116
+ .cap-navigation-spa-sidebar__item--expanded-data-management,
117
+ .cap-navigation-spa-sidebar__item--expanded-extensions,
118
+ .cap-navigation-spa-sidebar__item--expanded-settings {
119
+ background-color: #e9f0fe;
120
+ }
121
+ .cap-navigation-spa-sidebar__item-chevron {
122
+ flex-shrink: 0;
123
+ margin-left: auto;
124
+ color: #091e42;
125
+ }
126
+ .cap-navigation-spa-sidebar__l2-wrapper {
127
+ display: flex;
128
+ flex-direction: column;
129
+ width: 100%;
130
+ }
131
+ .cap-navigation-spa-sidebar__l2-divider {
132
+ height: 1px;
133
+ background-color: #dfe2e7;
134
+ width: 100%;
135
+ flex-shrink: 0;
136
+ }
137
+ .cap-navigation-spa-sidebar__l2-inline {
138
+ display: flex;
139
+ flex-direction: column;
140
+ margin-left: 2.286rem;
141
+ padding: 0;
142
+ border-left: 2px solid #dfe2e7;
143
+ background-color: #fafbfc;
144
+ }
145
+ .cap-navigation-spa-sidebar__l2-inline-item {
146
+ display: flex;
147
+ align-items: center;
148
+ height: 2.857rem;
149
+ padding: 0 1.714rem 0 1.286rem;
150
+ width: 100%;
151
+ border: none;
152
+ background-color: #fafbfc;
153
+ cursor: pointer;
154
+ font-family: "Roboto", sans-serif;
155
+ font-size: 1rem;
156
+ font-weight: 400;
157
+ color: #091e42;
158
+ text-align: left;
159
+ transition: background-color 0.15s ease;
160
+ }
161
+ .cap-navigation-spa-sidebar__l2-inline-item:hover {
162
+ background-color: #ebecf0;
163
+ }
164
+ .cap-navigation-spa-sidebar__l2-inline-item--selected {
165
+ background-color: #e9f0fe;
166
+ }
167
+ .cap-navigation-spa-sidebar__l2-inline-item--selected-loyalty,
168
+ .cap-navigation-spa-sidebar__l2-inline-item--selected-engage,
169
+ .cap-navigation-spa-sidebar__l2-inline-item--selected-insights,
170
+ .cap-navigation-spa-sidebar__l2-inline-item--selected-members,
171
+ .cap-navigation-spa-sidebar__l2-inline-item--selected-rewards,
172
+ .cap-navigation-spa-sidebar__l2-inline-item--selected-audiences,
173
+ .cap-navigation-spa-sidebar__l2-inline-item--selected-data-management,
174
+ .cap-navigation-spa-sidebar__l2-inline-item--selected-extensions,
175
+ .cap-navigation-spa-sidebar__l2-inline-item--selected-settings {
176
+ margin-left: -2px;
177
+ background-color: #ebecf0;
178
+ box-shadow: inset 2px 0 0 #2466ea;
179
+ }
180
+ .cap-navigation-spa-sidebar__divider {
181
+ height: 1px;
182
+ background-color: #dfe2e7;
183
+ margin: 1rem 0.857rem;
184
+ flex-shrink: 0;
185
+ }
186
+ .cap-navigation-spa-sidebar__footer {
187
+ padding: 0.571rem 0 1rem;
188
+ flex-shrink: 0;
189
+ display: flex;
190
+ flex-direction: column;
191
+ gap: 1rem;
192
+ }
193
+ .cap-navigation-spa-sidebar--collapsed .cap-navigation-spa-sidebar__footer {
194
+ padding: 0.571rem 0.571rem 1rem;
195
+ }
196
+ .cap-navigation-spa-sidebar__collapse-btn {
197
+ display: flex;
198
+ align-items: center;
199
+ justify-content: center;
200
+ width: 5.714rem;
201
+ height: 2.857rem;
202
+ padding: 0;
203
+ margin-top: 0;
204
+ border: none;
205
+ background-color: transparent;
206
+ cursor: pointer;
207
+ color: #091e42;
208
+ border-radius: 0;
209
+ transition: background-color 0.15s ease;
210
+ flex-shrink: 0;
211
+ }
212
+ .cap-navigation-spa-sidebar__collapse-btn:hover {
213
+ background-color: #ebecf0;
214
+ }
215
+ .cap-navigation-spa-sidebar__collapse-btn-icon {
216
+ font-size: 16px;
217
+ }
218
+ .cap-navigation-spa-sidebar__collapse-wrap {
219
+ width: 100%;
220
+ display: flex;
221
+ justify-content: flex-end;
222
+ }
223
+ .cap-navigation-spa-sidebar--collapsed .cap-navigation-spa-sidebar__collapse-wrap {
224
+ justify-content: center;
225
+ }
226
+ .cap-navigation-spa-sidebar__item-flyout-wrap {
227
+ position: relative;
228
+ }
229
+ .cap-navigation-spa-sidebar__l2-flyout {
230
+ position: absolute;
231
+ left: 100%;
232
+ top: 50%;
233
+ transform: translateY(-50%);
234
+ display: flex;
235
+ align-items: center;
236
+ padding-left: 4px;
237
+ z-index: 10;
238
+ pointer-events: auto;
239
+ }
240
+ .cap-navigation-spa-sidebar__l2-flyout-arrow {
241
+ width: 0;
242
+ height: 0;
243
+ border-top: 5px solid transparent;
244
+ border-bottom: 5px solid transparent;
245
+ border-right: 5px solid #ffffff;
246
+ align-self: center;
247
+ margin-left: -3px;
248
+ filter: drop-shadow(0 0 1px rgba(9, 30, 66, 0.15));
249
+ }
250
+ .cap-navigation-spa-sidebar__l2-flyout-card {
251
+ background-color: #ffffff;
252
+ border: 1px solid #dfe2e7;
253
+ border-radius: 6px;
254
+ box-shadow: 0 4px 4px rgba(9, 30, 66, 0.15), 0 0 1px rgba(9, 30, 66, 0.15);
255
+ min-width: 200px;
256
+ overflow: hidden;
257
+ display: flex;
258
+ flex-direction: column;
259
+ }
260
+ .cap-navigation-spa-sidebar__l2-flyout-parent {
261
+ padding: 8px 16px 10px;
262
+ font-family: "Roboto", sans-serif;
263
+ font-size: 1rem;
264
+ font-weight: 500;
265
+ color: #091e42;
266
+ border-bottom: 1px solid #dfe2e7;
267
+ flex-shrink: 0;
268
+ }
269
+ .cap-navigation-spa-sidebar__l2-flyout-item {
270
+ display: flex;
271
+ align-items: center;
272
+ height: 2.857rem;
273
+ padding: 0 1rem;
274
+ width: 100%;
275
+ border: none;
276
+ background-color: #fafbfc;
277
+ cursor: pointer;
278
+ font-family: "Roboto", sans-serif;
279
+ font-size: 1rem;
280
+ font-weight: 400;
281
+ color: #091e42;
282
+ text-align: left;
283
+ transition: background-color 0.15s ease;
284
+ }
285
+ .cap-navigation-spa-sidebar__l2-flyout-item:hover {
286
+ background-color: #ebecf0;
287
+ }
288
+ .cap-navigation-spa-sidebar__l2-flyout-item--selected {
289
+ background-color: #e9f0fe;
290
+ }
291
+ .cap-navigation-spa-sidebar__l1-tooltip-flyout {
292
+ position: absolute;
293
+ left: 100%;
294
+ top: 50%;
295
+ transform: translateY(-50%);
296
+ display: flex;
297
+ align-items: center;
298
+ padding-left: 4px;
299
+ z-index: 10;
300
+ pointer-events: auto;
301
+ }
302
+ .cap-navigation-spa-sidebar__l1-tooltip-card {
303
+ background-color: #ffffff;
304
+ border: 1px solid #dfe2e7;
305
+ border-radius: 6px;
306
+ box-shadow: 0 4px 4px rgba(9, 30, 66, 0.15), 0 0 1px rgba(9, 30, 66, 0.15);
307
+ overflow: hidden;
308
+ display: flex;
309
+ flex-direction: column;
310
+ }
311
+ .cap-navigation-spa-sidebar__l1-tooltip-label {
312
+ padding: 8px 16px 10px;
313
+ font-family: "Roboto", sans-serif;
314
+ font-size: 1rem;
315
+ font-weight: 400;
316
+ color: #091e42;
317
+ white-space: nowrap;
318
+ }
package/CapNavigationSPA/CapNavigationSPASidebar/styles.module.scss.js ADDED
@@ -0,0 +1,56 @@
1
+ import './styles.css';const styles = {
2
+ "cap-navigation-spa-sidebar__wrapper": "cap-navigation-spa-sidebar__wrapper",
3
+ "cap-navigation-spa-sidebar": "cap-navigation-spa-sidebar",
4
+ "cap-navigation-spa-sidebar--collapsed": "cap-navigation-spa-sidebar--collapsed",
5
+ "cap-navigation-spa-sidebar__logo": "cap-navigation-spa-sidebar__logo",
6
+ "cap-navigation-spa-sidebar__logo-icon": "cap-navigation-spa-sidebar__logo-icon",
7
+ "cap-navigation-spa-sidebar__logo-text": "cap-navigation-spa-sidebar__logo-text",
8
+ "cap-navigation-spa-sidebar__nav": "cap-navigation-spa-sidebar__nav",
9
+ "cap-navigation-spa-sidebar__item": "cap-navigation-spa-sidebar__item",
10
+ "cap-navigation-spa-sidebar__item-icon": "cap-navigation-spa-sidebar__item-icon",
11
+ "cap-navigation-spa-sidebar__item-dot": "cap-navigation-spa-sidebar__item-dot",
12
+ "cap-navigation-spa-sidebar__item-label": "cap-navigation-spa-sidebar__item-label",
13
+ "cap-navigation-spa-sidebar__item--expanded": "cap-navigation-spa-sidebar__item--expanded",
14
+ "cap-navigation-spa-sidebar__item--expanded-loyalty": "cap-navigation-spa-sidebar__item--expanded-loyalty",
15
+ "cap-navigation-spa-sidebar__item--expanded-engage": "cap-navigation-spa-sidebar__item--expanded-engage",
16
+ "cap-navigation-spa-sidebar__item--expanded-insights": "cap-navigation-spa-sidebar__item--expanded-insights",
17
+ "cap-navigation-spa-sidebar__item--expanded-members": "cap-navigation-spa-sidebar__item--expanded-members",
18
+ "cap-navigation-spa-sidebar__item--expanded-rewards": "cap-navigation-spa-sidebar__item--expanded-rewards",
19
+ "cap-navigation-spa-sidebar__item--expanded-audiences": "cap-navigation-spa-sidebar__item--expanded-audiences",
20
+ "cap-navigation-spa-sidebar__item--expanded-data-management": "cap-navigation-spa-sidebar__item--expanded-data-management",
21
+ "cap-navigation-spa-sidebar__item--expanded-extensions": "cap-navigation-spa-sidebar__item--expanded-extensions",
22
+ "cap-navigation-spa-sidebar__item--expanded-settings": "cap-navigation-spa-sidebar__item--expanded-settings",
23
+ "cap-navigation-spa-sidebar__item-chevron": "cap-navigation-spa-sidebar__item-chevron",
24
+ "cap-navigation-spa-sidebar__l2-wrapper": "cap-navigation-spa-sidebar__l2-wrapper",
25
+ "cap-navigation-spa-sidebar__l2-divider": "cap-navigation-spa-sidebar__l2-divider",
26
+ "cap-navigation-spa-sidebar__l2-inline": "cap-navigation-spa-sidebar__l2-inline",
27
+ "cap-navigation-spa-sidebar__l2-inline-item": "cap-navigation-spa-sidebar__l2-inline-item",
28
+ "cap-navigation-spa-sidebar__l2-inline-item--selected": "cap-navigation-spa-sidebar__l2-inline-item--selected",
29
+ "cap-navigation-spa-sidebar__l2-inline-item--selected-loyalty": "cap-navigation-spa-sidebar__l2-inline-item--selected-loyalty",
30
+ "cap-navigation-spa-sidebar__l2-inline-item--selected-engage": "cap-navigation-spa-sidebar__l2-inline-item--selected-engage",
31
+ "cap-navigation-spa-sidebar__l2-inline-item--selected-insights": "cap-navigation-spa-sidebar__l2-inline-item--selected-insights",
32
+ "cap-navigation-spa-sidebar__l2-inline-item--selected-members": "cap-navigation-spa-sidebar__l2-inline-item--selected-members",
33
+ "cap-navigation-spa-sidebar__l2-inline-item--selected-rewards": "cap-navigation-spa-sidebar__l2-inline-item--selected-rewards",
34
+ "cap-navigation-spa-sidebar__l2-inline-item--selected-audiences": "cap-navigation-spa-sidebar__l2-inline-item--selected-audiences",
35
+ "cap-navigation-spa-sidebar__l2-inline-item--selected-data-management": "cap-navigation-spa-sidebar__l2-inline-item--selected-data-management",
36
+ "cap-navigation-spa-sidebar__l2-inline-item--selected-extensions": "cap-navigation-spa-sidebar__l2-inline-item--selected-extensions",
37
+ "cap-navigation-spa-sidebar__l2-inline-item--selected-settings": "cap-navigation-spa-sidebar__l2-inline-item--selected-settings",
38
+ "cap-navigation-spa-sidebar__divider": "cap-navigation-spa-sidebar__divider",
39
+ "cap-navigation-spa-sidebar__footer": "cap-navigation-spa-sidebar__footer",
40
+ "cap-navigation-spa-sidebar__collapse-btn": "cap-navigation-spa-sidebar__collapse-btn",
41
+ "cap-navigation-spa-sidebar__collapse-btn-icon": "cap-navigation-spa-sidebar__collapse-btn-icon",
42
+ "cap-navigation-spa-sidebar__collapse-wrap": "cap-navigation-spa-sidebar__collapse-wrap",
43
+ "cap-navigation-spa-sidebar__item-flyout-wrap": "cap-navigation-spa-sidebar__item-flyout-wrap",
44
+ "cap-navigation-spa-sidebar__l2-flyout": "cap-navigation-spa-sidebar__l2-flyout",
45
+ "cap-navigation-spa-sidebar__l2-flyout-arrow": "cap-navigation-spa-sidebar__l2-flyout-arrow",
46
+ "cap-navigation-spa-sidebar__l2-flyout-card": "cap-navigation-spa-sidebar__l2-flyout-card",
47
+ "cap-navigation-spa-sidebar__l2-flyout-parent": "cap-navigation-spa-sidebar__l2-flyout-parent",
48
+ "cap-navigation-spa-sidebar__l2-flyout-item": "cap-navigation-spa-sidebar__l2-flyout-item",
49
+ "cap-navigation-spa-sidebar__l2-flyout-item--selected": "cap-navigation-spa-sidebar__l2-flyout-item--selected",
50
+ "cap-navigation-spa-sidebar__l1-tooltip-flyout": "cap-navigation-spa-sidebar__l1-tooltip-flyout",
51
+ "cap-navigation-spa-sidebar__l1-tooltip-card": "cap-navigation-spa-sidebar__l1-tooltip-card",
52
+ "cap-navigation-spa-sidebar__l1-tooltip-label": "cap-navigation-spa-sidebar__l1-tooltip-label"
53
+ };
54
+ export {
55
+ styles as default
56
+ };