@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.
Files changed (50) hide show
  1. package/build/i18n/en.json +5 -0
  2. package/build/i18n/en.json.js +5 -0
  3. package/build/i18n/en.json.js.map +1 -1
  4. package/build/i18n/en.json.mjs +5 -0
  5. package/build/i18n/en.json.mjs.map +1 -1
  6. package/build/main.css +274 -0
  7. package/build/money/Money.js +5 -2
  8. package/build/money/Money.js.map +1 -1
  9. package/build/money/Money.mjs +5 -2
  10. package/build/money/Money.mjs.map +1 -1
  11. package/build/styles/main.css +274 -0
  12. package/build/styles/table/Table.css +274 -0
  13. package/build/types/money/Money.d.ts +2 -1
  14. package/build/types/money/Money.d.ts.map +1 -1
  15. package/build/types/table/Table.d.ts +23 -0
  16. package/build/types/table/Table.d.ts.map +1 -0
  17. package/build/types/table/Table.messages.d.ts +24 -0
  18. package/build/types/table/Table.messages.d.ts.map +1 -0
  19. package/build/types/table/TableCell.d.ts +40 -0
  20. package/build/types/table/TableCell.d.ts.map +1 -0
  21. package/build/types/table/TableHeader.d.ts +13 -0
  22. package/build/types/table/TableHeader.d.ts.map +1 -0
  23. package/build/types/table/TableRow.d.ts +17 -0
  24. package/build/types/table/TableRow.d.ts.map +1 -0
  25. package/build/types/table/TableStatusText.d.ts +10 -0
  26. package/build/types/table/TableStatusText.d.ts.map +1 -0
  27. package/build/types/table/index.d.ts +6 -0
  28. package/build/types/table/index.d.ts.map +1 -0
  29. package/build/types/test-utils/index.d.ts +10 -0
  30. package/build/types/test-utils/index.d.ts.map +1 -1
  31. package/package.json +3 -3
  32. package/src/i18n/en.json +5 -0
  33. package/src/main.css +274 -0
  34. package/src/main.less +1 -0
  35. package/src/money/Money.tsx +9 -2
  36. package/src/table/Table.css +274 -0
  37. package/src/table/Table.less +334 -0
  38. package/src/table/Table.messages.ts +24 -0
  39. package/src/table/Table.spec.tsx +82 -0
  40. package/src/table/Table.story.tsx +356 -0
  41. package/src/table/Table.tsx +167 -0
  42. package/src/table/TableCell.spec.tsx +298 -0
  43. package/src/table/TableCell.tsx +149 -0
  44. package/src/table/TableHeader.spec.tsx +50 -0
  45. package/src/table/TableHeader.tsx +74 -0
  46. package/src/table/TableRow.spec.tsx +112 -0
  47. package/src/table/TableRow.tsx +70 -0
  48. package/src/table/TableStatusText.spec.tsx +53 -0
  49. package/src/table/TableStatusText.tsx +40 -0
  50. 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;CAClB;AAED,QAAA,MAAM,KAAK,yBAA0B,UAAU,gCAG9C,CAAC;AAEF,eAAe,KAAK,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
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.81.0",
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
- "@transferwise/neptune-css": "14.20.0",
97
- "@wise/components-theming": "1.6.1"
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!",