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

package/src/avatarGroup/AvatarGroup.story.tsx

@@ -0,0 +1,249 @@
+import { Meta, StoryObj } from '@storybook/react';
+import AvatarGroup from './AvatarGroup';
+import { Bank, Briefcase } from '@transferwise/icons';
+import Title from '../title';
+import { Flag } from '@wise/art';
+import { storyConfig } from '../test-utils';
+import RadioOption from '../radioOption';
+
+export default {
+  title: 'Content/AvatarGroup',
+} satisfies Meta<typeof AvatarGroup>;
+
+type Story = StoryObj<typeof AvatarGroup>;
+
+export const Basic: Story = storyConfig(
+  {
+    render: () => (
+      <>
+        <RadioOption
+          id="test"
+          name="foo"
+          title="Personal account"
+          showMediaCircle={false}
+          media={
+            <AvatarGroup
+              size={48}
+              orientation="diagonal"
+              avatars={[
+                { asset: 'AA', type: 'text' },
+                { asset: 'BB', type: 'text' },
+              ]}
+            />
+          }
+          onChange={() => {}}
+        />
+        <Title type="title-subsection">Diagonal</Title>
+        <table border="0" cellPadding="0" cellSpacing="0">
+          <tr>
+            <td>24</td>
+            <td>48</td>
+            <td>72</td>
+          </tr>
+          <tr>
+            <td>
+              <AvatarGroup
+                size={24}
+                orientation="diagonal"
+                avatars={[
+                  { asset: 'JJ', type: 'text' },
+                  { asset: 'AA', type: 'text' },
+                ]}
+              />
+            </td>
+            <td>
+              <AvatarGroup
+                orientation="diagonal"
+                avatars={[
+                  { asset: 'JJ', type: 'text' },
+                  { asset: 'AA', type: 'text' },
+                ]}
+              />
+            </td>
+            <td>
+              <AvatarGroup
+                size={72}
+                orientation="diagonal"
+                avatars={[
+                  { asset: 'JJ', type: 'text' },
+                  { asset: 'AA', type: 'text' },
+                ]}
+              />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <AvatarGroup
+                size={24}
+                orientation="diagonal"
+                avatars={[
+                  { asset: <Briefcase size="16" />, type: 'icon' },
+                  { asset: <Bank size="16" />, type: 'icon' },
+                ]}
+              />
+            </td>
+            <td>
+              <AvatarGroup
+                size={48}
+                orientation="diagonal"
+                avatars={[
+                  { asset: <Briefcase size="24" />, type: 'icon' },
+                  { asset: <Bank size="24" />, type: 'icon' },
+                ]}
+              />
+            </td>
+            <td>
+              <AvatarGroup
+                size={72}
+                orientation="diagonal"
+                avatars={[
+                  { asset: <Briefcase size="24" />, type: 'icon' },
+                  { asset: <Bank size="24" />, type: 'icon' },
+                ]}
+              />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <AvatarGroup
+                size={24}
+                orientation="diagonal"
+                avatars={[
+                  { asset: <Flag code="gb" />, type: 'image' },
+                  { asset: <Flag code="jp" />, type: 'image' },
+                ]}
+              />
+            </td>
+            <td>
+              <AvatarGroup
+                size={48}
+                orientation="diagonal"
+                avatars={[
+                  { asset: <Flag code="gb" />, type: 'image' },
+                  { asset: <Flag code="jp" />, type: 'image' },
+                ]}
+              />
+            </td>
+            <td>
+              <AvatarGroup
+                size={72}
+                orientation="diagonal"
+                avatars={[
+                  { asset: <Flag code="gb" />, type: 'image' },
+                  { asset: <Flag code="jp" />, type: 'image' },
+                ]}
+              />
+            </td>
+          </tr>
+        </table>
+
+        <Title type="title-subsection" className="m-t-3">
+          Horizontal
+        </Title>
+        <table border="0" cellPadding="0" cellSpacing="0">
+          <tr>
+            <td>24</td>
+            <td>48</td>
+            <td>72</td>
+          </tr>
+          <tr>
+            <td>
+              <AvatarGroup
+                size={24}
+                orientation="horizontal"
+                avatars={[
+                  { asset: 'JJ', type: 'text' },
+                  { asset: 'AA', type: 'text' },
+                ]}
+              />
+            </td>
+            <td>
+              <AvatarGroup
+                orientation="horizontal"
+                avatars={[
+                  { asset: 'JJ', type: 'text' },
+                  { asset: 'AA', type: 'text' },
+                ]}
+              />
+            </td>
+            <td>
+              <AvatarGroup
+                size={72}
+                orientation="horizontal"
+                avatars={[
+                  { asset: 'JJ', type: 'text' },
+                  { asset: 'AA', type: 'text' },
+                ]}
+              />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <AvatarGroup
+                size={24}
+                orientation="horizontal"
+                avatars={[
+                  { asset: <Briefcase size="16" />, type: 'icon' },
+                  { asset: <Bank size="16" />, type: 'icon' },
+                ]}
+              />
+            </td>
+            <td>
+              <AvatarGroup
+                size={48}
+                orientation="horizontal"
+                avatars={[
+                  { asset: <Briefcase size="24" />, type: 'icon' },
+                  { asset: <Bank size="24" />, type: 'icon' },
+                ]}
+              />
+            </td>
+            <td>
+              <AvatarGroup
+                size={72}
+                orientation="horizontal"
+                avatars={[
+                  { asset: <Briefcase size="24" />, type: 'icon' },
+                  { asset: <Bank size="24" />, type: 'icon' },
+                ]}
+              />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <AvatarGroup
+                size={24}
+                orientation="horizontal"
+                avatars={[
+                  { asset: <Flag code="gb" />, type: 'image' },
+                  { asset: <Flag code="jp" />, type: 'image' },
+                ]}
+              />
+            </td>
+            <td>
+              <AvatarGroup
+                size={48}
+                orientation="horizontal"
+                avatars={[
+                  { asset: <Flag code="gb" />, type: 'image' },
+                  { asset: <Flag code="jp" />, type: 'image' },
+                ]}
+              />
+            </td>
+            <td>
+              <AvatarGroup
+                size={72}
+                orientation="horizontal"
+                avatars={[
+                  { asset: <Flag code="gb" />, type: 'image' },
+                  { asset: <Flag code="jp" />, type: 'image' },
+                ]}
+              />
+            </td>
+          </tr>
+        </table>
+      </>
+    ),
+  },
+  { variants: ['light', 'dark'] },
+);

package/src/avatarGroup/AvatarGroup.tsx

@@ -0,0 +1,78 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable react/jsx-key */
+import { clsx } from 'clsx';
+import { CommonProps } from '../common';
+import { ReactNode } from 'react';
+import AvatarView, { AvatarViewProps } from '../avatarView';
+
+type AvatarType = { asset: ReactNode } & Pick<
+  AvatarViewProps,
+  'type' | 'backgroundColor' | 'borderColor' | 'className'
+>;
+type AvatarGroupOrientation = 'horizontal' | 'diagonal';
+type AvatarGroupDiagonalSize = 24 | 32 | 40 | 48 | 56 | 72;
+type AvatarGroupSize = 16 | AvatarGroupDiagonalSize;
+
+/**
+ * Diagonal orientation uses 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 > 1
+        ? avatars.map((avatar, index) => (
+            <AvatarView
+              key={index}
+              {...avatar}
+              className={clsx(
+                { [`np-avatar-group-${orientation}-child`]: index !== 0 },
+                { [`np-avatar-group-${orientation}-mask`]: index !== avatars.length - 1 },
+                avatar.className,
+              )}
+              style={{
+                // @ts-expect-error CSS custom props allowed
+                '--np-avatar-group-index': index,
+                '--circle-size': `${avatarSize}px`,
+              }}
+              size={avatarSize}
+              interactive={interactive}
+            >
+              {avatar.asset}
+            </AvatarView>
+          ))
+        : null}
+    </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,22 @@
+.np-avatar-view {
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+  color: var(--color-interactive-primary);
+  height: -moz-fit-content;
+  height: fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.np-avatar-view .np-circle {
+  background-color: transparent;
+  border: var(--avatar-view-non-interactive-border-width) solid rgba(0,0,0,0.10196);
+  border: var(--avatar-view-non-interactive-border-width) solid var(--color-border-neutral);
+}
+.np-avatar-view-selected .np-circle {
+  border: var(--avatar-view-selected-border-width) solid var(--color-interactive-primary) !important;
+}
+.np-avatar-view-interactive .np-circle {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+  border: none;
+}

package/src/avatarView/AvatarView.less

@@ -0,0 +1,24 @@
+.np-avatar-view {
+  border-radius: var(--radius-full);
+  color: var(--color-interactive-primary);
+  height: fit-content;
+  width: fit-content;
+
+  .np-circle {
+    background-color: transparent;
+    border: var(--avatar-view-non-interactive-border-width) solid var(--color-border-neutral);
+  }
+
+  &-selected {
+    .np-circle {
+      border: var(--avatar-view-selected-border-width) solid var(--color-interactive-primary) !important;
+    }
+  }
+
+  &-interactive {
+    .np-circle {
+      background-color: var(--color-background-neutral);
+      border: none;
+    }
+  }
+}