@transferwise/components 46.113.1 → 46.114.0

package/src/table/TableCell.tsx

@@ -5,7 +5,7 @@ import React, { ImgHTMLAttributes } from 'react';
 import { clsx } from 'clsx';
 import Body from '../body';
 import Money, { MoneyProps } from '../money';
-import AvatarView from '../avatarView';
+import AvatarView, { AvatarViewProps } from '../avatarView';
 
 interface TableCellTypeProp {
   type: 'leading' | 'text' | 'currency' | 'status' | 'media';
@@ -30,9 +30,10 @@ export interface TableCellLeading
   extends TableCellTypeProp,
     TableCellTextProps,
     TableCellStatusProp {
-  avatar?: {
-    src?: string;
-    profileName?: string | null;
+  avatar?: Pick<AvatarViewProps, 'badge' | 'imgSrc' | 'profileName' | 'profileType'> & {
+    asset?: AvatarViewProps['children'];
+    /** @deprecated Use `"imgSrc" instead. */
+    src?: AvatarViewProps['imgSrc'];
   };
 }
 
@@ -43,6 +44,7 @@ export interface TableCellText extends TableCellTypeProp, TableCellStatusProp {
 export interface TableCellCurrency extends TableCellTypeProp, TableCellStatusProp {
   primaryCurrency?: MoneyProps;
   secondaryCurrency?: MoneyProps;
+  flag?: boolean;
 }
 
 export interface TableCellStatus extends TableCellTypeProp, TableCellTextProps {
@@ -65,13 +67,15 @@ const TableCell = ({ cell, alignment = 'left', className, colSpan, children }: T
   const getContentMedia = () => {
     let mediaContent = null;
 
-    if (cell?.type === 'leading' && (cell?.avatar?.src || cell?.avatar?.profileName)) {
+    if (cell?.type === 'leading' && cell?.avatar) {
       mediaContent = (
-        <AvatarView profileName={cell?.avatar?.profileName} size={40} imgSrc={cell?.avatar?.src} />
+        <AvatarView size={40} {...cell.avatar} imgSrc={cell.avatar.imgSrc ?? cell.avatar.src}>
+          {cell.avatar.asset}
+        </AvatarView>
       );
     }
 
-    if (cell?.type === 'currency' && cell?.primaryCurrency?.currency) {
+    if (cell?.type === 'currency' && cell?.primaryCurrency?.currency && cell?.flag !== false) {
       mediaContent = (
         <Flag code={cell?.primaryCurrency?.currency?.toLowerCase()} intrinsicSize={24} />
       );