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

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

@@ -1,9 +1,25 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { Menu, Plus, Settings, Star, Travel } from '@transferwise/icons';
-import { action } from 'storybook/actions';
+import {
+  Menu,
+  Plus,
+  Settings,
+  Star,
+  Travel,
+  Cross,
+  Edit,
+  Briefcase,
+  Bank,
+  Freeze,
+} from '@transferwise/icons';
+import { expect, fn, userEvent, within } from 'storybook/test';
 import IconButton from './IconButton';
+import { withVariantConfig } from '../../.storybook/helpers';
 import SentimentSurface from '../sentimentSurface';
-import { allModes } from '../../.storybook/modes';
+
+const wait = async (ms: number) =>
+  new Promise<void>((resolve) => {
+    setTimeout(resolve, ms);
+  });
 
 export default {
   title: 'Actions/IconButton/Tests',
@@ -16,11 +32,19 @@ 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];
+    const size = 32;
+    const priorities = [
+      { key: 'primary', label: 'primary' },
+      { key: 'secondary', label: 'secondary' },
+      { key: 'tertiary', label: 'tertiary' },
+      { key: 'minimal', label: 'minimal' },
+      { key: 'neg-primary', label: 'negative\nprimary' },
+      { key: 'neg-secondary', label: 'negative\nsecondary' },
+      { key: 'disabled', label: 'disabled' },
+    ] as const;
+    const sentiments = ['success', 'warning', 'negative', 'neutral', 'proposition'] as const;
 
     return (
       <div style={{ display: 'flex', flexDirection: 'column' }}>
@@ -29,21 +53,23 @@ export const AllThemesAndSentiments: Story = {
           <div style={{ width: '82px', paddingLeft: '8px' }} />
           {priorities.map((priority) => (
             <div
-              key={priority}
+              key={priority.key}
               style={{
-                width: '32px',
+                width: `${size}px`,
                 textAlign: 'center',
                 fontSize: '11px',
                 fontWeight: 'bold',
                 writingMode: 'vertical-rl',
                 transform: 'rotate(180deg)',
-                height: '60px',
+                height: '80px',
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
+                whiteSpace: 'pre',
+                lineHeight: '1',
               }}
             >
-              {priority}
+              {priority.label}
             </div>
           ))}
         </div>
@@ -68,48 +94,66 @@ export const AllThemesAndSentiments: Story = {
               {sentiment} (base)
             </div>
             <IconButton
-              size={32}
+              size={size}
               aria-label="Primary action"
               priority="primary"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Plus />
             </IconButton>
             <IconButton
-              size={32}
+              size={size}
               aria-label="Secondary action"
               priority="secondary"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Settings />
             </IconButton>
             <IconButton
-              size={32}
+              size={size}
               aria-label="Tertiary action"
               priority="tertiary"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Star />
             </IconButton>
             <IconButton
-              size={32}
+              size={size}
               aria-label="Minimal action"
               priority="minimal"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Travel />
             </IconButton>
             <IconButton
-              size={32}
+              size={size}
+              aria-label="Negative primary action"
+              priority="primary"
+              type="negative"
+              onClick={fn()}
+            >
+              <Cross />
+            </IconButton>
+            <IconButton
+              size={size}
+              aria-label="Negative secondary action"
+              priority="secondary"
+              type="negative"
+              onClick={fn()}
+            >
+              <Edit />
+            </IconButton>
+            <IconButton
+              size={size}
               aria-label="Disabled action"
               priority="primary"
               type="default"
               disabled
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Menu />
             </IconButton>
@@ -132,63 +176,192 @@ export const AllThemesAndSentiments: Story = {
               {sentiment} (elevated)
             </div>
             <IconButton
-              size={32}
+              size={size}
               aria-label="Primary action"
               priority="primary"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
-              <Plus />
+              <Briefcase />
             </IconButton>
             <IconButton
-              size={32}
+              size={size}
               aria-label="Secondary action"
               priority="secondary"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
-              <Settings />
+              <Bank />
             </IconButton>
             <IconButton
-              size={32}
+              size={size}
               aria-label="Tertiary action"
               priority="tertiary"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
-              <Star />
+              <Freeze />
             </IconButton>
             <IconButton
-              size={32}
+              size={size}
               aria-label="Minimal action"
               priority="minimal"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
-              <Travel />
+              <Edit />
             </IconButton>
             <IconButton
-              size={32}
+              size={size}
+              aria-label="Negative primary action"
+              priority="primary"
+              type="negative"
+              onClick={fn()}
+            >
+              <Cross />
+            </IconButton>
+            <IconButton
+              size={size}
+              aria-label="Negative secondary action"
+              priority="secondary"
+              type="negative"
+              onClick={fn()}
+            >
+              <Edit />
+            </IconButton>
+            <IconButton
+              size={size}
               aria-label="Disabled action"
               priority="primary"
               type="default"
               disabled
-              onClick={action('button click')}
+              onClick={fn()}
             >
-              <Menu />
+              <Cross />
             </IconButton>
           </SentimentSurface>,
         ])}
       </div>
     );
   },
-  parameters: {
-    padding: '16px',
-    variants: ['default', 'dark', 'bright-green', 'forest-green'],
-    chromatic: {
-      dark: allModes.dark,
-      brightGreen: allModes.brightGreen,
-      forestGreen: allModes.forestGreen,
-    },
+  ...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={fn()}>
+        <Plus />
+      </IconButton>
+      <IconButton
+        size={48}
+        aria-label="Secondary"
+        priority="secondary"
+        type="default"
+        onClick={fn()}
+      >
+        <Settings />
+      </IconButton>
+      <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={fn()}>
+        <Travel />
+      </IconButton>
+      <IconButton
+        size={48}
+        aria-label="Disabled"
+        priority="primary"
+        type="default"
+        disabled
+        onClick={fn()}
+      >
+        <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();
+    });
   },
 };
+
+/** 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,11 +1,15 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { fn } from 'storybook/test';
 
+import { storySourceWithoutNoise } from '../../.storybook/helpers';
 import Switch, { SwitchProps } from './Switch';
 import { Field } from '../field/Field';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Label } from '../label';
 
+/**
+ * **Design guidance**: <a href="https://wise.design/components/switch" target="_blank">wise.design/components/switch</a>
+ */
 const meta: Meta<typeof Switch> = {
   component: Switch,
   title: 'Actions/Switch',
@@ -18,56 +22,83 @@ const meta: Meta<typeof Switch> = {
     'aria-label': undefined,
     onClick: fn(),
   },
+  argTypes: {
+    id: { description: '', table: { category: 'Common' } },
+    className: { description: '', table: { category: 'Common' } },
+  },
+  parameters: {
+    docs: { toc: true },
+  },
 } satisfies Meta<typeof Switch>;
 
 export default meta;
 type Story = StoryObj<typeof Switch>;
 
-export const Basic: Story = {
-  tags: ['!autodocs', '!dev'],
-};
+export const Playground: Story = storySourceWithoutNoise({
+  render: function Render(args: SwitchProps) {
+    const [checked, setChecked] = useState(args.checked ?? false);
 
-export const Playground: Story = {
-  tags: ['!autodocs'],
+    useEffect(() => {
+      setChecked(args.checked ?? false);
+    }, [args.checked]);
+
+    return (
+      <Field id="playground-field" label="Switch label">
+        <Switch
+          {...args}
+          checked={checked}
+          onClick={() => setChecked((value: boolean) => !value)}
+        />
+      </Field>
+    );
+  },
   argTypes: {
     onClick: { table: { disable: true } },
   },
-};
+});
 
-export const Interactivity: Story = {
+/**
+ * Three labelling patterns: <a href="?path=/docs/forms-label--docs">Label</a>, `aria-labelledby`, and <a href="?path=/docs/forms-field--docs">Field</a>. <br />
+ * Use Label for simple label-input pairs. Use `aria-labelledby` to reference existing text as the accessible name. Use Field for form layouts with labels, descriptions, and validation.
+ */
+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 className="d-flex flex-column" style={{ gap: '1rem' }}>
         <div>
-          <Label htmlFor="labelId">Using Label component</Label>
+          <Label htmlFor="labelId">Enable two-factor authentication</Label>
           <Switch
             id="labelId"
-            checked={checked2}
+            checked={checked1}
             disabled={disabled}
-            onClick={() => setCheck2(!checked2)}
+            onClick={() => setCheck1(!checked1)}
           />
         </div>
 
         <div>
           <strong id="ariaId" className="d-block">
-            Using `aria-labelledby`
+            Marketing emails
           </strong>
           <Switch
             aria-labelledby="ariaId"
-            checked={checked3}
+            checked={checked2}
             disabled={disabled}
-            onClick={() => setCheck3(!checked3)}
+            onClick={() => setCheck2(!checked2)}
           />
         </div>
-      </>
+
+        <Field
+          id="fieldId"
+          label="Enable notifications"
+          description="Get alerts when transfers complete"
+        >
+          <Switch checked={checked3} disabled={disabled} onClick={() => setCheck3(!checked3)} />
+        </Field>
+      </div>
     );
   },
   parameters: {
@@ -78,7 +109,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">
@@ -87,7 +118,7 @@ function Render() {
           onClick={() => setCheck1(!checked1)}
         />
       </Field>
-  
+
       <div>
         <Label htmlFor="labelId">Using standalone Label component</Label>
         <Switch
@@ -96,7 +127,7 @@ function Render() {
           onClick={() => setCheck2(!checked2)}
         />
       </div>
-  
+
       <div>
         <strong id="ariaId" className="d-block">Using \`aria-labelledby\`</strong>
         <Switch
@@ -111,13 +142,6 @@ function Render() {
       },
     },
   },
-  decorators: [
-    (Story: any) => (
-      <div className="d-flex flex-column" style={{ gap: '1rem' }}>
-        <Story />
-      </div>
-    ),
-  ],
   args: {},
   argTypes: {
     checked: { table: { disable: true } },
@@ -126,17 +150,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 unchecked">
           <Switch checked={checked1} disabled onClick={() => setCheck1(!checked1)} />
         </Field>
 
-        <Field label="Switch label">
+        <Field label="Disabled checked">
           <Switch checked={checked2} disabled onClick={() => setCheck2(!checked2)} />
         </Field>
       </>
@@ -152,14 +176,14 @@ function Render() {
 
   return (
     <>
-      <Field label="Switch label">
+      <Field label="Disabled unchecked">
         <Switch
           checked={checked1}
           disabled
           onClick={() => setCheck1(!checked1)}
         />
-      </Fie 
-      <Field label="Switch label">
+      </Field>
+      <Field label="Disabled checked">
         <Switch
           checked={checked2}
           disabled