@transferwise/components 0.0.0-experimental-32b5dbe → 0.0.0-experimental-22e11cd
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 -1
- package/build/types/table/TableCell.d.ts.map +1 -1
- package/build/types/table/TableHeader.d.ts +1 -1
- package/build/types/table/TableHeader.d.ts.map +1 -1
- package/build/types/table/TableStatusText.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/table/Table.tsx +2 -1
- package/src/table/TableCell.tsx +3 -9
- package/src/table/TableHeader.tsx +3 -4
- 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"}
|
|
@@ -29,7 +29,7 @@ export interface TableCellStatus extends TableCellTypeProp, TableCellTextProps {
|
|
|
29
29
|
}
|
|
30
30
|
export interface TableCellType {
|
|
31
31
|
cell?: TableCellLeading & TableCellText & TableCellCurrency & TableCellStatus;
|
|
32
|
-
alignment?: 'right';
|
|
32
|
+
alignment?: 'left' | 'right';
|
|
33
33
|
}
|
|
34
34
|
export interface TableCellProps extends TableCellType {
|
|
35
35
|
className?: string;
|
|
@@ -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":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAc,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE7C,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,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,sBA8F5F,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -1 +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;
|
|
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"}
|
|
@@ -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-22e11cd",
|
|
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",
|
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
|
@@ -2,8 +2,6 @@ import TableStatusText from './TableStatusText';
|
|
|
2
2
|
import Avatar, { AvatarType } from '../avatar';
|
|
3
3
|
import StatusIcon from '../statusIcon';
|
|
4
4
|
import { Flag } from '@wise/art';
|
|
5
|
-
import { formatMoney } from '@transferwise/formatting';
|
|
6
|
-
import { useIntl } from 'react-intl';
|
|
7
5
|
import React from 'react';
|
|
8
6
|
import { clsx } from 'clsx';
|
|
9
7
|
import { getInitials } from '../common';
|
|
@@ -52,7 +50,7 @@ export interface TableCellStatus extends TableCellTypeProp, TableCellTextProps {
|
|
|
52
50
|
|
|
53
51
|
export interface TableCellType {
|
|
54
52
|
cell?: TableCellLeading & TableCellText & TableCellCurrency & TableCellStatus;
|
|
55
|
-
alignment?: 'right';
|
|
53
|
+
alignment?: 'left' | 'right';
|
|
56
54
|
}
|
|
57
55
|
|
|
58
56
|
// These properties should be exported only on the lib level to prevent visual issues because of incorrect usage.
|
|
@@ -62,9 +60,7 @@ export interface TableCellProps extends TableCellType {
|
|
|
62
60
|
children?: React.ReactNode;
|
|
63
61
|
}
|
|
64
62
|
|
|
65
|
-
const TableCell = ({ cell, alignment, className, colSpan, children }: TableCellProps) => {
|
|
66
|
-
const { locale } = useIntl();
|
|
67
|
-
|
|
63
|
+
const TableCell = ({ cell, alignment = 'left', className, colSpan, children }: TableCellProps) => {
|
|
68
64
|
const getContentMedia = () => {
|
|
69
65
|
let mediaContent = null;
|
|
70
66
|
|
|
@@ -117,10 +113,8 @@ const TableCell = ({ cell, alignment, className, colSpan, children }: TableCellP
|
|
|
117
113
|
className={clsx(
|
|
118
114
|
'np-table-cell',
|
|
119
115
|
cell?.type ? `np-table-cell--${cell?.type}` : '',
|
|
116
|
+
`np-table-cell--${alignment}`,
|
|
120
117
|
className,
|
|
121
|
-
{
|
|
122
|
-
'np-table-cell--right': alignment === 'right',
|
|
123
|
-
},
|
|
124
118
|
)}
|
|
125
119
|
colSpan={colSpan}
|
|
126
120
|
>
|
|
@@ -6,7 +6,7 @@ import { clsx } from 'clsx';
|
|
|
6
6
|
export interface TableHeaderType {
|
|
7
7
|
header?: string;
|
|
8
8
|
className?: string;
|
|
9
|
-
alignment?: 'right';
|
|
9
|
+
alignment?: 'left' | 'right';
|
|
10
10
|
status?: 'error';
|
|
11
11
|
width?: string;
|
|
12
12
|
}
|
|
@@ -18,7 +18,7 @@ export interface TableHeaderProps extends TableHeaderType {
|
|
|
18
18
|
const TableHeader = ({
|
|
19
19
|
header,
|
|
20
20
|
className,
|
|
21
|
-
alignment,
|
|
21
|
+
alignment = 'left',
|
|
22
22
|
status,
|
|
23
23
|
width,
|
|
24
24
|
isActionHeader = false,
|
|
@@ -60,8 +60,7 @@ const TableHeader = ({
|
|
|
60
60
|
|
|
61
61
|
return (
|
|
62
62
|
<th
|
|
63
|
-
className={clsx('np-table-header', className, {
|
|
64
|
-
'np-table-header--right': alignment === 'right',
|
|
63
|
+
className={clsx('np-table-header', className, `np-table-header--${alignment}`, {
|
|
65
64
|
'np-table-header--error': status === 'error',
|
|
66
65
|
'np-table-header--action': isActionHeader,
|
|
67
66
|
})}
|
|
@@ -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
|
|