@transferwise/components 46.158.0 → 46.159.1

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

@@ -0,0 +1,118 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn, userEvent, within } from 'storybook/test';
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import ExpressiveMoneyInput from '..';
+import { Rewards } from '@transferwise/icons';
+
+export default {
+  component: ExpressiveMoneyInput,
+  title: 'Forms/ExpressiveMoneyInput/Tests/RTL Diff',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof ExpressiveMoneyInput>;
+
+type Story = StoryObj<typeof ExpressiveMoneyInput>;
+
+const currencySelectorOptions = [
+  {
+    title: 'Popular',
+    currencies: [
+      { code: 'GBP', label: 'British Pound', keywords: ['british'] },
+      { code: 'EUR', label: 'Euro', keywords: ['euro'] },
+      { code: 'USD', label: 'US Dollar', keywords: ['dollar'] },
+    ],
+  },
+];
+
+export const TriggerVariants: Story = {
+  render: () => (
+    <>
+      {/* Currency selector on leading side — flips in RTL */}
+      <ExpressiveMoneyInput
+        label="You send"
+        currency="GBP"
+        amount={1234.56}
+        currencySelector={{
+          options: currencySelectorOptions,
+          onChange: fn(),
+          onSearchChange: fn(),
+          onOpen: fn(),
+        }}
+        onAmountChange={fn()}
+      />
+
+      {/* Chevron on trailing side — flips in RTL */}
+      <ExpressiveMoneyInput
+        label="You send"
+        currency="EUR"
+        amount={0}
+        showChevron
+        currencySelector={{
+          options: currencySelectorOptions,
+          onChange: fn(),
+          onSearchChange: fn(),
+          onOpen: fn(),
+        }}
+        onAmountChange={fn()}
+      />
+
+      {/* InlinePrompt with media icon — icon on leading end of prompt */}
+      <ExpressiveMoneyInput
+        label="You send"
+        currency="USD"
+        amount={500}
+        currencySelector={{
+          options: currencySelectorOptions,
+          onChange: fn(),
+          onSearchChange: fn(),
+          onOpen: fn(),
+        }}
+        inlinePrompt={{
+          message: 'Great rate available',
+          sentiment: 'positive',
+          media: <Rewards />,
+        }}
+        onAmountChange={fn()}
+      />
+
+      {/* Secondary avatar addon in currency selector */}
+      <ExpressiveMoneyInput
+        label="You send"
+        currency="GBP"
+        amount={750}
+        currencySelector={{
+          options: currencySelectorOptions,
+          addons: [{ profileName: 'Mikkael Jordan' }],
+          onChange: fn(),
+          onSearchChange: fn(),
+          onOpen: fn(),
+        }}
+        onAmountChange={fn()}
+      />
+    </>
+  ),
+  ...withRTLDiff({ width: 'stretch' }),
+};
+
+export const OpenDropdown: Story = {
+  render: () => (
+    <ExpressiveMoneyInput
+      label="You send"
+      currency="GBP"
+      amount={1234.56}
+      currencySelector={{
+        options: currencySelectorOptions,
+        onChange: fn(),
+        onSearchChange: fn(),
+        onOpen: fn(),
+      }}
+      onAmountChange={fn()}
+    />
+  ),
+  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/Field/_stories/Field.test.story.tsx

@@ -1,6 +1,9 @@
 import { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
+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';
 
@@ -54,3 +57,46 @@ export const DeprecatedProps: Story = {
     );
   },
 };
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      {/* Required label (default) — label text aligns to start */}
+      <Field label="Required field">
+        <Input defaultValue="Input value" />
+      </Field>
+
+      {/* Optional label — "(optional)" suffix uses directional margin-left */}
+      <Field label="Optional field" required={false}>
+        <Input defaultValue="Input value" />
+      </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>
+
+      {/* Message only (no label) — InlinePrompt icon+text layout visible */}
+      <Field message="A helpful message" sentiment="positive">
+        <Input defaultValue="Input value" />
+      </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>
+
+      {/* 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/FlowNavigation.css

@@ -4,7 +4,12 @@
   justify-content: center;
   width: 100%;
   box-sizing: border-box;
-  min-height: 96px;
+  min-height: 80px;
+}
+@media (min-width: 320.02px) {
+  .np-flow-navigation {
+    min-height: 128px;
+  }
 }
 .np-flow-navigation--border-bottom {
   border-bottom: 1px solid rgba(0,0,0,0.10196);
@@ -13,7 +18,7 @@
 .np-flow-navigation__content {
   width: 100%;
   min-width: 320px;
-  max-width: calc(1160px - 36px);
+  max-width: none;
 }
 .np-flow-navigation__stepper {
   padding-bottom: 0 !important;
@@ -72,17 +77,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .np-flow-navigation--hidden {
   visibility: hidden;
 }
-.np-flow-navigation--composable {
-  min-height: 80px;
-}
-@media (min-width: 320.02px) {
-  .np-flow-navigation--composable {
-    min-height: 128px;
-  }
-}
-.np-flow-navigation--composable .np-flow-navigation__content {
-  max-width: none;
-}
 .np-theme-personal--forest-green .np-flow-navigation .np-flow-header__left path,
 .np-theme-personal--bright-green .np-flow-navigation .np-flow-header__left path,
 .np-theme-personal--dark .np-flow-navigation .np-flow-header__left path {

package/src/FlowNavigation/FlowNavigation.less

@@ -9,7 +9,11 @@
   box-sizing: border-box;
 
   // This is the natural height of FlowNavigation when the Avatar is displayed.
-  min-height: 96px;
+  min-height: 80px;
+
+  @media (--screen-xs) {
+    min-height: 128px;
+  }
 
   &--border-bottom {
     border-bottom: 1px solid var(--color-border-neutral);
@@ -18,7 +22,7 @@
   &__content {
     width: 100%;
     min-width: 320px;
-    max-width: calc(@screen-lg-min - 36px);
+    max-width: none;
   }
 
   &__stepper {
@@ -69,19 +73,6 @@
     visibility: hidden;
   }
 
-  &--composable {
-    min-height: 80px;
-
-    @media (--screen-xs) {
-      min-height: 128px;
-    }
-
-    .np-flow-navigation__content {
-      // Remove max-width constraint for fluid layout
-      max-width: none;
-    }
-  }
-
   .np-theme-personal--forest-green &,
   .np-theme-personal--bright-green &,
   .np-theme-personal--dark & {

package/src/FlowNavigation/FlowNavigation.tsx

@@ -26,20 +26,13 @@ export interface FlowNavigationProps {
   /** @default false */
   done?: boolean;
   /** Called when the close button is clicked. If not provided the close button won't show */
-  onClose?: () => void;
+  onClose?: (() => void) | React.MouseEventHandler<HTMLButtonElement>;
   /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */
   onGoBack?: () => void;
   /** Steps to be displayed in stepper. If not provided, the stepper won't show. */
   steps?: readonly Step[];
-  /**
-   * When true, renders in composable mode using a fluid Container.
-   * This allows the FlowNavigation to be used within custom layout containers.
-   * @default false
-   */
-  composable?: boolean;
   /**
    * Controls whether the bottom border is displayed.
-   * Only applies to the composable variant. Non-composable variant always uses the done state.
    * @default true
    */
   showBottomBorder?: boolean;
@@ -53,7 +46,6 @@ const FlowNavigation = ({
   onClose,
   onGoBack,
   steps,
-  composable = false,
   showBottomBorder = true,
 }: FlowNavigationProps) => {
   const intl = useIntl();
@@ -69,7 +61,6 @@ const FlowNavigation = ({
     <FlowHeader
       className={clsx(
         'np-flow-navigation__content',
-        !composable && 'p-x-3',
         screenSm == null
           ? 'np-flow-navigation--hidden'
           : {
@@ -119,27 +110,15 @@ const FlowNavigation = ({
     />
   );
 
-  if (composable) {
-    return (
-      <Container
-        size="fluid"
-        className={clsx('np-flow-navigation np-flow-navigation--composable', {
-          'np-flow-navigation--border-bottom': showBottomBorder,
-        })}
-      >
-        {flowHeaderContent}
-      </Container>
-    );
-  }
-
   return (
-    <div
-      className={clsx('np-flow-navigation p-y-3', {
-        'np-flow-navigation--border-bottom': !done,
+    <Container
+      size="fluid"
+      className={clsx('np-flow-navigation', {
+        'np-flow-navigation--border-bottom': showBottomBorder,
       })}
     >
       {flowHeaderContent}
-    </div>
+    </Container>
   );
 };
 

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

@@ -384,89 +384,6 @@ export const WithOverlayHeaderComparison: Story = {
   },
 };
 
-export const ComposableVariant: Story = {
-  args: {
-    profileType: ProfileType.PERSONAL,
-    showCloseButton: true,
-    showMobileBackButton: true,
-    done: false,
-    avatarURL: '../tapestry-01.png',
-  },
-  parameters: {
-    padding: '0',
-    chromatic: {
-      viewports,
-    },
-  },
-  render: (args) => {
-    const [activeStep, setActiveStep] = useState(2);
-    const steps = [
-      {
-        label: 'Recipient',
-        onClick: () => setActiveStep(0),
-      },
-      {
-        label: 'Amount',
-        hoverLabel: (
-          <>
-            You send 100 GBP <br />
-            You get 99.39 GBP{' '}
-          </>
-        ),
-        ...(activeStep > 1 && { onClick: () => setActiveStep(1) }),
-      },
-      {
-        label: 'Review',
-        ...(activeStep > 2 && { onClick: () => setActiveStep(2) }),
-      },
-      {
-        label: 'Pay',
-        ...(activeStep > 3 && { onClick: () => setActiveStep(3) }),
-      },
-    ];
-    return (
-      <>
-        <FlowNavigation
-          composable
-          avatar={<AvatarView profileType={args.profileType} />}
-          logo={<Logo />}
-          activeStep={activeStep}
-          steps={steps}
-          onClose={args.showCloseButton ? () => alert('close') : undefined}
-          onGoBack={
-            args.showMobileBackButton
-              ? () => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)
-              : undefined
-          }
-        />
-        <Container size="narrow">
-          <Body className="m-a-3">
-            <Display type={Typography.DISPLAY_SMALL}>{steps[activeStep].label} Step</Display>
-            <br />
-            {lorem10}
-          </Body>
-        </Container>
-
-        <Sticky>
-          <Container
-            size="narrow"
-            className="d-flex justify-content-center align-items-center p-y-3"
-          >
-            <Button
-              v2
-              disabled={activeStep === 3}
-              block
-              onClick={() => setActiveStep(activeStep + 1)}
-            >
-              Continue
-            </Button>
-          </Container>
-        </Sticky>
-      </>
-    );
-  },
-};
-
 export const WithoutStepper: Story = {
   args: {
     profileType: ProfileType.PERSONAL,
@@ -575,7 +492,6 @@ export const BorderControl: Story = {
 
         {/* Composable: showBottomBorder=true, done=false - SHOWS BORDER */}
         <FlowNavigation
-          composable
           avatar={<AvatarView profileType={args.profileType} />}
           logo={<Logo />}
           activeStep={activeStep}
@@ -591,7 +507,6 @@ export const BorderControl: Story = {
 
         {/* Composable: showBottomBorder=true, done=true - SHOWS BORDER */}
         <FlowNavigation
-          composable
           avatar={<AvatarView profileType={args.profileType} />}
           logo={<Logo />}
           activeStep={activeStep}
@@ -607,7 +522,6 @@ export const BorderControl: Story = {
 
         {/* Composable: showBottomBorder=false, done=false - HIDES BORDER */}
         <FlowNavigation
-          composable
           avatar={<AvatarView profileType={args.profileType} />}
           logo={<Logo />}
           activeStep={activeStep}

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/Header/_stories/Header.test.story.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import Header, { type HeaderProps } from '../Header';
 import { withVariantConfig } from '../../../.storybook/helpers';
 
@@ -122,3 +123,29 @@ export const AllVariants: Story = {
     </div>
   ),
 };
+
+/**
+ * The Header uses a CSS grid layout (1fr auto) that places the action on the
+ * inline-end side. In RTL the action should appear on the left instead of the
+ * right. Both level variants are included to cover the border-bottom alignment
+ * difference.
+ */
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <Header title="Group level without action" level="group" />
+      <Header
+        title="Group level with action"
+        level="group"
+        action={{ 'aria-label': 'View all', text: 'View all', href: '#' }}
+      />
+      <Header title="Section level without action" level="section" />
+      <Header
+        title="Section level with action"
+        level="section"
+        action={{ 'aria-label': 'Learn more', text: 'Learn more', href: '#' }}
+      />
+    </>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within } from 'storybook/test';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import Info from '..';
+
+export default {
+  component: Info,
+  title: 'Dialogs/Info/Tests/RTL Diff',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Info>;
+
+type Story = StoryObj<typeof Info>;
+
+const iframeDiff = withRTLDiff({ renderAs: 'iframe' });
+
+const openInfo = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+  const canvas = within(canvasElement);
+  const button = canvas.queryByRole('button');
+  if (!button) return;
+  await userEvent.click(button);
+};
+
+export const Popover: Story = {
+  render: () => (
+    <Info
+      aria-label="Info trigger"
+      title="Information"
+      content="This is some descriptive content inside the info component."
+      presentation="POPOVER"
+      size="sm"
+    />
+  ),
+  play: openInfo,
+  ...iframeDiff,
+};
+
+export const PopoverLarge: Story = {
+  render: () => (
+    <Info
+      aria-label="Info trigger"
+      title="Information"
+      content="This is some descriptive content inside the info component."
+      presentation="POPOVER"
+      size="lg"
+    />
+  ),
+  play: openInfo,
+  ...iframeDiff,
+};
+
+export const Modal: Story = {
+  render: () => (
+    <Info
+      aria-label="Info trigger"
+      title="Information"
+      content="This is some descriptive content inside the info component."
+      presentation="MODAL"
+      size="sm"
+    />
+  ),
+  play: openInfo,
+  ...iframeDiff,
+};