@transferwise/components 0.0.0-experimental-688d30c → 0.0.0-experimental-aeb1e07

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 (45) 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 +292 -0
  7. package/build/styles/main.css +292 -0
  8. package/build/styles/table/Table.css +292 -0
  9. package/build/types/table/Table.d.ts +23 -0
  10. package/build/types/table/Table.d.ts.map +1 -0
  11. package/build/types/table/Table.messages.d.ts +24 -0
  12. package/build/types/table/Table.messages.d.ts.map +1 -0
  13. package/build/types/table/TableCell.d.ts +44 -0
  14. package/build/types/table/TableCell.d.ts.map +1 -0
  15. package/build/types/table/TableHeader.d.ts +13 -0
  16. package/build/types/table/TableHeader.d.ts.map +1 -0
  17. package/build/types/table/TableRow.d.ts +17 -0
  18. package/build/types/table/TableRow.d.ts.map +1 -0
  19. package/build/types/table/TableStatusText.d.ts +9 -0
  20. package/build/types/table/TableStatusText.d.ts.map +1 -0
  21. package/build/types/table/index.d.ts +6 -0
  22. package/build/types/table/index.d.ts.map +1 -0
  23. package/build/types/test-utils/index.d.ts +10 -0
  24. package/build/types/test-utils/index.d.ts.map +1 -1
  25. package/package.json +3 -3
  26. package/src/avatarView/AvatarView.story.tsx +1 -1
  27. package/src/avatarWrapper/AvatarWrapper.story.tsx +1 -1
  28. package/src/i18n/en.json +5 -0
  29. package/src/main.css +292 -0
  30. package/src/main.less +1 -0
  31. package/src/table/Table.css +292 -0
  32. package/src/table/Table.less +347 -0
  33. package/src/table/Table.messages.ts +24 -0
  34. package/src/table/Table.spec.tsx +82 -0
  35. package/src/table/Table.story.tsx +359 -0
  36. package/src/table/Table.tsx +166 -0
  37. package/src/table/TableCell.spec.tsx +298 -0
  38. package/src/table/TableCell.tsx +170 -0
  39. package/src/table/TableHeader.spec.tsx +50 -0
  40. package/src/table/TableHeader.tsx +75 -0
  41. package/src/table/TableRow.spec.tsx +112 -0
  42. package/src/table/TableRow.tsx +70 -0
  43. package/src/table/TableStatusText.spec.tsx +53 -0
  44. package/src/table/TableStatusText.tsx +36 -0
  45. package/src/table/index.ts +11 -0
@@ -0,0 +1,292 @@
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-text-secondary,
141
+ .np-table-cell .np-table-text-secondary {
142
+ color: #768e9c;
143
+ color: var(--color-content-tertiary);
144
+ font-size: 0.75rem;
145
+ font-size: var(--font-size-12);
146
+ font-style: normal;
147
+ font-weight: 400;
148
+ font-weight: var(--font-weight-regular);
149
+ line-height: 1.125rem;
150
+ line-height: var(--line-height-18);
151
+ }
152
+ .np-table-header.np-table-header--right > .np-text-body-default,
153
+ .np-table-cell.np-table-cell--right > .np-text-body-default {
154
+ text-align: right;
155
+ }
156
+ .np-table-header.np-table-header--right + .np-table-header:not(.np-table-header--right),
157
+ .np-table-cell.np-table-cell--right + .np-table-cell:not(.np-table-cell--right) {
158
+ padding-left: calc(8px + 12px);
159
+ padding-left: calc(var(--size-8) + var(--size-12));
160
+ }
161
+ .np-table-header.np-table-header--right .np-table-header-content,
162
+ .np-table-cell.np-table-cell--right .np-table-content {
163
+ justify-content: end;
164
+ }
165
+ .np-table-header-content,
166
+ .np-table-content {
167
+ display: flex;
168
+ align-items: center;
169
+ justify-content: start;
170
+ }
171
+ .np-table-header {
172
+ min-width: 160px;
173
+ padding-right: 8px;
174
+ padding-right: var(--size-8);
175
+ padding-bottom: 8px;
176
+ padding-bottom: var(--size-8);
177
+ padding-left: 8px;
178
+ padding-left: var(--size-8);
179
+ background-color: rgba(134,167,189,0.10196);
180
+ background-color: var(--color-background-neutral);
181
+ color: var(--color-interactive-primary);
182
+ }
183
+ .np-table-header-content {
184
+ padding-top: 5px;
185
+ padding-bottom: 5px;
186
+ white-space: nowrap;
187
+ line-height: 1.375rem;
188
+ line-height: var(--line-height-22);
189
+ letter-spacing: 0.0125em;
190
+ letter-spacing: var(--letter-spacing-sm);
191
+ }
192
+ .np-table-header--error {
193
+ color: var(--color-sentiment-negative);
194
+ }
195
+ .np-table-header--action {
196
+ min-width: 0;
197
+ padding: 0;
198
+ }
199
+ .np-table-cell {
200
+ padding: 16px 8px;
201
+ padding: var(--size-16) var(--size-8);
202
+ position: relative;
203
+ }
204
+ .np-table-cell--cosmetic {
205
+ padding: 0;
206
+ }
207
+ .np-table-cell--primary {
208
+ min-width: 200px;
209
+ }
210
+ .np-table-cell--currency .np-text-body-default {
211
+ white-space: nowrap;
212
+ }
213
+ .np-table-cell .tw-chevron {
214
+ margin-left: 8px;
215
+ margin-left: var(--size-8);
216
+ }
217
+ .np-table-cell-separator {
218
+ margin-top: 4px;
219
+ margin-top: var(--size-4);
220
+ margin-bottom: 4px;
221
+ margin-bottom: var(--size-4);
222
+ height: 1px;
223
+ background-color: rgba(134,167,189,0.10196);
224
+ background-color: var(--color-background-neutral);
225
+ padding: 0;
226
+ }
227
+ .np-table-cell .np-text-body-default {
228
+ line-height: 1.375rem;
229
+ line-height: var(--line-height-22);
230
+ letter-spacing: 0.01em;
231
+ letter-spacing: var(--letter-spacing-xs);
232
+ }
233
+ .np-table-cell .np-text-body-default-bold {
234
+ display: flex;
235
+ align-items: center;
236
+ color: #37517e;
237
+ color: var(--color-content-primary);
238
+ white-space: nowrap;
239
+ }
240
+ .np-table-cell .np-table-content--success {
241
+ color: var(--color-sentiment-positive);
242
+ }
243
+ .np-table-cell .np-table-content--error {
244
+ color: var(--color-sentiment-negative);
245
+ }
246
+ .np-table-cell .tw-loader {
247
+ margin: 150px auto;
248
+ }
249
+ @media (max-width: 320px) {
250
+ .np-table-cell .tw-loader {
251
+ margin-top: 70px;
252
+ margin-bottom: 70px;
253
+ }
254
+ }
255
+ .np-table-content {
256
+ gap: 12px;
257
+ gap: var(--size-12);
258
+ }
259
+ .np-table-content--success,
260
+ .np-table-content--error {
261
+ gap: 4px;
262
+ gap: var(--size-4);
263
+ }
264
+ .np-table-content--success .np-table-content-text,
265
+ .np-table-content--error .np-table-content-text {
266
+ line-height: 155%;
267
+ }
268
+ .np-table-content-media {
269
+ flex-shrink: 0;
270
+ }
271
+ .np-table-content-body {
272
+ display: flex;
273
+ flex-direction: column;
274
+ font-size: 0.75rem;
275
+ font-size: var(--font-size-12);
276
+ color: #768e9c;
277
+ color: var(--color-content-tertiary);
278
+ }
279
+ .np-table-content--reversed {
280
+ flex-direction: row-reverse;
281
+ }
282
+ .np-table-content--reversed .np-table-content-body {
283
+ align-items: end;
284
+ }
285
+ .np-table-empty-data {
286
+ display: flex;
287
+ align-items: center;
288
+ }
289
+ .np-table-empty-data .status-circle {
290
+ margin-right: 12px;
291
+ margin-right: var(--size-12);
292
+ }
@@ -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;AAU3E,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,44 @@
1
+ import React from 'react';
2
+ interface TableCellTypeProp {
3
+ type: 'leading' | 'text' | 'currency' | 'status';
4
+ }
5
+ interface TableCellTextProps {
6
+ primaryText?: string;
7
+ secondaryText?: string;
8
+ }
9
+ interface TableCellStatusProp {
10
+ status?: 'error' | 'success';
11
+ }
12
+ export interface TableCellLeading extends TableCellTypeProp, TableCellTextProps, TableCellStatusProp {
13
+ avatar?: {
14
+ src?: string;
15
+ profileName?: string;
16
+ backgroundColorSeed?: string;
17
+ };
18
+ }
19
+ export interface TableCellText extends TableCellTypeProp, TableCellStatusProp {
20
+ text?: string;
21
+ }
22
+ interface Currency {
23
+ value: string | number;
24
+ currency: string;
25
+ }
26
+ export interface TableCellCurrency extends TableCellTypeProp, TableCellStatusProp {
27
+ primaryCurrency?: Currency;
28
+ secondaryCurrency?: Currency;
29
+ }
30
+ export interface TableCellStatus extends TableCellTypeProp, TableCellTextProps {
31
+ sentiment?: 'negative' | 'neutral' | 'positive' | 'warning' | 'pending';
32
+ }
33
+ export interface TableCellType {
34
+ cell?: TableCellLeading & TableCellText & TableCellCurrency & TableCellStatus;
35
+ alignment?: 'right';
36
+ }
37
+ export interface TableCellProps extends TableCellType {
38
+ className?: string;
39
+ colSpan?: number;
40
+ children?: React.ReactNode;
41
+ }
42
+ declare const TableCell: ({ cell, alignment, className, colSpan, children }: TableCellProps) => React.JSX.Element;
43
+ export default TableCell;
44
+ //# sourceMappingURL=TableCell.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../src/table/TableCell.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,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,CAAC;QACrB,mBAAmB,CAAC,EAAE,MAAM,CAAC;KAC9B,CAAC;CACH;AAED,MAAM,WAAW,aAAc,SAAQ,iBAAiB,EAAE,mBAAmB;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,QAAQ;IAChB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB,EAAE,mBAAmB;IAC/E,eAAe,CAAC,EAAE,QAAQ,CAAC;IAC3B,iBAAiB,CAAC,EAAE,QAAQ,CAAC;CAC9B;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,OAAO,CAAC;CACrB;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,sDAAuD,cAAc,sBAoGnF,CAAC;AAEF,eAAe,SAAS,CAAC"}
@@ -0,0 +1,13 @@
1
+ export interface TableHeaderType {
2
+ header?: string;
3
+ className?: string;
4
+ alignment?: '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,OAAO,CAAC;IACpB,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,gCAgDlB,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,9 @@
1
+ export interface TableStatusTextProps {
2
+ text: string;
3
+ className?: string;
4
+ status?: 'success' | 'error';
5
+ typography?: 'default' | 'default-bold';
6
+ }
7
+ declare const TableStatusText: ({ text, className, status, typography, }: TableStatusTextProps) => import("react").JSX.Element;
8
+ export default TableStatusText;
9
+ //# sourceMappingURL=TableStatusText.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TableStatusText.d.ts","sourceRoot":"","sources":["../../../src/table/TableStatusText.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,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,gCAkBtB,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": "0.0.0-experimental-688d30c",
3
+ "version": "0.0.0-experimental-aeb1e07",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -92,9 +92,9 @@
92
92
  "rollup": "^4.18.1",
93
93
  "rollup-preserve-directives": "^1.1.1",
94
94
  "storybook": "^8.2.2",
95
+ "@transferwise/less-config": "3.1.0",
95
96
  "@transferwise/neptune-css": "14.20.0",
96
- "@wise/components-theming": "1.6.1",
97
- "@transferwise/less-config": "3.1.0"
97
+ "@wise/components-theming": "1.6.1"
98
98
  },
99
99
  "peerDependencies": {
100
100
  "@transferwise/icons": "^3.13.1",
@@ -371,7 +371,7 @@ export const Profiles: Story = {
371
371
  export const ProfileBrokenImageFallback: Story = {
372
372
  parameters: {
373
373
  chromatic: {
374
- delay: 3000,
374
+ delay: 5000,
375
375
  },
376
376
  },
377
377
  render: () => {
@@ -103,7 +103,7 @@ export const All: Story = {
103
103
  export const ProfileBrokenImageFallback: Story = {
104
104
  parameters: {
105
105
  chromatic: {
106
- delay: 3000,
106
+ delay: 5000,
107
107
  },
108
108
  },
109
109
  render: () => {
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!",