@transferwise/components 46.133.0 → 46.134.0

package/src/checkboxButton/CheckboxButton.test.story.tsx

@@ -0,0 +1,236 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { expect, userEvent, within } from 'storybook/test';
+
+import { withVariantConfig } from '../../.storybook/helpers';
+import CheckboxButton from './CheckboxButton';
+
+export default {
+  component: CheckboxButton,
+  title: 'Actions/CheckboxButton/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof CheckboxButton>;
+
+type Story = StoryObj<typeof CheckboxButton>;
+
+/** All checkbox states across all themes. */
+export const Variants: Story = {
+  render: function Render() {
+    const [unchecked, setUnchecked] = useState(false);
+    const [checked, setChecked] = useState(true);
+    const [indeterminate, setIndeterminate] = useState(false);
+    return (
+      <div style={{ display: 'flex', gap: '16px', alignItems: 'center', padding: '16px' }}>
+        <CheckboxButton
+          aria-label="Unchecked"
+          checked={unchecked}
+          onChange={() => setUnchecked((v) => !v)}
+        />
+        <CheckboxButton
+          aria-label="Checked"
+          checked={checked}
+          onChange={() => setChecked((v) => !v)}
+        />
+        <CheckboxButton
+          aria-label="Indeterminate"
+          checked={indeterminate}
+          indeterminate
+          onChange={() => setIndeterminate((v) => !v)}
+        />
+        <CheckboxButton
+          aria-label="Disabled unchecked"
+          checked={false}
+          disabled
+          onChange={() => {}}
+        />
+        <CheckboxButton aria-label="Disabled checked" checked disabled onChange={() => {}} />
+      </div>
+    );
+  },
+  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green']),
+};
+
+/**
+ * `Space` toggles when focused (requires `onChange`). Tab skips disabled checkboxes.
+ * Indeterminate resolves to checked on first `Space`, then toggles normally.
+ */
+export const KeyboardInteraction: Story = {
+  render: function Render() {
+    const [unchecked, setUnchecked] = useState(false);
+    const [checked, setChecked] = useState(true);
+    const [indeterminate, setIndeterminate] = useState(false);
+    const [disabledUnchecked] = useState(false);
+    const [disabledChecked] = useState(true);
+
+    const row: React.CSSProperties = {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '8px',
+    };
+
+    const label: React.CSSProperties = {
+      fontSize: '14px',
+      color: '#4a5568',
+      width: '140px',
+    };
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+        <div style={row}>
+          <CheckboxButton
+            aria-label="Unchecked"
+            checked={unchecked}
+            onChange={() => setUnchecked((v: boolean) => !v)}
+          />
+          <span style={label}>Unchecked</span>
+        </div>
+        <div style={row}>
+          <CheckboxButton
+            aria-label="Checked"
+            checked={checked}
+            onChange={() => setChecked((v: boolean) => !v)}
+          />
+          <span style={label}>Checked</span>
+        </div>
+        <div style={row}>
+          <CheckboxButton
+            aria-label="Indeterminate"
+            checked={indeterminate}
+            indeterminate
+            onChange={() => setIndeterminate((v: boolean) => !v)}
+          />
+          <span style={label}>Indeterminate</span>
+        </div>
+        <div style={row}>
+          <CheckboxButton
+            aria-label="Disabled unchecked"
+            checked={disabledUnchecked}
+            disabled
+            onChange={() => {}}
+          />
+          <span style={label}>Disabled unchecked</span>
+        </div>
+        <div style={row}>
+          <CheckboxButton
+            aria-label="Disabled checked"
+            checked={disabledChecked}
+            disabled
+            onChange={() => {}}
+          />
+          <span style={label}>Disabled checked</span>
+        </div>
+      </div>
+    );
+  },
+  play: async ({ canvasElement, step }) => {
+    const wait = async (ms: number) =>
+      new Promise<void>((resolve) => {
+        setTimeout(resolve, ms);
+      });
+    const canvas = within(canvasElement);
+
+    await step('tab to Unchecked and toggle on then off', async () => {
+      await userEvent.tab();
+      const cb = canvas.getByRole('checkbox', { name: /^unchecked$/i });
+      await expect(cb).toHaveFocus();
+      await wait(400);
+      await userEvent.keyboard(' ');
+      await expect(cb).toBeChecked();
+      await wait(400);
+      await userEvent.keyboard(' ');
+      await expect(cb).not.toBeChecked();
+    });
+
+    await wait(400);
+
+    await step('tab to Checked and toggle off then on', async () => {
+      await userEvent.tab();
+      const cb = canvas.getByRole('checkbox', { name: /^checked$/i });
+      await expect(cb).toHaveFocus();
+      await wait(400);
+      await userEvent.keyboard(' ');
+      await expect(cb).not.toBeChecked();
+      await wait(400);
+      await userEvent.keyboard(' ');
+      await expect(cb).toBeChecked();
+    });
+
+    await wait(400);
+
+    await step('tab to Indeterminate and toggle on then off', async () => {
+      await userEvent.tab();
+      const cb = canvas.getByRole('checkbox', { name: /^indeterminate$/i });
+      await expect(cb).toHaveFocus();
+      await wait(400);
+      await userEvent.keyboard(' ');
+      await expect(cb).toBeChecked();
+      await wait(400);
+      await userEvent.keyboard(' ');
+      await expect(cb).not.toBeChecked();
+    });
+
+    await wait(400);
+
+    await step('tab skips both disabled checkboxes — focus leaves the component', async () => {
+      await userEvent.tab();
+      const disabledUnchecked = canvas.getByRole('checkbox', { name: /disabled unchecked/i });
+      const disabledChecked = canvas.getByRole('checkbox', { name: /disabled checked/i });
+      await expect(disabledUnchecked).not.toHaveFocus();
+      await expect(disabledChecked).not.toHaveFocus();
+    });
+  },
+};
+
+/** Base checkbox states in right-to-left layout. */
+export const RTL: Story = {
+  render: function Render() {
+    const [unchecked, setUnchecked] = useState(false);
+    const [checked, setChecked] = useState(true);
+    const [indeterminate, setIndeterminate] = useState(false);
+    return (
+      <div style={{ display: 'flex', gap: '16px', alignItems: 'center', padding: '16px' }}>
+        <CheckboxButton
+          aria-label="Unchecked"
+          checked={unchecked}
+          onChange={() => setUnchecked((v) => !v)}
+        />
+        <CheckboxButton
+          aria-label="Checked"
+          checked={checked}
+          onChange={() => setChecked((v) => !v)}
+        />
+        <CheckboxButton
+          aria-label="Indeterminate"
+          checked={indeterminate}
+          indeterminate
+          onChange={() => setIndeterminate((v) => !v)}
+        />
+        <CheckboxButton
+          aria-label="Disabled unchecked"
+          checked={false}
+          disabled
+          onChange={() => {}}
+        />
+        <CheckboxButton aria-label="Disabled checked" checked disabled onChange={() => {}} />
+      </div>
+    );
+  },
+  ...withVariantConfig(['rtl']),
+};
+
+/** Checkbox states at 400% zoom for accessibility testing. */
+export const Zoom400: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '16px', alignItems: 'center', padding: '16px' }}>
+      <CheckboxButton aria-label="Unchecked" checked={false} onChange={() => {}} />
+      <CheckboxButton aria-label="Checked" checked onChange={() => {}} />
+      <CheckboxButton
+        aria-label="Indeterminate"
+        checked={false}
+        indeterminate
+        onChange={() => {}}
+      />
+    </div>
+  ),
+  ...withVariantConfig(['400%']),
+};

package/src/chips/Chips.story.tsx

@@ -1,112 +1,151 @@
-import { StoryFn, Meta } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
 import { useState } from 'react';
 
-import Chips, { ChipsProps, ChipValue } from './Chips';
+import Chips, { type ChipValue, type ChipsProps } from './Chips';
+import { storySourceWithoutNoise } from '../../.storybook/helpers';
 
-const meta: Meta<typeof Chips> = {
-  title: 'Actions/Chips',
+/**
+ * Can be used for making a <a href="?path=/story/actions-chips--choice">choice</a>, or as a <a href="?path=/story/actions-chips--filter">filter</a> with multiple options.
+ *
+ * **Design guidance**: <a href="https://wise.design/components/chip" target="_blank">wise.design/components/chip</a>
+ */
+export default {
   component: Chips,
-};
-export default meta;
+  title: 'Actions/Chips',
+  args: {
+    multiple: false,
+    onChange: fn(),
+    'aria-label': 'Category filter',
+  },
+  argTypes: {
+    'aria-label': {
+      control: 'text',
+      description: 'Provides the accessible name for the chip group.',
+    },
+    className: { table: { category: 'Common' } },
+  },
+  parameters: {
+    docs: { toc: true },
+  },
+} satisfies Meta<typeof Chips>;
 
-type Story = StoryFn<ChipsProps>;
+type Story = StoryObj<typeof Chips>;
 
-const FilterTemplate: Story = (args: ChipsProps) => {
-  const [selected, setSelected] = useState<readonly ChipValue[]>(
-    args.selected == null || Array.isArray(args.selected) ? args.selected : [args.selected],
-  );
-  return (
-    <Chips
-      {...args}
-      selected={selected}
-      multiple
-      onChange={({ selectedValue, isEnabled }) => {
-        if (isEnabled) {
-          setSelected([...selected, selectedValue]);
-        } else {
-          const updatedSelected = selected.filter((value) => selectedValue !== value);
-          setSelected(updatedSelected);
-        }
-      }}
-    />
-  );
-};
+const categoryChips = [
+  { value: 'all', label: 'All' },
+  { value: 'accounting', label: 'Accounting' },
+  { value: 'payroll', label: 'Payroll' },
+  { value: 'reporting', label: 'Reporting' },
+  { value: 'payments', label: 'Payments' },
+];
 
-const ChoiceTemplate: Story = (args: ChipsProps) => {
-  const [selected, setSelected] = useState<ChipValue>(args.selected as ChipValue);
-  return (
-    <Chips
-      {...args}
-      selected={selected}
-      onChange={({ selectedValue }) => setSelected(selectedValue)}
-    />
-  );
-};
+const amountChips = [
+  { value: 100, label: '100 GBP' },
+  { value: 200, label: '200 GBP' },
+  { value: 300, label: '300 GBP' },
+  { value: 500, label: '500 GBP+' },
+];
 
-export const FilterChips: typeof FilterTemplate = FilterTemplate.bind({});
-FilterChips.args = {
-  chips: [
-    {
-      value: 'accounting',
-      label: 'Accounting',
-    },
-    {
-      value: 'payroll',
-      label: 'Payroll',
-    },
-    {
-      value: 'reporting',
-      label: 'Reporting',
-    },
-    {
-      value: 'payments',
-      label: 'Payments',
-    },
-  ],
-};
+/**
+ * Toggle `multiple` in the controls panel to switch between filter (multi-select)
+ * and choice (single-select) modes.
+ */
+export const Playground: Story = storySourceWithoutNoise<typeof Chips>({
+  args: {
+    chips: categoryChips,
+    multiple: true,
+  },
+  render: function Render(args: ChipsProps) {
+    const [selectedMulti, setSelectedMulti] = useState<readonly ChipValue[]>(['accounting']);
+    const [selectedSingle, setSelectedSingle] = useState<ChipValue>('accounting');
 
-export const PreSelectedFilterChips: typeof FilterTemplate = FilterTemplate.bind({});
-PreSelectedFilterChips.args = {
-  chips: [
-    {
-      value: 'accounting',
-      label: 'Accounting',
-    },
-    {
-      value: 'payroll',
-      label: 'Payroll',
-    },
-    {
-      value: 'reporting',
-      label: 'Reporting',
-    },
-    {
-      value: 'payments',
-      label: 'Payments',
-    },
-  ],
-  selected: ['accounting', 'payments'],
-};
+    if (args.multiple) {
+      return (
+        <Chips
+          chips={args.chips}
+          multiple
+          selected={selectedMulti}
+          aria-label={args['aria-label']}
+          onChange={({ selectedValue, isEnabled }) => {
+            setSelectedMulti((prev) =>
+              isEnabled ? [...prev, selectedValue] : prev.filter((v) => v !== selectedValue),
+            );
+            args.onChange({ selectedValue, isEnabled });
+          }}
+        />
+      );
+    }
 
-export const ChoiceChips: typeof ChoiceTemplate = ChoiceTemplate.bind({});
-ChoiceChips.args = {
-  chips: [
-    {
-      value: 1,
-      label: '100 GBP',
-    },
-    {
-      value: 2,
-      label: '200 GBP',
-    },
-    {
-      value: 3,
-      label: '300 GBP',
-    },
-    {
-      value: 4,
-      label: '400 GBP+',
-    },
-  ],
-  selected: 3,
-};
+    return (
+      <Chips
+        chips={args.chips}
+        selected={selectedSingle}
+        aria-label={args['aria-label']}
+        onChange={({ selectedValue, isEnabled }) => {
+          setSelectedSingle(selectedValue);
+          args.onChange({ selectedValue, isEnabled });
+        }}
+      />
+    );
+  },
+});
+
+/**
+ * The user can select any number of chips with the selected prop as an array (`multiple` prop set to `true`). <br />
+ * <a href="https://wise.design/components/chip#filter-chips" target="_blank">Design documentation</a>
+ */
+export const Filter: Story = storySourceWithoutNoise<typeof Chips>({
+  args: {
+    chips: categoryChips,
+  },
+  argTypes: {
+    multiple: { table: { disable: true } },
+  },
+  render: function Render(args: ChipsProps) {
+    const [selected, setSelected] = useState<readonly ChipValue[]>(['accounting', 'payments']);
+
+    return (
+      <Chips
+        chips={args.chips}
+        selected={selected}
+        multiple
+        aria-label="Category filter"
+        onChange={({ selectedValue, isEnabled }) => {
+          setSelected((prev) =>
+            isEnabled ? [...prev, selectedValue] : prev.filter((v) => v !== selectedValue),
+          );
+          args.onChange({ selectedValue, isEnabled });
+        }}
+      />
+    );
+  },
+});
+
+/**
+ * The user can only select one chip with the selected prop as a single value (`multiple` prop set to `false`). <br />
+ * <a href="https://wise.design/components/chip#choice-chips" target="_blank">Design documentation</a>
+ */
+export const Choice: Story = storySourceWithoutNoise<typeof Chips>({
+  args: {
+    chips: amountChips,
+  },
+  argTypes: {
+    multiple: { table: { disable: true } },
+  },
+  render: function Render(args: ChipsProps) {
+    const [selected, setSelected] = useState<ChipValue>(300);
+
+    return (
+      <Chips
+        chips={args.chips}
+        selected={selected}
+        aria-label="Transfer amount"
+        onChange={({ selectedValue, isEnabled }) => {
+          setSelected(selectedValue);
+          args.onChange({ selectedValue, isEnabled });
+        }}
+      />
+    );
+  },
+});

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

@@ -0,0 +1,177 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent } from 'storybook/test';
+import { useState } from 'react';
+
+import { withVariantConfig } from '../../.storybook/helpers';
+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>
+    );
+  },
+  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green']),
+};
+
+/**
+ * Tab moves between chips. Enter or Space toggles selection.
+ */
+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 moves between chips. Enter or Space toggles selection.
+ */
+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}');
+  },
+};
+
+/** Filter and choice chips in right-to-left layout. */
+export const RTL: 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>
+    );
+  },
+  ...withVariantConfig(['rtl']),
+};
+
+/** 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%']),
+};

package/src/chips/Chips.tsx

@@ -27,7 +27,7 @@ export type ChipsProps = CommonProps &
     }) => void;
     /** Used to manage which chips are selected */
     selected: ChipValue | readonly ChipValue[];
-    /** Used to activate multi-selection */
+    /** True turns on Filter-mode, False is Choice */
     multiple?: boolean;
   };