@transferwise/components 0.0.0-experimental-0f47dbf → 0.0.0-experimental-72af069

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 (13) hide show
  1. package/build/i18n/tr.json +1 -1
  2. package/build/i18n/tr.json.js +1 -1
  3. package/build/i18n/tr.json.mjs +1 -1
  4. package/build/main.css +7 -14
  5. package/build/styles/main.css +7 -14
  6. package/build/styles/uploadInput/uploadItem/UploadItem.css +7 -14
  7. package/package.json +3 -3
  8. package/src/i18n/tr.json +1 -1
  9. package/src/main.css +7 -14
  10. package/src/uploadInput/UploadInput.tests.story.tsx +3 -3
  11. package/src/uploadInput/uploadButton/UploadButton.less +1 -1
  12. package/src/uploadInput/uploadItem/UploadItem.css +7 -14
  13. package/src/uploadInput/uploadItem/UploadItem.less +5 -7
package/build/i18n/tr.json CHANGED
@@ -18,7 +18,7 @@
18
18
  "neptune.DateLookup.year": "yıl",
19
19
  "neptune.FlowNavigation.back": "önceki adıma dön",
20
20
  "neptune.Info.ariaLabel": "Daha fazla bilgi",
21
- "neptune.Label.optional": "(Isteğe bağlı)",
21
+ "neptune.Label.optional": "(İsteğe bağlı)",
22
22
  "neptune.Link.opensInNewTab": "(yeni sekmede açılır)",
23
23
  "neptune.MoneyInput.Select.placeholder": "Bir seçenek seçin...",
24
24
  "neptune.PhoneNumberInput.SelectInput.placeholder": "Bir seçenek seçin...",
package/build/i18n/tr.json.js CHANGED
@@ -20,7 +20,7 @@ var tr = {
20
20
  "neptune.DateLookup.year": "yıl",
21
21
  "neptune.FlowNavigation.back": "önceki adıma dön",
22
22
  "neptune.Info.ariaLabel": "Daha fazla bilgi",
23
- "neptune.Label.optional": "(Isteğe bağlı)",
23
+ "neptune.Label.optional": "(İsteğe bağlı)",
24
24
  "neptune.Link.opensInNewTab": "(yeni sekmede açılır)",
25
25
  "neptune.MoneyInput.Select.placeholder": "Bir seçenek seçin...",
26
26
  "neptune.PhoneNumberInput.SelectInput.placeholder": "Bir seçenek seçin...",
package/build/i18n/tr.json.mjs CHANGED
@@ -18,7 +18,7 @@ var tr = {
18
18
  "neptune.DateLookup.year": "yıl",
19
19
  "neptune.FlowNavigation.back": "önceki adıma dön",
20
20
  "neptune.Info.ariaLabel": "Daha fazla bilgi",
21
- "neptune.Label.optional": "(Isteğe bağlı)",
21
+ "neptune.Label.optional": "(İsteğe bağlı)",
22
22
  "neptune.Link.opensInNewTab": "(yeni sekmede açılır)",
23
23
  "neptune.MoneyInput.Select.placeholder": "Bir seçenek seçin...",
24
24
  "neptune.PhoneNumberInput.SelectInput.placeholder": "Bir seçenek seçin...",
package/build/main.css CHANGED
@@ -5604,8 +5604,8 @@ html:not([dir="rtl"]) .np-navigation-option {
5604
5604
  width: calc(100% - 2 * 16px);
5605
5605
  width: calc(100% - 2 * var(--size-16));
5606
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);
5607
+ background: linear-gradient(rgba(0,0,0,0.10196), rgba(0,0,0,0.10196)), #ffffff;
5608
+ background: linear-gradient(var(--color-border-neutral), var(--color-border-neutral)), var(--color-background-screen);
5609
5609
  }
5610
5610
  .np-upload-input__item .np-upload-input__item-link,
5611
5611
  .np-upload-input__item .np-upload-input__item-container {
@@ -5622,17 +5622,18 @@ html:not([dir="rtl"]) .np-navigation-option {
5622
5622
  top: 16px;
5623
5623
  top: var(--size-16);
5624
5624
  }
5625
+ @media (max-width: 320px) {
5626
+ .np-upload-input__item .np-upload-input__item-action {
5627
+ --iconSize: var(--size-48);
5628
+ }
5629
+ }
5625
5630
  .np-upload-input__item .np-upload-input__item-action :before {
5626
- --clickArea: 44px;
5627
5631
  content: '';
5628
5632
  display: block;
5629
- width: 44px;
5630
5633
  width: var(--clickArea);
5631
- height: 44px;
5632
5634
  height: var(--clickArea);
5633
5635
  border-radius: 50%;
5634
5636
  position: absolute;
5635
- inset: calc((44px - var(--iconSize)) * -0.5);
5636
5637
  inset: calc((var(--clickArea) - var(--iconSize)) * -0.5);
5637
5638
  }
5638
5639
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button {
@@ -5654,14 +5655,6 @@ html:not([dir="rtl"]) .np-navigation-option {
5654
5655
  align-items: center;
5655
5656
  justify-content: center;
5656
5657
  }
5657
- @media (max-width: 320px) {
5658
- .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button {
5659
- height: 48px;
5660
- height: var(--size-48);
5661
- width: 48px;
5662
- width: var(--size-48);
5663
- }
5664
- }
5665
5658
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:hover {
5666
5659
  background-color: var(--color-sentiment-negative);
5667
5660
  color: var(--color-contrast-overlay) !important;
package/build/styles/main.css CHANGED
@@ -5604,8 +5604,8 @@ html:not([dir="rtl"]) .np-navigation-option {
5604
5604
  width: calc(100% - 2 * 16px);
5605
5605
  width: calc(100% - 2 * var(--size-16));
5606
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);
5607
+ background: linear-gradient(rgba(0,0,0,0.10196), rgba(0,0,0,0.10196)), #ffffff;
5608
+ background: linear-gradient(var(--color-border-neutral), var(--color-border-neutral)), var(--color-background-screen);
5609
5609
  }
5610
5610
  .np-upload-input__item .np-upload-input__item-link,
5611
5611
  .np-upload-input__item .np-upload-input__item-container {
@@ -5622,17 +5622,18 @@ html:not([dir="rtl"]) .np-navigation-option {
5622
5622
  top: 16px;
5623
5623
  top: var(--size-16);
5624
5624
  }
5625
+ @media (max-width: 320px) {
5626
+ .np-upload-input__item .np-upload-input__item-action {
5627
+ --iconSize: var(--size-48);
5628
+ }
5629
+ }
5625
5630
  .np-upload-input__item .np-upload-input__item-action :before {
5626
- --clickArea: 44px;
5627
5631
  content: '';
5628
5632
  display: block;
5629
- width: 44px;
5630
5633
  width: var(--clickArea);
5631
- height: 44px;
5632
5634
  height: var(--clickArea);
5633
5635
  border-radius: 50%;
5634
5636
  position: absolute;
5635
- inset: calc((44px - var(--iconSize)) * -0.5);
5636
5637
  inset: calc((var(--clickArea) - var(--iconSize)) * -0.5);
5637
5638
  }
5638
5639
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button {
@@ -5654,14 +5655,6 @@ html:not([dir="rtl"]) .np-navigation-option {
5654
5655
  align-items: center;
5655
5656
  justify-content: center;
5656
5657
  }
5657
- @media (max-width: 320px) {
5658
- .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button {
5659
- height: 48px;
5660
- height: var(--size-48);
5661
- width: 48px;
5662
- width: var(--size-48);
5663
- }
5664
- }
5665
5658
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:hover {
5666
5659
  background-color: var(--color-sentiment-negative);
5667
5660
  color: var(--color-contrast-overlay) !important;
package/build/styles/uploadInput/uploadItem/UploadItem.css CHANGED
@@ -42,8 +42,8 @@
42
42
  width: calc(100% - 2 * 16px);
43
43
  width: calc(100% - 2 * var(--size-16));
44
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);
45
+ background: linear-gradient(rgba(0,0,0,0.10196), rgba(0,0,0,0.10196)), #ffffff;
46
+ background: linear-gradient(var(--color-border-neutral), var(--color-border-neutral)), var(--color-background-screen);
47
47
  }
48
48
  .np-upload-input__item .np-upload-input__item-link,
49
49
  .np-upload-input__item .np-upload-input__item-container {
@@ -60,17 +60,18 @@
60
60
  top: 16px;
61
61
  top: var(--size-16);
62
62
  }
63
+ @media (max-width: 320px) {
64
+ .np-upload-input__item .np-upload-input__item-action {
65
+ --iconSize: var(--size-48);
66
+ }
67
+ }
63
68
  .np-upload-input__item .np-upload-input__item-action :before {
64
- --clickArea: 44px;
65
69
  content: '';
66
70
  display: block;
67
- width: 44px;
68
71
  width: var(--clickArea);
69
- height: 44px;
70
72
  height: var(--clickArea);
71
73
  border-radius: 50%;
72
74
  position: absolute;
73
- inset: calc((44px - var(--iconSize)) * -0.5);
74
75
  inset: calc((var(--clickArea) - var(--iconSize)) * -0.5);
75
76
  }
76
77
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button {
@@ -92,14 +93,6 @@
92
93
  align-items: center;
93
94
  justify-content: center;
94
95
  }
95
- @media (max-width: 320px) {
96
- .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button {
97
- height: 48px;
98
- height: var(--size-48);
99
- width: 48px;
100
- width: var(--size-48);
101
- }
102
- }
103
96
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:hover {
104
97
  background-color: var(--color-sentiment-negative);
105
98
  color: var(--color-contrast-overlay) !important;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-0f47dbf",
3
+ "version": "0.0.0-experimental-72af069",
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
- "@wise/components-theming": "1.6.0",
97
- "@transferwise/neptune-css": "14.13.3"
96
+ "@transferwise/neptune-css": "14.13.3",
97
+ "@wise/components-theming": "1.6.0"
98
98
  },
99
99
  "peerDependencies": {
100
100
  "@transferwise/icons": "^3.7.0",
package/src/i18n/tr.json CHANGED
@@ -18,7 +18,7 @@
18
18
  "neptune.DateLookup.year": "yıl",
19
19
  "neptune.FlowNavigation.back": "önceki adıma dön",
20
20
  "neptune.Info.ariaLabel": "Daha fazla bilgi",
21
- "neptune.Label.optional": "(Isteğe bağlı)",
21
+ "neptune.Label.optional": "(İsteğe bağlı)",
22
22
  "neptune.Link.opensInNewTab": "(yeni sekmede açılır)",
23
23
  "neptune.MoneyInput.Select.placeholder": "Bir seçenek seçin...",
24
24
  "neptune.PhoneNumberInput.SelectInput.placeholder": "Bir seçenek seçin...",
package/src/main.css CHANGED
@@ -5604,8 +5604,8 @@ html:not([dir="rtl"]) .np-navigation-option {
5604
5604
  width: calc(100% - 2 * 16px);
5605
5605
  width: calc(100% - 2 * var(--size-16));
5606
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);
5607
+ background: linear-gradient(rgba(0,0,0,0.10196), rgba(0,0,0,0.10196)), #ffffff;
5608
+ background: linear-gradient(var(--color-border-neutral), var(--color-border-neutral)), var(--color-background-screen);
5609
5609
  }
5610
5610
  .np-upload-input__item .np-upload-input__item-link,
5611
5611
  .np-upload-input__item .np-upload-input__item-container {
@@ -5622,17 +5622,18 @@ html:not([dir="rtl"]) .np-navigation-option {
5622
5622
  top: 16px;
5623
5623
  top: var(--size-16);
5624
5624
  }
5625
+ @media (max-width: 320px) {
5626
+ .np-upload-input__item .np-upload-input__item-action {
5627
+ --iconSize: var(--size-48);
5628
+ }
5629
+ }
5625
5630
  .np-upload-input__item .np-upload-input__item-action :before {
5626
- --clickArea: 44px;
5627
5631
  content: '';
5628
5632
  display: block;
5629
- width: 44px;
5630
5633
  width: var(--clickArea);
5631
- height: 44px;
5632
5634
  height: var(--clickArea);
5633
5635
  border-radius: 50%;
5634
5636
  position: absolute;
5635
- inset: calc((44px - var(--iconSize)) * -0.5);
5636
5637
  inset: calc((var(--clickArea) - var(--iconSize)) * -0.5);
5637
5638
  }
5638
5639
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button {
@@ -5654,14 +5655,6 @@ html:not([dir="rtl"]) .np-navigation-option {
5654
5655
  align-items: center;
5655
5656
  justify-content: center;
5656
5657
  }
5657
- @media (max-width: 320px) {
5658
- .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button {
5659
- height: 48px;
5660
- height: var(--size-48);
5661
- width: 48px;
5662
- width: var(--size-48);
5663
- }
5664
- }
5665
5658
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:hover {
5666
5659
  background-color: var(--color-sentiment-negative);
5667
5660
  color: var(--color-contrast-overlay) !important;
package/src/uploadInput/UploadInput.tests.story.tsx CHANGED
@@ -26,18 +26,18 @@ const files = [
26
26
  url: 'https://wise.com/public-resources/assets/logos/wise/brand_logo_inverse.svg',
27
27
  },
28
28
  {
29
- id: 2,
29
+ id: 3,
30
30
  filename: 'receipt failed.png',
31
31
  status: Status.FAILED,
32
32
  },
33
33
  {
34
- id: 3,
34
+ id: 4,
35
35
  filename: 'receipt failed With error string.png',
36
36
  status: Status.FAILED,
37
37
  error: 'Something went wrong',
38
38
  },
39
39
  {
40
- id: 4,
40
+ id: 5,
41
41
  filename: 'receipt failed With error object.png',
42
42
  status: Status.FAILED,
43
43
  error: { message: 'Something went wrong' },
package/src/uploadInput/uploadButton/UploadButton.less CHANGED
@@ -75,4 +75,4 @@
75
75
  transition: transform 0.3s ease;
76
76
  position: relative;
77
77
  }
78
- }
78
+ }
package/src/uploadInput/uploadItem/UploadItem.css CHANGED
@@ -42,8 +42,8 @@
42
42
  width: calc(100% - 2 * 16px);
43
43
  width: calc(100% - 2 * var(--size-16));
44
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);
45
+ background: linear-gradient(rgba(0,0,0,0.10196), rgba(0,0,0,0.10196)), #ffffff;
46
+ background: linear-gradient(var(--color-border-neutral), var(--color-border-neutral)), var(--color-background-screen);
47
47
  }
48
48
  .np-upload-input__item .np-upload-input__item-link,
49
49
  .np-upload-input__item .np-upload-input__item-container {
@@ -60,17 +60,18 @@
60
60
  top: 16px;
61
61
  top: var(--size-16);
62
62
  }
63
+ @media (max-width: 320px) {
64
+ .np-upload-input__item .np-upload-input__item-action {
65
+ --iconSize: var(--size-48);
66
+ }
67
+ }
63
68
  .np-upload-input__item .np-upload-input__item-action :before {
64
- --clickArea: 44px;
65
69
  content: '';
66
70
  display: block;
67
- width: 44px;
68
71
  width: var(--clickArea);
69
- height: 44px;
70
72
  height: var(--clickArea);
71
73
  border-radius: 50%;
72
74
  position: absolute;
73
- inset: calc((44px - var(--iconSize)) * -0.5);
74
75
  inset: calc((var(--clickArea) - var(--iconSize)) * -0.5);
75
76
  }
76
77
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button {
@@ -92,14 +93,6 @@
92
93
  align-items: center;
93
94
  justify-content: center;
94
95
  }
95
- @media (max-width: 320px) {
96
- .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button {
97
- height: 48px;
98
- height: var(--size-48);
99
- width: 48px;
100
- width: var(--size-48);
101
- }
102
- }
103
96
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:hover {
104
97
  background-color: var(--color-sentiment-negative);
105
98
  color: var(--color-contrast-overlay) !important;
package/src/uploadInput/uploadItem/UploadItem.less CHANGED
@@ -43,7 +43,7 @@
43
43
  // a different overall colour value.
44
44
  background:
45
45
  linear-gradient(var(--color-border-neutral), var(--color-border-neutral)),
46
- var(--color-white);
46
+ var(--color-background-screen);
47
47
  }
48
48
 
49
49
  .np-upload-input__item-link,
@@ -61,8 +61,11 @@
61
61
  right: var(--size-16);
62
62
  top: var(--size-16);
63
63
 
64
+ @media (--screen-400-zoom) {
65
+ --iconSize: var(--size-48);
66
+ }
67
+
64
68
  :before {
65
- --clickArea: 44px;
66
69
  content: '';
67
70
  display: block;
68
71
  width: var(--clickArea);
@@ -87,11 +90,6 @@
87
90
  align-items: center;
88
91
  justify-content: center;
89
92
 
90
- @media (--screen-400-zoom) {
91
- height: var(--size-48);
92
- width: var(--size-48);
93
- }
94
-
95
93
  &:hover {
96
94
  background-color: var(--color-sentiment-negative);
97
95
  color: var(--color-contrast-overlay) !important;