@transferwise/components 0.0.0-experimental-4b93e2b → 0.0.0-experimental-f144cf1

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

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { ArrowEnd, ChevronEnd, Freeze } from '@transferwise/icons';
+import { ArrowRight, ChevronRight, 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: <ArrowEnd /> }}
+              addonEnd={{ type: 'icon', value: <ArrowRight /> }}
               block
             >
               {`${priority} default ${size}`}
@@ -69,7 +69,7 @@ export const AllVariants: Story = {
                 type: 'avatar',
                 value: [{ asset: <Freeze /> }, { asset: <Freeze /> }],
               }}
-              addonEnd={{ type: 'icon', value: <ArrowEnd /> }}
+              addonEnd={{ type: 'icon', value: <ArrowRight /> }}
               block
               disabled
             >
@@ -80,7 +80,7 @@ export const AllVariants: Story = {
               priority={priority}
               size={size}
               addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
-              addonEnd={{ type: 'icon', value: <ArrowEnd /> }}
+              addonEnd={{ type: 'icon', value: <ArrowRight /> }}
               block
               loading
             >
@@ -100,7 +100,7 @@ export const AllVariants: Story = {
               sentiment="negative"
               priority={priority as ButtonPriority}
               size={size}
-              addonEnd={{ type: 'icon', value: <ChevronEnd /> }}
+              addonEnd={{ type: 'icon', value: <ChevronRight /> }}
               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: <ChevronEnd /> }}
+              addonEnd={{ type: 'icon', value: <ChevronRight /> }}
               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: <ChevronEnd /> }}
+              addonEnd={{ type: 'icon', value: <ChevronRight /> }}
               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: <ArrowEnd /> }}>
+      <Button v2 size="md" addonEnd={{ type: 'icon', value: <ArrowRight /> }}>
         End icon
       </Button>
 
@@ -182,7 +182,7 @@ export const RTLDiff: Story = {
         v2
         size="md"
         addonStart={{ type: 'icon', value: <Freeze /> }}
-        addonEnd={{ type: 'icon', value: <ArrowEnd /> }}
+        addonEnd={{ type: 'icon', value: <ArrowRight /> }}
       >
         Both icons
       </Button>
@@ -206,7 +206,7 @@ export const RTLDiff: Story = {
         Sm start icon
       </Button>
 
-      <Button v2 size="sm" addonEnd={{ type: 'icon', value: <ArrowEnd /> }}>
+      <Button v2 size="sm" addonEnd={{ type: 'icon', value: <ArrowRight /> }}>
         Sm end icon
       </Button>
 
@@ -214,12 +214,12 @@ export const RTLDiff: Story = {
         v2
         size="sm"
         addonStart={{ type: 'icon', value: <Freeze /> }}
-        addonEnd={{ type: 'icon', value: <ArrowEnd /> }}
+        addonEnd={{ type: 'icon', value: <ArrowRight /> }}
       >
         Sm both icons
       </Button>
 
-      <Button v2 size="md" loading addonEnd={{ type: 'icon', value: <ArrowEnd /> }}>
+      <Button v2 size="md" loading addonEnd={{ type: 'icon', value: <ArrowRight /> }}>
         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, ChevronStart, ChevronEnd } from '@transferwise/icons';
+import { ChevronDown, ChevronLeft, ChevronRight } from '@transferwise/icons';
 import IconButton from '../../IconButton';
 
 interface DateHeaderProps {
@@ -41,7 +41,7 @@ const DateHeader: React.FC<DateHeaderProps> = ({
           disabled={isPreviousDisabled}
           onClick={onPreviousClick}
         >
-          <ChevronStart />
+          <ChevronLeft className="left-single-direction" />
         </IconButton>
       </div>
       {label && (
@@ -69,7 +69,7 @@ const DateHeader: React.FC<DateHeaderProps> = ({
           disabled={isNextDisabled}
           onClick={onNextClick}
         >
-          <ChevronEnd />
+          <ChevronRight className="right-single-direction" />
         </IconButton>
       </div>
     </div>

package/src/Carousel/Carousel.tsx

@@ -1,4 +1,4 @@
-import { ChevronStart, ChevronEnd } from '@transferwise/icons';
+import { ChevronLeft, ChevronRight } 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')}
             >
-              <ChevronStart />
+              <ChevronLeft />
             </IconButton>
             <IconButton
               size={32}
@@ -194,7 +194,7 @@ const Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }
               disabled={scrollIsAtEnd}
               onClick={() => scrollCarousel('forward')}
             >
-              <ChevronEnd />
+              <ChevronRight />
             </IconButton>
           </div>
         ) : null}

package/src/DateInput/DateInput.css

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

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

@@ -6,6 +6,7 @@ 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> = {
@@ -230,3 +231,15 @@ 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/Display/_stories/Display.story.tsx

@@ -118,40 +118,26 @@ export const Basic = () => {
 export const Numbers = () => {
   return (
     <>
-      <Title type={Typography.TITLE_SCREEN}>Display Number Small</Title>
+      <Title type={Typography.TITLE_SCREEN}>Display Number</Title>
       <hr />
-      <Display type={Typography.DISPLAY_NUMBER_SMALL}>
+      <Display type={Typography.DISPLAY_NUMBER}>
         <Money amount={1050.6} currency="UAH" />
       </Display>
       <hr />
-      <Display type={Typography.DISPLAY_NUMBER_SMALL}>
+      <Display type={Typography.DISPLAY_NUMBER}>
         <Money amount={10.17} currency="JPY" />
       </Display>
-
-      <Title type={Typography.TITLE_SCREEN}>Display Number Medium</Title>
       <hr />
-      <Display type={Typography.DISPLAY_NUMBER_MEDIUM}>
+      <Display type={Typography.DISPLAY_NUMBER}>
         <Money amount={0.01} currency="EUR" />
       </Display>
       <hr />
-      <Display type={Typography.DISPLAY_NUMBER_MEDIUM}>
+      <Display type={Typography.DISPLAY_NUMBER}>
         <Money amount={1000000} currency="EUR" />
       </Display>
-
-      <Title type={Typography.TITLE_SCREEN}>Display Number Large</Title>
-      <hr />
-      <Display type={Typography.DISPLAY_NUMBER_LARGE}>
-        <Money amount={1000000} currency="GBP" />
-      </Display>
-      <hr />
-      <Display type={Typography.DISPLAY_NUMBER_LARGE}>
-        <Money amount={1050.6} currency="UAH" />
-      </Display>
-
-      <Title type={Typography.TITLE_SCREEN}>Display Number (Deprecated)</Title>
       <hr />
       <Display type={Typography.DISPLAY_NUMBER}>
-        <Money amount={1050.6} currency="UAH" />
+        <Money amount={1000000} currency="GBP" />
       </Display>
     </>
   );

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

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

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

@@ -1,7 +1,6 @@
 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';
 
@@ -32,54 +31,3 @@ 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/Input/Input.css

@@ -39,6 +39,12 @@
   --ring-color: var(--color-interactive-primary);
 }
 .np-form-control--size-auto {
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
+  font-size: 1rem;
+  font-size: var(--font-size-16);
+  line-height: 150%;
+  letter-spacing: -0.011em;
   word-wrap: break-word;
   padding-block-start: 12px;
   padding-block-start: var(--size-12);
@@ -80,6 +86,12 @@
   padding-block-end: 0 !important;
 }
 .np-form-control--size-sm {
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  line-height: 155%;
+  letter-spacing: -0.006em;
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
   block-size: 32px !important;
   block-size: var(--size-32) !important;
@@ -119,6 +131,12 @@
   }
 }
 .np-form-control--size-md {
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
+  font-size: 1rem;
+  font-size: var(--font-size-16);
+  line-height: 150%;
+  letter-spacing: -0.011em;
   word-wrap: break-word;
   block-size: 48px !important;
   block-size: var(--size-48) !important;
@@ -166,6 +184,12 @@
   letter-spacing: 0;
   word-wrap: break-word;
   margin-block-end: initial;
+  font-size: 1.375rem;
+  font-size: var(--font-size-22);
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  letter-spacing: -0.018em;
+  line-height: 125%;
   block-size: 72px !important;
   block-size: var(--size-72) !important;
 }

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

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

@@ -39,6 +39,12 @@
   --ring-color: var(--color-interactive-primary);
 }
 .np-form-control--size-auto {
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
+  font-size: 1rem;
+  font-size: var(--font-size-16);
+  line-height: 150%;
+  letter-spacing: -0.011em;
   word-wrap: break-word;
   padding-block-start: 12px;
   padding-block-start: var(--size-12);
@@ -80,6 +86,12 @@
   padding-block-end: 0 !important;
 }
 .np-form-control--size-sm {
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  line-height: 155%;
+  letter-spacing: -0.006em;
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
   block-size: 32px !important;
   block-size: var(--size-32) !important;
@@ -119,6 +131,12 @@
   }
 }
 .np-form-control--size-md {
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
+  font-size: 1rem;
+  font-size: var(--font-size-16);
+  line-height: 150%;
+  letter-spacing: -0.011em;
   word-wrap: break-word;
   block-size: 48px !important;
   block-size: var(--size-48) !important;
@@ -166,6 +184,12 @@
   letter-spacing: 0;
   word-wrap: break-word;
   margin-block-end: initial;
+  font-size: 1.375rem;
+  font-size: var(--font-size-22);
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  letter-spacing: -0.018em;
+  line-height: 125%;
   block-size: 72px !important;
   block-size: var(--size-72) !important;
 }

package/src/ListItem/ListItem.css

@@ -567,7 +567,7 @@
 .wds-list-item-control-wrapper {
   grid-area: control;
 }
-.wds-list-item-navigation .tw-icon-chevron-end {
+.wds-list-item-navigation .tw-icon-chevron-right {
   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 using `e()` function.
-    @container (e("@{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.
+    @container (~"@{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-end {
+    .tw-icon-chevron-right {
       color: var(--color-interactive-secondary);
       display: block;
     }

package/src/ListItem/Navigation/ListItemNavigation.tsx

@@ -1,4 +1,4 @@
-import { ChevronEnd } from '@transferwise/icons';
+import { ChevronRight } 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 : <ChevronEnd size={16} data-testid="NavigationIndicator" />;
+  const icon = hideIndicator ? null : <ChevronRight size={16} data-testid="NavigationIndicator" />;
 
   return href ? (
     <>{icon}</>

package/src/PhoneNumberInput/PhoneNumberInput.css

@@ -27,6 +27,3 @@
 .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,11 +40,3 @@
 .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,7 +229,6 @@ 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({ renderAs: 'iframe' }),
+  ...withRTLDiff(),
 };
 
 export const DropdownOpen: Story = {