@transferwise/components 46.132.1 → 46.133.1

package/src/snackbar/Snackbar.test.story.tsx

@@ -1,13 +1,12 @@
-import { userEvent, within } from 'storybook/test';
+import { userEvent, within, expect } from 'storybook/test';
 import { action } from 'storybook/actions';
-import { Mobile as MobileIcon, Theme, Switch, Bulb, Info, Coins, Team } from '@transferwise/icons';
+import { withVariantConfig } from '../../.storybook/helpers';
+import { lorem20 } from '../test-utils';
+import { wait } from '../test-utils/wait';
+import Button from '../button';
 import { Snackbar, type SnackbarProps } from './Snackbar';
 import { SnackbarConsumer } from './SnackbarContext';
 import SnackbarProvider from './SnackbarProvider';
-import Button from '../button';
-import CheckboxOption from '../checkboxOption';
-import { wait } from '../test-utils/wait';
-import { withVariantConfig } from '../../.storybook/helpers';
 
 export default {
   title: 'Dialogs/Snackbar/Tests',
@@ -43,6 +42,7 @@ const Default = {
           {({ createSnackbar }) => (
             <>
               <Button
+                v2
                 block
                 onClick={() => {
                   createSnackbar({
@@ -69,36 +69,6 @@ export const Basic = {
   ...Default,
   args: {
     ...Default.args,
-    extraContext: (
-      <div className="p-t-3">
-        <CheckboxOption
-          title="In light mode, snackbar has drop shadow"
-          content={
-            <a
-              href="https://transferwise.atlassian.net/browse/DS-4477"
-              target="_blank"
-              rel="noreferrer"
-            >
-              Bug DS-4477
-            </a>
-          }
-          media={<Bulb />}
-        />
-        <CheckboxOption
-          title="Font size is 14 px, not 16px"
-          content={
-            <a
-              href="https://transferwise.atlassian.net/browse/DS-3716"
-              target="_blank"
-              rel="noreferrer"
-            >
-              Bug DS-3716
-            </a>
-          }
-          media={<Info size="16" />}
-        />
-      </div>
-    ) as React.ReactNode,
   },
 };
 
@@ -106,14 +76,6 @@ export const Mobile = {
   ...Default,
   args: {
     ...Default.args,
-    extraContext: (
-      <div className="p-t-3">
-        <CheckboxOption
-          title="In mobile view, snackbar is full-width, not centered"
-          media={<MobileIcon />}
-        />
-      </div>
-    ) as React.ReactNode,
   },
   ...withVariantConfig(['mobile'], Default),
 };
@@ -136,15 +98,6 @@ export const DarkMode = {
   ...Default,
   args: {
     ...Default.args,
-    extraContext: (
-      <div className="p-t-3">
-        <CheckboxOption title="In dark mode, snackbar has no drop shadow" media={<Theme />} />
-        <CheckboxOption
-          title="In dark mode, snackbar is inverted and has light background"
-          media={<Theme />}
-        />
-      </div>
-    ) as React.ReactNode,
   },
   play: switchToDarkMode,
   ...withVariantConfig(['dark'], Default),
@@ -167,36 +120,6 @@ export const RTL = {
   ...Default,
   args: {
     ...Default.args,
-    extraContext: (
-      <div className="p-t-3">
-        <CheckboxOption
-          title="In RTL, snackbar is not left aligned"
-          content={
-            <a
-              href="https://transferwise.atlassian.net/browse/DS-4642"
-              target="_blank"
-              rel="noreferrer"
-            >
-              Bug DS-4642
-            </a>
-          }
-          media={<Switch />}
-        />
-        <CheckboxOption
-          title="In RTL, snackbar has proper padding on left and right of button"
-          content={
-            <a
-              href="https://transferwise.atlassian.net/browse/DS-4643"
-              target="_blank"
-              rel="noreferrer"
-            >
-              Bug DS-4643
-            </a>
-          }
-          media={<Switch />}
-        />
-      </div>
-    ) as React.ReactNode,
   },
   play: switchToRTL,
   ...withVariantConfig(['rtl'], Default),
@@ -217,42 +140,31 @@ export const Zoom400 = {
     ...Default.args,
     extraContext: (
       <div className="p-t-3">
-        <CheckboxOption
-          content="Snackbar isn't transparent (I'm going to make this text very long so that it will fill up the entire page and go behind the snackbar. This way, when you look at it you will easily be able to tell if the snackbar is transparent and recognize the bug because we don't want it to be transparent. Transparent is bad. When we first did rebrand we had a lot of problems with transparencies. I don't know what happened to them. I don't see them a lot anymore but I also don't remember anybody fixing them.)"
-          title={
-            <a
-              href="https://transferwise.atlassian.net/browse/DS-3716"
-              target="_blank"
-              rel="noreferrer"
-            >
-              Bug DS-3716
-            </a>
-          }
-          media={<Coins />}
-        />
+        Snackbar isn&#39;t transparent (I&#39;m going to make this text very long so that it will
+        fill up the entire page and go behind the snackbar. This way, when you look at it you will
+        easily be able to tell if the snackbar is transparent and recognize the bug because we
+        don&#39;t want it to be transparent. Transparent is bad. When we first did rebrand we had a
+        lot of problems with transparencies. {lorem20}
       </div>
     ),
   },
   ...withVariantConfig(['400%'], Default),
 };
 
+/**
+ * Snackbar is only shown once even if trigger is clicked many times
+ */
 export const MultipleClicks = {
   ...Default,
   args: {
     ...Default.args,
-    extraContext: (
-      <div className="p-t-3">
-        <CheckboxOption
-          title="Snackbar is only shown once even if clicked many times"
-          media={<Team />}
-        />
-      </div>
-    ),
   },
   play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
     const canvas = within(canvasElement);
     for (let i = 0; i < 8; i += 1) {
       await userEvent.click(canvas.getByRole('button'));
     }
+
+    await expect(within(document.body).getAllByRole('alert')).toHaveLength(1);
   },
 };

package/src/summary/Summary.test.story.tsx

@@ -5,7 +5,7 @@ import Summary, { type SummaryProps } from '.';
 export default {
   component: Summary,
   title: 'Content/Summary/Tests',
-  tags: ['deprecated', '!manifest'],
+  tags: ['!manifest', 'deprecated'],
 };
 
 export const LongText = () => {

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',
@@ -15,59 +19,84 @@ const meta: Meta<typeof Switch> = {
     id: 'switchId',
     className: 'switchClassName',
     'aria-labelledby': undefined,
-    'aria-label': undefined,
+    'aria-label': 'Toggle switch',
     onClick: fn(),
   },
+  argTypes: {
+    id: { description: '', table: { category: 'Common' } },
+    className: { description: '', table: { category: 'Common' } },
+    onClick: { description: '', table: { category: 'Common', type: { summary: 'function' } } },
+  },
+  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'],
-  argTypes: {
-    onClick: { table: { disable: true } },
+    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>
+    );
   },
-};
+});
 
-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 +107,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 +116,7 @@ function Render() {
           onClick={() => setCheck1(!checked1)}
         />
       </Field>
-  
+
       <div>
         <Label htmlFor="labelId">Using standalone Label component</Label>
         <Switch
@@ -96,7 +125,7 @@ function Render() {
           onClick={() => setCheck2(!checked2)}
         />
       </div>
-  
+
       <div>
         <strong id="ariaId" className="d-block">Using \`aria-labelledby\`</strong>
         <Switch
@@ -111,13 +140,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 +148,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 +174,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

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

@@ -0,0 +1,123 @@
+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 { 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>
+    );
+  },
+  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green']),
+};
+
+/**
+ * Tests keyboard navigation and interaction:
+ * - Tab focuses the switch
+ * - Space toggles the switch on and off
+ */
+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');
+    });
+  },
+};
+
+/** Switch rendered in RTL mode. */
+export const RTL: 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>
+    );
+  },
+  ...withVariantConfig(['rtl']),
+};
+
+/** 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%']),
+};

package/src/switchOption/SwitchOption.story.tsx

@@ -46,7 +46,6 @@ function Template(args: SwitchOptionProps) {
 
 export const Playground = {
   render: (args: SwitchOptionProps) => <Template {...args} />,
-  tags: ['!autodocs'],
 };
 
 export const Multiple = {