@transferwise/components 46.160.5 → 46.160.6

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

@@ -22607,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;
@@ -23794,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;
@@ -24208,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;
@@ -24276,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;
@@ -24288,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;
@@ -24552,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;
@@ -24559,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/Inputs/_stories/InputGroup.test.story.tsx

@@ -1,69 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { Search } from '@transferwise/icons';
-
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
-import Button from '../../Button';
-import { Input } from '../Input/Input';
-import { InputGroup } from '../InputGroup/InputGroup';
-
-export default {
-  component: InputGroup,
-  title: 'Forms/InputGroup/Tests',
-  tags: ['!autodocs', '!manifest'],
-} satisfies Meta<typeof InputGroup>;
-
-type Story = StoryObj<typeof InputGroup>;
-
-/**
- * InputGroup positions addons at the logical start or end of an input.
- * In RTL mode the start and end sides are mirrored, so an addonStart icon
- * should appear on the right and an addonEnd button should appear on the left.
- * All three placement combinations are included to verify each case.
- */
-export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <InputGroup
-        addonStart={{
-          content: <Search size={24} />,
-          initialContentWidth: 24,
-        }}
-      >
-        <Input placeholder="addonStart only" />
-      </InputGroup>
-
-      <InputGroup
-        addonEnd={{
-          content: (
-            <Button v2 size="sm">
-              Copy
-            </Button>
-          ),
-          interactive: true,
-          padding: 'sm',
-        }}
-      >
-        <Input placeholder="addonEnd only" />
-      </InputGroup>
-
-      <InputGroup
-        addonStart={{
-          content: <Search size={24} />,
-          initialContentWidth: 24,
-        }}
-        addonEnd={{
-          content: (
-            <Button v2 size="sm">
-              Clear
-            </Button>
-          ),
-          interactive: true,
-          padding: 'sm',
-        }}
-      >
-        <Input placeholder="addonStart and addonEnd" />
-      </InputGroup>
-    </>
-  ),
-  ...withRTLDiff(),
-};

package/src/Inputs/_stories/SearchInput.test.story.tsx

@@ -1,32 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
-
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
-import { Size } from '../../common';
-import { SearchInput } from '../SearchInput/SearchInput';
-
-export default {
-  component: SearchInput,
-  title: 'Forms/SearchInput/Tests',
-  tags: ['!autodocs', '!manifest'],
-} satisfies Meta<typeof SearchInput>;
-
-type Story = StoryObj<typeof SearchInput>;
-
-export const RTLDiff: Story = {
-  render: () => (
-    <>
-      {/* sm — search icon (addonStart) position flips to trailing side in RTL */}
-      <SearchInput size={Size.SMALL} shape="pill" placeholder="Search" />
-
-      {/* md — search icon (addonStart) position flips to trailing side in RTL */}
-      <SearchInput size={Size.MEDIUM} shape="pill" placeholder="Search" />
-
-      {/* sm rectangle — icon flip with rectangle shape */}
-      <SearchInput size={Size.SMALL} shape="rectangle" placeholder="Search" />
-
-      {/* md rectangle — icon flip with rectangle shape */}
-      <SearchInput size={Size.MEDIUM} shape="rectangle" placeholder="Search" />
-    </>
-  ),
-  ...withRTLDiff(),
-};