@transferwise/components 0.0.0-experimental-8d0974a → 0.0.0-experimental-53b8447

package/src/avatarView/AvatarView.tsx

@@ -0,0 +1,184 @@
+import Badge, { BadgeAssets, BadgeProps, BadgeAssetsProps } from '../badge';
+import NotificationDot from './NotificationDot';
+import Circle, { CircleProps } from '../common/circle';
+import Image from '../image';
+import { HTMLAttributes, PropsWithChildren, useState } from 'react';
+import { ActionOptions as ActionProps } from '../common/action/Action';
+import { clsx } from 'clsx';
+import { getInitials, Size } from '../common';
+import {
+  Briefcase as BusinessProfileIcon,
+  Profile as PersonalProfileIcon,
+} from '@transferwise/icons';
+
+type InteractiveProps = Omit<ActionProps, 'text'> &
+  Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'aria-labelledby'>;
+
+export type Props = {
+  imgSrc?: string | null;
+  /**
+   * Entity name (personal initials or business name), it will be boilded down to 1 or 2 chars (initials)
+   */
+  name?: string | null;
+  type?: 'personal' | 'business';
+  size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;
+  /** adds prebuilt notification dot via Badge component */
+  notification?: boolean;
+  // badge?: React.ReactNode;
+  badge?: BadgeAssetsProps;
+  /** changes background color to neutral and wraps component with button */
+  action?: InteractiveProps;
+  /** changes background color to neutral and adds predefined Badge */
+  selected?: boolean;
+  /** often use case to override `background-color` or `border` */
+  style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;
+} & Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'children'>;
+
+function AvatarView({
+  children = undefined,
+  size = 48,
+  selected,
+  notification,
+  badge,
+  action,
+  className,
+  style,
+  imgSrc,
+  type,
+  name,
+}: Props) {
+  const isInteractive = Boolean(action?.onClick ?? action?.href);
+  return (
+    <Interactive
+      {...action}
+      className={clsx('np-avatar-view', { 'np-avatar-view-selected': selected }, className)}
+    >
+      <Badges avatar={{ size, notification, selected }} {...badge}>
+        <Circle
+          size={size}
+          fixedSize
+          className={clsx('np-avatar-view-content')}
+          enableBorder={!isInteractive || selected}
+          style={{
+            ...(selected && { '--circle-border-color': 'var(--color-interactive-primary)' }),
+            backgroundColor: isInteractive ? 'var(--color-background-neutral)' : 'transparent',
+            ...style,
+          }}
+        >
+          {children === undefined ? <Profile {...{ imgSrc, type, name }} /> : children}
+        </Circle>
+      </Badges>
+    </Interactive>
+  );
+}
+
+function Interactive({
+  children,
+  onClick,
+  href,
+  target,
+  className,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
+}: PropsWithChildren<InteractiveProps>) {
+  const elementName: React.ElementType | null = onClick ? 'button' : href ? 'a' : null;
+  if (elementName === null) {
+    // non interactive
+    return <div className={clsx(className, 'np-avatar-view-non-interactive')}>{children}</div>;
+  }
+  const a11yProps = { ariaLabel, ariaLabelledby };
+  if (elementName === 'button') {
+    return (
+      <button
+        type="button"
+        className={clsx(className, 'btn-unstyled')}
+        onClick={onClick}
+        {...a11yProps}
+      >
+        {children}
+      </button>
+    );
+  }
+  if (elementName === 'a') {
+    return (
+      // eslint-disable-next-line react/jsx-no-target-blank
+      <a
+        href={href}
+        target={target}
+        rel={target === '_blank' ? 'noreferrer' : undefined}
+        className={clsx(className, 'text-no-decoration')}
+        {...a11yProps}
+      >
+        {children}
+      </a>
+    );
+  }
+}
+
+/** Size of badge depends on size of avatar */
+const MAP_BADGE_ASSET_SIZE = {
+  16: 'sm',
+  24: 'sm',
+  32: 'sm',
+  40: 'sm',
+  48: 'sm',
+  56: 'lg',
+  72: 'lg',
+};
+
+/** Certain sizes of AvatarView has a custom offset of Badge */
+const MAP_BADGE_POSITION = {
+  24: -6,
+  32: -4,
+};
+
+type BadgesProps = BadgeAssetsProps &
+  PropsWithChildren<{
+    avatar: Pick<Props, 'selected' | 'size' | 'notification'>;
+  }>;
+
+/**
+ * Adds build-in badges to AvatarView
+ */
+function Badges({ children, avatar, ...badge }: BadgesProps) {
+  const { size = 48, selected, notification } = avatar;
+  const anyCustomBadge = Object.keys(badge).length > 0;
+  if ((anyCustomBadge || selected) && size > 16) {
+    const badgeSize: BadgeProps['size'] = MAP_BADGE_ASSET_SIZE[size] ?? Size.SMALL;
+    return (
+      <Badge
+        size={badgeSize}
+        badge={<BadgeAssets {...(selected ? { status: 'positive' } : badge)} size={badgeSize} />}
+        style={{
+          // @ts-expect-error CSS custom props allowed
+          '--badge-content-position': `${MAP_BADGE_POSITION[size] ?? 0}px`,
+        }}
+      >
+        {children}
+      </Badge>
+    );
+  }
+  if (notification) {
+    return <NotificationDot avatarSize={size}>{children}</NotificationDot>;
+  }
+  return children;
+}
+
+/**
+ * Common logic for entities (personal & business profiles or recipients)
+ */
+function Profile({ imgSrc, name, type }: Pick<Props, 'imgSrc' | 'name' | 'type'>) {
+  const [tryLoadImage, setTryLoadImage] = useState(true);
+  if (imgSrc && tryLoadImage) {
+    return <Image src={imgSrc} alt="" onError={() => setTryLoadImage(false)} />;
+  }
+  if (type) {
+    return type === 'business' ? <BusinessProfileIcon /> : <PersonalProfileIcon />;
+  }
+  if (name) {
+    return getInitials(name);
+  }
+  return <PersonalProfileIcon />;
+}
+
+export default AvatarView;

package/src/avatarView/NotificationDot.css

@@ -0,0 +1,20 @@
+.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;
+}

package/src/avatarView/NotificationDot.less

@@ -0,0 +1,24 @@
+.np-notification-dot {
+  --np-notification-dot-size: 14px;
+  position: relative;
+  display: inline-block;
+
+  &-mask {
+    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
+    );
+  }
+
+  &-badge {
+    position: absolute;
+    width: var(--np-notification-dot-size);
+    height: var(--np-notification-dot-size);
+    background-color: var(--color-sentiment-negative);
+    border-radius: var(--radius-full);
+    right: 0;
+  }
+}

package/src/avatarView/NotificationDot.tsx

@@ -0,0 +1,32 @@
+import { HTMLAttributes } from 'react';
+import { Props as AvatarViewProps } from './AvatarView';
+
+type Props = Pick<HTMLAttributes<HTMLDivElement>, 'children'> & {
+  avatarSize?: AvatarViewProps['size'];
+};
+
+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

@@ -94,6 +94,12 @@ export const All: Story = {
           <div>
             <AvatarWrapper badgeStatusIcon={Sentiment.PENDING} avatarProps={avatarProps} />
           </div>
+          <div>
+            <AvatarWrapper
+              avatarProps={avatarProps}
+              badgeUrl="https://wise.com/web-art/assets/flags/jpy.svg"
+            />
+          </div>
         </div>
       </div>
     );

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));
@@ -23,8 +24,8 @@
 }
 .tw-badge > .tw-badge__content {
   position: absolute;
-  bottom: 0;
-  right: 0;
+  bottom: var(--badge-content-position);
+  right: var(--badge-content-position);
   box-sizing: border-box;
   text-align: center;
   overflow: hidden;
@@ -33,7 +34,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)
@@ -52,8 +53,8 @@
 
   & > &__content {
     position: absolute;
-    bottom: 0;
-    .right(0);
+    bottom: var(--badge-content-position);
+    .right(var(--badge-content-position));
 
     box-sizing: border-box;
     text-align: center;

package/src/badge/Badge.tsx

@@ -27,6 +27,7 @@ export type BadgeProps = {
   size?: SizeSmall | DeprecatedSizes | SizeLarge;
   border?: ThemeDark | ThemeLight;
   'aria-label'?: string;
+  style?: React.CSSProperties;
 } & CommonProps;
 
 const mapLegacySize = {
@@ -36,6 +37,11 @@ const mapLegacySize = {
   [String(Size.LARGE)]: 24,
 } satisfies Record<string, CircleProps['size']>;
 
+// 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,
@@ -43,6 +49,7 @@ 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;
@@ -56,7 +63,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>
       <Circle size={mapLegacySize[size]} fixedSize className="tw-badge__content">
         {badge}

package/src/badge/BadgeAssets.tsx

@@ -0,0 +1,65 @@
+import StatusIcon, { StatusIconProps } from '../statusIcon';
+import { Flag } from '@wise/art';
+import Circle, { CircleProps } 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'];
+  flagCode?: string;
+  imgSrc?: string;
+  icon?: React.ReactNode;
+  type?: 'action' | 'reference';
+  size?: BadgeProps['size'];
+};
+
+/**
+ * Common pre-built badge variants.
+ */
+export default function BadgeAssets({
+  status,
+  flagCode,
+  imgSrc,
+  icon = null,
+  type = 'action',
+  size: sizeProp,
+}: 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} />;
+  }
+  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/common/circle/Circle.css

@@ -4,4 +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

@@ -3,4 +3,45 @@
   width: var(--circle-size);
   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);
+  }
+
+  // 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

@@ -1,7 +1,7 @@
 import { HTMLAttributes, forwardRef } from 'react';
 import { clsx } from 'clsx';
 
-export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72;
+export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72;
 
 export type Props = {
   /**
@@ -17,14 +17,42 @@ export type Props = {
    * as those can be dynamic a at certain viewport sizes
    */
   fixedSize?: boolean;
+  enableBorder?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
 
+/**
+ * circle like components has custom sizes for icons
+ */
+const MAP_ICON_SIZE = {
+  16: 12,
+  24: 16,
+  32: 18,
+  40: 20,
+  48: 24,
+  56: 28,
+  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
@@ -35,8 +63,18 @@ const Circle = forwardRef(function Circle(
     <Element
       {...props}
       ref={ref}
-      style={{ ...style, '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})` }}
-      className={clsx('np-circle', 'd-flex align-items-center justify-content-center', className)}
+      style={{
+        '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,
+        '--circle-icon-size': `${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,
+      )}
     >
       {children}
     </Element>

package/src/common/dateUtils/index.ts

@@ -5,4 +5,3 @@ export { getMonthNames } from './getMonthNames/getMonthNames';
 export { isDateValid } from './isDateValid/isDateValid';
 export { isMonthAndYearFormat } from './isMonthAndYearFormat/isMonthAndYearFormat';
 export { MDY, YMD } from './getFormatForLocale/getFormatForLocale';
-export { returnDateView } from './getDateView/getDateView';