@transferwise/components 0.0.0-experimental-a1b5585 → 0.0.0-experimental-999c033

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

@@ -10,45 +10,28 @@ export default {
 
 type Story = StoryObj<typeof Nudge>;
 
-const MEDIA_NAMES = [
-  'globe',
-  'lock',
-  'wallet',
-  'gear',
-  'invite-letter',
-  'personal-card',
-  'business-card',
-  'heart',
-  'multi-currency',
-  'shopping-bag',
-  'flower',
-  'gift-box',
-  'backpack',
-  'documents',
-] as const;
-
 export const RTLDiff: Story = {
   render: () => (
     <>
-      {MEDIA_NAMES.map((mediaName) => (
-        <Nudge
-          key={mediaName}
-          mediaName={mediaName}
-          title={mediaName}
-          link="Link"
-          href="#"
-          onDismiss={() => {}}
-        />
-      ))}
       <Nudge
         mediaName="globe"
-        title="With action"
+        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({ width: 'stretch' }),
+  ...withRTLDiff(),
 };

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

@@ -1,5 +1,4 @@
 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';
@@ -7,13 +6,21 @@ import PhoneNumberInput from '..';
 
 export default {
   component: PhoneNumberInput,
-  title: 'Forms/PhoneNumberInput/Tests/RTL Diff',
+  title: 'Forms/PhoneNumberInput/Tests',
   tags: ['!autodocs', '!manifest'],
 } satisfies Meta<typeof PhoneNumberInput>;
 
 type Story = StoryObj<typeof PhoneNumberInput>;
 
-export const Sizes: Story = {
+/**
+ * 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)">
@@ -35,18 +42,3 @@ export const Sizes: Story = {
   ),
   ...withRTLDiff(),
 };
-
-export const DropdownOpen: Story = {
-  render: () => (
-    <Field label="Phone number">
-      <PhoneNumberInput onChange={() => {}} />
-    </Field>
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const trigger = canvas.queryByRole('combobox');
-    if (!trigger) return;
-    await userEvent.click(trigger);
-  },
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center' }),
-};

package/src/ProcessIndicator/ProcessIndicator.tsx

@@ -3,7 +3,7 @@ import { Component } from 'react';
 
 import { Status, Size } from '../common';
 
-const radius = { xxs: 5, xs: 11, sm: 22, xl: 61 };
+const radius = { xxs: 6, xs: 11, sm: 22, xl: 61 };
 
 const ANIMATION_DURATION_IN_MS = 1500;
 

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import ProgressBar from '..';
 
 export default {
@@ -12,36 +12,22 @@ export default {
 type Story = StoryObj<typeof ProgressBar>;
 
 export const RTLDiff: Story = {
-  render: () => {
-    const i18n = useRtlDiffI18n();
-    return (
-      <>
-        <ProgressBar
-          id="progress-bar-with-description"
-          title={i18n.title1}
-          description={i18n.description}
-          progress={{ value: 50, max: 100 }}
-          textEnd={i18n.textEnd1}
-        />
-        <ProgressBar
-          id="progress-bar-without-description"
-          title={i18n.title2}
-          progress={{ value: 800, max: 1000 }}
-          textEnd={i18n.textEnd2}
-        />
-      </>
-    );
-  },
-  ...withRTLDiff({
-    i18n: {
-      title1: { ltr: 'Send 5,550 GBP', rtl: 'أرسل ٥٬٥٥٠ جنيه إسترليني' },
-      description: {
-        ltr: 'You have 3 days to reach your goal.',
-        rtl: 'لديك ٣ أيام للوصول إلى هدفك.',
-      },
-      textEnd1: { ltr: '200 GBP to go', rtl: '٢٠٠ جنيه إسترليني متبقي' },
-      title2: { ltr: 'Total limit', rtl: 'الحد الإجمالي' },
-      textEnd2: { ltr: '200 GBP remaining', rtl: '٢٠٠ جنيه إسترليني متبقي' },
-    },
-  }),
+  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/SlidingPanel/SlidingPanel.css

@@ -73,10 +73,6 @@
   box-shadow: inset 1px 0 0 0 rgba(0,0,0,0.10196);
   box-shadow: inset 1px 0 0 0 var(--color-border-neutral);
 }
-[dir="rtl"] .np-theme-personal .sliding-panel.sliding-panel--border-right {
-  box-shadow: inset -1px 0 0 0 rgba(0,0,0,0.10196);
-  box-shadow: inset -1px 0 0 0 var(--color-border-neutral);
-}
 .np-theme-personal .sliding-panel.sliding-panel--border-bottom {
   box-shadow: inset 0 1px 0 0 rgba(0,0,0,0.10196);
   box-shadow: inset 0 1px 0 0 var(--color-border-neutral);
@@ -85,7 +81,3 @@
   box-shadow: inset -1px 0 0 0 rgba(0,0,0,0.10196);
   box-shadow: inset -1px 0 0 0 var(--color-border-neutral);
 }
-[dir="rtl"] .np-theme-personal .sliding-panel.sliding-panel--border-left {
-  box-shadow: inset 1px 0 0 0 rgba(0,0,0,0.10196);
-  box-shadow: inset 1px 0 0 0 var(--color-border-neutral);
-}

package/src/SlidingPanel/SlidingPanel.less

@@ -85,10 +85,6 @@
 
     &.sliding-panel--border-right {
       box-shadow: inset 1px 0 0 0 var(--color-border-neutral);
-
-      [dir="rtl"] & {
-        box-shadow: inset -1px 0 0 0 var(--color-border-neutral);
-      }
     }
 
     &.sliding-panel--border-bottom {
@@ -97,10 +93,6 @@
 
     &.sliding-panel--border-left {
       box-shadow: inset -1px 0 0 0 var(--color-border-neutral);
-
-      [dir="rtl"] & {
-        box-shadow: inset 1px 0 0 0 var(--color-border-neutral);
-      }
     }
   }
 }

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

@@ -11,15 +11,14 @@ export default {
 
 type Story = StoryObj<typeof SlidingPanel>;
 
-const iframeDiff = withRTLDiff({ renderAs: 'iframe', width: 'stretch' });
+const iframeDiff = withRTLDiff({ renderAs: 'iframe' });
 
 const containerStyle: React.CSSProperties = {
   position: 'relative',
-  width: '100%',
+  width: 300,
   height: 120,
   overflow: 'hidden',
-  border: '1px solid #f5f5f5',
-  background: '#f5f5f5',
+  border: '1px dashed #ccc',
 };
 
 const panelContentStyle: React.CSSProperties = {

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
@@ -6,38 +6,40 @@ import { Snackbar } from '../Snackbar';
 
 export default {
   component: Snackbar,
-  title: 'Prompts/Snackbar/Tests/RTL Diff',
+  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 SnackbarStory({ action }: { action?: { label: string } }) {
-  const [timestamp, setTimestamp] = useState(0);
-
-  useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect
-    setTimestamp(1);
-  }, []);
+function RenderWithAction() {
+  const [timestamp] = useState(() => Date.now());
 
   return (
     <Snackbar
       text={<span>Transfer completed successfully</span>}
       timestamp={timestamp}
       timeout={TIMEOUT}
-      action={action}
+      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: () => <SnackbarStory action={{ label: 'View' }} />,
-  ...withRTLDiff({ renderAs: 'iframe' }),
+  render: () => <RenderWithAction />,
+  ...iframeDiff,
 };
 
 export const WithoutAction: Story = {
-  render: () => <SnackbarStory />,
-  ...withRTLDiff({ renderAs: 'iframe' }),
+  render: () => <RenderWithoutAction />,
+  ...iframeDiff,
 };

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

@@ -13,7 +13,7 @@ import SnackbarProvider from '../SnackbarProvider';
 
 const meta: Meta = {
   component: Snackbar,
-  title: 'Prompts/Snackbar',
+  title: 'Dialogs/Snackbar',
 };
 export default meta;
 

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

@@ -9,7 +9,7 @@ import { SnackbarConsumer } from '../SnackbarContext';
 import SnackbarProvider from '../SnackbarProvider';
 
 export default {
-  title: 'Prompts/Snackbar/Tests',
+  title: 'Dialogs/Snackbar/Tests',
   component: Snackbar,
   argTypes: {},
   tags: ['!autodocs', '!manifest'],

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

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import { Sentiment, Size } from '../../common';
 import SentimentSurface from '../../SentimentSurface';
+import { withVariantConfig } from '../../../.storybook/helpers';
 
 import StatusIcon, { StatusIconSentiment } from '../StatusIcon';
 
@@ -90,17 +90,9 @@ export const Variants: Story = {
   },
 };
 
-export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <StatusIcon sentiment="positive" />
-      <StatusIcon sentiment="negative" />
-      <StatusIcon sentiment="warning" />
-      <StatusIcon sentiment="neutral" />
-      <StatusIcon sentiment="pending" />
-    </>
-  ),
-  ...withRTLDiff(),
+export const RTL: Story = {
+  render: Variants.render,
+  ...withVariantConfig(['rtl']),
 };
 
 /**

package/src/UploadInput/UploadItem/UploadItem.css

@@ -41,7 +41,8 @@
 .np-upload-input__item .np-upload-input__title,
 .np-upload-input__item .np-upload-input__text {
   margin: 0;
-  text-align: start;
+  -moz-text-align-last: left;
+       text-align-last: left;
   color: #5d7079;
   color: var(--color-content-secondary);
 }
@@ -97,7 +98,7 @@
   justify-content: center;
 }
 .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:before {
-  content: "";
+  content: '';
   display: block;
   inline-size: var(--clickAreaSize);
   block-size: var(--clickAreaSize);
@@ -152,8 +153,8 @@
   padding-inline-start: var(--size-16);
 }
 .np-upload-input__item .np-upload-input-errors > li::before {
-  content: "•" ;
-  content: "•" / "";
+  content: '•' ;
+  content: '•' / '';
   position: absolute;
   display: block;
   inset-inline-start: 0;

package/src/UploadInput/UploadItem/UploadItem.less

@@ -39,7 +39,7 @@
   .np-upload-input__title,
   .np-upload-input__text {
     margin: 0;
-    text-align: left;
+    text-align-last: left;
     color: var(--color-content-secondary);
   }
 
@@ -64,7 +64,7 @@
     --buttonTopRightOffset: var(--size-16);
     // Offset towards the parent's top-right edge
     // ensuring no overflow on smaller screens
-    --clickAreaTopRightOffset: calc((var(--clickAreaSize) - var(--iconSize)) * -0.5);
+    --clickAreaTopRightOffset: calc((var(--clickAreaSize) - var(--iconSize)) * -.5);
 
     position: absolute;
     right: var(--buttonTopRightOffset);
@@ -84,16 +84,14 @@
       border: 0;
       background-color: var(--color-background-neutral);
       color: var(--color-interactive-primary);
-      transition:
-        color,
-        background-color 0.15s ease-in-out;
+      transition: color, background-color 0.15s ease-in-out;
       outline-offset: 0;
       display: flex;
       align-items: center;
       justify-content: center;
 
       &:before {
-        content: "";
+        content: '';
         display: block;
         width: var(--clickAreaSize);
         height: var(--clickAreaSize);
@@ -118,6 +116,7 @@
     padding: 0;
 
     &:hover:not(:has(.np-upload-input__item-button:hover)) {
+
       &:before,
       & + .np-upload-input__item:before {
         width: 100%;
@@ -159,7 +158,7 @@
       padding-left: var(--size-16);
 
       &::before {
-        content: "•" / "";
+        content: '•' / '';
         position: absolute;
         display: block;
         left: 0;

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

@@ -345,5 +345,5 @@ export const RTLDiff: Story = {
       />
     </>
   ),
-  ...withRTLDiff({ renderAs: 'iframe' }),
+  ...withRTLDiff(),
 };

package/src/_deprecated/Badge/Badge.css

@@ -15,14 +15,12 @@
   --badge-border-color: rgba(0, 0, 0, 0.08);
 }
 .tw-badge > .tw-badge__children {
-  --badge-h-side: left;
   -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) left calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
           mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) left calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
-  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) var(--badge-h-side) calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
-          mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) var(--badge-h-side) calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
 }
 [dir="rtl"] .tw-badge > .tw-badge__children {
-  --badge-h-side: right;
+  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
+          mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
 }
 .tw-badge > .tw-badge__content {
   position: absolute;

package/src/_deprecated/Badge/Badge.less

@@ -29,19 +29,26 @@
   }
 
   & > &__children {
-    --badge-h-side: left;
-
-    [dir="rtl"] & {
-      --badge-h-side: right;
-    }
+    // Not possible to add a logical property (inset-inline-start) to replace left position inside a gradient.
+    // RTL direction sorted out with conditional attributes.
 
     mask-image: radial-gradient(
-      circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position))
-        var(--badge-h-side) calc(100% - var(--badge-mask-offset) - var(--badge-content-position)),
+      circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) left
+        calc(100% - var(--badge-mask-offset) - var(--badge-content-position)),
       transparent 0,
       transparent calc(var(--badge-size) / 2 + var(--badge-mask)),
       black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px)
     );
+
+    [dir="rtl"] & {
+      mask-image: radial-gradient(
+        circle at top calc(100% - var(--badge-mask-offset)) right
+          calc(100% - var(--badge-mask-offset)),
+        transparent 0,
+        transparent calc(var(--badge-size) / 2 + var(--badge-mask)),
+        black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px)
+      );
+    }
   }
 
   & > &__content {

package/src/_deprecated/CriticalBanner/_stories/CriticalCommsBanner.test.story.tsx

@@ -36,6 +36,22 @@ export const Sentiments: Story = {
   ]),
 };
 
+export const RTL: Story = {
+  render: (args) => (
+    <>
+      <CriticalCommsBanner {...args} sentiment="negative" />
+      <CriticalCommsBanner {...args} sentiment="warning" />
+      <CriticalCommsBanner {...args} sentiment="neutral" />
+    </>
+  ),
+  args: {
+    subtitle: 'Add money within the next 30 days',
+    action: { label: 'Take action', href: 'https://wise.com' },
+    className: 'm-b-1',
+  },
+  ...withVariantConfig(['rtl']),
+};
+
 export const Mobile: Story = {
   args: {
     subtitle: 'Add money within the next 30 days',

package/src/_deprecated/OverlayHeader/_stories/OverlayHeader.test.story.tsx

@@ -40,18 +40,3 @@ export const RTLDiff: Story = {
   ),
   ...withRTLDiff(),
 };
-
-export const RTLDiffMobile: Story = {
-  render: () => (
-    <OverlayHeader
-      logo={<Logo />}
-      avatar={
-        <AvatarView>
-          <Person size="24" />
-        </AvatarView>
-      }
-      onClose={() => {}}
-    />
-  ),
-  ...withRTLDiff({ viewport: 'largeMobile' }),
-};