@transferwise/components 46.162.1 → 46.162.2

package/src/Button/Button.less

@@ -244,19 +244,3 @@
     }
   }
 }
-
-
-:dir(rtl) {
-  .wds-Button {
-    .tw-icon-chevron-right,
-    .tw-icon-arrow-right,
-    .tw-icon-chevron-left,
-    .tw-icon-arrow-left,
-    .tw-icon-arrow-diagonal-down,
-    .tw-icon-arrow-diagonal-up,
-    .tw-icon-list,
-    .tw-icon-activity {
-      scale: -1 1;
-    }
-  }
-}

package/src/Button/_stories/Button.test.story.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { ArrowRight, ChevronRight, Freeze } from '@transferwise/icons';
+import { ArrowEnd, ChevronEnd, Freeze } from '@transferwise/icons';
 import { Flag } from '@wise/art';
 import { expect, userEvent, within } from 'storybook/test';
 import Button from '../Button.resolver';
@@ -55,7 +55,7 @@ export const AllVariants: Story = {
               priority={priority}
               size={size}
               addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
-              addonEnd={{ type: 'icon', value: <ArrowRight /> }}
+              addonEnd={{ type: 'icon', value: <ArrowEnd /> }}
               block
             >
               {`${priority} default ${size}`}
@@ -69,7 +69,7 @@ export const AllVariants: Story = {
                 type: 'avatar',
                 value: [{ asset: <Freeze /> }, { asset: <Freeze /> }],
               }}
-              addonEnd={{ type: 'icon', value: <ArrowRight /> }}
+              addonEnd={{ type: 'icon', value: <ArrowEnd /> }}
               block
               disabled
             >
@@ -80,7 +80,7 @@ export const AllVariants: Story = {
               priority={priority}
               size={size}
               addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
-              addonEnd={{ type: 'icon', value: <ArrowRight /> }}
+              addonEnd={{ type: 'icon', value: <ArrowEnd /> }}
               block
               loading
             >
@@ -100,7 +100,7 @@ export const AllVariants: Story = {
               sentiment="negative"
               priority={priority as ButtonPriority}
               size={size}
-              addonEnd={{ type: 'icon', value: <ChevronRight /> }}
+              addonEnd={{ type: 'icon', value: <ChevronEnd /> }}
               addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
               block
             >
@@ -112,7 +112,7 @@ export const AllVariants: Story = {
               sentiment="negative"
               priority={priority as ButtonPriority}
               size={size}
-              addonEnd={{ type: 'icon', value: <ChevronRight /> }}
+              addonEnd={{ type: 'icon', value: <ChevronEnd /> }}
               addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
               block
               disabled
@@ -124,7 +124,7 @@ export const AllVariants: Story = {
               sentiment="negative"
               priority={priority as ButtonPriority}
               size={size}
-              addonEnd={{ type: 'icon', value: <ChevronRight /> }}
+              addonEnd={{ type: 'icon', value: <ChevronEnd /> }}
               addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
               block
               loading
@@ -174,7 +174,7 @@ export const RTLDiff: Story = {
         Start icon
       </Button>
 
-      <Button v2 size="md" addonEnd={{ type: 'icon', value: <ArrowRight /> }}>
+      <Button v2 size="md" addonEnd={{ type: 'icon', value: <ArrowEnd /> }}>
         End icon
       </Button>
 
@@ -182,7 +182,7 @@ export const RTLDiff: Story = {
         v2
         size="md"
         addonStart={{ type: 'icon', value: <Freeze /> }}
-        addonEnd={{ type: 'icon', value: <ArrowRight /> }}
+        addonEnd={{ type: 'icon', value: <ArrowEnd /> }}
       >
         Both icons
       </Button>
@@ -206,7 +206,7 @@ export const RTLDiff: Story = {
         Sm start icon
       </Button>
 
-      <Button v2 size="sm" addonEnd={{ type: 'icon', value: <ArrowRight /> }}>
+      <Button v2 size="sm" addonEnd={{ type: 'icon', value: <ArrowEnd /> }}>
         Sm end icon
       </Button>
 
@@ -214,12 +214,12 @@ export const RTLDiff: Story = {
         v2
         size="sm"
         addonStart={{ type: 'icon', value: <Freeze /> }}
-        addonEnd={{ type: 'icon', value: <ArrowRight /> }}
+        addonEnd={{ type: 'icon', value: <ArrowEnd /> }}
       >
         Sm both icons
       </Button>
 
-      <Button v2 size="md" loading addonEnd={{ type: 'icon', value: <ArrowRight /> }}>
+      <Button v2 size="md" loading addonEnd={{ type: 'icon', value: <ArrowEnd /> }}>
         Loading
       </Button>
 

package/src/Calendar/DateHeader/DateHeader.tsx

@@ -6,7 +6,7 @@ import { useLayout } from '../../common/hooks';
 import Title from '../../Title';
 import messages from '../Calendar.messages';
 import Button from '../../Button/Button';
-import { ChevronDown, ChevronLeft, ChevronRight } from '@transferwise/icons';
+import { ChevronDown, ChevronStart, ChevronEnd } from '@transferwise/icons';
 import IconButton from '../../IconButton';
 
 interface DateHeaderProps {
@@ -41,7 +41,7 @@ const DateHeader: React.FC<DateHeaderProps> = ({
           disabled={isPreviousDisabled}
           onClick={onPreviousClick}
         >
-          <ChevronLeft className="left-single-direction" />
+          <ChevronStart />
         </IconButton>
       </div>
       {label && (
@@ -69,7 +69,7 @@ const DateHeader: React.FC<DateHeaderProps> = ({
           disabled={isNextDisabled}
           onClick={onNextClick}
         >
-          <ChevronRight className="right-single-direction" />
+          <ChevronEnd />
         </IconButton>
       </div>
     </div>

package/src/Carousel/Carousel.tsx

@@ -1,4 +1,4 @@
-import { ChevronLeft, ChevronRight } from '@transferwise/icons';
+import { ChevronStart, ChevronEnd } from '@transferwise/icons';
 import { clsx } from 'clsx';
 import { type CSSProperties, type ReactNode, useEffect, useRef, useState } from 'react';
 
@@ -182,7 +182,7 @@ const Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }
               data-testid="scroll-carousel-left"
               onClick={() => scrollCarousel('backward')}
             >
-              <ChevronLeft />
+              <ChevronStart />
             </IconButton>
             <IconButton
               size={32}
@@ -194,7 +194,7 @@ const Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }
               disabled={scrollIsAtEnd}
               onClick={() => scrollCarousel('forward')}
             >
-              <ChevronRight />
+              <ChevronEnd />
             </IconButton>
           </div>
         ) : null}

package/src/DateInput/DateInput.css

@@ -9,6 +9,19 @@
 .tw-date .tw-date--day {
   margin-block-end: 0;
 }
+[dir="rtl"] .tw-date .np-input {
+  text-align: end;
+}
+[dir="rtl"] .tw-date .np-input::-moz-placeholder {
+  text-align: start;
+}
+[dir="rtl"] .tw-date .np-input:-moz-placeholder {
+  text-align: start;
+}
+[dir="rtl"] .tw-date .np-input::placeholder,
+[dir="rtl"] .tw-date .np-input:placeholder-shown {
+  text-align: start;
+}
 @media (min-width: 600px) {
   .np-theme-personal .tw-date label {
     margin-block-end: 0;

package/src/DateInput/DateInput.less

@@ -10,7 +10,15 @@
   .tw-date--year,
   .tw-date--month,
   .tw-date--day {
-      margin-bottom: 0;
+    margin-bottom: 0;
+  }
+  [dir="rtl"] & .np-input {
+    text-align: right;
+
+    &::placeholder,
+    &:placeholder-shown {
+      text-align: start;
+    }
   }
 }
 
@@ -22,4 +30,4 @@
       }
     }
   }
-}
+}

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

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn, userEvent, within } from 'storybook/test';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import DateInput from '..';
+
+export default {
+  component: DateInput,
+  title: 'Forms/DateInput/Tests/RTL Diff',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof DateInput>;
+
+type Story = StoryObj<typeof DateInput>;
+
+export const Sizes: Story = {
+  render: () => (
+    <>
+      <DateInput size="sm" onChange={fn()} />
+      <DateInput size="md" onChange={fn()} />
+      <DateInput size="lg" onChange={fn()} />
+      <DateInput mode="month-year" onChange={fn()} />
+    </>
+  ),
+  ...withRTLDiff({ renderAs: 'iframe' }),
+};
+
+export const OpenDropdown: Story = {
+  render: () => <DateInput onChange={() => {}} />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.queryByRole('combobox');
+    if (!trigger) return;
+    await userEvent.click(trigger);
+  },
+  ...withRTLDiff({ renderAs: 'iframe' }),
+};

package/src/DateInput/_stories/DateInput.test.story.tsx

@@ -6,7 +6,6 @@ import { lorem10 } from '../../test-utils';
 
 import Provider from '../../Provider';
 import translations from '../../i18n';
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import { withVariantConfig } from '../../../.storybook/helpers';
 
 const meta: Meta<typeof DateInput> = {
@@ -231,15 +230,3 @@ export const InputErrorMobile: Story = {
   ...InputError,
   ...withVariantConfig(['mobile'], InputError),
 };
-
-export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <DateInput size="sm" onChange={fn()} />
-      <DateInput size="md" onChange={fn()} />
-      <DateInput size="lg" onChange={fn()} />
-      <DateInput mode="month-year" onChange={fn()} />
-    </>
-  ),
-  ...withRTLDiff(),
-};

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

@@ -90,7 +90,7 @@ export const TriggerVariants: Story = {
       />
     </>
   ),
-  ...withRTLDiff({ width: 'stretch' }),
+  ...withRTLDiff({ renderAs: 'iframe', width: 'stretch' }),
 };
 
 export const OpenDropdown: Story = {

package/src/InputWithDisplayFormat/_stories/InputWithDisplayFormat.test.story.tsx

@@ -1,6 +1,7 @@
 import { userEvent, within } from 'storybook/test';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import InputWithDisplayFormat, { InputWithDisplayFormatProps } from '..';
 import Field, { FieldProps } from '../../Field/Field';
 
@@ -31,3 +32,54 @@ export const SecurityPinPlay: Story = {
     await userEvent.type(canvas.getByPlaceholderText('*-*-*-*-*-*'), '123456');
   },
 };
+
+export const RTLDiff: StoryObj<typeof InputWithDisplayFormat> = {
+  render: () => {
+    const i18n = useRtlDiffI18n();
+
+    return (
+      <>
+        <Field id="empty" label="Empty with placeholder">
+          <InputWithDisplayFormat
+            id="empty"
+            value=""
+            displayPattern="**** - **** - ****"
+            placeholder={i18n.placeholder}
+            onChange={() => {}}
+          />
+        </Field>
+        <Field id="card-code" label="Localised pattern">
+          <InputWithDisplayFormat
+            id="card-code"
+            value={i18n.value}
+            maxLength={16}
+            displayPattern="**** - **** - ****"
+            onChange={() => {}}
+          />
+        </Field>
+        <Field id="iban" label="IBAN (not localised)">
+          <InputWithDisplayFormat
+            id="iban"
+            value="GB29NWBK60161331926819"
+            maxLength={22}
+            displayPattern="** **** **** **** **** ****"
+            onChange={() => {}}
+          />
+        </Field>
+      </>
+    );
+  },
+  ...withRTLDiff({
+    width: 'stretch',
+    i18n: {
+      value: {
+        ltr: 'XKQMRTBWJNFL',
+        rtl: 'خكقمرتبوجنفل',
+      },
+      placeholder: {
+        ltr: 'Enter code',
+        rtl: 'أدخل الرمز',
+      },
+    },
+  }),
+};

package/src/Inputs/SelectInput/OptionContent/SelectInputOptionContent.tsx

@@ -7,6 +7,7 @@ export interface SelectInputOptionContentProps {
   note?: string;
   description?: string;
   icon?: React.ReactNode;
+  className?: string;
 }
 
 /**
@@ -19,6 +20,7 @@ export function SelectInputOptionContent({
   note,
   description,
   icon,
+  className,
 }: SelectInputOptionContentProps) {
   const withinTrigger = useContext(SelectInputOptionContentWithinTriggerContext);
 
@@ -27,6 +29,7 @@ export function SelectInputOptionContent({
       className={clsx(
         'np-select-input-option-content-container',
         (note || description) && 'np-text-body-large',
+        className,
       )}
     >
       {icon ? (
@@ -47,7 +50,7 @@ export function SelectInputOptionContent({
             withinTrigger && 'np-select-input-option-content-text-within-trigger',
           )}
         >
-          <div className="d-inline">{title}</div>
+          <div className="d-inline np-select-input-option-content-title">{title}</div>
           {note ? (
             <span className="np-select-input-option-content-text-secondary np-text-body-default">
               {note}

package/src/Inputs/SelectInput/SelectInput.test.tsx

@@ -721,6 +721,80 @@ describe('SelectInput', () => {
     expect(descriptionElement).toHaveClass('np-select-input-option-description-in-trigger');
   });
 
+  it('applies custom className to option content container in the trigger', () => {
+    render(
+      <SelectInput
+        items={[
+          { type: 'option', value: 'USD' },
+          { type: 'option', value: 'EUR' },
+        ]}
+        renderValue={(currency) => (
+          <SelectInputOptionContent title={currency} className="custom-option-class" />
+        )}
+        value="USD"
+      />,
+    );
+
+    const triggerContent = screen
+      .getByText('USD')
+      .closest('.np-select-input-option-content-container');
+    expect(triggerContent).toHaveClass('custom-option-class');
+  });
+
+  it('applies custom className to option content container in dropdown options', async () => {
+    render(
+      <SelectInput
+        items={[
+          { type: 'option', value: 'USD' },
+          { type: 'option', value: 'EUR' },
+        ]}
+        renderValue={(currency) => (
+          <SelectInputOptionContent title={currency} className="custom-option-class" />
+        )}
+        value="USD"
+      />,
+    );
+
+    const trigger = screen.getByRole('combobox');
+    await userEvent.click(trigger);
+
+    const listbox = screen.getByRole('listbox');
+    const options = within(listbox).getAllByRole('option');
+    const optionContent = options[0].querySelector('.np-select-input-option-content-container');
+    expect(optionContent).toHaveClass('custom-option-class');
+  });
+
+  it('supports conditional className based on withinTrigger', async () => {
+    render(
+      <SelectInput
+        items={[
+          { type: 'option', value: 'USD' },
+          { type: 'option', value: 'EUR' },
+        ]}
+        renderValue={(currency, withinTrigger) => (
+          <SelectInputOptionContent
+            title={currency}
+            className={withinTrigger ? undefined : 'dropdown-only-class'}
+          />
+        )}
+        value="USD"
+      />,
+    );
+
+    const triggerContent = screen
+      .getByText('USD')
+      .closest('.np-select-input-option-content-container');
+    expect(triggerContent).not.toHaveClass('dropdown-only-class');
+
+    const trigger = screen.getByRole('combobox');
+    await userEvent.click(trigger);
+
+    const listbox = screen.getByRole('listbox');
+    const options = within(listbox).getAllByRole('option');
+    const optionContent = options[0].querySelector('.np-select-input-option-content-container');
+    expect(optionContent).toHaveClass('dropdown-only-class');
+  });
+
   describe('listbox label', () => {
     const fieldLabel = 'Fruits';
     const triggerLabel = 'Select fruit';

package/src/ListItem/ListItem.css

@@ -567,7 +567,7 @@
 .wds-list-item-control-wrapper {
   grid-area: control;
 }
-.wds-list-item-navigation .tw-icon-chevron-right {
+.wds-list-item-navigation .tw-icon-chevron-end {
   color: #c9cbce;
   color: var(--color-interactive-secondary);
   display: block;

package/src/ListItem/ListItem.grid.less

@@ -169,10 +169,10 @@
       }
     }
 
-    // LESS struggles with ranged container queries so
-    // we need to escape the interpolated expression.
-    @container (~"@{wds-list-item-cq-min} < width <= @{wds-list-item-cq-max}") {
-      .wds-list-item-media-image{
+    // LESS struggles with ranged container queries so we need to
+    // escape the interpolated expression using `e()` function.
+    @container (e("@{wds-list-item-cq-min} < width <= @{wds-list-item-cq-max}")) {
+      .wds-list-item-media-image {
         object-position: bottom left;
       }
 

package/src/ListItem/ListItem.less

@@ -224,7 +224,7 @@
   }
 
   &-navigation {
-    .tw-icon-chevron-right {
+    .tw-icon-chevron-end {
       color: var(--color-interactive-secondary);
       display: block;
     }

package/src/ListItem/Navigation/ListItemNavigation.tsx

@@ -1,4 +1,4 @@
-import { ChevronRight } from '@transferwise/icons';
+import { ChevronEnd } from '@transferwise/icons';
 import type { ButtonProps } from '../../Button/Button.types';
 import { useListItemControl } from '../useListItemControl';
 import { PrimitiveButton } from '../../Primitives';
@@ -32,7 +32,7 @@ export const Navigation = function Navigation({
 }: ListItemNavigationProps) {
   const { baseItemProps } = useListItemControl('navigation', { href, hideIndicator, ...props });
   const { ids, describedByIds } = useContext(ListItemContext);
-  const icon = hideIndicator ? null : <ChevronRight size={16} data-testid="NavigationIndicator" />;
+  const icon = hideIndicator ? null : <ChevronEnd size={16} data-testid="NavigationIndicator" />;
 
   return href ? (
     <>{icon}</>

package/src/PhoneNumberInput/PhoneNumberInput.css

@@ -27,3 +27,6 @@
 .tw-telephone__number-input {
   flex: auto 1 1;
 }
+[dir="rtl"] .tw-telephone__prefix-option .np-select-input-option-content-title {
+  direction: ltr;
+}

package/src/PhoneNumberInput/PhoneNumberInput.less

@@ -7,7 +7,7 @@
     margin-left: var(--size-12);
   }
 
-  &__number-input-field{
+  &__number-input-field {
     [dir="rtl"] & {
       text-align: end;
     }
@@ -22,7 +22,7 @@
     width: 100%;
   }
 
-  .np-select-input-content{
+  .np-select-input-content {
     [dir="rtl"] & {
       text-align: end;
       direction: ltr;
@@ -40,3 +40,11 @@
 .tw-telephone__number-input {
   flex: auto 1 1;
 }
+
+// Prevent bidi algorithm from flipping "+{country-code}" to "{country-code}+"
+// in RTL dropdown options as phone numbers are universally read as LTR.
+.tw-telephone__prefix-option .np-select-input-option-content-title {
+  [dir="rtl"] & {
+    direction: ltr;
+  }
+}

package/src/PhoneNumberInput/PhoneNumberInput.tsx

@@ -229,6 +229,7 @@ const PhoneNumberInput = ({
                       ?.map((country) => country.iso3)
                       .join(', ')
               }
+              className={withinTrigger ? undefined : 'tw-telephone__prefix-option'}
             />
           )}
           filterable

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

@@ -33,7 +33,7 @@ export const Sizes: Story = {
       </Field>
     </>
   ),
-  ...withRTLDiff(),
+  ...withRTLDiff({ renderAs: 'iframe' }),
 };
 
 export const DropdownOpen: Story = {

package/src/PromoCard/Indicator/PromoCardIndicator.tsx

@@ -1,4 +1,4 @@
-import { ArrowRight, Check, Download } from '@transferwise/icons';
+import { ArrowEnd, Check, Download } from '@transferwise/icons';
 import { clsx } from 'clsx';
 import { ReactElement, ReactNode } from 'react';
 
@@ -57,7 +57,7 @@ const PromoCardIndicator: React.FC<PromoCardIndicatorProps> = ({
     isIconString &&
     {
       check: Check,
-      arrow: ArrowRight,
+      arrow: ArrowEnd,
       download: Download,
     }[icon];
 

package/src/PromoCard/PromoCard.css

@@ -53,9 +53,6 @@
 .np-Card-indicatorIcon .tw-icon {
   color: var(--Card-indicator-icon-color);
 }
-[dir="rtl"] .np-Card-indicatorIcon .tw-icon {
-  transform: scaleX(-1);
-}
 .np-Card--checked,
 .np-Card--link {
   color: currentColor;

package/src/PromoCard/PromoCard.less

@@ -50,11 +50,6 @@
 
     &Icon .tw-icon {
       color: var(--Card-indicator-icon-color);
-
-      // Flips icon for right to left content
-      [dir="rtl"] & {
-        transform: scaleX(-1);
-      }
     }
   }
 

package/src/Prompt/CriticalBanner/_stories/CriticalBanner.test.story.tsx

@@ -511,5 +511,5 @@ export const RTLDiff: Story = {
       />
     </>
   ),
-  ...withRTLDiff(),
+  ...withRTLDiff({ renderAs: 'iframe' }),
 };

package/src/i18n/en.json

@@ -35,6 +35,7 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Select an option...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Country code",
   "neptune.PhoneNumberInput.phoneNumberLabel": "Phone number",
+  "neptune.PhoneNumberInput.phoneNumberPrefix": "Prefix",
   "neptune.Select.searchPlaceholder": "Search...",
   "neptune.SelectInput.noResultsFound": "No results found",
   "neptune.StatusIcon.iconLabel.error": "Error:",