@transferwise/components 46.113.1 → 46.114.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 (113) hide show
  1. package/build/i18n/cs.json +2 -0
  2. package/build/i18n/cs.json.js +2 -0
  3. package/build/i18n/cs.json.js.map +1 -1
  4. package/build/i18n/cs.json.mjs +2 -0
  5. package/build/i18n/cs.json.mjs.map +1 -1
  6. package/build/i18n/de.json +2 -0
  7. package/build/i18n/de.json.js +2 -0
  8. package/build/i18n/de.json.js.map +1 -1
  9. package/build/i18n/de.json.mjs +2 -0
  10. package/build/i18n/de.json.mjs.map +1 -1
  11. package/build/i18n/es.json +2 -0
  12. package/build/i18n/es.json.js +2 -0
  13. package/build/i18n/es.json.js.map +1 -1
  14. package/build/i18n/es.json.mjs +2 -0
  15. package/build/i18n/es.json.mjs.map +1 -1
  16. package/build/i18n/fr.json +2 -0
  17. package/build/i18n/fr.json.js +2 -0
  18. package/build/i18n/fr.json.js.map +1 -1
  19. package/build/i18n/fr.json.mjs +2 -0
  20. package/build/i18n/fr.json.mjs.map +1 -1
  21. package/build/i18n/hu.json +2 -0
  22. package/build/i18n/hu.json.js +2 -0
  23. package/build/i18n/hu.json.js.map +1 -1
  24. package/build/i18n/hu.json.mjs +2 -0
  25. package/build/i18n/hu.json.mjs.map +1 -1
  26. package/build/i18n/id.json +2 -0
  27. package/build/i18n/id.json.js +2 -0
  28. package/build/i18n/id.json.js.map +1 -1
  29. package/build/i18n/id.json.mjs +2 -0
  30. package/build/i18n/id.json.mjs.map +1 -1
  31. package/build/i18n/it.json +2 -0
  32. package/build/i18n/it.json.js +2 -0
  33. package/build/i18n/it.json.js.map +1 -1
  34. package/build/i18n/it.json.mjs +2 -0
  35. package/build/i18n/it.json.mjs.map +1 -1
  36. package/build/i18n/ja.json +2 -0
  37. package/build/i18n/ja.json.js +2 -0
  38. package/build/i18n/ja.json.js.map +1 -1
  39. package/build/i18n/ja.json.mjs +2 -0
  40. package/build/i18n/ja.json.mjs.map +1 -1
  41. package/build/i18n/nl.json +2 -0
  42. package/build/i18n/nl.json.js +2 -0
  43. package/build/i18n/nl.json.js.map +1 -1
  44. package/build/i18n/nl.json.mjs +2 -0
  45. package/build/i18n/nl.json.mjs.map +1 -1
  46. package/build/i18n/pl.json +2 -0
  47. package/build/i18n/pl.json.js +2 -0
  48. package/build/i18n/pl.json.js.map +1 -1
  49. package/build/i18n/pl.json.mjs +2 -0
  50. package/build/i18n/pl.json.mjs.map +1 -1
  51. package/build/i18n/pt.json +2 -0
  52. package/build/i18n/pt.json.js +2 -0
  53. package/build/i18n/pt.json.js.map +1 -1
  54. package/build/i18n/pt.json.mjs +2 -0
  55. package/build/i18n/pt.json.mjs.map +1 -1
  56. package/build/i18n/ro.json +2 -0
  57. package/build/i18n/ro.json.js +2 -0
  58. package/build/i18n/ro.json.js.map +1 -1
  59. package/build/i18n/ro.json.mjs +2 -0
  60. package/build/i18n/ro.json.mjs.map +1 -1
  61. package/build/i18n/ru.json +2 -0
  62. package/build/i18n/ru.json.js +2 -0
  63. package/build/i18n/ru.json.js.map +1 -1
  64. package/build/i18n/ru.json.mjs +2 -0
  65. package/build/i18n/ru.json.mjs.map +1 -1
  66. package/build/i18n/th.json +2 -0
  67. package/build/i18n/th.json.js +2 -0
  68. package/build/i18n/th.json.js.map +1 -1
  69. package/build/i18n/th.json.mjs +2 -0
  70. package/build/i18n/th.json.mjs.map +1 -1
  71. package/build/i18n/tr.json +2 -0
  72. package/build/i18n/tr.json.js +2 -0
  73. package/build/i18n/tr.json.js.map +1 -1
  74. package/build/i18n/tr.json.mjs +2 -0
  75. package/build/i18n/tr.json.mjs.map +1 -1
  76. package/build/i18n/zh-CN.json +2 -0
  77. package/build/i18n/zh-CN.json.js +2 -0
  78. package/build/i18n/zh-CN.json.js.map +1 -1
  79. package/build/i18n/zh-CN.json.mjs +2 -0
  80. package/build/i18n/zh-CN.json.mjs.map +1 -1
  81. package/build/i18n/zh-HK.json +2 -0
  82. package/build/i18n/zh-HK.json.js +2 -0
  83. package/build/i18n/zh-HK.json.js.map +1 -1
  84. package/build/i18n/zh-HK.json.mjs +2 -0
  85. package/build/i18n/zh-HK.json.mjs.map +1 -1
  86. package/build/table/TableCell.js +5 -4
  87. package/build/table/TableCell.js.map +1 -1
  88. package/build/table/TableCell.mjs +5 -4
  89. package/build/table/TableCell.mjs.map +1 -1
  90. package/build/types/table/TableCell.d.ts +6 -3
  91. package/build/types/table/TableCell.d.ts.map +1 -1
  92. package/package.json +4 -4
  93. package/src/i18n/cs.json +2 -0
  94. package/src/i18n/de.json +2 -0
  95. package/src/i18n/es.json +2 -0
  96. package/src/i18n/fr.json +2 -0
  97. package/src/i18n/hu.json +2 -0
  98. package/src/i18n/id.json +2 -0
  99. package/src/i18n/it.json +2 -0
  100. package/src/i18n/ja.json +2 -0
  101. package/src/i18n/nl.json +2 -0
  102. package/src/i18n/pl.json +2 -0
  103. package/src/i18n/pt.json +2 -0
  104. package/src/i18n/ro.json +2 -0
  105. package/src/i18n/ru.json +2 -0
  106. package/src/i18n/th.json +2 -0
  107. package/src/i18n/tr.json +2 -0
  108. package/src/i18n/zh-CN.json +2 -0
  109. package/src/i18n/zh-HK.json +2 -0
  110. package/src/table/Table.spec.tsx +0 -1
  111. package/src/table/Table.story.tsx +12 -1
  112. package/src/table/TableCell.spec.tsx +2 -2
  113. package/src/table/TableCell.tsx +11 -7
@@ -20,6 +20,8 @@ var tr = {
20
20
  "neptune.DateLookup.selected": "seçili",
21
21
  "neptune.DateLookup.twentyYears": "20 yıl",
22
22
  "neptune.DateLookup.year": "yıl",
23
+ "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Bir para birimi / ülke girin",
24
+ "neptune.ExpressiveMoneyInput.currency.select.currency": "Para birimi seçin",
23
25
  "neptune.FlowNavigation.back": "önceki adıma dön",
24
26
  "neptune.Info.ariaLabel": "Daha fazla bilgi",
25
27
  "neptune.Label.optional": "(İsteğe bağlı)",
@@ -1 +1 @@
1
- {"version":3,"file":"tr.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"tr.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -16,6 +16,8 @@ var tr = {
16
16
  "neptune.DateLookup.selected": "seçili",
17
17
  "neptune.DateLookup.twentyYears": "20 yıl",
18
18
  "neptune.DateLookup.year": "yıl",
19
+ "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Bir para birimi / ülke girin",
20
+ "neptune.ExpressiveMoneyInput.currency.select.currency": "Para birimi seçin",
19
21
  "neptune.FlowNavigation.back": "önceki adıma dön",
20
22
  "neptune.Info.ariaLabel": "Daha fazla bilgi",
21
23
  "neptune.Label.optional": "(İsteğe bağlı)",
@@ -1 +1 @@
1
- {"version":3,"file":"tr.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"tr.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -16,6 +16,8 @@
16
16
  "neptune.DateLookup.selected": "已选",
17
17
  "neptune.DateLookup.twentyYears": "20 年",
18
18
  "neptune.DateLookup.year": "年",
19
+ "neptune.ExpressiveMoneyInput.currency.search.placeholder": "输入货币/国家/地区",
20
+ "neptune.ExpressiveMoneyInput.currency.select.currency": "选择货币",
19
21
  "neptune.FlowNavigation.back": "返回上一步",
20
22
  "neptune.Info.ariaLabel": "更多信息",
21
23
  "neptune.Label.optional": "(可选)",
@@ -20,6 +20,8 @@ var zhCN = {
20
20
  "neptune.DateLookup.selected": "已选",
21
21
  "neptune.DateLookup.twentyYears": "20 年",
22
22
  "neptune.DateLookup.year": "年",
23
+ "neptune.ExpressiveMoneyInput.currency.search.placeholder": "输入货币/国家/地区",
24
+ "neptune.ExpressiveMoneyInput.currency.select.currency": "选择货币",
23
25
  "neptune.FlowNavigation.back": "返回上一步",
24
26
  "neptune.Info.ariaLabel": "更多信息",
25
27
  "neptune.Label.optional": "(可选)",
@@ -1 +1 @@
1
- {"version":3,"file":"zh-CN.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"zh-CN.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -16,6 +16,8 @@ var zhCN = {
16
16
  "neptune.DateLookup.selected": "已选",
17
17
  "neptune.DateLookup.twentyYears": "20 年",
18
18
  "neptune.DateLookup.year": "年",
19
+ "neptune.ExpressiveMoneyInput.currency.search.placeholder": "输入货币/国家/地区",
20
+ "neptune.ExpressiveMoneyInput.currency.select.currency": "选择货币",
19
21
  "neptune.FlowNavigation.back": "返回上一步",
20
22
  "neptune.Info.ariaLabel": "更多信息",
21
23
  "neptune.Label.optional": "(可选)",
@@ -1 +1 @@
1
- {"version":3,"file":"zh-CN.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"zh-CN.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -16,6 +16,8 @@
16
16
  "neptune.DateLookup.selected": "已選",
17
17
  "neptune.DateLookup.twentyYears": "20年",
18
18
  "neptune.DateLookup.year": "年",
19
+ "neptune.ExpressiveMoneyInput.currency.search.placeholder": "輸入貨幣或國家/地區",
20
+ "neptune.ExpressiveMoneyInput.currency.select.currency": "選擇貨幣",
19
21
  "neptune.FlowNavigation.back": "返回上一個步驟",
20
22
  "neptune.Info.ariaLabel": "更多資訊",
21
23
  "neptune.Label.optional": "(可選)",
@@ -20,6 +20,8 @@ var zhHK = {
20
20
  "neptune.DateLookup.selected": "已選",
21
21
  "neptune.DateLookup.twentyYears": "20年",
22
22
  "neptune.DateLookup.year": "年",
23
+ "neptune.ExpressiveMoneyInput.currency.search.placeholder": "輸入貨幣或國家/地區",
24
+ "neptune.ExpressiveMoneyInput.currency.select.currency": "選擇貨幣",
23
25
  "neptune.FlowNavigation.back": "返回上一個步驟",
24
26
  "neptune.Info.ariaLabel": "更多資訊",
25
27
  "neptune.Label.optional": "(可選)",
@@ -1 +1 @@
1
- {"version":3,"file":"zh-HK.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"zh-HK.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -16,6 +16,8 @@ var zhHK = {
16
16
  "neptune.DateLookup.selected": "已選",
17
17
  "neptune.DateLookup.twentyYears": "20年",
18
18
  "neptune.DateLookup.year": "年",
19
+ "neptune.ExpressiveMoneyInput.currency.search.placeholder": "輸入貨幣或國家/地區",
20
+ "neptune.ExpressiveMoneyInput.currency.select.currency": "選擇貨幣",
19
21
  "neptune.FlowNavigation.back": "返回上一個步驟",
20
22
  "neptune.Info.ariaLabel": "更多資訊",
21
23
  "neptune.Label.optional": "(可選)",
@@ -1 +1 @@
1
- {"version":3,"file":"zh-HK.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"zh-HK.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -21,14 +21,15 @@ const TableCell = ({
21
21
  }) => {
22
22
  const getContentMedia = () => {
23
23
  let mediaContent = null;
24
- if (cell?.type === 'leading' && (cell?.avatar?.src || cell?.avatar?.profileName)) {
24
+ if (cell?.type === 'leading' && cell?.avatar) {
25
25
  mediaContent = /*#__PURE__*/jsxRuntime.jsx(AvatarView.default, {
26
- profileName: cell?.avatar?.profileName,
27
26
  size: 40,
28
- imgSrc: cell?.avatar?.src
27
+ ...cell.avatar,
28
+ imgSrc: cell.avatar.imgSrc ?? cell.avatar.src,
29
+ children: cell.avatar.asset
29
30
  });
30
31
  }
31
- if (cell?.type === 'currency' && cell?.primaryCurrency?.currency) {
32
+ if (cell?.type === 'currency' && cell?.primaryCurrency?.currency && cell?.flag !== false) {
32
33
  mediaContent = /*#__PURE__*/jsxRuntime.jsx(art.Flag, {
33
34
  code: cell?.primaryCurrency?.currency?.toLowerCase(),
34
35
  intrinsicSize: 24
@@ -1 +1 @@
1
- {"version":3,"file":"TableCell.js","sources":["../../src/table/TableCell.tsx"],"sourcesContent":["import TableStatusText from './TableStatusText';\nimport StatusIcon from '../statusIcon';\nimport { Flag } from '@wise/art';\nimport React, { ImgHTMLAttributes } from 'react';\nimport { clsx } from 'clsx';\nimport Body from '../body';\nimport Money, { MoneyProps } from '../money';\nimport AvatarView from '../avatarView';\n\ninterface TableCellTypeProp {\n type: 'leading' | 'text' | 'currency' | 'status' | 'media';\n}\n\n// `Media`, `Leading` and `Status` cell types have 2 text fields: `primaryText` and `secondaryText`\ninterface TableCellTextProps {\n primaryText?: string;\n secondaryText?: string;\n}\n\n// `Leading`, `Text` and `Currency` cells' types can have a status indicator with `error` or `success` values\ninterface TableCellStatusProp {\n status?: 'error' | 'success';\n}\n\nexport interface TableCellMedia extends TableCellTypeProp, TableCellTextProps {\n media?: ImgHTMLAttributes<HTMLImageElement>;\n}\n\nexport interface TableCellLeading\n extends TableCellTypeProp,\n TableCellTextProps,\n TableCellStatusProp {\n avatar?: {\n src?: string;\n profileName?: string | null;\n };\n}\n\nexport interface TableCellText extends TableCellTypeProp, TableCellStatusProp {\n text?: string;\n}\n\nexport interface TableCellCurrency extends TableCellTypeProp, TableCellStatusProp {\n primaryCurrency?: MoneyProps;\n secondaryCurrency?: MoneyProps;\n}\n\nexport interface TableCellStatus extends TableCellTypeProp, TableCellTextProps {\n sentiment?: 'negative' | 'neutral' | 'positive' | 'warning' | 'pending';\n}\n\nexport interface TableCellType {\n cell?: TableCellLeading & TableCellText & TableCellCurrency & TableCellStatus & TableCellMedia;\n alignment?: 'left' | 'right';\n}\n\n// These properties should be exported only on the lib level to prevent visual issues because of incorrect usage.\nexport interface TableCellProps extends TableCellType {\n className?: string;\n colSpan?: number;\n children?: React.ReactNode;\n}\n\nconst TableCell = ({ cell, alignment = 'left', className, colSpan, children }: TableCellProps) => {\n const getContentMedia = () => {\n let mediaContent = null;\n\n if (cell?.type === 'leading' && (cell?.avatar?.src || cell?.avatar?.profileName)) {\n mediaContent = (\n <AvatarView profileName={cell?.avatar?.profileName} size={40} imgSrc={cell?.avatar?.src} />\n );\n }\n\n if (cell?.type === 'currency' && cell?.primaryCurrency?.currency) {\n mediaContent = (\n <Flag code={cell?.primaryCurrency?.currency?.toLowerCase()} intrinsicSize={24} />\n );\n }\n\n if (cell?.type === 'status') {\n mediaContent = <StatusIcon size={24} sentiment={cell?.sentiment ?? 'neutral'} />;\n }\n\n if (cell?.type === 'media' && cell.media) {\n // eslint-disable-next-line jsx-a11y/alt-text\n mediaContent = <img {...cell.media} />;\n }\n\n if (mediaContent) {\n return (\n <div\n aria-hidden=\"true\"\n className=\"np-table-content-media\"\n data-testid=\"np-table-content-media\"\n >\n {mediaContent}\n </div>\n );\n }\n };\n\n const formatCurrencyValue = (currency?: MoneyProps) => {\n if (currency) {\n return <Money amount={currency.amount} currency={currency.currency} alwaysShowDecimals />;\n }\n\n return '';\n };\n\n return (\n <td\n className={clsx(\n 'np-table-cell',\n cell?.type ? `np-table-cell--${cell?.type}` : '',\n `np-table-cell--${alignment}`,\n className,\n )}\n colSpan={colSpan}\n >\n {cell?.type === 'text' && cell?.text && (\n <TableStatusText text={cell?.text} status={cell?.status} />\n )}\n {cell?.type && ['leading', 'currency', 'status', 'media'].includes(cell?.type) && (\n <div\n className={clsx('np-table-content', {\n 'np-table-content--reversed': alignment === 'right',\n })}\n data-testid=\"np-table-content\"\n >\n {getContentMedia()}\n <div className=\"np-table-content-body\">\n {(cell?.primaryCurrency ?? cell?.primaryText) && (\n <TableStatusText\n text={\n cell?.type === 'currency'\n ? formatCurrencyValue(cell?.primaryCurrency)\n : (cell?.primaryText ?? '')\n }\n status={cell?.type !== 'status' ? cell?.status : undefined}\n typography=\"default-bold\"\n />\n )}\n {(cell?.secondaryCurrency ?? cell?.secondaryText) && (\n <Body>\n {cell?.type === 'currency'\n ? formatCurrencyValue(cell?.secondaryCurrency)\n : cell?.secondaryText}\n </Body>\n )}\n </div>\n </div>\n )}\n {children}\n </td>\n );\n};\n\nexport default TableCell;\n"],"names":["TableCell","cell","alignment","className","colSpan","children","getContentMedia","mediaContent","type","avatar","src","profileName","_jsx","AvatarView","size","imgSrc","primaryCurrency","currency","Flag","code","toLowerCase","intrinsicSize","StatusIcon","sentiment","media","formatCurrencyValue","Money","amount","alwaysShowDecimals","_jsxs","clsx","text","TableStatusText","status","includes","primaryText","undefined","typography","secondaryCurrency","secondaryText","Body"],"mappings":"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"}
1
+ {"version":3,"file":"TableCell.js","sources":["../../src/table/TableCell.tsx"],"sourcesContent":["import TableStatusText from './TableStatusText';\nimport StatusIcon from '../statusIcon';\nimport { Flag } from '@wise/art';\nimport React, { ImgHTMLAttributes } from 'react';\nimport { clsx } from 'clsx';\nimport Body from '../body';\nimport Money, { MoneyProps } from '../money';\nimport AvatarView, { AvatarViewProps } from '../avatarView';\n\ninterface TableCellTypeProp {\n type: 'leading' | 'text' | 'currency' | 'status' | 'media';\n}\n\n// `Media`, `Leading` and `Status` cell types have 2 text fields: `primaryText` and `secondaryText`\ninterface TableCellTextProps {\n primaryText?: string;\n secondaryText?: string;\n}\n\n// `Leading`, `Text` and `Currency` cells' types can have a status indicator with `error` or `success` values\ninterface TableCellStatusProp {\n status?: 'error' | 'success';\n}\n\nexport interface TableCellMedia extends TableCellTypeProp, TableCellTextProps {\n media?: ImgHTMLAttributes<HTMLImageElement>;\n}\n\nexport interface TableCellLeading\n extends TableCellTypeProp,\n TableCellTextProps,\n TableCellStatusProp {\n avatar?: Pick<AvatarViewProps, 'badge' | 'imgSrc' | 'profileName' | 'profileType'> & {\n asset?: AvatarViewProps['children'];\n /** @deprecated Use `\"imgSrc\" instead. */\n src?: AvatarViewProps['imgSrc'];\n };\n}\n\nexport interface TableCellText extends TableCellTypeProp, TableCellStatusProp {\n text?: string;\n}\n\nexport interface TableCellCurrency extends TableCellTypeProp, TableCellStatusProp {\n primaryCurrency?: MoneyProps;\n secondaryCurrency?: MoneyProps;\n flag?: boolean;\n}\n\nexport interface TableCellStatus extends TableCellTypeProp, TableCellTextProps {\n sentiment?: 'negative' | 'neutral' | 'positive' | 'warning' | 'pending';\n}\n\nexport interface TableCellType {\n cell?: TableCellLeading & TableCellText & TableCellCurrency & TableCellStatus & TableCellMedia;\n alignment?: 'left' | 'right';\n}\n\n// These properties should be exported only on the lib level to prevent visual issues because of incorrect usage.\nexport interface TableCellProps extends TableCellType {\n className?: string;\n colSpan?: number;\n children?: React.ReactNode;\n}\n\nconst TableCell = ({ cell, alignment = 'left', className, colSpan, children }: TableCellProps) => {\n const getContentMedia = () => {\n let mediaContent = null;\n\n if (cell?.type === 'leading' && cell?.avatar) {\n mediaContent = (\n <AvatarView size={40} {...cell.avatar} imgSrc={cell.avatar.imgSrc ?? cell.avatar.src}>\n {cell.avatar.asset}\n </AvatarView>\n );\n }\n\n if (cell?.type === 'currency' && cell?.primaryCurrency?.currency && cell?.flag !== false) {\n mediaContent = (\n <Flag code={cell?.primaryCurrency?.currency?.toLowerCase()} intrinsicSize={24} />\n );\n }\n\n if (cell?.type === 'status') {\n mediaContent = <StatusIcon size={24} sentiment={cell?.sentiment ?? 'neutral'} />;\n }\n\n if (cell?.type === 'media' && cell.media) {\n // eslint-disable-next-line jsx-a11y/alt-text\n mediaContent = <img {...cell.media} />;\n }\n\n if (mediaContent) {\n return (\n <div\n aria-hidden=\"true\"\n className=\"np-table-content-media\"\n data-testid=\"np-table-content-media\"\n >\n {mediaContent}\n </div>\n );\n }\n };\n\n const formatCurrencyValue = (currency?: MoneyProps) => {\n if (currency) {\n return <Money amount={currency.amount} currency={currency.currency} alwaysShowDecimals />;\n }\n\n return '';\n };\n\n return (\n <td\n className={clsx(\n 'np-table-cell',\n cell?.type ? `np-table-cell--${cell?.type}` : '',\n `np-table-cell--${alignment}`,\n className,\n )}\n colSpan={colSpan}\n >\n {cell?.type === 'text' && cell?.text && (\n <TableStatusText text={cell?.text} status={cell?.status} />\n )}\n {cell?.type && ['leading', 'currency', 'status', 'media'].includes(cell?.type) && (\n <div\n className={clsx('np-table-content', {\n 'np-table-content--reversed': alignment === 'right',\n })}\n data-testid=\"np-table-content\"\n >\n {getContentMedia()}\n <div className=\"np-table-content-body\">\n {(cell?.primaryCurrency ?? cell?.primaryText) && (\n <TableStatusText\n text={\n cell?.type === 'currency'\n ? formatCurrencyValue(cell?.primaryCurrency)\n : (cell?.primaryText ?? '')\n }\n status={cell?.type !== 'status' ? cell?.status : undefined}\n typography=\"default-bold\"\n />\n )}\n {(cell?.secondaryCurrency ?? cell?.secondaryText) && (\n <Body>\n {cell?.type === 'currency'\n ? formatCurrencyValue(cell?.secondaryCurrency)\n : cell?.secondaryText}\n </Body>\n )}\n </div>\n </div>\n )}\n {children}\n </td>\n );\n};\n\nexport default TableCell;\n"],"names":["TableCell","cell","alignment","className","colSpan","children","getContentMedia","mediaContent","type","avatar","_jsx","AvatarView","size","imgSrc","src","asset","primaryCurrency","currency","flag","Flag","code","toLowerCase","intrinsicSize","StatusIcon","sentiment","media","formatCurrencyValue","Money","amount","alwaysShowDecimals","_jsxs","clsx","text","TableStatusText","status","includes","primaryText","undefined","typography","secondaryCurrency","secondaryText","Body"],"mappings":"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"}
@@ -17,14 +17,15 @@ const TableCell = ({
17
17
  }) => {
18
18
  const getContentMedia = () => {
19
19
  let mediaContent = null;
20
- if (cell?.type === 'leading' && (cell?.avatar?.src || cell?.avatar?.profileName)) {
20
+ if (cell?.type === 'leading' && cell?.avatar) {
21
21
  mediaContent = /*#__PURE__*/jsx(AvatarView, {
22
- profileName: cell?.avatar?.profileName,
23
22
  size: 40,
24
- imgSrc: cell?.avatar?.src
23
+ ...cell.avatar,
24
+ imgSrc: cell.avatar.imgSrc ?? cell.avatar.src,
25
+ children: cell.avatar.asset
25
26
  });
26
27
  }
27
- if (cell?.type === 'currency' && cell?.primaryCurrency?.currency) {
28
+ if (cell?.type === 'currency' && cell?.primaryCurrency?.currency && cell?.flag !== false) {
28
29
  mediaContent = /*#__PURE__*/jsx(Flag, {
29
30
  code: cell?.primaryCurrency?.currency?.toLowerCase(),
30
31
  intrinsicSize: 24
@@ -1 +1 @@
1
- {"version":3,"file":"TableCell.mjs","sources":["../../src/table/TableCell.tsx"],"sourcesContent":["import TableStatusText from './TableStatusText';\nimport StatusIcon from '../statusIcon';\nimport { Flag } from '@wise/art';\nimport React, { ImgHTMLAttributes } from 'react';\nimport { clsx } from 'clsx';\nimport Body from '../body';\nimport Money, { MoneyProps } from '../money';\nimport AvatarView from '../avatarView';\n\ninterface TableCellTypeProp {\n type: 'leading' | 'text' | 'currency' | 'status' | 'media';\n}\n\n// `Media`, `Leading` and `Status` cell types have 2 text fields: `primaryText` and `secondaryText`\ninterface TableCellTextProps {\n primaryText?: string;\n secondaryText?: string;\n}\n\n// `Leading`, `Text` and `Currency` cells' types can have a status indicator with `error` or `success` values\ninterface TableCellStatusProp {\n status?: 'error' | 'success';\n}\n\nexport interface TableCellMedia extends TableCellTypeProp, TableCellTextProps {\n media?: ImgHTMLAttributes<HTMLImageElement>;\n}\n\nexport interface TableCellLeading\n extends TableCellTypeProp,\n TableCellTextProps,\n TableCellStatusProp {\n avatar?: {\n src?: string;\n profileName?: string | null;\n };\n}\n\nexport interface TableCellText extends TableCellTypeProp, TableCellStatusProp {\n text?: string;\n}\n\nexport interface TableCellCurrency extends TableCellTypeProp, TableCellStatusProp {\n primaryCurrency?: MoneyProps;\n secondaryCurrency?: MoneyProps;\n}\n\nexport interface TableCellStatus extends TableCellTypeProp, TableCellTextProps {\n sentiment?: 'negative' | 'neutral' | 'positive' | 'warning' | 'pending';\n}\n\nexport interface TableCellType {\n cell?: TableCellLeading & TableCellText & TableCellCurrency & TableCellStatus & TableCellMedia;\n alignment?: 'left' | 'right';\n}\n\n// These properties should be exported only on the lib level to prevent visual issues because of incorrect usage.\nexport interface TableCellProps extends TableCellType {\n className?: string;\n colSpan?: number;\n children?: React.ReactNode;\n}\n\nconst TableCell = ({ cell, alignment = 'left', className, colSpan, children }: TableCellProps) => {\n const getContentMedia = () => {\n let mediaContent = null;\n\n if (cell?.type === 'leading' && (cell?.avatar?.src || cell?.avatar?.profileName)) {\n mediaContent = (\n <AvatarView profileName={cell?.avatar?.profileName} size={40} imgSrc={cell?.avatar?.src} />\n );\n }\n\n if (cell?.type === 'currency' && cell?.primaryCurrency?.currency) {\n mediaContent = (\n <Flag code={cell?.primaryCurrency?.currency?.toLowerCase()} intrinsicSize={24} />\n );\n }\n\n if (cell?.type === 'status') {\n mediaContent = <StatusIcon size={24} sentiment={cell?.sentiment ?? 'neutral'} />;\n }\n\n if (cell?.type === 'media' && cell.media) {\n // eslint-disable-next-line jsx-a11y/alt-text\n mediaContent = <img {...cell.media} />;\n }\n\n if (mediaContent) {\n return (\n <div\n aria-hidden=\"true\"\n className=\"np-table-content-media\"\n data-testid=\"np-table-content-media\"\n >\n {mediaContent}\n </div>\n );\n }\n };\n\n const formatCurrencyValue = (currency?: MoneyProps) => {\n if (currency) {\n return <Money amount={currency.amount} currency={currency.currency} alwaysShowDecimals />;\n }\n\n return '';\n };\n\n return (\n <td\n className={clsx(\n 'np-table-cell',\n cell?.type ? `np-table-cell--${cell?.type}` : '',\n `np-table-cell--${alignment}`,\n className,\n )}\n colSpan={colSpan}\n >\n {cell?.type === 'text' && cell?.text && (\n <TableStatusText text={cell?.text} status={cell?.status} />\n )}\n {cell?.type && ['leading', 'currency', 'status', 'media'].includes(cell?.type) && (\n <div\n className={clsx('np-table-content', {\n 'np-table-content--reversed': alignment === 'right',\n })}\n data-testid=\"np-table-content\"\n >\n {getContentMedia()}\n <div className=\"np-table-content-body\">\n {(cell?.primaryCurrency ?? cell?.primaryText) && (\n <TableStatusText\n text={\n cell?.type === 'currency'\n ? formatCurrencyValue(cell?.primaryCurrency)\n : (cell?.primaryText ?? '')\n }\n status={cell?.type !== 'status' ? cell?.status : undefined}\n typography=\"default-bold\"\n />\n )}\n {(cell?.secondaryCurrency ?? cell?.secondaryText) && (\n <Body>\n {cell?.type === 'currency'\n ? formatCurrencyValue(cell?.secondaryCurrency)\n : cell?.secondaryText}\n </Body>\n )}\n </div>\n </div>\n )}\n {children}\n </td>\n );\n};\n\nexport default TableCell;\n"],"names":["TableCell","cell","alignment","className","colSpan","children","getContentMedia","mediaContent","type","avatar","src","profileName","_jsx","AvatarView","size","imgSrc","primaryCurrency","currency","Flag","code","toLowerCase","intrinsicSize","StatusIcon","sentiment","media","formatCurrencyValue","Money","amount","alwaysShowDecimals","_jsxs","clsx","text","TableStatusText","status","includes","primaryText","undefined","typography","secondaryCurrency","secondaryText","Body"],"mappings":"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"}
1
+ {"version":3,"file":"TableCell.mjs","sources":["../../src/table/TableCell.tsx"],"sourcesContent":["import TableStatusText from './TableStatusText';\nimport StatusIcon from '../statusIcon';\nimport { Flag } from '@wise/art';\nimport React, { ImgHTMLAttributes } from 'react';\nimport { clsx } from 'clsx';\nimport Body from '../body';\nimport Money, { MoneyProps } from '../money';\nimport AvatarView, { AvatarViewProps } from '../avatarView';\n\ninterface TableCellTypeProp {\n type: 'leading' | 'text' | 'currency' | 'status' | 'media';\n}\n\n// `Media`, `Leading` and `Status` cell types have 2 text fields: `primaryText` and `secondaryText`\ninterface TableCellTextProps {\n primaryText?: string;\n secondaryText?: string;\n}\n\n// `Leading`, `Text` and `Currency` cells' types can have a status indicator with `error` or `success` values\ninterface TableCellStatusProp {\n status?: 'error' | 'success';\n}\n\nexport interface TableCellMedia extends TableCellTypeProp, TableCellTextProps {\n media?: ImgHTMLAttributes<HTMLImageElement>;\n}\n\nexport interface TableCellLeading\n extends TableCellTypeProp,\n TableCellTextProps,\n TableCellStatusProp {\n avatar?: Pick<AvatarViewProps, 'badge' | 'imgSrc' | 'profileName' | 'profileType'> & {\n asset?: AvatarViewProps['children'];\n /** @deprecated Use `\"imgSrc\" instead. */\n src?: AvatarViewProps['imgSrc'];\n };\n}\n\nexport interface TableCellText extends TableCellTypeProp, TableCellStatusProp {\n text?: string;\n}\n\nexport interface TableCellCurrency extends TableCellTypeProp, TableCellStatusProp {\n primaryCurrency?: MoneyProps;\n secondaryCurrency?: MoneyProps;\n flag?: boolean;\n}\n\nexport interface TableCellStatus extends TableCellTypeProp, TableCellTextProps {\n sentiment?: 'negative' | 'neutral' | 'positive' | 'warning' | 'pending';\n}\n\nexport interface TableCellType {\n cell?: TableCellLeading & TableCellText & TableCellCurrency & TableCellStatus & TableCellMedia;\n alignment?: 'left' | 'right';\n}\n\n// These properties should be exported only on the lib level to prevent visual issues because of incorrect usage.\nexport interface TableCellProps extends TableCellType {\n className?: string;\n colSpan?: number;\n children?: React.ReactNode;\n}\n\nconst TableCell = ({ cell, alignment = 'left', className, colSpan, children }: TableCellProps) => {\n const getContentMedia = () => {\n let mediaContent = null;\n\n if (cell?.type === 'leading' && cell?.avatar) {\n mediaContent = (\n <AvatarView size={40} {...cell.avatar} imgSrc={cell.avatar.imgSrc ?? cell.avatar.src}>\n {cell.avatar.asset}\n </AvatarView>\n );\n }\n\n if (cell?.type === 'currency' && cell?.primaryCurrency?.currency && cell?.flag !== false) {\n mediaContent = (\n <Flag code={cell?.primaryCurrency?.currency?.toLowerCase()} intrinsicSize={24} />\n );\n }\n\n if (cell?.type === 'status') {\n mediaContent = <StatusIcon size={24} sentiment={cell?.sentiment ?? 'neutral'} />;\n }\n\n if (cell?.type === 'media' && cell.media) {\n // eslint-disable-next-line jsx-a11y/alt-text\n mediaContent = <img {...cell.media} />;\n }\n\n if (mediaContent) {\n return (\n <div\n aria-hidden=\"true\"\n className=\"np-table-content-media\"\n data-testid=\"np-table-content-media\"\n >\n {mediaContent}\n </div>\n );\n }\n };\n\n const formatCurrencyValue = (currency?: MoneyProps) => {\n if (currency) {\n return <Money amount={currency.amount} currency={currency.currency} alwaysShowDecimals />;\n }\n\n return '';\n };\n\n return (\n <td\n className={clsx(\n 'np-table-cell',\n cell?.type ? `np-table-cell--${cell?.type}` : '',\n `np-table-cell--${alignment}`,\n className,\n )}\n colSpan={colSpan}\n >\n {cell?.type === 'text' && cell?.text && (\n <TableStatusText text={cell?.text} status={cell?.status} />\n )}\n {cell?.type && ['leading', 'currency', 'status', 'media'].includes(cell?.type) && (\n <div\n className={clsx('np-table-content', {\n 'np-table-content--reversed': alignment === 'right',\n })}\n data-testid=\"np-table-content\"\n >\n {getContentMedia()}\n <div className=\"np-table-content-body\">\n {(cell?.primaryCurrency ?? cell?.primaryText) && (\n <TableStatusText\n text={\n cell?.type === 'currency'\n ? formatCurrencyValue(cell?.primaryCurrency)\n : (cell?.primaryText ?? '')\n }\n status={cell?.type !== 'status' ? cell?.status : undefined}\n typography=\"default-bold\"\n />\n )}\n {(cell?.secondaryCurrency ?? cell?.secondaryText) && (\n <Body>\n {cell?.type === 'currency'\n ? formatCurrencyValue(cell?.secondaryCurrency)\n : cell?.secondaryText}\n </Body>\n )}\n </div>\n </div>\n )}\n {children}\n </td>\n );\n};\n\nexport default TableCell;\n"],"names":["TableCell","cell","alignment","className","colSpan","children","getContentMedia","mediaContent","type","avatar","_jsx","AvatarView","size","imgSrc","src","asset","primaryCurrency","currency","flag","Flag","code","toLowerCase","intrinsicSize","StatusIcon","sentiment","media","formatCurrencyValue","Money","amount","alwaysShowDecimals","_jsxs","clsx","text","TableStatusText","status","includes","primaryText","undefined","typography","secondaryCurrency","secondaryText","Body"],"mappings":";;;;;;;;;;AAiEA,MAAMA,SAAS,GAAGA,CAAC;EAAEC,IAAI;AAAEC,EAAAA,SAAS,GAAG,MAAM;EAAEC,SAAS;EAAEC,OAAO;AAAEC,EAAAA;AAAQ,CAAkB,KAAI;EAC/F,MAAMC,eAAe,GAAGA,MAAK;IAC3B,IAAIC,YAAY,GAAG,IAAI;IAEvB,IAAIN,IAAI,EAAEO,IAAI,KAAK,SAAS,IAAIP,IAAI,EAAEQ,MAAM,EAAE;MAC5CF,YAAY,gBACVG,GAAA,CAACC,UAAU,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;QAAA,GAAKX,IAAI,CAACQ,MAAM;QAAEI,MAAM,EAAEZ,IAAI,CAACQ,MAAM,CAACI,MAAM,IAAIZ,IAAI,CAACQ,MAAM,CAACK,GAAI;AAAAT,QAAAA,QAAA,EAClFJ,IAAI,CAACQ,MAAM,CAACM;AAAK,OACR,CACb;AACH,IAAA;AAEA,IAAA,IAAId,IAAI,EAAEO,IAAI,KAAK,UAAU,IAAIP,IAAI,EAAEe,eAAe,EAAEC,QAAQ,IAAIhB,IAAI,EAAEiB,IAAI,KAAK,KAAK,EAAE;MACxFX,YAAY,gBACVG,GAAA,CAACS,IAAI,EAAA;QAACC,IAAI,EAAEnB,IAAI,EAAEe,eAAe,EAAEC,QAAQ,EAAEI,WAAW,EAAG;AAACC,QAAAA,aAAa,EAAE;AAAG,OAAA,CAC/E;AACH,IAAA;AAEA,IAAA,IAAIrB,IAAI,EAAEO,IAAI,KAAK,QAAQ,EAAE;MAC3BD,YAAY,gBAAGG,GAAA,CAACa,UAAU,EAAA;AAACX,QAAAA,IAAI,EAAE,EAAG;AAACY,QAAAA,SAAS,EAAEvB,IAAI,EAAEuB,SAAS,IAAI;AAAU,QAAG;AAClF,IAAA;IAEA,IAAIvB,IAAI,EAAEO,IAAI,KAAK,OAAO,IAAIP,IAAI,CAACwB,KAAK,EAAE;AACxC;AACAlB,MAAAA,YAAY,gBAAGG,GAAA,CAAA,KAAA,EAAA;AAAA,QAAA,GAAST,IAAI,CAACwB;AAAK,OAAC,CAAG;AACxC,IAAA;AAEA,IAAA,IAAIlB,YAAY,EAAE;AAChB,MAAA,oBACEG,GAAA,CAAA,KAAA,EAAA;AACE,QAAA,aAAA,EAAY,MAAM;AAClBP,QAAAA,SAAS,EAAC,wBAAwB;AAClC,QAAA,aAAA,EAAY,wBAAwB;AAAAE,QAAAA,QAAA,EAEnCE;AAAY,OACV,CAAC;AAEV,IAAA;EACF,CAAC;EAED,MAAMmB,mBAAmB,GAAIT,QAAqB,IAAI;AACpD,IAAA,IAAIA,QAAQ,EAAE;MACZ,oBAAOP,GAAA,CAACiB,KAAK,EAAA;QAACC,MAAM,EAAEX,QAAQ,CAACW,MAAO;QAACX,QAAQ,EAAEA,QAAQ,CAACA,QAAS;QAACY,kBAAkB,EAAA;AAAA,OAAA,CAAG;AAC3F,IAAA;AAEA,IAAA,OAAO,EAAE;EACX,CAAC;AAED,EAAA,oBACEC,IAAA,CAAA,IAAA,EAAA;IACE3B,SAAS,EAAE4B,IAAI,CACb,eAAe,EACf9B,IAAI,EAAEO,IAAI,GAAG,CAAA,eAAA,EAAkBP,IAAI,EAAEO,IAAI,CAAA,CAAE,GAAG,EAAE,EAChD,kBAAkBN,SAAS,CAAA,CAAE,EAC7BC,SAAS,CACT;AACFC,IAAAA,OAAO,EAAEA,OAAQ;AAAAC,IAAAA,QAAA,EAAA,CAEhBJ,IAAI,EAAEO,IAAI,KAAK,MAAM,IAAIP,IAAI,EAAE+B,IAAI,iBAClCtB,GAAA,CAACuB,eAAe,EAAA;MAACD,IAAI,EAAE/B,IAAI,EAAE+B,IAAK;MAACE,MAAM,EAAEjC,IAAI,EAAEiC;KAAO,CACzD,EACAjC,IAAI,EAAEO,IAAI,IAAI,CAAC,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC2B,QAAQ,CAAClC,IAAI,EAAEO,IAAI,CAAC,iBAC5EsB,IAAA,CAAA,KAAA,EAAA;AACE3B,MAAAA,SAAS,EAAE4B,IAAI,CAAC,kBAAkB,EAAE;QAClC,4BAA4B,EAAE7B,SAAS,KAAK;AAC7C,OAAA,CAAE;AACH,MAAA,aAAA,EAAY,kBAAkB;AAAAG,MAAAA,QAAA,EAAA,CAE7BC,eAAe,EAAE,eAClBwB,IAAA,CAAA,KAAA,EAAA;AAAK3B,QAAAA,SAAS,EAAC,uBAAuB;AAAAE,QAAAA,QAAA,EAAA,CACnC,CAACJ,IAAI,EAAEe,eAAe,IAAIf,IAAI,EAAEmC,WAAW,kBAC1C1B,GAAA,CAACuB,eAAe,EAAA;AACdD,UAAAA,IAAI,EACF/B,IAAI,EAAEO,IAAI,KAAK,UAAU,GACrBkB,mBAAmB,CAACzB,IAAI,EAAEe,eAAe,CAAC,GACzCf,IAAI,EAAEmC,WAAW,IAAI,EAC3B;UACDF,MAAM,EAAEjC,IAAI,EAAEO,IAAI,KAAK,QAAQ,GAAGP,IAAI,EAAEiC,MAAM,GAAGG,SAAU;AAC3DC,UAAAA,UAAU,EAAC;AAAc,SAAA,CAE5B,EACA,CAACrC,IAAI,EAAEsC,iBAAiB,IAAItC,IAAI,EAAEuC,aAAa,kBAC9C9B,GAAA,CAAC+B,IAAI,EAAA;AAAApC,UAAAA,QAAA,EACFJ,IAAI,EAAEO,IAAI,KAAK,UAAU,GACtBkB,mBAAmB,CAACzB,IAAI,EAAEsC,iBAAiB,CAAC,GAC5CtC,IAAI,EAAEuC;AAAa,SACnB,CACP;AAAA,OACE,CACP;KAAK,CACN,EACAnC,QAAQ;AAAA,GACP,CAAC;AAET;;;;"}
@@ -1,5 +1,6 @@
1
1
  import React, { ImgHTMLAttributes } from 'react';
2
2
  import { MoneyProps } from '../money';
3
+ import { AvatarViewProps } from '../avatarView';
3
4
  interface TableCellTypeProp {
4
5
  type: 'leading' | 'text' | 'currency' | 'status' | 'media';
5
6
  }
@@ -14,9 +15,10 @@ export interface TableCellMedia extends TableCellTypeProp, TableCellTextProps {
14
15
  media?: ImgHTMLAttributes<HTMLImageElement>;
15
16
  }
16
17
  export interface TableCellLeading extends TableCellTypeProp, TableCellTextProps, TableCellStatusProp {
17
- avatar?: {
18
- src?: string;
19
- profileName?: string | null;
18
+ avatar?: Pick<AvatarViewProps, 'badge' | 'imgSrc' | 'profileName' | 'profileType'> & {
19
+ asset?: AvatarViewProps['children'];
20
+ /** @deprecated Use `"imgSrc" instead. */
21
+ src?: AvatarViewProps['imgSrc'];
20
22
  };
21
23
  }
22
24
  export interface TableCellText extends TableCellTypeProp, TableCellStatusProp {
@@ -25,6 +27,7 @@ export interface TableCellText extends TableCellTypeProp, TableCellStatusProp {
25
27
  export interface TableCellCurrency extends TableCellTypeProp, TableCellStatusProp {
26
28
  primaryCurrency?: MoneyProps;
27
29
  secondaryCurrency?: MoneyProps;
30
+ flag?: boolean;
28
31
  }
29
32
  export interface TableCellStatus extends TableCellTypeProp, TableCellTextProps {
30
33
  sentiment?: 'negative' | 'neutral' | 'positive' | 'warning' | 'pending';
@@ -1 +1 @@
1
- {"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../src/table/TableCell.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGjD,OAAc,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAG7C,UAAU,iBAAiB;IACzB,IAAI,EAAE,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;CAC5D;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,cAAe,SAAQ,iBAAiB,EAAE,kBAAkB;IAC3E,KAAK,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;CAC7C;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,GAAG,cAAc,CAAC;IAC/F,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,GAAI,mDAA4D,cAAc,sBA4F5F,CAAC;AAEF,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../src/table/TableCell.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGjD,OAAc,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,UAAU,iBAAiB;IACzB,IAAI,EAAE,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;CAC5D;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,cAAe,SAAQ,iBAAiB,EAAE,kBAAkB;IAC3E,KAAK,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;CAC7C;AAED,MAAM,WAAW,gBACf,SAAQ,iBAAiB,EACvB,kBAAkB,EAClB,mBAAmB;IACrB,MAAM,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,OAAO,GAAG,QAAQ,GAAG,aAAa,GAAG,aAAa,CAAC,GAAG;QACnF,KAAK,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;QACpC,yCAAyC;QACzC,GAAG,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC;KACjC,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;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;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,GAAG,cAAc,CAAC;IAC/F,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,GAAI,mDAA4D,cAAc,sBA8F5F,CAAC;AAEF,eAAe,SAAS,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "46.113.1",
3
+ "version": "46.114.0",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -84,10 +84,10 @@
84
84
  "storybook-addon-tag-badges": "^2.0.2",
85
85
  "storybook-addon-test-codegen": "^2.0.1",
86
86
  "framer-motion": "^12.23.22",
87
- "@transferwise/neptune-css": "14.25.1",
87
+ "@transferwise/less-config": "3.1.2",
88
+ "@transferwise/neptune-css": "14.25.2",
88
89
  "@wise/components-theming": "1.7.0",
89
- "@wise/wds-configs": "0.0.0",
90
- "@transferwise/less-config": "3.1.2"
90
+ "@wise/wds-configs": "0.0.0"
91
91
  },
92
92
  "peerDependencies": {
93
93
  "@transferwise/icons": "^3 || ^4",
package/src/i18n/cs.json CHANGED
@@ -16,6 +16,8 @@
16
16
  "neptune.DateLookup.selected": "vybráno",
17
17
  "neptune.DateLookup.twentyYears": "20 let",
18
18
  "neptune.DateLookup.year": "rok",
19
+ "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Napište měnu/zemi",
20
+ "neptune.ExpressiveMoneyInput.currency.select.currency": "Vybrat měnu",
19
21
  "neptune.FlowNavigation.back": "zpět na předchozí krok",
20
22
  "neptune.Info.ariaLabel": "Více informací",
21
23
  "neptune.Label.optional": "(Volitelné)",
package/src/i18n/de.json CHANGED
@@ -16,6 +16,8 @@
16
16
  "neptune.DateLookup.selected": "ausgewählt",
17
17
  "neptune.DateLookup.twentyYears": "20 Jahre",
18
18
  "neptune.DateLookup.year": "Jahr",
19
+ "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Gib eine Währung / ein Land ein",
20
+ "neptune.ExpressiveMoneyInput.currency.select.currency": "Wähle eine Währung",
19
21
  "neptune.FlowNavigation.back": "zurück zum vorherigen Schritt",
20
22
  "neptune.Info.ariaLabel": "Weitere Informationen",
21
23
  "neptune.Label.optional": "(Optional)",
package/src/i18n/es.json CHANGED
@@ -16,6 +16,8 @@
16
16
  "neptune.DateLookup.selected": "seleccionado",
17
17
  "neptune.DateLookup.twentyYears": "20 años",
18
18
  "neptune.DateLookup.year": "año",
19
+ "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Indica una divisa/país",
20
+ "neptune.ExpressiveMoneyInput.currency.select.currency": "Seleccionar divisa",
19
21
  "neptune.FlowNavigation.back": "volver al paso anterior",
20
22
  "neptune.Info.ariaLabel": "Más información",
21
23
  "neptune.Label.optional": "(Opcional)",
package/src/i18n/fr.json CHANGED
@@ -16,6 +16,8 @@
16
16
  "neptune.DateLookup.selected": "sélectionnée",
17
17
  "neptune.DateLookup.twentyYears": "20 ans",
18
18
  "neptune.DateLookup.year": "année",
19
+ "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Entrez une devise/un pays",
20
+ "neptune.ExpressiveMoneyInput.currency.select.currency": "Sélectionnez une devise",
19
21
  "neptune.FlowNavigation.back": "revenir à l'étape précédente",
20
22
  "neptune.Info.ariaLabel": "Plus d'informations",
21
23
  "neptune.Label.optional": "(facultatif)",
package/src/i18n/hu.json CHANGED
@@ -16,6 +16,8 @@
16
16
  "neptune.DateLookup.selected": "kiválasztva",
17
17
  "neptune.DateLookup.twentyYears": "20 év",
18
18
  "neptune.DateLookup.year": "év",
19
+ "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Írj be egy pénznemet/országot",
20
+ "neptune.ExpressiveMoneyInput.currency.select.currency": "Pénznem kiválasztása",
19
21
  "neptune.FlowNavigation.back": "vissza az előző lépéshez",
20
22
  "neptune.Info.ariaLabel": "További információ",
21
23
  "neptune.Label.optional": "(Válaszható)",
package/src/i18n/id.json CHANGED
@@ -16,6 +16,8 @@
16
16
  "neptune.DateLookup.selected": "terpilih",
17
17
  "neptune.DateLookup.twentyYears": "20 tahun",
18
18
  "neptune.DateLookup.year": "tahun",
19
+ "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Ketik mata uang/negara",
20
+ "neptune.ExpressiveMoneyInput.currency.select.currency": "Pilih mata uang",
19
21
  "neptune.FlowNavigation.back": "kembali ke langkah sebelumnya",
20
22
  "neptune.Info.ariaLabel": "Informasi lebih lanjut",
21
23
  "neptune.Label.optional": "(Opsional)",
package/src/i18n/it.json CHANGED
@@ -16,6 +16,8 @@
16
16
  "neptune.DateLookup.selected": "selezionata",
17
17
  "neptune.DateLookup.twentyYears": "20 anni",
18
18
  "neptune.DateLookup.year": "anno",
19
+ "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Digita una valuta / paese",
20
+ "neptune.ExpressiveMoneyInput.currency.select.currency": "Scegli la valuta",
19
21
  "neptune.FlowNavigation.back": "torna al passaggio precedente",
20
22
  "neptune.Info.ariaLabel": "Maggiori informazioni",
21
23
  "neptune.Label.optional": "(Facoltativo)",
package/src/i18n/ja.json CHANGED
@@ -16,6 +16,8 @@
16
16
  "neptune.DateLookup.selected": "選択済み",
17
17
  "neptune.DateLookup.twentyYears": "20年",
18
18
  "neptune.DateLookup.year": "年",
19
+ "neptune.ExpressiveMoneyInput.currency.search.placeholder": "通貨または国をご入力ください",
20
+ "neptune.ExpressiveMoneyInput.currency.select.currency": "通貨の選択",
19
21
  "neptune.FlowNavigation.back": "前のステップに戻る",
20
22
  "neptune.Info.ariaLabel": "詳細",
21
23
  "neptune.Label.optional": "(任意)",
package/src/i18n/nl.json CHANGED
@@ -16,6 +16,8 @@
16
16
  "neptune.DateLookup.selected": "geselecteerd",
17
17
  "neptune.DateLookup.twentyYears": "20 jaar",
18
18
  "neptune.DateLookup.year": "jaar",
19
+ "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Typ valuta / land",
20
+ "neptune.ExpressiveMoneyInput.currency.select.currency": "Selecteer valuta",
19
21
  "neptune.FlowNavigation.back": "terug naar vorige stap",
20
22
  "neptune.Info.ariaLabel": "Meer informatie",
21
23
  "neptune.Label.optional": "(Optioneel)",
package/src/i18n/pl.json CHANGED
@@ -16,6 +16,8 @@
16
16
  "neptune.DateLookup.selected": "wybrano",
17
17
  "neptune.DateLookup.twentyYears": "20 lat",
18
18
  "neptune.DateLookup.year": "rok",
19
+ "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Wpisz walutę / kraj",
20
+ "neptune.ExpressiveMoneyInput.currency.select.currency": "Wybierz walutę",
19
21
  "neptune.FlowNavigation.back": "wróć do poprzedniego kroku",
20
22
  "neptune.Info.ariaLabel": "Więcej informacji",
21
23
  "neptune.Label.optional": "(opcjonalne)",
package/src/i18n/pt.json CHANGED
@@ -16,6 +16,8 @@
16
16
  "neptune.DateLookup.selected": "selecionada",
17
17
  "neptune.DateLookup.twentyYears": "20 anos",
18
18
  "neptune.DateLookup.year": "ano",
19
+ "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Digite uma moeda / país",
20
+ "neptune.ExpressiveMoneyInput.currency.select.currency": "Selecione a moeda",
19
21
  "neptune.FlowNavigation.back": "voltar à etapa anterior",
20
22
  "neptune.Info.ariaLabel": "Mais informações",
21
23
  "neptune.Label.optional": "(Opcional)",
package/src/i18n/ro.json CHANGED
@@ -16,6 +16,8 @@
16
16
  "neptune.DateLookup.selected": "selectată",
17
17
  "neptune.DateLookup.twentyYears": "20 de ani",
18
18
  "neptune.DateLookup.year": "an",
19
+ "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Tastează o monedă / țară",
20
+ "neptune.ExpressiveMoneyInput.currency.select.currency": "Selectează moneda",
19
21
  "neptune.FlowNavigation.back": "înapoi la pasul anterior",
20
22
  "neptune.Info.ariaLabel": "Mai multe informații",
21
23
  "neptune.Label.optional": "(Opțional)",
package/src/i18n/ru.json CHANGED
@@ -16,6 +16,8 @@
16
16
  "neptune.DateLookup.selected": "выбрано",
17
17
  "neptune.DateLookup.twentyYears": "20 лет",
18
18
  "neptune.DateLookup.year": "год",
19
+ "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Введите валюту/страну",
20
+ "neptune.ExpressiveMoneyInput.currency.select.currency": "Выберите валюту",
19
21
  "neptune.FlowNavigation.back": "вернуться к предыдущему шагу",
20
22
  "neptune.Info.ariaLabel": "Подробнее",
21
23
  "neptune.Label.optional": "(необязательно)",
package/src/i18n/th.json CHANGED
@@ -16,6 +16,8 @@
16
16
  "neptune.DateLookup.selected": "เลือกแล้ว",
17
17
  "neptune.DateLookup.twentyYears": "20 ปี",
18
18
  "neptune.DateLookup.year": "ปี",
19
+ "neptune.ExpressiveMoneyInput.currency.search.placeholder": "ป้อนสกุลเงิน / ประเทศ",
20
+ "neptune.ExpressiveMoneyInput.currency.select.currency": "เลือกสกุลเงิน",
19
21
  "neptune.FlowNavigation.back": "กลับไปที่ขั้นก่อนหน้า",
20
22
  "neptune.Info.ariaLabel": "ข้อมูลเพิ่มเติม",
21
23
  "neptune.Label.optional": "(ไม่บังคับ)",
package/src/i18n/tr.json CHANGED
@@ -16,6 +16,8 @@
16
16
  "neptune.DateLookup.selected": "seçili",
17
17
  "neptune.DateLookup.twentyYears": "20 yıl",
18
18
  "neptune.DateLookup.year": "yıl",
19
+ "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Bir para birimi / ülke girin",
20
+ "neptune.ExpressiveMoneyInput.currency.select.currency": "Para birimi seçin",
19
21
  "neptune.FlowNavigation.back": "önceki adıma dön",
20
22
  "neptune.Info.ariaLabel": "Daha fazla bilgi",
21
23
  "neptune.Label.optional": "(İsteğe bağlı)",
@@ -16,6 +16,8 @@
16
16
  "neptune.DateLookup.selected": "已选",
17
17
  "neptune.DateLookup.twentyYears": "20 年",
18
18
  "neptune.DateLookup.year": "年",
19
+ "neptune.ExpressiveMoneyInput.currency.search.placeholder": "输入货币/国家/地区",
20
+ "neptune.ExpressiveMoneyInput.currency.select.currency": "选择货币",
19
21
  "neptune.FlowNavigation.back": "返回上一步",
20
22
  "neptune.Info.ariaLabel": "更多信息",
21
23
  "neptune.Label.optional": "(可选)",
@@ -16,6 +16,8 @@
16
16
  "neptune.DateLookup.selected": "已選",
17
17
  "neptune.DateLookup.twentyYears": "20年",
18
18
  "neptune.DateLookup.year": "年",
19
+ "neptune.ExpressiveMoneyInput.currency.search.placeholder": "輸入貨幣或國家/地區",
20
+ "neptune.ExpressiveMoneyInput.currency.select.currency": "選擇貨幣",
19
21
  "neptune.FlowNavigation.back": "返回上一個步驟",
20
22
  "neptune.Info.ariaLabel": "更多資訊",
21
23
  "neptune.Label.optional": "(可選)",
@@ -1,4 +1,3 @@
1
- import React from 'react';
2
1
  import { render, screen, mockMatchMedia } from '../test-utils';
3
2
  import { userEvent } from '@testing-library/user-event';
4
3
  import '@testing-library/jest-dom';
@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
2
2
  import Table from './Table';
3
3
  import { TableHeaderType } from './TableHeader';
4
4
  import { TableRowType, TableRowClickableType } from './TableRow';
5
+ import { DirectDebits } from '@transferwise/icons';
5
6
 
6
7
  export default {
7
8
  component: Table,
@@ -46,6 +47,9 @@ const tableData = {
46
47
  secondaryText: 'Software Engineer',
47
48
  avatar: {
48
49
  profileName: 'Bob Brown',
50
+ badge: {
51
+ flagCode: 'GBP',
52
+ },
49
53
  },
50
54
  },
51
55
  },
@@ -105,7 +109,10 @@ const tableData = {
105
109
  primaryText: 'Jan Kowalski',
106
110
  secondaryText: 'Product Manager',
107
111
  avatar: {
108
- profileName: 'Jan Kowalski',
112
+ asset: <DirectDebits />,
113
+ badge: {
114
+ status: 'warning',
115
+ },
109
116
  },
110
117
  },
111
118
  },
@@ -124,6 +131,7 @@ const tableData = {
124
131
  {
125
132
  cell: {
126
133
  type: 'currency',
134
+ flag: false,
127
135
  primaryCurrency: {
128
136
  amount: 23456.78,
129
137
  currency: 'usd',
@@ -166,6 +174,9 @@ const tableData = {
166
174
  secondaryText: 'Data Scientist',
167
175
  avatar: {
168
176
  profileName: 'William Davis',
177
+ badge: {
178
+ type: 'reference',
179
+ },
169
180
  },
170
181
  },
171
182
  },
@@ -107,12 +107,12 @@ describe('TableCell Component', () => {
107
107
  expect(screen.getByText('Frontend Developer')).toBeInTheDocument();
108
108
  });
109
109
 
110
- it('renders `leading` cell type without media content when `profileName` is not provided', () => {
110
+ it('renders `leading` cell type without media content when `avatar` is not provided', () => {
111
111
  render(
112
112
  <TableCell
113
113
  cell={{
114
114
  ...cellContentMocks.leading,
115
- avatar: { profileName: undefined },
115
+ avatar: undefined,
116
116
  }}
117
117
  />,
118
118
  );