@transferwise/components 0.0.0-experimental-5ac3a46 → 0.0.0-experimental-215a547

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 (34) hide show
  1. package/build/index.js +56 -39
  2. package/build/index.js.map +1 -1
  3. package/build/index.mjs +57 -40
  4. package/build/index.mjs.map +1 -1
  5. package/build/main.css +108 -121
  6. package/build/styles/main.css +108 -121
  7. package/build/styles/uploadInput/UploadInput.css +27 -19
  8. package/build/styles/uploadInput/uploadButton/UploadButton.css +38 -24
  9. package/build/styles/uploadInput/uploadItem/UploadItem.css +46 -81
  10. package/build/types/uploadInput/UploadInput.d.ts.map +1 -1
  11. package/build/types/uploadInput/types.d.ts +1 -9
  12. package/build/types/uploadInput/types.d.ts.map +1 -1
  13. package/build/types/uploadInput/uploadButton/UploadButton.d.ts +5 -1
  14. package/build/types/uploadInput/uploadButton/UploadButton.d.ts.map +1 -1
  15. package/build/types/uploadInput/uploadItem/UploadItem.d.ts.map +1 -1
  16. package/package.json +18 -19
  17. package/src/chips/Chips.story.tsx +5 -3
  18. package/src/dateLookup/DateLookup.tests.story.tsx +4 -2
  19. package/src/main.css +108 -121
  20. package/src/moneyInput/MoneyInput.story.tsx +1 -3
  21. package/src/phoneNumberInput/PhoneNumberInput.story.tsx +1 -0
  22. package/src/uploadInput/UploadInput.css +27 -19
  23. package/src/uploadInput/UploadInput.less +23 -20
  24. package/src/uploadInput/UploadInput.story.tsx +27 -75
  25. package/src/uploadInput/UploadInput.tsx +4 -1
  26. package/src/uploadInput/types.ts +1 -11
  27. package/src/uploadInput/uploadButton/UploadButton.css +38 -24
  28. package/src/uploadInput/uploadButton/UploadButton.less +40 -27
  29. package/src/uploadInput/uploadButton/UploadButton.spec.tsx +1 -0
  30. package/src/uploadInput/uploadButton/UploadButton.tsx +37 -12
  31. package/src/uploadInput/uploadItem/UploadItem.css +46 -81
  32. package/src/uploadInput/uploadItem/UploadItem.less +40 -75
  33. package/src/uploadInput/uploadItem/UploadItem.tsx +25 -30
  34. package/src/uploadInput/uploadItem/UploadItemBody.tsx +1 -1
package/build/styles/uploadInput/uploadButton/UploadButton.css CHANGED
@@ -1,35 +1,49 @@
1
- .np-upload-button-container {
2
- border-style: solid;
1
+ .np-upload-button {
2
+ width: 100%;
3
+ border: 0 !important;
4
+ padding: 12px 16px;
5
+ padding: var(--size-12) var(--size-16);
6
+ }
7
+ .np-upload-button.np-upload-accent {
8
+ color: #00a2dd;
9
+ color: var(--color-interactive-accent);
10
+ }
11
+ label.np-upload-button:not(.disabled):hover,
12
+ label.np-upload-button:not(.disabled):focus-visible,
13
+ label.np-upload-button:not(.disabled):active {
14
+ background-color: rgba(134,167,189,0.10196);
15
+ background-color: var(--color-background-neutral);
16
+ }
17
+ .np-theme-personal label.np-upload-button:not(.disabled):hover,
18
+ .np-theme-personal label.np-upload-button:not(.disabled):focus-visible,
19
+ .np-theme-personal label.np-upload-button:not(.disabled):active {
20
+ background-color: var(--color-background-screen-hover);
21
+ }
22
+ .np-theme-personal .disabled label.np-upload-button:not(.disabled):hover,
23
+ .np-theme-personal .disabled label.np-upload-button:not(.disabled):focus-visible,
24
+ .np-theme-personal .disabled label.np-upload-button:not(.disabled):active {
25
+ background-color: transparent;
26
+ }
27
+ .np-upload-button .np-upload-icon {
28
+ display: flex;
29
+ align-items: center;
30
+ }
31
+ .np-upload-button-container.droppable {
32
+ border: 0;
3
33
  }
4
34
  .np-upload-button-container .droppable-card-content {
5
35
  display: flex;
6
36
  }
7
- .np-upload-button-container.droppable-dropping {
8
- border-color: #c9cbce !important;
9
- border-color: var(--color-interactive-secondary) !important;
37
+ .np-theme-personal .np-upload-button-container .droppable-card-content {
38
+ border-radius: calc(10px - 1px);
39
+ border-radius: calc(var(--radius-small) - 1px);
10
40
  }
11
41
  .np-upload-button-container input[type="file"] {
12
42
  opacity: 0;
13
43
  z-index: -1;
14
44
  position: absolute;
15
45
  }
16
- .np-upload-button-container .np-upload-button {
17
- border: none;
18
- }
19
- .np-upload-button {
20
- width: 100%;
21
- padding: 16px;
22
- padding: var(--padding-small);
23
- border-radius: 0;
24
- }
25
- label.np-upload-button:not(.disabled):hover,
26
- label.np-upload-button:not(.disabled):active {
27
- background-color: var(--color-background-screen-hover);
28
- }
29
- .disabled label.np-upload-button:not(.disabled):hover,
30
- .disabled label.np-upload-button:not(.disabled):active {
31
- background-color: transparent;
32
- }
33
- .np-upload-button .media {
34
- align-items: flex-start;
46
+ .np-upload-button-container input[type="file"]:focus-visible + label {
47
+ background-color: rgba(134,167,189,0.10196);
48
+ background-color: var(--color-background-neutral);
35
49
  }
package/build/styles/uploadInput/uploadItem/UploadItem.css CHANGED
@@ -1,109 +1,74 @@
1
- .np-upload-item {
2
- border: 1px solid #c9cbce;
3
- border: 1px solid var(--color-interactive-secondary);
4
- }
5
- .np-upload-item:first-child ~ div:before {
1
+ .np-upload-item:not(:last-child)::after {
6
2
  display: block;
7
3
  position: relative;
8
- height: 1px;
9
- background-color: rgba(0,0,0,0.10196);
10
- background-color: var(--color-border-neutral);
4
+ border-bottom: 1px solid rgba(0,0,0,0.10196);
5
+ border-bottom: 1px solid var(--color-border-neutral);
11
6
  content: " ";
12
7
  margin: 0 16px;
13
8
  margin: 0 var(--size-16);
14
9
  }
15
- .np-upload-item:first-child ~ div {
16
- border-top: 0;
17
- }
18
- .np-upload-item:not(:last-child) {
19
- border-bottom: 0;
20
- }
21
- .np-upload-item.np-upload-item__link:hover:before,
22
- .np-upload-button-container:hover:before {
23
- margin: 0 !important;
24
- }
25
- .np-upload-item.np-upload-item__link:hover + div:before,
26
- .np-upload-button-container:hover + div:before {
27
- margin: 0 !important;
28
- }
29
- .np-upload-button-container:has(:focus-visible) {
30
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
31
- outline-offset: var(--ring-outline-offset);
32
- border-color: transparent;
33
- outline-offset: -3px;
10
+ .np-theme-personal .np-upload-item:first-child a:hover,
11
+ .np-theme-personal .np-upload-item:first-child a:focus-visible,
12
+ .np-theme-personal .np-upload-item:first-child a:active {
13
+ border-top-left-radius: calc(10px - 1px);
14
+ border-top-left-radius: calc(var(--radius-small) - 1px);
34
15
  }
35
- .np-upload-item--single-file:focus-visible,
36
- .np-upload-item--link:focus-visible,
37
- .np-upload-button-container:has(:focus-visible) {
38
- outline-width: 3px;
16
+ .np-theme-personal .np-upload-item:first-child a:hover ~ .np-upload-item__remove-button,
17
+ .np-theme-personal .np-upload-item:first-child a:focus-visible ~ .np-upload-item__remove-button,
18
+ .np-theme-personal .np-upload-item:first-child a:active ~ .np-upload-item__remove-button {
19
+ border-top-right-radius: calc(10px - 1px);
20
+ border-top-right-radius: calc(var(--radius-small) - 1px);
39
21
  }
40
22
  .np-upload-item__link a {
41
23
  flex: 1;
42
24
  -webkit-text-decoration: none;
43
25
  text-decoration: none;
44
- border-radius: inherit;
26
+ outline: none;
27
+ border-top-right-radius: 0;
28
+ border-bottom-right-radius: 0;
45
29
  }
46
- .np-upload-item__link a:focus-visible {
47
- outline-offset: -2px;
30
+ .np-theme-personal .np-upload-item__link a {
31
+ border-radius: 0;
32
+ border-radius: initial;
33
+ }
34
+ .np-upload-item__link a.np-upload-item--single-file {
35
+ border-bottom-left-radius: calc(10px - 1px);
36
+ border-bottom-left-radius: calc(var(--radius-small) - 1px);
48
37
  }
49
38
  .np-upload-item__link a:hover,
39
+ .np-upload-item__link a:focus-visible,
50
40
  .np-upload-item__link a:active {
51
41
  -webkit-text-decoration: none;
52
42
  text-decoration: none;
53
43
  background-color: rgba(134,167,189,0.10196);
54
44
  background-color: var(--color-background-neutral);
55
45
  }
46
+ .np-upload-item__link a:hover ~ .np-upload-item__remove-button,
47
+ .np-upload-item__link a:focus-visible ~ .np-upload-item__remove-button,
48
+ .np-upload-item__link a:active ~ .np-upload-item__remove-button {
49
+ background-color: rgba(134,167,189,0.10196);
50
+ background-color: var(--color-background-neutral);
51
+ }
52
+ .np-upload-item__link .np-upload-item__remove-button.np-upload-item--single-file {
53
+ border-bottom-right-radius: calc(10px - 1px);
54
+ border-bottom-right-radius: calc(var(--radius-small) - 1px);
55
+ }
56
56
  .np-upload-item__body {
57
57
  display: flex;
58
58
  align-items: center;
59
59
  justify-content: space-between;
60
- position: relative;
61
- border-radius: inherit;
62
60
  }
63
61
  .np-upload-item__remove-button {
64
- display: flex;
65
- align-items: center;
66
- justify-content: center;
67
- align-self: flex-start;
68
- position: absolute;
69
- height: 24px;
70
- height: var(--size-24);
71
- min-height: 0;
72
- width: 24px;
73
- width: var(--size-24);
74
- padding: 0;
75
- border-radius: 50% !important;
76
- outline-offset: 0 !important;
77
- background-color: rgba(134,167,189,0.10196);
78
- background-color: var(--color-background-neutral);
79
- color: var(--color-interactive-primary);
80
- right: 16px;
81
- right: var(--size-16);
82
- top: 16px;
83
- top: var(--size-16);
84
- transition: color, background-color 0.15s ease-in-out;
85
- }
86
- @media (max-width: 320px) {
87
- .np-upload-item__remove-button {
88
- top: 16px;
89
- top: var(--size-16);
90
- right: 16px;
91
- right: var(--size-16);
92
- height: 48px;
93
- height: var(--size-48);
94
- width: 48px;
95
- width: var(--size-48);
96
- }
97
- }
98
- .np-upload-item__remove-button:hover {
99
- background-color: var(--color-sentiment-negative);
100
- color: var(--color-contrast-overlay) !important;
101
- }
102
- .np-upload-item__remove-button:before {
103
- display: block;
104
- width: 44px;
105
- height: 44px;
106
- content: '';
107
- border-radius: 50%;
108
- position: absolute;
62
+ flex-shrink: 0;
63
+ align-self: stretch;
64
+ padding: 12px 16px;
65
+ padding: var(--size-12) var(--size-16);
66
+ color: #c9cbce;
67
+ color: var(--color-interactive-secondary);
68
+ background: transparent;
69
+ }
70
+ .np-upload-item__remove-button:hover,
71
+ .np-upload-item__remove-button:focus {
72
+ color: #d03238 !important;
73
+ color: var(--color-interactive-negative-hover) !important;
109
74
  }
package/build/types/uploadInput/UploadInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"UploadInput.d.ts","sourceRoot":"","sources":["../../../src/uploadInput/UploadInput.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,WAAW,EAAiC,MAAM,WAAW,CAAC;AAMvE,OAAO,EAAE,YAAY,EAAe,cAAc,EAAE,MAAM,SAAS,CAAC;AACpE,OAAqB,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAE9E,OAAmB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAEtE,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,YAAY,EAAE,CAAC;IAEhC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IACH,YAAY,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,OAAO,CAAC,cAAc,CAAC,CAAC;IAE9D;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IAErD;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAEjD;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAEhD;;OAEG;IACH,aAAa,CAAC,EAAE;QACd;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;QAEf;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAEvB;;WAEG;QACH,WAAW,CAAC,EAAE,MAAM,CAAC;QAErB;;WAEG;QACH,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IAEF;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC,GAAG,IAAI,CACN,iBAAiB,EACjB,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,aAAa,GAAG,IAAI,GAAG,mBAAmB,CACjG,GACC,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC,GACnC,WAAW,CAAC;AAQd,QAAA,MAAM,WAAW,uQAoBd,gBAAgB,gCAwPlB,CAAC;AAEF,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"UploadInput.d.ts","sourceRoot":"","sources":["../../../src/uploadInput/UploadInput.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,WAAW,EAAiC,MAAM,WAAW,CAAC;AAMvE,OAAO,EAAE,YAAY,EAAe,cAAc,EAAE,MAAM,SAAS,CAAC;AACpE,OAAqB,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAE9E,OAAmB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAEtE,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,YAAY,EAAE,CAAC;IAEhC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IACH,YAAY,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,OAAO,CAAC,cAAc,CAAC,CAAC;IAE9D;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IAErD;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAEjD;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAEhD;;OAEG;IACH,aAAa,CAAC,EAAE;QACd;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;QAEf;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAEvB;;WAEG;QACH,WAAW,CAAC,EAAE,MAAM,CAAC;QAErB;;WAEG;QACH,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IAEF;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC,GAAG,IAAI,CACN,iBAAiB,EACjB,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,aAAa,GAAG,IAAI,GAAG,mBAAmB,CACjG,GACC,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC,GACnC,WAAW,CAAC;AAQd,QAAA,MAAM,WAAW,uQAoBd,gBAAgB,gCA0PlB,CAAC;AAEF,eAAe,WAAW,CAAC"}
package/build/types/uploadInput/types.d.ts CHANGED
@@ -13,13 +13,9 @@ export type UploadResponse = {
13
13
  */
14
14
  url?: string;
15
15
  /**
16
- * Optionally sets a translated error message when file was rejected
16
+ * Optionally set a translated error message when file was rejected
17
17
  */
18
18
  error?: UploadError;
19
- /**
20
- * Optionally sets translated error messages when a file gets rejected
21
- */
22
- errors?: UploadError[];
23
19
  [key: string]: any;
24
20
  };
25
21
  export type UploadedFile = {
@@ -39,10 +35,6 @@ export type UploadedFile = {
39
35
  * Any API errors. The message should be localized.
40
36
  */
41
37
  error?: UploadError;
42
- /**
43
- * Any API errors array. The messages should be localized.
44
- */
45
- errors?: UploadError[];
46
38
  /**
47
39
  * Optional. An external URL where the file can be opened from.
48
40
  */
package/build/types/uploadInput/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/uploadInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAEnC,MAAM,MAAM,WAAW,GACnB;IACE,OAAO,EAAE,MAAM,CAAC;IAChB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,GACD,MAAM,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IAEpB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB;;OAEG;IACH,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;IAEvB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/uploadInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAEnC,MAAM,MAAM,WAAW,GACnB;IACE,OAAO,EAAE,MAAM,CAAC;IAChB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,GACD,MAAM,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IAEpB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB;;OAEG;IACH,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IAEpB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAC"}
package/build/types/uploadInput/uploadButton/UploadButton.d.ts CHANGED
@@ -40,11 +40,15 @@ export type UploadButtonProps = {
40
40
  * Title for the upload button
41
41
  */
42
42
  uploadButtonTitle?: string;
43
+ /**
44
+ * Are there any uploaded items on a multiple-file upload? Used for calculating border radiuses
45
+ */
46
+ multipleFileInputWithFilesAdded: boolean;
43
47
  };
44
48
  export declare enum TEST_IDS {
45
49
  uploadInput = "uploadInput",
46
50
  mediaBody = "mediaBody"
47
51
  }
48
- declare const UploadButton: ({ disabled, multiple, description, fileTypes, sizeLimit, maxFiles, onChange, id, uploadButtonTitle, }: UploadButtonProps) => import("react").JSX.Element;
52
+ declare const UploadButton: ({ disabled, multiple, description, fileTypes, sizeLimit, maxFiles, onChange, id, uploadButtonTitle, multipleFileInputWithFilesAdded, }: UploadButtonProps) => import("react").JSX.Element;
49
53
  export default UploadButton;
50
54
  //# sourceMappingURL=UploadButton.d.ts.map
package/build/types/uploadInput/uploadButton/UploadButton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"UploadButton.d.ts","sourceRoot":"","sources":["../../../../src/uploadInput/uploadButton/UploadButton.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,QAAQ,EAAc,MAAM,cAAc,CAAC;AAMpD,KAAK,gBAAgB,GAAG,MAAM,GAAG,SAAS,MAAM,EAAE,GAAG,SAAS,QAAQ,EAAE,CAAC;AACzE,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAE7B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAEjC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IAEpC;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,oBAAY,QAAQ;IAClB,WAAW,gBAAgB;IAC3B,SAAS,cAAc;CACxB;AAOD,QAAA,MAAM,YAAY,0GAUf,iBAAiB,gCA6JnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"UploadButton.d.ts","sourceRoot":"","sources":["../../../../src/uploadInput/uploadButton/UploadButton.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,QAAQ,EAAc,MAAM,cAAc,CAAC;AAOpD,KAAK,gBAAgB,GAAG,MAAM,GAAG,SAAS,MAAM,EAAE,GAAG,SAAS,QAAQ,EAAE,CAAC;AACzE,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAE7B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAEjC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IAEpC;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,+BAA+B,EAAE,OAAO,CAAC;CAC1C,CAAC;AAEF,oBAAY,QAAQ;IAClB,WAAW,gBAAgB;IAC3B,SAAS,cAAc;CACxB;AAOD,QAAA,MAAM,YAAY,2IAWf,iBAAiB,gCA8KnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
package/build/types/uploadInput/uploadItem/UploadItem.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"UploadItem.d.ts","sourceRoot":"","sources":["../../../../src/uploadInput/uploadItem/UploadItem.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,YAAY,EAAe,MAAM,UAAU,CAAC;AAKrD,MAAM,MAAM,eAAe,GAAG,GAAG,CAAC,mBAAmB,GAAG;IACtD,IAAI,EAAE,YAAY,CAAC;IACnB;;OAEG;IACH,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IAErB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,oBAAY,QAAQ;IAClB,UAAU,eAAe;IACzB,SAAS,cAAc;CACxB;AAED,QAAA,MAAM,UAAU,iEAMb,eAAe,gCAyHjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"UploadItem.d.ts","sourceRoot":"","sources":["../../../../src/uploadInput/uploadItem/UploadItem.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAKxC,MAAM,MAAM,eAAe,GAAG,GAAG,CAAC,mBAAmB,GAAG;IACtD,IAAI,EAAE,YAAY,CAAC;IACnB;;OAEG;IACH,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IAErB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,oBAAY,QAAQ;IAClB,UAAU,eAAe;IACzB,SAAS,cAAc;CACxB;AAED,QAAA,MAAM,UAAU,iEAMb,eAAe,gCAmHjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-5ac3a46",
3
+ "version": "0.0.0-experimental-215a547",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -50,22 +50,21 @@
50
50
  "@rollup/plugin-node-resolve": "^15.2.3",
51
51
  "@rollup/plugin-typescript": "^11.1.6",
52
52
  "@rollup/plugin-url": "^8.0.2",
53
- "@storybook/addon-a11y": "^7.6.19",
54
- "@storybook/addon-actions": "^7.6.19",
55
- "@storybook/addon-essentials": "^7.6.19",
56
- "@storybook/addon-interactions": "^7.6.19",
57
- "@storybook/addon-knobs": "^7.0.2",
58
- "@storybook/addon-viewport": "^7.6.19",
59
- "@storybook/addons": "^7.6.17",
60
- "@storybook/api": "^7.6.17",
61
- "@storybook/components": "^7.6.19",
62
- "@storybook/core-events": "^7.6.19",
63
- "@storybook/manager-api": "^7.6.19",
64
- "@storybook/react": "^7.6.19",
65
- "@storybook/react-webpack5": "^7.6.19",
66
- "@storybook/test": "^7.6.19",
67
- "@storybook/theming": "^7.6.19",
68
- "@storybook/types": "^7.6.19",
53
+ "@storybook/addon-a11y": "^8.1.10",
54
+ "@storybook/addon-actions": "^8.1.10",
55
+ "@storybook/addon-essentials": "^8.1.10",
56
+ "@storybook/addon-interactions": "^8.1.10",
57
+ "@storybook/addon-knobs": "^8.0.1",
58
+ "@storybook/addon-viewport": "^8.1.10",
59
+ "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
60
+ "@storybook/components": "^8.1.10",
61
+ "@storybook/core-events": "^8.1.10",
62
+ "@storybook/manager-api": "^8.1.10",
63
+ "@storybook/react": "^8.1.10",
64
+ "@storybook/react-webpack5": "^8.1.10",
65
+ "@storybook/test": "^8.1.10",
66
+ "@storybook/theming": "^8.1.10",
67
+ "@storybook/types": "^8.1.10",
69
68
  "@testing-library/dom": "^8.20.1",
70
69
  "@testing-library/jest-dom": "^5.17.0",
71
70
  "@testing-library/react": "^13.4.0",
@@ -93,7 +92,7 @@
93
92
  "lodash.times": "^4.3.2",
94
93
  "react-intl": "^6.6.6",
95
94
  "rollup": "^4.17.2",
96
- "storybook": "^7.6.19",
95
+ "storybook": "^8.1.10",
97
96
  "@transferwise/less-config": "3.1.0",
98
97
  "@wise/components-theming": "1.3.0",
99
98
  "@transferwise/neptune-css": "14.10.0"
@@ -137,7 +136,7 @@
137
136
  "dev:less:watch": "gulp watchLess --dest=src",
138
137
  "dev:translations": "pnpm build:crowdin-source-file",
139
138
  "storybook:dev": "storybook dev -p 3001",
140
- "storybook:build": "storybook build --webpack-stats-json",
139
+ "storybook:build": "storybook build --stats-json",
141
140
  "build:css": "gulp compileLess --dest=src",
142
141
  "build": "npm-run-all build:*",
143
142
  "build:clean": "rm -rf lib build",
package/src/chips/Chips.story.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { Story, Meta } from '@storybook/react';
1
+ import { StoryFn, Meta } from '@storybook/react';
2
2
  import { useState } from 'react';
3
3
 
4
4
  import Chips, { ChipsProps, ChipValue } from './Chips';
@@ -10,7 +10,9 @@ const meta: Meta<typeof Chips> = {
10
10
  };
11
11
  export default meta;
12
12
 
13
- const FilterTemplate: Story<ChipsProps> = (args: ChipsProps) => {
13
+ type Story = StoryFn<ChipsProps>;
14
+
15
+ const FilterTemplate: Story = (args: ChipsProps) => {
14
16
  const [selected, setSelected] = useState<readonly ChipValue[]>(
15
17
  args.selected == null || Array.isArray(args.selected) ? args.selected : [args.selected],
16
18
  );
@@ -31,7 +33,7 @@ const FilterTemplate: Story<ChipsProps> = (args: ChipsProps) => {
31
33
  );
32
34
  };
33
35
 
34
- const ChoiceTemplate: Story<ChipsProps> = (args: ChipsProps) => {
36
+ const ChoiceTemplate: Story = (args: ChipsProps) => {
35
37
  const [selected, setSelected] = useState<ChipValue>(args.selected as ChipValue);
36
38
  return (
37
39
  <Chips
package/src/dateLookup/DateLookup.tests.story.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { Story } from '@storybook/react';
1
+ import { StoryFn } from '@storybook/react';
2
2
  import { expect, userEvent, within } from '@storybook/test';
3
3
  import { useState } from 'react';
4
4
 
@@ -9,7 +9,9 @@ export default {
9
9
  title: 'Forms/DateLookup/Tests',
10
10
  };
11
11
 
12
- const Template: Story<typeof DateLookup> = () => {
12
+ type Story = StoryFn<typeof DateLookup>;
13
+
14
+ const Template: Story = () => {
13
15
  const [value, setValue] = useState<Date | null>(new Date(1987, 0, 10, 12, 0, 0));
14
16
 
15
17
  return (