@transferwise/components 46.160.4 → 46.160.6

package/src/Inputs/SelectInput/_stories/SelectInput.rtl.test.story.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { userEvent, within } from 'storybook/test';
 import { Flag } from '@wise/art';
 
-import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
 import { SelectInput, SelectInputOptionContent } from '..';
 
 export default {
@@ -108,28 +108,40 @@ const groupedItems = [
 ];
 
 export const OpenDropdown: Story = {
-  render: () => (
-    <SelectInput
-      size="lg"
-      filterable
-      filterPlaceholder="Type a currency / country"
-      placeholder="Select currency"
-      defaultValue={rtlCurrencies[0]}
-      items={groupedItems}
-      renderValue={(currency, withinTrigger) => (
-        <SelectInputOptionContent
-          title={currency.code}
-          note={withinTrigger ? undefined : currency.name}
-          icon={<Flag code={currency.code} intrinsicSize={24} />}
-        />
-      )}
-    />
-  ),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <SelectInput
+        size="lg"
+        filterable
+        filterPlaceholder={i18n.filterPlaceholder}
+        placeholder="Select currency"
+        defaultValue={rtlCurrencies[0]}
+        items={groupedItems}
+        renderValue={(currency, withinTrigger) => (
+          <SelectInputOptionContent
+            title={currency.code}
+            note={withinTrigger ? undefined : currency.name}
+            icon={<Flag code={currency.code} intrinsicSize={24} />}
+          />
+        )}
+      />
+    );
+  },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const trigger = canvas.queryByRole('combobox');
     if (!trigger) return;
     await userEvent.click(trigger);
   },
-  ...withRTLDiff({ renderAs: 'iframe', width: '80%' }),
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    width: '80%',
+    i18n: {
+      filterPlaceholder: {
+        ltr: 'Type a currency / country',
+        rtl: 'اكتب عملة / دولة',
+      },
+    },
+  }),
 };

package/src/Inputs/TextArea/TextArea.css

@@ -154,7 +154,22 @@
   color: #768e9c;
   color: var(--color-content-tertiary);
 }
-.np-text-area::placeholder {
+.np-text-area:-moz-placeholder {
   color: #768e9c;
   color: var(--color-content-tertiary);
 }
+.np-text-area::placeholder,
+.np-text-area:placeholder-shown {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
+[dir="rtl"] .np-text-area::-moz-placeholder {
+  direction: rtl !important;
+}
+[dir="rtl"] .np-text-area:-moz-placeholder {
+  direction: rtl !important;
+}
+[dir="rtl"] .np-text-area::placeholder,
+[dir="rtl"] .np-text-area:placeholder-shown {
+  direction: rtl !important;
+}

package/src/Inputs/TextArea/TextArea.less

@@ -7,7 +7,12 @@
   overscroll-behavior: none;
   border-radius: var(--radius-small) !important;
 
-  &::placeholder {
+  &::placeholder,
+  &:placeholder-shown{
     color: var(--color-content-tertiary);
+
+    [dir="rtl"] & {
+      direction: rtl !important;
+    }
   }
 }

package/src/Inputs/TextArea/TextArea.tsx

@@ -25,6 +25,7 @@ export const TextArea = forwardRef(function TextArea(
   return (
     <textarea
       ref={reference}
+      dir="auto"
       className={clsx(className, inputClassNameBase(), 'np-text-area')}
       maxLength={maxLength}
       {...inputAttributes}

package/src/Inputs/{_stories → TextArea/_stories}/TextArea.story.tsx

@@ -4,10 +4,10 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import {
   createSandboxStory,
   globalScope,
-} from '../../../.storybook/components/sandbox/SandboxEditor';
-import Field from '../../Field';
-import { Sentiment } from '../../common';
-import { TextArea } from '../TextArea/TextArea';
+} from '../../../../.storybook/components/sandbox/SandboxEditor';
+import Field from '../../../Field';
+import { Sentiment } from '../../../common';
+import { TextArea } from '../TextArea';
 
 /**
  * TextArea must be the only input with `maxLength` inside a given Field.

package/src/Inputs/{_stories → TextArea/_stories}/TextArea.test.story.tsx

@@ -2,10 +2,10 @@ import { useState } from 'react';
 import { userEvent, within } from 'storybook/test';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
-import Field from '../../Field';
-import { Sentiment } from '../../common';
-import { TextArea } from '../TextArea/TextArea';
+import { useRtlDiffI18n, withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import Field from '../../../Field';
+import { Sentiment } from '../../../common';
+import { TextArea } from '../TextArea';
 
 const meta: Meta<typeof TextArea> = {
   title: 'Forms/TextArea/Tests',
@@ -144,26 +144,50 @@ export const CJKTypingBlocked: Story = {
 };
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <Field label="Message" required={false}>
-        <TextArea placeholder="Type something..." />
-      </Field>
-      <Field label="Message" required={false}>
-        <TextArea value="This is some entered text content in the textarea field." readOnly />
-      </Field>
-      <Field
-        label="Message"
-        required={false}
-        sentiment={Sentiment.NEGATIVE}
-        message="This field has an error message"
-      >
-        <TextArea value="Invalid input text" readOnly />
-      </Field>
-      <Field label="Message with character count" required={false}>
-        <TextArea maxLength={200} value="Text with a character counter displayed below." readOnly />
-      </Field>
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+
+    return (
+      <>
+        <Field label="Localised placeholder">
+          <TextArea placeholder={i18n.placeholder} />
+        </Field>
+        <Field label="Localised value">
+          <TextArea value={i18n.value_ar} readOnly />
+        </Field>
+        <Field label="LTR value">
+          <TextArea value={i18n.value_en} readOnly />
+        </Field>
+        <Field label="Message" sentiment={Sentiment.NEGATIVE} message={i18n.errorMessage}>
+          <TextArea value={i18n.invalidInputText} readOnly />
+        </Field>
+        <Field label="Message with character count">
+          <TextArea maxLength={200} value={i18n.characterCounter} readOnly />
+        </Field>
+      </>
+    );
+  },
+  ...withRTLDiff({
+    width: 'stretch',
+    i18n: {
+      placeholder: { ltr: 'Translated placeholder...', rtl: 'نص بديل مترجم...' },
+      value_en: {
+        ltr: 'This is LTR text content in the RTL textarea field, showing the input adapting to the content rather than page setting.',
+        rtl: 'This is LTR text content in the RTL textarea field, showing the input adapting to the content rather than page setting.',
+      },
+      value_ar: {
+        ltr: 'This is some entered text content in the textarea field.',
+        rtl: 'هذا هو بعض المحتوى النصي المدخل في حقل منطقة النص.',
+      },
+      errorMessage: {
+        ltr: 'This field has an error message',
+        rtl: 'هذا الحقل يحتوي على رسالة خطأ',
+      },
+      invalidInputText: { ltr: 'Invalid input text', rtl: 'نص الإدخال غير صالح' },
+      characterCounter: {
+        ltr: 'Text with a character counter displayed below.',
+        rtl: 'نص مع عداد أحرف معروض أدناه.',
+      },
+    },
+  }),
 };

package/src/MoneyInput/MoneyInput.css

@@ -10,6 +10,9 @@
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
 }
+[dir="rtl"] .tw-money-input .money-input__number-input {
+  text-align: end;
+}
 .tw-money-input .money-input-currency-flag {
   display: flex;
   align-items: center;

package/src/MoneyInput/MoneyInput.less

@@ -11,6 +11,12 @@
     }
   }
 
+  .money-input__number-input{
+    [dir="rtl"] & {
+      text-align: end;
+    }
+  }
+
   .money-input-currency-flag {
     display: flex;
     align-items: center;

package/src/MoneyInput/MoneyInput.tsx

@@ -367,6 +367,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
             locale: this.state.locale,
             decimals: this.props.decimals,
           })}
+          className="money-input__number-input"
           autoComplete="off"
           aria-describedby={selectedCurrencyElementId}
           onKeyDown={this.handleKeyDown}

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

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { userEvent, within } from 'storybook/test';
 
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import Field from '../../Field/Field';
 import MoneyInput from '..';
 
@@ -70,19 +70,23 @@ export const TriggerVariants: Story = {
 };
 
 export const OpenDropdown: Story = {
-  render: () => (
-    <MoneyInput
-      {...sharedProps}
-      size="lg"
-      currencies={multipleCurrencies}
-      selectedCurrency={eurCurrency}
-    />
-  ),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <MoneyInput
+        {...sharedProps}
+        size="lg"
+        currencies={multipleCurrencies}
+        selectedCurrency={eurCurrency}
+        searchPlaceholder={i18n.searchPlaceholder}
+      />
+    );
+  },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const trigger = canvas.queryByRole('combobox');
     if (!trigger) return;
     await userEvent.click(trigger);
   },
-  ...withRTLDiff({ renderAs: 'iframe', width: '40%' }),
+  ...withRTLDiff({ renderAs: 'iframe', width: '40%', i18n: { searchPlaceholder: { ltr: 'Search currencies or countries', rtl: 'ابحث عن العملات أو الدول' } } }),
 };

package/src/PhoneNumberInput/PhoneNumberInput.css

@@ -5,6 +5,9 @@
   margin-inline-start: 12px;
   margin-inline-start: var(--size-12);
 }
+[dir="rtl"] .tw-telephone__number-input-field {
+  text-align: end;
+}
 .tw-telephone__country-select {
   flex-basis: 120px;
   flex-shrink: 0;
@@ -12,6 +15,10 @@
 .tw-telephone__country-select .np-input-group {
   inline-size: 100%;
 }
+[dir="rtl"] .tw-telephone__country-select .np-select-input-content {
+  text-align: end;
+  direction: ltr;
+}
 .tw-telephone__country-select--with-input-group-addon-start .np-button-input {
   padding-inline-start: 48px;
   padding-inline-start: var(--size-48);

package/src/PhoneNumberInput/PhoneNumberInput.less

@@ -6,6 +6,12 @@
   .tw-telephone__number-input {
     margin-left: var(--size-12);
   }
+
+  &__number-input-field{
+    [dir="rtl"] & {
+      text-align: end;
+    }
+  }
 }
 
 .tw-telephone__country-select {
@@ -15,6 +21,13 @@
   .np-input-group {
     width: 100%;
   }
+
+  .np-select-input-content{
+    [dir="rtl"] & {
+      text-align: end;
+      direction: ltr;
+    }
+  }
 }
 
 .tw-telephone__country-select--with-input-group-addon-start {

package/src/PhoneNumberInput/PhoneNumberInput.messages.ts

@@ -13,4 +13,9 @@ export default defineMessages({
     id: 'neptune.PhoneNumberInput.phoneNumberLabel',
     defaultMessage: 'Phone number',
   },
+  phoneNumberPrefix: {
+    id: 'neptune.PhoneNumberInput.phoneNumberPrefix',
+    defaultMessage: 'Prefix',
+    description: 'phone number prefix / country code',
+  },
 });

package/src/PhoneNumberInput/PhoneNumberInput.tsx

@@ -59,7 +59,7 @@ const PhoneNumberInput = ({
   onFocus,
   onBlur,
   countryCode,
-  searchPlaceholder = 'Prefix',
+  searchPlaceholder,
   size = Size.MEDIUM,
   placeholder,
   selectProps = defaultSelectProps,
@@ -232,7 +232,7 @@ const PhoneNumberInput = ({
             />
           )}
           filterable
-          filterPlaceholder={searchPlaceholder}
+          filterPlaceholder={searchPlaceholder ?? formatMessage(messages.phoneNumberPrefix)}
           disabled={disabled}
           size={size}
           id={ids.countryCode.select}
@@ -261,6 +261,7 @@ const PhoneNumberInput = ({
         <div className={`input-group input-group-${size} ${disabled ? 'disabled' : ''}`}>
           <Input
             ref={phoneNumberInputRef}
+            className="tw-telephone__number-input-field"
             id={ids.phoneNumber.input}
             autoComplete="tel-national"
             name="phoneNumber"

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

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { userEvent, within } from 'storybook/test';
 
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import Field from '../../Field/Field';
 import PhoneNumberInput from '..';
 
@@ -37,16 +37,24 @@ export const Sizes: Story = {
 };
 
 export const DropdownOpen: Story = {
-  render: () => (
-    <Field label="Phone number">
-      <PhoneNumberInput onChange={() => {}} />
-    </Field>
-  ),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+
+    return (
+      <Field label="Phone number">
+        <PhoneNumberInput searchPlaceholder={i18n.searchPlaceholder} 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' }),
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    hAlign: 'center',
+    i18n: { searchPlaceholder: { ltr: 'Country code', rtl: 'رمز الدولة' } },
+  }),
 };

package/src/PocketSurface/PocketSurface.css

@@ -146,6 +146,7 @@
   --color-interactive-control-active: #471358;
   --color-background-screen: #260a2f;
 }
+
 .wds-pocket-surface {
   background-color: #ffffff;
   background-color: var(--color-background-screen);

package/src/Prompt/ActionPrompt/_stories/ActionPrompt.story.tsx

@@ -233,7 +233,11 @@ export const Sentiments: Story = {
           key={sentiment}
           sentiment={sentiment}
           title={`${sentiment.charAt(0).toUpperCase() + sentiment.slice(1)} Action`}
-          description={lorem10}
+          description={
+            <>
+              This is a <strong>{sentiment}</strong> prompt.
+            </>
+          }
           action={{ label: 'Primary', onClick: fn() }}
           actionSecondary={{ label: 'Secondary', onClick: fn() }}
         />

package/src/Prompt/InfoPrompt/_stories/InfoPrompt.story.tsx

@@ -73,6 +73,8 @@ export default {
   },
 } satisfies Meta<InfoPromptProps>;
 
+type Story = StoryObj<InfoPromptProps>;
+
 /**
  * Convenience controls for previewing rich markup,
  * not otherwise possible via Storybook
@@ -192,7 +194,7 @@ export const Sandbox = createSandboxStory({
  * - `warning`: Warning messages
  * - `proposition`: Promotional content (uses GiftBox icon by default)
  */
-export const Sentiments: StoryObj<InfoPromptProps> = {
+export const Sentiments: Story = {
   render: (args: InfoPromptProps) => (
     <>
       <InfoPrompt {...args} sentiment="neutral" description="This is a neutral message." />
@@ -207,7 +209,7 @@ export const Sentiments: StoryObj<InfoPromptProps> = {
 /**
  * InfoPrompt can include both a title and description for more detailed messaging.
  */
-export const WithTitle: StoryObj<InfoPromptProps> = {
+export const WithTitle: Story = {
   render: (args: InfoPromptProps) => (
     <>
       <InfoPrompt
@@ -236,7 +238,7 @@ export const WithTitle: StoryObj<InfoPromptProps> = {
  * Use the `action` prop to add a clickable link below the message.
  * Actions can have an `href` for navigation or an `onClick` for custom behavior.
  */
-export const WithAction: StoryObj<InfoPromptProps> = {
+export const WithAction: Story = {
   render: (args: InfoPromptProps) => (
     <>
       <InfoPrompt
@@ -270,7 +272,7 @@ export const WithAction: StoryObj<InfoPromptProps> = {
  * **Important**: If the description contains an interactive element, do not use the `action` prop
  * simultaneously — InfoPrompt should have at most one interaction.
  */
-export const WithRichDescription: StoryObj<InfoPromptProps> = {
+export const WithRichDescription: Story = {
   render: (args: InfoPromptProps) => (
     <>
       <InfoPrompt
@@ -282,7 +284,7 @@ export const WithRichDescription: StoryObj<InfoPromptProps> = {
             <Link href="/fees" target="_blank" type="link-default">
               fee schedule
             </Link>
-            .
+            . This has <strong>bold text</strong> that matches the sentiment color.
           </>
         }
       />
@@ -296,7 +298,8 @@ export const WithRichDescription: StoryObj<InfoPromptProps> = {
             <Link href="/verify" type="link-default">
               verify your identity
             </Link>{' '}
-            to continue sending money.
+            to continue sending money. This has <strong>bold text</strong> that matches the
+            sentiment color.
           </>
         }
       />
@@ -308,7 +311,7 @@ export const WithRichDescription: StoryObj<InfoPromptProps> = {
  * When `onDismiss` is provided, a close button appears allowing users to dismiss the prompt.
  * Note: The component itself is not automatically removed - you must handle state management.
  */
-export const Dismissible: StoryObj<InfoPromptProps> = {
+export const Dismissible: Story = {
   render: function Render() {
     const [showPrompt, setShowPrompt] = useState(true);
 
@@ -339,7 +342,7 @@ export const Dismissible: StoryObj<InfoPromptProps> = {
  * **Icon Overrides**: Replace default icons with custom icons to match the prompt's visual language to its content.
  * Success and proposition sentiments support both standard checkmark and confetti variations.
  */
-export const MediaTypes: StoryObj<InfoPromptProps> = {
+export const MediaTypes: Story = {
   render: (args) => (
     <>
       <Title type="title-body">Default</Title>
@@ -392,7 +395,7 @@ export const MediaTypes: StoryObj<InfoPromptProps> = {
  *
  * [Visit wise.design](https://docs.wise.design/components/info-prompt#writing-an-info-prompt) for guidance on writing effective prompt messages that are concise and easy to understand.
  */
-export const ParagraphWidth: StoryObj<PreviewStoryArgs> = {
+export const ParagraphWidth: Story = {
   parameters: {
     docs: {
       canvas: {

package/src/Prompt/InlinePrompt/_stories/InlinePrompt.story.tsx

@@ -135,19 +135,19 @@ export const Sentiments: StoryObj<PreviewStoryArgs> = {
     return (
       <>
         <InlinePrompt {...props} {...previewProps} sentiment="neutral">
-          This is a neutral prompt.
+          This is a <strong>neutral</strong> prompt.
         </InlinePrompt>
         <InlinePrompt {...props} {...previewProps} sentiment="negative">
-          This is a negative prompt.
+          This is a <strong>negative</strong> prompt.
         </InlinePrompt>
         <InlinePrompt {...props} {...previewProps} sentiment="warning">
-          This is a warning prompt.
+          This is a <strong>warning</strong> prompt.
         </InlinePrompt>
         <InlinePrompt {...props} {...previewProps} sentiment="positive">
-          This is a positive prompt.
+          This is a <strong>positive</strong> prompt.
         </InlinePrompt>
         <InlinePrompt {...props} {...previewProps} sentiment="proposition">
-          This is a proposition prompt.
+          This is a <strong>proposition</strong> prompt.
         </InlinePrompt>
       </>
     );

package/src/Prompt/PrimitivePrompt/PrimitivePrompt.less

@@ -3,7 +3,8 @@
   display: flex;
   gap: var(--Prompt-gap, var(--size-16));
   overflow-wrap: break-word;
-  padding: var(--Prompt-padding-y, var(--padding-x-small)) var(--Prompt-padding-x, var(--padding-x-small));
+  padding: var(--Prompt-padding-y, var(--padding-x-small))
+    var(--Prompt-padding-x, var(--padding-x-small));
   text-align: left;
   word-break: break-word;
   width: 100%;

package/src/SentimentSurface/SentimentSurface.css

@@ -442,6 +442,7 @@
   --color-sentiment-background-surface-active: #F8CD20;
   --color-sentiment-border-overlay: rgba(58,53,35,0.30196);
 }
+
 .wds-sentiment-surface {
   --ring-outline-color: var(--color-sentiment-content-primary, var(--color-content-primary));
 }
@@ -449,3 +450,7 @@
   background-color: var(--color-sentiment-background-surface);
   color: var(--color-sentiment-content-primary);
 }
+.wds-sentiment-surface strong,
+.wds-sentiment-surface b {
+  color: var(--color-sentiment-content-primary);
+}

package/src/SentimentSurface/SentimentSurface.less

@@ -7,4 +7,9 @@
   }
 
   --ring-outline-color: var(--color-sentiment-content-primary, var(--color-content-primary));
+
+  strong,
+  b {
+    color: var(--color-sentiment-content-primary);
+  }
 }

package/src/SentimentSurface/_stories/SentimentSurface.story.tsx

@@ -228,7 +228,9 @@ export const EmphasisLevels: Story = {
             sentiment={sentiment}
             emphasis="base"
           >
-            <div className="p-a-2 text-capitalize">{sentiment} - Base emphasis</div>
+            <div className="p-a-2 text-capitalize">
+              <strong>{sentiment}</strong> - Base emphasis
+            </div>
           </SentimentSurface>
           <SentimentSurface
             key={`${sentiment}-elevated`}
@@ -236,7 +238,9 @@ export const EmphasisLevels: Story = {
             sentiment={sentiment}
             emphasis="elevated"
           >
-            <div className="p-a-2 text-capitalize">{sentiment} - Elevated emphasis</div>
+            <div className="p-a-2 text-capitalize">
+              <strong>{sentiment}</strong> - Elevated emphasis
+            </div>
           </SentimentSurface>
         </div>
       ))}