@transferwise/components 0.0.0-experimental-d11e9c5 → 0.0.0-experimental-76bb7cd

package/build/types/avatarView/NotificationDot.d.ts

@@ -1,8 +0,0 @@
-import { HTMLAttributes } from 'react';
-import { Props as AvatarViewProps } from './AvatarView';
-type Props = Pick<HTMLAttributes<HTMLDivElement>, 'children'> & {
-    avatarSize?: AvatarViewProps['size'];
-};
-export default function NotificationDot({ children, avatarSize }: Props): import("react").JSX.Element;
-export {};
-//# sourceMappingURL=NotificationDot.d.ts.map

package/build/types/avatarView/NotificationDot.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"NotificationDot.d.ts","sourceRoot":"","sources":["../../../src/avatarView/NotificationDot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,KAAK,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAExD,KAAK,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IAC9D,UAAU,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;CACtC,CAAC;AAeF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAAE,QAAQ,EAAE,UAAe,EAAE,EAAE,KAAK,+BAc3E"}

package/build/types/avatarView/index.d.ts

@@ -1,3 +0,0 @@
-export type { Props as AvatarViewProps } from './AvatarView';
-export { default } from './AvatarView';
-//# sourceMappingURL=index.d.ts.map

package/build/types/avatarView/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/avatarView/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,KAAK,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/build/types/badge/BadgeAssets.d.ts

@@ -1,15 +0,0 @@
-import { StatusIconProps } from '../statusIcon';
-import type { BadgeProps } from './Badge';
-export type Props = {
-    status?: StatusIconProps['sentiment'];
-    flagCode?: string;
-    imgSrc?: string;
-    icon?: React.ReactNode;
-    type?: 'action' | 'reference';
-    size?: BadgeProps['size'];
-};
-/**
- * Common pre-built badge variants.
- */
-export default function BadgeAssets({ status, flagCode, imgSrc, icon, type, size: sizeProp, }: Props): import("react").JSX.Element | null;
-//# sourceMappingURL=BadgeAssets.d.ts.map

package/build/types/badge/BadgeAssets.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BadgeAssets.d.ts","sourceRoot":"","sources":["../../../src/badge/BadgeAssets.tsx"],"names":[],"mappings":"AAAA,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAI5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAI1C,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAC;IAC9B,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;CAC3B,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,MAAM,EACN,QAAQ,EACR,MAAM,EACN,IAAW,EACX,IAAe,EACf,IAAI,EAAE,QAAQ,GACf,EAAE,KAAK,sCAqCP"}

package/src/avatarGroup/AvatarGroup.css

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

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

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

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

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

package/src/avatarView/AvatarView.css

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

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