@transferwise/components 0.0.0-experimental-d11e9c5 → 0.0.0-experimental-76bb7cd

package/src/avatarView/AvatarView.story.tsx

@@ -1,425 +0,0 @@
-/* eslint-disable react/jsx-key */
-import { Meta, StoryObj } from '@storybook/react';
-import {
-  Camera,
-  Convert,
-  FastFlag,
-  Freeze,
-  Graph,
-  Money,
-  Plane,
-  PlusCircle,
-  QrCode,
-  Rewards,
-  Target,
-  Team,
-  Transport,
-  Wallet,
-  Water,
-} from '@transferwise/icons';
-import AvatarView, { AvatarViewProps } from '.';
-import { Flag } from '@wise/art';
-import { getBrandColorFromSeed, getInitials } from '../common';
-import Display from '../display';
-
-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 = {
-  tags: ['autodocs'],
-  render: () => {
-    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 interactive>
-            <Freeze />
-          </AvatarView>
-        ))}
-        {sizes.map((size) => (
-          <AvatarView
-            key={size}
-            size={size}
-            imgSrc="../avatar-square-dude.webp"
-            selected
-            interactive
-          />
-        ))}
-      </div>
-    );
-  },
-};
-
-export const Notification: Story = {
-  tags: ['autodocs'],
-  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>
-          <Freeze />
-        </AvatarView>
-      ))}
-      {sizes.map((size) => (
-        <AvatarView key={size} size={size} notification interactive>
-          <Freeze />
-        </AvatarView>
-      ))}
-      {sizes.map((size) => (
-        <AvatarView
-          key={size}
-          size={size}
-          imgSrc="../avatar-rectangle-fox.webp"
-          notification
-          interactive
-        />
-      ))}
-    </div>
-  ),
-};
-
-export const Badge: Story = {
-  tags: ['autodocs'],
-  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={{ flagCode: currencies[index] }}>
-            {icons[index]}
-          </AvatarView>
-        ))}
-
-        {sizes.map((size, index) => (
-          <AvatarView
-            key={size}
-            size={size}
-            imgSrc="../avatar-rectangle-fox.webp"
-            badge={{ imgSrc: '../tapestry-01.png' }}
-          />
-        ))}
-
-        {sizes.map((size, index) => (
-          <AvatarView
-            key={size}
-            size={size}
-            imgSrc="../avatar-square-dude.webp"
-            badge={{ imgSrc: '../tapestry-01.png' }}
-          />
-        ))}
-
-        {sizes.map((size, index) => (
-          <AvatarView key={size} size={size} badge={{ imgSrc: '../tapestry-01.png' }}>
-            {icons[index]}
-          </AvatarView>
-        ))}
-
-        {sizes.map((size, index) => (
-          <AvatarView key={size} size={size} badge={{ status: 'warning' }}>
-            {icons[index]}
-          </AvatarView>
-        ))}
-
-        {sizes.map((size, index) => (
-          <AvatarView key={size} size={size} badge={{ status: 'neutral' }}>
-            {icons[index]}
-          </AvatarView>
-        ))}
-
-        {sizes.map((size, index) => (
-          <AvatarView key={size} size={size} badge={{ status: 'negative' }}>
-            {icons[index]}
-          </AvatarView>
-        ))}
-
-        {sizes.map((size, index) => (
-          <AvatarView key={size} size={size} badge={{ icon: <FastFlag /> }}>
-            {icons[index]}
-          </AvatarView>
-        ))}
-
-        {sizes.map((size, index) => (
-          <AvatarView key={size} size={size} badge={{ type: 'reference' }}>
-            {icons[index]}
-          </AvatarView>
-        ))}
-
-        {sizes.map((size, index) => (
-          <AvatarView key={size} size={size} badge={{ type: 'action' }}>
-            {icons[index]}
-          </AvatarView>
-        ))}
-
-        {sizes.map((size) => (
-          <AvatarView
-            key={size}
-            size={size}
-            imgSrc="../avatar-square-dude.webp"
-            badge={{ type: 'action', icon: <Camera /> }}
-          />
-        ))}
-
-        {sizes.map((size) => (
-          <AvatarView
-            key={size}
-            size={size}
-            imgSrc="../avatar-square-dude.webp"
-            badge={{ type: 'reference', icon: <Convert /> }}
-          />
-        ))}
-
-        {sizes.map((size) => (
-          <AvatarView
-            key={size}
-            size={size}
-            imgSrc="../avatar-square-dude.webp"
-            badge={{ icon: <Convert /> }}
-          />
-        ))}
-      </div>
-    );
-  },
-};
-
-export const Images: Story = {
-  tags: ['autodocs'],
-  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}
-            interactive
-            imgSrc="../avatar-square-dude.webp"
-            name="Test Name"
-            type="business"
-          />
-        ))}
-        {sizes.map((size) => (
-          <AvatarView
-            key={size}
-            size={size}
-            imgSrc="../avatar-square-dude.webp"
-            name="Test Name"
-            type="business"
-          />
-        ))}
-        {sizes.map((size) => (
-          <AvatarView key={size} size={size} interactive>
-            <Flag code="JPY" intrinsicSize={size} />
-          </AvatarView>
-        ))}
-        {sizes.map((size) => (
-          <AvatarView key={size} size={size}>
-            <Flag code="JPY" intrinsicSize={size} />
-          </AvatarView>
-        ))}
-        {sizes.map((size) => (
-          <AvatarView key={size} interactive imgSrc="../avatar-rectangle-fox.webp" size={size} />
-        ))}
-        {sizes.map((size) => (
-          <AvatarView key={size} size={size} imgSrc="../avatar-rectangle-fox.webp" />
-        ))}
-      </div>
-    );
-  },
-};
-
-export const Profiles: Story = {
-  tags: ['autodocs'],
-  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}
-            imgSrc="../avatar-square-dude.webp"
-            name="Test Name"
-            type="business"
-          />
-        ))}
-
-        {sizes.map((size) => (
-          <AvatarView
-            key={size}
-            size={size}
-            interactive
-            imgSrc="../avatar-square-dude.webp"
-            name="Test Name"
-            type="business"
-          />
-        ))}
-
-        {sizes.map((size) => (
-          <AvatarView key={size} size={size} name="Test Name" />
-        ))}
-
-        {sizes.map((size) => (
-          <AvatarView key={size} size={size} interactive name="Test Name" />
-        ))}
-
-        {sizes.map((size) => (
-          <AvatarView key={size} size={size} type="business" />
-        ))}
-
-        {sizes.map((size) => (
-          <AvatarView key={size} size={size} interactive type="business" />
-        ))}
-
-        {sizes.map((size) => (
-          <AvatarView key={size} size={size} />
-        ))}
-
-        {sizes.map((size) => (
-          <AvatarView key={size} size={size} interactive />
-        ))}
-      </div>
-    );
-  },
-};
-
-export const ProfileBrokenImageFallback: Story = {
-  render: () => (
-    <>
-      <AvatarView imgSrc="../img-wrong-url.lol" />
-      <AvatarView imgSrc="../img-wrong-url.lol" type="business" />
-      <AvatarView imgSrc="../img-wrong-url.lol" type="business" name="D D" />
-    </>
-  ),
-};
-
-export const EdgeInstaces: Story = {
-  tags: ['autodocs'],
-  render: () => {
-    const css = `.custom-variant {
-      border: 1px dashed var(--color-border-neutral);
-    }`;
-    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
-          interactive
-          badge={{ flagCode: 'EU' }}
-          style={{ backgroundColor: 'var(--color-bright-orange)' }}
-        >
-          <Money />
-        </AvatarView>
-        <AvatarView
-          badge={{ flagCode: 'EU' }}
-          style={{ backgroundColor: 'var(--color-bright-orange)', border: 'none' }}
-        >
-          <Money />
-        </AvatarView>
-        {/* <Body>- Add example with dashed avatar as in shared balances</Body> */}
-        <AvatarView interactive className="custom-variant">
-          <PlusCircle />
-        </AvatarView>
-        <AvatarView interactive 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 interactive 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 interactive 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={{ flagCode: 'EU' }}
-          style={{ backgroundColor: getBrandColorFromSeed(profileName1) }}
-        >
-          <Display>{getInitials(profileName1)}</Display>
-        </AvatarView>
-        <AvatarView style={{ backgroundColor: getBrandColorFromSeed(profileName1) }}>
-          <Display>{getInitials(profileName1)}</Display>
-        </AvatarView>
-        <AvatarView interactive style={{ backgroundColor: getBrandColorFromSeed(profileName2) }}>
-          <Display>{getInitials(profileName1)}</Display>
-        </AvatarView>
-        <AvatarView
-          interactive
-          badge={{ flagCode: 'EU' }}
-          style={{ backgroundColor: getBrandColorFromSeed(profileName2) }}
-        >
-          <Display>{getInitials(profileName1)}</Display>
-        </AvatarView>
-        <AvatarView>9+</AvatarView>
-        <AvatarView interactive>5+</AvatarView>
-      </div>
-    );
-  },
-};

package/src/avatarView/AvatarView.tsx

@@ -1,141 +0,0 @@
-import Badge, { BadgeAssets, BadgeProps, BadgeAssetsProps } from '../badge';
-import NotificationDot from './NotificationDot';
-import Circle from '../common/circle';
-import Image from '../image';
-import { HTMLAttributes, PropsWithChildren, useState } from 'react';
-import { clsx } from 'clsx';
-import { getInitials, Size } from '../common';
-import {
-  Briefcase as BusinessProfileIcon,
-  Profile as PersonalProfileIcon,
-} from '@transferwise/icons';
-
-export type Props = {
-  imgSrc?: string | null;
-  /**
-   * Entity name (person (profile or recipient) 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;
-  notification?: boolean;
-  badge?: BadgeAssetsProps;
-  interactive?: boolean;
-  selected?: boolean;
-  style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;
-} & Pick<
-  HTMLAttributes<HTMLDivElement>,
-  'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-describedby'
->;
-
-function AvatarView({
-  children = undefined,
-  size = 48,
-  selected,
-  notification,
-  badge,
-  interactive = false,
-  className,
-  style,
-  imgSrc,
-  type,
-  name,
-  ...restProps
-}: Props) {
-  return (
-    <Circle
-      size={size}
-      fixedSize
-      className={clsx(
-        'np-avatar-view',
-        interactive ? 'np-avatar-view-interactive' : 'np-avatar-view-non-interactive',
-        { 'np-avatar-view-selected': selected },
-        className,
-      )}
-      {...restProps}
-    >
-      <Badges avatar={{ size, notification, selected }} {...badge}>
-        <Circle
-          size={size}
-          fixedSize
-          className={clsx('np-avatar-view-content')}
-          enableBorder={!interactive || selected}
-          style={{
-            ...(selected && { '--circle-border-color': 'var(--color-interactive-primary)' }),
-            ...style,
-          }}
-        >
-          {children === undefined ? <Profile {...{ imgSrc, type, name }} /> : children}
-        </Circle>
-      </Badges>
-    </Circle>
-  );
-}
-
-/** 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.toLowerCase() === 'business' ? <BusinessProfileIcon /> : <PersonalProfileIcon />;
-  }
-  if (name) {
-    return getInitials(name);
-  }
-  return <PersonalProfileIcon />;
-}
-
-export default AvatarView;

package/src/avatarView/NotificationDot.css

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

@@ -1,24 +0,0 @@
-.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

@@ -1,35 +0,0 @@
-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

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