@transferwise/components 46.80.0 → 46.81.0

package/src/avatarView/NotificationDot.tsx

@@ -0,0 +1,35 @@
+import { HTMLAttributes } from 'react';
+import { Props as AvatarViewProps } from './AvatarView';
+
+type Props = Pick<HTMLAttributes<HTMLDivElement>, 'children'> & {
+  avatarSize?: AvatarViewProps['size'];
+};
+
+/**
+ * Depending on avatar size, notifcation dot size and offset are different
+ */
+const MAP_STYLE_CONFIG = {
+  16: { size: 6, offset: 1 },
+  24: { size: 8, offset: 2 },
+  32: { size: 10, offset: 2 },
+  40: { size: 10, offset: 2 },
+  48: { size: 14, offset: 2 },
+  56: { size: 16, offset: 3 },
+  72: { size: 20, offset: 3 },
+};
+
+export default function NotificationDot({ children, avatarSize = 48 }: Props) {
+  return (
+    <div
+      className="np-notification-dot"
+      style={{
+        // @ts-expect-error CSS custom props allowed
+        '--np-notification-dot-size': `${MAP_STYLE_CONFIG[avatarSize].size}px`,
+        '--np-notification-dot-offset': `${MAP_STYLE_CONFIG[avatarSize].offset}px`,
+      }}
+    >
+      <div className="np-notification-dot-badge" />
+      <div className="np-notification-dot-mask">{children}</div>
+    </div>
+  );
+}

package/src/avatarView/index.ts

@@ -0,0 +1,2 @@
+export type { Props as AvatarViewProps } from './AvatarView';
+export { default } from './AvatarView';

package/src/avatarWrapper/AvatarWrapper.story.tsx

@@ -99,3 +99,22 @@ export const All: Story = {
     );
   },
 };
+
+export const ProfileBrokenImageFallback: Story = {
+  parameters: {
+    chromatic: {
+      delay: 5000,
+    },
+  },
+  render: () => {
+    const assetUrl = 'https://test.com/img-wrong-url.test';
+    return (
+      <>
+        <AvatarWrapper />
+        <AvatarWrapper url={assetUrl} />
+        <AvatarWrapper url={assetUrl} profileType={ProfileType.BUSINESS} />
+        <AvatarWrapper url={assetUrl} profileType={ProfileType.BUSINESS} name="Test Name" />
+      </>
+    );
+  },
+};

package/src/avatarWrapper/AvatarWrapper.tsx

@@ -75,6 +75,9 @@ export type AvatarWrapperProps = {
     }
 );
 
+/**
+ * @deprecated Use `AvatarView` component instead
+ */
 const AvatarWrapper = ({
   url,
   'aria-label': ariaLabel,

package/src/badge/Badge.css

@@ -5,6 +5,7 @@
   --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;
@@ -14,8 +15,8 @@
   --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)) 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));
+  -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));
 }
 [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));
@@ -25,8 +26,8 @@
   position: absolute;
   width: var(--badge-size);
   height: var(--badge-size);
-  bottom: 0;
-  right: 0;
+  bottom: var(--badge-content-position);
+  right: var(--badge-content-position);
   box-sizing: border-box;
   border-radius: 50%;
   text-align: center;
@@ -39,7 +40,7 @@
           user-select: none;
 }
 [dir="rtl"] .tw-badge > .tw-badge__content {
-  left: 0;
+  left: var(--badge-content-position);
   right: auto;
   right: initial;
 }

package/src/badge/Badge.less

@@ -17,6 +17,7 @@
   --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;
@@ -33,7 +34,7 @@
 
     mask-image:
       radial-gradient(
-        circle at top calc(100% - var(--badge-mask-offset)) left calc(100% - var(--badge-mask-offset)),
+        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)
@@ -54,8 +55,8 @@
     position: absolute;
     width: var(--badge-size);
     height: var(--badge-size);
-    bottom: 0;
-    .right(0);
+    bottom: var(--badge-content-position);
+    .right(var(--badge-content-position));
 
     box-sizing: border-box;
     border-radius: 50%;

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,11 +24,24 @@ 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.
+/**
+ * @deprecated Use `<AvatarView badge={..} />` instead.
+ */
 const Badge = ({
   badge,
   className = undefined,
@@ -35,9 +49,9 @@ 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;
+  const size = mapLegacySize[sizeProp] ?? sizeProp;
   const classes: string = clsx(
     'tw-badge',
     {
@@ -48,7 +62,7 @@ const Badge = ({
   );
 
   return (
-    <div aria-label={ariaLabel} className={classes}>
+    <div aria-label={ariaLabel} className={classes} style={style}>
       <div className="tw-badge__children">{children}</div>
       <div className="tw-badge__content">{badge}</div>
     </div>

package/src/badge/BadgeAssets.tsx

@@ -0,0 +1,61 @@
+import StatusIcon, { StatusIconProps } from '../statusIcon';
+import { Flag } from '@wise/art';
+import Circle from '../common/circle';
+import Image from '../image';
+import { Plus } from '@transferwise/icons';
+
+export type Props = {
+  status?: StatusIconProps['sentiment'];
+  flagCode?: string;
+  imgSrc?: string;
+  icon?: React.ReactNode;
+  type?: 'action' | 'reference';
+  size?: 16 | 24;
+};
+
+/**
+ * Common pre-built badge variants.
+ */
+export default function BadgeAssets({
+  status,
+  flagCode,
+  imgSrc,
+  icon = null,
+  type = 'action',
+  size,
+}: Props) {
+  if (status) {
+    return <StatusIcon sentiment={status} size={size} />;
+  }
+  if (flagCode) {
+    return (
+      <Circle size={size} fixedSize enableBorder>
+        <Flag code={flagCode} intrinsicSize={size} />
+      </Circle>
+    );
+  }
+  if (imgSrc) {
+    return (
+      <Circle size={size} fixedSize enableBorder>
+        <Image src={imgSrc} alt="" />
+      </Circle>
+    );
+  }
+  if (['action', 'reference'].includes(type)) {
+    return (
+      <Circle
+        size={size}
+        fixedSize
+        style={{
+          backgroundColor:
+            type === 'action'
+              ? 'var(--color-interactive-accent)'
+              : 'var(--color-background-neutral)',
+        }}
+      >
+        {icon ?? <Plus />}
+      </Circle>
+    );
+  }
+  return null;
+}

package/src/badge/index.ts

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

package/src/circularButton/CircularButton.spec.tsx

@@ -34,10 +34,6 @@ describe('CircularButton', () => {
     it('is not disabled', () => {
       expect(screen.getByRole('button')).toBeEnabled();
     });
-
-    it('renders a button of type accent and priority primary', () => {
-      expect(render(<CircularButton {...props} />).container).toMatchSnapshot();
-    });
   });
 
   describe('button attributes', () => {
@@ -69,36 +65,4 @@ describe('CircularButton', () => {
       expect(onClick).toHaveBeenCalledTimes(0);
     });
   });
-
-  describe('types', () => {
-    it('renders accent buttons', () => {
-      expect(render(<CircularButton {...props} type={ACCENT} />).container).toMatchSnapshot();
-    });
-
-    it('renders positive buttons', () => {
-      expect(render(<CircularButton {...props} type={POSITIVE} />).container).toMatchSnapshot();
-    });
-
-    it('renders negative buttons', () => {
-      expect(render(<CircularButton {...props} type={NEGATIVE} />).container).toMatchSnapshot();
-    });
-  });
-
-  describe('priorities', () => {
-    it('renders primary buttons', () => {
-      [ACCENT, POSITIVE, NEGATIVE].forEach((type) =>
-        expect(
-          render(<CircularButton {...props} priority={PRIMARY} type={type} />).container,
-        ).toMatchSnapshot(),
-      );
-    });
-
-    it('renders secondary buttons', () => {
-      [ACCENT, POSITIVE, NEGATIVE].forEach((type) =>
-        expect(
-          render(<CircularButton {...props} priority={SECONDARY} type={type} />).container,
-        ).toMatchSnapshot(),
-      );
-    });
-  });
 });

package/src/common/circle/Circle.css

@@ -4,8 +4,40 @@
   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,9 +4,44 @@
   height: var(--circle-size);
   flex-shrink: 0;
 
+  --circle-border-color: var(--color-border-neutral);
+  --circle-border-width: 1px;
+
+  // circle like components have custom typography styles for for default (Inter) font
+  font-size: var(--circle-font-size);
+  font-weight: var(--font-weight-semi-bold);
+  line-height: 1;
+
+  // circle like components have 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,6 +19,7 @@ export type Props = {
    * as those can be dynamic a at certain viewport sizes
    */
   fixedSize?: boolean;
+  enableBorder?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
 
 /**
@@ -34,12 +35,28 @@ const MAP_ICON_SIZE = {
   72: 36,
 };
 
+/**
+ * circle like components have custom typography styles for for default (Inter) font
+ *
+ * circle size : font size (px)
+ */
+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
@@ -57,9 +74,15 @@ 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', 'd-flex align-items-center justify-content-center', className)}
+      className={clsx(
+        'np-circle',
+        { 'np-circle-border': enableBorder },
+        'd-flex align-items-center justify-content-center',
+        className,
+      )}
     >
       {children}
     </Element>

package/src/flowNavigation/FlowNavigation.story.tsx

@@ -1,12 +1,10 @@
 import { boolean, select, text } from '@storybook/addon-knobs';
-import { Person as ProfileIcon, Briefcase as BriefcaseIcon } from '@transferwise/icons';
 import { useState } from 'react';
 
-import Avatar, { AvatarType } from '../avatar';
-import AvatarWrapper from '../avatarWrapper';
+import AvatarView from '../avatarView';
 import Body from '../body';
 import Button from '../button';
-import { ProfileType, Size, Typography } from '../common';
+import { ProfileType, Typography } from '../common';
 import Logo from '../logo';
 import OverlayHeader from '../overlayHeader';
 
@@ -19,43 +17,24 @@ 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', Object.keys(avatarProfiles), 'Profile');
+  const profileType = select(
+    'avatar',
+    [ProfileType.PERSONAL, ProfileType.BUSINESS],
+    ProfileType.PERSONAL,
+  );
   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',
-  );
+  const avatarURL = text('avatarURL', '../tapestry-01.png');
 
   return !closed ? (
     <>
       <FlowNavigation
-        avatar={
-          !showAvatar ? null : (
-            <Avatar type={AvatarType.ICON} size={Size.MEDIUM}>
-              {getAvatarProfile(showAvatar)}
-            </Avatar>
-          )
-        }
+        avatar={!profileType ? null : <AvatarView profileType={profileType} />}
         logo={<Logo />}
         activeStep={activeStep}
         done={done}
@@ -132,7 +111,7 @@ export const Variants = () => {
 
       <FlowNavigation
         done={done}
-        avatar={<AvatarWrapper url={avatarURL} profileType={profileType} />}
+        avatar={<AvatarView imgSrc={avatarURL} profileType={profileType} />}
         activeStep={activeStep}
         steps={[
           {
@@ -178,7 +157,7 @@ export const Variants = () => {
       {/* Instance of always `done` FlowNav for visual testing */}
       <FlowNavigation
         done
-        avatar={<AvatarWrapper url={avatarURL} profileType={profileType} />}
+        avatar={<AvatarView imgSrc={avatarURL} profileType={profileType} />}
         activeStep={activeStep}
         steps={[
           { label: 'Recipient', hoverLabel: 'Daniele Tomboro', onClick: () => setActiveStep(0) },
@@ -240,11 +219,7 @@ export const SendFlow = () => {
   return (
     <>
       <FlowNavigation
-        avatar={
-          <Avatar type={AvatarType.ICON} size={Size.MEDIUM}>
-            <ProfileIcon />
-          </Avatar>
-        }
+        avatar={<AvatarView />}
         logo={<Logo />}
         activeStep={activeStep}
         steps={steps}
@@ -272,7 +247,11 @@ export const SendFlow = () => {
 export const WithOverlayHeaderComparison = () => {
   const [activeStep, setActiveStep] = useState(4);
   const [closed, setClosed] = useState(false);
-  const showAvatar = select('avatar', Object.keys(avatarProfiles), 'Profile');
+  const profileType = select(
+    'avatar',
+    [ProfileType.PERSONAL, ProfileType.BUSINESS],
+    ProfileType.PERSONAL,
+  );
   const showCloseButton = boolean('show closeButton', true);
   const showMobileBackButton = boolean('show mobile backButton', true);
   const done = boolean('done', false);
@@ -281,13 +260,7 @@ export const WithOverlayHeaderComparison = () => {
     <>
       <div style={{ border: '1px solid #e8e8e8' }}>
         <FlowNavigation
-          avatar={
-            showAvatar ? (
-              <Avatar type={AvatarType.ICON} size={Size.MEDIUM}>
-                {getAvatarProfile(showAvatar)}
-              </Avatar>
-            ) : null
-          }
+          avatar={profileType ? <AvatarView profileType={profileType} /> : null}
           activeStep={activeStep}
           done={done}
           steps={[]}
@@ -301,13 +274,7 @@ export const WithOverlayHeaderComparison = () => {
       </div>
       <div style={{ border: '1px solid #e8e8e8' }}>
         <OverlayHeader
-          avatar={
-            showAvatar ? (
-              <Avatar type={AvatarType.ICON} size={Size.MEDIUM}>
-                {getAvatarProfile(showAvatar)}
-              </Avatar>
-            ) : null
-          }
+          avatar={profileType ? <AvatarView profileType={profileType} /> : null}
           onClose={showCloseButton ? () => setClosed(true) : undefined}
         />
       </div>

package/src/i18n/zh-HK.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "找不到任何結果",
   "neptune.SelectOption.action.label": "選擇",
   "neptune.SelectOption.selected.action.label": "更改已選選項",
+  "neptune.StatusIcon.iconLabel.error": "錯誤:",
+  "neptune.StatusIcon.iconLabel.information": "資訊:",
+  "neptune.StatusIcon.iconLabel.pending": "處理中:",
+  "neptune.StatusIcon.iconLabel.success": "成功:",
+  "neptune.StatusIcon.iconLabel.warning": "警告：",
   "neptune.Summary.statusDone": "已完成事項",
   "neptune.Summary.statusNotDone": "未完成事項",
   "neptune.Summary.statusPending": "待處理事項",

package/src/index.ts

@@ -8,6 +8,7 @@ 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';
@@ -103,6 +104,7 @@ 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';
@@ -244,6 +246,7 @@ export {
   getLangFromLocale,
   isBrowser,
   isServerSide,
+  getBrandColorFromSeed,
 } from './common';
 
 /**