@transferwise/components 0.0.0-experimental-e06e456 → 0.0.0-experimental-e3978a5

package/src/listItem/Prompt/ListItemPrompt.spec.tsx

@@ -0,0 +1,36 @@
+import { mockMatchMedia, render, screen } from '../../test-utils';
+import { Sentiment } from '../../common';
+import { ListItem } from '../ListItem';
+import type { ListItemPromptProps } from './ListItemPrompt';
+
+mockMatchMedia();
+
+describe('ListItem.Prompt', () => {
+  it('renders children content', () => {
+    render(
+      <ListItem
+        title="Test Title"
+        prompt={<ListItem.Prompt>This is a prompt message</ListItem.Prompt>}
+      />,
+    );
+
+    expect(screen.getByText('This is a prompt message')).toBeInTheDocument();
+  });
+
+  describe('render icon', () => {
+    it.each([
+      [Sentiment.NEUTRAL, 'info-icon'],
+      [Sentiment.POSITIVE, 'check-icon'],
+      [Sentiment.NEGATIVE, 'cross-icon'],
+      [Sentiment.WARNING, 'alert-icon'],
+    ] as [ListItemPromptProps['sentiment'], string][])('renders %s icon', (sentiment, iconId) => {
+      render(
+        <ListItem
+          title="Test Title"
+          prompt={<ListItem.Prompt sentiment={sentiment}>Message</ListItem.Prompt>}
+        />,
+      );
+      expect(screen.getByTestId(iconId)).toBeInTheDocument();
+    });
+  });
+});

package/src/listItem/Prompt/ListItemPrompt.story.tsx

@@ -0,0 +1,204 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { action } from 'storybook/actions';
+import { lorem10, lorem5 } from '../../test-utils';
+import Link from '../../link';
+import List from '../../list';
+import { Sentiment as Sentiments } from '../../common';
+import { ListItem } from '../ListItem';
+import { Prompt, type ListItemPromptProps } from './ListItemPrompt';
+import {
+  SB_LIST_ITEM_CONTROLS as CONTROLS,
+  SB_LIST_ITEM_MEDIA as MEDIA,
+} from '../_stories/subcomponents';
+
+const meta: Meta<ListItemPromptProps> = {
+  component: Prompt,
+  title: 'Content/ListItem/ListItem.Prompt',
+  parameters: {
+    docs: {
+      toc: true,
+    },
+  },
+  args: {
+    sentiment: undefined,
+    children: 'You have done a terrible thing',
+  },
+  argTypes: {
+    sentiment: {
+      options: [
+        'unset (undefined)',
+        Sentiments.POSITIVE,
+        Sentiments.NEGATIVE,
+        Sentiments.NEUTRAL,
+        Sentiments.WARNING,
+      ],
+      mapping: {
+        'unset (undefined)': undefined,
+      },
+      control: { type: 'radio' },
+    },
+    children: {
+      table: {
+        type: { summary: 'ReactNode' },
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<ListItemPromptProps>;
+
+export const Playground: Story = {
+  tags: ['!autodocs'],
+  parameters: {
+    docs: {
+      source: 'dynamic',
+    },
+  },
+  render: (args) => (
+    <List>
+      <ListItem
+        title={lorem5}
+        subtitle={lorem10}
+        media={MEDIA.avatarSingle}
+        control={CONTROLS.switch}
+        prompt={<Prompt {...args} />}
+      />
+    </List>
+  ),
+};
+
+export const Sentiment: Story = {
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    a11y: { disable: true },
+    knobs: { disable: true },
+  },
+  render: (args) => (
+    <List>
+      <ListItem
+        title={lorem5}
+        subtitle={lorem10}
+        media={MEDIA.avatarSingle}
+        control={CONTROLS.switch}
+        prompt={<Prompt sentiment={Sentiments.NEUTRAL}>This is a neutral prompt.</Prompt>}
+      />
+      <ListItem
+        title={lorem5}
+        subtitle={lorem10}
+        media={MEDIA.avatarSingle}
+        control={CONTROLS.switch}
+        prompt={<Prompt sentiment={Sentiments.POSITIVE}>This is a positive prompt.</Prompt>}
+      />
+      <ListItem
+        title={lorem5}
+        subtitle={lorem10}
+        media={MEDIA.avatarSingle}
+        control={CONTROLS.switch}
+        prompt={<Prompt sentiment={Sentiments.WARNING}>This is a warning prompt.</Prompt>}
+      />
+      <ListItem
+        title={lorem5}
+        subtitle={lorem10}
+        media={MEDIA.avatarSingle}
+        control={CONTROLS.switch}
+        prompt={<Prompt sentiment={Sentiments.NEGATIVE}>This is a negative prompt.</Prompt>}
+      />
+    </List>
+  ),
+};
+
+/**
+ * `ListItem.Prompt` is rendered on a separate branch of the Accessibility Tree from the item's
+ * control, so it can include a single instance of `Link` component, which can be rendered as
+ * either HTML anchor or button. That element will spread across the whole surface of the Prompt
+ * so it's easily accessible for all users.
+ */
+export const Interactivity: Story = {
+  argTypes: {
+    children: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  render: (args) => (
+    <List>
+      <ListItem
+        title={lorem5}
+        subtitle={lorem10}
+        media={MEDIA.avatarSingle}
+        control={CONTROLS.switch}
+        prompt={
+          <Prompt sentiment={args.sentiment}>
+            This prompt includes a{' '}
+            <Link href="https://wise.com" target="_blank" rel="noreferrer">
+              link to some resource
+            </Link>{' '}
+            to help the user in their journey.
+          </Prompt>
+        }
+      />
+
+      <ListItem
+        title={lorem5}
+        subtitle={lorem10}
+        media={MEDIA.avatarSingle}
+        control={CONTROLS.switch}
+        prompt={
+          <Prompt sentiment={args.sentiment}>
+            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
+            This prompt includes an <Link onClick={action('inline button')}>
+              inline button
+            </Link>{' '}
+            than can e.g. trigger a modal.
+          </Prompt>
+        }
+      />
+    </List>
+  ),
+};
+
+/**
+ * By default, the Prompt will try to occupy as little space as possible, but as soon as you make it more than 1 line long, it will stretch to the full available width.
+ *
+ * **NB:** While Prompt supports multi-line text, its content should be concise and have no more than 2 short sentences so users can quickly understand the message.
+ */
+export const Sizing: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: 'hidden',
+      },
+    },
+  },
+  render: (args) => (
+    <List>
+      <ListItem
+        title={lorem5}
+        subtitle={lorem10}
+        media={MEDIA.image}
+        control={CONTROLS.switch}
+        prompt={
+          <ListItem.Prompt sentiment={Sentiments.POSITIVE}>This is a short text</ListItem.Prompt>
+        }
+      />
+      <ListItem
+        title={lorem5}
+        subtitle={lorem10}
+        media={MEDIA.image}
+        control={CONTROLS.switch}
+        prompt={
+          <ListItem.Prompt sentiment={Sentiments.WARNING}>
+            This is a very, very, very, very, very long text that will wrap into more than 1 line
+            and will make the prompt stretch to a full available width. Technically it can be as
+            long as Vim manual, but we recommend keeping it concise and no more than 2 short
+            sentences.
+          </ListItem.Prompt>
+        }
+      />
+    </List>
+  ),
+};

package/src/listItem/Prompt/ListItemPrompt.tsx

@@ -0,0 +1,32 @@
+import { useContext } from 'react';
+import { clsx } from 'clsx';
+import { Sentiment } from '../../common';
+import StatusIcon from '../../statusIcon';
+import Body from '../../body';
+import { ListItemContext, type ListItemContextData } from '../ListItemContext';
+
+export type ListItemPromptProps = {
+  sentiment?: `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`;
+  children: React.ReactNode;
+};
+
+/**
+ * This component allows for rendering an Inline Prompt. <br />In the future it will be a thin wrapper around a standalone component.<br />
+ *
+ * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.
+ */
+export const Prompt = ({ sentiment = Sentiment.NEUTRAL, children }: ListItemPromptProps) => {
+  const { ids } = useContext<ListItemContextData>(ListItemContext);
+
+  return (
+    <div id={ids.prompt} className={clsx('wds-list-item-prompt', sentiment)}>
+      <div className="np-prompt-icon">
+        <StatusIcon size={16} sentiment={sentiment} />
+      </div>
+      <Body>{children}</Body>
+    </div>
+  );
+};
+
+Prompt.displayName = 'ListItem.Prompt';
+export default Prompt;

package/src/listItem/Prompt/index.ts

@@ -0,0 +1,2 @@
+export type { ListItemPromptProps } from './ListItemPrompt';
+export { Prompt } from './ListItemPrompt';

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

@@ -0,0 +1,66 @@
+import { render, screen } from '../../test-utils';
+import userEvent from '@testing-library/user-event';
+import { ListItem, type ListItemProps } from '../ListItem';
+
+describe('ListItem.Radio', () => {
+  const renderWith = (overrides: Partial<ListItemProps> = {}) =>
+    render(<ListItem title="Test Title" {...overrides} />);
+
+  it('renders radio button', () => {
+    renderWith({
+      control: <ListItem.Radio name="test-radio" value="option1" onChange={() => {}} />,
+    });
+
+    expect(screen.getByRole('radio')).toBeInTheDocument();
+  });
+
+  describe('checked state', () => {
+    it('reflects checked state', () => {
+      renderWith({
+        control: <ListItem.Radio name="test-radio" value="option1" checked />,
+      });
+
+      expect(screen.getByRole('radio')).toBeChecked();
+    });
+
+    it('reflects unchecked state', () => {
+      renderWith({
+        control: <ListItem.Radio name="test-radio" value="option1" checked={false} />,
+      });
+
+      expect(screen.getByRole('radio')).not.toBeChecked();
+    });
+  });
+
+  it('handles onChange events', async () => {
+    const handleChange = jest.fn();
+    renderWith({
+      control: <ListItem.Radio name="test-radio" value="option1" onChange={handleChange} />,
+    });
+
+    await userEvent.click(screen.getByRole('radio'));
+    expect(handleChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('is disabled when ListItem is disabled', async () => {
+    const handleChange = jest.fn();
+    renderWith({
+      disabled: true,
+      control: <ListItem.Radio name="test-radio" value="option1" onChange={handleChange} />,
+    });
+
+    const radio = screen.getByRole('radio');
+    expect(radio).toBeDisabled();
+    await userEvent.click(radio);
+    expect(handleChange).not.toHaveBeenCalled();
+  });
+
+  it('supports name and value attributes', () => {
+    renderWith({ control: <ListItem.Radio name="test-radio" value="option1" /> });
+
+    const radio = screen.getByRole('radio');
+    expect(radio).toHaveAttribute('name', 'test-radio');
+    // eslint-disable-next-line jest-dom/prefer-to-have-value
+    expect(radio).toHaveAttribute('value', 'option1');
+  });
+});

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';