@transferwise/components 0.0.0-experimental-d11e9c5 → 0.0.0-experimental-6a7bc4f

package/src/badge/Badge.tsx

@@ -11,11 +11,12 @@ import {
   ThemeLight,
   CommonProps,
 } from '../common';
+import { BadgeAssetsProps } from '.';
 
 /**
- * @deprecated Use `SizeSmall` or `SizeLarge` instead.
+ * @deprecated Use `16` or `24` instead.
  */
-type DeprecatedSizes = SizeMedium;
+type DeprecatedSizes = SizeSmall | SizeMedium | SizeLarge;
 
 export type BadgeProps = {
   badge: ReactNode;
@@ -23,12 +24,19 @@ export type BadgeProps = {
   /**
    * `md` is deprecated, it will fallback to `sm` instead.
    */
-  size?: SizeSmall | DeprecatedSizes | SizeLarge;
+  size?: DeprecatedSizes | BadgeAssetsProps['size'];
   border?: ThemeDark | ThemeLight;
   'aria-label'?: string;
   style?: React.CSSProperties;
 } & CommonProps;
 
+const mapLegacySize = {
+  16: Size.SMALL,
+  24: Size.LARGE,
+  // medium is no longer exists, so we map it to small
+  [String(Size.MEDIUM)]: Size.SMALL,
+};
+
 // 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.
 /**
@@ -43,8 +51,7 @@ const Badge = ({
   children,
   style,
 }: BadgeProps) => {
-  // medium is deprecated, so we map it to small
-  const size = sizeProp === Size.MEDIUM ? Size.SMALL : sizeProp;
+  const size = mapLegacySize[sizeProp] ?? sizeProp;
   const classes: string = clsx(
     'tw-badge',
     {

package/src/badge/BadgeAssets.tsx

@@ -1,10 +1,8 @@
 import StatusIcon, { StatusIconProps } from '../statusIcon';
 import { Flag } from '@wise/art';
-import Circle, { CircleProps } from '../common/circle';
+import Circle from '../common/circle';
 import Image from '../image';
-import type { BadgeProps } from './Badge';
 import { Plus } from '@transferwise/icons';
-import { Size } from '../common';
 
 export type Props = {
   status?: StatusIconProps['sentiment'];
@@ -12,7 +10,7 @@ export type Props = {
   imgSrc?: string;
   icon?: React.ReactNode;
   type?: 'action' | 'reference';
-  size?: BadgeProps['size'];
+  size?: 16 | 24;
 };
 
 /**
@@ -24,10 +22,8 @@ export default function BadgeAssets({
   imgSrc,
   icon = null,
   type = 'action',
-  size: sizeProp,
+  size,
 }: Props) {
-  // map to old size (sm, lg) to new ones (numeric)
-  const size: CircleProps['size'] = sizeProp === Size.LARGE ? 24 : 16;
   if (status) {
     return <StatusIcon sentiment={status} size={size} />;
   }

package/src/decision/Decision.story.tsx

@@ -33,7 +33,7 @@ export const Basic = () => {
           disabled,
           media: {
             block: <Illustration name="globe" alt="" disablePadding />,
-            list: <AvatarView name="Henry Mike" />,
+            list: <AvatarView name="Hank Miller" />,
           },
           'aria-label': 'Click to see something',
           title: 'Hank Miller',
@@ -46,7 +46,7 @@ export const Basic = () => {
           href: '#href2',
           media: {
             block: <Illustration name="confetti" alt="" disablePadding />,
-            list: <AvatarView name="Henry Mike" />,
+            list: <AvatarView name="Hank Miller" />,
           },
           'aria-label': 'Click here to send money to Hank Miller.',
           title: 'Hank Miller',
@@ -101,7 +101,7 @@ export const grid = () => {
                 alt=""
               />
             ),
-            list: <AvatarView name="Henry Mike" />,
+            list: <AvatarView name="Hank Miller" />,
           },
           'aria-label': 'Click to see something',
           title: 'Hank Miller',
@@ -119,7 +119,7 @@ export const grid = () => {
                 alt=""
               />
             ),
-            list: <AvatarView name="Henry Mike" />,
+            list: <AvatarView name="Hank Miller" />,
           },
           'aria-label': 'Click here to send money to Hank Miller.',
           title: 'Hank Miller',
@@ -136,7 +136,7 @@ export const grid = () => {
                 alt=""
               />
             ),
-            list: <AvatarView name="Henry Mike" />,
+            list: <AvatarView name="Hank Miller" />,
           },
           'aria-label': 'Click here to send money to Hank Miller.',
           disabled,
@@ -155,7 +155,7 @@ export const grid = () => {
                 alt=""
               />
             ),
-            list: <AvatarView name="Henry Mike" />,
+            list: <AvatarView name="Hank Miller" />,
           },
           'aria-label': 'Click here to send money to Hank Miller.',
           title: 'Hank Miller',
@@ -173,7 +173,7 @@ export const grid = () => {
                 alt=""
               />
             ),
-            list: <AvatarView name="Henry Mike" />,
+            list: <AvatarView name="Hank Miller" />,
           },
           'aria-label': 'Click here to send money to Hank Miller.',
           title: 'Hank Miller',
@@ -191,7 +191,7 @@ export const grid = () => {
                 alt=""
               />
             ),
-            list: <AvatarView name="Henry Mike" />,
+            list: <AvatarView name="Hank Miller" />,
           },
           'aria-label': 'Click here to send money to Hank Miller.',
           title: 'Hank Miller',
@@ -209,7 +209,7 @@ export const grid = () => {
                 alt=""
               />
             ),
-            list: <AvatarView name="Henry Mike" />,
+            list: <AvatarView name="Hank Miller" />,
           },
           'aria-label': 'Click here to send money to Hank Miller.',
           title: 'Hank Miller',