@itcase/ui 1.0.97 → 1.0.99

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.
@@ -28,23 +28,23 @@ require('../hooks/useStyles.js');
28
28
  require('lodash/maxBy');
29
29
  require('lodash/upperFirst');
30
30
  require('../hooks/styleAttributes.js');
31
- require('../constants/componentProps/borderType.js');
31
+ require('./Tooltip.js');
32
+ require('./Title.js');
32
33
  require('../constants/componentProps/fill.js');
33
- require('../constants/componentProps/shape.js');
34
34
  require('../constants/componentProps/textAlign.js');
35
+ require('../constants/componentProps/titleSize.js');
36
+ require('../constants/componentProps/type.js');
37
+ require('../constants/componentProps/wrap.js');
38
+ require('../constants/componentProps/shape.js');
39
+ require('../constants/componentProps/borderType.js');
35
40
  require('./Loader.js');
36
41
  require('./Link.js');
37
- require('../constants/componentProps/type.js');
38
42
  require('../constants/componentProps/underline.js');
39
43
  require('../constants/componentProps/width.js');
40
44
  require('react-inlinesvg');
41
45
  require('../constants/componentProps/borderColor.js');
42
46
  require('../constants/componentProps/iconSize.js');
43
47
  require('../constants/componentProps/strokeColor.js');
44
- require('./Tooltip.js');
45
- require('./Title.js');
46
- require('../constants/componentProps/titleSize.js');
47
- require('../constants/componentProps/wrap.js');
48
48
 
49
49
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
50
50
 
@@ -832,7 +832,6 @@ function GridItem(props) {
832
832
  const {
833
833
  styles: gridItemStyles
834
834
  } = useStyles.useStyles(props);
835
- console.log(justifySelfClass);
836
835
  return /*#__PURE__*/React__default.default.createElement("div", {
837
836
  className: clsx__default.default(className, 'grid__item', orderClass, fillClass, fillHoverClass, alignSelfClass, justifySelfClass, columnStartClass, columnEndClass, columnSpanClass, rowStartClass, rowEndClass, rowSpanClass, directionClass, gapClass, rowGapClass, columnGapClass),
838
837
  "data-tour": dataTour,
@@ -4,6 +4,7 @@ var React = require('react');
4
4
  var PropTypes = require('prop-types');
5
5
  var clsx = require('clsx');
6
6
  var index = require('./Text.js');
7
+ var index$1 = require('./Tooltip.js');
7
8
  var borderType = require('../constants/componentProps/borderType.js');
8
9
  var size = require('../constants/componentProps/size.js');
9
10
  var fill = require('../constants/componentProps/fill.js');
@@ -17,11 +18,15 @@ require('../constants/componentProps/textColorHover.js');
17
18
  require('../constants/componentProps/textStyle.js');
18
19
  require('../constants/componentProps/textGradient.js');
19
20
  require('../constants/componentProps/textWeight.js');
20
- require('lodash/castArray');
21
- require('lodash/camelCase');
21
+ require('./Title.js');
22
+ require('../constants/componentProps/titleSize.js');
23
+ require('../constants/componentProps/type.js');
24
+ require('../constants/componentProps/wrap.js');
22
25
  require('../context/UIContext.js');
23
26
  require('../hooks/useMediaQueries.js');
24
27
  require('react-responsive');
28
+ require('lodash/castArray');
29
+ require('lodash/camelCase');
25
30
  require('lodash/maxBy');
26
31
  require('lodash/upperFirst');
27
32
  require('../hooks/styleAttributes.js');
@@ -56,8 +61,24 @@ function Label(props) {
56
61
  dataTour,
57
62
  type,
58
63
  cursor,
64
+ showTooltip,
65
+ tooltipAlignment,
66
+ tooltipText,
67
+ tooltipTextSize,
68
+ tooltipTitle,
69
+ tooltipTitleSize,
70
+ tooltipAppearance,
71
+ tooltipContent,
72
+ tooltipArrowPosition,
59
73
  onClick
60
74
  } = props;
75
+ const tooltipRef = React.useRef(null);
76
+ const onMouseEnterLabel = React.useCallback(() => {
77
+ tooltipRef.current?.openTooltip();
78
+ }, []);
79
+ const onMouseLeaveLabel = React.useCallback(() => {
80
+ tooltipRef.current?.closeTooltip();
81
+ }, []);
61
82
  const alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
62
83
  prefix: 'align_',
63
84
  propsKey: 'alignDirection'
@@ -105,27 +126,48 @@ function Label(props) {
105
126
  const {
106
127
  styles: labelStyles
107
128
  } = useStyles.useStyles(props);
129
+ const labelAppearanceItem = labelConfig.appearance[appearance] || {};
130
+ // const {
131
+ // fill: labelAppearanceFill,
132
+ // fillHover: labelAppearanceFillHover,
133
+ // labelTextColor: labelAppearanceLabelTextColor,
134
+ // labelTextColorHover: labelAppearanceLabelTextColorHover,
135
+ // } = labelAppearanceItem
136
+
108
137
  return /*#__PURE__*/React__default.default.createElement("div", {
109
- className: clsx__default.default(className, 'label', fillClass || labelConfig.appearance[appearance] && `fill_${labelConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || labelConfig.appearance[appearance] && `fill_hover_${labelConfig.appearance[appearance].fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, borderClass, borderTypeClass, sizeClass, wrapClass, widthClass, alignDirectionClass, alignClass, textAlignClass, type && `label_type_${type}`, set && `label_set_${set}`, mode && `label_mode_${mode}`, onClick && (cursor || 'cursor_type_pointer')),
138
+ className: clsx__default.default(className, 'label', fillClass || labelAppearanceItem.fill && `fill_${labelAppearanceItem.fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || labelAppearanceItem.fillHover && `fill_hover_${labelAppearanceItem.fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, borderClass, borderTypeClass, sizeClass, wrapClass, widthClass, alignDirectionClass, alignClass, textAlignClass, type && `label_type_${type}`, set && `label_set_${set}`, mode && `label_mode_${mode}`, onClick && (cursor || 'cursor_type_pointer')),
110
139
  "data-tour": dataTour,
111
140
  style: labelStyles,
112
- onClick: onClick
141
+ onClick: onClick,
142
+ onMouseEnter: onMouseEnterLabel,
143
+ onMouseLeave: onMouseLeaveLabel
113
144
  }, before, /*#__PURE__*/React__default.default.createElement("div", {
114
145
  className: "label__inner"
115
146
  }, typeof label === 'string' ? /*#__PURE__*/React__default.default.createElement(index.Text, {
116
147
  className: "label__label",
117
148
  size: labelTextSize,
118
- textColor: labelTextColor || labelConfig.appearance[appearance]?.labelTextColor,
119
- textColorHover: labelTextColorHover || labelConfig.appearance[appearance]?.labelTextColorHover,
120
- textWeight: labelTextWeight || labelConfig.appearance[appearance]?.labelTextWeight,
149
+ textColor: labelTextColor || labelAppearanceItem.labelTextColor,
150
+ textColorHover: labelTextColorHover || labelAppearanceItem.labelTextColorHover,
151
+ textWeight: labelTextWeight || labelAppearanceItem.labelTextWeight,
121
152
  textWrap: labelTextWrap
122
153
  }, label) : /*#__PURE__*/React__default.default.createElement("div", {
123
154
  className: "label__label"
124
- }, label), children), after);
155
+ }, label), children, showTooltip && /*#__PURE__*/React__default.default.createElement(index$1.Tooltip, {
156
+ alignment: tooltipAlignment,
157
+ appearance: tooltipAppearance,
158
+ arrowPosition: tooltipArrowPosition,
159
+ className: "label__tooltip",
160
+ ref: tooltipRef,
161
+ text: tooltipText,
162
+ textSize: tooltipTextSize,
163
+ title: tooltipTitle,
164
+ titleSize: tooltipTitleSize
165
+ }, tooltipContent)), after);
125
166
  }
126
167
  Label.propTypes = {
127
- children: PropTypes__default.default.any,
128
- className: PropTypes__default.default.string,
168
+ after: PropTypes__default.default.any,
169
+ appearance: PropTypes__default.default.string,
170
+ before: PropTypes__default.default.any,
129
171
  border: PropTypes__default.default.string,
130
172
  borderDesktop: PropTypes__default.default.string,
131
173
  borderMobile: PropTypes__default.default.string,
@@ -134,26 +176,47 @@ Label.propTypes = {
134
176
  borderTypeDesktop: PropTypes__default.default.oneOf(borderType.default),
135
177
  borderTypeMobile: PropTypes__default.default.oneOf(borderType.default),
136
178
  borderTypeTablet: PropTypes__default.default.oneOf(borderType.default),
179
+ children: PropTypes__default.default.any,
180
+ className: PropTypes__default.default.string,
181
+ cursor: PropTypes__default.default.string,
182
+ dataTour: PropTypes__default.default.string,
137
183
  fill: PropTypes__default.default.oneOf(fill.default),
138
184
  fillDesktop: PropTypes__default.default.oneOf(fill.default),
139
185
  fillMobile: PropTypes__default.default.oneOf(fill.default),
140
186
  fillTablet: PropTypes__default.default.oneOf(fill.default),
141
- shape: PropTypes__default.default.oneOf(shape.default),
142
- shapeDesktop: PropTypes__default.default.oneOf(shape.default),
143
- shapeMobile: PropTypes__default.default.oneOf(shape.default),
144
- shapeTablet: PropTypes__default.default.oneOf(shape.default),
145
187
  label: PropTypes__default.default.any,
188
+ labelTextColor: PropTypes__default.default.string,
189
+ labelTextColorHover: PropTypes__default.default.string,
146
190
  labelTextSize: PropTypes__default.default.oneOf(size.default),
147
191
  labelTextSizeDesktop: PropTypes__default.default.oneOf(size.default),
148
192
  labelTextSizeMobile: PropTypes__default.default.oneOf(size.default),
149
193
  labelTextSizeTablet: PropTypes__default.default.oneOf(size.default),
150
- labelTextColor: PropTypes__default.default.string,
194
+ labelTextWeight: PropTypes__default.default.string,
195
+ labelTextWrap: PropTypes__default.default.string,
196
+ mode: PropTypes__default.default.string,
197
+ set: PropTypes__default.default.string,
198
+ shape: PropTypes__default.default.oneOf(shape.default),
199
+ shapeDesktop: PropTypes__default.default.oneOf(shape.default),
200
+ shapeMobile: PropTypes__default.default.oneOf(shape.default),
201
+ shapeTablet: PropTypes__default.default.oneOf(shape.default),
202
+ showTooltip: PropTypes__default.default.bool,
151
203
  size: PropTypes__default.default.oneOf(size.default),
152
204
  sizeDesktop: PropTypes__default.default.oneOf(size.default),
153
205
  sizeMobile: PropTypes__default.default.oneOf(size.default),
154
206
  sizeTablet: PropTypes__default.default.oneOf(size.default),
155
207
  textAlign: PropTypes__default.default.oneOf(textAlign.default),
156
- type: PropTypes__default.default.string
208
+ tooltipAlignment: PropTypes__default.default.string,
209
+ tooltipAppearance: PropTypes__default.default.string,
210
+ tooltipArrowPosition: PropTypes__default.default.string,
211
+ tooltipContent: PropTypes__default.default.any,
212
+ tooltipText: PropTypes__default.default.string,
213
+ tooltipTextSize: PropTypes__default.default.string,
214
+ tooltipTitle: PropTypes__default.default.string,
215
+ tooltipTitleSize: PropTypes__default.default.string,
216
+ type: PropTypes__default.default.string,
217
+ onClick: PropTypes__default.default.func,
218
+ onMouseEnter: PropTypes__default.default.func,
219
+ onMouseLeave: PropTypes__default.default.func
157
220
  };
158
221
  Label.defaultProps = {
159
222
  label: 'Label'
@@ -174,20 +237,27 @@ Label.__docgenInfo = {
174
237
  },
175
238
  "required": false
176
239
  },
177
- "children": {
240
+ "after": {
178
241
  "description": "",
179
242
  "type": {
180
243
  "name": "any"
181
244
  },
182
245
  "required": false
183
246
  },
184
- "className": {
247
+ "appearance": {
185
248
  "description": "",
186
249
  "type": {
187
250
  "name": "string"
188
251
  },
189
252
  "required": false
190
253
  },
254
+ "before": {
255
+ "description": "",
256
+ "type": {
257
+ "name": "any"
258
+ },
259
+ "required": false
260
+ },
191
261
  "border": {
192
262
  "description": "",
193
263
  "type": {
@@ -252,6 +322,34 @@ Label.__docgenInfo = {
252
322
  },
253
323
  "required": false
254
324
  },
325
+ "children": {
326
+ "description": "",
327
+ "type": {
328
+ "name": "any"
329
+ },
330
+ "required": false
331
+ },
332
+ "className": {
333
+ "description": "",
334
+ "type": {
335
+ "name": "string"
336
+ },
337
+ "required": false
338
+ },
339
+ "cursor": {
340
+ "description": "",
341
+ "type": {
342
+ "name": "string"
343
+ },
344
+ "required": false
345
+ },
346
+ "dataTour": {
347
+ "description": "",
348
+ "type": {
349
+ "name": "string"
350
+ },
351
+ "required": false
352
+ },
255
353
  "fill": {
256
354
  "description": "",
257
355
  "type": {
@@ -288,82 +386,124 @@ Label.__docgenInfo = {
288
386
  },
289
387
  "required": false
290
388
  },
291
- "shape": {
389
+ "labelTextColor": {
390
+ "description": "",
391
+ "type": {
392
+ "name": "string"
393
+ },
394
+ "required": false
395
+ },
396
+ "labelTextColorHover": {
397
+ "description": "",
398
+ "type": {
399
+ "name": "string"
400
+ },
401
+ "required": false
402
+ },
403
+ "labelTextSize": {
292
404
  "description": "",
293
405
  "type": {
294
406
  "name": "enum",
295
407
  "computed": true,
296
- "value": "shapeProps"
408
+ "value": "sizeProps"
297
409
  },
298
410
  "required": false
299
411
  },
300
- "shapeDesktop": {
412
+ "labelTextSizeDesktop": {
301
413
  "description": "",
302
414
  "type": {
303
415
  "name": "enum",
304
416
  "computed": true,
305
- "value": "shapeProps"
417
+ "value": "sizeProps"
306
418
  },
307
419
  "required": false
308
420
  },
309
- "shapeMobile": {
421
+ "labelTextSizeMobile": {
310
422
  "description": "",
311
423
  "type": {
312
424
  "name": "enum",
313
425
  "computed": true,
314
- "value": "shapeProps"
426
+ "value": "sizeProps"
315
427
  },
316
428
  "required": false
317
429
  },
318
- "shapeTablet": {
430
+ "labelTextSizeTablet": {
319
431
  "description": "",
320
432
  "type": {
321
433
  "name": "enum",
322
434
  "computed": true,
323
- "value": "shapeProps"
435
+ "value": "sizeProps"
324
436
  },
325
437
  "required": false
326
438
  },
327
- "labelTextSize": {
439
+ "labelTextWeight": {
440
+ "description": "",
441
+ "type": {
442
+ "name": "string"
443
+ },
444
+ "required": false
445
+ },
446
+ "labelTextWrap": {
447
+ "description": "",
448
+ "type": {
449
+ "name": "string"
450
+ },
451
+ "required": false
452
+ },
453
+ "mode": {
454
+ "description": "",
455
+ "type": {
456
+ "name": "string"
457
+ },
458
+ "required": false
459
+ },
460
+ "set": {
461
+ "description": "",
462
+ "type": {
463
+ "name": "string"
464
+ },
465
+ "required": false
466
+ },
467
+ "shape": {
328
468
  "description": "",
329
469
  "type": {
330
470
  "name": "enum",
331
471
  "computed": true,
332
- "value": "sizeProps"
472
+ "value": "shapeProps"
333
473
  },
334
474
  "required": false
335
475
  },
336
- "labelTextSizeDesktop": {
476
+ "shapeDesktop": {
337
477
  "description": "",
338
478
  "type": {
339
479
  "name": "enum",
340
480
  "computed": true,
341
- "value": "sizeProps"
481
+ "value": "shapeProps"
342
482
  },
343
483
  "required": false
344
484
  },
345
- "labelTextSizeMobile": {
485
+ "shapeMobile": {
346
486
  "description": "",
347
487
  "type": {
348
488
  "name": "enum",
349
489
  "computed": true,
350
- "value": "sizeProps"
490
+ "value": "shapeProps"
351
491
  },
352
492
  "required": false
353
493
  },
354
- "labelTextSizeTablet": {
494
+ "shapeTablet": {
355
495
  "description": "",
356
496
  "type": {
357
497
  "name": "enum",
358
498
  "computed": true,
359
- "value": "sizeProps"
499
+ "value": "shapeProps"
360
500
  },
361
501
  "required": false
362
502
  },
363
- "labelTextColor": {
503
+ "showTooltip": {
364
504
  "description": "",
365
505
  "type": {
366
- "name": "string"
506
+ "name": "bool"
367
507
  },
368
508
  "required": false
369
509
  },
@@ -412,12 +552,89 @@ Label.__docgenInfo = {
412
552
  },
413
553
  "required": false
414
554
  },
555
+ "tooltipAlignment": {
556
+ "description": "",
557
+ "type": {
558
+ "name": "string"
559
+ },
560
+ "required": false
561
+ },
562
+ "tooltipAppearance": {
563
+ "description": "",
564
+ "type": {
565
+ "name": "string"
566
+ },
567
+ "required": false
568
+ },
569
+ "tooltipArrowPosition": {
570
+ "description": "",
571
+ "type": {
572
+ "name": "string"
573
+ },
574
+ "required": false
575
+ },
576
+ "tooltipContent": {
577
+ "description": "",
578
+ "type": {
579
+ "name": "any"
580
+ },
581
+ "required": false
582
+ },
583
+ "tooltipText": {
584
+ "description": "",
585
+ "type": {
586
+ "name": "string"
587
+ },
588
+ "required": false
589
+ },
590
+ "tooltipTextSize": {
591
+ "description": "",
592
+ "type": {
593
+ "name": "string"
594
+ },
595
+ "required": false
596
+ },
597
+ "tooltipTitle": {
598
+ "description": "",
599
+ "type": {
600
+ "name": "string"
601
+ },
602
+ "required": false
603
+ },
604
+ "tooltipTitleSize": {
605
+ "description": "",
606
+ "type": {
607
+ "name": "string"
608
+ },
609
+ "required": false
610
+ },
415
611
  "type": {
416
612
  "description": "",
417
613
  "type": {
418
614
  "name": "string"
419
615
  },
420
616
  "required": false
617
+ },
618
+ "onClick": {
619
+ "description": "",
620
+ "type": {
621
+ "name": "func"
622
+ },
623
+ "required": false
624
+ },
625
+ "onMouseEnter": {
626
+ "description": "",
627
+ "type": {
628
+ "name": "func"
629
+ },
630
+ "required": false
631
+ },
632
+ "onMouseLeave": {
633
+ "description": "",
634
+ "type": {
635
+ "name": "func"
636
+ },
637
+ "required": false
421
638
  }
422
639
  }
423
640
  };