@transferwise/components 46.103.1 → 46.105.0

package/src/listItem/Radio/ListItemRadio.story.tsx

@@ -0,0 +1,111 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { useState } from 'react';
+import List from '../../list';
+import { ListItem } from '../ListItem';
+import {
+  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
+  SB_LIST_ITEM_MEDIA as MEDIA,
+} from '../_stories/subcomponents';
+import type { ListItemRadioProps } from './ListItemRadio';
+import { fn } from 'storybook/test';
+import { ProfileType } from '../../common';
+
+const meta: Meta<ListItemRadioProps> = {
+  component: ListItem.Radio,
+  title: 'Content/ListItem/ListItem.Radio',
+  parameters: {
+    docs: {
+      toc: true,
+    },
+  },
+  args: {
+    name: 'radio-group',
+    value: 'option1',
+    checked: false,
+    onChange: fn(),
+  },
+  argTypes: {
+    onChange: {
+      table: {
+        type: { summary: '(value: string | number) => void' },
+      },
+    },
+  },
+} satisfies Meta<ListItemRadioProps>;
+
+export default meta;
+
+type Story = StoryObj<ListItemRadioProps>;
+
+export const Playground: Story = {
+  tags: ['!autodocs'],
+  render: (args: ListItemRadioProps) => {
+    return (
+      <List>
+        <ListItem
+          title="List item with radio"
+          subtitle="Select this option"
+          media={MEDIA.avatarSingle}
+          control={<ListItem.Radio {...args} />}
+          additionalInfo={INFO.nonInteractive}
+        />
+      </List>
+    );
+  },
+};
+
+/**
+ * Radio controls follow the native HTML behaviour and can be grouped using the `name` prop.
+ */
+export const RadioGroup: Story = {
+  parameters: {
+    controls: { disable: true },
+  },
+  render: function Render() {
+    const [selectedValue, setSelectedValue] = useState('2');
+
+    return (
+      <List>
+        <ListItem
+          control={
+            <ListItem.Radio
+              name="group"
+              value="1"
+              checked={selectedValue === '1'}
+              onChange={setSelectedValue}
+            />
+          }
+          title="First option"
+          subtitle="This is the first choice"
+          media={<ListItem.AvatarView profileType={ProfileType.BUSINESS} />}
+        />
+        <ListItem
+          control={
+            <ListItem.Radio
+              name="group"
+              value="2"
+              checked={selectedValue === '2'}
+              onChange={setSelectedValue}
+            />
+          }
+          title="Second option"
+          subtitle="This is the second choice"
+          media={<ListItem.AvatarView profileType={ProfileType.BUSINESS} />}
+        />
+        <ListItem
+          control={
+            <ListItem.Radio
+              name="group"
+              value="3"
+              checked={selectedValue === '3'}
+              onChange={setSelectedValue}
+            />
+          }
+          title="Third option"
+          subtitle="This is the third choice"
+          media={<ListItem.AvatarView profileType={ProfileType.BUSINESS} />}
+        />
+      </List>
+    );
+  },
+};

package/src/listItem/Radio/ListItemRadio.tsx

@@ -0,0 +1,33 @@
+import { useContext } from 'react';
+import RadioButton, { type RadioButtonProps } from '../../common/RadioButton/RadioButton';
+import { useListItemControl } from '../useListItemControl';
+import { ListItemContext } from '../ListItemContext';
+
+export type ListItemRadioProps = Omit<
+  RadioButtonProps,
+  'disabled' | 'readOnly' | 'className' | 'id'
+>;
+
+/**
+ * This component allows for rendering a Button control. It's a thin wrapper around the
+ * [Button component](https://storybook.wise.design/?path=/docs/content-button--docs), but offers only
+ * a subset of its features in line with the ListItem's constraints. <br />
+ * <br />
+ * Please refer to the [Design documentation](https://wise.design/components/list-item---button) for details.
+ */
+export const Radio = function (props: ListItemRadioProps) {
+  const { baseItemProps } = useListItemControl('radio', { ...props });
+  const { ids, describedByIds } = useContext(ListItemContext);
+
+  return (
+    <RadioButton
+      {...props}
+      aria-describedby={describedByIds}
+      className="wds-list-item-control"
+      disabled={baseItemProps.disabled}
+      id={ids.control}
+    />
+  );
+};
+
+Radio.displayName = 'ListItem.Radio';

package/src/listItem/Radio/index.ts

@@ -0,0 +1,2 @@
+export type { ListItemRadioProps } from './ListItemRadio';
+export { Radio } from './ListItemRadio';

package/src/listItem/Switch/ListItemSwitch.spec.tsx

@@ -0,0 +1,47 @@
+import { render, screen } from '../../test-utils';
+import userEvent from '@testing-library/user-event';
+import { ListItem, type ListItemProps } from '../ListItem';
+
+describe('ListItem.Switch', () => {
+  const renderWith = (overrides: Partial<ListItemProps> = {}) =>
+    render(<ListItem title="Test title" {...overrides} />);
+
+  it('renders switch with correct role', () => {
+    renderWith({ control: <ListItem.Switch checked={false} onClick={() => {}} /> });
+    expect(screen.getByRole('switch')).toBeInTheDocument();
+  });
+
+  describe('checked state', () => {
+    it('reflects checked state', () => {
+      renderWith({ control: <ListItem.Switch checked onClick={() => {}} /> });
+      expect(screen.getByRole('switch')).toBeChecked();
+    });
+
+    it('reflects unchecked state', () => {
+      renderWith({ control: <ListItem.Switch checked={false} onClick={() => {}} /> });
+      expect(screen.getByRole('switch')).not.toBeChecked();
+    });
+  });
+
+  it('handles onClick events', async () => {
+    const handleClick = jest.fn();
+    renderWith({ control: <ListItem.Switch checked={false} onClick={handleClick} /> });
+
+    await userEvent.click(screen.getByRole('switch'));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('is disabled when ListItem is disabled', async () => {
+    const handleClick = jest.fn();
+    renderWith({
+      disabled: true,
+      control: <ListItem.Switch checked={false} onClick={handleClick} />,
+    });
+
+    const switchElement = screen.getByRole('switch');
+    expect(switchElement).toBeDisabled();
+
+    await userEvent.click(screen.getByRole('switch'));
+    expect(handleClick).not.toHaveBeenCalled();
+  });
+});

package/src/listItem/Switch/ListItemSwitch.story.tsx

@@ -0,0 +1,79 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+import { lorem10, lorem5 } from '../../test-utils';
+import List from '../../list';
+import { ListItem } from '../ListItem';
+import {
+  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
+  SB_LIST_ITEM_MEDIA as MEDIA,
+} from '../_stories/subcomponents';
+import type { ListItemSwitchProps } from './ListItemSwitch';
+
+const meta: Meta<ListItemSwitchProps> = {
+  component: ListItem.Switch,
+  title: 'Content/ListItem/ListItem.Switch',
+  parameters: {
+    docs: {
+      toc: true,
+    },
+  },
+  args: {
+    checked: false,
+    onClick: fn(),
+  },
+  argTypes: {
+    checked: {
+      control: 'boolean',
+    },
+    onClick: {
+      table: {
+        type: { summary: '(event?: MouseEvent<HTMLButtonElement>) => void' },
+      },
+    },
+  },
+} satisfies Meta<ListItemSwitchProps>;
+
+export default meta;
+
+type Story = StoryObj<ListItemSwitchProps>;
+
+export const Playground: Story = {
+  tags: ['!autodocs'],
+  render: (args: ListItemSwitchProps) => {
+    return (
+      <List>
+        <ListItem
+          title="List item with switch"
+          subtitle="Toggle this setting"
+          media={MEDIA.avatarSingle}
+          control={<ListItem.Switch {...args} />}
+          additionalInfo={INFO.nonInteractive}
+        />
+      </List>
+    );
+  },
+};
+
+export const States: Story = {
+  parameters: {
+    controls: { disable: true },
+  },
+  render: (args) => {
+    return (
+      <List>
+        <ListItem
+          title={lorem5}
+          subtitle={lorem10}
+          media={MEDIA.avatarSingle}
+          control={<ListItem.Switch {...args} checked />}
+        />
+        <ListItem
+          key={lorem5}
+          title={lorem10}
+          media={MEDIA.avatarSingle}
+          control={<ListItem.Switch {...args} />}
+        />
+      </List>
+    );
+  },
+};

package/src/listItem/Switch/ListItemSwitch.tsx

@@ -0,0 +1,33 @@
+import { useContext } from 'react';
+import SwitchComp, { type SwitchProps } from '../../switch';
+import { useListItemControl } from '../useListItemControl';
+import { ListItemContext } from '../ListItemContext';
+
+export type ListItemSwitchProps = Omit<
+  SwitchProps,
+  'disabled' | 'id' | 'aria-labelledby' | 'aria-label'
+>;
+
+/**
+ * This component allows for rendering a switch control within a fully interactive ListItem. <br />It's a thin wrapper around the
+ * [CheckboxButton component](https://storybook.wise.design/?path=/docs/actions-switch--docs),
+ * but offers only a subset of its features in line with the ListItem's constraints. <br />
+ *
+ * Please refer to the [Design documentation](https://wise.design/components/list-item---switch) for details.
+ */
+export const Switch = function (props: ListItemSwitchProps) {
+  const { baseItemProps } = useListItemControl('switch', { ...props });
+  const { ids, describedByIds } = useContext(ListItemContext);
+
+  return (
+    <SwitchComp
+      {...props}
+      aria-describedby={describedByIds}
+      className="wds-list-item-control"
+      disabled={baseItemProps.disabled}
+      id={ids.control}
+    />
+  );
+};
+
+Switch.displayName = 'ListItem.Switch';

package/src/listItem/Switch/index.ts

@@ -0,0 +1,2 @@
+export type { ListItemSwitchProps } from './ListItemSwitch';
+export { Switch } from './ListItemSwitch';

package/src/listItem/_stories/ListItem.focus.test.story.tsx

@@ -0,0 +1,265 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import Link from '../../link';
+import List from '../../list';
+import { ListItem, type ListItemProps } from '../ListItem';
+import { expect, userEvent, within, waitFor } from 'storybook/test';
+
+const waitForFocus = async (assertion: () => Promise<void>, timeout = 3000) => {
+  await waitFor(assertion, { timeout });
+};
+
+const waitForListItem = async (canvas: ReturnType<typeof within>, timeout = 3000) => {
+  await waitFor(
+    async () => {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+      await expect(canvas.getByRole('listitem')).toBeInTheDocument();
+    },
+    { timeout },
+  );
+};
+
+export default {
+  component: ListItem,
+  title: 'Content/ListItem/tests/focus',
+  tags: ['!autodocs'],
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    a11y: { disable: true },
+    knobs: { disable: true },
+  },
+} satisfies Meta<ListItemProps>;
+type Story = StoryObj<ListItemProps>;
+
+const title = {
+  full: 'Fully interactive',
+  partial: 'Partially interactive',
+};
+
+const subtitle = {
+  full: 'Whole item should be focusable, control should not.',
+  partial: 'Only control should be focusable, not whole item.',
+};
+
+const additionalInfo = {
+  static: (
+    <ListItem.AdditionalInfo>
+      Fully interactive ListItems don&apos;t allow any nested interactive elements like links or
+      buttons within AdditionalInfo.
+    </ListItem.AdditionalInfo>
+  ),
+  interactive: (
+    <ListItem.AdditionalInfo
+      action={{ label: 'appended to the end.', href: 'https://wise.com', target: '_blank' }}
+    >
+      This additional info has a focusable link
+    </ListItem.AdditionalInfo>
+  ),
+};
+
+const prompt = {
+  static: <ListItem.Prompt sentiment="positive">Non-interactive prompt.</ListItem.Prompt>,
+  interactive: (
+    <ListItem.Prompt sentiment="positive">
+      This prompt has a{' '}
+      <Link href="https://wise.com" target="_blank" rel="noreferrer">
+        single interactive element
+      </Link>{' '}
+      that spreads across the whole prompt area.
+    </ListItem.Prompt>
+  ),
+};
+
+const button = {
+  full: (
+    <ListItem.Button priority="secondary-neutral" onClick={() => {}}>
+      Click me
+    </ListItem.Button>
+  ),
+  partial: (
+    <ListItem.Button partiallyInteractive priority="secondary-neutral" onClick={() => {}}>
+      Click me
+    </ListItem.Button>
+  ),
+};
+
+export const FullyInteractive: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await waitForListItem(canvas);
+    await userEvent.tab();
+    await waitForFocus(async () => {
+      await expect(canvas.getByRole('button')).toHaveFocus();
+    });
+  },
+  render: () => (
+    <List>
+      <ListItem
+        title={title.full}
+        subtitle={subtitle.full}
+        additionalInfo={additionalInfo.static}
+        control={button.full}
+        prompt={prompt.static}
+      />
+    </List>
+  ),
+};
+
+export const FullyInteractiveFocusedOnPrompt: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await waitForListItem(canvas);
+
+    await userEvent.tab();
+    await waitForFocus(async () => {
+      await expect(canvas.getByRole('button')).toHaveFocus();
+    });
+
+    await userEvent.tab();
+    await waitForFocus(async () => {
+      await expect(canvas.getByRole('link', { name: /^single interactive element/ })).toHaveFocus();
+    });
+  },
+  render: () => (
+    <List>
+      <ListItem
+        title={title.full}
+        subtitle={subtitle.full}
+        additionalInfo={additionalInfo.static}
+        control={button.full}
+        prompt={prompt.interactive}
+      />
+    </List>
+  ),
+};
+
+export const PartiallyInteractiveFocusedOnControl: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await waitForListItem(canvas);
+    await userEvent.tab();
+    await waitForFocus(async () => {
+      await expect(canvas.getByRole('button')).toHaveFocus();
+    });
+  },
+  render: () => (
+    <List>
+      <ListItem
+        title={title.partial}
+        subtitle={subtitle.partial}
+        additionalInfo={additionalInfo.interactive}
+        control={button.partial}
+        prompt={prompt.interactive}
+      />
+    </List>
+  ),
+};
+
+export const PartiallyInteractiveFocusedOnAdditionInfo: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await waitForListItem(canvas);
+
+    await userEvent.tab();
+    await waitForFocus(async () => {
+      await expect(canvas.getByRole('button')).toHaveFocus();
+    });
+
+    await userEvent.tab();
+    await waitForFocus(async () => {
+      await expect(canvas.getByRole('link', { name: /^appended to the end/ })).toHaveFocus();
+    });
+  },
+  render: () => (
+    <List>
+      <ListItem
+        title={title.partial}
+        subtitle={subtitle.partial}
+        additionalInfo={additionalInfo.interactive}
+        control={button.partial}
+        prompt={prompt.interactive}
+      />
+    </List>
+  ),
+};
+
+export const PartiallyInteractiveFocusedOnPrompt: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await waitForListItem(canvas);
+
+    await userEvent.tab();
+    await waitForFocus(async () => {
+      await expect(canvas.getByRole('button')).toHaveFocus();
+    });
+
+    await userEvent.tab();
+    await waitForFocus(async () => {
+      await expect(canvas.getByRole('link', { name: /^appended to the end/ })).toHaveFocus();
+    });
+
+    await userEvent.tab();
+    await waitForFocus(async () => {
+      await expect(canvas.getByRole('link', { name: /^single interactive element/ })).toHaveFocus();
+    });
+  },
+  render: () => (
+    <List>
+      <ListItem
+        title={title.partial}
+        subtitle={subtitle.partial}
+        additionalInfo={additionalInfo.interactive}
+        control={button.partial}
+        prompt={prompt.interactive}
+      />
+    </List>
+  ),
+};
+
+export const FullyInteractiveDisabled: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await waitForListItem(canvas);
+
+    await userEvent.tab();
+    await waitForFocus(async () => {
+      await expect(canvas.getByRole('button')).not.toHaveFocus();
+    });
+  },
+  render: () => (
+    <List>
+      <ListItem
+        disabled
+        title={title.full}
+        subtitle={subtitle.full}
+        additionalInfo={additionalInfo.static}
+        control={button.full}
+        prompt={prompt.static}
+      />
+    </List>
+  ),
+};
+
+export const PartiallyInteractiveDisabled: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await waitForListItem(canvas);
+
+    await userEvent.tab();
+    await waitForFocus(async () => {
+      await expect(canvas.getByRole('button')).not.toHaveFocus();
+    });
+  },
+  render: () => (
+    <List>
+      <ListItem
+        disabled
+        title={title.partial}
+        subtitle={subtitle.partial}
+        additionalInfo={additionalInfo.interactive}
+        control={button.partial}
+        prompt={prompt.interactive}
+      />
+    </List>
+  ),
+};