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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-ffbd2fc",
+  "version": "0.0.0-experimental-d211fa1",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/checkboxButton/CheckboxButton.story.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { action } from 'storybook/actions';
+import { fn } from 'storybook/test';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import CheckboxButton from './CheckboxButton';
@@ -24,9 +24,9 @@ export default {
 
   args: {
     disabled: false,
-    onBlur: action('blur'),
-    onClick: action('click'),
-    onFocus: action('focus'),
+    onBlur: fn(),
+    onClick: fn(),
+    onFocus: fn(),
   },
   parameters: {
     docs: { toc: true },

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

@@ -3,7 +3,6 @@ import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { expect, userEvent, within } from 'storybook/test';
 
 import { withVariantConfig } from '../../.storybook/helpers';
-import { allModes } from '../../.storybook/modes';
 import CheckboxButton from './CheckboxButton';
 
 export default {
@@ -35,31 +34,7 @@ export const Variants: Story = {
       <CheckboxButton aria-label="Disabled checked" checked disabled onChange={() => {}} />
     </div>
   ),
-  parameters: {
-    variants: ['default', 'dark', 'bright-green', 'forest-green'],
-    chromatic: {
-      dark: allModes.dark,
-      brightGreen: allModes.brightGreen,
-      forestGreen: allModes.forestGreen,
-    },
-  },
-};
-
-/** 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%']),
+  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green']),
 };
 
 /** Tab through all checkbox variants and toggle each on and off. */
@@ -189,3 +164,20 @@ export const KeyboardInteraction: Story = {
     });
   },
 };
+
+/** 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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
 import { useState } from 'react';
 
-import Chips, { type ChipValue } from './Chips';
+import Chips, { type ChipValue, type ChipsProps } from './Chips';
 
 /**
  * Chips allow users to filter content or make a choice from a set of options
@@ -24,6 +24,7 @@ export default {
   component: Chips,
   title: 'Actions/Chips',
   args: {
+    multiple: false,
     onChange: fn(),
   },
   argTypes: {
@@ -56,7 +57,11 @@ const amountChips = [
  * and choice (single-select) modes.
  */
 export const Playground: Story = {
-  render: function Render({ onChange, chips, multiple }) {
+  render: function Render({
+    onChange,
+    chips,
+    multiple,
+  }: Pick<ChipsProps, 'onChange' | 'chips' | 'multiple'>) {
     const [selectedMulti, setSelectedMulti] = useState<readonly ChipValue[]>(['accounting']);
     const [selectedSingle, setSelectedSingle] = useState<ChipValue>('accounting');
 
@@ -100,12 +105,12 @@ export const Playground: Story = {
  * results by one or more categories — e.g. an app marketplace or payment list.
  */
 export const Filter: Story = {
-  render: function Render({ onChange, ...args }) {
+  render: function Render({ onChange, chips }: Pick<ChipsProps, 'onChange' | 'chips'>) {
     const [selected, setSelected] = useState<readonly ChipValue[]>(['accounting', 'payments']);
 
     return (
       <Chips
-        {...args}
+        chips={chips}
         selected={selected}
         multiple
         aria-label="Category filter"
@@ -121,6 +126,9 @@ export const Filter: Story = {
   args: {
     chips: categoryChips,
   },
+  argTypes: {
+    multiple: { table: { disable: true } },
+  },
   parameters: {
     docs: {
       source: {
@@ -157,12 +165,12 @@ export const Filter: Story = {
  * Useful for selecting a single value from a small set, such as a transfer amount.
  */
 export const Choice: Story = {
-  render: function Render({ onChange, ...args }) {
+  render: function Render({ onChange, chips }: Pick<ChipsProps, 'onChange' | 'chips'>) {
     const [selected, setSelected] = useState<ChipValue>(300);
 
     return (
       <Chips
-        {...args}
+        chips={chips}
         selected={selected}
         aria-label="Transfer amount"
         onChange={({ selectedValue, isEnabled }) => {
@@ -175,6 +183,9 @@ export const Choice: Story = {
   args: {
     chips: amountChips,
   },
+  argTypes: {
+    multiple: { table: { disable: true } },
+  },
   parameters: {
     docs: {
       source: {

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

@@ -3,7 +3,6 @@ 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 {
@@ -64,35 +63,7 @@ export const Variants: Story = {
       </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%']),
+  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green']),
 };
 
 /** Tab through choice chips and select one with Enter. */
@@ -145,3 +116,24 @@ export const FilterKeyboardInteraction: Story = {
     await userEvent.keyboard('{Enter}');
   },
 };
+
+/** 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/circularButton/CircularButton.story.tsx

@@ -1,9 +1,9 @@
 import * as Icons from '@transferwise/icons';
 
 import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
 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
@@ -28,6 +28,7 @@ export default {
   args: {
     children: 'Button text',
     icon: <Icons.Freeze />,
+    onClick: fn(),
   },
   argTypes: {
     icon: {
@@ -55,51 +56,88 @@ export const Playground: Story = {
 
 /** All priority × type combinations, including deprecated types. */
 export const AllTypes: Story = {
-  args: {
-    className: 'm-r-2',
-  },
-  render: (props) => {
+  render: () => {
+    const gridStyle = {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(4, minmax(0, 100px))',
+      gap: '16px',
+      textAlign: 'center' as const,
+    };
+    const icon = <Icons.Freeze />;
+
     return (
       <>
         <Title type="title-subsection" className="m-y-2">
           Default (Primary and secondary)
         </Title>
-        <Body>
-          <CircularButton {...props} priority="primary" type="default" />
-          <CircularButton {...props} priority="secondary" type="default" />
-          <CircularButton {...props} priority="primary" type="default" disabled />
-          <CircularButton {...props} priority="secondary" type="default" disabled />
-        </Body>
+        <div style={gridStyle}>
+          <CircularButton icon={icon} priority="primary" type="default">
+            Primary
+          </CircularButton>
+          <CircularButton icon={icon} priority="secondary" type="default">
+            Secondary
+          </CircularButton>
+          <CircularButton disabled icon={icon} priority="primary" type="default">
+            Primary disabled
+          </CircularButton>
+          <CircularButton disabled icon={icon} priority="secondary" type="default">
+            Secondary disabled
+          </CircularButton>
+        </div>
 
         <Title type="title-subsection" className="m-y-2">
           Negative (Primary and secondary)
         </Title>
-        <Body>
-          <CircularButton {...props} priority="primary" type="negative" />
-          <CircularButton {...props} priority="secondary" type="negative" />
-          <CircularButton {...props} priority="primary" type="negative" disabled />
-          <CircularButton {...props} priority="secondary" type="negative" disabled />
-        </Body>
+        <div style={gridStyle}>
+          <CircularButton icon={icon} priority="primary" type="negative">
+            Primary
+          </CircularButton>
+          <CircularButton icon={icon} priority="secondary" type="negative">
+            Secondary
+          </CircularButton>
+          <CircularButton disabled icon={icon} priority="primary" type="negative">
+            Primary disabled
+          </CircularButton>
+          <CircularButton disabled icon={icon} priority="secondary" type="negative">
+            Secondary disabled
+          </CircularButton>
+        </div>
 
         <Title type="title-body" className="m-y-2">
           Accent (Deprecated)
         </Title>
-        <Body>
-          <CircularButton {...props} priority="primary" type="accent" />
-          <CircularButton {...props} priority="secondary" type="accent" />
-          <CircularButton {...props} priority="primary" type="accent" disabled />
-          <CircularButton {...props} priority="secondary" type="accent" disabled />
-        </Body>
+        <div style={gridStyle}>
+          <CircularButton icon={icon} priority="primary" type="accent">
+            Primary
+          </CircularButton>
+          <CircularButton icon={icon} priority="secondary" type="accent">
+            Secondary
+          </CircularButton>
+          <CircularButton disabled icon={icon} priority="primary" type="accent">
+            Primary disabled
+          </CircularButton>
+          <CircularButton disabled icon={icon} priority="secondary" type="accent">
+            Secondary disabled
+          </CircularButton>
+        </div>
 
         <Title type="title-body" className="m-y-2">
           Positive (Deprecated)
         </Title>
-        <Body>
-          <CircularButton {...props} priority="primary" type="positive" />
-          <CircularButton {...props} priority="secondary" type="positive" />
-          <CircularButton {...props} priority="primary" type="positive" disabled />
-          <CircularButton {...props} priority="secondary" type="positive" disabled />
-        </Body>
+        <div style={gridStyle}>
+          <CircularButton icon={icon} priority="primary" type="positive">
+            Primary
+          </CircularButton>
+          <CircularButton icon={icon} priority="secondary" type="positive">
+            Secondary
+          </CircularButton>
+          <CircularButton disabled icon={icon} priority="primary" type="positive">
+            Primary disabled
+          </CircularButton>
+          <CircularButton disabled icon={icon} priority="secondary" type="positive">
+            Secondary disabled
+          </CircularButton>
+        </div>
       </>
     );
   },

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

@@ -7,8 +7,6 @@ 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);
@@ -24,45 +22,48 @@ 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,
-    },
-  },
-};
+  render: () => {
+    const rowStyle = {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(4, minmax(0, 100px))',
+      gap: '16px',
+      textAlign: 'center' as const,
+    };
 
-/** 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%']),
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', padding: '16px' }}>
+        <div style={rowStyle}>
+          <CircularButton priority="primary" type="default" icon={<Send />}>
+            Primary
+          </CircularButton>
+          <CircularButton priority="secondary" type="default" icon={<Plus />}>
+            Secondary
+          </CircularButton>
+          <CircularButton disabled priority="primary" type="default" icon={<Card />}>
+            Primary disabled
+          </CircularButton>
+          <CircularButton disabled priority="secondary" type="default" icon={<Card />}>
+            Secondary disabled
+          </CircularButton>
+        </div>
+        <div style={rowStyle}>
+          <CircularButton priority="primary" type="negative" icon={<Send />}>
+            Primary
+          </CircularButton>
+          <CircularButton priority="secondary" type="negative" icon={<Convert />}>
+            Secondary
+          </CircularButton>
+          <CircularButton disabled priority="primary" type="negative" icon={<Card />}>
+            Primary disabled
+          </CircularButton>
+          <CircularButton disabled priority="secondary" type="negative" icon={<Card />}>
+            Secondary disabled
+          </CircularButton>
+        </div>
+      </div>
+    );
+  },
+  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green']),
 };
 
 /** Tab through all variants and activate each with Space. */

package/src/iconButton/IconButton.story.tsx

@@ -13,8 +13,8 @@ import {
   Bank,
   Freeze,
 } from '@transferwise/icons';
+import { fn } from 'storybook/test';
 import IconButton, { Props } from './IconButton';
-import { action } from 'storybook/actions';
 import Body from '../body';
 import SentimentSurface from '../sentimentSurface';
 
@@ -40,7 +40,7 @@ export default {
   title: 'Actions/IconButton',
   component: IconButton,
   args: {
-    onClick: action('button click'),
+    onClick: fn(),
     'aria-label': 'Action',
   },
   parameters: {
@@ -61,7 +61,7 @@ const Template = ({ size, disabled }: Props) => {
         aria-label="One step back"
         priority="primary"
         type="default"
-        onClick={action('button click')}
+        onClick={fn()}
       >
         <Plus />
       </IconButton>
@@ -71,7 +71,7 @@ const Template = ({ size, disabled }: Props) => {
         aria-label="One step back"
         priority="secondary"
         type="default"
-        onClick={action('button click')}
+        onClick={fn()}
       >
         <Defrost />
       </IconButton>
@@ -81,7 +81,7 @@ const Template = ({ size, disabled }: Props) => {
         aria-label="One step back"
         priority="tertiary"
         type="default"
-        onClick={action('button click')}
+        onClick={fn()}
       >
         <ArrowLeft />
       </IconButton>
@@ -91,7 +91,7 @@ const Template = ({ size, disabled }: Props) => {
         aria-label="One step back"
         priority="minimal"
         type="default"
-        onClick={action('button click')}
+        onClick={fn()}
       >
         <Menu />
       </IconButton>
@@ -101,7 +101,7 @@ const Template = ({ size, disabled }: Props) => {
         aria-label="One step back"
         priority="primary"
         type="negative"
-        onClick={action('button click')}
+        onClick={fn()}
       >
         <Cross />
       </IconButton>
@@ -111,7 +111,7 @@ const Template = ({ size, disabled }: Props) => {
         aria-label="One step back"
         priority="secondary"
         type="negative"
-        onClick={action('button click')}
+        onClick={fn()}
       >
         <Edit />
       </IconButton>
@@ -224,7 +224,7 @@ export const SentimentAwareness: Story = {
               aria-label="Primary action"
               priority="primary"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Plus />
             </IconButton>
@@ -233,7 +233,7 @@ export const SentimentAwareness: Story = {
               aria-label="Secondary action"
               priority="secondary"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Settings />
             </IconButton>
@@ -242,7 +242,7 @@ export const SentimentAwareness: Story = {
               aria-label="Tertiary action"
               priority="tertiary"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Star />
             </IconButton>
@@ -251,7 +251,7 @@ export const SentimentAwareness: Story = {
               aria-label="Minimal action"
               priority="minimal"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Travel />
             </IconButton>
@@ -261,7 +261,7 @@ export const SentimentAwareness: Story = {
               priority="primary"
               type="default"
               disabled
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Menu />
             </IconButton>
@@ -288,7 +288,7 @@ export const SentimentAwareness: Story = {
               aria-label="Primary action"
               priority="primary"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Briefcase />
             </IconButton>
@@ -297,7 +297,7 @@ export const SentimentAwareness: Story = {
               aria-label="Secondary action"
               priority="secondary"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Bank />
             </IconButton>
@@ -306,7 +306,7 @@ export const SentimentAwareness: Story = {
               aria-label="Tertiary action"
               priority="tertiary"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Freeze />
             </IconButton>
@@ -315,7 +315,7 @@ export const SentimentAwareness: Story = {
               aria-label="Minimal action"
               priority="minimal"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Edit />
             </IconButton>
@@ -325,7 +325,7 @@ export const SentimentAwareness: Story = {
               priority="primary"
               type="default"
               disabled
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Cross />
             </IconButton>
@@ -336,10 +336,7 @@ export const SentimentAwareness: Story = {
   },
   parameters: {
     docs: {
-      source: { type: 'dynamic' },
-      canvas: {
-        sourceState: 'hidden',
-      },
+      canvas: { sourceState: 'hidden' },
     },
   },
 };

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

@@ -1,11 +1,9 @@
 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 { expect, fn, 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) => {
@@ -78,7 +76,7 @@ export const Variants: Story = {
               aria-label="Primary action"
               priority="primary"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Plus />
             </IconButton>
@@ -87,7 +85,7 @@ export const Variants: Story = {
               aria-label="Secondary action"
               priority="secondary"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Settings />
             </IconButton>
@@ -96,7 +94,7 @@ export const Variants: Story = {
               aria-label="Tertiary action"
               priority="tertiary"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Star />
             </IconButton>
@@ -105,7 +103,7 @@ export const Variants: Story = {
               aria-label="Minimal action"
               priority="minimal"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Travel />
             </IconButton>
@@ -115,7 +113,7 @@ export const Variants: Story = {
               priority="primary"
               type="default"
               disabled
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Menu />
             </IconButton>
@@ -142,7 +140,7 @@ export const Variants: Story = {
               aria-label="Primary action"
               priority="primary"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Plus />
             </IconButton>
@@ -151,7 +149,7 @@ export const Variants: Story = {
               aria-label="Secondary action"
               priority="secondary"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Settings />
             </IconButton>
@@ -160,7 +158,7 @@ export const Variants: Story = {
               aria-label="Tertiary action"
               priority="tertiary"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Star />
             </IconButton>
@@ -169,7 +167,7 @@ export const Variants: Story = {
               aria-label="Minimal action"
               priority="minimal"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Travel />
             </IconButton>
@@ -179,7 +177,7 @@ export const Variants: Story = {
               priority="primary"
               type="default"
               disabled
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Menu />
             </IconButton>
@@ -188,83 +186,14 @@ export const Variants: Story = {
       </div>
     );
   },
-  parameters: {
-    padding: '16px',
-    variants: ['default', 'dark', 'bright-green', 'forest-green'],
-    chromatic: {
-      dark: allModes.dark,
-      brightGreen: allModes.brightGreen,
-      forestGreen: allModes.forestGreen,
-    },
-  },
-};
-
-/** 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%']),
+  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green']),
 };
 
 /** 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')}
-      >
+      <IconButton size={48} aria-label="Primary" priority="primary" type="default" onClick={fn()}>
         <Plus />
       </IconButton>
       <IconButton
@@ -272,26 +201,14 @@ export const KeyboardInteraction: Story = {
         aria-label="Secondary"
         priority="secondary"
         type="default"
-        onClick={action('click')}
+        onClick={fn()}
       >
         <Settings />
       </IconButton>
-      <IconButton
-        size={48}
-        aria-label="Tertiary"
-        priority="tertiary"
-        type="default"
-        onClick={action('click')}
-      >
+      <IconButton size={48} aria-label="Tertiary" priority="tertiary" type="default" onClick={fn()}>
         <Star />
       </IconButton>
-      <IconButton
-        size={48}
-        aria-label="Minimal"
-        priority="minimal"
-        type="default"
-        onClick={action('click')}
-      >
+      <IconButton size={48} aria-label="Minimal" priority="minimal" type="default" onClick={fn()}>
         <Travel />
       </IconButton>
       <IconButton
@@ -300,7 +217,7 @@ export const KeyboardInteraction: Story = {
         priority="primary"
         type="default"
         disabled
-        onClick={action('click')}
+        onClick={fn()}
       >
         <Menu />
       </IconButton>
@@ -353,3 +270,40 @@ export const KeyboardInteraction: 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={fn()}>
+        <Plus />
+      </IconButton>
+      <IconButton
+        size={40}
+        aria-label="Secondary"
+        priority="secondary"
+        type="default"
+        onClick={fn()}
+      >
+        <Settings />
+      </IconButton>
+      <IconButton size={40} aria-label="Tertiary" priority="tertiary" type="default" onClick={fn()}>
+        <Star />
+      </IconButton>
+      <IconButton size={40} aria-label="Minimal" priority="minimal" type="default" onClick={fn()}>
+        <Travel />
+      </IconButton>
+      <IconButton
+        size={40}
+        aria-label="Disabled"
+        disabled
+        priority="primary"
+        type="default"
+        onClick={fn()}
+      >
+        <Menu />
+      </IconButton>
+    </div>
+  ),
+  ...withVariantConfig(['400%']),
+};

package/src/switch/Switch.story.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { fn } from 'storybook/test';
 
 import Switch, { SwitchProps } from './Switch';
@@ -39,11 +39,11 @@ type Story = StoryObj<typeof Switch>;
 
 /** Interactive playground — toggle checked and disabled via controls. */
 export const Playground: Story = {
-  render: function Render(args) {
+  render: function Render(args: SwitchProps) {
     const [checked, setChecked] = useState(args.checked ?? false);
     return (
       <Field id="playground-field" label="Switch label">
-        <Switch {...args} checked={checked} onClick={() => setChecked((v) => !v)} />
+        <Switch {...args} checked={checked} onClick={() => setChecked((v: boolean) => !v)} />
       </Field>
     );
   },
@@ -61,7 +61,7 @@ export const LabelPatterns: Story = {
     const [checked3, setCheck3] = useState(true);
 
     return (
-      <>
+      <div className="d-flex flex-column" style={{ gap: '1rem' }}>
         <div>
           <Label htmlFor="labelId">Using Label component</Label>
           <Switch
@@ -87,7 +87,7 @@ export const LabelPatterns: Story = {
         <Field id="fieldId" label="Using Field component">
           <Switch checked={checked3} disabled={disabled} onClick={() => setCheck3(!checked3)} />
         </Field>
-      </>
+      </div>
     );
   },
   parameters: {
@@ -98,7 +98,7 @@ function Render() {
   const [checked1, setCheck1] = useState(false);
   const [checked2, setCheck2] = useState(true);
   const [checked3, setCheck3] = useState(false);
-  
+
   return (
     <>
       <Field id="fieldId" label="Using Field component">
@@ -107,7 +107,7 @@ function Render() {
           onClick={() => setCheck1(!checked1)}
         />
       </Field>
-  
+
       <div>
         <Label htmlFor="labelId">Using standalone Label component</Label>
         <Switch
@@ -116,7 +116,7 @@ function Render() {
           onClick={() => setCheck2(!checked2)}
         />
       </div>
-  
+
       <div>
         <strong id="ariaId" className="d-block">Using \`aria-labelledby\`</strong>
         <Switch
@@ -131,13 +131,6 @@ function Render() {
       },
     },
   },
-  decorators: [
-    (Story: React.FC) => (
-      <div className="d-flex flex-column" style={{ gap: '1rem' }}>
-        <Story />
-      </div>
-    ),
-  ],
   args: {},
   argTypes: {
     checked: { table: { disable: true } },

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

@@ -3,7 +3,6 @@ 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';
 
@@ -38,27 +37,7 @@ export const Variants: Story = {
       </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%']),
+  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green']),
 };
 
 /** Tab to the switch and use Space to toggle it. */
@@ -99,3 +78,16 @@ export const KeyboardInteraction: Story = {
     });
   },
 };
+
+/** 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%']),
+};