@innovaccer/design-system 3.0.0-14 → 3.0.0-15

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 (23) hide show
  1. package/css/dist/index.css +246 -2
  2. package/css/dist/index.css.map +1 -1
  3. package/css/src/components/popover.css +4 -0
  4. package/css/src/components/tooltip.css +134 -2
  5. package/dist/index.esm.js +196 -49
  6. package/dist/index.js +192 -46
  7. package/dist/index.js.map +1 -1
  8. package/dist/index.umd.js +1 -1
  9. package/dist/index.umd.js.br +0 -0
  10. package/dist/index.umd.js.gz +0 -0
  11. package/dist/src/components/popover/Popover.d.ts +5 -0
  12. package/dist/src/components/tooltip/Tooltip.d.ts +12 -4
  13. package/dist/src/index.d.ts +2 -2
  14. package/package.json +1 -1
  15. package/src/components/button/Button.tsx +1 -1
  16. package/src/components/popover/Popover.tsx +76 -24
  17. package/src/components/tooltip/Tooltip.tsx +29 -29
  18. package/src/components/tooltip/__stories__/index.story.jsx +69 -0
  19. package/src/components/tooltip/__tests__/Tooltip.test.tsx +31 -0
  20. package/src/components/tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap +449 -0
  21. package/src/index.tsx +2 -2
  22. package/src/utils/__tests__/TS.test.tsx +1 -1
  23. package/src/utils/__tests__/__snapshots__/TS.test.tsx.snap +8 -0
package/css/dist/index.css CHANGED
@@ -4364,6 +4364,10 @@
4364
4364
  box-shadow: var(--shadow-l);
4365
4365
  }
4366
4366
 
4367
+ .Mds-Popover:focus {
4368
+ outline: none;
4369
+ }
4370
+
4367
4371
  .Mds-Popover--dark {
4368
4372
  background: var(--inverse);
4369
4373
  color: var(--white);
@@ -5453,7 +5457,7 @@
5453
5457
  box-shadow: var(--shadow-spread) var(--warning-shadow);
5454
5458
  }
5455
5459
 
5456
- .Tooltip {
5460
+ .Mds-Tooltip {
5457
5461
  max-width: var(--spacing-9);
5458
5462
  padding: var(--spacing) var(--spacing-2);
5459
5463
  border-radius: var(--spacing-m);
@@ -5466,13 +5470,253 @@
5466
5470
  transition-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
5467
5471
  }
5468
5472
 
5469
- .Tooltip-text {
5473
+ .Mds-Tooltip-text {
5470
5474
  word-break: break-word;
5471
5475
  -webkit-hyphens: auto;
5472
5476
  -ms-hyphens: auto;
5473
5477
  hyphens: auto;
5474
5478
  }
5475
5479
 
5480
+ @-webkit-keyframes Mds-tooltip-open-top {
5481
+ from {
5482
+ margin-top: var(--spacing-m);
5483
+ opacity: 0.5;
5484
+ }
5485
+
5486
+ to {
5487
+ margin-top: calc(-1 * var(--spacing-m));
5488
+ opacity: 1;
5489
+ }
5490
+ }
5491
+
5492
+ @keyframes Mds-tooltip-open-top {
5493
+ from {
5494
+ margin-top: var(--spacing-m);
5495
+ opacity: 0.5;
5496
+ }
5497
+
5498
+ to {
5499
+ margin-top: calc(-1 * var(--spacing-m));
5500
+ opacity: 1;
5501
+ }
5502
+ }
5503
+
5504
+ @-webkit-keyframes Mds-tooltip-close-top {
5505
+ from {
5506
+ margin-top: calc(-1 * var(--spacing-m));
5507
+ opacity: 0.5;
5508
+ }
5509
+
5510
+ to {
5511
+ margin-top: var(--spacing-m);
5512
+ opacity: 0;
5513
+ }
5514
+ }
5515
+
5516
+ @keyframes Mds-tooltip-close-top {
5517
+ from {
5518
+ margin-top: calc(-1 * var(--spacing-m));
5519
+ opacity: 0.5;
5520
+ }
5521
+
5522
+ to {
5523
+ margin-top: var(--spacing-m);
5524
+ opacity: 0;
5525
+ }
5526
+ }
5527
+
5528
+ .Mds-Tooltip-animation-open-top {
5529
+ -webkit-animation: Mds-tooltip-open-top 120ms cubic-bezier(0, 0, 0.3, 1);
5530
+ animation: Mds-tooltip-open-top 120ms cubic-bezier(0, 0, 0.3, 1);
5531
+ -webkit-animation-fill-mode: forwards;
5532
+ animation-fill-mode: forwards;
5533
+ }
5534
+
5535
+ .Mds-Tooltip-animation-close-top {
5536
+ -webkit-animation: Mds-tooltip-close-top 120ms cubic-bezier(0.4, 0.14, 1, 1);
5537
+ animation: Mds-tooltip-close-top 120ms cubic-bezier(0.4, 0.14, 1, 1);
5538
+ }
5539
+
5540
+ @-webkit-keyframes Mds-tooltip-open-bottom {
5541
+ from {
5542
+ margin-top: calc(-1 * var(--spacing-m));
5543
+ opacity: 0.5;
5544
+ }
5545
+
5546
+ to {
5547
+ margin-top: var(--spacing-m);
5548
+ opacity: 1;
5549
+ }
5550
+ }
5551
+
5552
+ @keyframes Mds-tooltip-open-bottom {
5553
+ from {
5554
+ margin-top: calc(-1 * var(--spacing-m));
5555
+ opacity: 0.5;
5556
+ }
5557
+
5558
+ to {
5559
+ margin-top: var(--spacing-m);
5560
+ opacity: 1;
5561
+ }
5562
+ }
5563
+
5564
+ @-webkit-keyframes Mds-tooltip-close-bottom {
5565
+ from {
5566
+ margin-top: var(--spacing-m);
5567
+ opacity: 0.5;
5568
+ }
5569
+
5570
+ to {
5571
+ margin-top: calc(-1 * var(--spacing-m));
5572
+ opacity: 0;
5573
+ }
5574
+ }
5575
+
5576
+ @keyframes Mds-tooltip-close-bottom {
5577
+ from {
5578
+ margin-top: var(--spacing-m);
5579
+ opacity: 0.5;
5580
+ }
5581
+
5582
+ to {
5583
+ margin-top: calc(-1 * var(--spacing-m));
5584
+ opacity: 0;
5585
+ }
5586
+ }
5587
+
5588
+ .Mds-Tooltip-animation-open-bottom {
5589
+ -webkit-animation: Mds-tooltip-open-bottom 120ms cubic-bezier(0, 0, 0.3, 1);
5590
+ animation: Mds-tooltip-open-bottom 120ms cubic-bezier(0, 0, 0.3, 1);
5591
+ -webkit-animation-fill-mode: forwards;
5592
+ animation-fill-mode: forwards;
5593
+ }
5594
+
5595
+ .Mds-Tooltip-animation-close-bottom {
5596
+ -webkit-animation: Mds-tooltip-close-bottom 120ms cubic-bezier(0.4, 0.14, 1, 1);
5597
+ animation: Mds-tooltip-close-bottom 120ms cubic-bezier(0.4, 0.14, 1, 1);
5598
+ }
5599
+
5600
+ @-webkit-keyframes Mds-tooltip-open-left {
5601
+ from {
5602
+ margin-left: var(--spacing-m);
5603
+ opacity: 0.5;
5604
+ }
5605
+
5606
+ to {
5607
+ margin-left: calc(-1 * var(--spacing-m));
5608
+ opacity: 1;
5609
+ }
5610
+ }
5611
+
5612
+ @keyframes Mds-tooltip-open-left {
5613
+ from {
5614
+ margin-left: var(--spacing-m);
5615
+ opacity: 0.5;
5616
+ }
5617
+
5618
+ to {
5619
+ margin-left: calc(-1 * var(--spacing-m));
5620
+ opacity: 1;
5621
+ }
5622
+ }
5623
+
5624
+ @-webkit-keyframes Mds-tooltip-close-left {
5625
+ from {
5626
+ margin-left: calc(-1 * var(--spacing-m));
5627
+ opacity: 0.5;
5628
+ }
5629
+
5630
+ to {
5631
+ margin-left: var(--spacing-m);
5632
+ opacity: 0;
5633
+ }
5634
+ }
5635
+
5636
+ @keyframes Mds-tooltip-close-left {
5637
+ from {
5638
+ margin-left: calc(-1 * var(--spacing-m));
5639
+ opacity: 0.5;
5640
+ }
5641
+
5642
+ to {
5643
+ margin-left: var(--spacing-m);
5644
+ opacity: 0;
5645
+ }
5646
+ }
5647
+
5648
+ .Mds-Tooltip-animation-open-left {
5649
+ -webkit-animation: Mds-tooltip-open-left 120ms cubic-bezier(0, 0, 0.3, 1);
5650
+ animation: Mds-tooltip-open-left 120ms cubic-bezier(0, 0, 0.3, 1);
5651
+ -webkit-animation-fill-mode: forwards;
5652
+ animation-fill-mode: forwards;
5653
+ }
5654
+
5655
+ .Mds-Tooltip-animation-close-left {
5656
+ -webkit-animation: Mds-tooltip-close-left 120ms cubic-bezier(0.4, 0.14, 1, 1);
5657
+ animation: Mds-tooltip-close-left 120ms cubic-bezier(0.4, 0.14, 1, 1);
5658
+ }
5659
+
5660
+ @-webkit-keyframes Mds-tooltip-open-right {
5661
+ from {
5662
+ margin-left: calc(-1 * var(--spacing-m));
5663
+ opacity: 0.5;
5664
+ }
5665
+
5666
+ to {
5667
+ margin-left: var(--spacing-m);
5668
+ opacity: 1;
5669
+ }
5670
+ }
5671
+
5672
+ @keyframes Mds-tooltip-open-right {
5673
+ from {
5674
+ margin-left: calc(-1 * var(--spacing-m));
5675
+ opacity: 0.5;
5676
+ }
5677
+
5678
+ to {
5679
+ margin-left: var(--spacing-m);
5680
+ opacity: 1;
5681
+ }
5682
+ }
5683
+
5684
+ @-webkit-keyframes Mds-tooltip-close-right {
5685
+ from {
5686
+ margin-left: var(--spacing-m);
5687
+ opacity: 0.5;
5688
+ }
5689
+
5690
+ to {
5691
+ margin-left: calc(-1 * var(--spacing-m));
5692
+ opacity: 0;
5693
+ }
5694
+ }
5695
+
5696
+ @keyframes Mds-tooltip-close-right {
5697
+ from {
5698
+ margin-left: var(--spacing-m);
5699
+ opacity: 0.5;
5700
+ }
5701
+
5702
+ to {
5703
+ margin-left: calc(-1 * var(--spacing-m));
5704
+ opacity: 0;
5705
+ }
5706
+ }
5707
+
5708
+ .Mds-Tooltip-animation-open-right {
5709
+ -webkit-animation: Mds-tooltip-open-right 120ms cubic-bezier(0, 0, 0.3, 1);
5710
+ animation: Mds-tooltip-open-right 120ms cubic-bezier(0, 0, 0.3, 1);
5711
+ -webkit-animation-fill-mode: forwards;
5712
+ animation-fill-mode: forwards;
5713
+ }
5714
+
5715
+ .Mds-Tooltip-animation-close-right {
5716
+ -webkit-animation: Mds-tooltip-close-right 120ms cubic-bezier(0.4, 0.14, 1, 1);
5717
+ animation: Mds-tooltip-close-right 120ms cubic-bezier(0.4, 0.14, 1, 1);
5718
+ }
5719
+
5476
5720
  body {
5477
5721
  font-family: var(--font-family);
5478
5722
  color: var(--text);