@transferwise/components 0.0.0-experimental-76bb7cd → 0.0.0-experimental-54cbbb2

package/src/overlayHeader/OverlayHeader.story.tsx

@@ -2,9 +2,8 @@ import { action } from '@storybook/addon-actions';
 import { select, text } from '@storybook/addon-knobs';
 import { Person as ProfileIcon, Briefcase as BriefcaseIcon } from '@transferwise/icons';
 
-import Avatar, { AvatarType } from '../avatar';
-import AvatarWrapper from '../avatarWrapper';
-import { ProfileType, Size } from '../common';
+import AvatarView from '../avatarView';
+import { ProfileType } from '../common';
 import Logo from '../logo';
 
 import OverlayHeader from './OverlayHeader';
@@ -29,11 +28,7 @@ export const Basic = () => {
   return (
     <OverlayHeader
       logo={<Logo />}
-      avatar={
-        <Avatar type={AvatarType.ICON} size={Size.MEDIUM}>
-          {avatarProfiles[showAvatar]}
-        </Avatar>
-      }
+      avatar={<AvatarView>{avatarProfiles[showAvatar]}</AvatarView>}
       onClose={action('Close clicked')}
     />
   );
@@ -46,13 +41,13 @@ export const WithAvatarWrapper = () => {
   );
   const profileType = select(
     'profileType',
-    Object.keys(ProfileType) as `${ProfileType}`[],
+    [ProfileType.PERSONAL, ProfileType.BUSINESS],
     undefined,
   );
   return (
     <OverlayHeader
       logo={<Logo />}
-      avatar={<AvatarWrapper url={avatarURL} profileType={profileType} />}
+      avatar={<AvatarView imgSrc={avatarURL} profileType={profileType?.toLowerCase()} />}
       onClose={action('Close clicked')}
     />
   );

package/src/radio/Radio.story.tsx

@@ -2,7 +2,7 @@ import { boolean, text } from '@storybook/addon-knobs';
 import { Flag } from '@wise/art';
 import { useState } from 'react';
 
-import Avatar, { AvatarType } from '../avatar';
+import AvatarView from '../avatarView';
 import Checkbox from '../checkbox';
 
 import Radio from './Radio';
@@ -32,9 +32,9 @@ export const Basic = () => {
           disabled={disabled}
           avatar={
             showAvatar ? (
-              <Avatar type={AvatarType.THUMBNAIL}>
+              <AvatarView>
                 <Flag code="IMP" />
-              </Avatar>
+              </AvatarView>
             ) : null
           }
           onChange={() => setChecked(!checked)}
@@ -50,9 +50,9 @@ export const Basic = () => {
           secondary={secondary}
           avatar={
             showAvatar ? (
-              <Avatar type={AvatarType.THUMBNAIL}>
+              <AvatarView>
                 <Flag code="KES" />
-              </Avatar>
+              </AvatarView>
             ) : null
           }
           onChange={() => setChecked(!checked)}

package/src/radioGroup/RadioGroup.story.tsx

@@ -1,6 +1,6 @@
 import { Flag } from '@wise/art';
 
-import Avatar, { AvatarType } from '../avatar';
+import AvatarView from '../avatarView';
 
 import RadioGroup, { RadioGroupProps, RadioGroupRadio } from './RadioGroup';
 import { Field } from '../field/Field';
@@ -52,9 +52,9 @@ export const WithAvatars = {
         ({
           ...radio,
           avatar: (
-            <Avatar type={AvatarType.THUMBNAIL}>
+            <AvatarView>
               <Flag code="NZD" />
-            </Avatar>
+            </AvatarView>
           ),
         }) satisfies RadioGroupRadio,
     ),

package/src/selectOption/SelectOption.story.tsx

@@ -8,8 +8,7 @@ import SelectOption, {
 import { Bank, BankTransfer, Beach, Briefcase, Card, Plane } from '@transferwise/icons';
 import { Field } from '../field/Field';
 import { lorem10 } from '../test-utils';
-import Badge from '../badge';
-import Avatar from '../avatar';
+import AvatarView from '../avatarView';
 import { Sentiment } from '../common';
 import { useState } from 'react';
 
@@ -116,57 +115,59 @@ const paymentMethods: SelectOptiopsSection<CustomData>[] = [
 ];
 
 const balances: SelectOptiopsSection[] = [
-  {
-    title: 'Balances',
-    options: [
-      {
-        media: <Flag code="gbp" />,
-        title: 'Wise GBP balance',
-      },
-      {
-        media: <Flag code="eur" />,
-        title: 'Wise EUR balance',
-      },
-    ],
-  },
   {
     title: 'Jars',
     options: [
       {
         media: (
-          <Badge badge={<Flag code="usd" />} size="md">
-            <Avatar type="icon" size="md" backgroundColor="var(--color-bright-pink)">
-              <Beach size="24" />
-            </Avatar>
-          </Badge>
+          <AvatarView
+            badge={{ flagCode: 'usd' }}
+            style={{ backgroundColor: 'var(--color-bright-pink)' }}
+            profileName="Tim Cook"
+          />
         ),
         title: 'Hawaii Holiday',
         content: 'Wise USD jar',
       },
       {
         media: (
-          <Badge badge={<Flag code="aed" />} size="md">
-            <Avatar type="icon" size="md" backgroundColor="var(--color-bright-yellow)">
-              <Briefcase size="24" />
-            </Avatar>
-          </Badge>
+          <AvatarView
+            badge={{ flagCode: 'aed' }}
+            style={{ backgroundColor: 'var(--color-bright-yellow)' }}
+          >
+            <Briefcase />
+          </AvatarView>
         ),
         title: 'Emirates Business Trip',
         content: 'Wise AED jar',
       },
       {
         media: (
-          <Badge badge={<Flag code="jpy" />} size="md">
-            <Avatar type="icon" size="md" backgroundColor="var(--color-bright-blue)">
-              <Plane size="24" />
-            </Avatar>
-          </Badge>
+          <AvatarView
+            badge={{ flagCode: 'jpy' }}
+            style={{ backgroundColor: 'var(--color-bright-blue)' }}
+          >
+            <Plane />
+          </AvatarView>
         ),
         title: 'Trip to Mars',
         content: 'Wise Jpy jar',
       },
     ],
   },
+  {
+    title: 'Balances',
+    options: [
+      {
+        media: <Flag code="gbp" />,
+        title: 'Wise GBP balance',
+      },
+      {
+        media: <Flag code="eur" />,
+        title: 'Wise EUR balance',
+      },
+    ],
+  },
 ];
 
 export const Basic: Story = {

package/src/tile/Tile.story.tsx

@@ -1,7 +1,7 @@
 import { action } from '@storybook/addon-actions';
 import { text, boolean } from '@storybook/addon-knobs';
 
-import Avatar from '../avatar';
+import AvatarView from '../avatarView';
 import { Size } from '../common';
 
 import Tile from '.';
@@ -41,11 +41,7 @@ export const Basic = () => {
           description={description}
           disabled={disabled}
           href="#href1"
-          media={
-            <Avatar size="md" type="initials">
-              HM
-            </Avatar>
-          }
+          media={<AvatarView profileName="Henry Mike" />}
           size={medium ? Size.MEDIUM : Size.SMALL}
           title={title}
           onClick={action('onClick')}