@transferwise/components 0.0.0-experimental-102c421 → 0.0.0-experimental-151e673

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/SegmentedControl/SegmentedControl.css

@@ -35,7 +35,8 @@
   background: var(--color-background-screen);
   border-radius: 24px;
   border-radius: var(--size-24);
-  transition: left 300ms;
+  transition: left 300ms,
+    right 300ms;
 }
 .segmented-control__segments--no-animate::after {
   transition: none !important;

package/src/SegmentedControl/SegmentedControl.less

@@ -12,7 +12,7 @@
   justify-content: center;
   align-items: center;
   background: var(--color-background-neutral);
-  border-radius: var(--size-24);  
+  border-radius: var(--size-24);
   transition: outline 300ms;
   outline: 2px solid transparent;
 }
@@ -31,7 +31,9 @@
   z-index: 0;
   background: var(--color-background-screen);
   border-radius: var(--size-24);
-  transition: left 300ms;
+  transition:
+    left 300ms,
+    right 300ms;
 }
 
 .segmented-control__segments--no-animate::after {

package/src/SegmentedControl/SegmentedControl.tsx

@@ -3,6 +3,7 @@ import { createRef, useEffect, useRef, useState } from 'react';
 
 import Body from '../Body';
 import { Typography } from '../common';
+import { useDirection } from '../common/hooks';
 
 type SegmentBase = { id: string; label: string; value: string };
 
@@ -40,6 +41,7 @@ const SegmentedControl = ({
 }: SegmentedControlProps) => {
   const isMountedRef = useRef(false);
   const [animate, setAnimate] = useState(false);
+  const { isRTL } = useDirection();
 
   const segmentsRef = useRef<HTMLDivElement>(null);
 
@@ -62,8 +64,12 @@ const SegmentedControl = ({
     // This is so we can animate the highlight to the selected segment
     if (selectedSegmentRef?.current && segmentsRef.current) {
       const { style } = segmentsRef.current;
-      style.setProperty('--segment-highlight-width', `${selectedSegmentRef.current.offsetWidth}px`);
-      style.setProperty('--segment-highlight-x', `${selectedSegmentRef.current.offsetLeft}px`);
+      const segment = selectedSegmentRef.current;
+      const inlineOffset = isRTL
+        ? segmentsRef.current.offsetWidth - segment.offsetLeft - segment.offsetWidth
+        : segment.offsetLeft;
+      style.setProperty('--segment-highlight-width', `${segment.offsetWidth}px`);
+      style.setProperty('--segment-highlight-x', `${inlineOffset}px`);
     }
   };
 

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

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import SegmentedControl from '../SegmentedControl';
@@ -22,24 +23,31 @@ const viewSegments = [
   { id: 'seg-gamma', label: 'Gamma', value: 'gamma', controls: 'panel-gamma' },
 ] as const;
 
-export const RTLDiff: Story = {
-  render: () => (
+function InteractiveSegmentedControl() {
+  const [inputValue, setInputValue] = useState('one');
+  const [viewValue, setViewValue] = useState('beta');
+
+  return (
     <>
       <SegmentedControl
         name="rtl-input"
         mode="input"
         segments={inputSegments}
-        value="one"
-        onChange={() => {}}
+        value={inputValue}
+        onChange={setInputValue}
       />
       <SegmentedControl
         name="rtl-view"
         mode="view"
         segments={viewSegments}
-        value="alpha"
-        onChange={() => {}}
+        value={viewValue}
+        onChange={setViewValue}
       />
     </>
-  ),
-  ...withRTLDiff(),
+  );
+}
+
+export const RTLDiff: Story = {
+  render: () => <InteractiveSegmentedControl />,
+  ...withRTLDiff({ width: 'stretch', renderAs: 'iframe' }),
 };

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,9 +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 {
@@ -96,9 +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' }),
-};