@transferwise/components 46.81.0 → 46.82.0
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.
- package/build/i18n/en.json +5 -0
- package/build/i18n/en.json.js +5 -0
- package/build/i18n/en.json.js.map +1 -1
- package/build/i18n/en.json.mjs +5 -0
- package/build/i18n/en.json.mjs.map +1 -1
- package/build/main.css +274 -0
- package/build/money/Money.js +5 -2
- package/build/money/Money.js.map +1 -1
- package/build/money/Money.mjs +5 -2
- package/build/money/Money.mjs.map +1 -1
- package/build/styles/main.css +274 -0
- package/build/styles/table/Table.css +274 -0
- package/build/types/money/Money.d.ts +2 -1
- package/build/types/money/Money.d.ts.map +1 -1
- package/build/types/table/Table.d.ts +23 -0
- package/build/types/table/Table.d.ts.map +1 -0
- package/build/types/table/Table.messages.d.ts +24 -0
- package/build/types/table/Table.messages.d.ts.map +1 -0
- package/build/types/table/TableCell.d.ts +40 -0
- package/build/types/table/TableCell.d.ts.map +1 -0
- package/build/types/table/TableHeader.d.ts +13 -0
- package/build/types/table/TableHeader.d.ts.map +1 -0
- package/build/types/table/TableRow.d.ts +17 -0
- package/build/types/table/TableRow.d.ts.map +1 -0
- package/build/types/table/TableStatusText.d.ts +10 -0
- package/build/types/table/TableStatusText.d.ts.map +1 -0
- package/build/types/table/index.d.ts +6 -0
- package/build/types/table/index.d.ts.map +1 -0
- package/build/types/test-utils/index.d.ts +10 -0
- package/build/types/test-utils/index.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/i18n/en.json +5 -0
- package/src/main.css +274 -0
- package/src/main.less +1 -0
- package/src/money/Money.tsx +9 -2
- package/src/table/Table.css +274 -0
- package/src/table/Table.less +334 -0
- package/src/table/Table.messages.ts +24 -0
- package/src/table/Table.spec.tsx +82 -0
- package/src/table/Table.story.tsx +356 -0
- package/src/table/Table.tsx +167 -0
- package/src/table/TableCell.spec.tsx +298 -0
- package/src/table/TableCell.tsx +149 -0
- package/src/table/TableHeader.spec.tsx +50 -0
- package/src/table/TableHeader.tsx +74 -0
- package/src/table/TableRow.spec.tsx +112 -0
- package/src/table/TableRow.tsx +70 -0
- package/src/table/TableStatusText.spec.tsx +53 -0
- package/src/table/TableStatusText.tsx +40 -0
- package/src/table/index.ts +11 -0
|
@@ -0,0 +1,274 @@
|
|
|
1
|
+
.np-table {
|
|
2
|
+
width: 100%;
|
|
3
|
+
background-color: transparent;
|
|
4
|
+
}
|
|
5
|
+
.np-table-outer-container {
|
|
6
|
+
border-radius: 16px;
|
|
7
|
+
border-radius: var(--radius-medium);
|
|
8
|
+
}
|
|
9
|
+
.np-table-outer-container:focus {
|
|
10
|
+
outline: none;
|
|
11
|
+
}
|
|
12
|
+
.np-table-outer-container:focus-visible {
|
|
13
|
+
outline: var(--ring-outline-color) solid var(--ring-outline-width);
|
|
14
|
+
outline-offset: var(--ring-outline-offset);
|
|
15
|
+
}
|
|
16
|
+
.np-table-outer-container:focus-visible {
|
|
17
|
+
outline-offset: 0;
|
|
18
|
+
}
|
|
19
|
+
.np-table-outer-container--center {
|
|
20
|
+
margin-right: auto;
|
|
21
|
+
margin-left: auto;
|
|
22
|
+
}
|
|
23
|
+
@media (max-width: 767px) {
|
|
24
|
+
.np-table-outer-container--center {
|
|
25
|
+
width: 100%;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
.np-table-outer-container--full-width {
|
|
29
|
+
width: 100%;
|
|
30
|
+
}
|
|
31
|
+
.np-table-container {
|
|
32
|
+
padding: 8px;
|
|
33
|
+
padding: var(--size-8);
|
|
34
|
+
background-color: rgba(134,167,189,0.10196);
|
|
35
|
+
background-color: var(--color-background-neutral);
|
|
36
|
+
border-radius: inherit;
|
|
37
|
+
}
|
|
38
|
+
.np-table-container--loading .np-table-inner-container {
|
|
39
|
+
background-image: none;
|
|
40
|
+
}
|
|
41
|
+
.np-table-inner-container {
|
|
42
|
+
background-image: linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));
|
|
43
|
+
background-position: left center, right center, left center, right center;
|
|
44
|
+
background-repeat: no-repeat;
|
|
45
|
+
background-color: var(--color-contrast-overlay);
|
|
46
|
+
background-size: 15px 100%, 15px 100%, 15px 100%, 15px 100%;
|
|
47
|
+
background-attachment: local, local, scroll, scroll;
|
|
48
|
+
overflow-x: auto;
|
|
49
|
+
border-radius: 10px;
|
|
50
|
+
}
|
|
51
|
+
.np-theme-personal--dark .np-table-inner-container {
|
|
52
|
+
background-image: linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, #000000, rgba(0, 0, 0, 0)), linear-gradient(to left, #000000, rgba(0, 0, 0, 0));
|
|
53
|
+
}
|
|
54
|
+
.np-table-row:last-child .np-table-cell:first-child {
|
|
55
|
+
border-bottom-left-radius: 10px;
|
|
56
|
+
}
|
|
57
|
+
.np-table-row:last-child .np-table-cell:last-child {
|
|
58
|
+
border-bottom-right-radius: 10px;
|
|
59
|
+
}
|
|
60
|
+
.np-table-row:focus {
|
|
61
|
+
outline: none;
|
|
62
|
+
}
|
|
63
|
+
.np-table-row:focus-visible {
|
|
64
|
+
outline: var(--ring-outline-color) solid var(--ring-outline-width);
|
|
65
|
+
outline-offset: var(--ring-outline-offset);
|
|
66
|
+
}
|
|
67
|
+
.np-table-row:focus-visible {
|
|
68
|
+
outline-offset: -2px;
|
|
69
|
+
border-radius: 6px;
|
|
70
|
+
}
|
|
71
|
+
.np-table-row--clickable .np-table-cell {
|
|
72
|
+
position: relative;
|
|
73
|
+
}
|
|
74
|
+
.np-table-row--clickable .np-table-cell:before {
|
|
75
|
+
display: none;
|
|
76
|
+
content: "";
|
|
77
|
+
position: absolute;
|
|
78
|
+
height: 100%;
|
|
79
|
+
width: 100%;
|
|
80
|
+
top: 0;
|
|
81
|
+
left: 0;
|
|
82
|
+
background-color: var(--color-background-screen-hover);
|
|
83
|
+
}
|
|
84
|
+
.np-table-row--clickable .np-table-cell:first-child:before,
|
|
85
|
+
.np-table-row--clickable .np-table-cell:last-child:before {
|
|
86
|
+
width: calc(100% - 8px);
|
|
87
|
+
width: calc(100% - var(--size-8));
|
|
88
|
+
}
|
|
89
|
+
.np-table-row--clickable .np-table-cell:first-child:before {
|
|
90
|
+
left: 8px;
|
|
91
|
+
left: var(--size-8);
|
|
92
|
+
border-top-left-radius: 6px;
|
|
93
|
+
border-bottom-left-radius: 6px;
|
|
94
|
+
}
|
|
95
|
+
.np-table-row--clickable .np-table-cell:last-child:before {
|
|
96
|
+
border-top-right-radius: 6px;
|
|
97
|
+
border-bottom-right-radius: 6px;
|
|
98
|
+
}
|
|
99
|
+
.np-table-row--clickable:hover .np-table-cell:before {
|
|
100
|
+
display: block;
|
|
101
|
+
}
|
|
102
|
+
.np-table-row--clickable:hover:focus-visible .np-table-cell:first-child:before,
|
|
103
|
+
.np-table-row--clickable:hover:focus-visible .np-table-cell:last-child:before {
|
|
104
|
+
width: 100%;
|
|
105
|
+
}
|
|
106
|
+
.np-table-row--clickable:hover:focus-visible .np-table-cell:first-child:before {
|
|
107
|
+
left: 0;
|
|
108
|
+
}
|
|
109
|
+
.np-table-row--cosmetic .np-table-cell {
|
|
110
|
+
height: 8px;
|
|
111
|
+
height: var(--size-8);
|
|
112
|
+
padding: 0;
|
|
113
|
+
}
|
|
114
|
+
.np-table-header,
|
|
115
|
+
.np-table-cell {
|
|
116
|
+
padding: 0;
|
|
117
|
+
}
|
|
118
|
+
.np-table-header:first-child,
|
|
119
|
+
.np-table-cell:first-child {
|
|
120
|
+
padding-left: 16px;
|
|
121
|
+
padding-left: var(--size-16);
|
|
122
|
+
}
|
|
123
|
+
.np-table-header:first-child .np-table-header-content,
|
|
124
|
+
.np-table-cell:first-child .np-table-header-content,
|
|
125
|
+
.np-table-header:first-child .np-table-cell-content,
|
|
126
|
+
.np-table-cell:first-child .np-table-cell-content {
|
|
127
|
+
padding-left: 0;
|
|
128
|
+
}
|
|
129
|
+
.np-table-header:last-child,
|
|
130
|
+
.np-table-cell:last-child {
|
|
131
|
+
padding-right: 16px;
|
|
132
|
+
padding-right: var(--size-16);
|
|
133
|
+
}
|
|
134
|
+
.np-table-header:last-child .np-table-header-content,
|
|
135
|
+
.np-table-cell:last-child .np-table-header-content,
|
|
136
|
+
.np-table-header:last-child .np-table-cell-content,
|
|
137
|
+
.np-table-cell:last-child .np-table-cell-content {
|
|
138
|
+
padding-right: 0;
|
|
139
|
+
}
|
|
140
|
+
.np-table-header.np-table-header--right > .np-text-body-default,
|
|
141
|
+
.np-table-cell.np-table-cell--right > .np-text-body-default {
|
|
142
|
+
text-align: right;
|
|
143
|
+
}
|
|
144
|
+
.np-table-header.np-table-header--right + .np-table-header:not(.np-table-header--right),
|
|
145
|
+
.np-table-cell.np-table-cell--right + .np-table-cell:not(.np-table-cell--right) {
|
|
146
|
+
padding-left: calc(8px + 12px);
|
|
147
|
+
padding-left: calc(var(--size-8) + var(--size-12));
|
|
148
|
+
}
|
|
149
|
+
.np-table-header.np-table-header--right .np-table-header-content,
|
|
150
|
+
.np-table-cell.np-table-cell--right .np-table-content {
|
|
151
|
+
justify-content: end;
|
|
152
|
+
}
|
|
153
|
+
.np-table-header-content,
|
|
154
|
+
.np-table-content {
|
|
155
|
+
display: flex;
|
|
156
|
+
align-items: center;
|
|
157
|
+
justify-content: start;
|
|
158
|
+
}
|
|
159
|
+
.np-table-header {
|
|
160
|
+
min-width: 160px;
|
|
161
|
+
padding-right: 8px;
|
|
162
|
+
padding-right: var(--size-8);
|
|
163
|
+
padding-bottom: 8px;
|
|
164
|
+
padding-bottom: var(--size-8);
|
|
165
|
+
padding-left: 8px;
|
|
166
|
+
padding-left: var(--size-8);
|
|
167
|
+
background-color: rgba(134,167,189,0.10196);
|
|
168
|
+
background-color: var(--color-background-neutral);
|
|
169
|
+
color: var(--color-interactive-primary);
|
|
170
|
+
}
|
|
171
|
+
.np-table-header-content {
|
|
172
|
+
padding-top: 5px;
|
|
173
|
+
padding-bottom: 5px;
|
|
174
|
+
white-space: nowrap;
|
|
175
|
+
line-height: 1.375rem;
|
|
176
|
+
line-height: var(--line-height-22);
|
|
177
|
+
letter-spacing: 0.0125em;
|
|
178
|
+
letter-spacing: var(--letter-spacing-sm);
|
|
179
|
+
}
|
|
180
|
+
.np-table-header--error {
|
|
181
|
+
color: var(--color-sentiment-negative);
|
|
182
|
+
}
|
|
183
|
+
.np-table-header--action {
|
|
184
|
+
min-width: 0;
|
|
185
|
+
padding: 0;
|
|
186
|
+
}
|
|
187
|
+
.np-table-cell {
|
|
188
|
+
padding: 16px 8px;
|
|
189
|
+
padding: var(--size-16) var(--size-8);
|
|
190
|
+
position: relative;
|
|
191
|
+
}
|
|
192
|
+
.np-table-cell--cosmetic {
|
|
193
|
+
padding: 0;
|
|
194
|
+
}
|
|
195
|
+
.np-table-cell--primary {
|
|
196
|
+
min-width: 200px;
|
|
197
|
+
}
|
|
198
|
+
.np-table-cell--currency .np-text-body-default {
|
|
199
|
+
white-space: nowrap;
|
|
200
|
+
}
|
|
201
|
+
.np-table-cell .tw-chevron {
|
|
202
|
+
margin-left: 8px;
|
|
203
|
+
margin-left: var(--size-8);
|
|
204
|
+
}
|
|
205
|
+
.np-table-cell-separator {
|
|
206
|
+
margin-top: 4px;
|
|
207
|
+
margin-top: var(--size-4);
|
|
208
|
+
margin-bottom: 4px;
|
|
209
|
+
margin-bottom: var(--size-4);
|
|
210
|
+
height: 1px;
|
|
211
|
+
background-color: rgba(134,167,189,0.10196);
|
|
212
|
+
background-color: var(--color-background-neutral);
|
|
213
|
+
padding: 0;
|
|
214
|
+
}
|
|
215
|
+
.np-table-cell .np-text-body-default-bold {
|
|
216
|
+
display: flex;
|
|
217
|
+
align-items: center;
|
|
218
|
+
color: #37517e;
|
|
219
|
+
color: var(--color-content-primary);
|
|
220
|
+
white-space: nowrap;
|
|
221
|
+
}
|
|
222
|
+
.np-table-cell .np-table-content--success {
|
|
223
|
+
color: var(--color-sentiment-positive);
|
|
224
|
+
}
|
|
225
|
+
.np-table-cell .np-table-content--error {
|
|
226
|
+
color: var(--color-sentiment-negative);
|
|
227
|
+
}
|
|
228
|
+
.np-table-cell .tw-loader {
|
|
229
|
+
margin: 150px auto;
|
|
230
|
+
}
|
|
231
|
+
@media (max-width: 320px) {
|
|
232
|
+
.np-table-cell .tw-loader {
|
|
233
|
+
margin-top: 70px;
|
|
234
|
+
margin-bottom: 70px;
|
|
235
|
+
}
|
|
236
|
+
}
|
|
237
|
+
.np-table-content {
|
|
238
|
+
gap: 12px;
|
|
239
|
+
gap: var(--size-12);
|
|
240
|
+
}
|
|
241
|
+
.np-table-content--success,
|
|
242
|
+
.np-table-content--error {
|
|
243
|
+
gap: 4px;
|
|
244
|
+
gap: var(--size-4);
|
|
245
|
+
}
|
|
246
|
+
.np-table-content--success .np-table-content-text,
|
|
247
|
+
.np-table-content--error .np-table-content-text {
|
|
248
|
+
line-height: 155%;
|
|
249
|
+
}
|
|
250
|
+
.np-table-content-media {
|
|
251
|
+
flex-shrink: 0;
|
|
252
|
+
}
|
|
253
|
+
.np-table-content-body {
|
|
254
|
+
display: flex;
|
|
255
|
+
flex-direction: column;
|
|
256
|
+
font-size: 0.75rem;
|
|
257
|
+
font-size: var(--font-size-12);
|
|
258
|
+
color: #768e9c;
|
|
259
|
+
color: var(--color-content-tertiary);
|
|
260
|
+
}
|
|
261
|
+
.np-table-content--reversed {
|
|
262
|
+
flex-direction: row-reverse;
|
|
263
|
+
}
|
|
264
|
+
.np-table-content--reversed .np-table-content-body {
|
|
265
|
+
align-items: end;
|
|
266
|
+
}
|
|
267
|
+
.np-table-empty-data {
|
|
268
|
+
display: flex;
|
|
269
|
+
align-items: center;
|
|
270
|
+
}
|
|
271
|
+
.np-table-empty-data .status-circle {
|
|
272
|
+
margin-right: 12px;
|
|
273
|
+
margin-right: var(--size-12);
|
|
274
|
+
}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
export interface MoneyProps {
|
|
2
2
|
amount: number;
|
|
3
3
|
currency: string;
|
|
4
|
+
alwaysShowDecimals?: boolean;
|
|
4
5
|
}
|
|
5
|
-
declare const Money: ({ amount, currency }: MoneyProps) => import("react").JSX.Element;
|
|
6
|
+
declare const Money: ({ amount, currency, alwaysShowDecimals }: MoneyProps) => import("react").JSX.Element;
|
|
6
7
|
export default Money;
|
|
7
8
|
//# sourceMappingURL=Money.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Money.d.ts","sourceRoot":"","sources":["../../../src/money/Money.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"Money.d.ts","sourceRoot":"","sources":["../../../src/money/Money.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,QAAA,MAAM,KAAK,6CAAsD,UAAU,gCAS1E,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { TableHeaderType } from './TableHeader';
|
|
2
|
+
import { TableRowClickableType, TableRowType } from './TableRow';
|
|
3
|
+
export interface TableProps {
|
|
4
|
+
'aria-labelledby'?: string;
|
|
5
|
+
data: {
|
|
6
|
+
headers?: TableHeaderType[];
|
|
7
|
+
rows?: TableRowType[] | TableRowClickableType[];
|
|
8
|
+
onRowClick?: (rowData: TableRowType | TableRowClickableType) => void;
|
|
9
|
+
};
|
|
10
|
+
loading?: boolean;
|
|
11
|
+
className?: string | undefined;
|
|
12
|
+
fullWidth?: boolean;
|
|
13
|
+
error?: {
|
|
14
|
+
message?: string;
|
|
15
|
+
action?: {
|
|
16
|
+
href?: string;
|
|
17
|
+
text?: string;
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
declare const Table: ({ "aria-labelledby": ariaLabelledBy, data, loading, className, fullWidth, error, }: TableProps) => import("react").JSX.Element;
|
|
22
|
+
export default Table;
|
|
23
|
+
//# sourceMappingURL=Table.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/table/Table.tsx"],"names":[],"mappings":"AAEA,OAAoB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAiB,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAW3E,MAAM,WAAW,UAAU;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,IAAI,EAAE;QACJ,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;QAC5B,IAAI,CAAC,EAAE,YAAY,EAAE,GAAG,qBAAqB,EAAE,CAAC;QAChD,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,GAAG,qBAAqB,KAAK,IAAI,CAAC;KACtE,CAAC;IACF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE;QACN,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,MAAM,CAAC,EAAE;YACP,IAAI,CAAC,EAAE,MAAM,CAAC;YACd,IAAI,CAAC,EAAE,MAAM,CAAC;SACf,CAAC;KACH,CAAC;CACH;AAED,QAAA,MAAM,KAAK,uFAOR,UAAU,gCA4HZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
declare const _default: {
|
|
2
|
+
loading: {
|
|
3
|
+
id: string;
|
|
4
|
+
defaultMessage: string;
|
|
5
|
+
};
|
|
6
|
+
loaded: {
|
|
7
|
+
id: string;
|
|
8
|
+
defaultMessage: string;
|
|
9
|
+
};
|
|
10
|
+
emptyData: {
|
|
11
|
+
id: string;
|
|
12
|
+
defaultMessage: string;
|
|
13
|
+
};
|
|
14
|
+
refreshPage: {
|
|
15
|
+
id: string;
|
|
16
|
+
defaultMessage: string;
|
|
17
|
+
};
|
|
18
|
+
actionHeader: {
|
|
19
|
+
id: string;
|
|
20
|
+
defaultMessage: string;
|
|
21
|
+
};
|
|
22
|
+
};
|
|
23
|
+
export default _default;
|
|
24
|
+
//# sourceMappingURL=Table.messages.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Table.messages.d.ts","sourceRoot":"","sources":["../../../src/table/Table.messages.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAEA,wBAqBG"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { MoneyProps } from '../money';
|
|
3
|
+
interface TableCellTypeProp {
|
|
4
|
+
type: 'leading' | 'text' | 'currency' | 'status';
|
|
5
|
+
}
|
|
6
|
+
interface TableCellTextProps {
|
|
7
|
+
primaryText?: string;
|
|
8
|
+
secondaryText?: string;
|
|
9
|
+
}
|
|
10
|
+
interface TableCellStatusProp {
|
|
11
|
+
status?: 'error' | 'success';
|
|
12
|
+
}
|
|
13
|
+
export interface TableCellLeading extends TableCellTypeProp, TableCellTextProps, TableCellStatusProp {
|
|
14
|
+
avatar?: {
|
|
15
|
+
src?: string;
|
|
16
|
+
profileName?: string | null;
|
|
17
|
+
};
|
|
18
|
+
}
|
|
19
|
+
export interface TableCellText extends TableCellTypeProp, TableCellStatusProp {
|
|
20
|
+
text?: string;
|
|
21
|
+
}
|
|
22
|
+
export interface TableCellCurrency extends TableCellTypeProp, TableCellStatusProp {
|
|
23
|
+
primaryCurrency?: MoneyProps;
|
|
24
|
+
secondaryCurrency?: MoneyProps;
|
|
25
|
+
}
|
|
26
|
+
export interface TableCellStatus extends TableCellTypeProp, TableCellTextProps {
|
|
27
|
+
sentiment?: 'negative' | 'neutral' | 'positive' | 'warning' | 'pending';
|
|
28
|
+
}
|
|
29
|
+
export interface TableCellType {
|
|
30
|
+
cell?: TableCellLeading & TableCellText & TableCellCurrency & TableCellStatus;
|
|
31
|
+
alignment?: 'left' | 'right';
|
|
32
|
+
}
|
|
33
|
+
export interface TableCellProps extends TableCellType {
|
|
34
|
+
className?: string;
|
|
35
|
+
colSpan?: number;
|
|
36
|
+
children?: React.ReactNode;
|
|
37
|
+
}
|
|
38
|
+
declare const TableCell: ({ cell, alignment, className, colSpan, children }: TableCellProps) => React.JSX.Element;
|
|
39
|
+
export default TableCell;
|
|
40
|
+
//# sourceMappingURL=TableCell.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../src/table/TableCell.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAc,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAG7C,UAAU,iBAAiB;IACzB,IAAI,EAAE,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAC;CAClD;AAGD,UAAU,kBAAkB;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAGD,UAAU,mBAAmB;IAC3B,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC9B;AAED,MAAM,WAAW,gBACf,SAAQ,iBAAiB,EACvB,kBAAkB,EAClB,mBAAmB;IACrB,MAAM,CAAC,EAAE;QACP,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;KAC7B,CAAC;CACH;AAED,MAAM,WAAW,aAAc,SAAQ,iBAAiB,EAAE,mBAAmB;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB,EAAE,mBAAmB;IAC/E,eAAe,CAAC,EAAE,UAAU,CAAC;IAC7B,iBAAiB,CAAC,EAAE,UAAU,CAAC;CAChC;AAED,MAAM,WAAW,eAAgB,SAAQ,iBAAiB,EAAE,kBAAkB;IAC5E,SAAS,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;CACzE;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,gBAAgB,GAAG,aAAa,GAAG,iBAAiB,GAAG,eAAe,CAAC;IAC9E,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC9B;AAGD,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,SAAS,sDAAgE,cAAc,sBAuF5F,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export interface TableHeaderType {
|
|
2
|
+
header?: string;
|
|
3
|
+
className?: string;
|
|
4
|
+
alignment?: 'left' | 'right';
|
|
5
|
+
status?: 'error';
|
|
6
|
+
width?: string;
|
|
7
|
+
}
|
|
8
|
+
export interface TableHeaderProps extends TableHeaderType {
|
|
9
|
+
isActionHeader?: boolean;
|
|
10
|
+
}
|
|
11
|
+
declare const TableHeader: ({ header, className, alignment, status, width, isActionHeader, }: TableHeaderProps) => import("react").JSX.Element;
|
|
12
|
+
export default TableHeader;
|
|
13
|
+
//# sourceMappingURL=TableHeader.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../src/table/TableHeader.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,eAAe;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,QAAA,MAAM,WAAW,qEAOd,gBAAgB,gCA+ClB,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { TableCellProps } from './TableCell';
|
|
3
|
+
export interface TableRowType {
|
|
4
|
+
cells?: TableCellProps[];
|
|
5
|
+
}
|
|
6
|
+
export interface TableRowClickableType extends TableRowType {
|
|
7
|
+
id: number | string;
|
|
8
|
+
}
|
|
9
|
+
export interface TableRowProps {
|
|
10
|
+
rowData?: TableRowType | TableRowClickableType;
|
|
11
|
+
hasSeparator?: boolean;
|
|
12
|
+
children?: React.ReactNode;
|
|
13
|
+
onRowClick?: (rowData: TableRowType | TableRowClickableType) => void;
|
|
14
|
+
}
|
|
15
|
+
declare const TableRow: ({ rowData, hasSeparator, children, onRowClick }: TableRowProps) => React.JSX.Element;
|
|
16
|
+
export default TableRow;
|
|
17
|
+
//# sourceMappingURL=TableRow.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../src/table/TableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAkB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAKxD,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;CAC1B;AAED,MAAM,WAAW,qBAAsB,SAAQ,YAAY;IACzD,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,YAAY,GAAG,qBAAqB,CAAC;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,GAAG,qBAAqB,KAAK,IAAI,CAAC;CACtE;AAED,QAAA,MAAM,QAAQ,oDAA6D,aAAa,sBA8CvF,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface TableStatusTextProps {
|
|
3
|
+
text: string | React.ReactNode;
|
|
4
|
+
className?: string;
|
|
5
|
+
status?: 'success' | 'error';
|
|
6
|
+
typography?: 'default' | 'default-bold';
|
|
7
|
+
}
|
|
8
|
+
declare const TableStatusText: ({ text, className, status, typography, }: TableStatusTextProps) => React.JSX.Element;
|
|
9
|
+
export default TableStatusText;
|
|
10
|
+
//# sourceMappingURL=TableStatusText.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableStatusText.d.ts","sourceRoot":"","sources":["../../../src/table/TableStatusText.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC7B,UAAU,CAAC,EAAE,SAAS,GAAG,cAAc,CAAC;CACzC;AAED,QAAA,MAAM,eAAe,6CAKlB,oBAAoB,sBAmBtB,CAAC;AAEF,eAAe,eAAe,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export { default } from './Table';
|
|
2
|
+
export type { TableProps } from './Table';
|
|
3
|
+
export type { TableRowType, TableRowClickableType } from './TableRow';
|
|
4
|
+
export type { TableHeaderType } from './TableHeader';
|
|
5
|
+
export type { TableCellLeading, TableCellText, TableCellCurrency, TableCellStatus, TableCellType, } from './TableCell';
|
|
6
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,YAAY,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AACtE,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,YAAY,EACV,gBAAgB,EAChB,aAAa,EACb,iBAAiB,EACjB,eAAe,EACf,aAAa,GACd,MAAM,aAAa,CAAC"}
|
|
@@ -45,6 +45,11 @@ declare function customRender(ui: ReactElement, { locale, messages, ...renderOpt
|
|
|
45
45
|
"neptune.Summary.statusDone": string;
|
|
46
46
|
"neptune.Summary.statusNotDone": string;
|
|
47
47
|
"neptune.Summary.statusPending": string;
|
|
48
|
+
"neptune.Table.actionHeader": string;
|
|
49
|
+
"neptune.Table.emptyData": string;
|
|
50
|
+
"neptune.Table.loaded": string;
|
|
51
|
+
"neptune.Table.loading": string;
|
|
52
|
+
"neptune.Table.refreshPage": string;
|
|
48
53
|
"neptune.Upload.csButtonText": string;
|
|
49
54
|
"neptune.Upload.csFailureText": string;
|
|
50
55
|
"neptune.Upload.csSuccessText": string;
|
|
@@ -119,6 +124,11 @@ declare function customRenderHook(callback: () => unknown, { locale, messages }?
|
|
|
119
124
|
"neptune.Summary.statusDone": string;
|
|
120
125
|
"neptune.Summary.statusNotDone": string;
|
|
121
126
|
"neptune.Summary.statusPending": string;
|
|
127
|
+
"neptune.Table.actionHeader": string;
|
|
128
|
+
"neptune.Table.emptyData": string;
|
|
129
|
+
"neptune.Table.loaded": string;
|
|
130
|
+
"neptune.Table.loading": string;
|
|
131
|
+
"neptune.Table.refreshPage": string;
|
|
122
132
|
"neptune.Upload.csButtonText": string;
|
|
123
133
|
"neptune.Upload.csFailureText": string;
|
|
124
134
|
"neptune.Upload.csSuccessText": string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/test-utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAM,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,MAAM,EAAc,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAMxD;;;;GAIG;AACH,iBAAS,YAAY,CACnB,EAAE,EAAE,YAAY,EAChB,EAAE,MAAuB,EAAE,QAAa,EAAE,GAAG,aAAa,EAAE
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/test-utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAM,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,MAAM,EAAc,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAMxD;;;;GAIG;AACH,iBAAS,YAAY,CACnB,EAAE,EAAE,YAAY,EAChB,EAAE,MAAuB,EAAE,QAAa,EAAE,GAAG,aAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,GAChE,UAAU,CAAC,OAAO,MAAM,CAAC,CAK3B;AAED;;;GAGG;AACH,iBAAS,gBAAgB,CACvB,QAAQ,EAAE,MAAM,OAAO,EACvB,EAAE,MAAuB,EAAE,QAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,uEAKhD;AAED,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,YAAY,IAAI,MAAM,EAAE,gBAAgB,IAAI,UAAU,EAAE,SAAS,EAAE,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "46.
|
|
3
|
+
"version": "46.82.0",
|
|
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
|
-
"@
|
|
97
|
-
"@
|
|
96
|
+
"@wise/components-theming": "1.6.1",
|
|
97
|
+
"@transferwise/neptune-css": "14.20.0"
|
|
98
98
|
},
|
|
99
99
|
"peerDependencies": {
|
|
100
100
|
"@transferwise/icons": "^3.13.1",
|
package/src/i18n/en.json
CHANGED
|
@@ -35,6 +35,11 @@
|
|
|
35
35
|
"neptune.Summary.statusDone": "Item done",
|
|
36
36
|
"neptune.Summary.statusNotDone": "Item to do",
|
|
37
37
|
"neptune.Summary.statusPending": "Item pending",
|
|
38
|
+
"neptune.Table.actionHeader": "Action",
|
|
39
|
+
"neptune.Table.emptyData": "No results found",
|
|
40
|
+
"neptune.Table.loaded": "Table data has loaded",
|
|
41
|
+
"neptune.Table.loading": "Table data is loading",
|
|
42
|
+
"neptune.Table.refreshPage": "Refresh page",
|
|
38
43
|
"neptune.Upload.csButtonText": "Upload another file?",
|
|
39
44
|
"neptune.Upload.csFailureText": "Upload failed. Please, try again",
|
|
40
45
|
"neptune.Upload.csSuccessText": "Upload complete!",
|