@transferwise/components 46.133.0 → 46.133.1

package/src/logo/Logo.story.tsx

@@ -2,36 +2,196 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import Logo, { LogoType } from '.';
 
-export default {
+/**
+ * **Design guidance**: <a href="https://wise.design/foundations/logo" target="_blank">wise.design/foundations/logo</a>
+ */
+const meta: Meta<typeof Logo> = {
   component: Logo,
   title: 'Content/Logo',
-  render: () => {
-    return (
-      <>
-        <div>
+  args: {
+    type: 'WISE',
+    inverse: false,
+  },
+  argTypes: {
+    type: {
+      control: 'radio',
+      options: Object.values(LogoType),
+    },
+  },
+  parameters: {
+    docs: { toc: true },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Logo>;
+
+/** Explore all props via the controls panel. */
+export const Playground: Story = {
+  render: (args) => (
+    <div
+      style={{
+        padding: '2rem',
+        ...(args.inverse
+          ? { backgroundColor: 'var(--color-background-screen-dark, #0e0f0c)' }
+          : {}),
+      }}
+    >
+      <Logo {...args} />
+    </div>
+  ),
+};
+
+/**
+ * The three logo types: standard Wise, Wise Business, and Wise Platform. <br />
+ * `WISE_BUSINESS` renders the same SVG as `WISE` but with the accessible label "Wise Business".
+ */
+export const Types: Story = {
+  argTypes: {
+    type: { table: { disable: true } },
+  },
+  render: (args) => (
+    <div
+      style={{
+        display: 'flex',
+        gap: '3rem',
+        alignItems: 'center',
+        padding: '2rem',
+        borderRadius: '8px',
+        ...(args.inverse
+          ? { backgroundColor: 'var(--color-background-screen-dark, #0e0f0c)' }
+          : {}),
+      }}
+    >
+      {Object.values(LogoType).map((type) => (
+        <div
+          key={type}
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: '0.5rem',
+          }}
+        >
+          <Logo {...args} type={type} />
+          <span
+            style={{
+              fontSize: '12px',
+              ...(args.inverse ? { color: 'rgba(255,255,255,0.6)' } : { opacity: 0.6 }),
+            }}
+          >
+            {type}
+          </span>
+        </div>
+      ))}
+    </div>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `<Logo type="WISE" />
+<Logo type="WISE_BUSINESS" />
+<Logo type="WISE_PLATFORM" />`,
+      },
+    },
+  },
+};
+
+/**
+ * Below `576px` the flag-only mark is shown; at `576px` and above the full wordmark is displayed.
+ */
+export const Responsive: Story = {
+  argTypes: {
+    type: { table: { disable: true } },
+    inverse: { table: { disable: true } },
+  },
+  render: (args) => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+      <div>
+        <span style={{ fontSize: '12px', opacity: 0.6, display: 'block', marginBottom: '0.5rem' }}>
+          {'< 576px (flag only)'}
+        </span>
+        <div style={{ display: 'flex', gap: '3rem', alignItems: 'center' }}>
           {Object.values(LogoType).map((type) => (
-            <div key={type} className="m-a-2">
-              <Logo type={type} />
-            </div>
+            <span key={type} className="np-logo" style={{ display: 'inline-block' }}>
+              <style>{`.responsive-sm .np-logo-svg--size-md { display: none !important; } .responsive-sm .np-logo-svg--size-sm { display: block !important; }`}</style>
+              <span className="responsive-sm">
+                <Logo type={type} />
+              </span>
+            </span>
           ))}
         </div>
-        <div className="bg--dark">
+      </div>
+      <div>
+        <span style={{ fontSize: '12px', opacity: 0.6, display: 'block', marginBottom: '0.5rem' }}>
+          {'\u2265 576px (full wordmark)'}
+        </span>
+        <div style={{ display: 'flex', gap: '3rem', alignItems: 'center' }}>
           {Object.values(LogoType).map((type) => (
-            <div key={type} className="m-a-2">
-              <Logo type={type} inverse />
-            </div>
+            <Logo key={type} type={type} />
           ))}
         </div>
-      </>
-    );
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      source: { code: null },
+    },
   },
-} satisfies Meta<typeof Logo>;
-
-type Story = StoryObj<typeof Logo>;
+};
 
-export const Basic: Story = {
-  args: {
-    type: 'WISE',
-    inverse: false,
+/**
+ * All logo types on a dark background using the `inverse` prop, which renders a
+ * light-coloured version suited for dark surfaces.
+ */
+export const Inverse: Story = {
+  argTypes: {
+    type: { table: { disable: true } },
+    inverse: { table: { disable: true } },
+  },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          display: 'flex',
+          gap: '3rem',
+          alignItems: 'center',
+          backgroundColor: 'var(--color-background-screen-dark, #0e0f0c)',
+          padding: '2rem',
+          borderRadius: '8px',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+  render: (args) => (
+    <>
+      {Object.values(LogoType).map((type) => (
+        <div
+          key={type}
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: '0.5rem',
+          }}
+        >
+          <Logo type={type} inverse />
+          <span style={{ fontSize: '12px', color: 'rgba(255,255,255,0.6)' }}>{type}</span>
+        </div>
+      ))}
+    </>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `<Logo type="WISE" inverse />
+<Logo type="WISE_BUSINESS" inverse />
+<Logo type="WISE_PLATFORM" inverse />`,
+      },
+    },
   },
 };

package/src/logo/Logo.test.story.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import Logo from '.';
+
+import Logo, { LogoType } from '.';
 import { withVariantConfig } from '../../.storybook/helpers';
 
 const meta: Meta<typeof Logo> = {
@@ -7,14 +8,46 @@ const meta: Meta<typeof Logo> = {
   tags: ['!autodocs', '!manifest'],
   title: 'Content/Logo/Tests',
 };
+
 export default meta;
 
 type Story = StoryObj<typeof Logo>;
 
-export const Mobile: Story = {
-  args: {
-    type: 'WISE',
-    inverse: false,
-  },
-  ...withVariantConfig(['mobile']),
+const AllVariants = () => (
+  <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+    <div style={{ display: 'flex', gap: '2rem', alignItems: 'center' }}>
+      {Object.values(LogoType).map((type) => (
+        <Logo key={type} type={type} />
+      ))}
+    </div>
+    <div
+      style={{
+        display: 'flex',
+        gap: '2rem',
+        alignItems: 'center',
+        backgroundColor: 'var(--color-content-primary)',
+        padding: '1rem',
+        borderRadius: '8px',
+      }}
+    >
+      {Object.values(LogoType).map((type) => (
+        <Logo key={type} type={type} inverse />
+      ))}
+    </div>
+  </div>
+);
+
+export const Variants: Story = {
+  render: () => <AllVariants />,
+  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green']),
+};
+
+export const RTL: Story = {
+  render: () => <AllVariants />,
+  ...withVariantConfig(['rtl']),
+};
+
+export const Zoom400: Story = {
+  render: () => <AllVariants />,
+  ...withVariantConfig(['400%']),
 };

package/src/logo/Logo.tsx

@@ -33,7 +33,10 @@ export enum LogoType {
 export interface LogoProps {
   /** Extra classes applied to Logo */
   className?: string;
-  /** If true, will use dark colours for dark on light theme */
+  /**
+   * Renders a light-coloured version suited for dark backgrounds.
+   * @default false
+   */
   inverse?: boolean;
   /**
    * What type of logo to display
@@ -48,6 +51,12 @@ const labelByType = {
   WISE_PLATFORM: 'Wise Platform',
 } satisfies Record<`${LogoType}`, string>;
 
+/**
+ * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports
+ * and the full wordmark on ≥576px (small breakpoint and above).
+ *
+ * @see {@link https://wise.design/foundations/logo Design Spec}
+ */
 export default function Logo({ className, inverse, type = 'WISE' }: LogoProps) {
   const LogoSm =
     svgPaths[`WISE_FLAG${type === 'WISE_PLATFORM' ? '_PLATFORM' : ''}${inverse ? '_INVERSE' : ''}`];

package/src/main.css

@@ -29430,7 +29430,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   margin-top: -2px;
 }
 
-@container (min-width: 309px) {
+@container (width > 308px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     height: var(--wds-list-item-control-wrapper-height);
     align-content: center;
@@ -29527,7 +29527,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   }
 }
 
-@container (min-width: 241px) and (max-width: 308px) {
+@container (240px < width <= 308px) {
   .wds-list-item-gridWrapper .wds-list-item-media-image {
     -o-object-position: bottom left;
        object-position: bottom left;
@@ -29659,7 +29659,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   }
 }
 
-@container (max-width: 240px) {
+@container (width <= 240px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     align-content: start;
   }
@@ -29987,7 +29987,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   justify-content: center;
 }
 
-@container (min-width: 309px) {
+@container (width > 308px) {
   .wds-list-item-titles,
   .wds-list-item-value {
     min-height: 100%;

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