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

package/src/avatarGroup/AvatarGroup.tsx

@@ -0,0 +1,80 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable react/jsx-key */
+import { clsx } from 'clsx';
+import { CommonProps } from '../common';
+import AvatarView, { AvatarViewProps } from '../avatarView';
+
+type AvatarType = { asset?: AvatarViewProps['children'] } & Omit<
+  AvatarViewProps,
+  'notification' | 'selected' | 'size' | 'badge' | 'action' | 'children'
+>;
+type AvatarGroupOrientation = 'horizontal' | 'diagonal';
+type AvatarGroupDiagonalSize = 24 | 32 | 40 | 48 | 56 | 72;
+type AvatarGroupSize = 16 | AvatarGroupDiagonalSize;
+
+/**
+ * Diagonal orientation sets custom sizes for avatars
+ */
+const avatarGroupDiagonalSizeMap: Record<AvatarGroupDiagonalSize, number> = {
+  24: 15,
+  32: 20,
+  40: 24,
+  48: 30,
+  56: 34,
+  72: 44,
+};
+
+export type Props = {
+  'aria-label'?: string;
+  avatars: AvatarType[];
+  orientation?: AvatarGroupOrientation;
+  size?: AvatarGroupSize;
+  interactive?: boolean;
+} & CommonProps;
+
+export default function AvatarGroup({
+  avatars,
+  orientation: orientationProp = 'horizontal',
+  size = 48,
+  'aria-label': ariaLabel,
+  className,
+  interactive,
+}: Props) {
+  const orientation =
+    orientationProp === 'diagonal' && size === 16 ? 'horizontal' : orientationProp;
+  const avatarSize = orientation === 'diagonal' ? avatarGroupDiagonalSizeMap[size] : size;
+  return (
+    <div
+      className={clsx('np-avatar-group', `np-avatar-group-${orientation}`, className)}
+      // @ts-expect-error `--np-avatar-group-size` exsits in styles of AvatarGroup
+      style={{ '--np-avatar-group-size': `${size}px`, '--np-avatar-size': `${avatarSize}px` }}
+      aria-label={ariaLabel}
+    >
+      {avatars.length < 2 || (size === 16 && orientationProp === 'diagonal')
+        ? null
+        : avatars.map((avatar, index) => (
+            <div
+              className={clsx(
+                { [`np-avatar-group-${orientation}-child`]: index !== 0 },
+                { [`np-avatar-group-${orientation}-mask`]: index !== avatars.length - 1 },
+              )}
+              style={{
+                // @ts-expect-error CSS custom props allowed
+                '--np-avatar-group-index': index,
+              }}
+            >
+              <AvatarView
+                key={index}
+                {...avatar}
+                size={avatarSize}
+                // @ts-expect-error CSS custom props allowed
+                style={{ '--circle-size': `${avatarSize}px`, ...avatar.style }}
+                interactive={interactive}
+              >
+                {avatar.asset}
+              </AvatarView>
+            </div>
+          ))}
+    </div>
+  );
+}

package/src/avatarGroup/index.ts

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

package/src/avatarView/AvatarView.css

@@ -0,0 +1,28 @@
+.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;
+}
+.np-avatar-view {
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+  color: var(--color-interactive-primary);
+}
+.np-avatar-view-non-interactive .np-avatar-view-content .wds-flag {
+  box-shadow: none;
+}

package/src/avatarView/AvatarView.less

@@ -0,0 +1,16 @@
+@import './NotificationDot.less';
+
+.np-avatar-view {
+  border-radius: var(--radius-full);
+  color: var(--color-interactive-primary);
+
+  &-non-interactive {
+    .np-avatar-view-content {  
+      // dismiss broken shadow (DS-6309) on Flag component
+      // https://github.com/transferwise/web-art/blob/main/src/flags/Flag.css#L2
+      .wds-flag {
+        box-shadow: none;
+      }
+    }
+  }
+}

package/src/avatarView/AvatarView.story.tsx

@@ -0,0 +1,573 @@
+/* eslint-disable react/jsx-key */
+import { Meta, StoryObj } from '@storybook/react';
+import { storyConfig } from '../test-utils';
+import {
+  Camera,
+  Convert,
+  FastFlag,
+  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 { getBrandColorFromSeed, getInitials } from '../common';
+import Display from '../display';
+import Image from '../image';
+
+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: () => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      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>
+          ))}
+
+          {sizes.map((size) => (
+            <AvatarView key={size} size={size} selected={selected}>
+              <Image src="../avatar-square-dude.webp" alt="avatar" />
+            </AvatarView>
+          ))}
+          {sizes.map((size) => (
+            <AvatarView
+              key={size}
+              size={size}
+              imgSrc="../avatar-square-dude.webp"
+              selected={selected}
+              action={{
+                onClick: () => {
+                  action('interactive avatar');
+                  setSelected(!selected);
+                },
+              }}
+            />
+          ))}
+        </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>
+            <Freeze />
+          </AvatarView>
+        ))}
+        {sizes.map((size) => (
+          <AvatarView
+            key={size}
+            size={size}
+            notification
+            action={{
+              onClick: () => action('interactive avatar'),
+            }}
+          >
+            <Freeze />
+          </AvatarView>
+        ))}
+
+        {sizes.map((size) => (
+          <AvatarView key={size} size={size} notification action={{ href: '#' }}>
+            <Freeze />
+          </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={{ 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>
+      );
+    },
+  },
+  { 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') }} imgSrc="../avatar-square-dude.webp" />
+
+          <AvatarView action={{ href: '#' }} imgSrc="../avatar-square-dude.webp" />
+
+          <AvatarView
+            action={{ onClick: action('onClick') }}
+            badge={{ flagCode: 'EU' }}
+            imgSrc="../avatar-square-dude.webp"
+            name="Test Name"
+          />
+
+          <AvatarView
+            action={{ href: '#' }}
+            badge={{ flagCode: 'EU' }}
+            imgSrc="../avatar-square-dude.webp"
+            name="Test Name"
+          />
+
+          <AvatarView action={{ onClick: action('onClick') }} name="Test Name" />
+
+          <AvatarView action={{ href: '#' }} name="Test Name" />
+
+          <AvatarView
+            action={{ onClick: action('onClick') }}
+            badge={{ flagCode: 'EU' }}
+            name="Test Name"
+          />
+
+          <AvatarView action={{ href: '#' }} badge={{ flagCode: 'EU' }} name="Test Name" />
+
+          <AvatarView action={{ onClick: action('onClick') }}>
+            <Leaf />
+          </AvatarView>
+
+          <AvatarView action={{ href: '#' }}>
+            <Leaf />
+          </AvatarView>
+
+          <AvatarView action={{ onClick: action('onClick') }} badge={{ flagCode: 'EU' }}>
+            <Leaf />
+          </AvatarView>
+
+          <AvatarView action={{ href: '#' }} badge={{ flagCode: 'EU' }}>
+            <Leaf />
+          </AvatarView>
+        </div>
+      );
+    },
+  },
+  { variants: ['light', 'dark'] },
+);
+
+export const Images: Story = storyConfig(
+  {
+    render: () => {
+      return (
+        <div
+          style={{
+            gap: '1em',
+            display: 'grid',
+            justifyContent: 'space-between',
+            gridTemplate: 'auto auto / repeat(7, min-content)',
+          }}
+        >
+          {/* interactive image */}
+          {sizes.map((size) => (
+            <AvatarView
+              key={size}
+              size={size}
+              action={{ onClick: action('onClick') }}
+              imgSrc="../avatar-square-dude.webp"
+              name="Test Name"
+              type="business"
+            />
+          ))}
+          {/* non interactive image */}
+          {sizes.map((size) => (
+            <AvatarView
+              key={size}
+              size={size}
+              imgSrc="../avatar-square-dude.webp"
+              name="Test Name"
+              type="business"
+            />
+          ))}
+          {/* Flag as an image + interactive */}
+          {sizes.map((size) => (
+            <AvatarView key={size} size={size} action={{ onClick: action('onClick') }}>
+              <Flag code="JPY" intrinsicSize={size} />
+            </AvatarView>
+          ))}
+          {/* Flag as an image + non interactive */}
+          {sizes.map((size) => (
+            <AvatarView key={size} size={size}>
+              <Flag code="JPY" intrinsicSize={size} />
+            </AvatarView>
+          ))}
+          {/* Custom image + interactive */}
+          {sizes.map((size) => (
+            <AvatarView
+              key={size}
+              imgSrc="../avatar-rectangle-fox.webp"
+              size={size}
+              action={{ onClick: action('onClick') }}
+            />
+          ))}
+          {/* Custom image + non interactive */}
+          {sizes.map((size) => (
+            <AvatarView key={size} size={size} imgSrc="../avatar-rectangle-fox.webp" />
+          ))}
+        </div>
+      );
+    },
+  },
+  { variants: ['light', 'dark'] },
+);
+
+export const Profiles: 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}
+              imgSrc="../avatar-square-dude.webp"
+              name="Test Name"
+              type="business"
+            />
+          ))}
+
+          {sizes.map((size) => (
+            <AvatarView
+              key={size}
+              size={size}
+              action={{ onClick: action('onClick') }}
+              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}
+              action={{ onClick: action('onClick') }}
+              name="Test Name"
+            />
+          ))}
+
+          {sizes.map((size) => (
+            <AvatarView key={size} size={size} type="business" />
+          ))}
+
+          {sizes.map((size) => (
+            <AvatarView
+              key={size}
+              size={size}
+              action={{ onClick: action('onClick') }}
+              type="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 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 = {
+  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
+          action={{ onClick: action('onClick') }}
+          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 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={{ flagCode: 'EU' }}
+          style={{ backgroundColor: getBrandColorFromSeed(profileName1) }}
+        >
+          <Display>{getInitials(profileName1)}</Display>
+        </AvatarView>
+        <AvatarView style={{ backgroundColor: getBrandColorFromSeed(profileName1) }}>
+          <Display>{getInitials(profileName1)}</Display>
+        </AvatarView>
+        <AvatarView
+          action={{ onClick: action('onClick') }}
+          style={{ backgroundColor: getBrandColorFromSeed(profileName2) }}
+        >
+          <Display>{getInitials(profileName1)}</Display>
+        </AvatarView>
+        <AvatarView
+          action={{ href: '#' }}
+          badge={{ flagCode: 'EU' }}
+          style={{ backgroundColor: getBrandColorFromSeed(profileName2) }}
+        >
+          <Display>{getInitials(profileName1)}</Display>
+        </AvatarView>
+        <AvatarView>9+</AvatarView>
+        <AvatarView action={{ href: '#' }}>5+</AvatarView>
+      </div>
+    );
+  },
+};