@transferwise/components 0.0.0-experimental-5ff6475 → 0.0.0-experimental-f16de49

package/src/Carousel/_stories/Carousel.story.tsx

@@ -1,60 +1,27 @@
 import type { Args } from '@storybook/react-webpack5';
-import { Illustration } from '@wise/art';
+
 import {
   createSandboxStory,
   globalScope,
 } from '../../../.storybook/components/sandbox/SandboxEditor';
-
-import Display from '../../Display';
-import Carousel, { type CarouselCard } from '..';
+import Carousel from '..';
+import { stubbedCarouselCards } from './constants';
 
 export default {
+  args: {
+    cards: stubbedCarouselCards,
+    header: 'Carousel title',
+  },
   component: Carousel,
   title: 'Navigation/Carousel',
 };
 
-const carouselCards: CarouselCard[] = [
-  {
-    id: 'YOUR_INVOICE',
-    type: 'button',
-    onClick: () => {
-      console.log('Clicked on button');
-    },
-    content: (
-      <div className="d-flex p-a-1 p-t-0 flex-column align-items-center">
-        <div style={{ position: 'absolute' }}>
-          <Illustration disablePadding name="globe" size="small" alt="" />
-        </div>
-        <div style={{ position: 'absolute', zIndex: '2', bottom: '8px', left: '16px' }}>
-          <Display type="display-small">Here there, everywhere</Display>
-        </div>
-      </div>
-    ),
-  },
-  {
-    id: 'YOUR_WEBSITE',
-    type: 'promo',
-    onClick: () => {
-      console.log('hi');
-    },
-    href: 'http://wise.com',
-    title: 'Wise',
-    description: 'The best way to move money internationally',
-  },
-  {
-    id: 'SHOP_OR_STALL',
-    type: 'anchor',
-    href: 'https://wise.com',
-    hrefTarget: '_blank',
-    onClick: () => {},
-    styles: {
-      backgroundImage:
-        'url(https://wise.com/public-resources/assets/team-page/tapestry/team_member_tapestry_01.jpg)',
-      backgroundSize: 'cover',
-    },
-    content: <Display type="display-small">Get Quick Pay</Display>,
+export const Playground = {
+  render: (args: Args) => {
+    return <Carousel header="Pretty nifty stuff" cards={stubbedCarouselCards} {...args} />;
   },
-];
+  args: {},
+};
 
 export const Sandbox = createSandboxStory({
   code: `const App = () => {
@@ -89,10 +56,3 @@ export const Sandbox = createSandboxStory({
 };`,
   scope: globalScope,
 });
-
-export const CarouselDefault = {
-  render: (args: Args) => {
-    return <Carousel header="Pretty nifty stuff" cards={carouselCards} {...args} />;
-  },
-  args: {},
-};

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

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
-import Display from '../../Display';
-import Carousel, { type CarouselCard } from '..';
+import Carousel from '..';
+import { stubbedCarouselCards } from './constants';
 
 export default {
   component: Carousel,
@@ -12,48 +12,12 @@ export default {
 
 type Story = StoryObj<typeof Carousel>;
 
-const sampleCards: CarouselCard[] = [
-  {
-    id: 'card-1',
-    type: 'button',
-    content: (
-      <div className="d-flex p-a-1 flex-column align-items-center">
-        <Display type="display-small">Card one</Display>
-      </div>
-    ),
-  },
-  {
-    id: 'card-2',
-    type: 'promo',
-    href: '#',
-    title: 'Promo card',
-    description: 'Description for promo card',
-  },
-  {
-    id: 'card-3',
-    type: 'anchor',
-    href: '#',
-    hrefTarget: '_blank',
-    content: <Display type="display-small">Anchor card</Display>,
-  },
-  {
-    id: 'card-4',
-    type: 'button',
-    content: (
-      <div className="d-flex p-a-1 flex-column align-items-center">
-        <Display type="display-small">Card four</Display>
-      </div>
-    ),
-  },
-  {
-    id: 'card-5',
-    type: 'anchor',
-    href: '#',
-    content: <Display type="display-small">Card five</Display>,
-  },
+const manyCards = [
+  ...stubbedCarouselCards,
+  ...stubbedCarouselCards.map((card) => ({ ...card, id: `${card.id}_2` })),
 ];
 
 export const RTLDiff: Story = {
-  render: () => <Carousel header="Carousel with navigation arrows" cards={sampleCards} />,
-  ...withRTLDiff(),
+  render: () => <Carousel cards={manyCards} header="Pretty nifty stuff" />,
+  ...withRTLDiff({ width: 'stretch' }),
 };

package/src/Carousel/_stories/constants.tsx

@@ -0,0 +1,46 @@
+import { Illustration } from '@wise/art';
+import Display from '../../Display';
+import type { CarouselCard } from '../Carousel';
+
+export const stubbedCarouselCards: CarouselCard[] = [
+  {
+    id: 'YOUR_INVOICE',
+    type: 'button',
+    onClick: () => {
+      console.log('Clicked on button');
+    },
+    content: (
+      <div className="d-flex p-a-1 p-t-0 flex-column align-items-center">
+        <div style={{ position: 'absolute' }}>
+          <Illustration disablePadding name="globe" size="small" alt="" />
+        </div>
+        <div style={{ position: 'absolute', zIndex: '2', bottom: '8px', left: '16px' }}>
+          <Display type="display-small">Here there, everywhere</Display>
+        </div>
+      </div>
+    ),
+  },
+  {
+    id: 'YOUR_WEBSITE',
+    type: 'promo',
+    onClick: () => {
+      console.log('hi');
+    },
+    href: 'http://wise.com',
+    title: 'Wise',
+    description: 'The best way to move money internationally',
+  },
+  {
+    id: 'SHOP_OR_STALL',
+    type: 'anchor',
+    href: 'https://wise.com',
+    hrefTarget: '_blank',
+    onClick: () => {},
+    styles: {
+      backgroundImage:
+        'url(https://wise.com/public-resources/assets/team-page/tapestry/team_member_tapestry_01.jpg)',
+      backgroundSize: 'cover',
+    },
+    content: <Display type="display-small">Get Quick Pay</Display>,
+  },
+];

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

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { userEvent, within } from 'storybook/test';
 
-import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import DateLookup from '..';
 
 export default {
@@ -14,47 +14,39 @@ type Story = StoryObj<typeof DateLookup>;
 
 const selectedDate = new Date(2024, 5, 14);
 
-const i18nConfig = {
-  label: { ltr: 'Select date', rtl: 'اختر التاريخ' },
-  placeholder: { ltr: 'Choose a date', rtl: 'اختر تاريخًا' },
-};
-
 export const TriggerVariants: Story = {
-  render: () => {
-    const i18n = useRtlDiffI18n<{ label: string; placeholder: string }>();
-    return (
-      <>
-        <DateLookup
-          label={i18n.label}
-          placeholder={i18n.placeholder}
-          value={selectedDate}
-          onChange={() => {}}
-        />
-        <DateLookup
-          label={i18n.label}
-          placeholder={i18n.placeholder}
-          value={selectedDate}
-          clearable
-          onChange={() => {}}
-        />
-        <DateLookup
-          label={i18n.label}
-          placeholder={i18n.placeholder}
-          size="sm"
-          value={selectedDate}
-          onChange={() => {}}
-        />
-        <DateLookup
-          label={i18n.label}
-          placeholder={i18n.placeholder}
-          size="lg"
-          value={selectedDate}
-          onChange={() => {}}
-        />
-      </>
-    );
-  },
-  ...withRTLDiff({ renderAs: 'iframe', i18n: i18nConfig }),
+  render: () => (
+    <>
+      <DateLookup
+        label="Select date"
+        placeholder="Choose a date"
+        value={selectedDate}
+        onChange={() => {}}
+      />
+      <DateLookup
+        label="Select date"
+        placeholder="Choose a date"
+        value={selectedDate}
+        clearable
+        onChange={() => {}}
+      />
+      <DateLookup
+        label="Select date"
+        placeholder="Choose a date"
+        size="sm"
+        value={selectedDate}
+        onChange={() => {}}
+      />
+      <DateLookup
+        label="Select date"
+        placeholder="Choose a date"
+        size="lg"
+        value={selectedDate}
+        onChange={() => {}}
+      />
+    </>
+  ),
+  ...withRTLDiff(),
 };
 
 const containerStyle: React.CSSProperties = {
@@ -67,19 +59,16 @@ const containerStyle: React.CSSProperties = {
 };
 
 export const OpenCalendarPanel: Story = {
-  render: () => {
-    const i18n = useRtlDiffI18n<{ label: string; placeholder: string }>();
-    return (
-      <div style={containerStyle}>
-        <DateLookup
-          label={i18n.label}
-          placeholder={i18n.placeholder}
-          value={selectedDate}
-          onChange={() => {}}
-        />
-      </div>
-    );
-  },
+  render: () => (
+    <div style={containerStyle}>
+      <DateLookup
+        label="Select date"
+        placeholder="Choose a date"
+        value={selectedDate}
+        onChange={() => {}}
+      />
+    </div>
+  ),
   play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
     const canvas = within(canvasElement);
     const trigger = canvas.queryByRole('button');
@@ -88,12 +77,12 @@ export const OpenCalendarPanel: Story = {
     // Suppress focus ring on calendar cells — FocusScope traps focus inside the panel
     // and the autofocus cycle causes the selected date's ring to flicker between iframes.
     const style = canvasElement.ownerDocument.createElement('style');
-    style.textContent = `
-    .np-panel__content *:focus {
-      outline: none !important;
-      box-shadow: none !important;
+    style.textContent = ` 
+    .np-panel__content *:focus { 
+      outline: none !important; 
+      box-shadow: none !important; 
     }`;
     canvasElement.ownerDocument.head.appendChild(style);
   },
-  ...withRTLDiff({ renderAs: 'iframe', i18n: i18nConfig }),
+  ...withRTLDiff({ renderAs: 'iframe' }),
 };

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

@@ -1,8 +1,9 @@
 import { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import { Input } from '../../Inputs/Input/Input';
 import { TextArea } from '../../Inputs/TextArea/TextArea';
+import { lorem10 } from '../../test-utils';
 import Field, { FieldProps } from '..';
 import { Sentiment } from '../../common';
 
@@ -58,56 +59,44 @@ export const DeprecatedProps: Story = {
 };
 
 export const RTLDiff: Story = {
-  render: () => {
-    const i18n = useRtlDiffI18n();
-    return (
-      <>
-        <Field label={i18n.requiredLabel}>
-          <Input defaultValue={i18n.inputValue} />
-        </Field>
+  render: () => (
+    <>
+      {/* Required label (default) — label text aligns to start */}
+      <Field label="Required field">
+        <Input defaultValue="Input value" />
+      </Field>
 
-        <Field label={i18n.optionalLabel} required={false}>
-          <Input defaultValue={i18n.inputValue} />
-        </Field>
+      {/* Optional label — "(optional)" suffix uses directional margin-left */}
+      <Field label="Optional field" required={false}>
+        <Input defaultValue="Input value" />
+      </Field>
 
-        <Field
-          label={i18n.descriptionLabel}
-          required={false}
-          description={i18n.description}
-          message={i18n.validationMessage}
-          sentiment="negative"
-        >
-          <Input defaultValue={i18n.inputValue} />
-        </Field>
+      {/* Label + description + message — full vertical layout with directional icon */}
+      <Field
+        label="Field with description and message"
+        required={false}
+        description={lorem10}
+        message="This is a validation message"
+        sentiment="negative"
+      >
+        <Input defaultValue="Input value" />
+      </Field>
 
-        <Field message={i18n.helpfulMessage} sentiment="positive">
-          <Input defaultValue={i18n.inputValue} />
-        </Field>
+      {/* Message only (no label) — InlinePrompt icon+text layout visible */}
+      <Field message="A helpful message" sentiment="positive">
+        <Input defaultValue="Input value" />
+      </Field>
 
-        <Field label={i18n.loadingLabel} message={i18n.savingMessage} messageLoading>
-          <Input defaultValue={i18n.inputValue} />
-        </Field>
+      {/* Loading message — spinner replaces icon but layout structure is identical */}
+      <Field label="Field with loading message" message="Saving…" messageLoading>
+        <Input defaultValue="Input value" />
+      </Field>
 
-        <Field label={i18n.textareaLabel} required={false} description={i18n.maxChars}>
-          <TextArea maxLength={100} defaultValue={i18n.textareaValue} />
-        </Field>
-      </>
-    );
-  },
-  ...withRTLDiff({
-    i18n: {
-      requiredLabel: { ltr: 'Required field', rtl: 'حقل مطلوب' },
-      optionalLabel: { ltr: 'Optional field', rtl: 'حقل اختياري' },
-      descriptionLabel: { ltr: 'Field with description and message', rtl: 'حقل مع وصف ورسالة' },
-      description: { ltr: 'A short description of the field', rtl: 'وصف قصير للحقل' },
-      validationMessage: { ltr: 'This is a validation message', rtl: 'هذه رسالة تحقق' },
-      helpfulMessage: { ltr: 'A helpful message', rtl: 'رسالة مفيدة' },
-      loadingLabel: { ltr: 'Field with loading message', rtl: 'حقل مع رسالة تحميل' },
-      savingMessage: { ltr: 'Saving…', rtl: 'جارٍ الحفظ…' },
-      textareaLabel: { ltr: 'Textarea with char counter', rtl: 'حقل نص مع عداد الأحرف' },
-      maxChars: { ltr: 'Max 100 characters', rtl: 'الحد الأقصى 100 حرف' },
-      inputValue: { ltr: 'Input value', rtl: 'قيمة الإدخال' },
-      textareaValue: { ltr: 'Textarea value', rtl: 'قيمة حقل النص' },
-    },
-  }),
+      {/* Textarea with char counter — counter uses text-align:right + margin-left:auto */}
+      <Field label="Textarea with char counter" required={false} description="Max 100 characters">
+        <TextArea maxLength={100} defaultValue="Textarea value" />
+      </Field>
+    </>
+  ),
+  ...withRTLDiff(),
 };

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

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import AvatarView from '../../AvatarView';
 import { ProfileType } from '../../common';
 import Logo from '../../Logo';
@@ -76,3 +77,46 @@ export const LongLabel: Story = {
     />
   ),
 };
+
+const rtlSteps = [
+  { label: 'Amount', hoverLabel: '100 GBP', onClick: noop },
+  { label: 'You', hoverLabel: 'Elena Durante', onClick: noop },
+  { label: 'Review', onClick: noop },
+  { label: 'Pay', onClick: noop },
+];
+
+/**
+ * FlowNavigation has directional layout: back button on inline-start,
+ * close button and avatar on inline-end, and a stepper progress bar that
+ * flows in the reading direction. All of these flip in RTL.
+ */
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      {/* With stepper, back button, close button, and avatar */}
+      <FlowNavigation
+        activeStep={2}
+        avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
+        logo={<Logo />}
+        steps={rtlSteps}
+        onClose={noop}
+        onGoBack={noop}
+      />
+      {/* Without stepper — logo left, close button right */}
+      <FlowNavigation
+        avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
+        logo={<Logo />}
+        onClose={noop}
+      />
+      {/* Done state — no stepper, logo and close button only */}
+      <FlowNavigation
+        done
+        avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
+        logo={<Logo />}
+        steps={rtlSteps}
+        onClose={noop}
+      />
+    </>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import Info from '../../Info';
 import Label from '..';
 
@@ -12,38 +12,25 @@ export default {
 type Story = StoryObj<typeof Label>;
 
 export const RTLDiff: Story = {
-  render: () => {
-    const i18n = useRtlDiffI18n();
-    return (
-      <>
-        <Label>{i18n.plain}</Label>
-        <Label>
-          <Label.Optional>{i18n.optional}</Label.Optional>
-        </Label>
-        <Label>
-          <div>
-            {i18n.withInfo} <Info content={i18n.tooltip} aria-label={i18n.moreInfo} />
-          </div>
-        </Label>
-        <Label>
-          <Label.Optional>
-            {i18n.optionalWithInfo} <Info content={i18n.tooltip} aria-label={i18n.moreInfo} />
-          </Label.Optional>
-        </Label>
-      </>
-    );
-  },
-  ...withRTLDiff({
-    i18n: {
-      plain: { ltr: 'Plain label text', rtl: 'نص التسمية العادي' },
-      optional: { ltr: 'Label with optional marker', rtl: 'تسمية مع علامة اختيارية' },
-      withInfo: { ltr: 'Label with info icon', rtl: 'تسمية مع أيقونة معلومات' },
-      optionalWithInfo: {
-        ltr: 'Label with optional and info icon',
-        rtl: 'تسمية مع اختيارية وأيقونة معلومات',
-      },
-      tooltip: { ltr: 'Helpful tooltip content', rtl: 'محتوى تلميح مفيد' },
-      moreInfo: { ltr: 'More information', rtl: 'مزيد من المعلومات' },
-    },
-  }),
+  render: () => (
+    <>
+      <Label>Plain label text</Label>
+      <Label>
+        <Label.Optional>Label with optional marker</Label.Optional>
+      </Label>
+      <Label>
+        <div>
+          Label with info icon{' '}
+          <Info content="Helpful tooltip content" aria-label="More information" />
+        </div>
+      </Label>
+      <Label>
+        <Label.Optional>
+          Label with optional and info icon{' '}
+          <Info content="Helpful tooltip content" aria-label="More information" />
+        </Label.Optional>
+      </Label>
+    </>
+  ),
+  ...withRTLDiff(),
 };