@transferwise/components 0.0.0-experimental-29d0f94 → 0.0.0-experimental-4b1de0a

package/src/listItem/AvatarLayout/ListItemAvatarLayout.story.tsx

@@ -0,0 +1,121 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Flag } from '@wise/art';
+import { lorem10 } from '../../test-utils';
+import { ListItem } from '../ListItem';
+import {
+  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
+  SB_LIST_ITEM_CONTROLS as CONTROLS,
+} from '../_stories/subcomponents';
+import { disableControls } from '../_stories/helpers';
+import { ListItemAvatarLayoutProps } from './ListItemAvatarLayout';
+
+export default {
+  component: ListItem.AvatarLayout,
+  title: 'Content/ListItem/ListItem.AvatarLayout',
+  parameters: {
+    docs: {
+      toc: true,
+    },
+  },
+  args: {
+    avatars: [{ asset: <Flag code="gb" /> }, { asset: <Flag code="eur" /> }],
+    orientation: 'horizontal',
+    size: 48,
+  },
+  argTypes: {
+    avatars: {
+      description: 'Array of avatar objects with asset and optional styling properties',
+      table: {
+        type: { summary: 'SingleAvatarType[]' },
+      },
+    },
+    orientation: {
+      control: 'inline-radio',
+      options: ['horizontal', 'diagonal'],
+      description: 'Layout orientation for multiple avatars',
+    },
+    size: {
+      control: 'select',
+      options: [32, 40, 48, 56, 72],
+      description: 'Size of the avatar layout',
+    },
+  },
+} satisfies Meta<ListItemAvatarLayoutProps>;
+
+type Story = StoryObj<ListItemAvatarLayoutProps>;
+
+export const Playground: Story = {
+  tags: ['!autodocs'],
+  render: (args: ListItemAvatarLayoutProps) => {
+    return (
+      <ListItem
+        title="Transfer from GBP to EUR"
+        subtitle="Currency exchange"
+        media={<ListItem.AvatarLayout {...args} />}
+        control={CONTROLS.iconButton}
+        additionalInfo={INFO.nonInteractive}
+      />
+    );
+  },
+};
+
+/**
+ * AvatarLayout supports two orientations: horizontal (default) and diagonal. <br />
+ * Please refer to the [design documentation](https://wise.design/components/avatar#double) for more details.
+ */
+export const Orientations: Story = {
+  argTypes: disableControls()(['orientation']),
+  render: (args) => {
+    return (
+      <ol className="list-unstyled">
+        <ListItem
+          title="Horizontal orientation"
+          subtitle={lorem10}
+          media={<ListItem.AvatarLayout {...args} orientation="horizontal" />}
+          control={CONTROLS.iconButton}
+        />
+
+        <ListItem
+          title="Diagonal orientation"
+          subtitle={lorem10}
+          media={<ListItem.AvatarLayout {...args} orientation="diagonal" />}
+          control={CONTROLS.iconButton}
+        />
+      </ol>
+    );
+  },
+};
+
+/**
+ * AvatarLayout supports various sizes to fit different list item contexts.
+ */
+export const Sizes: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: 'hidden',
+      },
+    },
+  },
+  argTypes: disableControls()(['size', 'orientation']),
+  render: (args) => {
+    const sizes = [32, 40, 48, 56, 72] as const;
+    const orientations = ['horizontal', 'diagonal'] as const;
+
+    return (
+      <ol className="list-unstyled">
+        {orientations.map((orientation) =>
+          sizes.map((size) => (
+            <ListItem
+              key={`${orientation}-${size}`}
+              title={`Size ${size}`}
+              subtitle={lorem10}
+              media={<ListItem.AvatarLayout {...args} size={size} orientation={orientation} />}
+              control={CONTROLS.iconButton}
+            />
+          )),
+        )}
+      </ol>
+    );
+  },
+};

package/src/listItem/AvatarLayout/ListItemAvatarLayout.tsx

@@ -0,0 +1,27 @@
+import AvatarLayoutComp, { type AvatarLayoutProps } from '../../avatarLayout';
+import { clsx } from 'clsx';
+import { useListItemMedia } from '../useListItemMedia';
+
+type SizeProp = { size?: 32 | 40 | 48 | 56 | 72 };
+
+export type ListItemAvatarLayoutProps = Omit<AvatarLayoutProps, 'size' | 'interactive'> & SizeProp;
+
+/**
+ * This component allows for rendering 2 avatars. It's a thin wrapper around the
+ * [AvatarLayout component](https://storybook.wise.design/?path=/docs/content-avatarlayout--docs), but offers only
+ * a subset of its sizes, and disallows interactive mode, in line with the ListItem's constraints. <br />
+ * <br />
+ * Please refer to the [Design documentation](https://wise.design/components/list-item#avatar) for details.
+ */
+export const AvatarLayout = ({ className, size = 48, ...props }: ListItemAvatarLayoutProps) => {
+  useListItemMedia(size);
+
+  return (
+    <AvatarLayoutComp
+      {...props}
+      size={size}
+      className={clsx('wds-list-item-media-avatar-layout', className)}
+    />
+  );
+};
+AvatarLayout.displayName = 'ListItem.AvatarLayout';

package/src/listItem/AvatarLayout/index.ts

@@ -0,0 +1,2 @@
+export type { ListItemAvatarLayoutProps } from './ListItemAvatarLayout';
+export { AvatarLayout } from './ListItemAvatarLayout';

package/src/listItem/AvatarView/ListItemAvatarView.spec.tsx

@@ -0,0 +1,75 @@
+import { mockMatchMedia, render, screen } from '../../test-utils';
+import { ListItem, type Props as ListItemProps } from '../ListItem';
+
+mockMatchMedia();
+
+const baseProps = {
+  title: 'Test Title',
+};
+
+const avatarProps = {
+  imgSrc: 'avatar.jpg',
+  profileName: 'User Avatar',
+};
+
+const renderWithMedia = (media: ListItemProps['media']) =>
+  render(<ListItem title={baseProps.title} media={media} />);
+
+describe('ListItem.AvatarView', () => {
+  it('applies custom className alongside default class', () => {
+    const { container } = renderWithMedia(
+      <ListItem.AvatarView
+        className="custom-class"
+        imgSrc={avatarProps.imgSrc}
+        profileName={avatarProps.profileName}
+      />,
+    );
+
+    expect(container.querySelector('.custom-class')).toBeInTheDocument();
+  });
+
+  it('renders avatar with correct image src', () => {
+    renderWithMedia(
+      <ListItem.AvatarView imgSrc={avatarProps.imgSrc} profileName={avatarProps.profileName} />,
+    );
+
+    expect(screen.getByRole('presentation')).toHaveAttribute('src', avatarProps.imgSrc);
+  });
+
+  it('renders without image when no imgSrc provided', () => {
+    renderWithMedia(<ListItem.AvatarView profileName={avatarProps.profileName} />);
+    expect(screen.queryByRole('img')).not.toBeInTheDocument();
+  });
+
+  it('supports accessibility props', () => {
+    renderWithMedia(
+      <ListItem.AvatarView
+        imgSrc={avatarProps.imgSrc}
+        profileName={avatarProps.profileName}
+        aria-label="Profile picture"
+      />,
+    );
+
+    expect(screen.getByLabelText('Profile picture')).toBeInTheDocument();
+  });
+
+  it('passes through role attribute', () => {
+    renderWithMedia(
+      <ListItem.AvatarView
+        imgSrc={avatarProps.imgSrc}
+        profileName={avatarProps.profileName}
+        role="button"
+        aria-label="Profile button"
+      />,
+    );
+
+    expect(screen.getByRole('button', { name: 'Profile button' })).toBeInTheDocument();
+  });
+
+  it('renders initials when no image provided', () => {
+    const johnDoeProfile = 'John Doe';
+    renderWithMedia(<ListItem.AvatarView profileName={johnDoeProfile} />);
+
+    expect(screen.getByText('JD')).toBeInTheDocument();
+  });
+});

package/src/listItem/AvatarView/ListItemAvatarView.story.tsx

@@ -0,0 +1,336 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Leaf, Taxi } from '@transferwise/icons';
+import { lorem10 } from '../../test-utils';
+import { ProfileType } from '../../common';
+import { ListItem } from '../ListItem';
+import {
+  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
+  SB_LIST_ITEM_CONTROLS as CONTROLS,
+} from '../_stories/subcomponents';
+import { disableControls } from '../_stories/helpers';
+import { ListItemAvatarViewProps } from './ListItemAvatarView';
+
+const hideControls = disableControls(['badge', 'children']);
+
+const SIZES = [32, 40, 48, 56, 72] as const;
+const BADGES = {
+  'Country flag badge': { flagCode: 'GBP' },
+  'StatusIcon badge': { status: 'warning' },
+  'Icon badge': { icon: <Taxi /> },
+  'Default action badge': {
+    type: 'action',
+  },
+  'Default reference badge': {
+    type: 'reference',
+  },
+  'Action badge with custom icon': {
+    type: 'action',
+    icon: <Taxi />,
+  },
+  'Reference badge with custom icon': {
+    type: 'reference',
+    icon: <Taxi />,
+  },
+  'Custom badge': {
+    asset: (
+      <div
+        className="d-flex align-items-center justify-content-center"
+        style={{
+          backgroundColor: 'var(--color-bright-pink)',
+          color: 'var(--color-interactive-primary)',
+          width: '100%',
+          height: '100%',
+        }}
+      >
+        <Leaf />
+      </div>
+    ),
+  },
+} as const;
+
+export default {
+  component: ListItem.AvatarView,
+  title: 'Content/ListItem/ListItem.AvatarView',
+  parameters: {
+    docs: {
+      toc: true,
+    },
+  },
+  args: {
+    size: 48,
+    selected: false,
+    badge: { type: 'action' },
+    notification: false,
+    profileName: undefined,
+    profileType: undefined,
+    imgSrc: undefined,
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: SIZES,
+      description: 'Size of the avatar',
+    },
+    profileName: {
+      control: 'text',
+      description: 'Name used to generate initials when no image or icon is provided',
+    },
+    imgSrc: {
+      control: 'text',
+      description: 'URL of the profile image',
+    },
+    profileType: {
+      control: 'select',
+      options: [ProfileType.PERSONAL, ProfileType.BUSINESS],
+      description: 'Type of profile for default icons',
+      table: {
+        type: { summary: 'ProfileType' },
+      },
+    },
+    notification: {
+      control: 'boolean',
+      description: 'Shows notification dot',
+    },
+    selected: {
+      control: 'boolean',
+      description: 'Toggles selected state',
+    },
+    badge: {
+      description: 'Badge configuration object',
+      table: {
+        type: { summary: 'AvatarViewBadgeProps' },
+      },
+    },
+    children: {
+      table: {
+        type: { summary: 'ReactNode' },
+      },
+    },
+    style: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+} satisfies Meta<ListItemAvatarViewProps>;
+
+type Story = StoryObj<ListItemAvatarViewProps>;
+
+export const Playground: Story = {
+  tags: ['!autodocs'],
+  render: (args: ListItemAvatarViewProps) => {
+    return (
+      <ListItem
+        title="John Smith"
+        subtitle="Personal account"
+        media={<ListItem.AvatarView {...args} />}
+        control={CONTROLS.iconButton}
+        additionalInfo={INFO.nonInteractive}
+      />
+    );
+  },
+};
+
+/**
+ * AvatarView can display different types of content including icons, profile images, and initials. <br />
+ * Refer to the [design documentation](https://wise.design/components/avatar#:~:text=56%2C%20%E2%80%A8and%2072.-,Media,-There%20are%204) for details.
+ */
+export const ContentTypes: Story = {
+  args: {
+    badge: undefined,
+  },
+  argTypes: hideControls(['profileName', 'imgSrc', 'profileType']),
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: 'hidden',
+      },
+    },
+  },
+  render: (args) => {
+    return (
+      <ol className="list-unstyled">
+        <ListItem
+          title="With icon"
+          subtitle="Default icon content"
+          media={
+            <ListItem.AvatarView {...args}>
+              <Taxi />
+            </ListItem.AvatarView>
+          }
+          control={CONTROLS.iconButton}
+        />
+
+        <ListItem
+          title="With profile image"
+          subtitle="User profile picture."
+          media={
+            <ListItem.AvatarView
+              {...args}
+              imgSrc="../avatar-square-dude.webp"
+              profileName="John Smith"
+            />
+          }
+          control={CONTROLS.iconButton}
+        />
+
+        <ListItem
+          title="With initials"
+          subtitle="Fallback for when no profile image is available."
+          media={<ListItem.AvatarView {...args} profileName="Sarah Johnson" />}
+          control={CONTROLS.iconButton}
+        />
+
+        <ListItem
+          title="Business profile"
+          subtitle="Fallback for when no logo is available"
+          media={<ListItem.AvatarView {...args} profileType={ProfileType.BUSINESS} />}
+          control={CONTROLS.iconButton}
+        />
+
+        <ListItem
+          title="Personal profile"
+          subtitle="Fallback for when no personal data is available or when image fails to load."
+          media={
+            <ListItem.AvatarView
+              {...args}
+              profileType={ProfileType.PERSONAL}
+              profileName="Alex Chen"
+            />
+          }
+          control={CONTROLS.iconButton}
+        />
+      </ol>
+    );
+  },
+};
+
+/**
+ * AvatarView supports 5 sizes to fit different list item contexts: `32`, `40`, `48`, `56`, `72`. If decorated with a Badge, those will be sized accordingly as well. <br />
+ * Please refer to the [design documentation](https://wise.design/components/list-item#avatar:~:text=of%20the%20avatar.-,Avatar%20sizes,-List%20item%20supports) for details on when to use which one.
+ */
+export const Sizes: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: 'hidden',
+      },
+    },
+  },
+  argTypes: hideControls(['profileName', 'imgSrc', 'profileType', 'size']),
+  render: (args) => {
+    return (
+      <ol className="list-unstyled">
+        {SIZES.map((size) => (
+          <ListItem
+            key={size}
+            title={`Size ${size}`}
+            subtitle={lorem10}
+            media={
+              <ListItem.AvatarView {...args} size={size}>
+                <Taxi />
+              </ListItem.AvatarView>
+            }
+            control={CONTROLS.iconButton}
+          />
+        ))}
+      </ol>
+    );
+  },
+};
+
+/**
+ * Similarly, AvatarView also support a notification dot, which also adjusts to the Avatar's size. <br />
+ * **NB:** You cannot use notification and badge at the same time – badge will always take precedence over notification.
+ */
+export const Notification: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: 'hidden',
+      },
+    },
+  },
+  args: {
+    badge: undefined,
+  },
+  argTypes: hideControls([
+    'profileName',
+    'imgSrc',
+    'profileType',
+    'size',
+    'notification',
+    'selected',
+  ]),
+  render: (args) => {
+    return (
+      <ol className="list-unstyled">
+        {SIZES.map((size) => (
+          <ListItem
+            key={size}
+            title={`Size ${size}`}
+            subtitle={lorem10}
+            media={
+              <ListItem.AvatarView {...args} size={size} notification>
+                <Taxi />
+              </ListItem.AvatarView>
+            }
+            control={CONTROLS.iconButton}
+          />
+        ))}
+      </ol>
+    );
+  },
+};
+
+/**
+ * AvatarView supports different type of badges for additional context and information. <br />
+ * Refer to the [design documentation](https://wise.design/components/avatar#:~:text=support%20the%20information.-,With%20badge,-Badges%20contain%20additional) for details.
+ */
+export const Badges: Story = {
+  args: {
+    imgSrc: '../avatar-square-dude.webp',
+  },
+  argTypes: hideControls(['profileName', 'imgSrc', 'profileType', 'notification', 'selected']),
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: 'hidden',
+      },
+    },
+  },
+  render: (args) => {
+    return (
+      <ol className="list-unstyled">
+        {Object.entries(BADGES).map(([title, badge]) => (
+          <ListItem
+            key={title}
+            title={title}
+            subtitle={lorem10}
+            media={<ListItem.AvatarView {...args} badge={badge} />}
+            control={CONTROLS.iconButton}
+          />
+        ))}
+      </ol>
+    );
+  },
+};
+
+/**
+ * AvatarView supports selected state for interactive contexts.
+ */
+export const Selected: Story = {
+  argTypes: hideControls(['profileName', 'imgSrc', 'profileType', 'notification', 'selected']),
+  render: (args) => {
+    return (
+      <ol className="list-unstyled">
+        <ListItem
+          title="Selected state"
+          subtitle="Currently selected item"
+          media={<ListItem.AvatarView profileName="Alex Chen" selected />}
+          control={CONTROLS.iconButton}
+        />
+      </ol>
+    );
+  },
+};

package/src/listItem/AvatarView/ListItemAvatarView.tsx

@@ -0,0 +1,27 @@
+import { clsx } from 'clsx';
+import AvatarViewComp, { AvatarViewProps } from '../../avatarView';
+import { useListItemMedia } from '../useListItemMedia';
+
+export type ListItemAvatarViewProps = Omit<AvatarViewProps, 'size' | 'interactive'> & {
+  size?: 32 | 40 | 48 | 56 | 72;
+};
+
+/**
+ * This component renders a single avatar. It's a thin wrapper around the
+ * [AvatarView component](https://storybook.wise.design/?path=/docs/content-avatarview--docs), but offers only
+ * a subset of its sizes, in line with the ListItem's constraints. <br />
+ * <br />
+ * Please refer to the [Design documentation](https://wise.design/components/list-item#avatar) for details.
+ */
+export const AvatarView = ({ className, size = 48, ...props }: ListItemAvatarViewProps) => {
+  useListItemMedia(size);
+
+  return (
+    <AvatarViewComp
+      {...props}
+      size={size}
+      className={clsx('wds-list-item-media-avatar-view', className)}
+    />
+  );
+};
+AvatarView.displayName = 'ListItem.AvatarView';

package/src/listItem/AvatarView/index.ts

@@ -0,0 +1,2 @@
+export type { ListItemAvatarViewProps } from './ListItemAvatarView';
+export { AvatarView } from './ListItemAvatarView';

package/src/listItem/Button/ListItemButton.spec.tsx

@@ -0,0 +1,68 @@
+import { screen, mockMatchMedia } from '../../test-utils';
+import { Button as ItemButton } from './ListItemButton';
+import { ButtonPriority } from '../../button/Button.types';
+import { renderWithListItemContext, clearListItemMocks, mockSetControlType } from '../test-utils';
+
+mockMatchMedia();
+
+describe('ItemButton', () => {
+  beforeEach(() => {
+    clearListItemMocks();
+  });
+
+  it('always sets v2 to true', () => {
+    renderWithListItemContext(<ItemButton priority="primary">Test Button</ItemButton>);
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+    expect(mockSetControlType).toHaveBeenCalledWith('button');
+  });
+
+  it('always sets size to "sm"', () => {
+    renderWithListItemContext(<ItemButton priority="primary">Test Button</ItemButton>);
+    const button = screen.getByRole('button');
+    expect(button).toHaveClass('wds-Button--small');
+  });
+
+  it('supports all priorities', () => {
+    const priorities: ButtonPriority[] = ['primary', 'secondary', 'tertiary'];
+    priorities.forEach((priority) => {
+      renderWithListItemContext(<ItemButton priority={priority}>Test {priority}</ItemButton>);
+      const button = screen.getByRole('button', { name: `Test ${priority}` });
+      expect(button).toBeInTheDocument();
+    });
+  });
+
+  it('renders as a button by default', () => {
+    renderWithListItemContext(<ItemButton>Click me</ItemButton>);
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+    expect(button.tagName).toBe('BUTTON');
+  });
+
+  it('renders as an anchor when href is provided', () => {
+    renderWithListItemContext(<ItemButton href="https://example.com">Go to Example</ItemButton>);
+    const link = screen.getByRole('link', { name: 'Go to Example' });
+    expect(link).toBeInTheDocument();
+    expect(link.tagName).toBe('A');
+    expect(link).toHaveAttribute('href', 'https://example.com');
+  });
+
+  it('spreads additional props to the button', () => {
+    renderWithListItemContext(<ItemButton aria-label="Custom Button">Custom</ItemButton>);
+    const button = screen.getByRole('button', { name: 'Custom Button' });
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveAttribute('aria-label', 'Custom Button');
+  });
+
+  it('spreads additional props to the anchor', () => {
+    renderWithListItemContext(
+      <ItemButton href="https://example.com" target="_blank" aria-label="Custom Link">
+        Custom Link
+      </ItemButton>,
+    );
+    const link = screen.getByRole('link', { name: 'Custom Link' });
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute('href', 'https://example.com');
+    expect(link).toHaveAttribute('target', '_blank');
+  });
+});