@transferwise/components 0.0.0-experimental-d1c5355 → 0.0.0-experimental-0f47dbf

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 (16) hide show
  1. package/build/main.css +51 -18
  2. package/build/styles/main.css +51 -18
  3. package/build/styles/uploadInput/UploadInput.css +2 -2
  4. package/build/styles/uploadInput/uploadItem/UploadItem.css +49 -16
  5. package/build/uploadInput/uploadItem/UploadItem.js +1 -1
  6. package/build/uploadInput/uploadItem/UploadItem.js.map +1 -1
  7. package/build/uploadInput/uploadItem/UploadItem.mjs +1 -1
  8. package/build/uploadInput/uploadItem/UploadItem.mjs.map +1 -1
  9. package/package.json +3 -3
  10. package/src/main.css +51 -18
  11. package/src/radioGroup/RadioGroup.story.tsx +70 -69
  12. package/src/uploadInput/UploadInput.css +2 -2
  13. package/src/uploadInput/UploadInput.less +5 -5
  14. package/src/uploadInput/uploadItem/UploadItem.css +49 -16
  15. package/src/uploadInput/uploadItem/UploadItem.less +47 -15
  16. package/src/uploadInput/uploadItem/UploadItem.tsx +1 -1
package/build/main.css CHANGED
@@ -5526,8 +5526,8 @@ html:not([dir="rtl"]) .np-navigation-option {
5526
5526
  position: relative;
5527
5527
  }
5528
5528
  .np-upload-input {
5529
- box-shadow: inset 0px 0px 1px 1px #c9cbce;
5530
- box-shadow: inset 0px 0px 1px 1px var(--color-interactive-secondary);
5529
+ border: 1px solid #c9cbce;
5530
+ border: 1px solid var(--color-interactive-secondary);
5531
5531
  border-radius: 10px;
5532
5532
  border-radius: var(--radius-small);
5533
5533
  }
@@ -5568,9 +5568,16 @@ html:not([dir="rtl"]) .np-navigation-option {
5568
5568
  align-items: flex-start;
5569
5569
  }
5570
5570
  .np-upload-input__item .np-upload-input__item-content {
5571
- padding-top: 2px;
5571
+ padding-right: 32px;
5572
+ padding-right: var(--size-32);
5572
5573
  flex: 1;
5573
5574
  }
5575
+ @media (max-width: 320px) {
5576
+ .np-upload-input__item .np-upload-input__item-content {
5577
+ padding-right: 64px;
5578
+ padding-right: var(--size-64);
5579
+ }
5580
+ }
5574
5581
  .np-upload-input__item .np-upload-input__title,
5575
5582
  .np-upload-input__item .np-upload-input__text {
5576
5583
  margin: 0;
@@ -5582,24 +5589,23 @@ html:not([dir="rtl"]) .np-navigation-option {
5582
5589
  .np-upload-input__item .np-upload-input__title + .np-upload-input__text {
5583
5590
  margin-top: 4px;
5584
5591
  margin-top: var(--size-4);
5585
- line-height: 22px;
5586
5592
  }
5587
5593
  .np-upload-input__item .np-upload-input__icon {
5588
5594
  padding-right: 16px;
5589
5595
  padding-right: var(--size-16);
5590
5596
  }
5591
5597
  .np-upload-input__item:not(:first-child)::before {
5598
+ content: " ";
5592
5599
  display: block;
5593
5600
  position: absolute;
5594
5601
  height: 1px;
5595
- background-color: rgba(0,0,0,0.10196);
5596
- background-color: var(--color-border-neutral);
5597
- content: " ";
5598
5602
  left: 16px;
5599
5603
  left: var(--size-16);
5600
5604
  width: calc(100% - 2 * 16px);
5601
5605
  width: calc(100% - 2 * var(--size-16));
5602
5606
  top: 0;
5607
+ background: linear-gradient(rgba(0,0,0,0.10196), rgba(0,0,0,0.10196)), var(--color-white);
5608
+ background: linear-gradient(var(--color-border-neutral), var(--color-border-neutral)), var(--color-white);
5603
5609
  }
5604
5610
  .np-upload-input__item .np-upload-input__item-link,
5605
5611
  .np-upload-input__item .np-upload-input__item-container {
@@ -5608,19 +5614,33 @@ html:not([dir="rtl"]) .np-navigation-option {
5608
5614
  width: 100%;
5609
5615
  }
5610
5616
  .np-upload-input__item .np-upload-input__item-action {
5617
+ --iconSize: var(--size-24);
5618
+ --clickArea: 44px;
5611
5619
  position: absolute;
5612
- top: 18px;
5613
5620
  right: 16px;
5614
5621
  right: var(--size-16);
5622
+ top: 16px;
5623
+ top: var(--size-16);
5624
+ }
5625
+ .np-upload-input__item .np-upload-input__item-action :before {
5626
+ --clickArea: 44px;
5627
+ content: '';
5628
+ display: block;
5629
+ width: 44px;
5630
+ width: var(--clickArea);
5631
+ height: 44px;
5632
+ height: var(--clickArea);
5633
+ border-radius: 50%;
5634
+ position: absolute;
5635
+ inset: calc((44px - var(--iconSize)) * -0.5);
5636
+ inset: calc((var(--clickArea) - var(--iconSize)) * -0.5);
5615
5637
  }
5616
5638
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button {
5617
5639
  -webkit-appearance: none;
5618
5640
  -moz-appearance: none;
5619
5641
  appearance: none;
5620
- height: 24px;
5621
- height: var(--size-24);
5622
- width: 24px;
5623
- width: var(--size-24);
5642
+ height: var(--iconSize);
5643
+ width: var(--iconSize);
5624
5644
  padding: 0 4px;
5625
5645
  padding: 0 var(--size-4);
5626
5646
  border-radius: 50%;
@@ -5629,6 +5649,10 @@ html:not([dir="rtl"]) .np-navigation-option {
5629
5649
  background-color: var(--color-background-neutral);
5630
5650
  color: var(--color-interactive-primary);
5631
5651
  transition: color, background-color 0.15s ease-in-out;
5652
+ outline-offset: 0;
5653
+ display: flex;
5654
+ align-items: center;
5655
+ justify-content: center;
5632
5656
  }
5633
5657
  @media (max-width: 320px) {
5634
5658
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button {
@@ -5639,7 +5663,8 @@ html:not([dir="rtl"]) .np-navigation-option {
5639
5663
  }
5640
5664
  }
5641
5665
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:hover {
5642
- background-color: var(--color-background-neutral-hover);
5666
+ background-color: var(--color-sentiment-negative);
5667
+ color: var(--color-contrast-overlay) !important;
5643
5668
  }
5644
5669
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:active {
5645
5670
  background-color: var(--color-background-neutral-active);
@@ -5647,14 +5672,11 @@ html:not([dir="rtl"]) .np-navigation-option {
5647
5672
  .np-upload-input__item.is-interactive {
5648
5673
  padding: 0;
5649
5674
  }
5650
- .np-upload-input__item.is-interactive:hover + .np-upload-input__item::before,
5651
- .np-upload-input__item.is-interactive:hover::before {
5675
+ .np-upload-input__item.is-interactive:hover::before,
5676
+ .np-upload-input__item.is-interactive:hover + .np-upload-input__item::before {
5652
5677
  width: 100%;
5653
5678
  left: 0;
5654
5679
  }
5655
- .np-upload-input__item.is-interactive:hover + .np-upload-input__item::before {
5656
- top: -1px;
5657
- }
5658
5680
  .np-upload-input__item.is-interactive .np-upload-input__item-link {
5659
5681
  padding: 16px;
5660
5682
  padding: var(--size-16);
@@ -5665,12 +5687,23 @@ html:not([dir="rtl"]) .np-navigation-option {
5665
5687
  .np-upload-input__item.is-interactive .np-upload-input__item-link:focus-visible {
5666
5688
  outline-offset: -3px;
5667
5689
  outline-width: 3px;
5690
+ z-index: 1;
5668
5691
  }
5669
5692
  .np-upload-input__item.is-interactive .np-upload-input__item-link:hover,
5670
5693
  .np-upload-input__item.is-interactive .np-upload-input__item-link:active {
5671
5694
  background: rgba(134,167,189,0.10196);
5672
5695
  background: var(--color-background-neutral);
5673
5696
  }
5697
+ .np-upload-input__item .np-upload-input-errors {
5698
+ padding-left: 16px;
5699
+ padding-left: var(--size-16);
5700
+ }
5701
+ @media (max-width: 320px) {
5702
+ .np-upload-input__item .np-upload-input-errors {
5703
+ padding-left: 32px;
5704
+ padding-left: var(--size-32);
5705
+ }
5706
+ }
5674
5707
  .np-progress {
5675
5708
  border-radius: 10px;
5676
5709
  border-radius: var(--radius-small);
package/build/styles/main.css CHANGED
@@ -5526,8 +5526,8 @@ html:not([dir="rtl"]) .np-navigation-option {
5526
5526
  position: relative;
5527
5527
  }
5528
5528
  .np-upload-input {
5529
- box-shadow: inset 0px 0px 1px 1px #c9cbce;
5530
- box-shadow: inset 0px 0px 1px 1px var(--color-interactive-secondary);
5529
+ border: 1px solid #c9cbce;
5530
+ border: 1px solid var(--color-interactive-secondary);
5531
5531
  border-radius: 10px;
5532
5532
  border-radius: var(--radius-small);
5533
5533
  }
@@ -5568,9 +5568,16 @@ html:not([dir="rtl"]) .np-navigation-option {
5568
5568
  align-items: flex-start;
5569
5569
  }
5570
5570
  .np-upload-input__item .np-upload-input__item-content {
5571
- padding-top: 2px;
5571
+ padding-right: 32px;
5572
+ padding-right: var(--size-32);
5572
5573
  flex: 1;
5573
5574
  }
5575
+ @media (max-width: 320px) {
5576
+ .np-upload-input__item .np-upload-input__item-content {
5577
+ padding-right: 64px;
5578
+ padding-right: var(--size-64);
5579
+ }
5580
+ }
5574
5581
  .np-upload-input__item .np-upload-input__title,
5575
5582
  .np-upload-input__item .np-upload-input__text {
5576
5583
  margin: 0;
@@ -5582,24 +5589,23 @@ html:not([dir="rtl"]) .np-navigation-option {
5582
5589
  .np-upload-input__item .np-upload-input__title + .np-upload-input__text {
5583
5590
  margin-top: 4px;
5584
5591
  margin-top: var(--size-4);
5585
- line-height: 22px;
5586
5592
  }
5587
5593
  .np-upload-input__item .np-upload-input__icon {
5588
5594
  padding-right: 16px;
5589
5595
  padding-right: var(--size-16);
5590
5596
  }
5591
5597
  .np-upload-input__item:not(:first-child)::before {
5598
+ content: " ";
5592
5599
  display: block;
5593
5600
  position: absolute;
5594
5601
  height: 1px;
5595
- background-color: rgba(0,0,0,0.10196);
5596
- background-color: var(--color-border-neutral);
5597
- content: " ";
5598
5602
  left: 16px;
5599
5603
  left: var(--size-16);
5600
5604
  width: calc(100% - 2 * 16px);
5601
5605
  width: calc(100% - 2 * var(--size-16));
5602
5606
  top: 0;
5607
+ background: linear-gradient(rgba(0,0,0,0.10196), rgba(0,0,0,0.10196)), var(--color-white);
5608
+ background: linear-gradient(var(--color-border-neutral), var(--color-border-neutral)), var(--color-white);
5603
5609
  }
5604
5610
  .np-upload-input__item .np-upload-input__item-link,
5605
5611
  .np-upload-input__item .np-upload-input__item-container {
@@ -5608,19 +5614,33 @@ html:not([dir="rtl"]) .np-navigation-option {
5608
5614
  width: 100%;
5609
5615
  }
5610
5616
  .np-upload-input__item .np-upload-input__item-action {
5617
+ --iconSize: var(--size-24);
5618
+ --clickArea: 44px;
5611
5619
  position: absolute;
5612
- top: 18px;
5613
5620
  right: 16px;
5614
5621
  right: var(--size-16);
5622
+ top: 16px;
5623
+ top: var(--size-16);
5624
+ }
5625
+ .np-upload-input__item .np-upload-input__item-action :before {
5626
+ --clickArea: 44px;
5627
+ content: '';
5628
+ display: block;
5629
+ width: 44px;
5630
+ width: var(--clickArea);
5631
+ height: 44px;
5632
+ height: var(--clickArea);
5633
+ border-radius: 50%;
5634
+ position: absolute;
5635
+ inset: calc((44px - var(--iconSize)) * -0.5);
5636
+ inset: calc((var(--clickArea) - var(--iconSize)) * -0.5);
5615
5637
  }
5616
5638
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button {
5617
5639
  -webkit-appearance: none;
5618
5640
  -moz-appearance: none;
5619
5641
  appearance: none;
5620
- height: 24px;
5621
- height: var(--size-24);
5622
- width: 24px;
5623
- width: var(--size-24);
5642
+ height: var(--iconSize);
5643
+ width: var(--iconSize);
5624
5644
  padding: 0 4px;
5625
5645
  padding: 0 var(--size-4);
5626
5646
  border-radius: 50%;
@@ -5629,6 +5649,10 @@ html:not([dir="rtl"]) .np-navigation-option {
5629
5649
  background-color: var(--color-background-neutral);
5630
5650
  color: var(--color-interactive-primary);
5631
5651
  transition: color, background-color 0.15s ease-in-out;
5652
+ outline-offset: 0;
5653
+ display: flex;
5654
+ align-items: center;
5655
+ justify-content: center;
5632
5656
  }
5633
5657
  @media (max-width: 320px) {
5634
5658
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button {
@@ -5639,7 +5663,8 @@ html:not([dir="rtl"]) .np-navigation-option {
5639
5663
  }
5640
5664
  }
5641
5665
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:hover {
5642
- background-color: var(--color-background-neutral-hover);
5666
+ background-color: var(--color-sentiment-negative);
5667
+ color: var(--color-contrast-overlay) !important;
5643
5668
  }
5644
5669
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:active {
5645
5670
  background-color: var(--color-background-neutral-active);
@@ -5647,14 +5672,11 @@ html:not([dir="rtl"]) .np-navigation-option {
5647
5672
  .np-upload-input__item.is-interactive {
5648
5673
  padding: 0;
5649
5674
  }
5650
- .np-upload-input__item.is-interactive:hover + .np-upload-input__item::before,
5651
- .np-upload-input__item.is-interactive:hover::before {
5675
+ .np-upload-input__item.is-interactive:hover::before,
5676
+ .np-upload-input__item.is-interactive:hover + .np-upload-input__item::before {
5652
5677
  width: 100%;
5653
5678
  left: 0;
5654
5679
  }
5655
- .np-upload-input__item.is-interactive:hover + .np-upload-input__item::before {
5656
- top: -1px;
5657
- }
5658
5680
  .np-upload-input__item.is-interactive .np-upload-input__item-link {
5659
5681
  padding: 16px;
5660
5682
  padding: var(--size-16);
@@ -5665,12 +5687,23 @@ html:not([dir="rtl"]) .np-navigation-option {
5665
5687
  .np-upload-input__item.is-interactive .np-upload-input__item-link:focus-visible {
5666
5688
  outline-offset: -3px;
5667
5689
  outline-width: 3px;
5690
+ z-index: 1;
5668
5691
  }
5669
5692
  .np-upload-input__item.is-interactive .np-upload-input__item-link:hover,
5670
5693
  .np-upload-input__item.is-interactive .np-upload-input__item-link:active {
5671
5694
  background: rgba(134,167,189,0.10196);
5672
5695
  background: var(--color-background-neutral);
5673
5696
  }
5697
+ .np-upload-input__item .np-upload-input-errors {
5698
+ padding-left: 16px;
5699
+ padding-left: var(--size-16);
5700
+ }
5701
+ @media (max-width: 320px) {
5702
+ .np-upload-input__item .np-upload-input-errors {
5703
+ padding-left: 32px;
5704
+ padding-left: var(--size-32);
5705
+ }
5706
+ }
5674
5707
  .np-progress {
5675
5708
  border-radius: 10px;
5676
5709
  border-radius: var(--radius-small);
package/build/styles/uploadInput/UploadInput.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .np-upload-input {
2
- box-shadow: inset 0px 0px 1px 1px #c9cbce;
3
- box-shadow: inset 0px 0px 1px 1px var(--color-interactive-secondary);
2
+ border: 1px solid #c9cbce;
3
+ border: 1px solid var(--color-interactive-secondary);
4
4
  border-radius: 10px;
5
5
  border-radius: var(--radius-small);
6
6
  }
package/build/styles/uploadInput/uploadItem/UploadItem.css CHANGED
@@ -6,9 +6,16 @@
6
6
  align-items: flex-start;
7
7
  }
8
8
  .np-upload-input__item .np-upload-input__item-content {
9
- padding-top: 2px;
9
+ padding-right: 32px;
10
+ padding-right: var(--size-32);
10
11
  flex: 1;
11
12
  }
13
+ @media (max-width: 320px) {
14
+ .np-upload-input__item .np-upload-input__item-content {
15
+ padding-right: 64px;
16
+ padding-right: var(--size-64);
17
+ }
18
+ }
12
19
  .np-upload-input__item .np-upload-input__title,
13
20
  .np-upload-input__item .np-upload-input__text {
14
21
  margin: 0;
@@ -20,24 +27,23 @@
20
27
  .np-upload-input__item .np-upload-input__title + .np-upload-input__text {
21
28
  margin-top: 4px;
22
29
  margin-top: var(--size-4);
23
- line-height: 22px;
24
30
  }
25
31
  .np-upload-input__item .np-upload-input__icon {
26
32
  padding-right: 16px;
27
33
  padding-right: var(--size-16);
28
34
  }
29
35
  .np-upload-input__item:not(:first-child)::before {
36
+ content: " ";
30
37
  display: block;
31
38
  position: absolute;
32
39
  height: 1px;
33
- background-color: rgba(0,0,0,0.10196);
34
- background-color: var(--color-border-neutral);
35
- content: " ";
36
40
  left: 16px;
37
41
  left: var(--size-16);
38
42
  width: calc(100% - 2 * 16px);
39
43
  width: calc(100% - 2 * var(--size-16));
40
44
  top: 0;
45
+ background: linear-gradient(rgba(0,0,0,0.10196), rgba(0,0,0,0.10196)), var(--color-white);
46
+ background: linear-gradient(var(--color-border-neutral), var(--color-border-neutral)), var(--color-white);
41
47
  }
42
48
  .np-upload-input__item .np-upload-input__item-link,
43
49
  .np-upload-input__item .np-upload-input__item-container {
@@ -46,19 +52,33 @@
46
52
  width: 100%;
47
53
  }
48
54
  .np-upload-input__item .np-upload-input__item-action {
55
+ --iconSize: var(--size-24);
56
+ --clickArea: 44px;
49
57
  position: absolute;
50
- top: 18px;
51
58
  right: 16px;
52
59
  right: var(--size-16);
60
+ top: 16px;
61
+ top: var(--size-16);
62
+ }
63
+ .np-upload-input__item .np-upload-input__item-action :before {
64
+ --clickArea: 44px;
65
+ content: '';
66
+ display: block;
67
+ width: 44px;
68
+ width: var(--clickArea);
69
+ height: 44px;
70
+ height: var(--clickArea);
71
+ border-radius: 50%;
72
+ position: absolute;
73
+ inset: calc((44px - var(--iconSize)) * -0.5);
74
+ inset: calc((var(--clickArea) - var(--iconSize)) * -0.5);
53
75
  }
54
76
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button {
55
77
  -webkit-appearance: none;
56
78
  -moz-appearance: none;
57
79
  appearance: none;
58
- height: 24px;
59
- height: var(--size-24);
60
- width: 24px;
61
- width: var(--size-24);
80
+ height: var(--iconSize);
81
+ width: var(--iconSize);
62
82
  padding: 0 4px;
63
83
  padding: 0 var(--size-4);
64
84
  border-radius: 50%;
@@ -67,6 +87,10 @@
67
87
  background-color: var(--color-background-neutral);
68
88
  color: var(--color-interactive-primary);
69
89
  transition: color, background-color 0.15s ease-in-out;
90
+ outline-offset: 0;
91
+ display: flex;
92
+ align-items: center;
93
+ justify-content: center;
70
94
  }
71
95
  @media (max-width: 320px) {
72
96
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button {
@@ -77,7 +101,8 @@
77
101
  }
78
102
  }
79
103
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:hover {
80
- background-color: var(--color-background-neutral-hover);
104
+ background-color: var(--color-sentiment-negative);
105
+ color: var(--color-contrast-overlay) !important;
81
106
  }
82
107
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:active {
83
108
  background-color: var(--color-background-neutral-active);
@@ -85,14 +110,11 @@
85
110
  .np-upload-input__item.is-interactive {
86
111
  padding: 0;
87
112
  }
88
- .np-upload-input__item.is-interactive:hover + .np-upload-input__item::before,
89
- .np-upload-input__item.is-interactive:hover::before {
113
+ .np-upload-input__item.is-interactive:hover::before,
114
+ .np-upload-input__item.is-interactive:hover + .np-upload-input__item::before {
90
115
  width: 100%;
91
116
  left: 0;
92
117
  }
93
- .np-upload-input__item.is-interactive:hover + .np-upload-input__item::before {
94
- top: -1px;
95
- }
96
118
  .np-upload-input__item.is-interactive .np-upload-input__item-link {
97
119
  padding: 16px;
98
120
  padding: var(--size-16);
@@ -103,9 +125,20 @@
103
125
  .np-upload-input__item.is-interactive .np-upload-input__item-link:focus-visible {
104
126
  outline-offset: -3px;
105
127
  outline-width: 3px;
128
+ z-index: 1;
106
129
  }
107
130
  .np-upload-input__item.is-interactive .np-upload-input__item-link:hover,
108
131
  .np-upload-input__item.is-interactive .np-upload-input__item-link:active {
109
132
  background: rgba(134,167,189,0.10196);
110
133
  background: var(--color-background-neutral);
111
134
  }
135
+ .np-upload-input__item .np-upload-input-errors {
136
+ padding-left: 16px;
137
+ padding-left: var(--size-16);
138
+ }
139
+ @media (max-width: 320px) {
140
+ .np-upload-input__item .np-upload-input-errors {
141
+ padding-left: 32px;
142
+ padding-left: var(--size-32);
143
+ }
144
+ }
package/build/uploadInput/uploadItem/UploadItem.js CHANGED
@@ -77,7 +77,7 @@ const UploadItem = ({
77
77
  return getErrorMessage(errors[0]);
78
78
  }
79
79
  return /*#__PURE__*/jsxRuntime.jsx("ul", {
80
- className: "np-upload-input-errors m-b-0 p-l-2",
80
+ className: "np-upload-input-errors m-b-0",
81
81
  children: errors.map((error, index) => {
82
82
  // eslint-disable-next-line react/no-array-index-key
83
83
  return /*#__PURE__*/jsxRuntime.jsx("li", {
package/build/uploadInput/uploadItem/UploadItem.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"UploadItem.js","sources":["../../../src/uploadInput/uploadItem/UploadItem.tsx"],"sourcesContent":["import { Bin, CheckCircleFill, CrossCircleFill } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../../body';\nimport { Size, Status, Typography, Sentiment } from '../../common';\nimport ProcessIndicator from '../../processIndicator/ProcessIndicator';\nimport StatusIcon from '../../statusIcon/StatusIcon';\nimport { UploadedFile, UploadError } from '../types';\n\nimport MESSAGES from './UploadItem.messages';\nimport { UploadItemLink } from './UploadItemLink';\n\nexport type UploadItemProps = React.JSX.IntrinsicAttributes & {\n file: UploadedFile;\n /**\n * Is this Item part of a multiple- or single-file UploadInput\n */\n singleFileUpload: boolean;\n canDelete: boolean;\n onDelete: () => void;\n\n /**\n * Callback to be called when the file link is clicked.\n * When provided, you need to manually trigger actions to load/download the file.\n *\n * @param file\n */\n onDownload?: (file: UploadedFile) => void;\n};\n\nexport enum TEST_IDS {\n uploadItem = 'uploadItem',\n mediaBody = 'mediaBody',\n}\n\nconst UploadItem = ({\n file,\n canDelete,\n onDelete,\n onDownload,\n singleFileUpload,\n}: UploadItemProps) => {\n const { formatMessage } = useIntl();\n const { status, filename, error, errors, url } = file;\n\n const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;\n\n /**\n * We're temporarily reverting to the regular icon components,\n * until the StatusIcon receives 24px sizing. Some misalignment\n * to be expected.\n */\n const getIcon = () => {\n if (error || errors?.length || status === Status.FAILED) {\n return <CrossCircleFill size={24} className=\"emphasis--negative\" />;\n }\n\n let processIndicator: React.ReactNode;\n\n switch (status) {\n case Status.PROCESSING:\n case Status.PENDING:\n processIndicator = <ProcessIndicator size={Size.EXTRA_SMALL} status={Status.PROCESSING} />;\n break;\n case Status.SUCCEEDED:\n case Status.DONE:\n default:\n processIndicator = <CheckCircleFill size={24} className=\"emphasis--positive\" />;\n }\n\n return processIndicator;\n };\n\n const getErrorMessage = (error?: UploadError) =>\n typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);\n\n const getMultipleErrors = (errors?: UploadError[]) => {\n if (!errors?.length) {\n return null;\n }\n\n if (errors?.length === 1) {\n return getErrorMessage(errors[0]);\n }\n\n return (\n <ul className=\"np-upload-input-errors m-b-0 p-l-2\">\n {errors.map((error, index) => {\n // eslint-disable-next-line react/no-array-index-key\n return <li key={index}>{getErrorMessage(error)}</li>;\n })}\n </ul>\n );\n };\n\n const getDescription = () => {\n if (error || errors?.length || status === Status.FAILED) {\n return (\n <Body type={Typography.BODY_DEFAULT_BOLD} className=\"np-upload-input__text text-negative\">\n {errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)}\n </Body>\n );\n }\n\n switch (status) {\n case Status.PENDING:\n return (\n <Body type={Typography.BODY_DEFAULT} className=\"np-upload-input__text\">\n {formatMessage(MESSAGES.uploading)}\n </Body>\n );\n case Status.PROCESSING:\n return <Body className=\"np-upload-input__text\">{formatMessage(MESSAGES.deleting)}</Body>;\n case Status.SUCCEEDED:\n case Status.DONE:\n default:\n return (\n <Body type={Typography.BODY_DEFAULT_BOLD} className=\"np-upload-input__text\">\n {formatMessage(MESSAGES.uploaded)}\n </Body>\n );\n }\n };\n\n const getTitle = () => {\n return filename || formatMessage(MESSAGES.uploadedFile);\n };\n\n const onDownloadFile = (event: React.MouseEvent): void => {\n if (onDownload) {\n event.preventDefault();\n onDownload(file);\n }\n };\n\n return (\n <div\n className={clsx('np-upload-input__item', { 'is-interactive': isSucceeded && url })}\n data-testid={TEST_IDS.uploadItem}\n >\n <UploadItemLink\n url={isSucceeded ? url : undefined}\n singleFileUpload={singleFileUpload}\n onDownload={onDownloadFile}\n >\n <span className=\"np-upload-input__icon\">{getIcon()}</span>\n <div className=\"np-upload-input__item-content\">\n <Body type={Typography.BODY_LARGE} className=\"np-upload-input__title text-word-break\">\n {getTitle()}\n </Body>\n {getDescription()}\n </div>\n </UploadItemLink>\n {canDelete && (\n <div className=\"np-upload-input__item-action\">\n <button\n aria-label={formatMessage(MESSAGES.removeFile, { filename })}\n className=\"np-upload-input__item-button\"\n type=\"button\"\n onClick={() => onDelete()}\n >\n <Bin size={16} />\n </button>\n </div>\n )}\n </div>\n );\n};\n\nexport default UploadItem;\n"],"names":["TEST_IDS","UploadItem","file","canDelete","onDelete","onDownload","singleFileUpload","formatMessage","useIntl","status","filename","error","errors","url","isSucceeded","Status","SUCCEEDED","undefined","includes","getIcon","length","FAILED","_jsx","CrossCircleFill","size","className","processIndicator","PROCESSING","PENDING","ProcessIndicator","Size","EXTRA_SMALL","DONE","CheckCircleFill","getErrorMessage","message","MESSAGES","uploadingFailed","getMultipleErrors","children","map","index","getDescription","Body","type","Typography","BODY_DEFAULT_BOLD","BODY_DEFAULT","uploading","deleting","uploaded","getTitle","uploadedFile","onDownloadFile","event","preventDefault","_jsxs","clsx","uploadItem","UploadItemLink","BODY_LARGE","removeFile","onClick","Bin"],"mappings":"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"}
1
+ {"version":3,"file":"UploadItem.js","sources":["../../../src/uploadInput/uploadItem/UploadItem.tsx"],"sourcesContent":["import { Bin, CheckCircleFill, CrossCircleFill } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../../body';\nimport { Size, Status, Typography, Sentiment } from '../../common';\nimport ProcessIndicator from '../../processIndicator/ProcessIndicator';\nimport StatusIcon from '../../statusIcon/StatusIcon';\nimport { UploadedFile, UploadError } from '../types';\n\nimport MESSAGES from './UploadItem.messages';\nimport { UploadItemLink } from './UploadItemLink';\n\nexport type UploadItemProps = React.JSX.IntrinsicAttributes & {\n file: UploadedFile;\n /**\n * Is this Item part of a multiple- or single-file UploadInput\n */\n singleFileUpload: boolean;\n canDelete: boolean;\n onDelete: () => void;\n\n /**\n * Callback to be called when the file link is clicked.\n * When provided, you need to manually trigger actions to load/download the file.\n *\n * @param file\n */\n onDownload?: (file: UploadedFile) => void;\n};\n\nexport enum TEST_IDS {\n uploadItem = 'uploadItem',\n mediaBody = 'mediaBody',\n}\n\nconst UploadItem = ({\n file,\n canDelete,\n onDelete,\n onDownload,\n singleFileUpload,\n}: UploadItemProps) => {\n const { formatMessage } = useIntl();\n const { status, filename, error, errors, url } = file;\n\n const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;\n\n /**\n * We're temporarily reverting to the regular icon components,\n * until the StatusIcon receives 24px sizing. Some misalignment\n * to be expected.\n */\n const getIcon = () => {\n if (error || errors?.length || status === Status.FAILED) {\n return <CrossCircleFill size={24} className=\"emphasis--negative\" />;\n }\n\n let processIndicator: React.ReactNode;\n\n switch (status) {\n case Status.PROCESSING:\n case Status.PENDING:\n processIndicator = <ProcessIndicator size={Size.EXTRA_SMALL} status={Status.PROCESSING} />;\n break;\n case Status.SUCCEEDED:\n case Status.DONE:\n default:\n processIndicator = <CheckCircleFill size={24} className=\"emphasis--positive\" />;\n }\n\n return processIndicator;\n };\n\n const getErrorMessage = (error?: UploadError) =>\n typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);\n\n const getMultipleErrors = (errors?: UploadError[]) => {\n if (!errors?.length) {\n return null;\n }\n\n if (errors?.length === 1) {\n return getErrorMessage(errors[0]);\n }\n\n return (\n <ul className=\"np-upload-input-errors m-b-0\">\n {errors.map((error, index) => {\n // eslint-disable-next-line react/no-array-index-key\n return <li key={index}>{getErrorMessage(error)}</li>;\n })}\n </ul>\n );\n };\n\n const getDescription = () => {\n if (error || errors?.length || status === Status.FAILED) {\n return (\n <Body type={Typography.BODY_DEFAULT_BOLD} className=\"np-upload-input__text text-negative\">\n {errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)}\n </Body>\n );\n }\n\n switch (status) {\n case Status.PENDING:\n return (\n <Body type={Typography.BODY_DEFAULT} className=\"np-upload-input__text\">\n {formatMessage(MESSAGES.uploading)}\n </Body>\n );\n case Status.PROCESSING:\n return <Body className=\"np-upload-input__text\">{formatMessage(MESSAGES.deleting)}</Body>;\n case Status.SUCCEEDED:\n case Status.DONE:\n default:\n return (\n <Body type={Typography.BODY_DEFAULT_BOLD} className=\"np-upload-input__text\">\n {formatMessage(MESSAGES.uploaded)}\n </Body>\n );\n }\n };\n\n const getTitle = () => {\n return filename || formatMessage(MESSAGES.uploadedFile);\n };\n\n const onDownloadFile = (event: React.MouseEvent): void => {\n if (onDownload) {\n event.preventDefault();\n onDownload(file);\n }\n };\n\n return (\n <div\n className={clsx('np-upload-input__item', { 'is-interactive': isSucceeded && url })}\n data-testid={TEST_IDS.uploadItem}\n >\n <UploadItemLink\n url={isSucceeded ? url : undefined}\n singleFileUpload={singleFileUpload}\n onDownload={onDownloadFile}\n >\n <span className=\"np-upload-input__icon\">{getIcon()}</span>\n <div className=\"np-upload-input__item-content\">\n <Body type={Typography.BODY_LARGE} className=\"np-upload-input__title text-word-break\">\n {getTitle()}\n </Body>\n {getDescription()}\n </div>\n </UploadItemLink>\n {canDelete && (\n <div className=\"np-upload-input__item-action\">\n <button\n aria-label={formatMessage(MESSAGES.removeFile, { filename })}\n className=\"np-upload-input__item-button\"\n type=\"button\"\n onClick={() => onDelete()}\n >\n <Bin size={16} />\n </button>\n </div>\n )}\n </div>\n );\n};\n\nexport default UploadItem;\n"],"names":["TEST_IDS","UploadItem","file","canDelete","onDelete","onDownload","singleFileUpload","formatMessage","useIntl","status","filename","error","errors","url","isSucceeded","Status","SUCCEEDED","undefined","includes","getIcon","length","FAILED","_jsx","CrossCircleFill","size","className","processIndicator","PROCESSING","PENDING","ProcessIndicator","Size","EXTRA_SMALL","DONE","CheckCircleFill","getErrorMessage","message","MESSAGES","uploadingFailed","getMultipleErrors","children","map","index","getDescription","Body","type","Typography","BODY_DEFAULT_BOLD","BODY_DEFAULT","uploading","deleting","uploaded","getTitle","uploadedFile","onDownloadFile","event","preventDefault","_jsxs","clsx","uploadItem","UploadItemLink","BODY_LARGE","removeFile","onClick","Bin"],"mappings":";;;;;;;;;;;;;;;;AA+BYA,0BAGX;AAHD,CAAA,UAAYA,QAAQ,EAAA;AAClBA,EAAAA,QAAA,CAAA,YAAA,CAAA,GAAA,YAAyB,CAAA;AACzBA,EAAAA,QAAA,CAAA,WAAA,CAAA,GAAA,WAAuB,CAAA;AACzB,CAAC,EAHWA,gBAAQ,KAARA,gBAAQ,GAGnB,EAAA,CAAA,CAAA,CAAA;AAEKC,MAAAA,UAAU,GAAGA,CAAC;EAClBC,IAAI;EACJC,SAAS;EACTC,QAAQ;EACRC,UAAU;AACVC,EAAAA,gBAAAA;AAAgB,CACA,KAAI;EACpB,MAAM;AAAEC,IAAAA,aAAAA;GAAe,GAAGC,iBAAO,EAAE,CAAA;EACnC,MAAM;YAAEC,QAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,MAAM;AAAEC,IAAAA,GAAAA;AAAK,GAAA,GAAGX,IAAI,CAAA;AAErD,EAAA,MAAMY,WAAW,GAAG,CAACC,aAAM,CAACC,SAAS,EAAEC,SAAS,CAAC,CAACC,QAAQ,CAACT,QAAM,CAAC,IAAI,CAAC,CAACI,GAAG,CAAA;AAE3E;;;;AAIG;EACH,MAAMM,OAAO,GAAGA,MAAK;IACnB,IAAIR,KAAK,IAAIC,MAAM,EAAEQ,MAAM,IAAIX,QAAM,KAAKM,aAAM,CAACM,MAAM,EAAE;MACvD,oBAAOC,cAAA,CAACC,qBAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;AAACC,QAAAA,SAAS,EAAC,oBAAA;AAAoB,QAAG,CAAA;AACrE,KAAA;AAEA,IAAA,IAAIC,gBAAiC,CAAA;AAErC,IAAA,QAAQjB,QAAM;MACZ,KAAKM,aAAM,CAACY,UAAU,CAAA;MACtB,KAAKZ,aAAM,CAACa,OAAO;QACjBF,gBAAgB,gBAAGJ,cAAA,CAACO,gBAAgB,EAAA;UAACL,IAAI,EAAEM,SAAI,CAACC,WAAY;UAACtB,MAAM,EAAEM,aAAM,CAACY,UAAAA;AAAW,UAAG,CAAA;AAC1F,QAAA,MAAA;MACF,KAAKZ,aAAM,CAACC,SAAS,CAAA;MACrB,KAAKD,aAAM,CAACiB,IAAI,CAAA;AAChB,MAAA;QACEN,gBAAgB,gBAAGJ,cAAA,CAACW,qBAAe,EAAA;AAACT,UAAAA,IAAI,EAAE,EAAG;AAACC,UAAAA,SAAS,EAAC,oBAAA;AAAoB,UAAG,CAAA;AACnF,KAAA;AAEA,IAAA,OAAOC,gBAAgB,CAAA;GACxB,CAAA;EAED,MAAMQ,eAAe,GAAIvB,KAAmB,IAC1C,OAAOA,KAAK,KAAK,QAAQ,GAAGA,KAAK,CAACwB,OAAO,GAAGxB,KAAK,IAAIJ,aAAa,CAAC6B,mBAAQ,CAACC,eAAe,CAAC,CAAA;EAE9F,MAAMC,iBAAiB,GAAI1B,MAAsB,IAAI;AACnD,IAAA,IAAI,CAACA,MAAM,EAAEQ,MAAM,EAAE;AACnB,MAAA,OAAO,IAAI,CAAA;AACb,KAAA;AAEA,IAAA,IAAIR,MAAM,EAAEQ,MAAM,KAAK,CAAC,EAAE;AACxB,MAAA,OAAOc,eAAe,CAACtB,MAAM,CAAC,CAAC,CAAC,CAAC,CAAA;AACnC,KAAA;AAEA,IAAA,oBACEU,cAAA,CAAA,IAAA,EAAA;AAAIG,MAAAA,SAAS,EAAC,8BAA8B;MAAAc,QAAA,EACzC3B,MAAM,CAAC4B,GAAG,CAAC,CAAC7B,KAAK,EAAE8B,KAAK,KAAI;AAC3B;AACA,QAAA,oBAAOnB,cAAA,CAAA,IAAA,EAAA;UAAAiB,QAAA,EAAiBL,eAAe,CAACvB,KAAK,CAAA;AAAC,SAAA,EAA9B8B,KAAmC,CAAC,CAAA;OACrD,CAAA;AAAC,KACA,CAAC,CAAA;GAER,CAAA;EAED,MAAMC,cAAc,GAAGA,MAAK;IAC1B,IAAI/B,KAAK,IAAIC,MAAM,EAAEQ,MAAM,IAAIX,QAAM,KAAKM,aAAM,CAACM,MAAM,EAAE;MACvD,oBACEC,cAAA,CAACqB,IAAI,EAAA;QAACC,IAAI,EAAEC,qBAAU,CAACC,iBAAkB;AAACrB,QAAAA,SAAS,EAAC,qCAAqC;AAAAc,QAAAA,QAAA,EACtF3B,MAAM,EAAEQ,MAAM,GAAGkB,iBAAiB,CAAC1B,MAAM,CAAC,GAAGsB,eAAe,CAACvB,KAAK,CAAA;AAAC,OAChE,CAAC,CAAA;AAEX,KAAA;AAEA,IAAA,QAAQF,QAAM;MACZ,KAAKM,aAAM,CAACa,OAAO;QACjB,oBACEN,cAAA,CAACqB,IAAI,EAAA;UAACC,IAAI,EAAEC,qBAAU,CAACE,YAAa;AAACtB,UAAAA,SAAS,EAAC,uBAAuB;AAAAc,UAAAA,QAAA,EACnEhC,aAAa,CAAC6B,mBAAQ,CAACY,SAAS,CAAA;AAAC,SAC9B,CAAC,CAAA;MAEX,KAAKjC,aAAM,CAACY,UAAU;QACpB,oBAAOL,cAAA,CAACqB,IAAI,EAAA;AAAClB,UAAAA,SAAS,EAAC,uBAAuB;AAAAc,UAAAA,QAAA,EAAEhC,aAAa,CAAC6B,mBAAQ,CAACa,QAAQ,CAAA;AAAC,SAAO,CAAC,CAAA;MAC1F,KAAKlC,aAAM,CAACC,SAAS,CAAA;MACrB,KAAKD,aAAM,CAACiB,IAAI,CAAA;AAChB,MAAA;QACE,oBACEV,cAAA,CAACqB,IAAI,EAAA;UAACC,IAAI,EAAEC,qBAAU,CAACC,iBAAkB;AAACrB,UAAAA,SAAS,EAAC,uBAAuB;AAAAc,UAAAA,QAAA,EACxEhC,aAAa,CAAC6B,mBAAQ,CAACc,QAAQ,CAAA;AAAC,SAC7B,CAAC,CAAA;AAEb,KAAA;GACD,CAAA;EAED,MAAMC,QAAQ,GAAGA,MAAK;AACpB,IAAA,OAAOzC,QAAQ,IAAIH,aAAa,CAAC6B,mBAAQ,CAACgB,YAAY,CAAC,CAAA;GACxD,CAAA;EAED,MAAMC,cAAc,GAAIC,KAAuB,IAAU;AACvD,IAAA,IAAIjD,UAAU,EAAE;MACdiD,KAAK,CAACC,cAAc,EAAE,CAAA;MACtBlD,UAAU,CAACH,IAAI,CAAC,CAAA;AAClB,KAAA;GACD,CAAA;AAED,EAAA,oBACEsD,eAAA,CAAA,KAAA,EAAA;AACE/B,IAAAA,SAAS,EAAEgC,SAAI,CAAC,uBAAuB,EAAE;MAAE,gBAAgB,EAAE3C,WAAW,IAAID,GAAAA;AAAG,KAAE,CAAE;IACnF,aAAab,EAAAA,gBAAQ,CAAC0D,UAAW;IAAAnB,QAAA,EAAA,cAEjCiB,eAAA,CAACG,6BAAc,EAAA;AACb9C,MAAAA,GAAG,EAAEC,WAAW,GAAGD,GAAG,GAAGI,SAAU;AACnCX,MAAAA,gBAAgB,EAAEA,gBAAiB;AACnCD,MAAAA,UAAU,EAAEgD,cAAe;AAAAd,MAAAA,QAAA,gBAE3BjB,cAAA,CAAA,MAAA,EAAA;AAAMG,QAAAA,SAAS,EAAC,uBAAuB;QAAAc,QAAA,EAAEpB,OAAO,EAAE;OAAO,CACzD,eAAAqC,eAAA,CAAA,KAAA,EAAA;AAAK/B,QAAAA,SAAS,EAAC,+BAA+B;QAAAc,QAAA,EAAA,cAC5CjB,cAAA,CAACqB,IAAI,EAAA;UAACC,IAAI,EAAEC,qBAAU,CAACe,UAAW;AAACnC,UAAAA,SAAS,EAAC,wCAAwC;UAAAc,QAAA,EAClFY,QAAQ;AAAE,SACP,CACN,EAACT,cAAc,EAAE,CAAA;AAAA,OACd,CACP,CAAA;AAAA,KAAgB,CAChB,EAACvC,SAAS,iBACRmB,cAAA,CAAA,KAAA,EAAA;AAAKG,MAAAA,SAAS,EAAC,8BAA8B;AAAAc,MAAAA,QAAA,eAC3CjB,cAAA,CAAA,QAAA,EAAA;AACE,QAAA,YAAA,EAAYf,aAAa,CAAC6B,mBAAQ,CAACyB,UAAU,EAAE;AAAEnD,UAAAA,QAAAA;AAAQ,SAAE,CAAE;AAC7De,QAAAA,SAAS,EAAC,8BAA8B;AACxCmB,QAAAA,IAAI,EAAC,QAAQ;AACbkB,QAAAA,OAAO,EAAEA,MAAM1D,QAAQ,EAAG;QAAAmC,QAAA,eAE1BjB,cAAA,CAACyC,SAAG,EAAA;AAACvC,UAAAA,IAAI,EAAE,EAAA;SACb,CAAA;OAAQ,CAAA;AACV,KAAK,CACN,CAAA;AAAA,GACE,CAAC,CAAA;AAEV;;;;"}
package/build/uploadInput/uploadItem/UploadItem.mjs CHANGED
@@ -73,7 +73,7 @@ const UploadItem = ({
73
73
  return getErrorMessage(errors[0]);
74
74
  }
75
75
  return /*#__PURE__*/jsx("ul", {
76
- className: "np-upload-input-errors m-b-0 p-l-2",
76
+ className: "np-upload-input-errors m-b-0",
77
77
  children: errors.map((error, index) => {
78
78
  // eslint-disable-next-line react/no-array-index-key
79
79
  return /*#__PURE__*/jsx("li", {
package/build/uploadInput/uploadItem/UploadItem.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"UploadItem.mjs","sources":["../../../src/uploadInput/uploadItem/UploadItem.tsx"],"sourcesContent":["import { Bin, CheckCircleFill, CrossCircleFill } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../../body';\nimport { Size, Status, Typography, Sentiment } from '../../common';\nimport ProcessIndicator from '../../processIndicator/ProcessIndicator';\nimport StatusIcon from '../../statusIcon/StatusIcon';\nimport { UploadedFile, UploadError } from '../types';\n\nimport MESSAGES from './UploadItem.messages';\nimport { UploadItemLink } from './UploadItemLink';\n\nexport type UploadItemProps = React.JSX.IntrinsicAttributes & {\n file: UploadedFile;\n /**\n * Is this Item part of a multiple- or single-file UploadInput\n */\n singleFileUpload: boolean;\n canDelete: boolean;\n onDelete: () => void;\n\n /**\n * Callback to be called when the file link is clicked.\n * When provided, you need to manually trigger actions to load/download the file.\n *\n * @param file\n */\n onDownload?: (file: UploadedFile) => void;\n};\n\nexport enum TEST_IDS {\n uploadItem = 'uploadItem',\n mediaBody = 'mediaBody',\n}\n\nconst UploadItem = ({\n file,\n canDelete,\n onDelete,\n onDownload,\n singleFileUpload,\n}: UploadItemProps) => {\n const { formatMessage } = useIntl();\n const { status, filename, error, errors, url } = file;\n\n const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;\n\n /**\n * We're temporarily reverting to the regular icon components,\n * until the StatusIcon receives 24px sizing. Some misalignment\n * to be expected.\n */\n const getIcon = () => {\n if (error || errors?.length || status === Status.FAILED) {\n return <CrossCircleFill size={24} className=\"emphasis--negative\" />;\n }\n\n let processIndicator: React.ReactNode;\n\n switch (status) {\n case Status.PROCESSING:\n case Status.PENDING:\n processIndicator = <ProcessIndicator size={Size.EXTRA_SMALL} status={Status.PROCESSING} />;\n break;\n case Status.SUCCEEDED:\n case Status.DONE:\n default:\n processIndicator = <CheckCircleFill size={24} className=\"emphasis--positive\" />;\n }\n\n return processIndicator;\n };\n\n const getErrorMessage = (error?: UploadError) =>\n typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);\n\n const getMultipleErrors = (errors?: UploadError[]) => {\n if (!errors?.length) {\n return null;\n }\n\n if (errors?.length === 1) {\n return getErrorMessage(errors[0]);\n }\n\n return (\n <ul className=\"np-upload-input-errors m-b-0 p-l-2\">\n {errors.map((error, index) => {\n // eslint-disable-next-line react/no-array-index-key\n return <li key={index}>{getErrorMessage(error)}</li>;\n })}\n </ul>\n );\n };\n\n const getDescription = () => {\n if (error || errors?.length || status === Status.FAILED) {\n return (\n <Body type={Typography.BODY_DEFAULT_BOLD} className=\"np-upload-input__text text-negative\">\n {errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)}\n </Body>\n );\n }\n\n switch (status) {\n case Status.PENDING:\n return (\n <Body type={Typography.BODY_DEFAULT} className=\"np-upload-input__text\">\n {formatMessage(MESSAGES.uploading)}\n </Body>\n );\n case Status.PROCESSING:\n return <Body className=\"np-upload-input__text\">{formatMessage(MESSAGES.deleting)}</Body>;\n case Status.SUCCEEDED:\n case Status.DONE:\n default:\n return (\n <Body type={Typography.BODY_DEFAULT_BOLD} className=\"np-upload-input__text\">\n {formatMessage(MESSAGES.uploaded)}\n </Body>\n );\n }\n };\n\n const getTitle = () => {\n return filename || formatMessage(MESSAGES.uploadedFile);\n };\n\n const onDownloadFile = (event: React.MouseEvent): void => {\n if (onDownload) {\n event.preventDefault();\n onDownload(file);\n }\n };\n\n return (\n <div\n className={clsx('np-upload-input__item', { 'is-interactive': isSucceeded && url })}\n data-testid={TEST_IDS.uploadItem}\n >\n <UploadItemLink\n url={isSucceeded ? url : undefined}\n singleFileUpload={singleFileUpload}\n onDownload={onDownloadFile}\n >\n <span className=\"np-upload-input__icon\">{getIcon()}</span>\n <div className=\"np-upload-input__item-content\">\n <Body type={Typography.BODY_LARGE} className=\"np-upload-input__title text-word-break\">\n {getTitle()}\n </Body>\n {getDescription()}\n </div>\n </UploadItemLink>\n {canDelete && (\n <div className=\"np-upload-input__item-action\">\n <button\n aria-label={formatMessage(MESSAGES.removeFile, { filename })}\n className=\"np-upload-input__item-button\"\n type=\"button\"\n onClick={() => onDelete()}\n >\n <Bin size={16} />\n </button>\n </div>\n )}\n </div>\n );\n};\n\nexport default UploadItem;\n"],"names":["TEST_IDS","UploadItem","file","canDelete","onDelete","onDownload","singleFileUpload","formatMessage","useIntl","status","filename","error","errors","url","isSucceeded","Status","SUCCEEDED","undefined","includes","getIcon","length","FAILED","_jsx","CrossCircleFill","size","className","processIndicator","PROCESSING","PENDING","ProcessIndicator","Size","EXTRA_SMALL","DONE","CheckCircleFill","getErrorMessage","message","MESSAGES","uploadingFailed","getMultipleErrors","children","map","index","getDescription","Body","type","Typography","BODY_DEFAULT_BOLD","BODY_DEFAULT","uploading","deleting","uploaded","getTitle","uploadedFile","onDownloadFile","event","preventDefault","_jsxs","clsx","uploadItem","UploadItemLink","BODY_LARGE","removeFile","onClick","Bin"],"mappings":"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"}
1
+ {"version":3,"file":"UploadItem.mjs","sources":["../../../src/uploadInput/uploadItem/UploadItem.tsx"],"sourcesContent":["import { Bin, CheckCircleFill, CrossCircleFill } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../../body';\nimport { Size, Status, Typography, Sentiment } from '../../common';\nimport ProcessIndicator from '../../processIndicator/ProcessIndicator';\nimport StatusIcon from '../../statusIcon/StatusIcon';\nimport { UploadedFile, UploadError } from '../types';\n\nimport MESSAGES from './UploadItem.messages';\nimport { UploadItemLink } from './UploadItemLink';\n\nexport type UploadItemProps = React.JSX.IntrinsicAttributes & {\n file: UploadedFile;\n /**\n * Is this Item part of a multiple- or single-file UploadInput\n */\n singleFileUpload: boolean;\n canDelete: boolean;\n onDelete: () => void;\n\n /**\n * Callback to be called when the file link is clicked.\n * When provided, you need to manually trigger actions to load/download the file.\n *\n * @param file\n */\n onDownload?: (file: UploadedFile) => void;\n};\n\nexport enum TEST_IDS {\n uploadItem = 'uploadItem',\n mediaBody = 'mediaBody',\n}\n\nconst UploadItem = ({\n file,\n canDelete,\n onDelete,\n onDownload,\n singleFileUpload,\n}: UploadItemProps) => {\n const { formatMessage } = useIntl();\n const { status, filename, error, errors, url } = file;\n\n const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;\n\n /**\n * We're temporarily reverting to the regular icon components,\n * until the StatusIcon receives 24px sizing. Some misalignment\n * to be expected.\n */\n const getIcon = () => {\n if (error || errors?.length || status === Status.FAILED) {\n return <CrossCircleFill size={24} className=\"emphasis--negative\" />;\n }\n\n let processIndicator: React.ReactNode;\n\n switch (status) {\n case Status.PROCESSING:\n case Status.PENDING:\n processIndicator = <ProcessIndicator size={Size.EXTRA_SMALL} status={Status.PROCESSING} />;\n break;\n case Status.SUCCEEDED:\n case Status.DONE:\n default:\n processIndicator = <CheckCircleFill size={24} className=\"emphasis--positive\" />;\n }\n\n return processIndicator;\n };\n\n const getErrorMessage = (error?: UploadError) =>\n typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);\n\n const getMultipleErrors = (errors?: UploadError[]) => {\n if (!errors?.length) {\n return null;\n }\n\n if (errors?.length === 1) {\n return getErrorMessage(errors[0]);\n }\n\n return (\n <ul className=\"np-upload-input-errors m-b-0\">\n {errors.map((error, index) => {\n // eslint-disable-next-line react/no-array-index-key\n return <li key={index}>{getErrorMessage(error)}</li>;\n })}\n </ul>\n );\n };\n\n const getDescription = () => {\n if (error || errors?.length || status === Status.FAILED) {\n return (\n <Body type={Typography.BODY_DEFAULT_BOLD} className=\"np-upload-input__text text-negative\">\n {errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)}\n </Body>\n );\n }\n\n switch (status) {\n case Status.PENDING:\n return (\n <Body type={Typography.BODY_DEFAULT} className=\"np-upload-input__text\">\n {formatMessage(MESSAGES.uploading)}\n </Body>\n );\n case Status.PROCESSING:\n return <Body className=\"np-upload-input__text\">{formatMessage(MESSAGES.deleting)}</Body>;\n case Status.SUCCEEDED:\n case Status.DONE:\n default:\n return (\n <Body type={Typography.BODY_DEFAULT_BOLD} className=\"np-upload-input__text\">\n {formatMessage(MESSAGES.uploaded)}\n </Body>\n );\n }\n };\n\n const getTitle = () => {\n return filename || formatMessage(MESSAGES.uploadedFile);\n };\n\n const onDownloadFile = (event: React.MouseEvent): void => {\n if (onDownload) {\n event.preventDefault();\n onDownload(file);\n }\n };\n\n return (\n <div\n className={clsx('np-upload-input__item', { 'is-interactive': isSucceeded && url })}\n data-testid={TEST_IDS.uploadItem}\n >\n <UploadItemLink\n url={isSucceeded ? url : undefined}\n singleFileUpload={singleFileUpload}\n onDownload={onDownloadFile}\n >\n <span className=\"np-upload-input__icon\">{getIcon()}</span>\n <div className=\"np-upload-input__item-content\">\n <Body type={Typography.BODY_LARGE} className=\"np-upload-input__title text-word-break\">\n {getTitle()}\n </Body>\n {getDescription()}\n </div>\n </UploadItemLink>\n {canDelete && (\n <div className=\"np-upload-input__item-action\">\n <button\n aria-label={formatMessage(MESSAGES.removeFile, { filename })}\n className=\"np-upload-input__item-button\"\n type=\"button\"\n onClick={() => onDelete()}\n >\n <Bin size={16} />\n </button>\n </div>\n )}\n </div>\n );\n};\n\nexport default UploadItem;\n"],"names":["TEST_IDS","UploadItem","file","canDelete","onDelete","onDownload","singleFileUpload","formatMessage","useIntl","status","filename","error","errors","url","isSucceeded","Status","SUCCEEDED","undefined","includes","getIcon","length","FAILED","_jsx","CrossCircleFill","size","className","processIndicator","PROCESSING","PENDING","ProcessIndicator","Size","EXTRA_SMALL","DONE","CheckCircleFill","getErrorMessage","message","MESSAGES","uploadingFailed","getMultipleErrors","children","map","index","getDescription","Body","type","Typography","BODY_DEFAULT_BOLD","BODY_DEFAULT","uploading","deleting","uploaded","getTitle","uploadedFile","onDownloadFile","event","preventDefault","_jsxs","clsx","uploadItem","UploadItemLink","BODY_LARGE","removeFile","onClick","Bin"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-d1c5355",
3
+ "version": "0.0.0-experimental-0f47dbf",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -93,8 +93,8 @@
93
93
  "rollup-preserve-directives": "^1.1.1",
94
94
  "storybook": "^8.2.2",
95
95
  "@transferwise/less-config": "3.1.0",
96
- "@transferwise/neptune-css": "14.13.3",
97
- "@wise/components-theming": "1.6.0"
96
+ "@wise/components-theming": "1.6.0",
97
+ "@transferwise/neptune-css": "14.13.3"
98
98
  },
99
99
  "peerDependencies": {
100
100
  "@transferwise/icons": "^3.7.0",
package/src/main.css CHANGED
@@ -5526,8 +5526,8 @@ html:not([dir="rtl"]) .np-navigation-option {
5526
5526
  position: relative;
5527
5527
  }
5528
5528
  .np-upload-input {
5529
- box-shadow: inset 0px 0px 1px 1px #c9cbce;
5530
- box-shadow: inset 0px 0px 1px 1px var(--color-interactive-secondary);
5529
+ border: 1px solid #c9cbce;
5530
+ border: 1px solid var(--color-interactive-secondary);
5531
5531
  border-radius: 10px;
5532
5532
  border-radius: var(--radius-small);
5533
5533
  }
@@ -5568,9 +5568,16 @@ html:not([dir="rtl"]) .np-navigation-option {
5568
5568
  align-items: flex-start;
5569
5569
  }
5570
5570
  .np-upload-input__item .np-upload-input__item-content {
5571
- padding-top: 2px;
5571
+ padding-right: 32px;
5572
+ padding-right: var(--size-32);
5572
5573
  flex: 1;
5573
5574
  }
5575
+ @media (max-width: 320px) {
5576
+ .np-upload-input__item .np-upload-input__item-content {
5577
+ padding-right: 64px;
5578
+ padding-right: var(--size-64);
5579
+ }
5580
+ }
5574
5581
  .np-upload-input__item .np-upload-input__title,
5575
5582
  .np-upload-input__item .np-upload-input__text {
5576
5583
  margin: 0;
@@ -5582,24 +5589,23 @@ html:not([dir="rtl"]) .np-navigation-option {
5582
5589
  .np-upload-input__item .np-upload-input__title + .np-upload-input__text {
5583
5590
  margin-top: 4px;
5584
5591
  margin-top: var(--size-4);
5585
- line-height: 22px;
5586
5592
  }
5587
5593
  .np-upload-input__item .np-upload-input__icon {
5588
5594
  padding-right: 16px;
5589
5595
  padding-right: var(--size-16);
5590
5596
  }
5591
5597
  .np-upload-input__item:not(:first-child)::before {
5598
+ content: " ";
5592
5599
  display: block;
5593
5600
  position: absolute;
5594
5601
  height: 1px;
5595
- background-color: rgba(0,0,0,0.10196);
5596
- background-color: var(--color-border-neutral);
5597
- content: " ";
5598
5602
  left: 16px;
5599
5603
  left: var(--size-16);
5600
5604
  width: calc(100% - 2 * 16px);
5601
5605
  width: calc(100% - 2 * var(--size-16));
5602
5606
  top: 0;
5607
+ background: linear-gradient(rgba(0,0,0,0.10196), rgba(0,0,0,0.10196)), var(--color-white);
5608
+ background: linear-gradient(var(--color-border-neutral), var(--color-border-neutral)), var(--color-white);
5603
5609
  }
5604
5610
  .np-upload-input__item .np-upload-input__item-link,
5605
5611
  .np-upload-input__item .np-upload-input__item-container {
@@ -5608,19 +5614,33 @@ html:not([dir="rtl"]) .np-navigation-option {
5608
5614
  width: 100%;
5609
5615
  }
5610
5616
  .np-upload-input__item .np-upload-input__item-action {
5617
+ --iconSize: var(--size-24);
5618
+ --clickArea: 44px;
5611
5619
  position: absolute;
5612
- top: 18px;
5613
5620
  right: 16px;
5614
5621
  right: var(--size-16);
5622
+ top: 16px;
5623
+ top: var(--size-16);
5624
+ }
5625
+ .np-upload-input__item .np-upload-input__item-action :before {
5626
+ --clickArea: 44px;
5627
+ content: '';
5628
+ display: block;
5629
+ width: 44px;
5630
+ width: var(--clickArea);
5631
+ height: 44px;
5632
+ height: var(--clickArea);
5633
+ border-radius: 50%;
5634
+ position: absolute;
5635
+ inset: calc((44px - var(--iconSize)) * -0.5);
5636
+ inset: calc((var(--clickArea) - var(--iconSize)) * -0.5);
5615
5637
  }
5616
5638
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button {
5617
5639
  -webkit-appearance: none;
5618
5640
  -moz-appearance: none;
5619
5641
  appearance: none;
5620
- height: 24px;
5621
- height: var(--size-24);
5622
- width: 24px;
5623
- width: var(--size-24);
5642
+ height: var(--iconSize);
5643
+ width: var(--iconSize);
5624
5644
  padding: 0 4px;
5625
5645
  padding: 0 var(--size-4);
5626
5646
  border-radius: 50%;
@@ -5629,6 +5649,10 @@ html:not([dir="rtl"]) .np-navigation-option {
5629
5649
  background-color: var(--color-background-neutral);
5630
5650
  color: var(--color-interactive-primary);
5631
5651
  transition: color, background-color 0.15s ease-in-out;
5652
+ outline-offset: 0;
5653
+ display: flex;
5654
+ align-items: center;
5655
+ justify-content: center;
5632
5656
  }
5633
5657
  @media (max-width: 320px) {
5634
5658
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button {
@@ -5639,7 +5663,8 @@ html:not([dir="rtl"]) .np-navigation-option {
5639
5663
  }
5640
5664
  }
5641
5665
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:hover {
5642
- background-color: var(--color-background-neutral-hover);
5666
+ background-color: var(--color-sentiment-negative);
5667
+ color: var(--color-contrast-overlay) !important;
5643
5668
  }
5644
5669
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:active {
5645
5670
  background-color: var(--color-background-neutral-active);
@@ -5647,14 +5672,11 @@ html:not([dir="rtl"]) .np-navigation-option {
5647
5672
  .np-upload-input__item.is-interactive {
5648
5673
  padding: 0;
5649
5674
  }
5650
- .np-upload-input__item.is-interactive:hover + .np-upload-input__item::before,
5651
- .np-upload-input__item.is-interactive:hover::before {
5675
+ .np-upload-input__item.is-interactive:hover::before,
5676
+ .np-upload-input__item.is-interactive:hover + .np-upload-input__item::before {
5652
5677
  width: 100%;
5653
5678
  left: 0;
5654
5679
  }
5655
- .np-upload-input__item.is-interactive:hover + .np-upload-input__item::before {
5656
- top: -1px;
5657
- }
5658
5680
  .np-upload-input__item.is-interactive .np-upload-input__item-link {
5659
5681
  padding: 16px;
5660
5682
  padding: var(--size-16);
@@ -5665,12 +5687,23 @@ html:not([dir="rtl"]) .np-navigation-option {
5665
5687
  .np-upload-input__item.is-interactive .np-upload-input__item-link:focus-visible {
5666
5688
  outline-offset: -3px;
5667
5689
  outline-width: 3px;
5690
+ z-index: 1;
5668
5691
  }
5669
5692
  .np-upload-input__item.is-interactive .np-upload-input__item-link:hover,
5670
5693
  .np-upload-input__item.is-interactive .np-upload-input__item-link:active {
5671
5694
  background: rgba(134,167,189,0.10196);
5672
5695
  background: var(--color-background-neutral);
5673
5696
  }
5697
+ .np-upload-input__item .np-upload-input-errors {
5698
+ padding-left: 16px;
5699
+ padding-left: var(--size-16);
5700
+ }
5701
+ @media (max-width: 320px) {
5702
+ .np-upload-input__item .np-upload-input-errors {
5703
+ padding-left: 32px;
5704
+ padding-left: var(--size-32);
5705
+ }
5706
+ }
5674
5707
  .np-progress {
5675
5708
  border-radius: 10px;
5676
5709
  border-radius: var(--radius-small);
package/src/radioGroup/RadioGroup.story.tsx CHANGED
@@ -1,81 +1,82 @@
1
- import { action } from '@storybook/addon-actions';
2
- import { boolean } from '@storybook/addon-knobs';
3
1
  import { Flag } from '@wise/art';
4
2
 
5
3
  import Avatar, { AvatarType } from '../avatar';
6
4
 
7
- import RadioGroup from './RadioGroup';
5
+ import RadioGroup, { RadioGroupProps, RadioGroupRadio } from './RadioGroup';
8
6
  import { Field } from '../field/Field';
7
+ import { Meta, StoryObj } from '@storybook/react';
8
+ import { fn } from '@storybook/test';
9
+ import { useState } from 'react';
9
10
 
10
- export default {
11
+ const meta = {
11
12
  component: RadioGroup,
12
13
  title: 'Forms/RadioGroup',
13
- };
14
+ } satisfies Meta<typeof RadioGroup>;
14
15
 
15
- export const Basic = () => {
16
- const showAvatars = boolean('avatar', false);
17
- const hasError = boolean('hasError', false);
16
+ export default meta;
17
+ type Story<T extends string | number = string> = StoryObj<RadioGroupProps<T>>;
18
18
 
19
- const avatar = showAvatars ? (
20
- <Avatar type={AvatarType.THUMBNAIL}>
21
- <Flag code="NZD" />
22
- </Avatar>
23
- ) : undefined;
19
+ export const Basic = {
20
+ args: {
21
+ selectedValue: 'radio-2',
22
+ name: 'radio-group',
23
+ radios: [
24
+ {
25
+ value: 'radio-1',
26
+ label: 'Radio1',
27
+ secondary: 'Secondary line 1',
28
+ disabled: false,
29
+ },
30
+ {
31
+ value: 'radio-2',
32
+ label: 'Radio2',
33
+ disabled: false,
34
+ },
35
+ {
36
+ value: 'radio-3',
37
+ label: 'Radio3',
38
+ secondary: 'Secondary line 3',
39
+ disabled: true,
40
+ },
41
+ ],
42
+ onChange: fn(),
43
+ },
44
+ } satisfies Story;
24
45
 
25
- return (
26
- <div className={`form-group ${hasError ? 'has-error' : ''}`}>
27
- <RadioGroup
28
- selectedValue="radio-2"
29
- name="radio-group"
30
- radios={[
31
- {
32
- value: 'radio-1',
33
- label: 'Radio1',
34
- secondary: 'Secondary line 1',
35
- disabled: false,
36
- avatar,
37
- },
38
- {
39
- value: 'radio-2',
40
- label: 'Radio2',
41
- disabled: false,
42
- avatar,
43
- },
44
- {
45
- value: 'radio-3',
46
- label: 'Radio3',
47
- secondary: 'Secondary line 3',
48
- disabled: true,
49
- avatar,
50
- },
51
- ]}
52
- onChange={(v) => action(v)}
53
- />
54
- </div>
55
- );
56
- };
46
+ export const WithAvatars = {
47
+ ...Basic,
48
+ args: {
49
+ ...Basic.args,
50
+ radios: Basic.args.radios.map(
51
+ (radio) =>
52
+ ({
53
+ ...radio,
54
+ avatar: (
55
+ <Avatar type={AvatarType.THUMBNAIL}>
56
+ <Flag code="NZD" />
57
+ </Avatar>
58
+ ),
59
+ }) satisfies RadioGroupRadio,
60
+ ),
61
+ },
62
+ } satisfies Story;
57
63
 
58
- export const Labeled = () => {
59
- return (
60
- <Field label="Do you like our product?">
61
- <RadioGroup
62
- name="radio-group"
63
- radios={[
64
- {
65
- value: 'yes',
66
- label: 'Yes',
67
- },
68
- {
69
- value: 'definitely',
70
- label: 'Definitely',
71
- },
72
- {
73
- value: 'absolutely',
74
- label: 'Absolutely',
75
- },
76
- ]}
77
- onChange={(v) => action(v)}
78
- />
79
- </Field>
80
- );
81
- };
64
+ export const WithinField = {
65
+ ...Basic,
66
+ render: function Render(args) {
67
+ const [selectedValue, setSelectedValue] = useState('radio-2');
68
+ const hasError = selectedValue === 'radio-2';
69
+ return (
70
+ <Field
71
+ {...(hasError
72
+ ? {
73
+ message: 'Something went wrong',
74
+ sentiment: 'negative',
75
+ }
76
+ : undefined)}
77
+ >
78
+ <RadioGroup {...args} selectedValue={selectedValue} onChange={setSelectedValue} />
79
+ </Field>
80
+ );
81
+ },
82
+ } satisfies Story;
package/src/uploadInput/UploadInput.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .np-upload-input {
2
- box-shadow: inset 0px 0px 1px 1px #c9cbce;
3
- box-shadow: inset 0px 0px 1px 1px var(--color-interactive-secondary);
2
+ border: 1px solid #c9cbce;
3
+ border: 1px solid var(--color-interactive-secondary);
4
4
  border-radius: 10px;
5
5
  border-radius: var(--radius-small);
6
6
  }
package/src/uploadInput/UploadInput.less CHANGED
@@ -3,7 +3,7 @@
3
3
  @import (reference) './uploadItem/UploadItem.less';
4
4
 
5
5
  .np-upload-input {
6
- box-shadow: inset 0px 0px 1px 1px var(--color-interactive-secondary);
6
+ border: 1px solid var(--color-interactive-secondary);
7
7
  border-radius: var(--radius-small);
8
8
 
9
9
  .np-upload-input__items {
@@ -34,9 +34,9 @@
34
34
  &:has(.np-upload-input__item:last-child.is-interactive:hover)
35
35
  ~ .np-upload-input__items
36
36
  .np-upload-input__upload-button::before {
37
- left: 0;
38
- width: 100%;
39
- top: 0px;
40
- }
37
+ left: 0;
38
+ width: 100%;
39
+ top: 0px;
40
+ }
41
41
  }
42
42
  }
package/src/uploadInput/uploadItem/UploadItem.css CHANGED
@@ -6,9 +6,16 @@
6
6
  align-items: flex-start;
7
7
  }
8
8
  .np-upload-input__item .np-upload-input__item-content {
9
- padding-top: 2px;
9
+ padding-right: 32px;
10
+ padding-right: var(--size-32);
10
11
  flex: 1;
11
12
  }
13
+ @media (max-width: 320px) {
14
+ .np-upload-input__item .np-upload-input__item-content {
15
+ padding-right: 64px;
16
+ padding-right: var(--size-64);
17
+ }
18
+ }
12
19
  .np-upload-input__item .np-upload-input__title,
13
20
  .np-upload-input__item .np-upload-input__text {
14
21
  margin: 0;
@@ -20,24 +27,23 @@
20
27
  .np-upload-input__item .np-upload-input__title + .np-upload-input__text {
21
28
  margin-top: 4px;
22
29
  margin-top: var(--size-4);
23
- line-height: 22px;
24
30
  }
25
31
  .np-upload-input__item .np-upload-input__icon {
26
32
  padding-right: 16px;
27
33
  padding-right: var(--size-16);
28
34
  }
29
35
  .np-upload-input__item:not(:first-child)::before {
36
+ content: " ";
30
37
  display: block;
31
38
  position: absolute;
32
39
  height: 1px;
33
- background-color: rgba(0,0,0,0.10196);
34
- background-color: var(--color-border-neutral);
35
- content: " ";
36
40
  left: 16px;
37
41
  left: var(--size-16);
38
42
  width: calc(100% - 2 * 16px);
39
43
  width: calc(100% - 2 * var(--size-16));
40
44
  top: 0;
45
+ background: linear-gradient(rgba(0,0,0,0.10196), rgba(0,0,0,0.10196)), var(--color-white);
46
+ background: linear-gradient(var(--color-border-neutral), var(--color-border-neutral)), var(--color-white);
41
47
  }
42
48
  .np-upload-input__item .np-upload-input__item-link,
43
49
  .np-upload-input__item .np-upload-input__item-container {
@@ -46,19 +52,33 @@
46
52
  width: 100%;
47
53
  }
48
54
  .np-upload-input__item .np-upload-input__item-action {
55
+ --iconSize: var(--size-24);
56
+ --clickArea: 44px;
49
57
  position: absolute;
50
- top: 18px;
51
58
  right: 16px;
52
59
  right: var(--size-16);
60
+ top: 16px;
61
+ top: var(--size-16);
62
+ }
63
+ .np-upload-input__item .np-upload-input__item-action :before {
64
+ --clickArea: 44px;
65
+ content: '';
66
+ display: block;
67
+ width: 44px;
68
+ width: var(--clickArea);
69
+ height: 44px;
70
+ height: var(--clickArea);
71
+ border-radius: 50%;
72
+ position: absolute;
73
+ inset: calc((44px - var(--iconSize)) * -0.5);
74
+ inset: calc((var(--clickArea) - var(--iconSize)) * -0.5);
53
75
  }
54
76
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button {
55
77
  -webkit-appearance: none;
56
78
  -moz-appearance: none;
57
79
  appearance: none;
58
- height: 24px;
59
- height: var(--size-24);
60
- width: 24px;
61
- width: var(--size-24);
80
+ height: var(--iconSize);
81
+ width: var(--iconSize);
62
82
  padding: 0 4px;
63
83
  padding: 0 var(--size-4);
64
84
  border-radius: 50%;
@@ -67,6 +87,10 @@
67
87
  background-color: var(--color-background-neutral);
68
88
  color: var(--color-interactive-primary);
69
89
  transition: color, background-color 0.15s ease-in-out;
90
+ outline-offset: 0;
91
+ display: flex;
92
+ align-items: center;
93
+ justify-content: center;
70
94
  }
71
95
  @media (max-width: 320px) {
72
96
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button {
@@ -77,7 +101,8 @@
77
101
  }
78
102
  }
79
103
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:hover {
80
- background-color: var(--color-background-neutral-hover);
104
+ background-color: var(--color-sentiment-negative);
105
+ color: var(--color-contrast-overlay) !important;
81
106
  }
82
107
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:active {
83
108
  background-color: var(--color-background-neutral-active);
@@ -85,14 +110,11 @@
85
110
  .np-upload-input__item.is-interactive {
86
111
  padding: 0;
87
112
  }
88
- .np-upload-input__item.is-interactive:hover + .np-upload-input__item::before,
89
- .np-upload-input__item.is-interactive:hover::before {
113
+ .np-upload-input__item.is-interactive:hover::before,
114
+ .np-upload-input__item.is-interactive:hover + .np-upload-input__item::before {
90
115
  width: 100%;
91
116
  left: 0;
92
117
  }
93
- .np-upload-input__item.is-interactive:hover + .np-upload-input__item::before {
94
- top: -1px;
95
- }
96
118
  .np-upload-input__item.is-interactive .np-upload-input__item-link {
97
119
  padding: 16px;
98
120
  padding: var(--size-16);
@@ -103,9 +125,20 @@
103
125
  .np-upload-input__item.is-interactive .np-upload-input__item-link:focus-visible {
104
126
  outline-offset: -3px;
105
127
  outline-width: 3px;
128
+ z-index: 1;
106
129
  }
107
130
  .np-upload-input__item.is-interactive .np-upload-input__item-link:hover,
108
131
  .np-upload-input__item.is-interactive .np-upload-input__item-link:active {
109
132
  background: rgba(134,167,189,0.10196);
110
133
  background: var(--color-background-neutral);
111
134
  }
135
+ .np-upload-input__item .np-upload-input-errors {
136
+ padding-left: 16px;
137
+ padding-left: var(--size-16);
138
+ }
139
+ @media (max-width: 320px) {
140
+ .np-upload-input__item .np-upload-input-errors {
141
+ padding-left: 32px;
142
+ padding-left: var(--size-32);
143
+ }
144
+ }
package/src/uploadInput/uploadItem/UploadItem.less CHANGED
@@ -2,13 +2,17 @@
2
2
 
3
3
  .np-upload-input__item {
4
4
  position: relative;
5
- padding: var(--size-16);
5
+ padding: var(--size-16);
6
6
  display: flex;
7
7
  align-items: flex-start;
8
8
 
9
9
  .np-upload-input__item-content {
10
- padding-top: 2px;
10
+ padding-right: var(--size-32);
11
11
  flex: 1;
12
+
13
+ @media (max-width: 320px) {
14
+ padding-right: var(--size-64);
15
+ }
12
16
  }
13
17
 
14
18
  .np-upload-input__title,
@@ -20,7 +24,6 @@
20
24
 
21
25
  .np-upload-input__title + .np-upload-input__text {
22
26
  margin-top: var(--size-4);
23
- line-height: 22px;
24
27
  }
25
28
 
26
29
  .np-upload-input__icon {
@@ -28,14 +31,19 @@
28
31
  }
29
32
 
30
33
  &:not(:first-child)::before {
34
+ content: " ";
31
35
  display: block;
32
36
  position: absolute;
33
37
  height: 1px;
34
- background-color: var(--color-border-neutral);
35
- content: " ";
36
38
  left: var(--size-16);
37
39
  width: calc(100% - 2 * var(--size-16));
38
40
  top: 0;
41
+ // Because `--color-border-neutral` is semi-transparent, when rendered
42
+ // on top of a non-white fill it will actually mix with it and result in
43
+ // a different overall colour value.
44
+ background:
45
+ linear-gradient(var(--color-border-neutral), var(--color-border-neutral)),
46
+ var(--color-white);
39
47
  }
40
48
 
41
49
  .np-upload-input__item-link,
@@ -46,20 +54,38 @@
46
54
  }
47
55
 
48
56
  .np-upload-input__item-action {
57
+ --iconSize: var(--size-24);
58
+ --clickArea: 44px;
59
+
49
60
  position: absolute;
50
- top: 18px;
51
61
  right: var(--size-16);
62
+ top: var(--size-16);
63
+
64
+ :before {
65
+ --clickArea: 44px;
66
+ content: '';
67
+ display: block;
68
+ width: var(--clickArea);
69
+ height: var(--clickArea);
70
+ border-radius: 50%;
71
+ position: absolute;
72
+ inset: calc((var(--clickArea) - var(--iconSize)) * -.5)
73
+ }
52
74
 
53
75
  .np-upload-input__item-button {
54
76
  appearance: none;
55
- height: var(--size-24);
56
- width: var(--size-24);
77
+ height: var(--iconSize);
78
+ width: var(--iconSize);
57
79
  padding: 0 var(--size-4);
58
80
  border-radius: 50%;
59
81
  border: 0;
60
82
  background-color: var(--color-background-neutral);
61
83
  color: var(--color-interactive-primary);
62
84
  transition: color, background-color 0.15s ease-in-out;
85
+ outline-offset: 0;
86
+ display: flex;
87
+ align-items: center;
88
+ justify-content: center;
63
89
 
64
90
  @media (--screen-400-zoom) {
65
91
  height: var(--size-48);
@@ -67,7 +93,8 @@
67
93
  }
68
94
 
69
95
  &:hover {
70
- background-color: var(--color-background-neutral-hover);
96
+ background-color: var(--color-sentiment-negative);
97
+ color: var(--color-contrast-overlay) !important;
71
98
  }
72
99
 
73
100
  &:active {
@@ -80,15 +107,11 @@
80
107
  padding: 0;
81
108
 
82
109
  &:hover {
83
- + .np-upload-input__item::before,
84
- &::before {
110
+ &::before,
111
+ & + .np-upload-input__item::before {
85
112
  width: 100%;
86
113
  left: 0;
87
114
  }
88
-
89
- + .np-upload-input__item::before {
90
- top: -1px;
91
- }
92
115
  }
93
116
 
94
117
  .np-upload-input__item-link {
@@ -99,6 +122,7 @@
99
122
  &:focus-visible {
100
123
  outline-offset: -3px;
101
124
  outline-width: 3px;
125
+ z-index: 1;
102
126
  }
103
127
 
104
128
  &:hover,
@@ -107,4 +131,12 @@
107
131
  }
108
132
  }
109
133
  }
134
+
135
+ .np-upload-input-errors {
136
+ padding-left: var(--size-16);
137
+
138
+ @media (max-width: 320px) {
139
+ padding-left: var(--size-32);
140
+ }
141
+ }
110
142
  }
package/src/uploadInput/uploadItem/UploadItem.tsx CHANGED
@@ -85,7 +85,7 @@ const UploadItem = ({
85
85
  }
86
86
 
87
87
  return (
88
- <ul className="np-upload-input-errors m-b-0 p-l-2">
88
+ <ul className="np-upload-input-errors m-b-0">
89
89
  {errors.map((error, index) => {
90
90
  // eslint-disable-next-line react/no-array-index-key
91
91
  return <li key={index}>{getErrorMessage(error)}</li>;