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

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

@@ -1,408 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { fn } from 'storybook/test';
-import { Freeze, ArrowRight } from '@transferwise/icons';
-import { ListItem } from '../ListItem';
-import {
-  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
-  SB_LIST_ITEM_MEDIA as MEDIA,
-} from '../_stories/subcomponents';
-import type { ListItemButtonProps } from './ListItemButton';
-
-/**
- * Convenience controls for previewing rich markup,
- * not otherwise possible via Storybook
- */
-type PreviewStoryArgs = ListItemButtonProps & {
-  previewAddonStart: boolean | ListItemButtonProps['addonStart'];
-  previewAddonEnd: boolean | ListItemButtonProps['addonEnd'];
-};
-
-const previewArgTypes = {
-  previewAddonStart: {
-    control: 'boolean',
-    name: 'Preview with `addonStart`',
-    mapping: {
-      true: { type: 'icon', value: <Freeze /> },
-    },
-    description: '**NB:** ListItem.Button only supports icon addons.',
-    table: {
-      category: 'Preview options',
-      type: {
-        summary: undefined,
-      },
-    },
-  },
-  previewAddonEnd: {
-    control: 'boolean',
-    name: 'Preview with `addonEnd`',
-    mapping: {
-      true: { type: 'icon', value: <ArrowRight /> },
-    },
-    description: '**NB:** ListItem.Button only supports icon addons.',
-    table: {
-      category: 'Preview options',
-      type: {
-        summary: undefined,
-      },
-    },
-  },
-} as const;
-
-const getPropsForPreview = (args: PreviewStoryArgs) => {
-  const { previewAddonStart, previewAddonEnd, ...props } = args as {
-    previewAddonStart: ListItemButtonProps['addonStart'];
-    previewAddonEnd: ListItemButtonProps['addonEnd'];
-    [key: string]: any;
-  };
-
-  return [
-    props,
-    {
-      addonStart: previewAddonStart,
-      addonEnd: previewAddonEnd,
-    },
-  ] as const;
-};
-
-const meta: Meta<typeof ListItem.Button> = {
-  component: ListItem.Button,
-  title: 'Content/ListItem/ListItem.Button',
-  parameters: {
-    docs: {
-      toc: true,
-    },
-  },
-  args: {
-    partiallyInteractive: false,
-    priority: 'secondary-neutral',
-    sentiment: undefined,
-    loading: undefined,
-    href: undefined,
-    target: undefined,
-    as: undefined,
-    addonStart: undefined,
-    addonEnd: undefined,
-    className: undefined,
-    children: 'Click me',
-    onClick: fn(),
-  },
-  argTypes: {
-    children: {
-      table: {
-        type: { summary: 'ReactNode' },
-      },
-    },
-    loading: {
-      control: 'boolean',
-      description: 'Toggles the loading state',
-    },
-    priority: {
-      control: 'radio',
-      options: ['unset (undefined)', 'primary', 'secondary', 'secondary-neutral', 'tertiary'],
-      mapping: {
-        'unset (undefined)': undefined,
-      },
-      description: 'Sets a visual hierarchy amongst the buttons displayed on the screen',
-    },
-    sentiment: {
-      options: ['unset (undefined)', 'default', 'negative'],
-      mapping: {
-        'unset (undefined)': undefined,
-      },
-      description:
-        'Sets a visual hierarchy amongst the buttons displayed on the screen. <br /> **NB:** `negative` variant only affects the `primary` and `secondary` priorities.',
-    },
-    href: {
-      control: 'text',
-      description: 'If set, the component will render as an HTML anchor.',
-    },
-    target: {
-      control: 'select',
-      options: [undefined, '_blank', '_self', '_parent', '_top'],
-      description:
-        'The `target` attribute for HTML anchor. If set to `_blank`, `rel="noopener noreferrer"` is automatically added to the rendered node.',
-    },
-    addonStart: {
-      description: 'Icon accessory to be displayed before the label',
-    },
-    addonEnd: {
-      description: 'Icon accessory to be displayed after the label',
-    },
-  },
-} satisfies Meta<ListItemButtonProps>;
-
-export default meta;
-
-type Story = StoryObj<ListItemButtonProps>;
-
-export const Playground: StoryObj<PreviewStoryArgs> = {
-  tags: ['!autodocs'],
-  render: (args: PreviewStoryArgs) => {
-    const [props, previewProps] = getPropsForPreview(args);
-
-    return (
-      <ListItem
-        title="List item title"
-        subtitle="Subtitle goes here"
-        media={MEDIA.avatarSingle}
-        control={<ListItem.Button {...props} {...previewProps} />}
-        additionalInfo={INFO.nonInteractive}
-      />
-    );
-  },
-  args: {
-    previewAddonStart: false,
-    previewAddonEnd: false,
-  },
-  argTypes: {
-    ...previewArgTypes,
-  },
-};
-
-/**
- * By default, ListItem is fully interactive, which means its whole surface is clickable
- * and triggers the control. To remain WCAG-compliant there can be no nested interactive
- * elements inside the item.<br />
- *
- * To work around this limitation, this control also allows for a partially interactive mode,
- * which can be enabled via `partiallyInteractive` prop. Once set, only the control will
- * remain interactive, which allows for interactive element to be attached to the
- * `ListItem.AdditionalInfo`. This allows for more complex layouts while still providing a
- * clear, accessible action point for users. <br />
- *
- * If you still require a fully interactive ListItem, you can alternatively use `ListItem.Prompt`
- * which allows for a single instance of a link or an inline button.
- *
- * Refer to the [design documentation](https://wise.design/components/list-item#interaction) for details.
- */
-export const Interactivity: Story = {
-  args: {
-    children: 'Action',
-  },
-  render: (args: ListItemButtonProps) => {
-    return (
-      <ol className="list-unstyled">
-        <ListItem
-          title="Fully interactive ListItem"
-          subtitle="Button in fully interactive context"
-          media={MEDIA.avatarSingle}
-          control={<ListItem.Button {...args} />}
-        />
-
-        <ListItem
-          title="Partially interactive ListItem"
-          subtitle="Button in partially interactive context"
-          media={MEDIA.avatarSingle}
-          control={<ListItem.Button {...args} partiallyInteractive />}
-        />
-      </ol>
-    );
-  },
-};
-
-/**
- * If `href` prop is set, the component will be automatically rendered as an HTML anchor element.
- */
-export const AsAnchor: Story = {
-  args: {
-    children: 'Visit link',
-    href: 'https://wise.com',
-    target: '_blank',
-  },
-  render: (args: ListItemButtonProps) => {
-    return (
-      <ListItem
-        title="List item with button link"
-        subtitle="Button rendered as anchor element"
-        media={MEDIA.avatarSingle}
-        control={<ListItem.Button {...args} />}
-        additionalInfo={INFO.nonInteractive}
-      />
-    );
-  },
-};
-
-/**
- * There are two different types of button – default and negative – designed to emphasise the nature of the action. <br />
- * **NB:** Sentiment only applies to `primary` and `secondary` priorities. <br />
- * [Design documentation](https://wise.design/components/button#types)
- */
-export const Sentiment: Story = {
-  render: (args: ListItemButtonProps) => {
-    return (
-      <ol className="list-unstyled">
-        <ListItem
-          title="Default Sentiment - Primary"
-          subtitle="Default sentiment with primary priority"
-          media={MEDIA.avatarSingle}
-          control={
-            <ListItem.Button {...args} priority="primary">
-              Default Sentiment
-            </ListItem.Button>
-          }
-        />
-        <ListItem
-          title="Negative Sentiment - Primary"
-          subtitle="Negative sentiment with primary priority"
-          media={MEDIA.avatarSingle}
-          control={
-            <ListItem.Button {...args} priority="primary" sentiment="negative">
-              Negative Sentiment
-            </ListItem.Button>
-          }
-        />
-        <ListItem
-          title="Default Sentiment - Secondary"
-          subtitle="Default sentiment with secondary priority"
-          media={MEDIA.avatarSingle}
-          control={
-            <ListItem.Button {...args} priority="secondary">
-              Default Sentiment
-            </ListItem.Button>
-          }
-        />
-        <ListItem
-          title="Negative Sentiment - Secondary"
-          subtitle="Negative sentiment with secondary priority"
-          media={MEDIA.avatarSingle}
-          control={
-            <ListItem.Button {...args} priority="secondary" sentiment="negative">
-              Negative Sentiment
-            </ListItem.Button>
-          }
-        />
-      </ol>
-    );
-  },
-  args: {
-    children: 'Button text',
-  },
-};
-
-/**
- * Priorities set a visual hierarchy amongst the buttons displayed on the
- * screen to help more important buttons to take precedence over others. <br />
- * [Design documentation](https://wise.design/components/button#priorities)
- */
-export const Priority: Story = {
-  render: (args: ListItemButtonProps) => {
-    return (
-      <ol className="list-unstyled">
-        <ListItem
-          title="Primary Priority"
-          subtitle="Primary priority (default)"
-          media={MEDIA.avatarSingle}
-          control={
-            <ListItem.Button {...args} priority="primary">
-              Primary Priority
-            </ListItem.Button>
-          }
-        />
-        <ListItem
-          title="Secondary Priority"
-          subtitle="Secondary priority"
-          media={MEDIA.avatarSingle}
-          control={
-            <ListItem.Button {...args} priority="secondary">
-              Secondary Priority
-            </ListItem.Button>
-          }
-        />
-        <ListItem
-          title="Secondary Neutral Priority"
-          subtitle="Secondary neutral priority"
-          media={MEDIA.avatarSingle}
-          control={
-            <ListItem.Button {...args} priority="secondary-neutral">
-              Secondary Neutral Priority
-            </ListItem.Button>
-          }
-        />
-        <ListItem
-          title="Tertiary Priority"
-          subtitle="Tertiary priority"
-          media={MEDIA.avatarSingle}
-          control={
-            <ListItem.Button {...args} priority="tertiary">
-              Tertiary Priority
-            </ListItem.Button>
-          }
-        />
-      </ol>
-    );
-  },
-  args: {
-    children: 'Button text',
-  },
-};
-
-/**
- * Button in loading state.
- */
-export const Loading: Story = {
-  render: (args: ListItemButtonProps) => {
-    return (
-      <ListItem
-        title="Loading Button"
-        subtitle="Button in loading state"
-        media={MEDIA.avatarSingle}
-        control={<ListItem.Button {...args}>Loading Button</ListItem.Button>}
-        additionalInfo={INFO.nonInteractive}
-      />
-    );
-  },
-  args: {
-    loading: true,
-  },
-};
-
-const addonProps = {
-  addonStart: { type: 'icon', value: <Freeze /> },
-  addonEnd: { type: 'icon', value: <ArrowRight /> },
-} as const;
-
-/**
- * Icons can be displayed before and after the button label. <br />
- * **NB:** ListItem.Button only supports icon addons.
- */
-export const WithIcons: Story = {
-  render: (args: ListItemButtonProps) => {
-    return (
-      <ol className="list-unstyled">
-        <ListItem
-          title="With Start Icon"
-          subtitle="Button with icon before the label"
-          media={MEDIA.avatarSingle}
-          control={
-            <ListItem.Button {...args} addonStart={addonProps.addonStart}>
-              With start icon
-            </ListItem.Button>
-          }
-        />
-        <ListItem
-          title="With End Icon"
-          subtitle="Button with icon after the label"
-          media={MEDIA.avatarSingle}
-          control={
-            <ListItem.Button {...args} addonEnd={addonProps.addonEnd}>
-              With end icon
-            </ListItem.Button>
-          }
-        />
-        <ListItem
-          title="With Both Icons"
-          subtitle="Button with icons before and after the label"
-          media={MEDIA.avatarSingle}
-          control={
-            <ListItem.Button {...args} {...addonProps}>
-              With both icons
-            </ListItem.Button>
-          }
-        />
-      </ol>
-    );
-  },
-  args: {
-    children: 'Button text',
-  },
-};

package/src/listItem/Button/ListItemButton.tsx

@@ -1,56 +0,0 @@
-import { useContext } from 'react';
-import { clsx } from 'clsx';
-import ButtonComp, { type ButtonAddonIcon, type NewButtonProps } from '../../button';
-import { useListItemControl } from '../useListItemControl';
-import { ListItemContext } from '../ListItemContext';
-
-export type ListItemButtonProps = Omit<
-  NewButtonProps,
-  'v2' | 'size' | 'disabled' | 'block' | 'addonStart'
-> & {
-  /**
-   * Toggles the [interactivity strategy](https://storybook.wise.design/?path=/docs/content-listitem--docs#interactivity) for the whole ListItem.
-   */
-  partiallyInteractive?: boolean;
-  addonStart?: ButtonAddonIcon;
-};
-
-/**
- * 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 Button = ({
-  priority = 'secondary-neutral',
-  partiallyInteractive,
-  ...props
-}: ListItemButtonProps) => {
-  const { baseItemProps } = useListItemControl('button', { partiallyInteractive, ...props });
-  const { ids, describedByIds } = useContext(ListItemContext);
-
-  const commonProps = {
-    ...props,
-    className: clsx(
-      'wds-list-item-control',
-      !partiallyInteractive && props.href && 'wds-list-item-control_pseudo-element',
-    ),
-    id: ids.control,
-    priority,
-    v2: true,
-    size: 'sm',
-    disabled: baseItemProps.disabled,
-  };
-
-  const buttonContentId = props.href || partiallyInteractive ? '' : `${ids.control}_content`;
-
-  return (
-    <ButtonComp
-      aria-describedby={`${buttonContentId} ${describedByIds}`}
-      {...(commonProps as NewButtonProps)}
-    />
-  );
-};
-
-Button.displayName = 'ListItem.Button';

package/src/listItem/Button/index.ts

@@ -1,2 +0,0 @@
-export type { ListItemButtonProps } from './ListItemButton';
-export { Button } from './ListItemButton';

package/src/listItem/Checkbox/ListItemCheckbox.spec.tsx

@@ -1,82 +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.Checkbox', () => {
-  const renderWith = (overrides: Partial<ListItemProps> = {}) =>
-    render(<ListItem title="Test title" {...overrides} />);
-
-  it('renders checkbox', () => {
-    renderWith({ control: <ListItem.Checkbox /> });
-    expect(screen.getByRole('checkbox')).toBeInTheDocument();
-  });
-
-  describe('checked state', () => {
-    it('reflects checked state', () => {
-      renderWith({ control: <ListItem.Checkbox checked onChange={jest.fn()} /> });
-      expect(screen.getByRole('checkbox')).toBeChecked();
-    });
-
-    it('reflects unchecked state', () => {
-      renderWith({ control: <ListItem.Checkbox checked={false} onChange={jest.fn()} /> });
-      expect(screen.getByRole('checkbox')).not.toBeChecked();
-    });
-
-    it('supports indeterminate state', () => {
-      renderWith({ control: <ListItem.Checkbox indeterminate /> });
-      expect(screen.getByRole('checkbox')).toHaveProperty('indeterminate', true);
-    });
-  });
-
-  describe('interactivity', () => {
-    it('handles onChange events', async () => {
-      const handleChange = jest.fn();
-      renderWith({ control: <ListItem.Checkbox checked={false} onChange={handleChange} /> });
-
-      await userEvent.click(screen.getByRole('checkbox'));
-      expect(handleChange).toHaveBeenCalledTimes(1);
-    });
-
-    it('is disabled when ListItem is disabled', () => {
-      renderWith({
-        disabled: true,
-        control: <ListItem.Checkbox checked={false} onChange={jest.fn()} />,
-      });
-
-      expect(screen.getByRole('checkbox')).toBeDisabled();
-    });
-
-    it('handles onFocus events', async () => {
-      const handleFocus = jest.fn();
-      renderWith({
-        control: <ListItem.Checkbox checked={false} onFocus={handleFocus} onChange={() => {}} />,
-      });
-
-      await userEvent.tab();
-      expect(handleFocus).toHaveBeenCalledTimes(1);
-    });
-
-    it('handles onBlur events', async () => {
-      const handleBlur = jest.fn();
-      renderWith({
-        control: <ListItem.Checkbox checked={false} onBlur={handleBlur} onChange={() => {}} />,
-      });
-
-      const checkbox = screen.getByRole('checkbox');
-      await userEvent.click(checkbox);
-      await userEvent.tab();
-      expect(handleBlur).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  it('supports name and value attributes', () => {
-    const checkboxName = 'test-checkbox';
-    const checkboxValue = 'test-value';
-    renderWith({ control: <ListItem.Checkbox name={checkboxName} value={checkboxValue} /> });
-
-    const checkbox = screen.getByRole('checkbox');
-    expect(checkbox).toHaveAttribute('name', checkboxName);
-    // eslint-disable-next-line jest-dom/prefer-to-have-value
-    expect(checkbox).toHaveAttribute('value', checkboxValue);
-  });
-});

package/src/listItem/Checkbox/ListItemCheckbox.story.tsx

@@ -1,107 +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 { ListItemCheckboxProps } from './ListItemCheckbox';
-import { fn } from 'storybook/test';
-
-const meta: Meta<ListItemCheckboxProps> = {
-  component: ListItem.Checkbox,
-  title: 'Content/ListItem/ListItem.Checkbox',
-  parameters: {
-    docs: {
-      toc: true,
-    },
-  },
-  args: {
-    checked: false,
-    indeterminate: false,
-    value: 'checkbox',
-    name: 'checkbox',
-    onChange: fn(),
-    onFocus: fn(),
-    onBlur: fn(),
-  },
-  argTypes: {
-    checked: {
-      control: 'boolean',
-    },
-    indeterminate: {
-      control: 'boolean',
-    },
-  },
-} satisfies Meta<ListItemCheckboxProps>;
-
-export default meta;
-
-type Story = StoryObj<ListItemCheckboxProps>;
-
-export const Playground: Story = {
-  tags: ['!autodocs'],
-  render: (args: ListItemCheckboxProps) => {
-    return (
-      <ListItem
-        title="List item with checkbox"
-        subtitle="Select this option"
-        media={MEDIA.avatarSingle}
-        control={<ListItem.Checkbox {...args} />}
-        additionalInfo={INFO.nonInteractive}
-      />
-    );
-  },
-};
-
-/**
- * Checkbox controls demonstrate different states including checked, unchecked, and indeterminate.
- */
-export const States: Story = {
-  render: function Render() {
-    const [isChecked0, setisChecked0] = useState(false);
-    const [isChecked1, setisChecked1] = useState(true);
-    const [isChecked2, setisChecked2] = useState(false);
-
-    return (
-      <ol className="list-unstyled">
-        <ListItem
-          control={
-            <ListItem.Checkbox
-              checked={isChecked0}
-              onChange={() => setisChecked0((current) => !current)}
-            />
-          }
-          title="Unchecked option"
-          subtitle="This option is not selected"
-          media={MEDIA.avatarSingle}
-        />
-
-        <ListItem
-          control={
-            <ListItem.Checkbox
-              checked={isChecked1}
-              onChange={() => setisChecked1((current) => !current)}
-            />
-          }
-          title="Checked option"
-          subtitle="This option is selected"
-          media={MEDIA.avatarSingle}
-        />
-
-        <ListItem
-          control={
-            <ListItem.Checkbox
-              checked={isChecked2}
-              indeterminate
-              onChange={() => setisChecked2((current) => !current)}
-            />
-          }
-          title="Indeterminate option"
-          subtitle="This option is partially selected"
-          media={MEDIA.avatarSingle}
-        />
-      </ol>
-    );
-  },
-};

package/src/listItem/Checkbox/ListItemCheckbox.tsx

@@ -1,33 +0,0 @@
-import { useContext } from 'react';
-import CheckboxButton, { type CheckboxButtonProps } from '../../checkboxButton/CheckboxButton';
-import { useListItemControl } from '../useListItemControl';
-import { ListItemContext } from '../ListItemContext';
-
-export type ListItemCheckboxProps = Pick<
-  CheckboxButtonProps,
-  'checked' | 'indeterminate' | 'onChange' | 'onBlur' | 'onFocus' | 'value' | 'name'
->;
-
-/**
- * This component allows for rendering a checkbox control within a fully interactive ListItem. <br />It's a thin wrapper around the
- * [CheckboxButton component](https://storybook.wise.design/?path=/docs/actions-checkboxbutton--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---checkbox) for details.
- */
-export const Checkbox = function (props: ListItemCheckboxProps) {
-  const { baseItemProps } = useListItemControl('checkbox', { ...props });
-  const { ids, describedByIds } = useContext(ListItemContext);
-
-  return (
-    <CheckboxButton
-      {...props}
-      className="wds-list-item-control"
-      disabled={baseItemProps.disabled}
-      id={ids.control}
-      aria-describedby={describedByIds}
-    />
-  );
-};
-
-Checkbox.displayName = 'ListItem.Checkbox';

package/src/listItem/Checkbox/index.ts

@@ -1,2 +0,0 @@
-export type { ListItemCheckboxProps } from './ListItemCheckbox';
-export { Checkbox } from './ListItemCheckbox';