@transferwise/components 0.0.0-experimental-2242f8a → 0.0.0-experimental-5759f4d

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

@@ -0,0 +1,118 @@
+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 { 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 = {
+  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',
+      },
+    },
+  },
+  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,24 @@
+import AvatarLayoutComp, { type AvatarLayoutProps } from '../../avatarLayout';
+import { clsx } from 'clsx';
+
+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) => {
+  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.story.tsx

@@ -0,0 +1,318 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Leaf, Taxi } from '@transferwise/icons';
+import { ListItem } from '../ListItem';
+import {
+  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
+  SB_LIST_ITEM_CONTROLS as CONTROLS,
+} from '../_stories/subcomponents';
+import { ListItemAvatarViewProps } from './ListItemAvatarView';
+import { lorem10 } from '../../test-utils';
+import { ProfileType } from '../../common';
+
+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: ['personal', 'business'],
+      description: 'Type of profile for default icons',
+    },
+    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,
+  },
+  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',
+      },
+    },
+  },
+  render: (args) => {
+    return (
+      <ol>
+        {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,
+  },
+  render: (args) => {
+    return (
+      <ol>
+        {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',
+  },
+  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 = {
+  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,24 @@
+import { clsx } from 'clsx';
+import AvatarViewComp, { AvatarViewProps } from '../../avatarView';
+
+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) => {
+  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,93 @@
+import { render, screen, mockMatchMedia } from '../../test-utils';
+import { Button as ItemButton } from './ListItemButton';
+import { ButtonPriority } from '../../button/Button.types';
+import { ListItemContext } from '../ListItemContext';
+
+mockMatchMedia();
+
+describe('ItemButton', () => {
+  const mockSetControlType = jest.fn();
+  const mockSetControlProps = jest.fn();
+
+  const renderWithItemContext = (ui: React.ReactNode) => {
+    return render(
+      <ListItemContext.Provider
+        value={{
+          setControlType: mockSetControlType,
+          setControlProps: mockSetControlProps,
+          ids: {
+            title: 'title',
+            additionalInfo: 'additional Info',
+            valueTitle: 'value title',
+            control: 'control',
+            prompt: 'prompt',
+          },
+          props: {},
+          describedByIds: 'described-by-ids',
+        }}
+      >
+        {ui}
+      </ListItemContext.Provider>,
+    );
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('always sets v2 to true', () => {
+    renderWithItemContext(<ItemButton priority="primary">Test Button</ItemButton>);
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+    expect(mockSetControlType).toHaveBeenCalledWith('button');
+  });
+
+  it('always sets size to "sm"', () => {
+    renderWithItemContext(<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) => {
+      renderWithItemContext(<ItemButton priority={priority}>Test {priority}</ItemButton>);
+      const button = screen.getByRole('button', { name: `Test ${priority}` });
+      expect(button).toBeInTheDocument();
+    });
+  });
+
+  it('renders as a button by default', () => {
+    renderWithItemContext(<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', () => {
+    renderWithItemContext(<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', () => {
+    renderWithItemContext(<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', () => {
+    renderWithItemContext(
+      <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');
+  });
+});