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

package/src/listItem/IconButton/ListItemIconButton.story.tsx

@@ -27,7 +27,11 @@ const hideControls = disableControls([
 const meta: Meta<ListItemIconButtonProps> = {
   component: ListItem.IconButton,
   title: 'Content/ListItem/ListItem.IconButton',
-
+  parameters: {
+    docs: {
+      toc: true,
+    },
+  },
   args: {
     partiallyInteractive: false,
     priority: undefined,

package/src/listItem/Image/ListItemImage.story.tsx

@@ -12,7 +12,11 @@ import type { ListItemImageProps } from './ListItemImage';
 export default {
   component: ListItem.Image,
   title: 'Content/ListItem/ListItem.Image',
-
+  parameters: {
+    docs: {
+      toc: true,
+    },
+  },
   args: {
     size: 48,
     loading: undefined,

package/src/listItem/Navigation/ListItemNavigation.story.tsx

@@ -13,7 +13,11 @@ import type { ListItemNavigationProps } from './ListItemNavigation';
 const meta: Meta<ListItemNavigationProps> = {
   component: ListItem.Navigation,
   title: 'Content/ListItem/ListItem.Navigation',
-
+  parameters: {
+    docs: {
+      toc: true,
+    },
+  },
   args: {
     href: 'https://wise.com',
     onClick: fn(),

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

@@ -16,7 +16,11 @@ import { Clock } from '@transferwise/icons';
 const meta: Meta<ListItemPromptProps> = {
   component: Prompt,
   title: 'Content/ListItem/ListItem.Prompt',
-
+  parameters: {
+    docs: {
+      toc: true,
+    },
+  },
   decorators: [withoutKey],
   args: {
     sentiment: undefined,

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

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

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

@@ -12,7 +12,11 @@ import type { ListItemSwitchProps } from './ListItemSwitch';
 const meta: Meta<ListItemSwitchProps> = {
   component: ListItem.Switch,
   title: 'Content/ListItem/ListItem.Switch',
-
+  parameters: {
+    docs: {
+      toc: true,
+    },
+  },
   args: {
     checked: false,
     onClick: fn(),

package/src/listItem/_stories/ListItem.disabled.story.tsx

@@ -62,6 +62,7 @@ export default {
       canvas: {
         sourceState: 'hidden',
       },
+      toc: true,
       page: () => (
         <>
           <Title>Disabled state</Title>

package/src/listItem/_stories/ListItem.scenarios.story.tsx

@@ -43,6 +43,7 @@ export default {
   },
   parameters: {
     docs: {
+      toc: true,
       page: () => (
         <>
           <Title>Common scenarios</Title>

package/src/listItem/_stories/ListItem.story.tsx

@@ -47,7 +47,11 @@ export default {
     'ListItem.Image': ListItem.Image,
   },
   title: 'Content/ListItem',
-
+  parameters: {
+    docs: {
+      toc: true,
+    },
+  },
   args: {
     title: 'List item title',
     subtitle: 'Subtitle goes here',

package/src/prompt/ActionPrompt/ActionPrompt.story.tsx

@@ -82,6 +82,11 @@ const meta: Meta<typeof ActionPrompt> = {
       },
     },
   },
+  parameters: {
+    docs: {
+      toc: true,
+    },
+  },
 };
 
 export default meta;

package/src/prompt/InfoPrompt/InfoPrompt.story.tsx

@@ -66,6 +66,11 @@ export default {
       },
     },
   },
+  parameters: {
+    docs: {
+      toc: true,
+    },
+  },
 } satisfies Meta<InfoPromptProps>;
 
 /**

package/src/prompt/InlinePrompt/InlinePrompt.story.tsx

@@ -53,6 +53,11 @@ export default {
       },
     },
   },
+  parameters: {
+    docs: {
+      toc: true,
+    },
+  },
 } satisfies Meta<InlinePromptProps>;
 
 /**

package/src/provider/theme/ThemeProvider.story.tsx

@@ -24,14 +24,6 @@ export default {
   component: ThemeProvider,
   title: 'Foundations/ThemeProvider',
   tags: ['!manifest'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Components require `ThemeProvider` from `@wise/components-theming` to be wrapped around your application for theming support. Available themes include: `personal`, `business`, `platform`, and variants with different color schemes.',
-      },
-    },
-  },
 } satisfies Meta<typeof ThemeProvider>;
 
 type Story = StoryObj<typeof ThemeProvider>;

package/src/sentimentSurface/SentimentSurface.story.tsx

@@ -102,6 +102,11 @@ const meta: Meta<typeof SentimentSurface> = {
     'data-testid': undefined,
     children: 'This is a sentiment surface',
   },
+  parameters: {
+    docs: {
+      toc: true,
+    },
+  },
 };
 
 export default meta;

package/src/switch/Switch.story.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { fn } from 'storybook/test';
 
 import Switch, { SwitchProps } from './Switch';
@@ -6,6 +6,17 @@ import { Field } from '../field/Field';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Label } from '../label';
 
+/**
+ * A toggle switch representing an on/off state. Semantically a `role="switch"` button.
+ *
+ * Always pair with an accessible label using `Field`, a `<label>` element, or
+ * `aria-labelledby`. The deprecated `aria-label` prop is supported but prefer an
+ * external label.
+ *
+ * Keyboard: `Space` toggles the switch when focused.
+ *
+ * **Design guide**: [wise.design/components/switch](https://wise.design/components/switch)
+ */
 const meta: Meta<typeof Switch> = {
   component: Switch,
   title: 'Actions/Switch',
@@ -18,41 +29,46 @@ const meta: Meta<typeof Switch> = {
     'aria-label': undefined,
     onClick: fn(),
   },
+  parameters: {
+    docs: { toc: true },
+  },
 } satisfies Meta<typeof Switch>;
 
 export default meta;
 type Story = StoryObj<typeof Switch>;
 
-export const Basic: Story = {
-  tags: ['!autodocs', '!dev'],
-};
-
+/** Interactive playground — toggle checked and disabled via controls. */
 export const Playground: Story = {
-  tags: ['!autodocs'],
+  render: function Render(args) {
+    const [checked, setChecked] = useState(args.checked ?? false);
+    return (
+      <Field id="playground-field" label="Switch label">
+        <Switch {...args} checked={checked} onClick={() => setChecked((v) => !v)} />
+      </Field>
+    );
+  },
   argTypes: {
     onClick: { table: { disable: true } },
+    checked: { control: false },
   },
 };
 
-export const Interactivity: Story = {
+/** Three labelling patterns: Field, Label, and aria-labelledby. */
+export const LabelPatterns: Story = {
   render: function Render({ disabled }: SwitchProps) {
-    const [checked1, setCheck1] = useState(false);
-    const [checked2, setCheck2] = useState(true);
-    const [checked3, setCheck3] = useState(false);
+    const [checked1, setCheck1] = useState(true);
+    const [checked2, setCheck2] = useState(false);
+    const [checked3, setCheck3] = useState(true);
 
     return (
       <>
-        <Field id="fieldId" label="Using Field component">
-          <Switch checked={checked1} disabled={disabled} onClick={() => setCheck1(!checked1)} />
-        </Field>
-
         <div>
           <Label htmlFor="labelId">Using Label component</Label>
           <Switch
             id="labelId"
-            checked={checked2}
+            checked={checked1}
             disabled={disabled}
-            onClick={() => setCheck2(!checked2)}
+            onClick={() => setCheck1(!checked1)}
           />
         </div>
 
@@ -62,11 +78,15 @@ export const Interactivity: Story = {
           </strong>
           <Switch
             aria-labelledby="ariaId"
-            checked={checked3}
+            checked={checked2}
             disabled={disabled}
-            onClick={() => setCheck3(!checked3)}
+            onClick={() => setCheck2(!checked2)}
           />
         </div>
+
+        <Field id="fieldId" label="Using Field component">
+          <Switch checked={checked3} disabled={disabled} onClick={() => setCheck3(!checked3)} />
+        </Field>
       </>
     );
   },
@@ -112,7 +132,7 @@ function Render() {
     },
   },
   decorators: [
-    (Story: any) => (
+    (Story: React.FC) => (
       <div className="d-flex flex-column" style={{ gap: '1rem' }}>
         <Story />
       </div>
@@ -126,17 +146,17 @@ function Render() {
 };
 
 export const Disabled: Story = {
-  render: function Render(args) {
+  render: function Render() {
     const [checked1, setCheck1] = useState(false);
     const [checked2, setCheck2] = useState(true);
 
     return (
       <>
-        <Field label="Switch label">
+        <Field label="Disabled (off)">
           <Switch checked={checked1} disabled onClick={() => setCheck1(!checked1)} />
         </Field>
 
-        <Field label="Switch label">
+        <Field label="Disabled (on)">
           <Switch checked={checked2} disabled onClick={() => setCheck2(!checked2)} />
         </Field>
       </>
@@ -152,14 +172,14 @@ function Render() {
 
   return (
     <>
-      <Field label="Switch label">
+      <Field label="Disabled (off)">
         <Switch
           checked={checked1}
           disabled
           onClick={() => setCheck1(!checked1)}
         />
-      </Fie 
-      <Field label="Switch label">
+      </Field>
+      <Field label="Disabled (on)">
         <Switch
           checked={checked2}
           disabled

package/src/switch/Switch.test.story.tsx

@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { expect, userEvent, within } from 'storybook/test';
+import { useState } from 'react';
+
+import { withVariantConfig } from '../../.storybook/helpers';
+import { allModes } from '../../.storybook/modes';
+import { Field } from '../field/Field';
+import Switch from './Switch';
+
+export default {
+  component: Switch,
+  title: 'Actions/Switch/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Switch>;
+
+type Story = StoryObj<typeof Switch>;
+
+/** All switch states across all themes. */
+export const Variants: Story = {
+  render: function Render() {
+    const [unchecked, setUnchecked] = useState(false);
+    const [checked, setChecked] = useState(true);
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', padding: '16px' }}>
+        <Field label="Unchecked">
+          <Switch checked={unchecked} onClick={() => setUnchecked((v) => !v)} />
+        </Field>
+        <Field label="Checked">
+          <Switch checked={checked} onClick={() => setChecked((v) => !v)} />
+        </Field>
+        <Field label="Disabled (off)">
+          <Switch checked={false} disabled onClick={() => {}} />
+        </Field>
+        <Field label="Disabled (on)">
+          <Switch checked disabled onClick={() => {}} />
+        </Field>
+      </div>
+    );
+  },
+  parameters: {
+    variants: ['default', 'dark', 'bright-green', 'forest-green'],
+    chromatic: {
+      dark: allModes.dark,
+      brightGreen: allModes.brightGreen,
+      forestGreen: allModes.forestGreen,
+    },
+  },
+};
+
+/** Switch at 400% zoom for accessibility testing. */
+export const Zoom400: Story = {
+  render: function Render() {
+    const [checked, setChecked] = useState(false);
+    return (
+      <Field label="Email notifications">
+        <Switch checked={checked} onClick={() => setChecked((v) => !v)} />
+      </Field>
+    );
+  },
+  ...withVariantConfig(['400%']),
+};
+
+/** Tab to the switch and use Space to toggle it. */
+export const KeyboardInteraction: Story = {
+  render: function Render() {
+    const [checked, setChecked] = useState(false);
+    return (
+      <Field id="notif-field" label="Email notifications">
+        <Switch checked={checked} onClick={() => setChecked((v) => !v)} />
+      </Field>
+    );
+  },
+  play: async ({ canvasElement, step }) => {
+    const wait = async (ms: number) =>
+      new Promise<void>((resolve) => {
+        setTimeout(resolve, ms);
+      });
+    const canvas = within(canvasElement);
+    const switchEl = canvas.getByRole('switch');
+
+    await step('tab focuses the switch', async () => {
+      await userEvent.tab();
+      await expect(switchEl).toHaveFocus();
+    });
+
+    await wait(400);
+
+    await step('space toggles the switch on', async () => {
+      await userEvent.keyboard(' ');
+      await expect(switchEl).toHaveAttribute('aria-checked', 'true');
+    });
+
+    await wait(400);
+
+    await step('space toggles the switch off', async () => {
+      await userEvent.keyboard(' ');
+      await expect(switchEl).toHaveAttribute('aria-checked', 'false');
+    });
+  },
+};

package/src/tokens/tokens.story.tsx

@@ -7,7 +7,7 @@ import IconButton from '../iconButton';
 import Body from '../body';
 
 const meta: Meta = {
-  title: 'Foundations/Tokens',
+  title: 'Foundations/tokens',
   tags: ['!autodocs', '!manifest'],
 };