@transferwise/components 46.160.0 → 46.160.2

package/src/Calendar/Calendar.test.tsx

@@ -1,4 +1,5 @@
 import { fireEvent, mockMatchMedia, render, screen, userEvent } from '../test-utils';
+import { DirectionProvider } from '../Provider/Direction/DirectionProvider';
 import Calendar from './Calendar';
 import type { DisabledRules } from './Calendar.types';
 
@@ -445,4 +446,85 @@ describe('Calendar', () => {
       expect(handleChange).not.toHaveBeenCalled();
     });
   });
+
+  describe('RTL keyboard navigation', () => {
+    describe('in day view', () => {
+      it.each([
+        ['{ArrowLeft}', +1],
+        ['{ArrowRight}', -1],
+        ['{ArrowUp}', -7],
+        ['{ArrowDown}', +7],
+      ])(
+        "handles '%s' to step %d day(s) — horizontal arrows are reversed",
+        async (text: string, step: number) => {
+          const handleDateFocus = jest.fn();
+          render(
+            <DirectionProvider direction="rtl">
+              <Calendar value={initialValue} onDateFocus={handleDateFocus} />
+            </DirectionProvider>,
+          );
+
+          await user.click(screen.getByRole('button', { name: /selected day/iu }));
+          await user.keyboard(text);
+
+          const expected = new Date(initialValue);
+          expected.setDate(initialValue.getDate() + step);
+          expect(handleDateFocus).toHaveBeenCalledWith(expected, { isEnabled: true });
+        },
+      );
+    });
+
+    describe('in year view', () => {
+      it.each([
+        ['{ArrowLeft}', +1],
+        ['{ArrowRight}', -1],
+        ['{ArrowUp}', -4],
+        ['{ArrowDown}', +4],
+      ])(
+        "handles '%s' to step %d year(s) — horizontal arrows are reversed",
+        async (text: string, step: number) => {
+          const handleDateFocus = jest.fn();
+          render(
+            <DirectionProvider direction="rtl">
+              <Calendar value={initialValue} onDateFocus={handleDateFocus} />
+            </DirectionProvider>,
+          );
+
+          await user.click(screen.getByRole('button', { name: /year view/iu }));
+          await user.keyboard(text);
+
+          const expected = new Date(initialValue);
+          expected.setFullYear(initialValue.getFullYear() + step);
+          expect(handleDateFocus).toHaveBeenCalledWith(expected, { isEnabled: true });
+        },
+      );
+    });
+
+    describe('in month view', () => {
+      it.each([
+        ['{ArrowLeft}', +1],
+        ['{ArrowRight}', -1],
+        ['{ArrowUp}', -4],
+        ['{ArrowDown}', +4],
+      ])(
+        "handles '%s' to step %d month(s) — horizontal arrows are reversed",
+        async (text: string, step: number) => {
+          const handleDateFocus = jest.fn();
+          render(
+            <DirectionProvider direction="rtl">
+              <Calendar value={initialValue} onDateFocus={handleDateFocus} />
+            </DirectionProvider>,
+          );
+
+          await user.click(screen.getByRole('button', { name: /year view/iu }));
+          await user.keyboard(' ');
+          await user.keyboard(text);
+
+          const expected = new Date(initialValue);
+          expected.setMonth(initialValue.getMonth() + step);
+          expect(handleDateFocus).toHaveBeenCalledWith(expected, { isEnabled: true });
+        },
+      );
+    });
+  });
 });

package/src/Calendar/Calendar.tsx

@@ -3,6 +3,7 @@ import { useIntl } from 'react-intl';
 import { formatDate } from '@transferwise/formatting';
 
 import { MonthFormat } from '../common';
+import { useDirection } from '../common/hooks';
 import { isWithinRange, moveToWithinRange, returnDateView } from '../common/DateUtils';
 import { clampToDayViewBoundary, isDateDisabled, hasDisabledDatesInMonth } from './_helpers';
 import { LONG_DAY_FORMAT } from './Calendar.constants';
@@ -53,6 +54,7 @@ const Calendar = ({
   onChange,
 }: CalendarProps) => {
   const intl = useIntl();
+  const { isRTL } = useDirection();
   const selectedDate = getStartOfDay(value);
   const min = getStartOfDay(minProp);
   const max = getStartOfDay(maxProp);
@@ -185,9 +187,10 @@ const Calendar = ({
 
   const handleKeyDown = useCallback(
     (event: KeyboardEvent<HTMLDivElement>) => {
+      const orientationSign = isRTL ? -1 : 1;
       switch (event.key) {
         case 'ArrowLeft':
-          adjustDate(-1, -1, -1);
+          adjustDate(-1 * orientationSign, -1 * orientationSign, -1 * orientationSign);
           event.preventDefault();
           break;
         case 'ArrowUp':
@@ -195,7 +198,7 @@ const Calendar = ({
           event.preventDefault();
           break;
         case 'ArrowRight':
-          adjustDate(1, 1, 1);
+          adjustDate(1 * orientationSign, 1 * orientationSign, 1 * orientationSign);
           event.preventDefault();
           break;
         case 'ArrowDown':
@@ -217,7 +220,7 @@ const Calendar = ({
           break;
       }
     },
-    [adjustDate, focusedDate, mode, handleSelectedDateUpdate],
+    [adjustDate, focusedDate, mode, handleSelectedDateUpdate, isRTL],
   );
 
   const focusedDateOutOfRange = focusedDate ? !isWithinRange(focusedDate, min, max) : false;

package/src/Carousel/Carousel.test.tsx

@@ -1,6 +1,7 @@
 import { userEvent, fireEvent, render, screen, mockMatchMedia } from '../test-utils';
 
 import Display from '../Display';
+import { DirectionProvider } from '../Provider/Direction/DirectionProvider';
 import Title from '../Title';
 
 import Carousel, { type CarouselCard } from './Carousel';
@@ -38,8 +39,9 @@ const carouselCards: CarouselCard[] = [
 
 const onClick = jest.fn();
 
-const renderCarousel = () => {
-  render(<Carousel header="Cool stuff" cards={carouselCards} onClick={onClick} />);
+const renderCarousel = ({ direction }: { direction?: 'rtl' | 'ltr' } = {}) => {
+  const ui = <Carousel header="Cool stuff" cards={carouselCards} onClick={onClick} />;
+  render(direction ? <DirectionProvider direction={direction}>{ui}</DirectionProvider> : ui);
 };
 
 describe('Carousel', () => {
@@ -195,6 +197,52 @@ describe('Carousel', () => {
   });
 });
 
+describe('Carousel RTL', () => {
+  const scrollBy = jest.fn();
+
+  beforeEach(() => {
+    window.HTMLElement.prototype.scrollBy = scrollBy;
+  });
+
+  afterEach(() => {
+    scrollBy.mockClear();
+  });
+
+  it('scrolls in negative direction when clicking forward in RTL', async () => {
+    mockPositions(948, 903);
+    renderCarousel({ direction: 'rtl' });
+
+    const scrollRightButton = screen.getByTestId('scroll-carousel-right');
+    await userEvent.click(scrollRightButton);
+
+    expect(scrollBy).toHaveBeenCalledWith({ left: -300, behavior: 'smooth' });
+  });
+
+  it('scrolls in positive direction when clicking backward in RTL', async () => {
+    mockPositions(948, 903);
+    renderCarousel({ direction: 'rtl' });
+
+    const carousel = screen.getByRole('list');
+    fireEvent.scroll(carousel, { target: { scrollLeft: -10 } });
+
+    const scrollLeftButton = screen.getByTestId('scroll-carousel-left');
+    await userEvent.click(scrollLeftButton);
+
+    expect(scrollBy).toHaveBeenCalledWith({ left: 300, behavior: 'smooth' });
+  });
+
+  it('normalises negative scrollLeft for button state in RTL', () => {
+    mockPositions(948, 903);
+    renderCarousel({ direction: 'rtl' });
+
+    const carousel = screen.getByRole('list');
+    fireEvent.scroll(carousel, { target: { scrollLeft: -10 } });
+
+    const scrollLeftButton = screen.getByTestId('scroll-carousel-left');
+    expect(scrollLeftButton).toBeEnabled();
+  });
+});
+
 const mockPositions = (scrollWidth: number, offsetWidth: number) => {
   Object.defineProperty(HTMLElement.prototype, 'scrollWidth', {
     configurable: true,

package/src/Carousel/Carousel.tsx

@@ -2,6 +2,7 @@ import { ChevronLeft, ChevronRight } from '@transferwise/icons';
 import { clsx } from 'clsx';
 import { type CSSProperties, type ReactNode, useEffect, useRef, useState } from 'react';
 
+import { useDirection } from '../common/hooks';
 import IconButton from '../IconButton';
 import Title from '../Title';
 import type { PromoCardLinkProps } from '../PromoCard/PromoCard';
@@ -48,10 +49,11 @@ const Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }
   const [visibleCardOnMobileView, setVisibleCardOnMobileView] = useState<string>('');
   const carouselElementRef = useRef<HTMLDivElement>(null);
   const carouselCardsRef = useRef<CardsReference[]>([]);
+  const { isRTL } = useDirection();
 
-  const isLeftActionButtonEnabled = scrollPosition > LEFT_SCROLL_OFFSET;
+  const isPrevButtonEnabled = scrollPosition > LEFT_SCROLL_OFFSET;
 
-  const areActionButtonsEnabled = isLeftActionButtonEnabled || !scrollIsAtEnd;
+  const areActionButtonsEnabled = isPrevButtonEnabled || !scrollIsAtEnd;
 
   const [focusedCard, setFocusedCard] = useState(cards?.[0]?.id);
 
@@ -83,16 +85,17 @@ const Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }
     setPreviousScrollPosition(scrollPosition);
   };
 
-  const scrollCarousel = (direction: 'left' | 'right' = 'right') => {
+  const scrollCarousel = (direction: 'forward' | 'backward') => {
     if (carouselElementRef.current) {
       const { scrollWidth } = carouselElementRef.current;
 
       const cardWidth = scrollWidth / carouselCardsRef.current.length;
 
-      const res = Math.floor(cardWidth - cardWidth * 0.05);
+      const distance = Math.floor(cardWidth - cardWidth * 0.05);
+      const sign = direction === 'forward' ? 1 : -1;
 
       carouselElementRef.current.scrollBy({
-        left: direction === 'right' ? res : -res,
+        left: isRTL ? -sign * distance : sign * distance,
         behavior: 'smooth',
       });
     }
@@ -174,10 +177,10 @@ const Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }
               size={32}
               tabIndex={-1}
               priority="tertiary"
-              disabled={!isLeftActionButtonEnabled}
+              disabled={!isPrevButtonEnabled}
               aria-hidden="true"
               data-testid="scroll-carousel-left"
-              onClick={() => scrollCarousel('left')}
+              onClick={() => scrollCarousel('backward')}
             >
               <ChevronLeft />
             </IconButton>
@@ -189,7 +192,7 @@ const Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }
               aria-hidden="true"
               data-testid="scroll-carousel-right"
               disabled={scrollIsAtEnd}
-              onClick={() => scrollCarousel()}
+              onClick={() => scrollCarousel('forward')}
             >
               <ChevronRight />
             </IconButton>
@@ -203,7 +206,7 @@ const Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }
         className="carousel"
         onScroll={(event) => {
           const target = event.target as HTMLElement;
-          setScrollPosition(target.scrollLeft);
+          setScrollPosition(Math.abs(target.scrollLeft));
         }}
       >
         {cards?.map((card, index) => {
@@ -336,7 +339,7 @@ const Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }
 
 const isVisible = (container: HTMLElement, el: HTMLElement) => {
   const cWidth = container.offsetWidth;
-  const cScrollOffset = container.scrollLeft;
+  const cScrollOffset = Math.abs(container.scrollLeft);
 
   const elemLeft = el.offsetLeft - container.offsetLeft;
   const elemRight = elemLeft + el.offsetWidth;

package/src/Carousel/_stories/Carousel.story.tsx

@@ -1,60 +1,27 @@
 import type { Args } from '@storybook/react-webpack5';
-import { Illustration } from '@wise/art';
+
 import {
   createSandboxStory,
   globalScope,
 } from '../../../.storybook/components/sandbox/SandboxEditor';
-
-import Display from '../../Display';
-import Carousel, { type CarouselCard } from '..';
+import Carousel from '..';
+import { stubbedCarouselCards } from './constants';
 
 export default {
+  args: {
+    cards: stubbedCarouselCards,
+    header: 'Carousel title',
+  },
   component: Carousel,
   title: 'Navigation/Carousel',
 };
 
-const carouselCards: CarouselCard[] = [
-  {
-    id: 'YOUR_INVOICE',
-    type: 'button',
-    onClick: () => {
-      console.log('Clicked on button');
-    },
-    content: (
-      <div className="d-flex p-a-1 p-t-0 flex-column align-items-center">
-        <div style={{ position: 'absolute' }}>
-          <Illustration disablePadding name="globe" size="small" alt="" />
-        </div>
-        <div style={{ position: 'absolute', zIndex: '2', bottom: '8px', left: '16px' }}>
-          <Display type="display-small">Here there, everywhere</Display>
-        </div>
-      </div>
-    ),
-  },
-  {
-    id: 'YOUR_WEBSITE',
-    type: 'promo',
-    onClick: () => {
-      console.log('hi');
-    },
-    href: 'http://wise.com',
-    title: 'Wise',
-    description: 'The best way to move money internationally',
-  },
-  {
-    id: 'SHOP_OR_STALL',
-    type: 'anchor',
-    href: 'https://wise.com',
-    hrefTarget: '_blank',
-    onClick: () => {},
-    styles: {
-      backgroundImage:
-        'url(https://wise.com/public-resources/assets/team-page/tapestry/team_member_tapestry_01.jpg)',
-      backgroundSize: 'cover',
-    },
-    content: <Display type="display-small">Get Quick Pay</Display>,
+export const Playground = {
+  render: (args: Args) => {
+    return <Carousel header="Pretty nifty stuff" cards={stubbedCarouselCards} {...args} />;
   },
-];
+  args: {},
+};
 
 export const Sandbox = createSandboxStory({
   code: `const App = () => {
@@ -89,10 +56,3 @@ export const Sandbox = createSandboxStory({
 };`,
   scope: globalScope,
 });
-
-export const CarouselDefault = {
-  render: (args: Args) => {
-    return <Carousel header="Pretty nifty stuff" cards={carouselCards} {...args} />;
-  },
-  args: {},
-};

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

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
-import Display from '../../Display';
-import Carousel, { type CarouselCard } from '..';
+import Carousel from '..';
+import { stubbedCarouselCards } from './constants';
 
 export default {
   component: Carousel,
@@ -12,48 +12,12 @@ export default {
 
 type Story = StoryObj<typeof Carousel>;
 
-const sampleCards: CarouselCard[] = [
-  {
-    id: 'card-1',
-    type: 'button',
-    content: (
-      <div className="d-flex p-a-1 flex-column align-items-center">
-        <Display type="display-small">Card one</Display>
-      </div>
-    ),
-  },
-  {
-    id: 'card-2',
-    type: 'promo',
-    href: '#',
-    title: 'Promo card',
-    description: 'Description for promo card',
-  },
-  {
-    id: 'card-3',
-    type: 'anchor',
-    href: '#',
-    hrefTarget: '_blank',
-    content: <Display type="display-small">Anchor card</Display>,
-  },
-  {
-    id: 'card-4',
-    type: 'button',
-    content: (
-      <div className="d-flex p-a-1 flex-column align-items-center">
-        <Display type="display-small">Card four</Display>
-      </div>
-    ),
-  },
-  {
-    id: 'card-5',
-    type: 'anchor',
-    href: '#',
-    content: <Display type="display-small">Card five</Display>,
-  },
+const manyCards = [
+  ...stubbedCarouselCards,
+  ...stubbedCarouselCards.map((card) => ({ ...card, id: `${card.id}_2` })),
 ];
 
 export const RTLDiff: Story = {
-  render: () => <Carousel header="Carousel with navigation arrows" cards={sampleCards} />,
-  ...withRTLDiff(),
+  render: () => <Carousel cards={manyCards} header="Pretty nifty stuff" />,
+  ...withRTLDiff({ width: 'stretch' }),
 };

package/src/Carousel/_stories/constants.tsx

@@ -0,0 +1,46 @@
+import { Illustration } from '@wise/art';
+import Display from '../../Display';
+import type { CarouselCard } from '../Carousel';
+
+export const stubbedCarouselCards: CarouselCard[] = [
+  {
+    id: 'YOUR_INVOICE',
+    type: 'button',
+    onClick: () => {
+      console.log('Clicked on button');
+    },
+    content: (
+      <div className="d-flex p-a-1 p-t-0 flex-column align-items-center">
+        <div style={{ position: 'absolute' }}>
+          <Illustration disablePadding name="globe" size="small" alt="" />
+        </div>
+        <div style={{ position: 'absolute', zIndex: '2', bottom: '8px', left: '16px' }}>
+          <Display type="display-small">Here there, everywhere</Display>
+        </div>
+      </div>
+    ),
+  },
+  {
+    id: 'YOUR_WEBSITE',
+    type: 'promo',
+    onClick: () => {
+      console.log('hi');
+    },
+    href: 'http://wise.com',
+    title: 'Wise',
+    description: 'The best way to move money internationally',
+  },
+  {
+    id: 'SHOP_OR_STALL',
+    type: 'anchor',
+    href: 'https://wise.com',
+    hrefTarget: '_blank',
+    onClick: () => {},
+    styles: {
+      backgroundImage:
+        'url(https://wise.com/public-resources/assets/team-page/tapestry/team_member_tapestry_01.jpg)',
+      backgroundSize: 'cover',
+    },
+    content: <Display type="display-small">Get Quick Pay</Display>,
+  },
+];

package/src/Checkbox/_stories/Checkbox.story.tsx

@@ -52,7 +52,7 @@ export const Multiple: Story = {
       </>
     );
   },
-  ...withVariantConfig(['default', 'dark', 'rtl']),
+  ...withVariantConfig(['default', 'dark']),
 };
 
 export const WithinField = {

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

@@ -30,7 +30,7 @@ export const MultipleMobile: Story = {
       </>
     );
   },
-  ...withVariantConfig(['default', 'dark', 'rtl', 'mobile']),
+  ...withVariantConfig(['default', 'dark', 'mobile']),
 };
 
 /**
@@ -41,8 +41,9 @@ export const MultipleMobile: Story = {
 export const RTLDiff: Story = {
   render: () => (
     <>
-      <Checkbox label="Label only" onChange={() => {}} />
+      <Checkbox checked label="Label only" onChange={() => {}} />
       <Checkbox
+        checked
         label="Label with secondary"
         secondary="Secondary description text"
         onChange={() => {}}

package/src/CheckboxButton/CheckboxButton.css

@@ -32,6 +32,9 @@
   background: var(--color-background-screen);
   transform: translate(-50%, -50%);
 }
+[dir="rtl"] .np-tw-checkbox-indeterminate::after {
+  transform: translate(50%, -50%);
+}
 .np-tw-checkbox-indeterminate .has-error::after {
   background-color: #e74848;
   background-color: var(--color-interactive-negative);

package/src/CheckboxButton/CheckboxButton.less

@@ -40,6 +40,10 @@
     left: 50%;
     background: var(--color-background-screen);
     transform: translate(-50%, -50%);
+
+    [dir="rtl"] & {
+      transform: translate(50%, -50%);
+    }
   }
 
   .has-error {

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

@@ -17,10 +17,10 @@ type Story = StoryObj<typeof Chevron>;
  */
 export const RTLDiff: Story = {
   render: () => (
-    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+    <>
       <Chevron orientation="left" size="md" />
       <Chevron orientation="right" size="md" />
-    </div>
+    </>
   ),
   ...withRTLDiff(),
 };