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

package/src/avatarView/AvatarView.story.tsx

@@ -0,0 +1,425 @@
+/* eslint-disable react/jsx-key */
+import { Meta, StoryObj } from '@storybook/react';
+import { storyConfig } from '../test-utils';
+import {
+  Freeze,
+  Graph,
+  Leaf,
+  MassPayout,
+  Money,
+  Plane,
+  PlusCircle,
+  QrCode,
+  Rewards,
+  Target,
+  Team,
+  Transport,
+  Wallet,
+  Water,
+} from '@transferwise/icons';
+import { action } from '@storybook/addon-actions';
+import { useState } from 'react';
+import AvatarView, { AvatarViewProps } from '.';
+import { Flag } from '@wise/art';
+import Body from '../body';
+import AvatarWrapper from '../avatarWrapper';
+import { getInitials, Sentiment } from '../common';
+import Display from '../display';
+import { get } from 'lodash';
+import { getAvatarColorFromSeed } from '../avatar/colors';
+
+export default {
+  title: 'Content/AvatarView',
+} satisfies Meta<typeof AvatarView>;
+
+type Story = StoryObj<typeof AvatarView>;
+
+const profileName1 = 'Wolter White';
+const profileName2 = 'Tyler Durden';
+const sizes: AvatarViewProps['size'][] = [16, 24, 32, 40, 48, 56, 72];
+
+export const Selected: Story = storyConfig(
+  {
+    render: () => {
+      const [selected, setSelected] = useState(true);
+      return (
+        <div
+          style={{
+            gap: '1em',
+            display: 'grid',
+            justifyContent: 'space-between',
+            gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
+          }}
+        >
+          {sizes.map((size) => (
+            <AvatarView key={size} size={size} selected={selected}>
+              <Freeze />
+            </AvatarView>
+          ))}
+          {sizes.map((size) => (
+            <AvatarView
+              key={size}
+              size={size}
+              selected={selected}
+              action={{
+                onClick: () => {
+                  action('interactive avatar');
+                  setSelected(!selected);
+                },
+              }}
+            >
+              <Freeze />
+            </AvatarView>
+          ))}
+        </div>
+      );
+    },
+  },
+  { variants: ['light', 'dark'] },
+);
+
+export const Notification: Story = storyConfig(
+  {
+    render: () => (
+      <div
+        style={{
+          gap: '1em',
+          display: 'grid',
+          justifyContent: 'space-between',
+          gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
+        }}
+      >
+        {sizes.map((size) => (
+          <AvatarView key={size} size={size} notification>
+            <MassPayout />
+          </AvatarView>
+        ))}
+        {sizes.map((size) => (
+          <AvatarView
+            key={size}
+            size={size}
+            notification
+            action={{
+              onClick: () => action('interactive avatar'),
+            }}
+          >
+            <MassPayout />
+          </AvatarView>
+        ))}
+
+        {sizes.map((size) => (
+          <AvatarView key={size} size={size} notification action={{ href: '#' }}>
+            <MassPayout />
+          </AvatarView>
+        ))}
+      </div>
+    ),
+  },
+  { variants: ['light', 'dark'] },
+);
+
+export const Badge: Story = storyConfig(
+  {
+    render: () => {
+      const currencies = ['USD', 'EUR', 'GBP', 'AUD', 'CAD', 'JPY', 'CNY'];
+      const icons = [
+        <Plane />,
+        <QrCode />,
+        <Target />,
+        <Transport />,
+        <Wallet />,
+        <Water />,
+        <Team />,
+      ];
+      return (
+        <div
+          style={{
+            gap: '1em',
+            display: 'grid',
+            justifyContent: 'space-between',
+            gridTemplate: 'auto auto / repeat(7, min-content)',
+          }}
+        >
+          {sizes.map((size, index) => (
+            <AvatarView key={size} size={size} badge={<Flag code={currencies[index]} />}>
+              {icons[index]}
+            </AvatarView>
+          ))}
+
+          {sizes.map((size, index) => (
+            <AvatarView
+              key={size}
+              size={size}
+              badge={<Flag code={currencies[index]} />}
+              action={{ onClick: action('onClick') }}
+              entity={{ name: 'Test Name' }}
+            >
+              {icons[index]}
+            </AvatarView>
+          ))}
+        </div>
+      );
+    },
+  },
+  { variants: ['light', 'dark'] },
+);
+
+export const Interactive: Story = storyConfig(
+  {
+    render: () => {
+      return (
+        <div
+          style={{
+            gap: '1em',
+            display: 'grid',
+            justifyContent: 'space-between',
+            gridTemplate: 'auto auto / repeat(2, min-content)',
+          }}
+        >
+          <Body type="body-large-bold">Button</Body>
+          <Body type="body-large-bold">Link</Body>
+
+          <AvatarView
+            action={{ onClick: action('onClick') }}
+            entity={{
+              imageSrc: '../avatar-img.webp',
+            }}
+          />
+
+          <AvatarView
+            action={{ href: '#' }}
+            entity={{
+              imageSrc: '../avatar-img.webp',
+            }}
+          />
+
+          <AvatarView
+            action={{ onClick: action('onClick') }}
+            badge={<Flag code="EU" />}
+            entity={{
+              imageSrc: '../avatar-img.webp',
+              name: 'Test Name',
+            }}
+          />
+
+          <AvatarView
+            action={{ href: '#' }}
+            badge={<Flag code="EU" />}
+            entity={{
+              imageSrc: '../avatar-img.webp',
+              name: 'Test Name',
+            }}
+          />
+
+          <AvatarView action={{ onClick: action('onClick') }} entity={{ name: 'Test Name' }} />
+
+          <AvatarView action={{ href: '#' }} entity={{ name: 'Test Name' }} />
+
+          <AvatarView
+            action={{ onClick: action('onClick') }}
+            badge={<Flag code="EU" />}
+            entity={{ name: 'Test Name' }}
+          />
+
+          <AvatarView
+            action={{ href: '#' }}
+            badge={<Flag code="EU" />}
+            entity={{ name: 'Test Name' }}
+          />
+
+          <AvatarView action={{ onClick: action('onClick') }}>
+            <Leaf />
+          </AvatarView>
+
+          <AvatarView action={{ href: '#' }}>
+            <Leaf />
+          </AvatarView>
+
+          <AvatarView action={{ onClick: action('onClick') }} badge={<Flag code="EU" />}>
+            <Leaf />
+          </AvatarView>
+
+          <AvatarView action={{ href: '#' }} badge={<Flag code="EU" />}>
+            <Leaf />
+          </AvatarView>
+        </div>
+      );
+    },
+  },
+  { variants: ['light', 'dark'] },
+);
+
+export const Entity: Story = storyConfig(
+  {
+    render: () => {
+      return (
+        <div
+          style={{
+            gap: '1em',
+            display: 'grid',
+            justifyContent: 'space-between',
+            gridTemplate: 'auto auto / repeat(7, min-content)',
+          }}
+        >
+          {sizes.map((size) => (
+            <AvatarView
+              key={size}
+              size={size}
+              entity={{
+                imageSrc: '../avatar-img.webp',
+                name: 'Test Name',
+                profileType: 'business',
+              }}
+            />
+          ))}
+
+          {sizes.map((size) => (
+            <AvatarView
+              key={size}
+              size={size}
+              action={{ onClick: action('onClick') }}
+              entity={{
+                imageSrc: '../avatar-img.webp',
+                name: 'Test Name',
+                profileType: 'business',
+              }}
+            />
+          ))}
+
+          {sizes.map((size) => (
+            <AvatarView key={size} size={size} entity={{ name: 'Test Name' }} />
+          ))}
+
+          {sizes.map((size) => (
+            <AvatarView
+              key={size}
+              size={size}
+              action={{ onClick: action('onClick') }}
+              entity={{ name: 'Test Name' }}
+            />
+          ))}
+
+          {sizes.map((size) => (
+            <AvatarView key={size} size={size} entity={{ profileType: 'business' }} />
+          ))}
+
+          {sizes.map((size) => (
+            <AvatarView
+              key={size}
+              size={size}
+              action={{ onClick: action('onClick') }}
+              entity={{ profileType: 'business' }}
+            />
+          ))}
+
+          {sizes.map((size) => (
+            <AvatarView key={size} size={size} />
+          ))}
+
+          {sizes.map((size) => (
+            <AvatarView key={size} size={size} action={{ onClick: action('onClick') }} />
+          ))}
+        </div>
+      );
+    },
+  },
+  { variants: ['light', 'dark'] },
+);
+
+export const BrokenImageFallback: Story = {
+  render: () => <AvatarView entity={{ imageSrc: '../img-wrong-url.lol' }} />,
+};
+
+export const EdgeInstaces: Story = {
+  render: () => {
+    const css = `.custom-variant {
+      border: 1px dotted black;
+    }`;
+    return (
+      <div
+        style={{
+          gap: '1em',
+          display: 'grid',
+          justifyContent: 'space-between',
+          gridTemplate: 'auto auto / repeat(2, min-content)',
+        }}
+      >
+        <style>{css}</style>
+        {/* <Body>- Custom colors</Body> */}
+        <AvatarView
+          action={{ onClick: action('onClick') }}
+          badge={<Flag code="eu" />}
+          style={{ backgroundColor: 'var(--color-bright-orange)' }}
+        >
+          <Money />
+        </AvatarView>
+        <AvatarView
+          badge={<Flag code="eu" />}
+          style={{ backgroundColor: 'var(--color-bright-orange)' }}
+        >
+          <Money />
+        </AvatarView>
+        {/* <Body>- Add example with dashed avatar as in shared balances</Body> */}
+        <AvatarView action={{ onClick: action('onClick') }} className="custom-variant">
+          <PlusCircle />
+        </AvatarView>
+        <AvatarView action={{ href: '#' }} className="custom-variant">
+          <PlusCircle />
+        </AvatarView>
+        <AvatarView action={{ href: '#' }} className="custom-variant">
+          {null}
+        </AvatarView>
+        {/* <Body> - Add example custom backgrounds as in account summary (https://wise.com/account-summary)</Body> */}
+        <AvatarView style={{ backgroundColor: 'rgb(203, 217, 195)' }}>
+          <span style={{ color: 'rgb(22, 51, 0)' }}>
+            <Graph />
+          </span>
+        </AvatarView>
+        <AvatarView
+          action={{ onClick: action('onClikc') }}
+          style={{ backgroundColor: 'rgb(203, 217, 195)' }}
+        >
+          <span style={{ color: 'rgb(22, 51, 0)' }}>
+            <Graph />
+          </span>
+        </AvatarView>
+        <AvatarView style={{ backgroundColor: 'rgb(22, 51, 0)' }}>
+          <span style={{ color: 'rgb(203, 217, 195)' }}>
+            <Rewards />
+          </span>
+        </AvatarView>
+        <AvatarView
+          action={{ onClick: action('onClikc') }}
+          style={{ backgroundColor: 'rgb(22, 51, 0)' }}
+        >
+          <span style={{ color: 'rgb(203, 217, 195)' }}>
+            <Rewards />
+          </span>
+        </AvatarView>
+        {/* <Body>- Add example Wise Sand + custom background from hash</Body> */}
+        <AvatarView
+          badge={<Flag code="eu" />}
+          style={{ backgroundColor: getAvatarColorFromSeed(profileName1) }}
+        >
+          <Display>{getInitials(profileName1)}</Display>
+        </AvatarView>
+        <AvatarView style={{ backgroundColor: getAvatarColorFromSeed(profileName1) }}>
+          <Display>{getInitials(profileName1)}</Display>
+        </AvatarView>
+        <AvatarView
+          action={{ onClick: action('onClick') }}
+          style={{ backgroundColor: getAvatarColorFromSeed(profileName2) }}
+        >
+          <Display>{getInitials(profileName1)}</Display>
+        </AvatarView>
+        <AvatarView
+          action={{ href: '#' }}
+          badge={<Flag code="eu" />}
+          style={{ backgroundColor: getAvatarColorFromSeed(profileName2) }}
+        >
+          <Display>{getInitials(profileName1)}</Display>
+        </AvatarView>
+      </div>
+    );
+  },
+};

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;