@transferwise/components 46.159.0 → 46.159.2

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

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import SlidingPanel from '../SlidingPanel';
+
+export default {
+  component: SlidingPanel,
+  title: 'Dialogs/SlidingPanel/Tests/RTL Diff',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof SlidingPanel>;
+
+type Story = StoryObj<typeof SlidingPanel>;
+
+const iframeDiff = withRTLDiff({ renderAs: 'iframe' });
+
+const containerStyle: React.CSSProperties = {
+  position: 'relative',
+  width: 300,
+  height: 120,
+  overflow: 'hidden',
+  border: '1px dashed #ccc',
+};
+
+const panelContentStyle: React.CSSProperties = {
+  padding: '16px',
+};
+
+export const PositionLeft: Story = {
+  render: () => (
+    <div style={containerStyle}>
+      <SlidingPanel open position="left">
+        <div style={panelContentStyle}>Left panel content</div>
+      </SlidingPanel>
+    </div>
+  ),
+  ...iframeDiff,
+};
+
+export const PositionRight: Story = {
+  render: () => (
+    <div style={containerStyle}>
+      <SlidingPanel open position="right">
+        <div style={panelContentStyle}>Right panel content</div>
+      </SlidingPanel>
+    </div>
+  ),
+  ...iframeDiff,
+};
+
+export const PositionLeftWithBorder: Story = {
+  render: () => (
+    <div style={containerStyle}>
+      <SlidingPanel open position="left" showSlidingPanelBorder>
+        <div style={panelContentStyle}>Left panel with border</div>
+      </SlidingPanel>
+    </div>
+  ),
+  ...iframeDiff,
+};
+
+export const PositionRightWithBorder: Story = {
+  render: () => (
+    <div style={containerStyle}>
+      <SlidingPanel open position="right" showSlidingPanelBorder>
+        <div style={panelContentStyle}>Right panel with border</div>
+      </SlidingPanel>
+    </div>
+  ),
+  ...iframeDiff,
+};

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

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { Snackbar } from '../Snackbar';
+
+export default {
+  component: Snackbar,
+  title: 'Dialogs/Snackbar/Tests/RTL Diff',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Snackbar>;
+
+type Story = StoryObj<typeof Snackbar>;
+
+const TIMEOUT = 10_000_000;
+const iframeDiff = withRTLDiff({ renderAs: 'iframe' });
+
+function RenderWithAction() {
+  const [timestamp] = useState(() => Date.now());
+
+  return (
+    <Snackbar
+      text={<span>Transfer completed successfully</span>}
+      timestamp={timestamp}
+      timeout={TIMEOUT}
+      action={{ label: 'View' }}
+    />
+  );
+}
+
+function RenderWithoutAction() {
+  const [timestamp] = useState(() => Date.now());
+
+  return <Snackbar text={<span>Settings saved</span>} timestamp={timestamp} timeout={TIMEOUT} />;
+}
+
+export const WithAction: Story = {
+  render: () => <RenderWithAction />,
+  ...iframeDiff,
+};
+
+export const WithoutAction: Story = {
+  render: () => <RenderWithoutAction />,
+  ...iframeDiff,
+};

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

@@ -103,37 +103,6 @@ export const DarkMode = {
   ...withVariantConfig(['dark'], Default),
 };
 
-const switchToRTL = async (context: { canvasElement: HTMLElement }) => {
-  await Default.play(context);
-  // the snackbar is outside the storybook dom so the RTL variant doesn't apply
-  const body = document.querySelector('div.storybook-container');
-  if (body) {
-    body.setAttribute('dir', 'rtl');
-  }
-  const snackbar = document.querySelector('div.snackbar');
-  if (snackbar) {
-    snackbar.setAttribute('dir', 'rtl');
-  }
-};
-
-export const RTL = {
-  ...Default,
-  args: {
-    ...Default.args,
-  },
-  play: switchToRTL,
-  ...withVariantConfig(['rtl'], Default),
-};
-
-export const RTLMobile = {
-  ...Default,
-  args: {
-    ...RTL.args,
-  },
-  play: switchToRTL,
-  ...withVariantConfig(['rtl', 'mobile'], Default),
-};
-
 export const Zoom400 = {
   ...Default,
   args: {

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

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn, within, expect, screen } from 'storybook/test';
 import Stepper from '../Stepper';
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 
 const STEPS = [
   {
@@ -88,3 +89,19 @@ export const ProgressbarWidth: Story = {
     steps: STEPS,
   },
 };
+
+const RTL_STEPS = [{ label: 'Amount' }, { label: 'You' }, { label: 'Review' }, { label: 'Pay' }];
+
+export const RTLDiff: Story = {
+  args: {
+    steps: RTL_STEPS,
+  },
+  render: () => (
+    <div style={{ width: '80%', marginLeft: 'auto', marginRight: 'auto' }}>
+      <Stepper steps={RTL_STEPS} activeStep={0} />
+      <Stepper steps={RTL_STEPS} activeStep={2} />
+      <Stepper steps={RTL_STEPS} activeStep={4} />
+    </div>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -3,6 +3,7 @@ import { expect, userEvent, within } from 'storybook/test';
 import { useState } from 'react';
 
 import { withVariantConfig } from '../../../.storybook/helpers';
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import Field from '../../Field/Field';
 import Switch from '../Switch';
 
@@ -83,32 +84,6 @@ export const KeyboardInteraction: Story = {
   },
 };
 
-/** 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() {
@@ -121,3 +96,22 @@ export const Zoom400: Story = {
   },
   ...withVariantConfig(['400%']),
 };
+
+/**
+ * The switch thumb translates horizontally: in LTR checked state it moves right,
+ * in RTL checked state it moves left (via [dir="rtl"] CSS). This diff verifies
+ * the thumb direction flips correctly between writing modes.
+ */
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <Field label="Unchecked">
+        <Switch checked={false} onClick={() => {}} />
+      </Field>
+      <Field label="Checked">
+        <Switch checked onClick={() => {}} />
+      </Field>
+    </>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { DirectDebits } from '@transferwise/icons';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import Table from '..';
+import { TableHeaderType } from '../Header/TableHeader';
+import { TableRowType, TableRowClickableType } from '../Row/TableRow';
+
+const headers: TableHeaderType[] = [
+  { header: 'Employee', width: '200px' },
+  { header: 'Location' },
+  { header: 'Payment', alignment: 'right' },
+  { header: 'Status' },
+];
+
+const rows: TableRowType[] = [
+  {
+    cells: [
+      {
+        cell: {
+          type: 'leading',
+          primaryText: 'Bob Brown',
+          secondaryText: 'Software Engineer',
+          avatar: { profileName: 'Bob Brown', badge: { flagCode: 'GBP' } },
+        },
+      },
+      { cell: { type: 'text', text: 'FR, Paris' } },
+      {
+        cell: {
+          type: 'currency',
+          primaryCurrency: { amount: 12345.67, currency: 'eur' },
+          secondaryCurrency: { amount: 11000.0, currency: 'gbp' },
+        },
+        alignment: 'right',
+      },
+      {
+        cell: {
+          type: 'status',
+          primaryText: 'Cancelled',
+          secondaryText: '1 day ago',
+          sentiment: 'negative',
+        },
+      },
+    ],
+  },
+  {
+    cells: [
+      {
+        cell: {
+          type: 'leading',
+          primaryText: 'Jan Kowalski',
+          secondaryText: 'Product Manager',
+          avatar: { asset: <DirectDebits />, badge: { status: 'warning' } },
+        },
+      },
+      { cell: { type: 'text', text: 'US, New York' } },
+      {
+        cell: {
+          type: 'currency',
+          primaryCurrency: { amount: 23456.78, currency: 'usd' },
+          secondaryCurrency: { amount: 21000.0, currency: 'gbp' },
+        },
+        alignment: 'right',
+      },
+      {
+        cell: {
+          type: 'status',
+          primaryText: 'Paid',
+          secondaryText: 'Yesterday',
+          sentiment: 'positive',
+        },
+      },
+    ],
+  },
+];
+
+export default {
+  component: Table,
+  title: 'Content/Table/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Table>;
+
+type Story = StoryObj<typeof Table>;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <Table data={{ headers, rows }} />
+      <Table
+        data={{
+          headers,
+          rows,
+          onRowClick: (rowData: TableRowType | TableRowClickableType) => {
+            void rowData;
+          },
+        }}
+      />
+      <Table data={{ headers, rows }} fullWidth={false} />
+      <Table data={{ headers, rows: [] }} />
+      <Table data={{ headers, rows }} loading />
+    </>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { Width } from '../../common';
+import Tabs from '..';
+
+export default {
+  component: Tabs,
+  title: 'Navigation/Tabs/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Tabs>;
+
+type Story = StoryObj<typeof Tabs>;
+
+const defaultTabs = [
+  { title: 'First tab', disabled: false, content: <div className="p-a-2">First content</div> },
+  { title: 'Second tab', disabled: false, content: <div className="p-a-2">Second content</div> },
+  { title: 'Third tab', disabled: false, content: <div className="p-a-2">Third content</div> },
+];
+
+/**
+ * The tab list is horizontal: tab order, the active indicator translateX, and
+ * swipe direction all flip between LTR and RTL. The indicator uses a negated
+ * translateX in RTL mode. This diff verifies the layout mirrors correctly.
+ */
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <div style={{ marginBottom: 32 }}>
+        <h4>Block width — first tab selected</h4>
+        <Tabs
+          name="rtl-block-first"
+          tabs={defaultTabs}
+          selected={0}
+          headerWidth={Width.BLOCK}
+          onTabSelect={() => {}}
+        />
+      </div>
+      <div style={{ marginBottom: 32 }}>
+        <h4>Block width — second tab selected</h4>
+        <Tabs
+          name="rtl-block-second"
+          tabs={defaultTabs}
+          selected={1}
+          headerWidth={Width.BLOCK}
+          onTabSelect={() => {}}
+        />
+      </div>
+      <div style={{ marginBottom: 32 }}>
+        <h4>Auto width — first tab selected</h4>
+        <Tabs
+          name="rtl-auto-first"
+          tabs={defaultTabs}
+          selected={0}
+          headerWidth={Width.AUTO}
+          onTabSelect={() => {}}
+        />
+      </div>
+      <div style={{ marginBottom: 32 }}>
+        <h4>Auto width — second tab selected</h4>
+        <Tabs
+          name="rtl-auto-second"
+          tabs={defaultTabs}
+          selected={1}
+          headerWidth={Width.AUTO}
+          onTabSelect={() => {}}
+        />
+      </div>
+    </>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import TextareaWithDisplayFormat from '..';
+import Field from '../../Field/Field';
+
+export default {
+  component: TextareaWithDisplayFormat,
+  title: 'Forms/TextareaWithDisplayFormat/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof TextareaWithDisplayFormat>;
+
+type Story = StoryObj<typeof TextareaWithDisplayFormat>;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <Field id="card-code" label="Gift card code">
+        <TextareaWithDisplayFormat
+          id="card-code"
+          value="1234567890123456"
+          maxLength={16}
+          displayPattern="**** - **** - ****"
+          onChange={() => {}}
+        />
+      </Field>
+      <Field id="iban" label="IBAN">
+        <TextareaWithDisplayFormat
+          id="iban"
+          value="GB29NWBK60161331926819"
+          maxLength={22}
+          displayPattern="** **** **** **** **** **"
+          onChange={() => {}}
+        />
+      </Field>
+      <Field id="empty" label="Empty with placeholder">
+        <TextareaWithDisplayFormat
+          id="empty"
+          value=""
+          displayPattern="**** - **** - ****"
+          placeholder="Enter code"
+          onChange={() => {}}
+        />
+      </Field>
+    </>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within } from 'storybook/test';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import Button from '../../Button';
+import Tooltip from '../Tooltip';
+
+export default {
+  component: Tooltip,
+  title: 'Dialogs/Tooltip/Tests/RTL Diff',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Tooltip>;
+
+type Story = StoryObj<typeof Tooltip>;
+
+const iframeDiff = withRTLDiff({ renderAs: 'iframe' });
+
+const containerStyle: React.CSSProperties = {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  minHeight: '20rem',
+  width: '100%',
+};
+
+const hoverTrigger = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+  const canvas = within(canvasElement);
+  const button = canvas.queryByRole('button');
+  if (!button) return;
+  await userEvent.hover(button);
+};
+
+export const PositionTop: Story = {
+  render: () => (
+    <div style={containerStyle}>
+      <Tooltip label="Top positioned tooltip" position="top">
+        <Button>Top</Button>
+      </Tooltip>
+    </div>
+  ),
+  play: hoverTrigger,
+  ...iframeDiff,
+};
+
+export const PositionBottom: Story = {
+  render: () => (
+    <div style={containerStyle}>
+      <Tooltip label="Bottom positioned tooltip" position="bottom">
+        <Button>Bottom</Button>
+      </Tooltip>
+    </div>
+  ),
+  play: hoverTrigger,
+  ...iframeDiff,
+};
+
+export const PositionRight: Story = {
+  render: () => (
+    <div style={containerStyle}>
+      <Tooltip label="Right positioned tooltip" position="right">
+        <Button>Right</Button>
+      </Tooltip>
+    </div>
+  ),
+  play: hoverTrigger,
+  ...iframeDiff,
+};
+
+export const PositionLeft: Story = {
+  render: () => (
+    <div style={containerStyle}>
+      <Tooltip label="Left positioned tooltip" position="left">
+        <Button>Left</Button>
+      </Tooltip>
+    </div>
+  ),
+  play: hoverTrigger,
+  ...iframeDiff,
+};

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

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within } from 'storybook/test';
+import { Search as SearchIcon } from '@transferwise/icons';
+
+import { forEachColumn, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { Size } from '../../common';
+import Typeahead from '..';
+
+export default {
+  component: Typeahead,
+  title: 'Forms/Typeahead/Tests/RTL Diff',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Typeahead>;
+
+type Story = StoryObj<typeof Typeahead>;
+
+const baseOptions = [
+  { label: 'British pound', note: 'GBP' },
+  { label: 'Euro', note: 'EUR' },
+  { label: 'US Dollar', note: 'USD' },
+];
+
+export const TriggerVariants: Story = {
+  render: () => (
+    <>
+      <Typeahead
+        id="rtl-addon-md"
+        name="rtl-addon-md"
+        placeholder="Search currencies…"
+        size={Size.MEDIUM}
+        addon={<SearchIcon size={24} />}
+        clearable
+        options={baseOptions}
+        initialValue={[{ label: 'British pound', note: 'GBP' }]}
+        onChange={() => {}}
+      />
+      <Typeahead
+        id="rtl-addon-lg"
+        name="rtl-addon-lg"
+        placeholder="Search currencies…"
+        size={Size.LARGE}
+        addon={<SearchIcon size={24} />}
+        clearable
+        options={baseOptions}
+        initialValue={[{ label: 'Euro', note: 'EUR' }]}
+        onChange={() => {}}
+      />
+      <Typeahead
+        id="rtl-multiple"
+        name="rtl-multiple"
+        placeholder="Search currencies…"
+        size={Size.MEDIUM}
+        addon={<SearchIcon size={24} />}
+        multiple
+        clearable
+        options={baseOptions}
+        initialValue={[
+          { label: 'British pound', note: 'GBP' },
+          { label: 'Euro', note: 'EUR' },
+        ]}
+        onChange={() => {}}
+      />
+    </>
+  ),
+  ...withRTLDiff({ width: '80%' }),
+};
+
+export const OpenDropdown: Story = {
+  render: () => (
+    <Typeahead
+      id="rtl-open"
+      name="rtl-open"
+      placeholder="Search currencies…"
+      size={Size.LARGE}
+      addon={<SearchIcon size={24} />}
+      clearable
+      options={baseOptions}
+      onChange={() => {}}
+    />
+  ),
+  play: async ({ canvasElement }) => {
+    await forEachColumn(canvasElement, async (column) => {
+      const scope = within(column);
+      const input = scope.getByRole('combobox');
+      await userEvent.click(input);
+      await userEvent.keyboard('Brit');
+    });
+  },
+  ...withRTLDiff({ width: '80%' }),
+};

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

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within } from 'storybook/test';
+
+import { forEachColumn, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import Upload from '..';
+
+export default {
+  component: Upload,
+  title: 'Forms/Upload/Tests/RTL Diff',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Upload>;
+
+type Story = StoryObj<typeof Upload>;
+
+export const Sizes: Story = {
+  render: () => (
+    <>
+      <Upload usLabel="Small upload" size="sm" />
+      <Upload usLabel="Medium upload" size="md" />
+      <Upload usLabel="Large upload" size="lg" />
+    </>
+  ),
+  ...withRTLDiff(),
+};
+
+export const WithError: Story = {
+  render: () => (
+    <Upload
+      usAccept="*"
+      usLabel="Upload a file"
+      usPlaceholder="Maximum filesize is 1B"
+      maxSize={1}
+      size="md"
+      httpOptions={{
+        url: 'https://httpbin.org/post',
+        method: 'POST',
+      }}
+    />
+  ),
+  play: async ({ canvasElement }) => {
+    await forEachColumn(canvasElement, async (column) => {
+      const fileInput = column.querySelector<HTMLInputElement>('input[type="file"]');
+      if (!fileInput) return;
+      const file = new File(['content larger than 1 byte'], 'test-file.txt', {
+        type: 'text/plain',
+      });
+      await userEvent.upload(fileInput, file);
+      const scope = within(column);
+      await scope.findByText(/Maximum filesize is/i, {}, { timeout: 3000 });
+    });
+  },
+  ...withRTLDiff(),
+};