@transferwise/components 0.0.0-experimental-f6a89c5 → 0.0.0-experimental-07a2362
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/types/table/Table.d.ts.map +1 -1
- package/build/types/table/TableCell.d.ts +1 -2
- package/build/types/table/TableCell.d.ts.map +1 -1
- package/build/types/table/TableStatusText.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/table/Table.story.tsx +0 -2
- package/src/table/Table.tsx +2 -1
- package/src/table/TableCell.tsx +3 -13
- package/src/table/TableStatusText.tsx +10 -7
|
@@ -1 +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;
|
|
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"}
|
|
@@ -13,8 +13,7 @@ interface TableCellStatusProp {
|
|
|
13
13
|
export interface TableCellLeading extends TableCellTypeProp, TableCellTextProps, TableCellStatusProp {
|
|
14
14
|
avatar?: {
|
|
15
15
|
src?: string;
|
|
16
|
-
profileName?: string;
|
|
17
|
-
backgroundColorSeed?: string;
|
|
16
|
+
profileName?: string | null;
|
|
18
17
|
};
|
|
19
18
|
}
|
|
20
19
|
export interface TableCellText extends TableCellTypeProp, TableCellStatusProp {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../src/table/TableCell.tsx"],"names":[],"mappings":"
|
|
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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableStatusText.d.ts","sourceRoot":"","sources":["../../../src/table/TableStatusText.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "0.0.0-experimental-
|
|
3
|
+
"version": "0.0.0-experimental-07a2362",
|
|
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",
|
|
@@ -94,7 +94,6 @@ const tableData = {
|
|
|
94
94
|
secondaryText: 'Product Manager',
|
|
95
95
|
avatar: {
|
|
96
96
|
profileName: 'Jan Kowalski',
|
|
97
|
-
backgroundColorSeed: 'Jan Kowalski',
|
|
98
97
|
},
|
|
99
98
|
},
|
|
100
99
|
},
|
|
@@ -144,7 +143,6 @@ const tableData = {
|
|
|
144
143
|
secondaryText: 'Data Scientist',
|
|
145
144
|
avatar: {
|
|
146
145
|
profileName: 'William Davis',
|
|
147
|
-
backgroundColorSeed: 'William Davis',
|
|
148
146
|
},
|
|
149
147
|
},
|
|
150
148
|
},
|
package/src/table/Table.tsx
CHANGED
|
@@ -10,6 +10,7 @@ import { Sentiment, Size } from '../common';
|
|
|
10
10
|
import StatusIcon from '../statusIcon';
|
|
11
11
|
import { clsx } from 'clsx';
|
|
12
12
|
import { useTheme } from '@wise/components-theming';
|
|
13
|
+
import Body from '../body';
|
|
13
14
|
|
|
14
15
|
export interface TableProps {
|
|
15
16
|
'aria-labelledby'?: string;
|
|
@@ -64,7 +65,7 @@ const Table = ({
|
|
|
64
65
|
<TableCell colSpan={data?.headers?.length}>
|
|
65
66
|
<div className="np-table-empty-data" data-testid="np-table-empty-data">
|
|
66
67
|
<StatusIcon sentiment={Sentiment.WARNING} size={Size.MEDIUM} />
|
|
67
|
-
<
|
|
68
|
+
<Body type="body-default-bold">{formatMessage(messages.emptyData)}</Body>
|
|
68
69
|
</div>
|
|
69
70
|
</TableCell>
|
|
70
71
|
</TableRow>
|
package/src/table/TableCell.tsx
CHANGED
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
import TableStatusText from './TableStatusText';
|
|
2
|
-
import Avatar, { AvatarType } from '../avatar';
|
|
3
2
|
import StatusIcon from '../statusIcon';
|
|
4
3
|
import { Flag } from '@wise/art';
|
|
5
4
|
import React from 'react';
|
|
6
5
|
import { clsx } from 'clsx';
|
|
7
|
-
import { getInitials } from '../common';
|
|
8
|
-
import Image from '../image';
|
|
9
6
|
import Body from '../body';
|
|
10
7
|
import Money, { MoneyProps } from '../money';
|
|
8
|
+
import AvatarView from '../avatarView';
|
|
11
9
|
|
|
12
10
|
interface TableCellTypeProp {
|
|
13
11
|
type: 'leading' | 'text' | 'currency' | 'status';
|
|
@@ -30,8 +28,7 @@ export interface TableCellLeading
|
|
|
30
28
|
TableCellStatusProp {
|
|
31
29
|
avatar?: {
|
|
32
30
|
src?: string;
|
|
33
|
-
profileName?: string;
|
|
34
|
-
backgroundColorSeed?: string;
|
|
31
|
+
profileName?: string | null;
|
|
35
32
|
};
|
|
36
33
|
}
|
|
37
34
|
|
|
@@ -65,15 +62,8 @@ const TableCell = ({ cell, alignment = 'left', className, colSpan, children }: T
|
|
|
65
62
|
let mediaContent = null;
|
|
66
63
|
|
|
67
64
|
if (cell?.type === 'leading' && (cell?.avatar?.src || cell?.avatar?.profileName)) {
|
|
68
|
-
const avatarType = cell?.avatar?.src ? AvatarType.THUMBNAIL : AvatarType.INITIALS;
|
|
69
|
-
|
|
70
65
|
mediaContent = (
|
|
71
|
-
<
|
|
72
|
-
{avatarType === AvatarType.INITIALS &&
|
|
73
|
-
cell?.avatar?.profileName &&
|
|
74
|
-
getInitials(cell?.avatar?.profileName)}
|
|
75
|
-
{cell?.avatar?.src && <Image src={cell?.avatar?.src} alt="" />}
|
|
76
|
-
</Avatar>
|
|
66
|
+
<AvatarView profileName={cell?.avatar?.profileName} size={40} imgSrc={cell?.avatar?.src} />
|
|
77
67
|
);
|
|
78
68
|
}
|
|
79
69
|
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { AlertCircle, CheckCircle } from '@transferwise/icons';
|
|
2
2
|
import { clsx } from 'clsx';
|
|
3
3
|
import React from 'react';
|
|
4
|
+
import Body from '../body';
|
|
5
|
+
import { Typography } from '../common';
|
|
4
6
|
|
|
5
7
|
export interface TableStatusTextProps {
|
|
6
8
|
text: string | React.ReactNode;
|
|
@@ -15,14 +17,15 @@ const TableStatusText = ({
|
|
|
15
17
|
status,
|
|
16
18
|
typography = 'default',
|
|
17
19
|
}: TableStatusTextProps) => {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
const typographyType =
|
|
21
|
+
(status ?? typography === 'default-bold')
|
|
22
|
+
? Typography.BODY_DEFAULT_BOLD
|
|
23
|
+
: Typography.BODY_DEFAULT;
|
|
22
24
|
|
|
23
25
|
return (
|
|
24
|
-
<
|
|
25
|
-
|
|
26
|
+
<Body
|
|
27
|
+
type={typographyType}
|
|
28
|
+
className={clsx(className, {
|
|
26
29
|
'np-table-content--success': status === 'success',
|
|
27
30
|
'np-table-content--error': status === 'error',
|
|
28
31
|
})}
|
|
@@ -30,7 +33,7 @@ const TableStatusText = ({
|
|
|
30
33
|
{text}
|
|
31
34
|
{status === 'success' && <CheckCircle className="tw-icon--status" data-testid="check-icon" />}
|
|
32
35
|
{status === 'error' && <AlertCircle className="tw-icon--status" data-testid="alert-icon" />}
|
|
33
|
-
</
|
|
36
|
+
</Body>
|
|
34
37
|
);
|
|
35
38
|
};
|
|
36
39
|
|