@transferwise/components 46.160.5 → 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/TextareaWithDisplayFormat/_stories/TextareaWithDisplayFormat.test.story.tsx

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
-import TextareaWithDisplayFormat from '..';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import Field from '../../Field/Field';
+import TextareaWithDisplayFormat from '..';
 
 export default {
   component: TextareaWithDisplayFormat,
@@ -13,36 +13,51 @@ export default {
 type Story = StoryObj<typeof TextareaWithDisplayFormat>;
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <Field id="card-code" label="Gift card code">
-        <TextareaWithDisplayFormat
-          id="card-code"
-          value="1234567890123456"
-          maxLength={16}
-          displayPattern="**** - **** - ****"
-          onChange={() => {}}
-        />
-      </Field>
-      <Field id="iban" label="IBAN">
-        <TextareaWithDisplayFormat
-          id="iban"
-          value="GB29NWBK60161331926819"
-          maxLength={22}
-          displayPattern="** **** **** **** **** **"
-          onChange={() => {}}
-        />
-      </Field>
-      <Field id="empty" label="Empty with placeholder">
-        <TextareaWithDisplayFormat
-          id="empty"
-          value=""
-          displayPattern="**** - **** - ****"
-          placeholder="Enter code"
-          onChange={() => {}}
-        />
-      </Field>
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+
+    return (
+      <>
+        <Field id="empty" label="Empty with placeholder">
+          <TextareaWithDisplayFormat
+            id="empty"
+            value=""
+            displayPattern="**** - **** - ****"
+            placeholder={i18n.placeholder}
+            onChange={() => {}}
+          />
+        </Field>
+        <Field id="card-code" label="Localised pattern">
+          <TextareaWithDisplayFormat
+            id="card-code"
+            value={i18n.value}
+            maxLength={16}
+            displayPattern="**** - **** - ****"
+            onChange={() => {}}
+          />
+        </Field>
+        <Field id="iban" label="IBAN (not localised)">
+          <TextareaWithDisplayFormat
+            id="iban"
+            value="GB29NWBK60161331926819"
+            maxLength={22}
+            displayPattern="** **** **** **** **** **"
+            onChange={() => {}}
+          />
+        </Field>
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      value: {
+        ltr: 'XKQMRTBWJNFL',
+        rtl: 'خكقمرتبوجنفل',
+      },
+      placeholder: {
+        ltr: 'Enter code',
+        rtl: 'أدخل الرمز',
+      },
+    },
+  }),
 };

package/src/Typeahead/TypeaheadInput/TypeaheadInput.tsx

@@ -6,6 +6,8 @@ import { Component, createRef, ReactNode } from 'react';
 
 import { Input } from '../../Inputs/Input/Input';
 import { TypeaheadOption, TypeaheadProps } from '../Typeahead';
+import { Direction } from '../../common';
+import { DirectionContext } from '../../Provider/Direction';
 
 const DEFAULT_INPUT_MIN_WIDTH = 10;
 
@@ -67,7 +69,7 @@ export default class TypeaheadInput<T> extends Component<
     });
   };
 
-  renderInput = () => {
+  renderInput = (isRTL: boolean) => {
     const {
       typeaheadId,
       autoFocus,
@@ -90,6 +92,7 @@ export default class TypeaheadInput<T> extends Component<
     return (
       <Input
         ref={this.inputRef}
+        dir={isRTL ? 'rtl' : 'auto'}
         className={clsx(multiple && 'typeahead__input')}
         name={name}
         id={`input-${typeaheadId}`}
@@ -116,26 +119,34 @@ export default class TypeaheadInput<T> extends Component<
   render() {
     const { multiple, selected, value, maxHeight, renderChip } = this.props;
 
-    return multiple ? (
-      <div
-        className="form-control typeahead__input-container"
-        style={{ maxHeight }}
-        onClick={() => {
-          this.inputRef.current?.focus();
-        }}
-      >
-        <div className="typeahead__input-wrapper">
-          {selected && selected.map((chip, idx) => renderChip(chip, idx))}
+    return (
+      <DirectionContext.Consumer>
+        {(direction) => {
+          const isRTL = direction === Direction.RTL;
 
-          {this.renderInput()}
-          <div className="typeahead__input-aligner" />
-        </div>
-        <div ref={this.sizerRef} className="sizer form-control typeahead__input">
-          {value}
-        </div>
-      </div>
-    ) : (
-      this.renderInput()
+          return multiple ? (
+            <div
+              className="form-control typeahead__input-container"
+              style={{ maxHeight }}
+              onClick={() => {
+                this.inputRef.current?.focus();
+              }}
+            >
+              <div className="typeahead__input-wrapper">
+                {selected && selected.map((chip, idx) => renderChip(chip, idx))}
+
+                {this.renderInput(isRTL)}
+                <div className="typeahead__input-aligner" />
+              </div>
+              <div ref={this.sizerRef} className="sizer form-control typeahead__input">
+                {value}
+              </div>
+            </div>
+          ) : (
+            this.renderInput(isRTL)
+          );
+        }}
+      </DirectionContext.Consumer>
     );
   }
 }