@transferwise/components 0.0.0-experimental-d11e9c5 → 0.0.0-experimental-76bb7cd

package/src/main.css

@@ -469,77 +469,6 @@ div.critical-comms .critical-comms-body {
 .np-theme-personal .tw-avatar--outlined:not(.disabled):not(:disabled):hover {
   border-color: var(--color-interactive-primary-hover);
 }
-.np-notification-dot {
-  --np-notification-dot-size: 14px;
-  position: relative;
-  display: inline-block;
-}
-.np-notification-dot-mask {
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-notification-dot-size) / 2)) left calc(100% - (var(--np-notification-dot-size) / 2)), transparent 0, transparent calc(var(--np-notification-dot-size) / 2 + var(--np-notification-dot-offset)), black 0);
-          mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-notification-dot-size) / 2)) left calc(100% - (var(--np-notification-dot-size) / 2)), transparent 0, transparent calc(var(--np-notification-dot-size) / 2 + var(--np-notification-dot-offset)), black 0);
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-notification-dot-size) / 2)) left calc(100% - calc(var(--np-notification-dot-size) / 2)), transparent 0, transparent calc(var(--np-notification-dot-size) / 2 + var(--np-notification-dot-offset)), black 0);
-          mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-notification-dot-size) / 2)) left calc(100% - calc(var(--np-notification-dot-size) / 2)), transparent 0, transparent calc(var(--np-notification-dot-size) / 2 + var(--np-notification-dot-offset)), black 0);
-}
-.np-notification-dot-badge {
-  position: absolute;
-  width: var(--np-notification-dot-size);
-  height: var(--np-notification-dot-size);
-  background-color: var(--color-sentiment-negative);
-  border-radius: 9999px;
-  border-radius: var(--radius-full);
-  right: 0;
-}
-.np-avatar-view .np-avatar-view-content {
-  color: var(--color-interactive-primary);
-}
-.np-avatar-view-interactive {
-  cursor: pointer;
-}
-.np-avatar-view-interactive .np-circle {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-}
-.np-avatar-view-interactive:hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.np-avatar-view-interactive:active {
-  background-color: var(--color-background-neutral-active);
-}
-.np-avatar-view-non-interactive .np-circle {
-  background-color: transparent;
-}
-.np-avatar-view-non-interactive .np-avatar-view-content .wds-flag {
-  box-shadow: none;
-}
-.np-avatar-group {
-  display: inline-flex;
-  position: relative;
-}
-.np-avatar-group-diagonal {
-  width: var(--np-avatar-group-size);
-  height: var(--np-avatar-group-size);
-}
-.np-avatar-group-diagonal-mask {
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-group-size) / 1.5) right calc(100% - var(--np-avatar-group-size) / 1.5), transparent 0, transparent calc(var(--np-avatar-group-single-size) / 2 + 0.5px), black 0);
-          mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-group-size) / 1.5) right calc(100% - var(--np-avatar-group-size) / 1.5), transparent 0, transparent calc(var(--np-avatar-group-single-size) / 2 + 0.5px), black 0);
-}
-.np-avatar-group-diagonal-child {
-  position: absolute;
-  top: var(--np-avatar-group-diagonal-child-position);
-  right: 0;
-}
-.np-avatar-group-horizontal {
-  height: var(--np-avatar-group-size);
-}
-.np-avatar-group-horizontal-mask {
-  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc((100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc((var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
-          mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc((100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc((var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
-  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc(calc(100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc(calc(var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
-          mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc(calc(100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc(calc(var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
-}
-.np-avatar-group-horizontal-child {
-  margin-left: calc(var(--np-avatar-group-horizontal-child-position) * -1);
-}
 .tw-badge {
   position: relative;
   display: inline-block;
@@ -547,7 +476,6 @@ div.critical-comms .critical-comms-body {
   --badge-mask: 2px;
   --badge-mask-offset: calc(var(--badge-size) / 2);
   --badge-border-color: rgba(255, 255, 255, 0.08);
-  --badge-content-position: 0px;
 }
 .tw-badge.tw-badge-lg {
   --badge-size: 24px;
@@ -557,8 +485,8 @@ div.critical-comms .critical-comms-body {
   --badge-border-color: rgba(0, 0, 0, 0.08);
 }
 .tw-badge > .tw-badge__children {
-  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) left calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
-          mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) left calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
+  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) left calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
+          mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) left calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
 }
 [dir="rtl"] .tw-badge > .tw-badge__children {
   -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
@@ -568,8 +496,8 @@ div.critical-comms .critical-comms-body {
   position: absolute;
   width: var(--badge-size);
   height: var(--badge-size);
-  bottom: var(--badge-content-position);
-  right: var(--badge-content-position);
+  bottom: 0;
+  right: 0;
   box-sizing: border-box;
   border-radius: 50%;
   text-align: center;
@@ -582,7 +510,7 @@ div.critical-comms .critical-comms-body {
           user-select: none;
 }
 [dir="rtl"] .tw-badge > .tw-badge__content {
-  left: var(--badge-content-position);
+  left: 0;
   right: auto;
   right: initial;
 }
@@ -1283,43 +1211,11 @@ div.critical-comms .critical-comms-body {
   width: var(--circle-size);
   height: var(--circle-size);
   flex-shrink: 0;
-  --circle-border-color: var(--color-border-neutral);
-  --circle-border-width: 1px;
-  font-size: var(--circle-font-size);
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
-  line-height: 1;
-}
-.np-circle .np-display {
-  font-size: var(--circle-font-size);
 }
 .np-circle .tw-icon > svg {
   height: var(--circle-icon-size);
   width: var(--circle-icon-size);
 }
-.np-circle img,
-.np-circle .wds-flag {
-  border-radius: 9999px;
-  border-radius: var(--radius-full);
-  width: 100%;
-  height: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
-}
-.np-circle-border {
-  position: relative;
-}
-.np-circle-border::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: 9999px;
-  border-radius: var(--radius-full);
-  box-shadow: inset 0 0 0 var(--circle-border-width) var(--circle-border-color);
-}
 .np-bottom-sheet {
   border-radius: 10px 10px 0 0;
 }

package/src/main.less

@@ -3,8 +3,6 @@
 @import "./actionButton/ActionButton.less";
 @import "./alert/Alert.less";
 @import "./avatar/Avatar.less";
-@import "./avatarView/AvatarView.less";
-@import "./avatarGroup/AvatarGroup.less";
 @import "./badge/Badge.less";
 @import "./button/Button.less";
 @import "./card/Card.less";

package/src/modal/{Modal.rtl.spec.js → Modal.rtl.spec.tsx}

@@ -1,15 +1,16 @@
 import { Position } from '../common';
 import { render, fireEvent, screen, mockMatchMedia } from '../test-utils';
 
-import Modal from './Modal';
+import Modal, { ModalProps } from './Modal';
 
 mockMatchMedia();
 
 describe('Modal', () => {
-  const props = {
+  const props: ModalProps = {
     onClose: jest.fn(),
     body: 'Some body',
     position: Position.TOP,
+    open: true,
   };
 
   beforeEach(() => {
@@ -17,14 +18,14 @@ describe('Modal', () => {
   });
 
   it(`doesn't calls onClose when click is inside modal`, () => {
-    render(<Modal {...props} open />);
+    render(<Modal {...props} />);
 
     fireEvent.click(getDialog());
     expect(props.onClose).not.toHaveBeenCalled();
   });
 
   it('calls onClose if click outside the content', () => {
-    render(<Modal {...props} open />);
+    render(<Modal {...props} />);
     expect(props.onClose).not.toHaveBeenCalled();
 
     fireEvent.click(screen.getByRole('presentation'));
@@ -32,7 +33,7 @@ describe('Modal', () => {
   });
 
   it("doesn't call onClose if click outside the content and closing on dimmer is disabled", () => {
-    render(<Modal {...props} open disableDimmerClickToClose />);
+    render(<Modal {...props} disableDimmerClickToClose />);
 
     fireEvent.click(screen.getByRole('presentation'));
 
@@ -40,7 +41,7 @@ describe('Modal', () => {
   });
 
   it('calls onClose when Escape is pressed on Modal', () => {
-    render(<Modal {...props} open />);
+    render(<Modal {...props} />);
     expect(props.onClose).not.toHaveBeenCalled();
 
     fireEvent.keyDown(getDialog(), { key: 'Escape' });
@@ -48,7 +49,7 @@ describe('Modal', () => {
   });
 
   it('calls onClose when Escape is pressed on document', () => {
-    render(<Modal {...props} open />);
+    render(<Modal {...props} />);
     expect(props.onClose).not.toHaveBeenCalled();
 
     fireEvent.keyDown(document, { key: 'Escape' });

package/src/navigationOption/NavigationOption.story.tsx

@@ -4,13 +4,13 @@ import { text, boolean } from '@storybook/addon-knobs';
 import {
   FastFlag as FastFlagIcon,
   Bank as BankIcon,
+  PlusCircle,
+  Profile,
   UpwardGraph as UpwardGraphIcon,
-  Plus as PlusIcon,
-  FastFlag,
 } from '@transferwise/icons';
 import { Illustration, Assets, Flag } from '@wise/art';
 
-import { Nudge, Header, Title, Typography, AvatarView } from '..';
+import { Badge, Nudge, Avatar, Header, Title, Typography } from '..';
 
 import NavigationOption from './NavigationOption';
 
@@ -82,13 +82,37 @@ export const Variants = () => (
     </div>
     <div className="m-b-2">
       <div className="title-4 m-b-1">With Icon Avatar</div>
-      <Template showMediaCircle={false} media={<AvatarView badge={{ icon: <PlusIcon /> }} />} />
+      <Template
+        showMediaCircle={false}
+        media={
+          <Badge badge={<PlusCircle className="tw-contacts__new-contact-badge" />}>
+            <Avatar type="icon">
+              <Profile size="24" />
+            </Avatar>
+          </Badge>
+        }
+      />
     </div>
     <div className="m-b-2">
       <div className="title-4 m-b-1">With Contact Avatar</div>
       <Template
         showMediaCircle={false}
-        media={<AvatarView name="Super Pepa" badge={{ icon: <FastFlag /> }} />}
+        media={
+          <Badge
+            badge={
+              <img
+                src="https://wise.com/public-resources/assets/brand/fast_flag_badge_personal.svg"
+                alt=""
+                height="24px"
+                width="24px"
+              />
+            }
+          >
+            <Avatar type="initials" size="md">
+              <span aria-hidden>SP</span>
+            </Avatar>
+          </Badge>
+        }
       />
     </div>
     <div className="m-t-4 m-b-2">
@@ -100,7 +124,22 @@ export const Variants = () => (
       </p>
       <Template
         showMediaCircle
-        media={<AvatarView name="Super Pepa" badge={{ icon: <FastFlag /> }} />}
+        media={
+          <Badge
+            badge={
+              <img
+                src="https://wise.com/public-resources/assets/brand/fast_flag_badge_personal.svg"
+                alt=""
+                height="24px"
+                width="24px"
+              />
+            }
+          >
+            <Avatar type="initials" size="md">
+              <span aria-hidden>SP</span>
+            </Avatar>
+          </Badge>
+        }
       />
     </div>
   </>
@@ -183,9 +222,9 @@ export const BalanceContent = () => (
     content="British pound"
     showMediaCircle={false}
     media={
-      <AvatarView>
+      <Avatar type="icon">
         <Flag code="GBP" />
-      </AvatarView>
+      </Avatar>
     }
   />
 );
@@ -194,7 +233,13 @@ export const NewContactContent = () => (
   <NavigationOptionTemplate
     title="New Contact"
     showMediaCircle={false}
-    media={<AvatarView badge={{ type: 'action' }} />}
+    media={
+      <Badge badge={<PlusCircle className="tw-contacts__new-contact-badge" />}>
+        <Avatar type="icon">
+          <Profile size="24" />
+        </Avatar>
+      </Badge>
+    }
   />
 );
 
@@ -203,7 +248,13 @@ export const ExistingContactContent = () => (
     title="Wise Customer"
     content="EUR account ending in 1111"
     showMediaCircle={false}
-    media={<AvatarView name="Wise Steve" badge={{ flagCode: 'EUR' }} />}
+    media={
+      <Badge badge={<Flag code="EUR" />}>
+        <Avatar type="initials" size="md">
+          <span aria-hidden>WS</span>
+        </Avatar>
+      </Badge>
+    }
   />
 );
 
@@ -229,9 +280,9 @@ export const ManageAccountContent = () => (
       content="View and share your account details to get paid."
       showMediaCircle={false}
       media={
-        <AvatarView>
+        <Avatar type="icon">
           <BankIcon size={24} />
-        </AvatarView>
+        </Avatar>
       }
     />
     <NavigationOptionTemplate
@@ -239,9 +290,9 @@ export const ManageAccountContent = () => (
       content="Convert money between your balances at your desired exchange rate."
       showMediaCircle={false}
       media={
-        <AvatarView>
+        <Avatar type="icon">
           <UpwardGraphIcon size={24} />
-        </AvatarView>
+        </Avatar>
       }
     />
   </>

package/src/overlayHeader/OverlayHeader.story.tsx

@@ -2,8 +2,9 @@ import { action } from '@storybook/addon-actions';
 import { select, text } from '@storybook/addon-knobs';
 import { Person as ProfileIcon, Briefcase as BriefcaseIcon } from '@transferwise/icons';
 
-import AvatarView from '../avatarView';
-import { ProfileType } from '../common';
+import Avatar, { AvatarType } from '../avatar';
+import AvatarWrapper from '../avatarWrapper';
+import { ProfileType, Size } from '../common';
 import Logo from '../logo';
 
 import OverlayHeader from './OverlayHeader';
@@ -28,7 +29,11 @@ export const Basic = () => {
   return (
     <OverlayHeader
       logo={<Logo />}
-      avatar={<AvatarView>{avatarProfiles[showAvatar]}</AvatarView>}
+      avatar={
+        <Avatar type={AvatarType.ICON} size={Size.MEDIUM}>
+          {avatarProfiles[showAvatar]}
+        </Avatar>
+      }
       onClose={action('Close clicked')}
     />
   );
@@ -41,13 +46,13 @@ export const WithAvatarWrapper = () => {
   );
   const profileType = select(
     'profileType',
-    [ProfileType.PERSONAL, ProfileType.BUSINESS],
+    Object.keys(ProfileType) as `${ProfileType}`[],
     undefined,
   );
   return (
     <OverlayHeader
       logo={<Logo />}
-      avatar={<AvatarView imgSrc={avatarURL} type={profileType?.toLowerCase()} />}
+      avatar={<AvatarWrapper url={avatarURL} profileType={profileType} />}
       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 AvatarView from '../avatarView';
+import Avatar, { AvatarType } from '../avatar';
 import Checkbox from '../checkbox';
 
 import Radio from './Radio';
@@ -32,9 +32,9 @@ export const Basic = () => {
           disabled={disabled}
           avatar={
             showAvatar ? (
-              <AvatarView>
+              <Avatar type={AvatarType.THUMBNAIL}>
                 <Flag code="IMP" />
-              </AvatarView>
+              </Avatar>
             ) : null
           }
           onChange={() => setChecked(!checked)}
@@ -50,9 +50,9 @@ export const Basic = () => {
           secondary={secondary}
           avatar={
             showAvatar ? (
-              <AvatarView>
+              <Avatar type={AvatarType.THUMBNAIL}>
                 <Flag code="KES" />
-              </AvatarView>
+              </Avatar>
             ) : null
           }
           onChange={() => setChecked(!checked)}

package/src/radioGroup/RadioGroup.story.tsx

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

package/src/selectOption/SelectOption.story.tsx

@@ -8,7 +8,8 @@ import SelectOption, {
 import { Bank, BankTransfer, Beach, Briefcase, Card, Plane } from '@transferwise/icons';
 import { Field } from '../field/Field';
 import { lorem10 } from '../test-utils';
-import AvatarView from '../avatarView';
+import Badge from '../badge';
+import Avatar from '../avatar';
 import { Sentiment } from '../common';
 import { useState } from 'react';
 
@@ -115,59 +116,57 @@ 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: (
-          <AvatarView
-            badge={{ flagCode: 'usd' }}
-            style={{ backgroundColor: 'var(--color-bright-pink)' }}
-            name="Tim Cook"
-          />
+          <Badge badge={<Flag code="usd" />} size="md">
+            <Avatar type="icon" size="md" backgroundColor="var(--color-bright-pink)">
+              <Beach size="24" />
+            </Avatar>
+          </Badge>
         ),
         title: 'Hawaii Holiday',
         content: 'Wise USD jar',
       },
       {
         media: (
-          <AvatarView
-            badge={{ flagCode: 'aed' }}
-            style={{ backgroundColor: 'var(--color-bright-yellow)' }}
-          >
-            <Briefcase />
-          </AvatarView>
+          <Badge badge={<Flag code="aed" />} size="md">
+            <Avatar type="icon" size="md" backgroundColor="var(--color-bright-yellow)">
+              <Briefcase size="24" />
+            </Avatar>
+          </Badge>
         ),
         title: 'Emirates Business Trip',
         content: 'Wise AED jar',
       },
       {
         media: (
-          <AvatarView
-            badge={{ flagCode: 'jpy' }}
-            style={{ backgroundColor: 'var(--color-bright-blue)' }}
-          >
-            <Plane />
-          </AvatarView>
+          <Badge badge={<Flag code="jpy" />} size="md">
+            <Avatar type="icon" size="md" backgroundColor="var(--color-bright-blue)">
+              <Plane size="24" />
+            </Avatar>
+          </Badge>
         ),
         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/slidingPanel/SlidingPanel.spec.js

@@ -1,6 +1,6 @@
 import { shallow, mount } from 'enzyme';
 
-import SlidingPanel, { EXIT_ANIMATION } from './SlidingPanel';
+import SlidingPanel from './SlidingPanel';
 
 describe('SlidingPanel', () => {
   let component;