@transferwise/components 46.159.0 → 46.159.2

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

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import Link from '..';
+
+export default {
+  component: Link,
+  title: 'Typography/Link/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Link>;
+
+type Story = StoryObj<typeof Link>;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <Link href="#" target="_blank">
+        External link with navigate-away icon
+      </Link>
+      <br />
+      <Link href="#" target="_blank" type="link-large">
+        Large external link with navigate-away icon
+      </Link>
+    </>
+  ),
+  ...withRTLDiff(),
+};

package/src/ListItem/ListItem.css

@@ -619,6 +619,7 @@
 .wds-list-item-spotlight-inactive {
   background-color: rgba(134, 167, 189, 0.025);
 }
+
 @supports (color: color-mix(in lch, red, blue)) {
 .wds-list-item-spotlight-inactive {
   background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);

package/src/ListItem/_stories/{variants/ListItem.rtl.test.story.tsx → ListItem.rtl.test.story.tsx}

@@ -1,22 +1,18 @@
 import { Meta } from '@storybook/react-webpack5';
-import { ListItem, type ListItemProps } from '../../ListItem';
-import { VariantStory } from './helpers';
-import { withVariantConfig } from '../../../../.storybook/helpers';
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { ListItem, type ListItemProps } from '../ListItem';
+import { VariantStory } from './variants/helpers';
 
 export default {
   component: ListItem,
-  title: 'Content/ListItem/Tests/variants/rtl',
+  title: 'Content/ListItem/Tests/RTL Diff',
   tags: ['!autodocs', '!manifest'],
-  parameters: {
-    controls: { disable: true },
-    actions: { disable: true },
-    knobs: { disable: true },
-  },
+  ...withRTLDiff({ width: 'stretch' }),
 } satisfies Meta<ListItemProps>;
 
 const Default = {
   ...VariantStory,
-  ...withVariantConfig(['rtl'], VariantStory),
+  parameters: { variants: [] },
   args: { variant: 'rtl' },
 };
 

package/src/ListItem/_stories/variants/helpers.tsx

@@ -141,12 +141,8 @@ export const VariantStory: VariantStory = {
 
     return (
       <List>
-        {instances.map((instance) => (
-          <ListItem
-            key={`${variant}-${controlType}-${JSON.stringify(instance)}`}
-            control={control}
-            {...instance}
-          />
+        {instances.map((instance, index) => (
+          <ListItem key={`${variant}-${controlType}-${index}`} control={control} {...instance} />
         ))}
       </List>
     );

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

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import Logo, { LogoType } from '..';
 import { LogoFormat } from '../Logo';
 import type { LogoSize } from '../Logo';
@@ -93,3 +94,46 @@ export const Sizes = () => (
     )}
   </div>
 );
+
+const rtlSizes: LogoSize[] = [16, 20, 24, 36];
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: `repeat(${rtlSizes.length}, min-content)`,
+          gap: '1rem',
+          alignItems: 'center',
+        }}
+      >
+        {rtlSizes.map((size) => (
+          <Logo key={`compact-${size}`} size={size} display="compact" />
+        ))}
+      </div>
+
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: `repeat(${rtlSizes.length}, min-content)`,
+          gap: '1rem',
+          alignItems: 'center',
+        }}
+      >
+        {rtlSizes.map((size) => (
+          <Logo key={`full-${size}`} size={size} display="full" />
+        ))}
+      </div>
+
+      {Object.values(LogoType).map((type) => (
+        <Logo key={`primary-${type}`} type={type} format="primary-lockup" display="full" />
+      ))}
+
+      {Object.values(LogoType).map((type) => (
+        <Logo key={`secondary-${type}`} type={type} format="secondary-lockup" display="full" />
+      ))}
+    </>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { Button, Modal } from '../..';
+
+export default {
+  component: Modal,
+  title: 'Dialogs/Modal/Tests/RTL Diff',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Modal>;
+
+type Story = StoryObj<typeof Modal>;
+
+const iframeDiff = withRTLDiff({ renderAs: 'iframe' });
+
+export const WithTitleAndFooter: Story = {
+  render: () => (
+    <Modal
+      open
+      title="Modal title"
+      body="Body content for the modal dialog."
+      footer={
+        <Button v2 block>
+          Confirm
+        </Button>
+      }
+      onClose={() => {}}
+    />
+  ),
+  ...iframeDiff,
+};
+
+export const WithoutFooter: Story = {
+  render: () => (
+    <Modal
+      open
+      title="Modal without footer"
+      body="Body content without a footer."
+      onClose={() => {}}
+    />
+  ),
+  ...iframeDiff,
+};
+
+export const WithoutTitle: Story = {
+  render: () => (
+    <Modal
+      open
+      body="Body content without a title."
+      footer={
+        <Button v2 block>
+          Done
+        </Button>
+      }
+      onClose={() => {}}
+    />
+  ),
+  ...iframeDiff,
+};

package/src/MoneyInput/_stories/MoneyInput.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 Field from '../../Field/Field';
+import MoneyInput from '..';
+
+export default {
+  component: MoneyInput,
+  title: 'Forms/MoneyInput/Tests/RTL Diff',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof MoneyInput>;
+
+type Story = StoryObj<typeof MoneyInput>;
+
+const eurCurrency = {
+  value: 'EUR',
+  label: 'EUR',
+  note: 'Euro',
+  currency: 'eur',
+} as const;
+
+const gbpCurrency = {
+  value: 'GBP',
+  label: 'GBP',
+  note: 'British pound',
+  currency: 'gbp',
+} as const;
+
+const multipleCurrencies = [eurCurrency, gbpCurrency] as const;
+
+const sharedProps = {
+  amount: 1000,
+  id: 'money-input',
+  onAmountChange: () => {},
+  onCurrencyChange: () => {},
+} as const;
+
+export const TriggerVariants: Story = {
+  render: () => (
+    <>
+      <Field label="Single currency — large (flag + code)">
+        <MoneyInput {...sharedProps} size="lg" currencies={[]} selectedCurrency={eurCurrency} />
+      </Field>
+      <Field label="Single currency — medium (flag + code)">
+        <MoneyInput {...sharedProps} size="md" currencies={[]} selectedCurrency={eurCurrency} />
+      </Field>
+      <Field label="Single currency — small (code only)">
+        <MoneyInput {...sharedProps} size="sm" currencies={[]} selectedCurrency={eurCurrency} />
+      </Field>
+      <Field label="Multiple currencies — large (select trigger with flag)">
+        <MoneyInput
+          {...sharedProps}
+          size="lg"
+          currencies={multipleCurrencies}
+          selectedCurrency={eurCurrency}
+        />
+      </Field>
+      <Field label="Multiple currencies — small (select trigger without flag)">
+        <MoneyInput
+          {...sharedProps}
+          size="sm"
+          currencies={multipleCurrencies}
+          selectedCurrency={eurCurrency}
+        />
+      </Field>
+    </>
+  ),
+  ...withRTLDiff(),
+};
+
+export const OpenDropdown: Story = {
+  render: () => (
+    <MoneyInput
+      {...sharedProps}
+      size="lg"
+      currencies={multipleCurrencies}
+      selectedCurrency={eurCurrency}
+    />
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.queryByRole('combobox');
+    if (!trigger) return;
+    await userEvent.click(trigger);
+  },
+  ...withRTLDiff({ renderAs: 'iframe', width: '80%' }),
+};

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

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import Nudge from '../Nudge';
+
+export default {
+  component: Nudge,
+  title: 'Prompts/Nudge/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Nudge>;
+
+type Story = StoryObj<typeof Nudge>;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <Nudge
+        mediaName="globe"
+        title="With media and dismiss"
+        link="Link"
+        href="#"
+        onDismiss={() => {}}
+      />
+      <div style={{ marginTop: 16 }} />
+      <Nudge
+        mediaName="globe"
+        title="With media, action, and dismiss"
+        action={{ text: 'Learn more', href: '#' }}
+        onDismiss={() => {}}
+      />
+      <div style={{ marginTop: 16 }} />
+      <Nudge title="Without media, with dismiss" link="Link" href="#" onDismiss={() => {}} />
+      <div style={{ marginTop: 16 }} />
+      <Nudge title="Without media, no dismiss" link="Link" href="#" />
+    </>
+  ),
+  ...withRTLDiff(),
+};

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(),
+};