@transferwise/components 0.0.0-experimental-bb32303 → 0.0.0-experimental-d11e9c5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-bb32303",
+  "version": "0.0.0-experimental-d11e9c5",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -72,7 +72,6 @@
     "@tsconfig/recommended": "^1.0.7",
     "@types/babel__core": "^7.20.5",
     "@types/commonmark": "^0.27.9",
-    "@types/enzyme": "^3.10.18",
     "@types/jest": "^29.5.12",
     "@types/lodash": "4.17.6",
     "@types/lodash.clamp": "^4.0.9",
@@ -93,12 +92,12 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "0.0.0-experimental-bb32303",
+    "@transferwise/neptune-css": "14.20.0",
     "@wise/components-theming": "1.6.1"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.13.1",
-    "@transferwise/neptune-css": "0.0.0-experimental-bb32303",
+    "@transferwise/neptune-css": "^14.9.6",
     "@wise/art": "^2.16",
     "@wise/components-theming": "^1.0.0",
     "react": ">=18",

package/src/avatar/Avatar.tsx

@@ -43,6 +43,9 @@ const backwardsCompatibleSize = (size: AvatarSize): NumericAvatarSize => {
   }
 };
 
+/**
+ * @deprecated Use `AvatarView` component instead
+ */
 const Avatar: React.FC<AvatarProps> = ({
   backgroundColor = null,
   backgroundColorSeed = null,

package/src/avatarGroup/AvatarGroup.css

@@ -0,0 +1,29 @@
+.np-avatar-group {
+  display: inline-flex;
+  position: relative;
+}
+.np-avatar-group-diagonal {
+  width: var(--np-avatar-group-size);
+  height: var(--np-avatar-group-size);
+}
+.np-avatar-group-diagonal-mask {
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-group-size) / 1.5) right calc(100% - var(--np-avatar-group-size) / 1.5), transparent 0, transparent calc(var(--np-avatar-group-single-size) / 2 + 0.5px), black 0);
+          mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-group-size) / 1.5) right calc(100% - var(--np-avatar-group-size) / 1.5), transparent 0, transparent calc(var(--np-avatar-group-single-size) / 2 + 0.5px), black 0);
+}
+.np-avatar-group-diagonal-child {
+  position: absolute;
+  top: var(--np-avatar-group-diagonal-child-position);
+  right: 0;
+}
+.np-avatar-group-horizontal {
+  height: var(--np-avatar-group-size);
+}
+.np-avatar-group-horizontal-mask {
+  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc((100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc((var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
+          mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc((100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc((var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
+  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc(calc(100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc(calc(var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
+          mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc(calc(100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc(calc(var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
+}
+.np-avatar-group-horizontal-child {
+  margin-left: calc(var(--np-avatar-group-horizontal-child-position) * -1);
+}

package/src/avatarGroup/AvatarGroup.less

@@ -0,0 +1,42 @@
+.np-avatar-group {
+  display: inline-flex;
+  position: relative;
+
+  &-diagonal {
+    width: var(--np-avatar-group-size);
+    height: var(--np-avatar-group-size);
+
+    &-mask {
+      mask-image: radial-gradient(
+        circle at bottom calc(100% - var(--np-avatar-group-size) / 1.5)
+                  right calc(100% - var(--np-avatar-group-size) / 1.5),
+        transparent 0,
+        transparent calc(var(--np-avatar-group-single-size) / 2 + 0.5px),
+        black 0
+      );
+    }
+
+    &-child {
+      position: absolute;
+      top: var(--np-avatar-group-diagonal-child-position);
+      right: 0;
+    }
+  }
+
+  &-horizontal {
+    height: var(--np-avatar-group-size);
+
+    &-mask {
+      mask-image: radial-gradient(
+          circle at top calc(100% - var(--np-avatar-group-single-size) / 2)
+                  right calc(calc(100% - var(--np-avatar-group-single-size) / 1.5) * -1),
+          transparent 0,
+          transparent calc(calc(var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), 
+          black 0);
+    }
+
+    &-child {
+      margin-left: calc(var(--np-avatar-group-horizontal-child-position) * -1);
+    }
+  }
+}

package/src/avatarGroup/AvatarGroup.story.tsx

@@ -0,0 +1,284 @@
+import { Meta, StoryObj } from '@storybook/react';
+import AvatarGroup, { AvatarGroupProps } from '.';
+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>;
+
+const sizes: AvatarGroupProps['size'][] = [16, 24, 32, 40, 48, 56, 72];
+
+export const Diagonal: Story = storyConfig(
+  {
+    render: () => (
+      <div
+        style={{
+          gap: '1em',
+          display: 'grid',
+          justifyContent: 'space-between',
+          gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
+        }}
+      >
+        {sizes.map((size) => (
+          <div key={size}>{size}</div>
+        ))}
+
+        {sizes.map((size) => (
+          <AvatarGroup
+            key={size}
+            size={size}
+            orientation="diagonal"
+            avatars={[{ name: 'Jay Jay' }, { name: 'Amy Amy' }]}
+          />
+        ))}
+
+        {sizes.map((size) => (
+          <AvatarGroup
+            key={size}
+            size={size}
+            orientation="diagonal"
+            interactive
+            avatars={[{ name: 'Jay Jay' }, { name: 'Amy Amy' }]}
+          />
+        ))}
+
+        {sizes.map((size) => (
+          <AvatarGroup
+            key={size}
+            size={size}
+            orientation="diagonal"
+            avatars={[{ asset: <Briefcase size="16" /> }, { asset: <Bank size="16" /> }]}
+          />
+        ))}
+
+        {sizes.map((size) => (
+          <AvatarGroup
+            key={size}
+            size={size}
+            orientation="diagonal"
+            interactive
+            avatars={[{ asset: <Briefcase size="16" /> }, { asset: <Bank size="16" /> }]}
+          />
+        ))}
+
+        {sizes.map((size) => (
+          <AvatarGroup
+            key={size}
+            size={size}
+            orientation="diagonal"
+            avatars={[{ asset: <Flag code="EU" /> }, { asset: <Flag code="GB" /> }]}
+          />
+        ))}
+
+        {sizes.map((size) => (
+          <AvatarGroup
+            key={size}
+            size={size}
+            orientation="diagonal"
+            interactive
+            avatars={[{ asset: <Flag code="EU" /> }, { asset: <Flag code="GB" /> }]}
+          />
+        ))}
+
+        {sizes.map((size) => (
+          <AvatarGroup
+            key={size}
+            size={size}
+            orientation="diagonal"
+            avatars={[{ imgSrc: './avatar-square-dude.webp' }, { imgSrc: './tapestry-01.png' }]}
+          />
+        ))}
+
+        {sizes.map((size) => (
+          <AvatarGroup
+            key={size}
+            size={size}
+            orientation="diagonal"
+            interactive
+            avatars={[{ imgSrc: './avatar-square-dude.webp' }, { imgSrc: './tapestry-01.png' }]}
+          />
+        ))}
+      </div>
+    ),
+  },
+  { variants: ['light', 'dark'] },
+);
+
+export const Horizontal: Story = storyConfig(
+  {
+    render: () => (
+      <div
+        style={{
+          gap: '1em',
+          display: 'grid',
+          justifyContent: 'space-between',
+          gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
+        }}
+      >
+        {sizes.map((size) => (
+          <div key={size}>{size}</div>
+        ))}
+
+        {sizes.map((size) => (
+          <AvatarGroup
+            key={size}
+            size={size}
+            orientation="horizontal"
+            avatars={[{ name: 'Jay Jay' }, { name: 'Amy Amy' }]}
+          />
+        ))}
+
+        {sizes.map((size) => (
+          <AvatarGroup
+            key={size}
+            size={size}
+            orientation="horizontal"
+            interactive
+            avatars={[{ name: 'Jay Jay' }, { name: 'Amy Amy' }]}
+          />
+        ))}
+
+        {sizes.map((size) => (
+          <AvatarGroup
+            key={size}
+            size={size}
+            orientation="horizontal"
+            avatars={[{ asset: <Briefcase size="16" /> }, { asset: <Bank size="16" /> }]}
+          />
+        ))}
+
+        {sizes.map((size) => (
+          <AvatarGroup
+            key={size}
+            size={size}
+            orientation="horizontal"
+            interactive
+            avatars={[{ asset: <Briefcase size="16" /> }, { asset: <Bank size="16" /> }]}
+          />
+        ))}
+
+        {sizes.map((size) => (
+          <AvatarGroup
+            key={size}
+            size={size}
+            orientation="horizontal"
+            avatars={[{ asset: <Flag code="EU" /> }, { asset: <Flag code="GB" /> }]}
+          />
+        ))}
+
+        {sizes.map((size) => (
+          <AvatarGroup
+            key={size}
+            size={size}
+            orientation="horizontal"
+            interactive
+            avatars={[{ asset: <Flag code="EU" /> }, { asset: <Flag code="GB" /> }]}
+          />
+        ))}
+
+        {sizes.map((size) => (
+          <AvatarGroup
+            key={size}
+            size={size}
+            orientation="horizontal"
+            avatars={[{ imgSrc: './avatar-square-dude.webp' }, { imgSrc: './tapestry-01.png' }]}
+          />
+        ))}
+
+        {sizes.map((size) => (
+          <AvatarGroup
+            key={size}
+            size={size}
+            orientation="horizontal"
+            interactive
+            avatars={[{ imgSrc: './avatar-square-dude.webp' }, { imgSrc: './tapestry-01.png' }]}
+          />
+        ))}
+      </div>
+    ),
+  },
+  { variants: ['light', 'dark'] },
+);
+
+export const Option: Story = storyConfig(
+  {
+    render: () => (
+      <RadioOption
+        id="test"
+        name="foo"
+        title="Personal account"
+        showMediaCircle={false}
+        media={
+          <AvatarGroup
+            size={48}
+            orientation="diagonal"
+            avatars={[{ asset: 'AA' }, { asset: 'BB' }]}
+          />
+        }
+        onChange={() => {}}
+      />
+    ),
+  },
+  { variants: ['light', 'dark'] },
+);
+
+export const EdgeInstances: Story = storyConfig(
+  {
+    render: () => (
+      <>
+        <AvatarGroup
+          size={72}
+          orientation="horizontal"
+          avatars={[
+            { asset: <Flag code="br" /> },
+            { asset: <Flag code="eu" /> },
+            { asset: <Flag code="us" /> },
+            { asset: '5+' },
+          ]}
+        />
+
+        <br />
+
+        <AvatarGroup
+          size={72}
+          orientation="horizontal"
+          avatars={[{ asset: <Flag code="gb" /> }, { asset: <Flag code="jp" /> }, { asset: '9+' }]}
+        />
+
+        <br />
+
+        <AvatarGroup
+          orientation="horizontal"
+          interactive
+          avatars={[
+            { asset: <Flag code="eu" /> },
+            { asset: '9+', style: { border: '1px dashed var(--color-border-neutral)' } },
+          ]}
+        />
+
+        <br />
+
+        <AvatarGroup
+          orientation="horizontal"
+          interactive
+          avatars={[
+            { imgSrc: '../avatar-squere-dude.webp' },
+            { asset: null, style: { border: '1px dashed var(--color-border-neutral)' } },
+          ]}
+        />
+      </>
+    ),
+  },
+  {
+    variants: [
+      'light',
+      // 'dark'
+    ],
+  },
+);

package/src/avatarGroup/AvatarGroup.tsx

@@ -0,0 +1,117 @@
+/* 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 avatar groups have custom styles for avatars, icons, and fonts
+ */
+const MAP_DIAGONAL_AVATAR_STYLE = {
+  16: { avatar: 0, icon: 0, font: 0 },
+  24: { avatar: 15, icon: 11.25, font: 8 },
+  32: { avatar: 20, icon: 15, font: 12 },
+  40: { avatar: 24, icon: 18, font: 12 },
+  48: { avatar: 30, icon: 16.88, font: 14 },
+  56: { avatar: 34, icon: 19.13, font: 14 },
+  72: { avatar: 44, icon: 22, font: 22 },
+};
+
+const MAP_DIAGONAL_AVATAR_POSITION = {
+  24: 9,
+  32: 12,
+  40: 16,
+  48: 18,
+  56: 22,
+  72: 28,
+};
+
+/**
+ * AvatarGroup size: Avatar position (px)
+ */
+const MAP_HORIZONTAL_AVATAR_POSITION = {
+  16: 2,
+  24: 2,
+  32: 7,
+  40: 4,
+  48: 4,
+  56: 6,
+  72: 8,
+};
+
+export type Props = {
+  'aria-label'?: string;
+  avatars: AvatarType[];
+  orientation?: AvatarGroupOrientation;
+  size?: AvatarGroupSize;
+  interactive?: boolean;
+} & CommonProps;
+
+export default function AvatarGroup({
+  avatars,
+  orientation = 'horizontal',
+  size: groupSize = 48,
+  'aria-label': ariaLabel,
+  className,
+  interactive,
+}: Props) {
+  const isDiagonal = orientation === 'diagonal';
+  const singleAvatarSize = isDiagonal ? MAP_DIAGONAL_AVATAR_STYLE[groupSize]?.avatar : groupSize;
+  return (
+    <div
+      className={clsx('np-avatar-group', `np-avatar-group-${orientation}`, className)}
+      style={{
+        // @ts-expect-error `--np-avatar-group-size` exsits in styles of AvatarGroup
+        '--np-avatar-group-size': `${groupSize}px`,
+        '--np-avatar-group-single-size': `${singleAvatarSize}px`,
+      }}
+      aria-label={ariaLabel}
+    >
+      {avatars.length < 2 ||
+      ((groupSize === 16 || avatars.length > 2) && orientation === '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-diagonal-child-position': `${MAP_DIAGONAL_AVATAR_POSITION[groupSize]}px`,
+                '--np-avatar-group-horizontal-child-position': `${MAP_HORIZONTAL_AVATAR_POSITION[groupSize]}px`,
+              }}
+            >
+              <AvatarView
+                {...avatar}
+                // @ts-expect-error AvatarGroup has custom sizes for it's avatars
+                size={singleAvatarSize}
+                style={{
+                  ...(interactive && {
+                    '--circle-border-width': 0,
+                    backgroundColor: 'var(--color-background-neutral)',
+                  }),
+                  // diagonal AvatarGroup variant uses custom sizes for it's avatars, icons, and font
+                  ...(isDiagonal && {
+                    '--circle-size': `${singleAvatarSize}px`,
+                    '--circle-icon-size': `${MAP_DIAGONAL_AVATAR_STYLE[groupSize].icon}px`,
+                    '--circle-font-size': `${MAP_DIAGONAL_AVATAR_STYLE[groupSize].font}px`,
+                  }),
+                  ...avatar.style,
+                }}
+              >
+                {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,42 @@
+.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 .np-avatar-view-content {
+  color: var(--color-interactive-primary);
+}
+.np-avatar-view-interactive {
+  cursor: pointer;
+}
+.np-avatar-view-interactive .np-circle {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+}
+.np-avatar-view-interactive:hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.np-avatar-view-interactive:active {
+  background-color: var(--color-background-neutral-active);
+}
+.np-avatar-view-non-interactive .np-circle {
+  background-color: transparent;
+}
+.np-avatar-view-non-interactive .np-avatar-view-content .wds-flag {
+  box-shadow: none;
+}

package/src/avatarView/AvatarView.less

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