@transferwise/components 0.0.0-experimental-4af964d → 0.0.0-experimental-04f7ce3

package/src/chips/Chips.story.tsx

@@ -1,112 +1,212 @@
-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';
 
-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,
+  title: 'Actions/Chips',
+  args: {
+    multiple: false,
+    onChange: fn(),
+  },
+  argTypes: {
+    'aria-label': {
+      description: 'Provides the accessible name for the chip group.',
+    },
+    chips: {
+      description: 'Array of chip objects, each with a label (string) and value (string or number)',
+    },
+    multiple: {
+      description:
+        'Switch between filter/multi-select (true) and choice/single-select (false) modes',
+    },
+    className: { description: '', table: { category: 'Common' } },
+    selected: { table: { disable: true } },
+  },
+  parameters: {
+    docs: { toc: true },
+  },
+} satisfies Meta<typeof Chips>;
+
+type Story = StoryObj<typeof Chips>;
+
+const categoryChips = [
+  { value: 'all', label: 'All' },
+  { value: 'accounting', label: 'Accounting' },
+  { value: 'payroll', label: 'Payroll' },
+  { value: 'reporting', label: 'Reporting' },
+  { value: 'payments', label: 'Payments' },
+];
+
+const amountChips = [
+  { value: 100, label: '100 GBP' },
+  { value: 200, label: '200 GBP' },
+  { value: 300, label: '300 GBP' },
+  { value: 500, label: '500 GBP+' },
+];
+
+/**
+ * Toggle `multiple` in the controls panel to switch between filter (multi-select)
+ * and choice (single-select) modes.
+ */
+export const Playground: Story = {
+  render: function Render({
+    onChange,
+    chips,
+    multiple,
+  }: Pick<ChipsProps, 'onChange' | 'chips' | 'multiple'>) {
+    const [selectedMulti, setSelectedMulti] = useState<readonly ChipValue[]>(['accounting']);
+    const [selectedSingle, setSelectedSingle] = useState<ChipValue>('accounting');
+
+    if (multiple) {
+      return (
+        <Chips
+          chips={chips}
+          multiple
+          selected={selectedMulti}
+          aria-label="Category filter"
+          onChange={({ selectedValue, isEnabled }) => {
+            setSelectedMulti((prev) =>
+              isEnabled ? [...prev, selectedValue] : prev.filter((v) => v !== selectedValue),
+            );
+            onChange({ selectedValue, isEnabled });
+          }}
+        />
+      );
+    }
+
+    return (
+      <Chips
+        chips={chips}
+        selected={selectedSingle}
+        aria-label="Category choice"
+        onChange={({ selectedValue, isEnabled }) => {
+          setSelectedSingle(selectedValue);
+          onChange({ selectedValue, isEnabled });
+        }}
+      />
+    );
+  },
+  args: {
+    chips: categoryChips,
+    multiple: true,
+  },
 };
-export default meta;
 
-type Story = StoryFn<ChipsProps>;
+/**
+ * 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 = {
+  render: function Render({ onChange, chips }: Pick<ChipsProps, 'onChange' | 'chips'>) {
+    const [selected, setSelected] = useState<readonly ChipValue[]>(['accounting', 'payments']);
+
+    return (
+      <Chips
+        chips={chips}
+        selected={selected}
+        multiple
+        aria-label="Category filter"
+        onChange={({ selectedValue, isEnabled }) => {
+          setSelected((prev) =>
+            isEnabled ? [...prev, selectedValue] : prev.filter((v) => v !== selectedValue),
+          );
+          onChange({ selectedValue, isEnabled });
+        }}
+      />
+    );
+  },
+  args: {
+    chips: categoryChips,
+  },
+  argTypes: {
+    multiple: { table: { disable: true } },
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `function FilterChips() {
+  const [selected, setSelected] = useState(['accounting', 'payments']);
 
-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}
+      chips={[
+        { value: 'all', label: 'All' },
+        { value: 'accounting', label: 'Accounting' },
+        { value: 'payroll', label: 'Payroll' },
+        { value: 'reporting', label: 'Reporting' },
+        { value: 'payments', label: 'Payments' },
+      ]}
       multiple
+      selected={selected}
+      aria-label="Category filter"
       onChange={({ selectedValue, isEnabled }) => {
-        if (isEnabled) {
-          setSelected([...selected, selectedValue]);
-        } else {
-          const updatedSelected = selected.filter((value) => selectedValue !== value);
-          setSelected(updatedSelected);
-        }
+        setSelected((prev) =>
+          isEnabled ? [...prev, selectedValue] : prev.filter((v) => v !== selectedValue)
+        );
       }}
     />
   );
+}`,
+      },
+    },
+  },
 };
 
-const ChoiceTemplate: Story = (args: ChipsProps) => {
-  const [selected, setSelected] = useState<ChipValue>(args.selected as ChipValue);
+/**
+ * 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 = {
+  render: function Render({ onChange, chips }: Pick<ChipsProps, 'onChange' | 'chips'>) {
+    const [selected, setSelected] = useState<ChipValue>(300);
+
+    return (
+      <Chips
+        chips={chips}
+        selected={selected}
+        aria-label="Transfer amount"
+        onChange={({ selectedValue, isEnabled }) => {
+          setSelected(selectedValue);
+          onChange({ selectedValue, isEnabled });
+        }}
+      />
+    );
+  },
+  args: {
+    chips: amountChips,
+  },
+  argTypes: {
+    multiple: { table: { disable: true } },
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `function ChoiceChips() {
+  const [selected, setSelected] = useState(300);
+
   return (
     <Chips
-      {...args}
+      chips={[
+        { value: 100, label: '100 GBP' },
+        { value: 200, label: '200 GBP' },
+        { value: 300, label: '300 GBP' },
+        { value: 500, label: '500 GBP+' },
+      ]}
       selected={selected}
+      aria-label="Transfer amount"
       onChange={({ selectedValue }) => setSelected(selectedValue)}
     />
   );
-};
-
-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',
-    },
-  ],
-};
-
-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'],
-};
-
-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,
+  },
 };

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