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

package/src/avatarGroup/AvatarGroup.story.tsx

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

@@ -1,78 +0,0 @@
-/* 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

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

package/src/avatarView/AvatarView.css

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

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