@transferwise/components 0.0.0-experimental-751dc12 → 0.0.0-experimental-4341b9c

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

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

@@ -1,201 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { action } from 'storybook/actions';
-import { lorem10, lorem5 } from '../../test-utils';
-import Link from '../../link';
-import { Sentiment as Sentiments } from '../../common';
-import { ListItem } from '../..';
-import { Prompt, 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) => (
-    <ListItem
-      title={lorem5}
-      subtitle={lorem10}
-      media={MEDIA.avatarSingle}
-      control={CONTROLS.switch}
-      prompt={<Prompt {...args} />}
-    />
-  ),
-};
-
-export const Sentiment: Story = {
-  parameters: {
-    controls: { disable: true },
-    actions: { disable: true },
-    a11y: { disable: true },
-    knobs: { disable: true },
-  },
-  render: (args) => (
-    <ol className="list-unstyled">
-      <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>}
-      />
-    </ol>
-  ),
-};
-
-/**
- * `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) => (
-    <ol className="list-unstyled">
-      <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>
-        }
-      />
-    </ol>
-  ),
-};
-
-/**
- * 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) => (
-    <ol className="list-unstyled">
-      <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>
-        }
-      />
-    </ol>
-  ),
-};

package/src/listItem/Prompt/ListItemPrompt.tsx

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

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

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

@@ -1,66 +0,0 @@
-import { render, screen } from '../../test-utils';
-import userEvent from '@testing-library/user-event';
-import { ListItem, type Props as 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

@@ -1,98 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { useState } from 'react';
-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(),
-  },
-} satisfies Meta<ListItemRadioProps>;
-
-export default meta;
-
-type Story = StoryObj<ListItemRadioProps>;
-
-export const Playground: Story = {
-  tags: ['!autodocs'],
-  render: (args: ListItemRadioProps) => {
-    return (
-      <ListItem
-        title="List item with radio"
-        subtitle="Select this option"
-        media={MEDIA.avatarSingle}
-        control={<ListItem.Radio {...args} />}
-        additionalInfo={INFO.nonInteractive}
-      />
-    );
-  },
-};
-
-/**
- * Radio controls follow the native HTML behaviour and can be grouped using the `name` prop.
- */
-export const RadioGroup: Story = {
-  render: function Render() {
-    const [selectedValue, setSelectedValue] = useState('2');
-
-    return (
-      <ol className="list-unstyled">
-        <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} />}
-        />
-      </ol>
-    );
-  },
-};

package/src/listItem/Radio/ListItemRadio.tsx

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

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

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

@@ -1,47 +0,0 @@
-import { render, screen } from '../../test-utils';
-import userEvent from '@testing-library/user-event';
-import { ListItem, type Props as 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

@@ -1,69 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { useState } from 'react';
-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';
-import { fn } from 'storybook/test';
-import { lorem10, lorem5 } from '../../test-utils';
-
-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',
-    },
-  },
-} satisfies Meta<ListItemSwitchProps>;
-
-export default meta;
-
-type Story = StoryObj<ListItemSwitchProps>;
-
-export const Playground: Story = {
-  tags: ['!autodocs'],
-  render: (args: ListItemSwitchProps) => {
-    return (
-      <ListItem
-        title="List item with switch"
-        subtitle="Toggle this setting"
-        media={MEDIA.avatarSingle}
-        control={<ListItem.Switch {...args} />}
-        additionalInfo={INFO.nonInteractive}
-      />
-    );
-  },
-};
-
-export const States: Story = {
-  render: (args) => {
-    return (
-      <ol className="list-unstyled">
-        <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} />}
-        />
-      </ol>
-    );
-  },
-};

package/src/listItem/Switch/ListItemSwitch.tsx

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

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