@transferwise/components 46.133.0 → 46.134.0

package/src/statusIcon/StatusIcon.tsx

@@ -1,9 +1,7 @@
 import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';
 import { clsx } from 'clsx';
 import { useIntl } from 'react-intl';
-import { PropsWithChildren } from 'react';
 
-import SentimentSurface from '../sentimentSurface';
 import { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint, Status } from '../common';
 import Circle, { CircleProps } from '../common/circle';
 import { useMedia } from '../common/hooks/useMedia';
@@ -88,30 +86,18 @@ const StatusIcon = ({
   };
   const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];
 
-  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
   const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
   const size = mapLegacySize[sizeProp] ?? sizeProp;
-  // eslint-disable-next-line react/no-unstable-nested-components
-  const SentimentSurfaceSetting = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (
-    <SentimentSurface
-      as="span"
-      // @ts-expect-error sentiment and SentimentSurface types mismatch
-      sentiment={
-        sentiment === 'positive' ? 'success' : sentiment === 'pending' ? 'warning' : sentiment
-      }
-      {...props}
-    />
-  );
+
   return (
     <Circle
-      as={SentimentSurfaceSetting}
       size={isTinyViewport && size < 40 ? 32 : size}
       data-testid="status-icon"
       className={clsx('status-circle', sentiment)}
       id={id}
     >
       <Icon
-        className={clsx('status-icon', iconColor)}
+        className="status-icon"
         title={iconLabel === null ? undefined : iconLabel || defaultIconLabel}
       />
     </Circle>

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%']),
+};