@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.
@@ -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;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"}
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":"AAMA,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,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,sBAkGnF,CAAC;AAEF,eAAe,SAAS,CAAC"}
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,7 +1,7 @@
1
1
  export interface TableHeaderType {
2
2
  header?: string;
3
3
  className?: string;
4
- alignment?: 'right';
4
+ alignment?: 'left' | 'right';
5
5
  status?: 'error';
6
6
  width?: string;
7
7
  }
@@ -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;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"}
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;AAE1B,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,sBAkBtB,CAAC;AAEF,eAAe,eAAe,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-32b5dbe",
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",
@@ -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
- <div className="np-text-body-default-bold">{formatMessage(messages.emptyData)}</div>
68
+ <Body type="body-default-bold">{formatMessage(messages.emptyData)}</Body>
68
69
  </div>
69
70
  </TableCell>
70
71
  </TableRow>
@@ -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
- let typographyClass = 'np-text-body-default';
19
- if (status ?? typography === 'default-bold') {
20
- typographyClass += '-bold';
21
- }
20
+ const typographyType =
21
+ (status ?? typography === 'default-bold')
22
+ ? Typography.BODY_DEFAULT_BOLD
23
+ : Typography.BODY_DEFAULT;
22
24
 
23
25
  return (
24
- <div
25
- className={clsx(className, typographyClass, {
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
- </div>
36
+ </Body>
34
37
  );
35
38
  };
36
39