@transferwise/components 0.0.0-experimental-e068634 → 0.0.0-experimental-0e166d9

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

@@ -1,339 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { Leaf, Taxi } from '@transferwise/icons';
-import { lorem10 } from '../../test-utils';
-import { ProfileType } from '../../common';
-import List from '../../list';
-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 (
-      <List>
-        <ListItem
-          title="John Smith"
-          subtitle="Personal account"
-          media={<ListItem.AvatarView {...args} />}
-          control={CONTROLS.iconButton}
-          additionalInfo={INFO.nonInteractive}
-        />
-      </List>
-    );
-  },
-};
-
-/**
- * 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 (
-      <List>
-        <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}
-        />
-      </List>
-    );
-  },
-};
-
-/**
- * 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 (
-      <List>
-        {SIZES.map((size) => (
-          <ListItem
-            key={size}
-            title={`Size ${size}`}
-            subtitle={lorem10}
-            media={
-              <ListItem.AvatarView {...args} size={size}>
-                <Taxi />
-              </ListItem.AvatarView>
-            }
-            control={CONTROLS.iconButton}
-          />
-        ))}
-      </List>
-    );
-  },
-};
-
-/**
- * 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 (
-      <List>
-        {SIZES.map((size) => (
-          <ListItem
-            key={size}
-            title={`Size ${size}`}
-            subtitle={lorem10}
-            media={
-              <ListItem.AvatarView {...args} size={size} notification>
-                <Taxi />
-              </ListItem.AvatarView>
-            }
-            control={CONTROLS.iconButton}
-          />
-        ))}
-      </List>
-    );
-  },
-};
-
-/**
- * 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 (
-      <List>
-        {Object.entries(BADGES).map(([title, badge]) => (
-          <ListItem
-            key={title}
-            title={title}
-            subtitle={lorem10}
-            media={<ListItem.AvatarView {...args} badge={badge} />}
-            control={CONTROLS.iconButton}
-          />
-        ))}
-      </List>
-    );
-  },
-};
-
-/**
- * AvatarView supports selected state for interactive contexts.
- */
-export const Selected: Story = {
-  argTypes: hideControls(['profileName', 'imgSrc', 'profileType', 'notification', 'selected']),
-  render: (args) => {
-    return (
-      <List>
-        <ListItem
-          title="Selected state"
-          subtitle="Currently selected item"
-          media={<ListItem.AvatarView profileName="Alex Chen" selected />}
-          control={CONTROLS.iconButton}
-        />
-      </List>
-    );
-  },
-};

package/src/listItem/AvatarView/ListItemAvatarView.tsx

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

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

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

@@ -1,68 +0,0 @@
-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');
-  });
-});