@transferwise/components 0.0.0-experimental-f7495f3 → 0.0.0-experimental-37d8e2c

package/src/avatarView/AvatarView.tsx

@@ -0,0 +1,217 @@
+import Badge from '../badge';
+import { getInitials } from '../common';
+import NotificationDot from '../common/notificationDot/NotificationDot';
+import StatusIcon from '../statusIcon';
+import Circle from '../common/circle';
+import { HTMLAttributes, PropsWithChildren, useState } from 'react';
+import { ActionOptions as ActionProps } from '../common/action/Action';
+import { clsx } from 'clsx';
+import { Briefcase, Profile } from '@transferwise/icons';
+
+type InteractiveProps = Omit<ActionProps, 'text'> &
+  Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'aria-labelledby'>;
+
+const AvatarViewDefaultSize = 48;
+
+export type Props = PropsWithChildren<{
+  size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;
+  /** adds prebuilt notification dot via Badge component */
+  notification?: boolean;
+  /** adds custom badge to avatar */
+  badge?: React.ReactNode;
+  entity?: EntityProps;
+  /** 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?: React.CSSProperties;
+}> &
+  Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>;
+
+/** Non interactive avatar view has custom border width */
+const mapNonInteractiveBorderWidth = {
+  16: 0.667,
+  24: 1,
+  32: 1,
+  40: 1.25,
+  48: 1.5,
+  56: 1.75,
+  72: 2.25,
+};
+
+/** Selected state has custom border width */
+const mapSelectedBorderWidth = {
+  16: 1,
+  24: 1,
+  32: 1,
+  40: 2,
+  48: 2,
+  56: 2,
+  72: 2,
+};
+
+function AvatarView({
+  children = undefined,
+  size = AvatarViewDefaultSize,
+  selected,
+  notification,
+  badge,
+  entity,
+  action,
+  className,
+  style,
+}: Props) {
+  return (
+    <Interactive
+      {...action}
+      className={clsx('np-avatar-view', { 'np-avatar-view-selected': selected }, className)}
+    >
+      <Badges asset={badge} avatarProps={{ size, notification, selected }}>
+        <Circle
+          size={size}
+          fixedSize
+          style={{
+            // @ts-expect-error CSS custom props allowed
+            '--avatar-view-selected-border-width': `${mapSelectedBorderWidth[size]}px`,
+            '--avatar-view-non-interactive-border-width': `${mapNonInteractiveBorderWidth[size]}px`,
+            ...style,
+          }}
+        >
+          {children === undefined ? <Entity {...entity} /> : 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={className}>{children}</div>;
+  }
+  const a11yProps = { ariaLabel, ariaLabelledby };
+  if (elementName === 'button') {
+    return (
+      <button
+        type="button"
+        className={clsx(className, 'np-avatar-view-interactive', '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, 'np-avatar-view-interactive', 'text-no-decoration')}
+        {...a11yProps}
+      >
+        {children}
+      </a>
+    );
+  }
+}
+
+const mapBadgeSize = {
+  16: 'sm',
+  24: 'sm',
+  32: 'sm',
+  40: 'sm',
+  48: 'sm',
+  56: 'lg',
+  72: 'lg',
+};
+
+/** AvatarView has a custom sizes for badge */
+const mapNotificationSize = {
+  16: 6,
+  24: 8,
+  32: 10,
+  40: 10,
+  48: 14,
+  56: 16,
+  72: 20,
+};
+
+type BadgesProps = PropsWithChildren<{
+  asset: React.ReactNode;
+  avatarProps: Pick<Props, 'selected' | 'size' | 'notification'>;
+}>;
+
+function Badges({ children, asset, avatarProps }: BadgesProps) {
+  const { size = AvatarViewDefaultSize, selected, notification } = avatarProps;
+  if (asset || selected || notification) {
+    if (asset && size > 16) {
+      return (
+        <Badge badge={asset} size={mapBadgeSize[size]}>
+          {children}
+        </Badge>
+      );
+    }
+    if (selected && size > 16) {
+      return (
+        <Badge
+          badge={<StatusIcon sentiment="positive" size={mapBadgeSize[size]} />}
+          size={mapBadgeSize[size]}
+        >
+          {children}
+        </Badge>
+      );
+    }
+    if (notification) {
+      return (
+        <Badge
+          badge={
+            <NotificationDot
+              // @ts-expect-error CSS custom props allowed
+              style={{ '--badge-notification-dot-size': `${mapNotificationSize[size]}px` }}
+            />
+          }
+          position="top-right"
+          size={mapBadgeSize[size]}
+        >
+          {children}
+        </Badge>
+      );
+    }
+  }
+  return children;
+}
+
+export type EntityProps = {
+  imageSrc?: string | null;
+  name?: string | null;
+  profileType?: 'personal' | 'business' | null;
+};
+
+function Entity({ imageSrc = null, name = null, profileType = null }: EntityProps) {
+  const [tryLoadImage, setTryLoadImage] = useState(true);
+  if (imageSrc && tryLoadImage) {
+    return <img src={imageSrc} alt="" onError={() => setTryLoadImage(false)} />;
+  }
+  if (profileType) {
+    return profileType === 'business' ? <Briefcase /> : <Profile />;
+  }
+  if (name) {
+    return <>{getInitials(name)}</>;
+  }
+  return <Profile />;
+}
+
+export default AvatarView;

package/src/avatarView/index.ts

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

package/src/avatarWrapper/AvatarWrapper.tsx

@@ -3,7 +3,14 @@ import { useState, useEffect } from 'react';
 
 import Avatar, { AvatarProps, AvatarType } from '../avatar';
 import Badge, { BadgeProps } from '../badge';
-import { ProfileType, ProfileTypePersonal, ProfileTypeBusiness, Size, Sentiment } from '../common';
+import {
+  ProfileType,
+  ProfileTypePersonal,
+  ProfileTypeBusiness,
+  Size,
+  Sentiment,
+  getInitials,
+} from '../common';
 import StatusIcon from '../statusIcon/StatusIcon';
 
 interface OptionalBadgeProps extends Omit<BadgeProps, 'badge'> {
@@ -68,6 +75,9 @@ export type AvatarWrapperProps = {
     }
 );
 
+/**
+ * @deprecated Use `AvatarView` component instead
+ */
 const AvatarWrapper = ({
   url,
   'aria-label': ariaLabel,
@@ -109,7 +119,7 @@ const AvatarWrapper = ({
       return {
         type: AvatarType.INITIALS,
         children: <>{getInitials(name)}</>,
-        backgroundColorSeed: profileId?.toString(),
+        backgroundColorSeed: name?.toString(),
         ...updatedAvatarProps,
       };
     }
@@ -133,18 +143,4 @@ const AvatarWrapper = ({
   );
 };
 
-function getInitials(name: string) {
-  const allInitials = name
-    .split(' ')
-    .map((part) => part[0])
-    .join('')
-    .toUpperCase();
-
-  if (allInitials.length === 1) {
-    return allInitials[0];
-  }
-
-  return allInitials[0] + allInitials.slice(-1);
-}
-
 export default AvatarWrapper;

package/src/badge/Badge.css

@@ -14,16 +14,16 @@
   --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 var(--badge-mask-position) 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 var(--badge-mask-position) 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));
-          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));
+  -webkit-mask-image: radial-gradient(circle at var(--badge-mask-position) 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));
+          mask-image: radial-gradient(circle at var(--badge-mask-position) 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));
 }
 .tw-badge > .tw-badge__content {
   position: absolute;
-  bottom: 0;
+  bottom: var(--badge-bottom-position);
   right: 0;
   box-sizing: border-box;
   text-align: center;

package/src/badge/Badge.less

@@ -33,7 +33,7 @@
 
     mask-image:
       radial-gradient(
-        circle at top calc(100% - var(--badge-mask-offset)) left calc(100% - var(--badge-mask-offset)),
+        circle at var(--badge-mask-position) 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)
@@ -42,7 +42,7 @@
     [dir="rtl"] & {
       mask-image:
         radial-gradient(
-          circle at top calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)),
+          circle at var(--badge-mask-position) 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)
@@ -52,7 +52,7 @@
 
   & > &__content {
     position: absolute;
-    bottom: 0;
+    bottom: var(--badge-bottom-position);
     .right(0);
 
     box-sizing: border-box;

package/src/badge/Badge.tsx

@@ -27,6 +27,7 @@ export type BadgeProps = {
   size?: SizeSmall | DeprecatedSizes | SizeLarge;
   border?: ThemeDark | ThemeLight;
   'aria-label'?: string;
+  position?: 'top-right' | 'bottom-right';
 } & CommonProps;
 
 const mapLegacySize = {
@@ -43,6 +44,7 @@ const Badge = ({
   border = Theme.LIGHT,
   'aria-label': ariaLabel,
   children,
+  position = 'bottom-right',
 }: BadgeProps) => {
   // medium is deprecated, so we map it to small
   const size = sizeProp === Size.MEDIUM ? Size.SMALL : sizeProp;
@@ -56,7 +58,14 @@ const Badge = ({
   );
 
   return (
-    <div aria-label={ariaLabel} className={classes}>
+    <div
+      aria-label={ariaLabel}
+      className={classes}
+      style={{
+        '--badge-mask-position': position === 'top-right' ? 'bottom' : 'top',
+        '--badge-bottom-position': position === 'top-right' ? 'calc(var(--badge-size) * 2)' : 0,
+      }}
+    >
       <div className="tw-badge__children">{children}</div>
       <Circle size={mapLegacySize[size]} fixedSize className="tw-badge__content">
         {badge}

package/src/circularButton/CircularButton.css

@@ -6,30 +6,6 @@
   cursor: pointer;
   position: relative;
 }
-.np-circular-btn .tw-icon {
-  position: absolute;
-  top: 16px;
-  top: var(--size-16);
-  pointer-events: none;
-  color: white;
-  transition: color 0.15s ease-in-out;
-  width: 100%;
-  left: 0;
-}
-[dir="rtl"] .np-circular-btn .tw-icon {
-  right: 0;
-  left: auto;
-  left: initial;
-}
-@media (max-width: 320px) {
-  .np-circular-btn .tw-icon {
-    top: 8px;
-    top: var(--size-8);
-  }
-}
-.np-circular-btn .tw-icon > svg {
-  margin: 0 auto;
-}
 .np-theme-personal .np-circular-btn {
   /* stylelint-disable-next-line no-duplicate-selectors */
 }

package/src/circularButton/CircularButton.less

@@ -9,23 +9,23 @@
   cursor: pointer;
   position: relative;
 
-  .tw-icon {
-    position: absolute;
-    top: var(--size-16);
-    pointer-events: none;
-    color: white;
-    transition: color 0.15s ease-in-out;
-    width: 100%;
-    .left(0);
+  // .tw-icon {
+  //   position: absolute;
+  //   top: var(--size-16);
+  //   pointer-events: none;
+  //   color: white;
+  //   transition: color 0.15s ease-in-out;
+  //   width: 100%;
+  //   .left(0);
 
-    @media (--screen-400-zoom) {
-      top: var(--size-8);
-    }
+  //   @media (--screen-400-zoom) {
+  //     top: var(--size-8);
+  //   }
 
-    > svg {
-      margin: 0 auto;
-    }
-  }
+  //   > svg {
+  //     margin: 0 auto;
+  //   }
+  // }
 
   .np-theme-personal & {
     /* stylelint-disable-next-line no-duplicate-selectors */

package/src/circularButton/CircularButton.tsx

@@ -28,14 +28,12 @@ const CircularButton = ({
 }: CircularButtonProps) => {
   const classes = clsx('btn np-btn', 'm-b-1', typeClassMap[type], priorityClassMap[priority]);
 
-  const iconElement = Number(icon.props.size) !== 24 ? cloneElement(icon, { size: 24 }) : icon;
-
   const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
 
   return (
     <label className={clsx('np-circular-btn', priority, type, disabled && 'disabled', className)}>
       <Circle
-        as="input"
+        as="button"
         // @ts-expect-error it's input[type=button] element
         type="button"
         size={isTinyViewport ? 64 : 56}
@@ -43,8 +41,9 @@ const CircularButton = ({
         className={classes}
         disabled={disabled}
         {...rest}
-      />
-      {iconElement}
+      >
+        {icon}
+      </Circle>
       <Body as="span" className="np-circular-btn__label" type={Typography.BODY_DEFAULT_BOLD}>
         {children}
       </Body>

package/src/common/circle/Circle.css

@@ -4,4 +4,21 @@
   width: var(--circle-size);
   height: var(--circle-size);
   flex-shrink: 0;
+  font-size: var(--circle-font-size);
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  line-height: 1;
+}
+.np-circle img {
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+  width: 100%;
+  height: 100%;
+}
+.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);
 }

package/src/common/circle/Circle.less

@@ -3,4 +3,26 @@
   width: var(--circle-size);
   height: var(--circle-size);
   flex-shrink: 0;
+
+  img {
+    border-radius: var(--radius-full);
+    width: 100%;
+    height: 100%;
+  }
+
+  // circle like components set custom typography styles for default (Inter) font
+  font-size: var(--circle-font-size);
+  font-weight: var(--font-weight-semi-bold);
+  line-height: 1;
+
+  // circle like components set custom typography styles for Wise Sand font
+  .np-display {
+    font-size: var(--circle-font-size);
+  }
+
+  // circle like components have custom icon sizes
+  .tw-icon > svg {
+    height: var(--circle-icon-size);
+    width: var(--circle-icon-size);
+  }
 }

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 = {
   /**
@@ -19,6 +19,32 @@ export type Props = {
   fixedSize?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
 
+/**
+ * circle like components has custom sizes for icons
+ */
+const mapIconSize = {
+  16: 12,
+  24: 16,
+  32: 18,
+  40: 20,
+  48: 24,
+  56: 28,
+  72: 36,
+};
+
+/**
+ * circle like components have custom font styles
+ */
+const mapFontSize = {
+  16: 8,
+  24: 12,
+  32: 14,
+  40: 18,
+  48: 22,
+  56: 26,
+  72: 30,
+};
+
 const Circle = forwardRef(function Circle(
   {
     as: Element = 'div',
@@ -35,7 +61,12 @@ const Circle = forwardRef(function Circle(
     <Element
       {...props}
       ref={ref}
-      style={{ ...style, '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})` }}
+      style={{
+        ...style,
+        '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,
+        '--circle-icon-size': `${mapIconSize[size]}px`,
+        '--circle-font-size': `${mapFontSize[size]}px`,
+      }}
       className={clsx('np-circle', 'd-flex align-items-center justify-content-center', className)}
     >
       {children}

package/src/common/index.js

@@ -23,3 +23,4 @@ export { MarkdownNodeType } from './propsValues/markdownNodeType';
 export { FileType } from './fileType';
 export * from './locale';
 export * from './commonProps';
+export * from './initials';

package/src/common/initials.ts

@@ -0,0 +1,13 @@
+export function getInitials(name: string) {
+  const allInitials = name
+    .split(' ')
+    .map((part) => part[0])
+    .join('')
+    .toUpperCase();
+
+  if (allInitials.length === 1) {
+    return allInitials[0];
+  }
+
+  return allInitials[0] + allInitials.slice(-1);
+}

package/src/common/notificationDot/NotificationDot.css

@@ -0,0 +1,10 @@
+.np-notification-dot {
+  --badge-notification-dot-size: 14px;
+  width: 14px;
+  width: var(--badge-notification-dot-size);
+  height: 14px;
+  height: var(--badge-notification-dot-size);
+  background-color: var(--color-sentiment-negative);
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+}

package/src/common/notificationDot/NotificationDot.less

@@ -0,0 +1,7 @@
+.np-notification-dot {
+    --badge-notification-dot-size: 14px;
+    width: var(--badge-notification-dot-size);
+    height: var(--badge-notification-dot-size);
+    background-color: var(--color-sentiment-negative);
+    border-radius: var(--radius-full);
+}

package/src/common/notificationDot/NotificationDot.tsx

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from 'react';
+
+type Props = Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>;
+
+/**
+ * @deprecated make this element part pre build badges
+ */
+export default function NotificationDot(props: Props) {
+  return <div {...props} className="np-notification-dot" />;
+}

package/src/display/Display.tsx

@@ -18,7 +18,7 @@ function Display({
   id,
 }: Props) {
   return (
-    <Heading id={id} className={clsx(`np-text-${type}`, 'text-primary', className)}>
+    <Heading id={id} className={clsx('np-display', `np-text-${type}`, 'text-primary', className)}>
       {children}
     </Heading>
   );

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';
@@ -102,6 +103,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';
@@ -243,7 +245,9 @@ export {
   getLangFromLocale,
   isBrowser,
   isServerSide,
+  getInitials,
 } from './common';
+export { getAvatarColorFromSeed } from './avatar/colors';
 
 /**
  * Translations