@transferwise/components 0.0.0-experimental-ff96697 → 0.0.0-experimental-ffbd2fc

package/src/chips/Chips.test.story.tsx

@@ -0,0 +1,147 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent } from 'storybook/test';
+import { useState } from 'react';
+
+import { withVariantConfig } from '../../.storybook/helpers';
+import { allModes } from '../../.storybook/modes';
+import Chips, { type ChipValue } from './Chips';
+
+export default {
+  component: Chips,
+  title: 'Actions/Chips/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Chips>;
+
+type Story = StoryObj<typeof Chips>;
+
+const wait = async (ms: number) =>
+  new Promise<void>((resolve) => {
+    setTimeout(resolve, ms);
+  });
+
+const filterChips = [
+  { value: 'all', label: 'All' },
+  { value: 'accounting', label: 'Accounting' },
+  { value: 'payroll', label: 'Payroll' },
+  { value: 'payments', label: 'Payments' },
+];
+
+const choiceChips = [
+  { value: 100, label: '100 GBP' },
+  { value: 200, label: '200 GBP' },
+  { value: 300, label: '300 GBP' },
+  { value: 500, label: '500 GBP+' },
+];
+
+/** Filter and choice chips across all themes. */
+export const Variants: Story = {
+  render: function Render() {
+    const [filterSelected, setFilterSelected] = useState<readonly ChipValue[]>([
+      'accounting',
+      'payments',
+    ]);
+    const [choiceSelected, setChoiceSelected] = useState<ChipValue>(300);
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+        <Chips
+          chips={filterChips}
+          multiple
+          selected={filterSelected}
+          aria-label="Category filter"
+          onChange={({ selectedValue, isEnabled }) => {
+            setFilterSelected((prev) =>
+              isEnabled ? [...prev, selectedValue] : prev.filter((v) => v !== selectedValue),
+            );
+          }}
+        />
+        <Chips
+          chips={choiceChips}
+          selected={choiceSelected}
+          aria-label="Transfer amount"
+          onChange={({ selectedValue }) => setChoiceSelected(selectedValue)}
+        />
+      </div>
+    );
+  },
+  parameters: {
+    variants: ['default', 'dark', 'bright-green', 'forest-green'],
+    chromatic: {
+      dark: allModes.dark,
+      brightGreen: allModes.brightGreen,
+      forestGreen: allModes.forestGreen,
+    },
+  },
+};
+
+/** Filter chips at 400% zoom for accessibility testing. */
+export const Zoom400: Story = {
+  render: function Render() {
+    const [selected, setSelected] = useState<readonly ChipValue[]>(['accounting']);
+    return (
+      <Chips
+        chips={filterChips}
+        multiple
+        selected={selected}
+        aria-label="Category filter"
+        onChange={({ selectedValue, isEnabled }) => {
+          setSelected((prev) =>
+            isEnabled ? [...prev, selectedValue] : prev.filter((v) => v !== selectedValue),
+          );
+        }}
+      />
+    );
+  },
+  ...withVariantConfig(['400%']),
+};
+
+/** Tab through choice chips and select one with Enter. */
+export const ChoiceKeyboardInteraction: Story = {
+  render: function Render() {
+    const [selected, setSelected] = useState<ChipValue>(300);
+    return (
+      <Chips
+        chips={choiceChips}
+        selected={selected}
+        aria-label="Transfer amount"
+        onChange={({ selectedValue }) => setSelected(selectedValue)}
+      />
+    );
+  },
+  play: async () => {
+    await userEvent.tab();
+    await wait(400);
+    await userEvent.tab();
+    await wait(400);
+    await userEvent.keyboard('{Enter}');
+  },
+};
+
+/** Tab through filter chips and select one with Enter. */
+export const FilterKeyboardInteraction: Story = {
+  render: function Render() {
+    const [selected, setSelected] = useState<readonly ChipValue[]>(['accounting']);
+    return (
+      <Chips
+        chips={filterChips}
+        multiple
+        selected={selected}
+        aria-label="Category filter"
+        onChange={({ selectedValue, isEnabled }) => {
+          setSelected((prev) =>
+            isEnabled ? [...prev, selectedValue] : prev.filter((v) => v !== selectedValue),
+          );
+        }}
+      />
+    );
+  },
+  play: async () => {
+    await userEvent.tab();
+    await wait(400);
+    await userEvent.tab();
+    await wait(400);
+    await userEvent.tab();
+    await wait(400);
+    await userEvent.keyboard('{Enter}');
+  },
+};

package/src/circularButton/CircularButton.story.tsx

@@ -1,12 +1,26 @@
 import * as Icons from '@transferwise/icons';
 
-import { ControlType, Priority } from '../common';
-
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import CircularButton from './CircularButton';
 import Title from '../title';
 import Body from '../body';
 
+/**
+ * A circular icon button with a text label below it. Use when the user can perform
+ * multiple equally important actions related to an entity on screen — e.g. "Send",
+ * "Add funds", "Convert". Always display in a set; don't use a single circular
+ * button on its own.
+ *
+ * Supports `primary` and `secondary` priorities combined with `default` and
+ * `negative` types. The icon shrinks automatically at 400% zoom (56px → 32px).
+ *
+ * Screen readers announce the text label and ignore the icon, so keep labels
+ * contextual and action-oriented (start with a verb, 1–2 words).
+ *
+ * Keyboard: `Space` or `Enter` activates the button when focused.
+ *
+ * **Design guide**: [wise.design/components/circular-button](https://wise.design/components/circular-button)
+ */
 export default {
   component: CircularButton,
   title: 'Actions/CircularButton',
@@ -23,11 +37,15 @@ export default {
       ),
     },
   },
+  parameters: {
+    docs: { toc: true },
+  },
 } satisfies Meta<typeof CircularButton>;
 
 type Story = StoryObj<typeof CircularButton>;
 
-export const Basic: Story = {
+/** Explore all props via the controls panel. */
+export const Playground: Story = {
   args: {
     priority: 'primary',
     type: 'default',
@@ -35,7 +53,8 @@ export const Basic: Story = {
   },
 };
 
-export const All: Story = {
+/** All priority × type combinations, including deprecated types. */
+export const AllTypes: Story = {
   args: {
     className: 'm-r-2',
   },

package/src/circularButton/CircularButton.test.story.tsx

@@ -1,11 +1,19 @@
-import { Freeze } from '@transferwise/icons';
+import { Freeze, Plus, Send, Convert, Card } from '@transferwise/icons';
 
 import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { expect, fn, userEvent, within } from 'storybook/test';
 import CircularButton from './CircularButton';
 import Title from '../title';
 import Body from '../body';
 import { withVariantConfig } from '../../.storybook/helpers';
 
+import { allModes } from '../../.storybook/modes';
+
+const wait = async (ms: number) =>
+  new Promise<void>((resolve) => {
+    setTimeout(resolve, ms);
+  });
+
 export default {
   component: CircularButton,
   title: 'Actions/CircularButton/Tests',
@@ -14,6 +22,116 @@ export default {
 
 type Story = StoryObj<typeof CircularButton>;
 
+/** All priorities, types, and states across all themes. */
+export const Variants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '24px', padding: '16px' }}>
+      <CircularButton priority="primary" type="default" icon={<Send />}>
+        Send
+      </CircularButton>
+      <CircularButton priority="secondary" type="default" icon={<Plus />}>
+        Add funds
+      </CircularButton>
+      <CircularButton priority="primary" type="negative" icon={<Convert />}>
+        Convert
+      </CircularButton>
+      <CircularButton priority="primary" type="default" icon={<Card />} disabled>
+        Disabled
+      </CircularButton>
+    </div>
+  ),
+  parameters: {
+    variants: ['default', 'dark', 'bright-green', 'forest-green'],
+    chromatic: {
+      dark: allModes.dark,
+      brightGreen: allModes.brightGreen,
+      forestGreen: allModes.forestGreen,
+    },
+  },
+};
+
+/** CircularButton at 400% zoom — icon shrinks from 56px to 32px. */
+export const Zoom400: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '24px', padding: '16px' }}>
+      <CircularButton priority="primary" type="default" icon={<Send />}>
+        Send
+      </CircularButton>
+      <CircularButton priority="secondary" type="default" icon={<Plus />}>
+        Add funds
+      </CircularButton>
+    </div>
+  ),
+  ...withVariantConfig(['400%']),
+};
+
+/** Tab through all variants and activate each with Space. */
+export const KeyboardInteraction: Story = {
+  render: () => {
+    const onClick = fn();
+    return (
+      <div style={{ display: 'flex', gap: '24px', padding: '16px' }}>
+        <CircularButton priority="primary" type="default" icon={<Send />} onClick={onClick}>
+          Send
+        </CircularButton>
+        <CircularButton priority="secondary" type="default" icon={<Plus />} onClick={onClick}>
+          Add funds
+        </CircularButton>
+        <CircularButton priority="primary" type="negative" icon={<Convert />} onClick={onClick}>
+          Convert
+        </CircularButton>
+        <CircularButton
+          priority="primary"
+          type="default"
+          icon={<Card />}
+          disabled
+          onClick={onClick}
+        >
+          Disabled
+        </CircularButton>
+      </div>
+    );
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const buttons = canvas.getAllByRole('button');
+
+    await step('tab to Send and press Space', async () => {
+      await userEvent.tab();
+      await expect(buttons[0]).toHaveFocus();
+      await wait(400);
+      await userEvent.keyboard(' ');
+    });
+
+    await wait(400);
+
+    await step('tab to Add funds and press Space', async () => {
+      await userEvent.tab();
+      await expect(buttons[1]).toHaveFocus();
+      await wait(400);
+      await userEvent.keyboard(' ');
+    });
+
+    await wait(400);
+
+    await step('tab to Convert and press Space', async () => {
+      await userEvent.tab();
+      await expect(buttons[2]).toHaveFocus();
+      await wait(400);
+      await userEvent.keyboard(' ');
+    });
+
+    await wait(400);
+
+    await step('tab skips Disabled button', async () => {
+      await userEvent.tab();
+      // Disabled button should be skipped, focus leaves the component
+      await expect(buttons[3]).not.toHaveFocus();
+    });
+  },
+};
+
+/** Long labels are centered beneath the icon. */
 export const CenteredText: Story = {
   render: () => {
     return (

package/src/expressiveMoneyInput/ExpressiveMoneyInput.story.tsx

@@ -55,6 +55,7 @@ export default {
   tags: ['contribution'],
   parameters: {
     docs: {
+      toc: true,
       canvas: {
         sourceState: 'hidden',
       },

package/src/header/Header.story.tsx

@@ -63,6 +63,11 @@ const meta: Meta<typeof Header> = {
   },
   tags: ['autodocs'],
   decorators: [withContainer],
+  parameters: {
+    docs: {
+      toc: true,
+    },
+  },
 };
 
 export default meta;

package/src/iconButton/IconButton.story.tsx

@@ -18,9 +18,34 @@ import { action } from 'storybook/actions';
 import Body from '../body';
 import SentimentSurface from '../sentimentSurface';
 
+/**
+ * A circular icon-only button available in 7 sizes (16–72px), 4 priorities, and 3
+ * types (`default`, `negative`, `filled`). Requires an accessible name via
+ * `aria-label` since there is no visible text label.
+ *
+ * - **Primary**: most important action to move forward, acknowledge, or finish a task
+ * - **Secondary**: alternatives to the primary action
+ * - **Tertiary**: controls and views (e.g. back button, currency selection)
+ * - **Minimal**: dismissive or supplementary actions (dismiss, copy, tooltips)
+ *
+ * Only use icon buttons when the icon is recognisable without accompanying text.
+ * Sentiment-aware: automatically adjusts colours inside a
+ * [SentimentSurface](?path=/docs/foundations-sentimentsurface--docs).
+ *
+ * Keyboard: `Space` or `Enter` activates the button when focused.
+ *
+ * **Design guide**: [wise.design/components/icon-button](https://wise.design/components/icon-button)
+ */
 export default {
   title: 'Actions/IconButton',
   component: IconButton,
+  args: {
+    onClick: action('button click'),
+    'aria-label': 'Action',
+  },
+  parameters: {
+    docs: { toc: true },
+  },
 } satisfies Meta<typeof IconButton>;
 
 type Story = StoryObj<typeof IconButton>;
@@ -94,7 +119,26 @@ const Template = ({ size, disabled }: Props) => {
   );
 };
 
-export const Basic: Story = {
+/**
+ * Explore size, priority, type, and disabled state via the controls panel.
+ * Use `aria-label` to provide an accessible name.
+ */
+export const Playground: Story = {
+  args: {
+    size: 48,
+    priority: 'primary',
+    type: 'default',
+    disabled: false,
+  },
+  render: (args) => (
+    <IconButton {...args}>
+      <Plus />
+    </IconButton>
+  ),
+};
+
+/** All sizes, priorities, and types in a grid. */
+export const AllTypes: Story = {
   render: () => {
     return (
       <div

package/src/iconButton/IconButton.test.story.tsx

@@ -1,10 +1,17 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Menu, Plus, Settings, Star, Travel } from '@transferwise/icons';
 import { action } from 'storybook/actions';
+import { expect, userEvent, within } from 'storybook/test';
 import IconButton from './IconButton';
 import SentimentSurface from '../sentimentSurface';
+import { withVariantConfig } from '../../.storybook/helpers';
 import { allModes } from '../../.storybook/modes';
 
+const wait = async (ms: number) =>
+  new Promise<void>((resolve) => {
+    setTimeout(resolve, ms);
+  });
+
 export default {
   title: 'Actions/IconButton/Tests',
   component: IconButton,
@@ -16,11 +23,10 @@ type Story = StoryObj<typeof IconButton>;
 /**
  * IconButton displayed across all themes and sentiments for visual regression testing.
  */
-export const AllThemesAndSentiments: Story = {
+export const Variants: Story = {
   render: () => {
     const priorities = ['primary', 'secondary', 'tertiary', 'minimal', 'disabled'] as const;
     const sentiments = ['negative', 'warning', 'neutral', 'success', 'proposition'] as const;
-    const icons = [Plus, Settings, Star, Travel];
 
     return (
       <div style={{ display: 'flex', flexDirection: 'column' }}>
@@ -192,3 +198,158 @@ export const AllThemesAndSentiments: Story = {
     },
   },
 };
+
+/** IconButton at 400% zoom for accessibility testing. */
+export const Zoom400: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '8px', padding: '16px', flexWrap: 'wrap' }}>
+      <IconButton
+        size={40}
+        aria-label="Primary"
+        priority="primary"
+        type="default"
+        onClick={action('click')}
+      >
+        <Plus />
+      </IconButton>
+      <IconButton
+        size={40}
+        aria-label="Secondary"
+        priority="secondary"
+        type="default"
+        onClick={action('click')}
+      >
+        <Settings />
+      </IconButton>
+      <IconButton
+        size={40}
+        aria-label="Tertiary"
+        priority="tertiary"
+        type="default"
+        onClick={action('click')}
+      >
+        <Star />
+      </IconButton>
+      <IconButton
+        size={40}
+        aria-label="Minimal"
+        priority="minimal"
+        type="default"
+        onClick={action('click')}
+      >
+        <Travel />
+      </IconButton>
+      <IconButton
+        size={40}
+        aria-label="Disabled"
+        priority="primary"
+        type="default"
+        disabled
+        onClick={action('click')}
+      >
+        <Menu />
+      </IconButton>
+    </div>
+  ),
+  ...withVariantConfig(['400%']),
+};
+
+/** Tab through each priority variant and activate with Space. */
+export const KeyboardInteraction: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '12px', padding: '16px' }}>
+      <IconButton
+        size={48}
+        aria-label="Primary"
+        priority="primary"
+        type="default"
+        onClick={action('click')}
+      >
+        <Plus />
+      </IconButton>
+      <IconButton
+        size={48}
+        aria-label="Secondary"
+        priority="secondary"
+        type="default"
+        onClick={action('click')}
+      >
+        <Settings />
+      </IconButton>
+      <IconButton
+        size={48}
+        aria-label="Tertiary"
+        priority="tertiary"
+        type="default"
+        onClick={action('click')}
+      >
+        <Star />
+      </IconButton>
+      <IconButton
+        size={48}
+        aria-label="Minimal"
+        priority="minimal"
+        type="default"
+        onClick={action('click')}
+      >
+        <Travel />
+      </IconButton>
+      <IconButton
+        size={48}
+        aria-label="Disabled"
+        priority="primary"
+        type="default"
+        disabled
+        onClick={action('click')}
+      >
+        <Menu />
+      </IconButton>
+    </div>
+  ),
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const buttons = canvas.getAllByRole('button');
+
+    await step('tab to Primary and press Space', async () => {
+      await userEvent.tab();
+      await expect(buttons[0]).toHaveFocus();
+      await wait(400);
+      await userEvent.keyboard(' ');
+    });
+
+    await wait(400);
+
+    await step('tab to Secondary and press Space', async () => {
+      await userEvent.tab();
+      await expect(buttons[1]).toHaveFocus();
+      await wait(400);
+      await userEvent.keyboard(' ');
+    });
+
+    await wait(400);
+
+    await step('tab to Tertiary and press Space', async () => {
+      await userEvent.tab();
+      await expect(buttons[2]).toHaveFocus();
+      await wait(400);
+      await userEvent.keyboard(' ');
+    });
+
+    await wait(400);
+
+    await step('tab to Minimal and press Space', async () => {
+      await userEvent.tab();
+      await expect(buttons[3]).toHaveFocus();
+      await wait(400);
+      await userEvent.keyboard(' ');
+    });
+
+    await wait(400);
+
+    await step('tab skips Disabled button', async () => {
+      await userEvent.tab();
+      // Disabled button should be skipped
+      await expect(buttons[4]).not.toHaveFocus();
+    });
+  },
+};

package/src/inputs/SelectInput/_stories/SelectInput.story.tsx

@@ -36,6 +36,7 @@ const meta = {
     },
   },
   parameters: {
+    docs: { toc: true },
     actions: { argTypesRegex: '' },
   },
 } satisfies Meta<typeof SelectInput>;

package/src/listItem/AdditionalInfo/ListItemAdditionalInfo.story.tsx

@@ -19,7 +19,11 @@ import type { ListItemAdditionalInfoProps } from './ListItemAdditionalInfo';
 export default {
   component: ListItem.AdditionalInfo,
   title: 'Content/ListItem/ListItem.AdditionalInfo',
-
+  parameters: {
+    docs: {
+      toc: true,
+    },
+  },
   args: {
     children: lorem20,
   },

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

@@ -13,7 +13,11 @@ import type { 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',

package/src/listItem/AvatarView/ListItemAvatarView.story.tsx

@@ -54,7 +54,11 @@ const BADGES = {
 export default {
   component: ListItem.AvatarView,
   title: 'Content/ListItem/ListItem.AvatarView',
-
+  parameters: {
+    docs: {
+      toc: true,
+    },
+  },
   args: {
     size: 48,
     selected: false,

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

@@ -77,7 +77,11 @@ const getPropsForPreview = (args: PreviewStoryArgs) => {
 const meta: Meta<typeof ListItem.Button> = {
   component: ListItem.Button,
   title: 'Content/ListItem/ListItem.Button',
-
+  parameters: {
+    docs: {
+      toc: true,
+    },
+  },
   args: {
     partiallyInteractive: false,
     priority: 'secondary-neutral',

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

@@ -12,7 +12,11 @@ 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,