@transferwise/components 0.0.0-experimental-5125346 → 0.0.0-experimental-3b84ee4

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 (44) hide show
  1. package/build/i18n/en.json +1 -0
  2. package/build/index.js +2442 -2335
  3. package/build/index.js.map +1 -1
  4. package/build/index.mjs +2444 -2338
  5. package/build/index.mjs.map +1 -1
  6. package/build/main.css +54 -65
  7. package/build/styles/main.css +54 -65
  8. package/build/styles/selectOption/SelectOption.css +42 -0
  9. package/build/styles/uploadInput/UploadInput.css +1 -18
  10. package/build/styles/uploadInput/uploadButton/UploadButton.css +0 -4
  11. package/build/styles/uploadInput/uploadItem/UploadItem.css +11 -43
  12. package/build/types/common/responsivePanel/ResponsivePanel.d.ts.map +1 -1
  13. package/build/types/index.d.ts +2 -0
  14. package/build/types/index.d.ts.map +1 -1
  15. package/build/types/inlineAlert/InlineAlert.d.ts +2 -2
  16. package/build/types/inlineAlert/InlineAlert.d.ts.map +1 -1
  17. package/build/types/selectOption/SelectOption.d.ts +21 -0
  18. package/build/types/selectOption/SelectOption.d.ts.map +1 -0
  19. package/build/types/selectOption/SelectOption.messages.d.ts +8 -0
  20. package/build/types/selectOption/SelectOption.messages.d.ts.map +1 -0
  21. package/build/types/selectOption/index.d.ts +3 -0
  22. package/build/types/selectOption/index.d.ts.map +1 -0
  23. package/package.json +1 -1
  24. package/src/common/responsivePanel/ResponsivePanel.tsx +2 -0
  25. package/src/i18n/en.json +1 -0
  26. package/src/index.ts +2 -0
  27. package/src/inlineAlert/InlineAlert.tsx +1 -1
  28. package/src/main.css +54 -65
  29. package/src/main.less +1 -0
  30. package/src/selectOption/SelectOption.css +42 -0
  31. package/src/selectOption/SelectOption.less +40 -0
  32. package/src/selectOption/SelectOption.messages.ts +8 -0
  33. package/src/selectOption/SelectOption.spec.tsx +101 -0
  34. package/src/selectOption/SelectOption.story.tsx +230 -0
  35. package/src/selectOption/SelectOption.tsx +157 -0
  36. package/src/selectOption/index.ts +2 -0
  37. package/src/ssr.spec.js +1 -0
  38. package/src/uploadInput/UploadInput.css +1 -18
  39. package/src/uploadInput/UploadInput.less +1 -17
  40. package/src/uploadInput/UploadInput.tests.story.tsx +2 -13
  41. package/src/uploadInput/uploadButton/UploadButton.css +0 -4
  42. package/src/uploadInput/uploadButton/UploadButton.less +0 -5
  43. package/src/uploadInput/uploadItem/UploadItem.css +11 -43
  44. package/src/uploadInput/uploadItem/UploadItem.less +17 -61
package/src/uploadInput/uploadItem/UploadItem.less CHANGED
@@ -1,71 +1,44 @@
1
1
  @import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/ring.less";
2
2
 
3
- // Be aware of touching styles related to :before/:after pseudo-elements in this file, delimiters between items build by using them
4
3
  .np-upload-item {
5
4
  border: 1px solid var(--color-interactive-secondary);
6
- position: relative;
7
5
 
8
- &:first-child ~ div:not(.np-upload-item__link):before,
9
- &:not(:first-child).np-upload-item__link .np-upload-item--link:before,
10
- &.np-upload-item__link:hover .np-upload-item--link:after {
6
+ &:first-child ~ div:before {
11
7
  display: block;
12
- position: absolute;
8
+ position: relative;
13
9
  height: 1px;
14
10
  background-color: var(--color-border-neutral);
15
11
  content: " ";
16
- left: var(--size-16);
17
- width: calc(100% - 2 * var(--size-16));
18
- }
19
-
20
- &:first-child ~ div:not(.np-upload-item__link):before,
21
- &:not(:first-child).np-upload-item__link .np-upload-item--link:before {
22
- top: 0;
23
- }
24
-
25
- &.np-upload-item__link:hover .np-upload-item--link:after {
26
- bottom: -1px;
12
+ margin: 0 var(--size-16);
27
13
  }
28
14
 
29
15
  &:first-child {
30
16
  & ~ div {
31
- border-top: 1px;
32
- }
33
- }
34
-
35
- &:not(:first-child) {
36
- .np-upload-item--link:hover {
37
- border-top-color: var(--color-border-neutral);
17
+ border-top: 0;
38
18
  }
39
19
  }
40
20
 
41
21
  &:not(:last-child) {
42
22
  border-bottom: 0;
43
23
  }
44
-
45
-
46
- &.np-upload-item__link:hover + .np-upload-item,
47
- &.np-upload-item__link:hover + .np-upload-button-container {
48
- &:before,
49
- .np-upload-item--link:before {
50
- display: none;
51
- }
52
- }
53
24
  }
54
25
 
55
- .np-upload-button-container {
56
- &:hover:before,
57
- &.droppable-dropping:before {
58
- left: 0 !important;
59
- width: 100% !important;
26
+ .np-upload-item.np-upload-item__link:hover,
27
+ .np-upload-button-container:hover {
28
+ &:before {
29
+ margin: 0 !important;
60
30
  }
61
-
62
- &:has(:focus-visible) {
63
- .ring();
64
- border-color: transparent;
65
- outline-offset: -3px;
31
+ & + div:before {
32
+ margin: 0 !important;
66
33
  }
67
34
  }
68
35
 
36
+ .np-upload-button-container:has(:focus-visible) {
37
+ .ring();
38
+ border-color: transparent;
39
+ outline-offset: -3px;
40
+ }
41
+
69
42
  .np-upload-item--single-file:focus-visible,
70
43
  .np-upload-item--link:focus-visible,
71
44
  .np-upload-button-container:has(:focus-visible) {
@@ -76,31 +49,15 @@
76
49
  a {
77
50
  flex: 1;
78
51
  text-decoration: none;
79
- border-top: 1px solid transparent;
80
52
  border-radius: inherit;
81
-
82
53
  &:focus-visible {
83
54
  outline-offset: -2px;
84
55
  }
85
56
 
86
- &:hover {
87
- &:before {
88
- display: none !important;
89
- }
90
-
91
- &:after {
92
- left: 0 !important;
93
- width: 100% !important;
94
- }
95
- }
96
-
97
57
  &:hover,
98
58
  &:active {
99
59
  text-decoration: none;
100
- .np-upload-button {
101
- background-color: var(--color-background-neutral);
102
- border-radius: inherit;
103
- }
60
+ background-color: var(--color-background-neutral);
104
61
  }
105
62
  }
106
63
  }
@@ -127,7 +84,6 @@
127
84
  border-radius: 50% !important;
128
85
  outline-offset: 0 !important;
129
86
  background-color: var(--color-background-neutral);
130
- border: none;
131
87
  color: var(--color-interactive-primary);
132
88
  right: var(--size-16);
133
89
  top: var(--size-16);