@transferwise/components 0.0.0-experimental-4f2af7f → 0.0.0-experimental-8bbf3ee

package/src/listItem/AdditionalInfo/ListItemAdditionalInfo.story.tsx

@@ -1,198 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { fn } from 'storybook/test';
-import { action } from 'storybook/actions';
-import { lorem20 } from '../../test-utils';
-import List from '../../list';
-import { ListItem } from '../ListItem';
-import {
-  SB_LIST_ITEM_CONTROLS as CONTROLS,
-  SB_LIST_ITEM_MEDIA as MEDIA,
-} from '../_stories/subcomponents';
-import { disableControls } from '../_stories/helpers';
-import type { ListItemAdditionalInfoProps } from './ListItemAdditionalInfo';
-
-/**
- * Use additional information to add extra details that help make the information clearer for users. Use additional information only after you've used the subtitle.
- *
- * Refer to the [design documentation](https://wise.design/components/list-item#content:~:text=StatusIcon.iconLabel.error-,Additional%20information,-Use%20additional%20information) for more details.
- */
-export default {
-  component: ListItem.AdditionalInfo,
-  title: 'Content/ListItem/ListItem.AdditionalInfo',
-  parameters: {
-    docs: {
-      toc: true,
-    },
-  },
-  args: {
-    children: lorem20,
-  },
-  argTypes: {
-    children: {
-      table: {
-        type: { summary: 'ReactNode' },
-      },
-    },
-    action: {
-      table: {
-        type: { summary: `{ label: string } & Pick<LinkProps, 'href' | 'onClick' | 'target'>` },
-      },
-    },
-  },
-} satisfies Meta<ListItemAdditionalInfoProps>;
-
-type Story = StoryObj<ListItemAdditionalInfoProps>;
-
-/**
- * Convenience controls for previewing rich markup,
- * not otherwise possible via Storybook
- */
-type PreviewStoryArgs = ListItemAdditionalInfoProps & {
-  previewAction?: string | ListItemAdditionalInfoProps['action'];
-};
-
-const previewArgGroup = {
-  category: 'Preview options',
-  type: {
-    summary: undefined,
-  },
-};
-
-const previewArgTypes = {
-  previewAction: {
-    name: 'Preview `action`',
-    control: 'radio',
-    options: ['unset (undefined)', 'link', 'button'],
-    mapping: {
-      'unset (undefined)': undefined,
-      link: {
-        label: 'Details about the subject.',
-        href: 'https://wise.com',
-        target: '_blank',
-      },
-      button: {
-        label: 'Details about the subject.',
-        onClick: fn(),
-      },
-    },
-    table: previewArgGroup,
-  },
-} as const;
-
-export const Playground: StoryObj<PreviewStoryArgs> = {
-  tags: ['!autodocs'],
-  argTypes: previewArgTypes,
-  args: {
-    children: lorem20,
-    previewAction: 'link',
-  },
-  render: (args: PreviewStoryArgs) => {
-    const { previewAction, ...props } = args as {
-      previewAction: ListItemAdditionalInfoProps['action'];
-      props: ListItemAdditionalInfoProps;
-    };
-
-    return (
-      <List>
-        <ListItem
-          title="List item title"
-          subtitle="Subtitle goes here"
-          media={MEDIA.avatarSingle}
-          control={CONTROLS.partialButton}
-          additionalInfo={<ListItem.AdditionalInfo {...props} action={previewAction} />}
-        />
-      </List>
-    );
-  },
-};
-
-/**
- * Fully interactive ListItems do not allow for any nested links or inline buttons as that would fail accessibility compliance.
- *
- * Non-interactive or partially-interactive ListItems allow appending a single link or inline button via `action` prop. The restriction has been introduced to ensure that the ListItem remains accessible and adheres to the vendors' best practices for mobile platforms.
- */
-export const Interactivity: Story = {
-  args: {
-    action: {
-      label: 'Details about the subject.',
-      href: 'https://wise.com',
-      target: '_blank',
-    },
-  },
-  argTypes: disableControls()(['action']),
-  render: (args: ListItemAdditionalInfoProps) => {
-    return (
-      <List>
-        <ListItem
-          title="Fully interactive ListItem"
-          subtitle="Subtitle goes here"
-          media={MEDIA.avatarSingle}
-          control={CONTROLS.button}
-          additionalInfo={<ListItem.AdditionalInfo {...args} action={undefined} />}
-        />
-
-        <ListItem
-          title="Partially interactive ListItem"
-          subtitle="Subtitle goes here"
-          media={MEDIA.avatarSingle}
-          control={CONTROLS.partialButton}
-          additionalInfo={<ListItem.AdditionalInfo {...args} />}
-        />
-
-        <ListItem
-          title="Non-interactive ListItem"
-          subtitle="Subtitle goes here"
-          media={MEDIA.avatarSingle}
-          additionalInfo={<ListItem.AdditionalInfo {...args} />}
-        />
-      </List>
-    );
-  },
-};
-
-/**
- * Interactive `ListItem.AdditionalInfo` allows for 2 types of actions: a link or a button.
- */
-export const Actions: Story = {
-  argTypes: disableControls()(['action']),
-  render: (args: ListItemAdditionalInfoProps) => {
-    return (
-      <List>
-        <ListItem
-          title="Partially interactive ListItem"
-          subtitle="Subtitle goes here"
-          media={MEDIA.avatarSingle}
-          control={CONTROLS.partialButton}
-          additionalInfo={
-            <ListItem.AdditionalInfo
-              {...args}
-              action={{
-                label: 'I am a link.',
-                href: 'https://wise.com',
-                target: '_blank',
-              }}
-            />
-          }
-        />
-
-        <ListItem
-          title="Partially interactive ListItem"
-          subtitle="Subtitle goes here"
-          media={MEDIA.avatarSingle}
-          control={CONTROLS.partialButton}
-          additionalInfo={
-            <ListItem.AdditionalInfo
-              {...args}
-              action={{
-                label: 'I am a button.',
-                onClick: () => {
-                  action('Button clicked')();
-                },
-              }}
-            />
-          }
-        />
-      </List>
-    );
-  },
-};

package/src/listItem/AdditionalInfo/ListItemAdditionalInfo.tsx

@@ -1,36 +0,0 @@
-import { PropsWithChildren, useContext } from 'react';
-import { ListItemContext, type ListItemContextData } from '../ListItemContext';
-import Body from '../../body';
-import Link, { type LinkProps } from '../../link';
-import { Typography } from '../../common';
-
-export type ListItemAdditionalInfoProps = PropsWithChildren<{
-  /**
-   * Props object to be passed to the [Link](https://storybook.wise.design/?path=/docs/typography-link--docs) component.
-   */
-  action?: { label: string } & Pick<LinkProps, 'href' | 'onClick' | 'target'>;
-}>;
-
-export const AdditionalInfo = function ({ children, action }: ListItemAdditionalInfoProps) {
-  const { ids } = useContext<ListItemContextData>(ListItemContext);
-
-  return (
-    <Body
-      type={Typography.BODY_DEFAULT}
-      id={ids.additionalInfo}
-      className="wds-list-item-additional-info"
-    >
-      {children}
-      {action ? (
-        <>
-          {' '}
-          <Link href={action.href} target={action.target} onClick={action.onClick}>
-            {action.label}
-          </Link>
-        </>
-      ) : null}
-    </Body>
-  );
-};
-
-AdditionalInfo.displayName = 'ListItem.AdditionalInfo';

package/src/listItem/AdditionalInfo/index.ts

@@ -1,2 +0,0 @@
-export type { ListItemAdditionalInfoProps } from './ListItemAdditionalInfo';
-export { AdditionalInfo } from './ListItemAdditionalInfo';

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

@@ -1,59 +0,0 @@
-import { mockMatchMedia, render, screen } from '../../test-utils';
-import { ListItem, type ListItemProps } from '../ListItem';
-
-mockMatchMedia();
-
-const avatars = [
-  { imgSrc: 'avatar1.jpg', profileName: 'User 1' },
-  { imgSrc: 'avatar2.jpg', profileName: 'User 2' },
-];
-
-const renderWithMedia = (media: ListItemProps['media']) =>
-  render(<ListItem title="Test Title" media={media} />);
-
-describe('ListItem.AvatarLayout', () => {
-  it('applies custom className alongside default class', () => {
-    renderWithMedia(
-      <ListItem.AvatarLayout
-        className="custom-class"
-        role="group"
-        aria-label="Custom avatar group"
-        avatars={avatars}
-      />,
-    );
-
-    expect(screen.getByRole('group', { name: 'Custom avatar group' })).toHaveClass('custom-class');
-  });
-
-  it('renders both avatars', () => {
-    renderWithMedia(<ListItem.AvatarLayout avatars={avatars} />);
-
-    const images = screen.getAllByRole('presentation');
-    expect(images).toHaveLength(avatars.length);
-    expect(images[0]).toHaveAttribute('src', avatars[0].imgSrc);
-    expect(images[1]).toHaveAttribute('src', avatars[1].imgSrc);
-  });
-
-  it('renders with single avatar', () => {
-    renderWithMedia(<ListItem.AvatarLayout avatars={[avatars[0]]} />);
-    expect(screen.getByRole('presentation')).toHaveAttribute('src', avatars[0].imgSrc);
-  });
-
-  it('handles empty avatars array', () => {
-    renderWithMedia(<ListItem.AvatarLayout avatars={[]} />);
-    expect(screen.queryByRole('img')).not.toBeInTheDocument();
-  });
-
-  it('supports accessibility props', () => {
-    renderWithMedia(<ListItem.AvatarLayout aria-label="User avatars" avatars={avatars} />);
-    expect(screen.getByLabelText('User avatars')).toBeInTheDocument();
-  });
-
-  it('passes through role', () => {
-    renderWithMedia(
-      <ListItem.AvatarLayout role="group" aria-label="Avatar group" avatars={avatars} />,
-    );
-
-    expect(screen.getByRole('group', { name: 'Avatar group' })).toBeInTheDocument();
-  });
-});

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

@@ -1,124 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { Flag } from '@wise/art';
-import { lorem10 } from '../../test-utils';
-import { ListItem } from '../ListItem';
-import List from '../../list';
-import {
-  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
-  SB_LIST_ITEM_CONTROLS as CONTROLS,
-} from '../_stories/subcomponents';
-import { disableControls } from '../_stories/helpers';
-import type { 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 (
-      <List>
-        <ListItem
-          title="Transfer from GBP to EUR"
-          subtitle="Currency exchange"
-          media={<ListItem.AvatarLayout {...args} />}
-          control={CONTROLS.iconButton}
-          additionalInfo={INFO.nonInteractive}
-        />
-      </List>
-    );
-  },
-};
-
-/**
- * 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 (
-      <List>
-        <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}
-        />
-      </List>
-    );
-  },
-};
-
-/**
- * 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 (
-      <List>
-        {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}
-            />
-          )),
-        )}
-      </List>
-    );
-  },
-};

package/src/listItem/AvatarLayout/ListItemAvatarLayout.tsx

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

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

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

@@ -1,75 +0,0 @@
-import { mockMatchMedia, render, screen } from '../../test-utils';
-import { ListItem, type 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();
-  });
-});