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

package/src/badge/Badge.less

@@ -17,7 +17,6 @@
   --badge-mask: @badge-mask-sm;
   --badge-mask-offset: calc(var(--badge-size) / 2);
   --badge-border-color: @badge-border-light;
-  --badge-content-position: 0px;
 
   &.tw-badge-lg {
     --badge-size: @badge-size-lg;
@@ -34,7 +33,7 @@
 
     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)),
+        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)
@@ -55,8 +54,8 @@
     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%;

package/src/badge/Badge.tsx

@@ -26,14 +26,8 @@ export type BadgeProps = {
   size?: SizeSmall | DeprecatedSizes | SizeLarge;
   border?: ThemeDark | ThemeLight;
   'aria-label'?: string;
-  style?: React.CSSProperties;
 } & CommonProps;
 
-// Note: Badge component is not deprecated, we want stop it's direct usage on consumer side.
-// Deprecation notice will hint consumers to migrate. Eventually the component will become internal.
-/**
- * @deprecated Use `<AvatarView badge={..} />` instead.
- */
 const Badge = ({
   badge,
   className = undefined,
@@ -41,7 +35,6 @@ const Badge = ({
   border = Theme.LIGHT,
   'aria-label': ariaLabel,
   children,
-  style,
 }: BadgeProps) => {
   // medium is deprecated, so we map it to small
   const size = sizeProp === Size.MEDIUM ? Size.SMALL : sizeProp;
@@ -55,7 +48,7 @@ const Badge = ({
   );
 
   return (
-    <div aria-label={ariaLabel} className={classes} style={style}>
+    <div aria-label={ariaLabel} className={classes}>
       <div className="tw-badge__children">{children}</div>
       <div className="tw-badge__content">{badge}</div>
     </div>

package/src/badge/index.ts

@@ -1,5 +1,2 @@
 export { default } from './Badge';
 export type { BadgeProps } from './Badge';
-
-export { default as BadgeAssets } from './BadgeAssets';
-export type { Props as BadgeAssetsProps } from './BadgeAssets';

package/src/button/{Button.spec.js → Button.spec.tsx}

@@ -5,6 +5,7 @@ import { render, screen, userEvent } from '../test-utils';
 
 import Button from '.';
 import messages from './Button.messages';
+import { ButtonReferenceType } from './Button';
 
 const { ACCENT, POSITIVE, NEGATIVE } = ControlType;
 const { PAY, LINK, DANGER } = Type;
@@ -14,7 +15,7 @@ const { SMALL, MEDIUM, LARGE } = Size;
 describe('Button', () => {
   // eslint-disable-next-line no-console
   const originalWarn = console.warn;
-  let mockedWarn;
+  let mockedWarn: typeof originalWarn;
 
   const props = {
     onClick: jest.fn(),
@@ -47,7 +48,7 @@ describe('Button', () => {
     });
 
     it('set `ref` to be true on Button', () => {
-      const reference = createRef();
+      const reference = createRef<ButtonReferenceType>();
 
       expect(reference.current).toBeFalsy();
       render(<Button ref={reference}>Click me!</Button>);

package/src/button/Button.tsx

@@ -51,7 +51,7 @@ type AnchorProps = CommonProps &
 
 export type Props = ButtonProps | AnchorProps;
 
-type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;
+export type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;
 
 const Button = forwardRef<ButtonReferenceType, Props>(
   (

package/src/button/legacyUtils/{legacyUtils.spec.js → legacyUtils.spec.tsx}

@@ -68,7 +68,7 @@ describe('establishNewType', () => {
 
 describe('logDeprecationNotices', () => {
   const origWarn = console.warn;
-  let mockedWarn;
+  let mockedWarn: typeof origWarn;
 
   beforeAll(() => {
     mockedWarn = jest.fn();

package/src/button/legacyUtils/legacyUtils.ts

@@ -57,8 +57,8 @@ export const establishNewPriority: EstablishNewPriorityType = (originalPriority,
 
 type DeprecatedTypeMapMessageType = keyof typeof deprecatedTypeMapMessage;
 type LogDeprecationNoticesType = (params: {
-  size: `${Size}`;
-  type: DeprecatedTypeMapMessageType | (string & Record<never, never>) | null;
+  size?: `${Size}`;
+  type?: DeprecatedTypeMapMessageType | (string & Record<never, never>) | null;
 }) => void;
 export const logDeprecationNotices: LogDeprecationNoticesType = ({ size, type }) => {
   logActionRequiredIf(

package/src/common/circle/Circle.css

@@ -4,40 +4,8 @@
   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);
-}

package/src/common/circle/Circle.less

@@ -4,44 +4,9 @@
   height: var(--circle-size);
   flex-shrink: 0;
 
-  --circle-border-color: var(--color-border-neutral);
-  --circle-border-width: 1px;
-
-  // sets custom typography styles for default (Inter) font
-  font-size: var(--circle-font-size);
-  font-weight: var(--font-weight-semi-bold);
-  line-height: 1;
-
-  // sets custom typography styles for Wise Sand font
-  .np-display {
-    font-size: var(--circle-font-size);
-  }
-
   // circle like components has custom icon sizes
   .tw-icon > svg {
     height: var(--circle-icon-size);
     width: var(--circle-icon-size);
   }
-
-  img,
-  .wds-flag {
-    border-radius: var(--radius-full);
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  &-border {
-    position: relative;
-    &::after {
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      border-radius: var(--radius-full);
-      box-shadow: inset 0 0 0 var(--circle-border-width) var(--circle-border-color);
-    }
-  }
 }

package/src/common/circle/Circle.tsx

@@ -19,7 +19,6 @@ export type Props = {
    * as those can be dynamic a at certain viewport sizes
    */
   fixedSize?: boolean;
-  enableBorder?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
 
 /**
@@ -35,26 +34,12 @@ const MAP_ICON_SIZE = {
   72: 36,
 };
 
-/**
- * circle like components have custom font styles
- */
-const MAP_FONT_SIZE = {
-  16: 8,
-  24: 12,
-  32: 14,
-  40: 18,
-  48: 22,
-  56: 26,
-  72: 30,
-};
-
 const Circle = forwardRef(function Circle(
   {
     as: Element = 'div',
     children,
     size = 48,
     fixedSize = false,
-    enableBorder = false,
     className,
     style,
     ...props
@@ -72,15 +57,9 @@ const Circle = forwardRef(function Circle(
           isTinyViewport && !fixedSize
             ? `${MAP_ICON_SIZE[size] / 2}px`
             : `${MAP_ICON_SIZE[size]}px`,
-        '--circle-font-size': `${MAP_FONT_SIZE[size]}px`,
         ...style,
       }}
-      className={clsx(
-        'np-circle',
-        { 'np-circle-border': enableBorder },
-        'd-flex align-items-center justify-content-center',
-        className,
-      )}
+      className={clsx('np-circle', 'd-flex align-items-center justify-content-center', className)}
     >
       {children}
     </Element>

package/src/decision/Decision.story.tsx

@@ -2,7 +2,7 @@ import { action } from '@storybook/addon-actions';
 import { boolean, select } from '@storybook/addon-knobs';
 import { Illustration } from '@wise/art';
 
-import AvatarView from '../avatarView';
+import Avatar from '../avatar';
 import { Size } from '../common';
 
 import Decision, { DecisionPresentation, DecisionType } from '.';
@@ -33,7 +33,11 @@ export const Basic = () => {
           disabled,
           media: {
             block: <Illustration name="globe" alt="" disablePadding />,
-            list: <AvatarView name="Henry Mike" />,
+            list: (
+              <Avatar size="md" type="initials">
+                HM
+              </Avatar>
+            ),
           },
           'aria-label': 'Click to see something',
           title: 'Hank Miller',
@@ -46,7 +50,11 @@ export const Basic = () => {
           href: '#href2',
           media: {
             block: <Illustration name="confetti" alt="" disablePadding />,
-            list: <AvatarView name="Henry Mike" />,
+            list: (
+              <Avatar size="md" type="initials">
+                HM
+              </Avatar>
+            ),
           },
           'aria-label': 'Click here to send money to Hank Miller.',
           title: 'Hank Miller',
@@ -101,7 +109,11 @@ export const grid = () => {
                 alt=""
               />
             ),
-            list: <AvatarView name="Henry Mike" />,
+            list: (
+              <Avatar size="md" type="initials">
+                HM
+              </Avatar>
+            ),
           },
           'aria-label': 'Click to see something',
           title: 'Hank Miller',
@@ -119,7 +131,11 @@ export const grid = () => {
                 alt=""
               />
             ),
-            list: <AvatarView name="Henry Mike" />,
+            list: (
+              <Avatar size="md" type="initials">
+                HM
+              </Avatar>
+            ),
           },
           'aria-label': 'Click here to send money to Hank Miller.',
           title: 'Hank Miller',
@@ -136,7 +152,11 @@ export const grid = () => {
                 alt=""
               />
             ),
-            list: <AvatarView name="Henry Mike" />,
+            list: (
+              <Avatar size="md" type="initials">
+                HM
+              </Avatar>
+            ),
           },
           'aria-label': 'Click here to send money to Hank Miller.',
           disabled,
@@ -155,7 +175,11 @@ export const grid = () => {
                 alt=""
               />
             ),
-            list: <AvatarView name="Henry Mike" />,
+            list: (
+              <Avatar size="md" type="initials">
+                HM
+              </Avatar>
+            ),
           },
           'aria-label': 'Click here to send money to Hank Miller.',
           title: 'Hank Miller',
@@ -173,7 +197,11 @@ export const grid = () => {
                 alt=""
               />
             ),
-            list: <AvatarView name="Henry Mike" />,
+            list: (
+              <Avatar size="md" type="initials">
+                HM
+              </Avatar>
+            ),
           },
           'aria-label': 'Click here to send money to Hank Miller.',
           title: 'Hank Miller',
@@ -191,7 +219,11 @@ export const grid = () => {
                 alt=""
               />
             ),
-            list: <AvatarView name="Henry Mike" />,
+            list: (
+              <Avatar size="md" type="initials">
+                HM
+              </Avatar>
+            ),
           },
           'aria-label': 'Click here to send money to Hank Miller.',
           title: 'Hank Miller',
@@ -209,7 +241,11 @@ export const grid = () => {
                 alt=""
               />
             ),
-            list: <AvatarView name="Henry Mike" />,
+            list: (
+              <Avatar size="md" type="initials">
+                HM
+              </Avatar>
+            ),
           },
           'aria-label': 'Click here to send money to Hank Miller.',
           title: 'Hank Miller',

package/src/flowNavigation/FlowNavigation.story.tsx

@@ -1,10 +1,12 @@
 import { boolean, select, text } from '@storybook/addon-knobs';
+import { Person as ProfileIcon, Briefcase as BriefcaseIcon } from '@transferwise/icons';
 import { useState } from 'react';
 
-import AvatarView from '../avatarView';
+import Avatar, { AvatarType } from '../avatar';
+import AvatarWrapper from '../avatarWrapper';
 import Body from '../body';
 import Button from '../button';
-import { ProfileType, Typography } from '../common';
+import { ProfileType, Size, Typography } from '../common';
 import Logo from '../logo';
 import OverlayHeader from '../overlayHeader';
 
@@ -17,14 +19,28 @@ export default {
   component: FlowNavigation,
   title: 'Navigation/FlowNavigation',
 };
+const avatarProfiles = {
+  '': null,
+  Business: <BriefcaseIcon />,
+  Profile: <ProfileIcon />,
+};
+type ProfileTypeKeys = keyof typeof ProfileType;
+
+const getAvatarProfile = (showAvatar: string) =>
+  showAvatar in avatarProfiles ? avatarProfiles[showAvatar as keyof typeof avatarProfiles] : null;
 
 export const Variants = () => {
   const [activeStep, setActiveStep] = useState(2);
   const [closed, setClosed] = useState(false);
-  const showAvatar = select('avatar', ['', ProfileType.PERSONAL, ProfileType.BUSINESS], 'Profile');
+  const showAvatar = select('avatar', Object.keys(avatarProfiles), 'Profile');
   const showCloseButton = boolean('show closeButton', true);
   const showMobileBackButton = boolean('show mobile backButton', true);
   const done = boolean('done', false);
+  const profileType: ProfileTypeKeys | undefined = select(
+    'profileType',
+    Object.keys(ProfileType) as ProfileTypeKeys[],
+    undefined,
+  );
   const avatarURL = text(
     'avatarURL',
     'https://wise.com/web-art/assets/illustrations/heart-small@2x.webp',
@@ -33,7 +49,13 @@ export const Variants = () => {
   return !closed ? (
     <>
       <FlowNavigation
-        avatar={!showAvatar ? null : <AvatarView type={showAvatar.toLowerCase()} />}
+        avatar={
+          !showAvatar ? null : (
+            <Avatar type={AvatarType.ICON} size={Size.MEDIUM}>
+              {getAvatarProfile(showAvatar)}
+            </Avatar>
+          )
+        }
         logo={<Logo />}
         activeStep={activeStep}
         done={done}
@@ -110,7 +132,7 @@ export const Variants = () => {
 
       <FlowNavigation
         done={done}
-        avatar={<AvatarView imgSrc={avatarURL} type={showAvatar?.toLowerCase()} />}
+        avatar={<AvatarWrapper url={avatarURL} profileType={profileType} />}
         activeStep={activeStep}
         steps={[
           {
@@ -156,7 +178,7 @@ export const Variants = () => {
       {/* Instance of always `done` FlowNav for visual testing */}
       <FlowNavigation
         done
-        avatar={<AvatarView imgSrc={avatarURL} type={showAvatar.toLowerCase()} />}
+        avatar={<AvatarWrapper url={avatarURL} profileType={profileType} />}
         activeStep={activeStep}
         steps={[
           { label: 'Recipient', hoverLabel: 'Daniele Tomboro', onClick: () => setActiveStep(0) },
@@ -218,7 +240,11 @@ export const SendFlow = () => {
   return (
     <>
       <FlowNavigation
-        avatar={<AvatarView />}
+        avatar={
+          <Avatar type={AvatarType.ICON} size={Size.MEDIUM}>
+            <ProfileIcon />
+          </Avatar>
+        }
         logo={<Logo />}
         activeStep={activeStep}
         steps={steps}
@@ -246,7 +272,7 @@ export const SendFlow = () => {
 export const WithOverlayHeaderComparison = () => {
   const [activeStep, setActiveStep] = useState(4);
   const [closed, setClosed] = useState(false);
-  const showAvatar = select('avatar', ['', ProfileType.PERSONAL, ProfileType.BUSINESS], 'Profile');
+  const showAvatar = select('avatar', Object.keys(avatarProfiles), 'Profile');
   const showCloseButton = boolean('show closeButton', true);
   const showMobileBackButton = boolean('show mobile backButton', true);
   const done = boolean('done', false);
@@ -255,7 +281,13 @@ export const WithOverlayHeaderComparison = () => {
     <>
       <div style={{ border: '1px solid #e8e8e8' }}>
         <FlowNavigation
-          avatar={showAvatar ? <AvatarView type={showAvatar.toLowerCase()} /> : null}
+          avatar={
+            showAvatar ? (
+              <Avatar type={AvatarType.ICON} size={Size.MEDIUM}>
+                {getAvatarProfile(showAvatar)}
+              </Avatar>
+            ) : null
+          }
           activeStep={activeStep}
           done={done}
           steps={[]}
@@ -269,7 +301,13 @@ export const WithOverlayHeaderComparison = () => {
       </div>
       <div style={{ border: '1px solid #e8e8e8' }}>
         <OverlayHeader
-          avatar={showAvatar ? <AvatarView type={showAvatar.toLowerCase()} /> : null}
+          avatar={
+            showAvatar ? (
+              <Avatar type={AvatarType.ICON} size={Size.MEDIUM}>
+                {getAvatarProfile(showAvatar)}
+              </Avatar>
+            ) : null
+          }
           onClose={showCloseButton ? () => setClosed(true) : undefined}
         />
       </div>

package/src/index.ts

@@ -8,7 +8,6 @@ export type { ActionOptionProps } from './actionOption';
 export type { SelectOptionProps, SelectOptionValue, SelectOptiopsSection } from './selectOption';
 export type { AlertAction, AlertProps, AlertType } from './alert';
 export type { AvatarProps } from './avatar';
-export type { AvatarViewProps } from './avatarView';
 export type { BadgeProps } from './badge';
 export type { CardProps } from './card';
 export type { CarouselProps } from './carousel';
@@ -104,7 +103,6 @@ export { default as ActionOption } from './actionOption';
 export { default as SelectOption } from './selectOption';
 export { default as Alert } from './alert';
 export { default as Avatar } from './avatar';
-export { default as AvatarView } from './avatarView';
 export { default as AvatarWrapper } from './avatarWrapper';
 export { default as Badge } from './badge';
 export { default as Body } from './body';
@@ -246,8 +244,6 @@ export {
   getLangFromLocale,
   isBrowser,
   isServerSide,
-  getInitials,
-  getBrandColorFromSeed,
 } from './common';
 
 /**

package/src/listItem/ListItem.story.tsx

@@ -1,13 +1,15 @@
 /* eslint-disable react/jsx-child-element-spacing */
 
 import { action } from '@storybook/addon-actions';
-import { Documents, FastFlag } from '@transferwise/icons';
+import { Documents } from '@transferwise/icons';
 import { ComponentProps } from 'react';
 
 import ActionButton from '../actionButton/ActionButton';
-import AvatarView from '../avatarView';
+import Avatar from '../avatar';
+import Badge from '../badge';
 import Info from '../info';
 import Title from '../title/Title';
+
 import ListItem, { List } from '.';
 
 export default {
@@ -40,7 +42,13 @@ export const Variants = () => {
         <List>
           <Template
             media={
-              <AvatarView imgSrc="https://wise.com/web-art/assets/illustrations/heart-small@2x.webp" />
+              <Avatar>
+                <img
+                  style={{ width: 32, height: 32 }}
+                  src="https://wise.com/public-resources/assets/balances/savings-emoji/google/✈️.png"
+                  alt=""
+                />
+              </Avatar>
             }
           />
         </List>
@@ -51,7 +59,22 @@ export const Variants = () => {
           <Template
             title="Sandra Pepper"
             value="Personal account"
-            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>
+            }
           />
         </List>
       </div>
@@ -61,7 +84,22 @@ export const Variants = () => {
           <Template
             title="Account holder"
             value="Sandra Pepper"
-            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>
+            }
             action={<ActionButton>Share details</ActionButton>}
           />
         </List>