@transferwise/components 46.159.0 → 46.159.2

package/src/Checkbox/_stories/Checkbox.test.story.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
 import { lorem10 } from '../../test-utils';
 import Checkbox from '../Checkbox';
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import { withVariantConfig } from '../../../.storybook/helpers';
 
 const meta: Meta<typeof Checkbox> = {
@@ -31,3 +32,22 @@ export const MultipleMobile: Story = {
   },
   ...withVariantConfig(['default', 'dark', 'rtl', 'mobile']),
 };
+
+/**
+ * The checkbox indicator sits to the start of the label: in LTR it appears on the left,
+ * in RTL it should appear on the right. The secondary line wraps under the label text,
+ * so both single-line and two-line layouts are verified here.
+ */
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <Checkbox label="Label only" onChange={() => {}} />
+      <Checkbox
+        label="Label with secondary"
+        secondary="Secondary description text"
+        onChange={() => {}}
+      />
+    </>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { expect, userEvent, within } from 'storybook/test';
 
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import { withVariantConfig } from '../../../.storybook/helpers';
 import CheckboxButton from '../CheckboxButton';
 
@@ -181,43 +182,6 @@ export const KeyboardInteraction: Story = {
   },
 };
 
-/** Base checkbox states in right-to-left layout. */
-export const RTL: Story = {
-  render: function Render() {
-    const [unchecked, setUnchecked] = useState(false);
-    const [checked, setChecked] = useState(true);
-    const [indeterminate, setIndeterminate] = useState(false);
-    return (
-      <div style={{ display: 'flex', gap: '16px', alignItems: 'center', padding: '16px' }}>
-        <CheckboxButton
-          aria-label="Unchecked"
-          checked={unchecked}
-          onChange={() => setUnchecked((v) => !v)}
-        />
-        <CheckboxButton
-          aria-label="Checked"
-          checked={checked}
-          onChange={() => setChecked((v) => !v)}
-        />
-        <CheckboxButton
-          aria-label="Indeterminate"
-          checked={indeterminate}
-          indeterminate
-          onChange={() => setIndeterminate((v) => !v)}
-        />
-        <CheckboxButton
-          aria-label="Disabled unchecked"
-          checked={false}
-          disabled
-          onChange={() => {}}
-        />
-        <CheckboxButton aria-label="Disabled checked" checked disabled onChange={() => {}} />
-      </div>
-    );
-  },
-  ...withVariantConfig(['rtl']),
-};
-
 /** Checkbox states at 400% zoom for accessibility testing. */
 export const Zoom400: Story = {
   render: () => (
@@ -234,3 +198,19 @@ export const Zoom400: Story = {
   ),
   ...withVariantConfig(['400%']),
 };
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <CheckboxButton aria-label="Unchecked" checked={false} onChange={() => {}} />
+      <CheckboxButton aria-label="Checked" checked onChange={() => {}} />
+      <CheckboxButton
+        aria-label="Indeterminate"
+        checked={false}
+        indeterminate
+        onChange={() => {}}
+      />
+    </>
+  ),
+  ...withRTLDiff(),
+};

package/src/Chevron/_stories/Chevron.test.story.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import Chevron from '..';
+
+export default {
+  component: Chevron,
+  title: 'Other/Chevron/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Chevron>;
+
+type Story = StoryObj<typeof Chevron>;
+
+/**
+ * Chevrons pointing left or right should mirror their direction in RTL mode.
+ * A left-pointing chevron in LTR becomes right-pointing in RTL and vice versa.
+ */
+export const RTLDiff: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+      <Chevron orientation="left" size="md" />
+      <Chevron orientation="right" size="md" />
+    </div>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { userEvent } from 'storybook/test';
 import { useState } from 'react';
 
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import { withVariantConfig } from '../../../.storybook/helpers';
 import Chips, { type ChipValue } from '../Chips';
 
@@ -121,40 +122,6 @@ export const FilterKeyboardInteraction: Story = {
   },
 };
 
-/** Filter and choice chips in right-to-left layout. */
-export const RTL: Story = {
-  render: function Render() {
-    const [filterSelected, setFilterSelected] = useState<readonly ChipValue[]>([
-      'accounting',
-      'payments',
-    ]);
-    const [choiceSelected, setChoiceSelected] = useState<ChipValue>(300);
-
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-        <Chips
-          chips={filterChips}
-          multiple
-          selected={filterSelected}
-          aria-label="Category filter"
-          onChange={({ selectedValue, isEnabled }) => {
-            setFilterSelected((prev) =>
-              isEnabled ? [...prev, selectedValue] : prev.filter((v) => v !== selectedValue),
-            );
-          }}
-        />
-        <Chips
-          chips={choiceChips}
-          selected={choiceSelected}
-          aria-label="Transfer amount"
-          onChange={({ selectedValue }) => setChoiceSelected(selectedValue)}
-        />
-      </div>
-    );
-  },
-  ...withVariantConfig(['rtl']),
-};
-
 /** Filter chips at 400% zoom for accessibility testing. */
 export const Zoom400: Story = {
   render: function Render() {
@@ -175,3 +142,41 @@ export const Zoom400: Story = {
   },
   ...withVariantConfig(['400%']),
 };
+
+const categoryChips = [
+  { value: 'all', label: 'All' },
+  { value: 'accounting', label: 'Accounting' },
+  { value: 'payroll', label: 'Payroll' },
+  { value: 'payments', label: 'Payments' },
+];
+
+const amountChips = [
+  { value: 100, label: '100 GBP' },
+  { value: 200, label: '200 GBP' },
+  { value: 300, label: '300 GBP' },
+  { value: 500, label: '500 GBP+' },
+];
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      {/* Choice mode: chip row order reverses in RTL */}
+      <Chips
+        chips={amountChips}
+        selected={300}
+        multiple={false}
+        aria-label="Transfer amount"
+        onChange={() => undefined}
+      />
+      {/* Filter mode: selected chips show close button on trailing end */}
+      <Chips
+        chips={categoryChips}
+        selected={['accounting', 'payments']}
+        multiple
+        aria-label="Category filter"
+        onChange={() => undefined}
+      />
+    </>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -2,7 +2,6 @@ import { Freeze, Plus, Send, Convert, Card } from '@transferwise/icons';
 
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { expect, fn, userEvent, within } from 'storybook/test';
-import { useState } from 'react';
 import CircularButton from '../CircularButton';
 import Title from '../../Title';
 import Body from '../../Body';
@@ -135,73 +134,6 @@ export const KeyboardInteraction: Story = {
   },
 };
 
-/** Base variants in right-to-left layout. */
-export const RTL: Story = {
-  render: function Render() {
-    const [clicks, setClicks] = useState(0);
-    const rowStyle = {
-      display: 'grid',
-      gridTemplateColumns: 'repeat(4, minmax(0, 100px))',
-      gap: '16px',
-      textAlign: 'center' as const,
-    };
-
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', padding: '16px' }}>
-        <div style={rowStyle}>
-          <CircularButton
-            priority="primary"
-            type="default"
-            icon={<Send />}
-            onClick={() => setClicks((c) => c + 1)}
-          >
-            Primary
-          </CircularButton>
-          <CircularButton
-            priority="secondary"
-            type="default"
-            icon={<Plus />}
-            onClick={() => setClicks((c) => c + 1)}
-          >
-            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 />}
-            onClick={() => setClicks((c) => c + 1)}
-          >
-            Primary
-          </CircularButton>
-          <CircularButton
-            priority="secondary"
-            type="negative"
-            icon={<Convert />}
-            onClick={() => setClicks((c) => c + 1)}
-          >
-            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(['rtl']),
-};
-
 /** Long labels are centered beneath the icon. */
 export const CenteredText: Story = {
   render: () => {

package/src/DateInput/_stories/DateInput.test.story.tsx

@@ -6,6 +6,7 @@ import { lorem10 } from '../../test-utils';
 
 import Provider from '../../Provider';
 import translations from '../../i18n';
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import { withVariantConfig } from '../../../.storybook/helpers';
 
 const meta: Meta<typeof DateInput> = {
@@ -230,3 +231,15 @@ export const InputErrorMobile: Story = {
   ...InputError,
   ...withVariantConfig(['mobile'], InputError),
 };
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <DateInput size="sm" onChange={fn()} />
+      <DateInput size="md" onChange={fn()} />
+      <DateInput size="lg" onChange={fn()} />
+      <DateInput mode="month-year" onChange={fn()} />
+    </>
+  ),
+  ...withRTLDiff(),
+};

package/src/DateLookup/_stories/DateLookup.rtl.test.story.tsx

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within } from 'storybook/test';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import DateLookup from '..';
+
+export default {
+  component: DateLookup,
+  title: 'Forms/DateLookup/Tests/RTL Diff',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof DateLookup>;
+
+type Story = StoryObj<typeof DateLookup>;
+
+const selectedDate = new Date(2024, 5, 14);
+
+export const TriggerVariants: Story = {
+  render: () => (
+    <>
+      <DateLookup
+        label="Select date"
+        placeholder="Choose a date"
+        value={selectedDate}
+        onChange={() => {}}
+      />
+      <DateLookup
+        label="Select date"
+        placeholder="Choose a date"
+        value={selectedDate}
+        clearable
+        onChange={() => {}}
+      />
+      <DateLookup
+        label="Select date"
+        placeholder="Choose a date"
+        size="sm"
+        value={selectedDate}
+        onChange={() => {}}
+      />
+      <DateLookup
+        label="Select date"
+        placeholder="Choose a date"
+        size="lg"
+        value={selectedDate}
+        onChange={() => {}}
+      />
+    </>
+  ),
+  ...withRTLDiff(),
+};
+
+const containerStyle: React.CSSProperties = {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'flex-start',
+  minHeight: '24rem',
+  paddingTop: '2rem',
+  width: '100%',
+};
+
+export const OpenCalendarPanel: Story = {
+  render: () => (
+    <div style={containerStyle}>
+      <DateLookup
+        label="Select date"
+        placeholder="Choose a date"
+        value={selectedDate}
+        onChange={() => {}}
+      />
+    </div>
+  ),
+  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.queryByRole('button');
+    if (!trigger) return;
+    await userEvent.click(trigger);
+    // Suppress focus ring on calendar cells — FocusScope traps focus inside the panel
+    // and the autofocus cycle causes the selected date's ring to flicker between iframes.
+    const style = canvasElement.ownerDocument.createElement('style');
+    style.textContent = ` 
+    .np-panel__content *:focus { 
+      outline: none !important; 
+      box-shadow: none !important; 
+    }`;
+    canvasElement.ownerDocument.head.appendChild(style);
+  },
+  ...withRTLDiff({ renderAs: 'iframe' }),
+};

package/src/Decision/_stories/Decision.test.story.tsx

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { Size } from '../../common';
+import Decision, { DecisionPresentation, DecisionType } from '..';
+import AvatarView from '../../AvatarView';
+
+export default {
+  component: Decision,
+  title: 'Layouts/Decision/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Decision>;
+
+type Story = StoryObj<typeof Decision>;
+
+const options = [
+  {
+    title: 'Send money',
+    description: 'Fast international transfers.',
+    href: '#',
+    'aria-label': 'Send money',
+    media: {
+      block: <img src="https://wise.com/public-resources/assets/illustrations/globe.svg" alt="" />,
+      list: <AvatarView profileName="Alice Smith" />,
+    },
+  },
+  {
+    title: 'Receive money',
+    description: 'Get paid from abroad.',
+    href: '#',
+    'aria-label': 'Receive money',
+    media: {
+      block: <img src="https://wise.com/public-resources/assets/illustrations/globe.svg" alt="" />,
+      list: <AvatarView profileName="Alice Smith" />,
+    },
+  },
+];
+
+/**
+ * NavigationOption renders media on the inline-start side and a chevron on the
+ * inline-end side; these flip in RTL. The LIST_BLOCK and LIST_BLOCK_GRID
+ * presentations use flex-row layout that also reverses direction in RTL.
+ */
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <Decision
+        options={options}
+        presentation={DecisionPresentation.LIST}
+        type={DecisionType.NAVIGATION}
+      />
+      <Decision
+        options={options}
+        presentation={DecisionPresentation.LIST}
+        type={DecisionType.NAVIGATION}
+        isContainerAligned
+      />
+      <Decision
+        options={options}
+        presentation={DecisionPresentation.LIST_BLOCK}
+        type={DecisionType.NAVIGATION}
+        size={Size.MEDIUM}
+      />
+      <Decision
+        options={options}
+        presentation={DecisionPresentation.LIST_BLOCK}
+        type={DecisionType.NAVIGATION}
+        size={Size.SMALL}
+      />
+      <Decision
+        options={[...options, ...options]}
+        presentation={DecisionPresentation.LIST_BLOCK_GRID}
+        type={DecisionType.NAVIGATION}
+        size={Size.MEDIUM}
+      />
+    </>
+  ),
+  ...withRTLDiff(),
+};

package/src/DefinitionList/_stories/DefinitionList.test.story.tsx

@@ -1,9 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { expect } from 'storybook/test';
 
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import { Layout } from '../../common';
 
-import DefinitionList, { type DefinitionListDefinition } from '..';
+import DefinitionList, { type DefinitionListDefinition, type DefinitionListLayout } from '..';
 
 const longValues = {
   amount: '1,234,567.89 GBP from your Wise Business account ending in 4821',
@@ -166,3 +167,55 @@ export const HORIZONTAL_RIGHT_ALIGNED: Story = {
   ),
   play: verifySharedColumnBoundary,
 };
+
+const rtlDefinitions: DefinitionListDefinition[] = [
+  { key: 'name', title: 'Full name', value: 'Alice Smith' },
+  { key: 'amount', title: 'Amount sent', value: '1,234.56 GBP' },
+  { key: 'status', title: 'Transfer status', value: 'Completed successfully' },
+];
+
+const rtlDefinitionsWithAction: DefinitionListDefinition[] = [
+  { key: 'name', title: 'Full name', value: 'Alice Smith' },
+  {
+    key: 'amount',
+    title: 'Amount sent',
+    value: '1,234.56 GBP',
+    action: { label: 'Edit' },
+  },
+  {
+    key: 'status',
+    title: 'Transfer status',
+    value: 'Completed successfully',
+    action: { label: 'View details' },
+  },
+];
+
+const layouts: DefinitionListLayout[] = [
+  'VERTICAL_TWO_COLUMN',
+  'VERTICAL_ONE_COLUMN',
+  'HORIZONTAL_JUSTIFIED',
+  'HORIZONTAL_LEFT_ALIGNED',
+  'HORIZONTAL_RIGHT_ALIGNED',
+];
+
+export const RTLDiff: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--size-48)' }}>
+      {layouts.map((layout) => (
+        <section key={layout}>
+          <h3 style={{ fontSize: 14, margin: '0 0 var(--size-8)' }}>{layout}</h3>
+          <DefinitionList layout={layout} definitions={rtlDefinitions} />
+        </section>
+      ))}
+      {layouts.map((layout) => (
+        <section key={`${layout}-action`}>
+          <h3 style={{ fontSize: 14, margin: '0 0 var(--size-8)' }}>
+            {layout} with action buttons
+          </h3>
+          <DefinitionList layout={layout} definitions={rtlDefinitionsWithAction} />
+        </section>
+      ))}
+    </div>
+  ),
+  ...withRTLDiff(),
+};

package/src/Drawer/_stories/Drawer.rtl.test.story.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import Drawer from '..';
+
+export default {
+  component: Drawer,
+  title: 'Dialogs/Drawer/Tests/RTL Diff',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Drawer>;
+
+type Story = StoryObj<typeof Drawer>;
+
+const iframeDiff = withRTLDiff({ renderAs: 'iframe' });
+
+export const PositionRight: Story = {
+  render: () => (
+    <Drawer
+      open
+      position="right"
+      headerTitle="Drawer title"
+      footerContent={<button type="button">Done</button>}
+      onClose={() => {}}
+    >
+      <p>Drawer body content.</p>
+    </Drawer>
+  ),
+  ...iframeDiff,
+};
+
+export const PositionLeft: Story = {
+  render: () => (
+    <Drawer
+      open
+      position="left"
+      headerTitle="Left drawer title"
+      footerContent={<button type="button">Done</button>}
+      onClose={() => {}}
+    >
+      <p>Left drawer body content.</p>
+    </Drawer>
+  ),
+  ...iframeDiff,
+};
+
+export const WithoutTitle: Story = {
+  render: () => (
+    <Drawer
+      open
+      position="right"
+      footerContent={<button type="button">Done</button>}
+      onClose={() => {}}
+    >
+      <p>No title drawer content.</p>
+    </Drawer>
+  ),
+  ...iframeDiff,
+};