@transferwise/components 45.11.0 → 45.13.0

package/src/avatar/Avatar.less

@@ -0,0 +1,158 @@
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/variables/neptune-tokens.less";
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/core/_typography.less";
+
+@avatar-diameter-72: 72px;
+@avatar-diameter-56: 56px;
+@avatar-diameter-48: 48px;
+@avatar-diameter-40: 40px;
+@avatar-diameter-24: 24px;
+
+.tw-avatar {
+  position: relative;
+  border-radius: 50%;
+  user-select: none;
+  box-sizing: border-box;
+
+  & &__content {
+    align-items: center;
+    background-color: #86a7bd1a;
+    background-color: var(--color-background-neutral);
+    border-radius: 50%;
+    color: var(--color-content-primary);
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    max-height: 100%;
+    max-width: 100%;
+    overflow: hidden;
+    width: 100%;
+  }
+
+  &--outlined {
+    border: 1px solid var(--color-interactive-accent);
+    cursor: pointer;
+
+    &:not(.disabled, :disabled):hover {
+      border-color: var(--color-interactive-accent-hover);
+    }
+  }
+
+  &--thumbnail {
+    & * {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  &--icon {
+    & * {
+      max-height: 100%;
+      max-width: 100%;
+    }
+  }
+
+  &.tw-avatar--initials,
+  &.tw-avatar--emoji {
+    font-family: Arial, sans-serif;
+    font-weight: var(--font-weight-semi-bold);
+  }
+
+  &.tw-avatar--initials,
+  &.tw-avatar--icon {
+    color: var(--color-content-primary);
+  }
+
+  &.tw-avatar--initials,
+  &.tw-avatar--emoji {
+    // There is a problem how emojis & text vertically aligned between Windows and Mac.
+    // Setting font family to Arial seems to resolve it.
+    font-family: Arial, sans-serif;
+  }
+
+  &.tw-avatar--branded .tw-avatar__content {
+    font-family: var(--font-family-display);
+    font-feature-settings: "ss01";
+    color: var(--color-dark-charcoal);
+    line-height: 1;
+  }
+
+  &--24 {
+    .avatar-dimension(@avatar-diameter-24);
+  }
+
+  &--40 {
+    .avatar-dimension(@avatar-diameter-40);
+  }
+
+  &--48 {
+    .avatar-dimension(@avatar-diameter-48);
+  }
+
+  &--56 {
+    .avatar-dimension(@avatar-diameter-56);
+  }
+
+  &--72 {
+    .avatar-dimension(@avatar-diameter-72);
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+
+  .np-theme-personal & {
+    &--outlined {
+      border-color: var(--color-interactive-primary);
+
+      &:not(.disabled, :disabled):hover {
+        border-color: var(--color-interactive-primary-hover);
+      }
+    }
+  }
+}
+
+.avatar-dimension(@avatar-size) {
+  @mask-size: 2px;
+
+  min-width: @avatar-size;
+  width: @avatar-size;
+  height: @avatar-size;
+
+  &.tw-avatar--emoji,
+  &.tw-avatar--icon {
+    font-size: @avatar-size * 0.5;
+  }
+
+  &.tw-avatar--initials {
+    font-size: @avatar-size * 0.35;
+  }
+
+  &.tw-avatar--branded {
+    font-size: @avatar-size * 0.45;
+  }
+
+  &.tw-avatar--outlined {
+    padding: @mask-size;
+
+    &.tw-avatar--thumbnail::after {
+      top: @mask-size;
+      left: @mask-size;
+      right: @mask-size;
+      bottom: @mask-size;
+    }
+  }
+
+  &.tw-avatar--thumbnail::after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid var(--color-border-overlay);
+    content: "";
+    border-radius: 50%;
+  }
+}

package/src/avatar/Avatar.spec.js

@@ -0,0 +1,51 @@
+import { Size } from '../common';
+import { render, screen } from '../test-utils';
+
+import avatarColorTestCases from './colors/avatarColorTestCases.json';
+
+import Avatar, { AvatarType } from '.';
+
+describe('Avatar', () => {
+  it('renders a medium sized thumbnail Avatar with NO outline', () => {
+    render(
+      <Avatar size={Size.MEDIUM}>
+        <span role="img" aria-label="Person with sunglasses emoji">
+          😎
+        </span>
+      </Avatar>,
+    );
+
+    expect(screen.getByText('😎').parentElement.parentElement).toHaveClass(
+      'tw-avatar tw-avatar--thumbnail tw-avatar--48',
+    );
+  });
+
+  it('renders a small sized emoji Avatar with outline', () => {
+    render(
+      <Avatar type={AvatarType.EMOJI} size={Size.SMALL} outlined>
+        <span role="img" aria-label="Money bag emoji">
+          💰
+        </span>
+      </Avatar>,
+    );
+
+    expect(screen.getByText('💰').parentElement.parentElement).toHaveClass(
+      'tw-avatar tw-avatar--emoji tw-avatar--24 tw-avatar--outlined',
+    );
+  });
+
+  describe('branded avatar colors', () => {
+    it.each(getAvatarColorTestCases())(
+      'for seed of %s return background color of %s',
+      (key, color) => {
+        render(<Avatar backgroundColorSeed={key.toString()}>JS</Avatar>);
+
+        expect(screen.getByText('JS')).toHaveStyle(`background-color: ${color.token}`);
+      },
+    );
+  });
+});
+
+function getAvatarColorTestCases() {
+  return avatarColorTestCases.map(({ key, color }) => [key, color]);
+}

package/src/avatar/Avatar.story.tsx

@@ -0,0 +1,227 @@
+import { Meta, StoryObj } from '@storybook/react';
+import * as wiseIcons from '@transferwise/icons';
+
+import { Size } from '../common';
+import { storyConfig } from '../test-utils';
+
+import Avatar, { AvatarType } from '.';
+
+export default {
+  component: Avatar,
+  title: 'Content/Avatar',
+  tags: ['autodocs'],
+} satisfies Meta<typeof Avatar>;
+
+type Story = StoryObj<typeof Avatar>;
+
+export const Emoji: Story = {
+  render: (args) => <Avatar {...args}>✈️</Avatar>,
+  args: {
+    type: AvatarType.EMOJI,
+    size: Size.MEDIUM,
+  },
+};
+
+export const Flag: Story = {
+  render: (args) => (
+    <Avatar {...args}>
+      <img src="https://wise.com/web-art/assets/flags/gbp.svg" alt="" />
+    </Avatar>
+  ),
+  args: {
+    type: AvatarType.THUMBNAIL,
+    size: Size.MEDIUM,
+    outlined: true,
+  },
+};
+
+export const Table: Story = storyConfig(
+  {
+    render: () => {
+      const flagResourceJpy = 'https://wise.com/web-art/assets/flags/jpy.svg';
+      const flagResourceGbp = 'https://wise.com/web-art/assets/flags/gbp.svg';
+      const backgroundColor = '#d6f5e3';
+      const emoji = '✈️';
+      const initials = 'GN';
+      const Icon = wiseIcons['Check'];
+
+      return (
+        <div>
+          <table>
+            Outlined
+            <tr>
+              <td>
+                <Avatar size={Size.LARGE} type={AvatarType.THUMBNAIL} outlined>
+                  <img src={flagResourceJpy} alt="" />
+                </Avatar>
+              </td>
+              <td>
+                <Avatar size={56} type={AvatarType.THUMBNAIL} outlined>
+                  <img src={flagResourceJpy} alt="" />
+                </Avatar>
+              </td>
+              <td>
+                <Avatar size={Size.MEDIUM} type={AvatarType.THUMBNAIL} outlined>
+                  <img src={flagResourceJpy} alt="" />
+                </Avatar>
+              </td>
+              <td>
+                <Avatar size={40} type={AvatarType.THUMBNAIL} outlined>
+                  <img src={flagResourceJpy} alt="" />
+                </Avatar>
+              </td>
+              <td>
+                <Avatar size={Size.SMALL} type={AvatarType.THUMBNAIL} outlined>
+                  <img src={flagResourceJpy} alt="" />
+                </Avatar>
+              </td>
+            </tr>
+            Image URL
+            <tr>
+              <td>
+                <Avatar size={Size.LARGE} type={AvatarType.THUMBNAIL}>
+                  <img src={flagResourceGbp} alt="" />
+                </Avatar>
+              </td>
+              <td>
+                <Avatar size={56} type={AvatarType.THUMBNAIL}>
+                  <img src={flagResourceGbp} alt="" />
+                </Avatar>
+              </td>
+              <td>
+                <Avatar size={Size.MEDIUM} type={AvatarType.THUMBNAIL}>
+                  <img src={flagResourceGbp} alt="" />
+                </Avatar>
+              </td>
+              <td>
+                <Avatar size={40} type={AvatarType.THUMBNAIL}>
+                  <img src={flagResourceGbp} alt="" />
+                </Avatar>
+              </td>
+              <td>
+                <Avatar size={Size.SMALL} type={AvatarType.THUMBNAIL}>
+                  <img src={flagResourceGbp} alt="" />
+                </Avatar>
+              </td>
+            </tr>
+            Emoji
+            <tr>
+              <td>
+                <Avatar size={Size.LARGE} type={AvatarType.EMOJI}>
+                  {emoji}
+                </Avatar>
+              </td>
+              <td>
+                <Avatar size={56} type={AvatarType.EMOJI}>
+                  {emoji}
+                </Avatar>
+              </td>
+              <td>
+                <Avatar size={Size.MEDIUM} type={AvatarType.EMOJI}>
+                  {emoji}
+                </Avatar>
+              </td>
+              <td>
+                <Avatar size={40} type={AvatarType.EMOJI}>
+                  {emoji}
+                </Avatar>
+              </td>
+              <td>
+                <Avatar size={Size.SMALL} type={AvatarType.EMOJI}>
+                  {emoji}
+                </Avatar>
+              </td>
+            </tr>
+            <div style={{ paddingBottom: '20px' }}>
+              <span style={{ position: 'absolute' }}>Custom background and icon</span>
+            </div>
+            <tr>
+              <td>
+                <Avatar size={Size.LARGE} type={AvatarType.ICON} backgroundColor={backgroundColor}>
+                  <Icon size={24} />
+                </Avatar>
+              </td>
+              <td>
+                <Avatar size={56} type={AvatarType.ICON} backgroundColor={backgroundColor}>
+                  <Icon size={24} />
+                </Avatar>
+              </td>
+              <td>
+                <Avatar size={Size.MEDIUM} type={AvatarType.ICON} backgroundColor={backgroundColor}>
+                  <Icon size={24} />
+                </Avatar>
+              </td>
+              <td>
+                <Avatar size={40} type={AvatarType.ICON} backgroundColor={backgroundColor}>
+                  <Icon size={24} />
+                </Avatar>
+              </td>
+              <td>
+                <Avatar size={Size.SMALL} type={AvatarType.ICON} backgroundColor={backgroundColor}>
+                  <Icon size={16} />
+                </Avatar>
+              </td>
+            </tr>
+            Initials
+            <tr>
+              <td>
+                <Avatar size={72} type={AvatarType.INITIALS}>
+                  {initials}
+                </Avatar>
+              </td>
+              <td>
+                <Avatar size={56} type={AvatarType.INITIALS}>
+                  {initials}
+                </Avatar>
+              </td>
+              <td>
+                <Avatar size={48} type={AvatarType.INITIALS}>
+                  {initials}
+                </Avatar>
+              </td>
+              <td>
+                <Avatar size={40} type={AvatarType.INITIALS}>
+                  {initials}
+                </Avatar>
+              </td>
+              <td>
+                <Avatar size={24} type={AvatarType.INITIALS}>
+                  {initials}
+                </Avatar>
+              </td>
+            </tr>
+            Branded
+            <tr>
+              <td>
+                <Avatar size={72} type={AvatarType.INITIALS} backgroundColorSeed="1">
+                  {initials}
+                </Avatar>
+              </td>
+              <td>
+                <Avatar size={56} type={AvatarType.INITIALS} backgroundColorSeed="2">
+                  {initials}
+                </Avatar>
+              </td>
+              <td>
+                <Avatar size={48} type={AvatarType.INITIALS} backgroundColorSeed="3">
+                  {initials}
+                </Avatar>
+              </td>
+              <td>
+                <Avatar size={40} type={AvatarType.INITIALS} backgroundColorSeed="4">
+                  {initials}
+                </Avatar>
+              </td>
+              <td>
+                <Avatar size={24} type={AvatarType.INITIALS} backgroundColorSeed="5">
+                  {initials}
+                </Avatar>
+              </td>
+            </tr>
+          </table>
+        </div>
+      );
+    },
+  },
+  { variants: ['default', 'dark', 'rtl'] },
+);

package/src/avatar/Avatar.tsx

@@ -0,0 +1,85 @@
+import classnames from 'classnames';
+import { useMemo } from 'react';
+
+import { Theme } from '../common';
+
+import { getAvatarColorFromSeed } from './colors';
+
+type NumericAvatarSize = 24 | 40 | 48 | 56 | 72;
+
+type LegacyAvatarSize = 'sm' | 'md' | 'lg';
+
+export type AvatarSize = NumericAvatarSize | LegacyAvatarSize;
+
+export type AvatarTheme = 'light' | 'dark';
+
+export type AvatarType = 'thumbnail' | 'icon' | 'emoji' | 'initials';
+
+export interface AvatarProps {
+  backgroundColor?: string;
+  backgroundColorSeed?: string;
+  children?: React.ReactNode;
+  className?: string;
+  outlined?: boolean;
+  size?: AvatarSize;
+  theme?: AvatarTheme;
+  type?: AvatarType;
+}
+
+const backwardsCompatibleSize = (size: AvatarSize): NumericAvatarSize => {
+  switch (size) {
+    case 'sm':
+      return 24;
+
+    case 'md':
+      return 48;
+
+    case 'lg':
+      return 72;
+
+    default:
+      return size;
+  }
+};
+
+const Avatar: React.FC<AvatarProps> = ({
+  backgroundColor = null,
+  backgroundColorSeed = null,
+  children = null,
+  className = null,
+  outlined = false,
+  size: sizeFromProps = 48,
+  theme = Theme.LIGHT,
+  type = 'thumbnail',
+}) => {
+  const backgroundColorFromSeed = useMemo<string | undefined>(
+    () =>
+      !backgroundColor && backgroundColorSeed
+        ? `var(${getAvatarColorFromSeed(backgroundColorSeed)})`
+        : undefined,
+    [backgroundColor, backgroundColorSeed],
+  );
+
+  const size = backwardsCompatibleSize(sizeFromProps);
+
+  return (
+    <div
+      className={classnames('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {
+        'tw-avatar--outlined': outlined,
+        'tw-avatar--branded': Boolean(backgroundColorFromSeed),
+        'np-text-title-body': type === 'initials',
+      })}
+    >
+      <div
+        className="tw-avatar__content"
+        style={{
+          backgroundColor: backgroundColor || backgroundColorFromSeed,
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default Avatar;

package/src/avatar/avatarTypes.ts

@@ -0,0 +1,7 @@
+// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
+export enum AvatarType {
+  THUMBNAIL = 'thumbnail',
+  ICON = 'icon',
+  EMOJI = 'emoji',
+  INITIALS = 'initials',
+}

package/src/avatar/colors/colors.ts

@@ -0,0 +1,36 @@
+/*
+ * The colors we support generating an Avatar background color from a "seed" for.
+ * Changing this array will change the assignment between seeds.
+ * Do not change this array.
+ */
+const avatarColors = [
+  '--color-bright-blue',
+  '--color-bright-yellow',
+  '--color-bright-pink',
+  '--color-bright-orange',
+] as const;
+
+/*
+ * Takes in a "seed" string and spits out an index for the color we should use.
+ * This implementation has been synced across all three clients so that we consistently
+ * generate branded avatar colors when rendering a list of Avatars.
+ * Do not change this implementation.
+ */
+const hashSeed = (seed: string): number => {
+  const base = 31;
+  const modulo = avatarColors.length;
+
+  let hashValue = 0;
+  let basePow = 1;
+
+  for (let i = 0; i < seed.length; i++) {
+    hashValue = (hashValue + seed.charCodeAt(i) * basePow) % modulo;
+    basePow = (basePow * base) % modulo;
+  }
+
+  return hashValue;
+};
+
+export const getAvatarColorFromSeed = (seed: string): (typeof avatarColors)[number] => {
+  return avatarColors[hashSeed(seed)];
+};

package/src/avatar/colors/index.ts

@@ -0,0 +1 @@
+export * from './colors';

package/src/avatar/index.ts

@@ -0,0 +1,3 @@
+export { AvatarType } from './avatarTypes';
+export type { AvatarProps } from './Avatar';
+export { default } from './Avatar';