intelicoreact 0.0.53 → 0.0.64

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 (51) hide show
  1. package/dist/Atomic/FormElements/DateTime/DateTime.stories.js +1 -1
  2. package/dist/Atomic/FormElements/Input/Input.js +5 -5
  3. package/dist/Atomic/FormElements/InputCalendar/InputCalendar.js +4 -4
  4. package/dist/Atomic/FormElements/InputDateRange/InputDateRange.js +265 -0
  5. package/dist/Atomic/FormElements/InputDateRange/InputDateRange.scss +569 -0
  6. package/dist/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +243 -0
  7. package/dist/Atomic/FormElements/InputDateRange/components/Datepicker.js +486 -0
  8. package/dist/Atomic/FormElements/InputDateRange/components/OpenedPart.js +154 -0
  9. package/dist/Atomic/FormElements/InputDateRange/components/SelectItem.js +46 -0
  10. package/dist/Atomic/FormElements/InputDateRange/dependencies.js +249 -0
  11. package/dist/Atomic/FormElements/Modal/Modal.stories.js +64 -18
  12. package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.js +162 -0
  13. package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.scss +101 -0
  14. package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.stories.js +81 -0
  15. package/dist/Atomic/UI/Arrow/Arrow.js +80 -0
  16. package/dist/Atomic/UI/Arrow/Arrow.scss +19 -0
  17. package/dist/Atomic/UI/Arrow/Arrow.stories.js +46 -0
  18. package/dist/Atomic/UI/Button/Button.js +4 -2
  19. package/dist/Atomic/UI/Button/Button.scss +26 -0
  20. package/dist/Atomic/UI/Button/Button.stories.js +2 -2
  21. package/dist/Atomic/{FormElements → UI}/Calendar/Calendar.js +0 -0
  22. package/dist/Atomic/UI/Calendar/Calendar.scss +544 -0
  23. package/dist/Atomic/{FormElements → UI}/Calendar/Calendar.stories.js +5 -1
  24. package/dist/Functions/utils.js +10 -2
  25. package/package.json +7 -5
  26. package/src/Atomic/FormElements/DateTime/DateTime.stories.js +1 -1
  27. package/src/Atomic/FormElements/Input/Input.js +5 -5
  28. package/src/Atomic/FormElements/InputCalendar/InputCalendar.js +6 -6
  29. package/src/Atomic/FormElements/InputDateRange/InputDateRange.js +247 -0
  30. package/src/Atomic/FormElements/InputDateRange/InputDateRange.scss +569 -0
  31. package/src/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +148 -0
  32. package/src/Atomic/FormElements/InputDateRange/components/Datepicker.js +406 -0
  33. package/src/Atomic/FormElements/InputDateRange/components/OpenedPart.js +112 -0
  34. package/src/Atomic/FormElements/InputDateRange/components/SelectItem.js +24 -0
  35. package/src/Atomic/FormElements/InputDateRange/dependencies.js +161 -0
  36. package/src/Atomic/FormElements/Modal/Modal.stories.js +60 -15
  37. package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.js +143 -0
  38. package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.scss +101 -0
  39. package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.stories.js +54 -0
  40. package/src/Atomic/UI/Arrow/Arrow.js +41 -0
  41. package/src/Atomic/UI/Arrow/Arrow.scss +19 -0
  42. package/src/Atomic/UI/Arrow/Arrow.stories.js +32 -0
  43. package/src/Atomic/UI/Button/Button.js +3 -3
  44. package/src/Atomic/UI/Button/Button.scss +26 -0
  45. package/src/Atomic/UI/Button/Button.stories.js +4 -3
  46. package/src/Atomic/{FormElements → UI}/Calendar/Calendar.js +0 -0
  47. package/src/Atomic/UI/Calendar/Calendar.scss +544 -0
  48. package/src/Atomic/{FormElements → UI}/Calendar/Calendar.stories.js +5 -1
  49. package/src/Functions/utils.js +6 -0
  50. package/dist/Atomic/FormElements/Calendar/Calendar.scss +0 -543
  51. package/src/Atomic/FormElements/Calendar/Calendar.scss +0 -543
@@ -1,543 +0,0 @@
1
- .form-select-options {
2
- position: absolute;
3
- font-weight: 400;
4
- left: 0;
5
- margin-top: 3px;
6
- background-color: #fff;
7
- box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
8
- max-height: 335px;
9
- overflow-y: auto;
10
- border: 1px solid #e2e5ec;
11
- z-index: 7;
12
-
13
- &--wide {
14
- min-width: 100%;
15
- overflow-x: hidden;
16
- }
17
-
18
- &--short {
19
- max-height: 195px;
20
- }
21
-
22
- &--hoverable {
23
- border: none;
24
- }
25
-
26
- &--options-top {
27
- bottom: 100%;
28
- box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.15);
29
- }
30
-
31
- &__item {
32
- cursor: pointer;
33
- padding: 0 20px 0 30px;
34
- user-select: none;
35
- white-space: nowrap;
36
-
37
- &--active {
38
- //background: #f2f2f8 url(/media/images/check.svg) no-repeat center left 9px / 16px;
39
- }
40
-
41
- &--disabled {
42
- pointer-events: none;
43
- opacity: 0.3;
44
- }
45
-
46
- &:hover {
47
- background-color: #f2f2f8;
48
- }
49
- }
50
-
51
- &__group-name {
52
- cursor: default;
53
- padding: 0 20px 0 15px;
54
- margin-top: 4px;
55
- user-select: none;
56
- white-space: nowrap;
57
- color: #9aa0b9;
58
- font-size: 10px;
59
- font-weight: normal;
60
- text-transform: uppercase;
61
- }
62
- }
63
-
64
- .date-range-input {
65
- background-color: #ffff;
66
- min-width: 275px;
67
- flex-shrink: 0;
68
- display: flex;
69
-
70
- .select-form {
71
- flex-grow: 1;
72
- max-width: calc(100% - 72px);
73
- overflow: hidden;
74
- text-overflow: ellipsis;
75
- }
76
-
77
- button svg {
78
- margin: 0;
79
- }
80
-
81
- & > button:not(:last-child) {
82
- border-top-right-radius: 0;
83
- border-bottom-right-radius: 0;
84
- border-right: none;
85
- }
86
-
87
- & > button:not(:first-child),
88
- & > button:nth-child(n + 3) {
89
- border-top-left-radius: 0;
90
- border-bottom-left-radius: 0;
91
- border-right: none;
92
- }
93
-
94
- & button:not(:first-child),
95
- & button:not(:first-child) button {
96
- border-top-left-radius: 0;
97
- border-bottom-left-radius: 0;
98
- }
99
-
100
- &--compact {
101
- min-width: 130px;
102
-
103
- .form-select-options {
104
- width: 100%;
105
- }
106
- }
107
-
108
- &--focused {
109
- border: 1px solid #6b81dd;
110
- box-shadow: 0 0 3px 0 rgb(0 123 255 / 50%);
111
- }
112
- }
113
-
114
- .form-label {
115
- //display: block;
116
- font-weight: 500;
117
- line-height: 24px;
118
- font-size: 12px;
119
- position: relative;
120
-
121
- &--error {
122
- color: #f06d8d;
123
- font-size: 10px;
124
- font-weight: normal;
125
- line-height: 20px;
126
- position: absolute;
127
- white-space: nowrap;
128
- }
129
-
130
- &--short {
131
- height: 68px;
132
- }
133
- }
134
-
135
- .form-label-title {
136
- &--left {
137
- margin-right: 10px;
138
- white-space: nowrap;
139
- }
140
- }
141
-
142
- .form-label-title-text-right {
143
- font-weight: normal;
144
- font-size: 11px;
145
- color: #9aa0b9;
146
- }
147
-
148
- .form-input {
149
- display: block;
150
- box-sizing: border-box;
151
- width: 100%;
152
- min-height: 28px;
153
- padding: 5px 8px;
154
- border: 1px solid #e2e5ec;
155
- font-family: Roboto, sans-serif;
156
- font-size: 13px;
157
- font-weight: 400;
158
- resize: none;
159
-
160
- &--btn-right {
161
- & input {
162
- padding-right: 75px;
163
- }
164
- }
165
-
166
- &--tall {
167
- height: 160px;
168
- }
169
-
170
- &--small {
171
- width: 100px;
172
- height: 20px;
173
- }
174
-
175
- &--error {
176
- border: 1px solid #f06d8d;
177
- }
178
-
179
- &--lock {
180
- padding-right: 25px;
181
- //background: #fff url(/media/images/lock.svg) no-repeat center right 4px / 16px;
182
- }
183
-
184
- &--login {
185
- padding-right: 25px;
186
- //background: #fff url(/media/images/user.svg) no-repeat center right 4px / 16px;
187
- }
188
-
189
- &--email {
190
- padding-right: 25px;
191
- //background: #fff url(/media/images/mail.svg) no-repeat center right 4px / 16px;
192
- }
193
-
194
- &--password {
195
- padding-right: 25px;
196
- //background: #fff url(/media/images/key.svg) no-repeat center right 4px / 16px;
197
- }
198
-
199
- &--promo {
200
- padding-right: 25px;
201
- //background: #fff url(/media/images/gift.svg) no-repeat center right 4px / 16px;
202
- }
203
-
204
- &--edit {
205
- padding-right: 25px;
206
- //background: #fff url(/media/images/edit.svg) no-repeat center right 4px / 16px;
207
- }
208
-
209
- &:disabled {
210
- background-color: #f7f8fa;
211
- border: 1px solid #bac2c9;
212
- pointer-events: none;
213
- }
214
-
215
- &:focus {
216
- border: 1px solid #6b81dd;
217
- }
218
-
219
- &::placeholder {
220
- color: #bac2c9;
221
- }
222
- }
223
-
224
- select.form-input {
225
- -webkit-appearance: none;
226
- -moz-appearance: none;
227
- appearance: none;
228
- padding-right: 25px;
229
- //background: #fff url(/media/images/chevron-down.svg) no-repeat center right 4px / 16px;
230
- }
231
-
232
- .select-form {
233
- position: relative;
234
- }
235
-
236
- .form-select {
237
- &__clear-btn {
238
- position: absolute;
239
- width: 22px;
240
- height: 26px;
241
- right: 1px;
242
- top: 1px;
243
- margin-right: 2px;
244
- cursor: pointer;
245
- display: flex;
246
- align-items: center;
247
- justify-content: center;
248
- border-left: 1px solid #e2e5ecff;
249
-
250
- & svg {
251
- width: 16px;
252
- height: 16px;
253
- color: #9aa0b9ff;
254
- }
255
-
256
- &:hover {
257
- & svg {
258
- color: #6b81ddff;
259
- }
260
- }
261
- }
262
-
263
- &__input {
264
- //background: #fff url(/media/images/chevron-down.svg) no-repeat center right 4px / 16px;
265
- padding-right: 25px;
266
- line-height: initial;
267
- cursor: default;
268
- min-width: 60px;
269
- min-height: 28px;
270
- user-select: none;
271
- border-radius: 3px;
272
- white-space: nowrap;
273
- display: block;
274
- overflow: hidden;
275
- text-overflow: ellipsis;
276
- text-align: left;
277
-
278
- &--fixed {
279
- min-height: 76px;
280
- }
281
-
282
- &--opened {
283
- //background: #fff url(/media/images/chevron-up.svg) no-repeat center right 4px / 16px;
284
- padding-right: 25px;
285
- }
286
-
287
- &--focused {
288
- border: 1px solid #6b81dd;
289
- box-shadow: 0 0 3px 0 rgb(0 123 255 / 50%);
290
- }
291
-
292
- &--disabled {
293
- color: #9aa0b9;
294
- //background: #f7f8fa url(/media/images/chevron-down-disabled.svg) no-repeat center right 4px / 16px;
295
- border: 1px solid #bac2c9;
296
- padding-right: 25px;
297
- pointer-events: none;
298
- }
299
-
300
- &--placeholder {
301
- color: #9aa0b9;
302
- }
303
-
304
- &--searchable {
305
- padding: 0;
306
- }
307
-
308
- &--cleanable {
309
- background-position: center right 26px;
310
- padding-right: 45px;
311
- }
312
- }
313
-
314
- &__input-text {
315
- &--searchable {
316
- width: 100%;
317
- height: 24px;
318
- padding-left: 8px;
319
- font-family: Roboto, sans-serif;
320
- font-size: 13px;
321
- font-weight: 400;
322
- border: none;
323
- outline: none;
324
- box-shadow: none;
325
-
326
- &:focus {
327
- border: none;
328
- outline: none;
329
- box-shadow: none;
330
- }
331
- }
332
- }
333
- }
334
-
335
- .form-select-inner {
336
- position: absolute;
337
- left: 130px;
338
- font-weight: 400;
339
- margin-top: 3px;
340
- background-color: #fff;
341
- box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
342
- z-index: 6;
343
- }
344
-
345
- .date-picker {
346
- width: 444px;
347
- border: 1px solid #e2e5ec;
348
-
349
- &__header,
350
- &__footer {
351
- background: #f7fafc;
352
- padding: 10px 15px;
353
- display: flex;
354
-
355
- &--gray {
356
- color: #c4c4c4;
357
- display: flex;
358
- align-items: center;
359
- padding: 0 5px;
360
- }
361
- }
362
-
363
- &__previous-period {
364
- background: #f7fafc;
365
- font-size: 10px;
366
- line-height: 1.3;
367
- padding: 0 15px;
368
- min-height: 25px;
369
- color: #9aa0b9;
370
- }
371
-
372
- &__previous-period-interval {
373
- font-weight: 500;
374
- color: #000000;
375
- }
376
-
377
- &__calendars {
378
- display: flex;
379
- justify-content: space-between;
380
- padding: 10px 15px;
381
- }
382
- }
383
-
384
- .calendar-header {
385
- display: flex;
386
- height: 24px;
387
- margin: 0 6px;
388
-
389
- &__title {
390
- line-height: 20px;
391
- font-weight: 500;
392
- text-align: center;
393
- flex-grow: 1;
394
- color: #000000;
395
- display: flex;
396
- align-items: center;
397
- justify-content: center;
398
- }
399
-
400
- &__next,
401
- &__prev {
402
- width: 16px;
403
- color: #9aa0b9ff;
404
- display: flex;
405
- align-items: center;
406
- justify-content: center;
407
-
408
- & > div {
409
- display: flex;
410
- align-items: center;
411
- justify-content: center;
412
- cursor: pointer;
413
- height: 100%;
414
-
415
- &:hover {
416
- background: #e2e6f8;
417
- }
418
- }
419
- }
420
- }
421
-
422
- .date-picker-text-input {
423
- &--active input {
424
- border: 1px solid #6b81dd;
425
- box-shadow: 0 0 3px 0 rgb(0 123 255 / 50%);
426
- }
427
- }
428
-
429
- .calendar {
430
- background: #ffffff;
431
- border: 1px solid #e2e5ec;
432
- box-shadow: 0 5px 20px rgb(0 0 0 / 15%);
433
- margin-top: 4px;
434
- padding: 5px 0;
435
-
436
- min-height: 195px;
437
- display: flex;
438
- flex-direction: column;
439
- user-select: none;
440
-
441
- &__week {
442
- display: flex;
443
- }
444
-
445
- &__day {
446
- font-size: 13px;
447
- line-height: 20px;
448
- margin: 1px 0;
449
- flex-grow: 1;
450
- flex-basis: 0;
451
- text-align: center;
452
- padding: 1px 6px;
453
- user-select: none;
454
-
455
- &--clickable {
456
- cursor: pointer;
457
-
458
- &:hover {
459
- background: #e2e6f8;
460
- }
461
- }
462
-
463
- &--disabled {
464
- cursor: default;
465
- color: #9aa0b9;
466
- pointer-events: none;
467
-
468
- &:hover {
469
- background: inherit;
470
- }
471
- }
472
-
473
- &--range-end,
474
- &--selected {
475
- background: #6b81dd;
476
- color: white;
477
- border-radius: 4px;
478
-
479
- &:hover {
480
- background: #6b81dd;
481
- }
482
- }
483
-
484
- &--range-inside {
485
- background: #e2e6f8;
486
- }
487
-
488
- &--prev-range-end {
489
- background: #e2e5ec;
490
- border-radius: 4px;
491
- }
492
-
493
- &--prev-range-inside {
494
- background: #f7f8fa;
495
- }
496
-
497
- &--title {
498
- font-size: 10px;
499
- color: #9aa0b9;
500
- font-weight: normal;
501
-
502
- &:hover {
503
- background: inherit;
504
- }
505
- }
506
- }
507
-
508
- &-container {
509
- width: 200px;
510
- }
511
-
512
- &-dropdown {
513
- appearance: none;
514
- background-color: white;
515
- cursor: pointer;
516
- color: gray;
517
-
518
- width: 100%;
519
- height: 28px;
520
-
521
- display: flex;
522
- cursor: pointer;
523
- padding-left: 9px;
524
- font-weight: 400;
525
- overflow: hidden;
526
- align-items: center;
527
-
528
- border: 1px solid #e2e5ec;
529
- box-sizing: border-box;
530
- border-radius: 3px;
531
- user-select: none;
532
- }
533
- &-placeholder {
534
- width: 100%;
535
- background: none;
536
- border: none;
537
- padding: 0 15px 0 0;
538
- height: 16px;
539
- text-overflow: ellipsis;
540
- font-weight: 400;
541
- font-size: 13px;
542
- }
543
- }