@transferwise/components 46.160.4 → 46.160.6

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>
     );
   }
 }

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

@@ -2,7 +2,11 @@ import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { userEvent, within } from 'storybook/test';
 import { Search as SearchIcon } from '@transferwise/icons';
 
-import { forEachColumn, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import {
+  forEachColumn,
+  useRtlDiffI18n,
+  withRTLDiff,
+} from '../../../.storybook/decorators/RtlDiffDecorator';
 import { Size } from '../../common';
 import Typeahead from '..';
 
@@ -14,70 +18,99 @@ export default {
 
 type Story = StoryObj<typeof Typeahead>;
 
-const baseOptions = [
-  { label: 'British pound', note: 'GBP' },
-  { label: 'Euro', note: 'EUR' },
-  { label: 'US Dollar', note: 'USD' },
-];
+const localisedStrings = {
+  gbp: { ltr: 'British pound', rtl: 'جنيه إسترليني' },
+  eur: { ltr: 'Euro', rtl: 'يورو' },
+  usd: { ltr: 'US Dollar', rtl: 'دولار أمريكي' },
+  placeholder: { ltr: 'Search currencies…', rtl: 'ابحث عن العملات...' },
+};
 
 export const TriggerVariants: Story = {
-  render: () => (
-    <>
-      <Typeahead
-        id="rtl-addon-md"
-        name="rtl-addon-md"
-        placeholder="Search currencies…"
-        size={Size.MEDIUM}
-        addon={<SearchIcon size={24} />}
-        clearable
-        options={baseOptions}
-        initialValue={[{ label: 'British pound', note: 'GBP' }]}
-        onChange={() => {}}
-      />
+  render: () => {
+    const i18n = useRtlDiffI18n();
+
+    const baseOptions = [
+      { label: i18n.gbp, note: 'GBP' },
+      { label: i18n.eur, note: 'EUR' },
+      { label: i18n.usd, note: 'USD' },
+    ];
+
+    return (
+      <>
+        <Typeahead
+          id="rtl-addon-placeholder"
+          name="rtl-addon-placeholder"
+          placeholder={i18n.placeholder}
+          size={Size.MEDIUM}
+          addon={<SearchIcon size={24} />}
+          clearable
+          options={baseOptions}
+          onChange={() => {}}
+        />
+        <Typeahead
+          id="rtl-addon-md"
+          name="rtl-addon-md"
+          placeholder={i18n.placeholder}
+          size={Size.MEDIUM}
+          addon={<SearchIcon size={24} />}
+          clearable
+          options={baseOptions}
+          initialValue={[{ label: i18n.gbp, note: 'GBP' }]}
+          onChange={() => {}}
+        />
+        <Typeahead
+          id="rtl-addon-lg"
+          name="rtl-addon-lg"
+          placeholder={i18n.placeholder}
+          size={Size.LARGE}
+          addon={<SearchIcon size={24} />}
+          clearable
+          options={baseOptions}
+          initialValue={[{ label: i18n.eur, note: 'EUR' }]}
+          onChange={() => {}}
+        />
+        <Typeahead
+          id="rtl-multiple"
+          name="rtl-multiple"
+          placeholder={i18n.placeholder}
+          size={Size.MEDIUM}
+          addon={<SearchIcon size={24} />}
+          multiple
+          clearable
+          options={baseOptions}
+          initialValue={[
+            { label: i18n.gbp, note: 'GBP' },
+            { label: i18n.eur, note: 'EUR' },
+          ]}
+          onChange={() => {}}
+        />
+      </>
+    );
+  },
+  ...withRTLDiff({ width: '80%', i18n: localisedStrings }),
+};
+
+export const OpenDropdown: Story = {
+  render: () => {
+    const i18n = useRtlDiffI18n();
+
+    return (
       <Typeahead
-        id="rtl-addon-lg"
-        name="rtl-addon-lg"
-        placeholder="Search currencies…"
+        id="rtl-open"
+        name="rtl-open"
+        placeholder={i18n.placeholder}
         size={Size.LARGE}
         addon={<SearchIcon size={24} />}
         clearable
-        options={baseOptions}
-        initialValue={[{ label: 'Euro', note: 'EUR' }]}
-        onChange={() => {}}
-      />
-      <Typeahead
-        id="rtl-multiple"
-        name="rtl-multiple"
-        placeholder="Search currencies…"
-        size={Size.MEDIUM}
-        addon={<SearchIcon size={24} />}
-        multiple
-        clearable
-        options={baseOptions}
-        initialValue={[
-          { label: 'British pound', note: 'GBP' },
-          { label: 'Euro', note: 'EUR' },
+        options={[
+          { label: i18n.gbp, note: 'GBP' },
+          { label: i18n.eur, note: 'EUR' },
+          { label: i18n.usd, note: 'USD' },
         ]}
         onChange={() => {}}
       />
-    </>
-  ),
-  ...withRTLDiff({ width: '80%' }),
-};
-
-export const OpenDropdown: Story = {
-  render: () => (
-    <Typeahead
-      id="rtl-open"
-      name="rtl-open"
-      placeholder="Search currencies…"
-      size={Size.LARGE}
-      addon={<SearchIcon size={24} />}
-      clearable
-      options={baseOptions}
-      onChange={() => {}}
-    />
-  ),
+    );
+  },
   play: async ({ canvasElement }) => {
     await forEachColumn(canvasElement, async (column) => {
       const scope = within(column);
@@ -86,5 +119,5 @@ export const OpenDropdown: Story = {
       await userEvent.keyboard('Brit');
     });
   },
-  ...withRTLDiff({ width: '80%' }),
+  ...withRTLDiff({ width: '80%', i18n: localisedStrings }),
 };

package/src/_deprecated/Select/_stories/Select.rtl.test.story.tsx

@@ -67,5 +67,12 @@ export const OpenDropdown: Story = {
     if (!trigger) return;
     await userEvent.click(trigger);
   },
-  ...withRTLDiff({ renderAs: 'iframe', width: '80%' }),
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    width: '80%',
+    i18n: {
+      searchPlaceholder: { ltr: 'Type a currency', rtl: 'اكتب عملة' },
+      placeholder: { ltr: 'Select currency', rtl: 'اختر العملة' },
+    },
+  }),
 };

package/src/main.css

@@ -140,6 +140,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -322,6 +323,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -504,6 +506,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -686,6 +689,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -868,6 +872,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1050,6 +1055,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1232,6 +1238,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1415,6 +1422,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1598,6 +1606,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1781,6 +1790,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1964,7 +1974,9 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /* See: https://github.com/fontsource/fontsource/blob/main/fonts/google/inter/variable.css */
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -2409,6 +2421,7 @@
   --color-sentiment-background-surface-active: #F8CD20;
   --color-sentiment-border-overlay: rgba(58,53,35,0.30196);
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -2557,6 +2570,7 @@
   --color-interactive-control-active: #471358;
   --color-background-screen: #260a2f;
 }
+
 @font-face {
   font-family: Inter;
   font-style: normal;
@@ -19795,6 +19809,10 @@ a[data-toggle="tooltip"] {
   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);
+}
 .wds-pocket-surface {
   background-color: #ffffff;
   background-color: var(--color-background-screen);
@@ -22589,6 +22607,25 @@ button.np-option {
   color: #768e9c;
   color: var(--color-content-tertiary);
 }
+[dir="rtl"] .np-input::-moz-placeholder {
+  direction: rtl !important;
+}
+[dir="rtl"] .np-input:-moz-placeholder {
+  direction: rtl !important;
+}
+[dir="rtl"] .np-input::placeholder,
+[dir="rtl"] .np-input:placeholder-shown {
+  direction: rtl !important;
+}
+[dir="rtl"] .np-input:-moz-placeholder[type="email"], [dir="rtl"] .np-input:-moz-placeholder[type="tel"], [dir="rtl"] .np-input:-moz-placeholder[type="number"], [dir="rtl"] .np-input:-moz-placeholder[type="url"] {
+  direction: ltr !important;
+}
+[dir="rtl"] .np-input:placeholder-shown[type="email"],
+[dir="rtl"] .np-input:placeholder-shown[type="tel"],
+[dir="rtl"] .np-input:placeholder-shown[type="number"],
+[dir="rtl"] .np-input:placeholder-shown[type="url"] {
+  direction: ltr !important;
+}
 .np-input--shape-rectangle {
   border-radius: 10px !important;
   border-radius: var(--radius-small) !important;
@@ -23776,10 +23813,25 @@ button.np-option {
   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;
+}
 .tw-instructions {
   /* Reset */
   margin: 0;
@@ -24190,6 +24242,9 @@ button.np-link {
   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;
@@ -24258,6 +24313,10 @@ button.np-link {
   overflow: hidden;
   margin-block-end: 0 !important;
 }
+[dir="rtl"] .wds-amount-input-input-container {
+  display: inline-grid;
+  grid-template-columns: auto 1fr;
+}
 @media (prefers-reduced-motion: reduce) {
   .wds-amount-input-input-container {
     transition: none;
@@ -24270,6 +24329,8 @@ button.np-link {
   text-align: end;
   background-color: transparent;
   line-height: inherit;
+  field-sizing: content;
+  block-size: inherit;
 }
 .wds-amount-input-input:focus-visible {
   outline: none;
@@ -24534,6 +24595,9 @@ button.np-link {
   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;
@@ -24541,6 +24605,10 @@ button.np-link {
 .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/styles/less/neptune.css

@@ -140,6 +140,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -322,6 +323,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -504,6 +506,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -686,6 +689,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -868,6 +872,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1050,6 +1055,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1232,6 +1238,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1415,6 +1422,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1598,6 +1606,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1781,6 +1790,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1964,6 +1974,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /* See: https://github.com/fontsource/fontsource/blob/main/fonts/google/inter/variable.css */
 @font-face {
   font-family: Inter;