@transferwise/components 46.158.0 → 46.159.1

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

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import Field from '../../Field/Field';
+import PhoneNumberInput from '..';
+
+export default {
+  component: PhoneNumberInput,
+  title: 'Forms/PhoneNumberInput/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof PhoneNumberInput>;
+
+type Story = StoryObj<typeof PhoneNumberInput>;
+
+/**
+ * The country code selector sits on the inline-start side of the phone number input.
+ * In RTL the two elements should swap sides — the selector moves to the right and
+ * the text field moves to the left. This diff verifies the flex row reverses correctly.
+ *
+ * Size variants are included because the size prop changes the input-group class and
+ * may affect spacing between the two sub-inputs.
+ */
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <Field label="Default (md)">
+        <PhoneNumberInput onChange={() => {}} />
+      </Field>
+
+      <Field label="Small (sm)">
+        <PhoneNumberInput size="sm" onChange={() => {}} />
+      </Field>
+
+      <Field label="Large (lg)">
+        <PhoneNumberInput size="lg" onChange={() => {}} />
+      </Field>
+
+      <Field label="With initial value">
+        <PhoneNumberInput initialValue="+447573135343" onChange={() => {}} />
+      </Field>
+    </>
+  ),
+  ...withRTLDiff(),
+};

package/src/PocketSurface/PocketSurface.css

@@ -21,7 +21,6 @@
   --color-background-screen: #a0e1e1;
 }
 
-
 .wds-pocket-bright-orange {
   --color-content-primary: #260a2f;
   --color-content-secondary: #110415;
@@ -40,7 +39,6 @@
   --color-background-screen: #ffc091;
 }
 
-
 .wds-pocket-bright-pink {
   --color-content-primary: #320707;
   --color-content-secondary: #160303;
@@ -59,7 +57,6 @@
   --color-background-screen: #ffd7ef;
 }
 
-
 .wds-pocket-bright-yellow {
   --color-content-primary: #3a341c;
   --color-content-secondary: #110f08;
@@ -78,7 +75,6 @@
   --color-background-screen: #ffeb69;
 }
 
-
 .wds-pocket-dark-charcoal {
   --color-content-primary: #a0e1e1;
   --color-content-secondary: #ecf9f9;
@@ -97,7 +93,6 @@
   --color-background-screen: #21231d;
 }
 
-
 .wds-pocket-dark-gold {
   --color-content-primary: #ffeb69;
   --color-content-secondary: #fffce5;
@@ -116,7 +111,6 @@
   --color-background-screen: #3a341c;
 }
 
-
 .wds-pocket-dark-maroon {
   --color-content-primary: #ffd7ef;
   --color-content-secondary: #ffe5f5;
@@ -135,7 +129,6 @@
   --color-background-screen: #320707;
 }
 
-
 .wds-pocket-dark-purple {
   --color-content-primary: #ffc091;
   --color-content-secondary: #fff0e5;
@@ -153,11 +146,9 @@
   --color-interactive-control-active: #471358;
   --color-background-screen: #260a2f;
 }
-
-
 .wds-pocket-surface {
   background-color: #ffffff;
   background-color: var(--color-background-screen);
-  color: #37517e;
-  color: var(--color-content-primary);
+  color: #5d7079;
+  color: var(--color-content-secondary);
 }

package/src/PocketSurface/PocketSurface.less

@@ -2,5 +2,5 @@
 
 .wds-pocket-surface {
   background-color: var(--color-background-screen);
-  color: var(--color-content-primary);
+  color: var(--color-content-secondary);
 }

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

@@ -0,0 +1,96 @@
+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 { Position } from '../../common';
+import Popover from '..';
+
+export default {
+  component: Popover,
+  title: 'Dialogs/Popover/Tests/RTL Diff',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Popover>;
+
+type Story = StoryObj<typeof Popover>;
+
+const iframeDiff = withRTLDiff({ renderAs: 'iframe' });
+
+const containerStyle: React.CSSProperties = {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  minHeight: '24rem',
+  width: '100%',
+};
+
+const clickTrigger = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+  const canvas = within(canvasElement);
+  const trigger = canvas.queryByRole('button');
+  if (!trigger) return;
+  await userEvent.click(trigger);
+};
+
+export const PlacementRight: Story = {
+  render: () => (
+    <div style={containerStyle}>
+      <Popover
+        preferredPlacement={Position.RIGHT}
+        title="Guaranteed rate"
+        content="You'll get this rate as long as we receive your 10 EUR within the next 51 hours."
+      >
+        <Button v2>Placement right</Button>
+      </Popover>
+    </div>
+  ),
+  play: clickTrigger,
+  ...iframeDiff,
+};
+
+export const PlacementLeft: Story = {
+  render: () => (
+    <div style={containerStyle}>
+      <Popover
+        preferredPlacement={Position.LEFT}
+        title="Guaranteed rate"
+        content="You'll get this rate as long as we receive your 10 EUR within the next 51 hours."
+      >
+        <Button v2>Placement left</Button>
+      </Popover>
+    </div>
+  ),
+  play: clickTrigger,
+  ...iframeDiff,
+};
+
+export const PlacementTop: Story = {
+  render: () => (
+    <div style={containerStyle}>
+      <Popover
+        preferredPlacement={Position.TOP}
+        title="Guaranteed rate"
+        content="You'll get this rate as long as we receive your 10 EUR within the next 51 hours."
+      >
+        <Button v2>Placement top</Button>
+      </Popover>
+    </div>
+  ),
+  play: clickTrigger,
+  ...iframeDiff,
+};
+
+export const PlacementBottom: Story = {
+  render: () => (
+    <div style={containerStyle}>
+      <Popover
+        preferredPlacement={Position.BOTTOM}
+        title="Guaranteed rate"
+        content="You'll get this rate as long as we receive your 10 EUR within the next 51 hours."
+      >
+        <Button v2>Placement bottom</Button>
+      </Popover>
+    </div>
+  ),
+  play: clickTrigger,
+  ...iframeDiff,
+};

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

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import Progress from '..';
+
+export default {
+  component: Progress,
+  title: 'Other/Progress/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Progress>;
+
+type Story = StoryObj<typeof Progress>;
+
+/**
+ * The native <progress> element fills in the inline direction,
+ * so partial progress flips from left-to-right to right-to-left in RTL.
+ */
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <Progress id="progress-quarter" progress={{ value: 25, max: 100 }} />
+      <Progress id="progress-half" progress={{ value: 50, max: 100 }} />
+      <Progress id="progress-three-quarters" progress={{ value: 75, max: 100 }} />
+    </>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import ProgressBar from '..';
+
+export default {
+  component: ProgressBar,
+  title: 'Content/ProgressBar/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof ProgressBar>;
+
+type Story = StoryObj<typeof ProgressBar>;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <ProgressBar
+        id="progress-bar-with-description"
+        title="Send 5,550 GBP"
+        description="You have 3 days to reach your goal."
+        progress={{ value: 50, max: 100 }}
+        textEnd="200 GBP to go"
+      />
+      <ProgressBar
+        id="progress-bar-without-description"
+        title="Total limit"
+        progress={{ value: 800, max: 1000 }}
+        textEnd="200 GBP remaining"
+      />
+    </>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import PromoCard from '..';
+
+export default {
+  component: PromoCard,
+  title: 'Layouts/PromoCard/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof PromoCard>;
+
+type Story = StoryObj<typeof PromoCard>;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <PromoCard
+        title="Link with arrow"
+        description="Indicator arrow icon flips in RTL."
+        href="#"
+        indicatorLabel="Free"
+        imageSource="https://wise.com/web-art/assets/illustrations/digital-card-2-medium@2x.webp"
+      />
+      <PromoCard
+        title="Checkbox checked"
+        description="Check icon positioned at the end."
+        type="checkbox"
+        defaultChecked
+        indicatorLabel="Selected"
+        imageSource="https://wise.com/web-art/assets/illustrations/digital-card-2-medium@2x.webp"
+      />
+      <PromoCard
+        title="Download indicator"
+        description="Download icon in the indicator area."
+        href="#"
+        download="file.pdf"
+        indicatorLabel="Download"
+        imageSource="https://wise.com/web-art/assets/illustrations/digital-card-2-medium@2x.webp"
+      />
+    </>
+  ),
+  ...withRTLDiff(),
+};

package/src/PromoCard/_stories/PromoCardGroup.test.story.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import PromoCard from '../PromoCard';
+import PromoCardGroup from '../CardGroup/PromoCardGroup';
+
+export default {
+  component: PromoCardGroup,
+  title: 'Layouts/PromoCardGroup/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof PromoCardGroup>;
+
+type Story = StoryObj<typeof PromoCardGroup>;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <PromoCardGroup>
+      <PromoCard
+        title="Digital"
+        description="A card that lives online and works anywhere."
+        type="radio"
+        value="digital"
+        id="digital"
+        indicatorLabel="Free"
+        imageAlt=""
+        imageSource="https://wise.com/web-art/assets/illustrations/digital-card-2-medium@2x.webp"
+      />
+      <PromoCard
+        title="Standard"
+        description="Spend and withdraw money around the world."
+        type="radio"
+        value="standard"
+        id="standard"
+        indicatorLabel="7 GBP"
+        imageAlt=""
+        imageSource="https://wise.com/web-art/assets/illustrations/personal-card-medium@2x.webp"
+      />
+      <PromoCard
+        title="Eco"
+        description="A debit card made to biodegrade."
+        type="radio"
+        value="eco"
+        id="eco"
+        indicatorLabel="9 GBP"
+        imageAlt=""
+        imageSource="https://wise.com/web-art/assets/illustrations/eco-card-medium@2x.webp"
+      />
+    </PromoCardGroup>
+  ),
+  ...withRTLDiff(),
+};

package/src/Prompt/ActionPrompt/_stories/ActionPrompt.test.story.tsx

@@ -1,11 +1,12 @@
 import { ReactElement } from 'react';
-import { Freeze, People, Suitcase } from '@transferwise/icons';
+import { Bank, Freeze, People, Suitcase } from '@transferwise/icons';
 import { action } from 'storybook/actions';
 import { fn } from 'storybook/test';
 import { ActionPrompt } from '../ActionPrompt';
 import { Body, Title } from '../../..';
 import { StoryObj } from '@storybook/react-webpack5';
 import { allModes } from '../../../../.storybook/modes';
+import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
 import { withVariantConfig } from '../../../../.storybook/helpers';
 import { lorem10 } from '../../../test-utils';
 
@@ -272,3 +273,43 @@ export const Responsiveness: Story = {
     },
   },
 };
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <ActionPrompt
+        title="Default status icon"
+        description="No media provided, uses default sentiment icon."
+        action={{ label: 'Continue' }}
+      />
+      <ActionPrompt
+        title="Custom image"
+        description="Media with a custom image source."
+        media={{ imgSrc: '../../wise-card.svg' }}
+        action={{ label: 'View card' }}
+      />
+      <ActionPrompt
+        title="Avatar with icon"
+        description="Media with an avatar containing a custom icon."
+        media={{ avatar: { asset: <Bank /> } }}
+        action={{ label: 'Connect bank' }}
+      />
+      <ActionPrompt
+        title="Primary and secondary actions"
+        description="Both action buttons present."
+        media={{ avatar: { asset: <Bank /> } }}
+        action={{ label: 'Confirm' }}
+        actionSecondary={{ label: 'Cancel' }}
+      />
+      <ActionPrompt
+        title="Dismissible with two actions"
+        description="Close button and both action buttons."
+        media={{ avatar: { asset: <Bank /> } }}
+        action={{ label: 'Confirm' }}
+        actionSecondary={{ label: 'Cancel' }}
+        onDismiss={() => {}}
+      />
+    </>
+  ),
+  ...withRTLDiff(),
+};

package/src/Prompt/CriticalBanner/_stories/CriticalBanner.test.story.tsx

@@ -3,6 +3,7 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
 import { Bank } from '@transferwise/icons';
 import Button from '../../../Button';
+import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
 import { withVariantConfig } from '../../../../.storybook/helpers';
 import { CriticalBanner } from '../CriticalBanner';
 
@@ -325,37 +326,6 @@ export const LiveRegionAnnouncements: Story = {
   },
 };
 
-/** Right-to-left layout regression test. */
-export const RTL: Story = {
-  render: function Render() {
-    const [expanded, setExpanded] = useState(true);
-    const [collapsed, setCollapsed] = useState(false);
-
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', width: '100%' }}>
-        <CriticalBanner
-          sentiment="negative"
-          title="Your account requires verification"
-          description="Please verify your identity to continue using all features."
-          action={{ label: 'Verify now', onClick: fn() }}
-          actionSecondary={{ label: 'Learn more', onClick: fn() }}
-          expanded={expanded}
-          onToggle={() => setExpanded(!expanded)}
-        />
-        <CriticalBanner
-          sentiment="warning"
-          title="Collapsed state"
-          description="This banner is collapsed."
-          action={{ label: 'Take action', onClick: fn() }}
-          expanded={collapsed}
-          onToggle={() => setCollapsed(!collapsed)}
-        />
-      </div>
-    );
-  },
-  ...withVariantConfig(['rtl']),
-};
-
 /** 400% zoom regression test with all variants. */
 export const Zoom400: Story = {
   render: () => <AllVariants gap="2rem" />,
@@ -489,3 +459,36 @@ export const UncontrolledStateInteraction: Story = {
     },
   },
 };
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <CriticalBanner title="Title only" description="Description without actions or media." />
+      <CriticalBanner
+        title="With primary action"
+        description="Banner with a single action button."
+        action={{ label: 'Verify now' }}
+      />
+      <CriticalBanner
+        title="With both actions"
+        description="Banner with primary and secondary actions."
+        action={{ label: 'Verify now' }}
+        actionSecondary={{ label: 'Learn more' }}
+      />
+      <CriticalBanner
+        title="With media image"
+        description="Banner with a custom image."
+        media={{ imgSrc: '../../wise-card.svg', 'aria-label': 'Wise card' }}
+        action={{ label: 'Take action' }}
+      />
+      <CriticalBanner
+        title="With avatar media"
+        description="Banner with an avatar icon."
+        media={{ avatar: { asset: <Bank /> } }}
+        action={{ label: 'Connect bank' }}
+        actionSecondary={{ label: 'Learn more' }}
+      />
+    </>
+  ),
+  ...withRTLDiff(),
+};

package/src/Prompt/InfoPrompt/_stories/InfoPrompt.test.story.tsx

@@ -5,6 +5,7 @@ import { action } from 'storybook/actions';
 import { Star } from '@transferwise/icons';
 import { InfoPrompt, type InfoPromptProps } from '../InfoPrompt';
 import { allModes } from '../../../../.storybook/modes';
+import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
 import { withVariantConfig } from '../../../../.storybook/helpers';
 
 const withComponentGrid =
@@ -553,3 +554,27 @@ export const LiveRegionDismiss: Story = {
     );
   },
 };
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <InfoPrompt description="Basic description only." />
+      <InfoPrompt title="With Title" description="Description with a title above it." />
+      <InfoPrompt description="Dismissible prompt." onDismiss={() => {}} />
+      <InfoPrompt
+        title="With Action"
+        description="Description with an action link below."
+        action={{ label: 'Learn more', href: '#' }}
+      />
+      <InfoPrompt description="Custom media icon." media={{ asset: <Star title="Starred" /> }} />
+      <InfoPrompt
+        title="All Options"
+        description="Title, action, dismiss, and custom media combined."
+        media={{ asset: <Star title="Starred" /> }}
+        action={{ label: 'View details', href: '#' }}
+        onDismiss={() => {}}
+      />
+    </>
+  ),
+  ...withRTLDiff(),
+};

package/src/Prompt/InlinePrompt/_stories/InlinePrompt.test.story.tsx

@@ -2,6 +2,7 @@ import { StoryObj } from '@storybook/react-webpack5';
 import { Suitcase } from '@transferwise/icons';
 import { InlinePrompt } from '../InlinePrompt';
 import { withVariantConfig } from '../../../../.storybook/helpers';
+import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
 
 export default {
   title: 'Prompts/InlinePrompt/Tests',
@@ -19,3 +20,29 @@ export const TinyScreen: Story = {
   ),
   ...withVariantConfig(['400%']),
 };
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      {/* default icon at inline-start, auto width */}
+      <InlinePrompt sentiment="positive">Short content with default icon.</InlinePrompt>
+
+      {/* custom media icon, auto width */}
+      <InlinePrompt sentiment="positive" media={<Suitcase />}>
+        Custom icon with auto width.
+      </InlinePrompt>
+
+      {/* full width — icon position flips */}
+      <InlinePrompt sentiment="positive" media={<Suitcase />} width="full">
+        Custom icon with full width.
+      </InlinePrompt>
+
+      {/* multi-line content — verifies wrapping alignment */}
+      <InlinePrompt sentiment="warning" width="full">
+        This prompt has longer content that may wrap to multiple lines to verify that the icon
+        alignment remains correct in RTL layout.
+      </InlinePrompt>
+    </>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Flag } from '@wise/art';
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import AvatarView from '../../AvatarView';
+import Radio from '../Radio';
+
+export default {
+  component: Radio,
+  title: 'Forms/Radio/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Radio>;
+
+type Story = StoryObj<typeof Radio>;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <Radio
+        label="Standard option"
+        name="radio-rtl"
+        id="radio-rtl-basic"
+        value="basic"
+        onChange={() => {}}
+      />
+      <Radio
+        label="Option with secondary text"
+        secondary="Secondary description"
+        name="radio-rtl"
+        id="radio-rtl-secondary"
+        value="secondary"
+        onChange={() => {}}
+      />
+      <Radio
+        label="Option with avatar"
+        name="radio-rtl"
+        id="radio-rtl-avatar"
+        value="avatar"
+        avatar={
+          <AvatarView size={40}>
+            <Flag code="IM" />
+          </AvatarView>
+        }
+        onChange={() => {}}
+      />
+      <Radio
+        label="Option with secondary text and avatar"
+        secondary="Secondary description"
+        name="radio-rtl"
+        id="radio-rtl-secondary-avatar"
+        value="secondary-avatar"
+        avatar={
+          <AvatarView size={40}>
+            <Flag code="IM" />
+          </AvatarView>
+        }
+        onChange={() => {}}
+      />
+    </>
+  ),
+  ...withRTLDiff(),
+};