@transferwise/components 0.0.0-experimental-47ae02a → 0.0.0-experimental-da6dbbf

package/src/dateLookup/DateLookup.testingLibrary.spec.js

@@ -1,9 +1,9 @@
 import '@testing-library/jest-dom';
 import user from '@testing-library/user-event';
-import { act } from 'react';
 
 import { render, screen, mockMatchMedia } from '../test-utils';
-import DateLookup from './DateLookup';
+
+import DateLookup from '.';
 
 mockMatchMedia();
 
@@ -20,218 +20,171 @@ describe('DateLookup (events)', () => {
   const min = new Date(2018, 11, 26);
   const max = new Date(2018, 11, 28);
 
-  describe('when not clearable', () => {
-    /** @type {jest.Mock} */
-    let handleChange;
-
-    const setup = async () => {
-      handleChange = jest.fn();
-
-      /** @type {import('@testing-library/react').RenderResult} */
-      let view;
-      await act(async () => {
-        view = render(
-          <>
-            {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-            <label id="prioritized-label">Prioritized label</label>
-            <DateLookup
-              value={date}
-              min={min}
-              max={max}
-              size="lg"
-              placeholder="Asd.."
-              label="label"
-              aria-labelledby="prioritized-label"
-              disabled={false}
-              clearable={false}
-              onChange={handleChange}
-              onClick={jest.fn()}
-            />
-          </>,
-        );
-      });
-      return view;
-    };
-
-    it('switches to years', async () => {
-      const view = await setup();
-      openDateLookup(view);
-      clickDateButton(view);
-
-      expect(getActiveYearButton(view)).toHaveFocus();
-
-      closeDateLookup(view);
-    });
-
-    it('has aria-label for 20 years', async () => {
-      const view = await setup();
-      openDateLookup(view);
-      clickDateButton(view);
-
-      expect(getButtonByAriaLabel('next 20 years')).toBeInTheDocument();
-      expect(getButtonByAriaLabel('previous 20 years')).toBeInTheDocument();
-
-      closeDateLookup(view);
-    });
-
-    it('switches to months', async () => {
-      const view = await setup();
-      openDateLookup(view);
-      clickDateButton(view);
-      user.click(getActiveYearButton(view));
+  let props;
+  let container;
+  let rerender;
 
-      expect(getActiveMonthButton(view)).toHaveFocus();
+  beforeEach(() => {
+    props = {
+      value: date,
+      min,
+      max,
+      size: 'lg',
+      placeholder: 'Asd..',
+      label: 'label',
+      'aria-labelledby': 'prioritized-label',
+      onChange: jest.fn(),
+      onClick: jest.fn(),
+      disabled: false,
+      clearable: false,
+    };
+    ({ container } = render(
+      <>
+        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+        <label id="prioritized-label">Prioritized label</label>
+        <DateLookup {...props} />
+      </>,
+    ));
+  });
 
-      closeDateLookup(view);
-    });
+  afterEach(() => {
+    closeDateLookup();
+  });
 
-    it('has aria label for year', async () => {
-      const view = await setup();
-      openDateLookup(view);
-      clickDateButton(view);
-      user.click(getActiveYearButton(view));
+  it('switches to years', () => {
+    openDateLookup();
+    clickDateButton();
 
-      expect(getButtonByAriaLabel('next year')).toBeInTheDocument();
-      expect(getButtonByAriaLabel('previous year')).toBeInTheDocument();
+    expect(getActiveYearButton()).toHaveFocus();
+  });
 
-      closeDateLookup(view);
-    });
+  it('has aria-label for 20 years', () => {
+    openDateLookup();
+    clickDateButton();
 
-    it('switches to days', async () => {
-      const view = await setup();
-      openDateLookup(view);
-      clickDateButton(view);
-      user.click(getActiveYearButton(view));
-      user.click(getActiveMonthButton(view));
+    expect(getButtonByAriaLabel('next 20 years')).toBeInTheDocument();
+    expect(getButtonByAriaLabel('previous 20 years')).toBeInTheDocument();
+  });
 
-      expect(getActiveDayButton(view)).toHaveFocus();
+  it('switches to months', () => {
+    openDateLookup();
+    clickDateButton();
+    user.click(getActiveYearButton());
 
-      closeDateLookup(view);
-    });
+    expect(getActiveMonthButton()).toHaveFocus();
+  });
 
-    it('has aria label for month', async () => {
-      const view = await setup();
-      openDateLookup(view);
-      clickDateButton(view);
-      user.click(getActiveYearButton(view));
-      user.click(getActiveMonthButton(view));
+  it('has aria label for year', () => {
+    openDateLookup();
+    clickDateButton();
+    user.click(getActiveYearButton());
 
-      expect(getButtonByAriaLabel('next month')).toBeInTheDocument();
-      expect(getButtonByAriaLabel('previous month')).toBeInTheDocument();
+    expect(getButtonByAriaLabel('next year')).toBeInTheDocument();
+    expect(getButtonByAriaLabel('previous year')).toBeInTheDocument();
+  });
 
-      closeDateLookup(view);
-    });
+  it('switches to days', () => {
+    openDateLookup();
+    clickDateButton();
+    user.click(getActiveYearButton());
+    user.click(getActiveMonthButton());
 
-    it('updates selected date and closes', async () => {
-      const view = await setup();
-      openDateLookup(view);
-      const d = new Date(2018, 11, 28);
-      const newDay = screen.getByText(d.getDate().toString());
-      user.click(newDay);
+    expect(getActiveDayButton()).toHaveFocus();
+  });
 
-      expect(handleChange).toHaveBeenCalledWith(d);
-      expect(getOpenButton(view)).toHaveFocus();
+  it('has aria label for month', () => {
+    openDateLookup();
+    clickDateButton();
+    user.click(getActiveYearButton());
+    user.click(getActiveMonthButton());
 
-      closeDateLookup(view);
-    });
+    expect(getButtonByAriaLabel('next month')).toBeInTheDocument();
+    expect(getButtonByAriaLabel('previous month')).toBeInTheDocument();
+  });
 
-    it('has aria label on selected date', async () => {
-      const view = await setup();
-      openDateLookup(view);
-      const d = new Date(2018, 11, 28);
-      const newDay = screen.getByText(d.getDate().toString());
-      user.click(newDay);
-      openDateLookup(view);
-      expect(screen.getByRole('button', { name: /selected day/i })).toBeInTheDocument();
+  it('updates selected date and closes', () => {
+    openDateLookup();
+    const d = new Date(2018, 11, 28);
+    const newDay = screen.getByText(d.getDate().toString());
+    user.click(newDay);
 
-      closeDateLookup(view);
-    });
+    expect(props.onChange).toHaveBeenCalledWith(d);
+    expect(getOpenButton()).toHaveFocus();
+  });
 
-    it('supports custom `aria-labelledby` attribute', async () => {
-      const view = await setup();
-      expect(screen.getByLabelText('Prioritized label')).toHaveClass('input-group');
+  it('has aria label on selected date', () => {
+    openDateLookup();
+    const d = new Date(2018, 11, 28);
+    const newDay = screen.getByText(d.getDate().toString());
+    user.click(newDay);
+    openDateLookup();
+    expect(screen.getByRole('button', { name: /selected day/i })).toBeInTheDocument();
+  });
 
-      closeDateLookup(view);
-    });
+  it('supports custom `aria-labelledby` attribute', () => {
+    expect(screen.getByLabelText('Prioritized label')).toHaveClass('input-group');
   });
 
   describe('when is clearable', () => {
-    /** @satisfies {import('./DateLookup').DateLookupProps} */
-    const props = {
-      value: date,
-      onChange: jest.fn(),
-      clearable: true,
-    };
-
-    const setup = async () => {
-      /** @type {import('@testing-library/react').RenderResult} */
-      let view;
-      await act(async () => {
-        view = render(<DateLookup {...props} />);
-      });
-      return view;
-    };
+    beforeEach(() => {
+      props = { value: date, onChange: jest.fn(), clearable: true };
+      ({ container, rerender } = render(<DateLookup {...props} />));
+    });
 
-    it(`doesn't show clear button if disable is true`, async () => {
-      const view = await setup();
-      expect(getClearButton(view)).toBeInTheDocument();
+    it(`doesn't show clear button if disable is true`, () => {
+      expect(getClearButton()).toBeInTheDocument();
 
-      view.rerender(<DateLookup {...props} disabled />);
+      rerender(<DateLookup {...props} disabled />);
 
-      expect(getClearButton(view)).not.toBeInTheDocument();
+      expect(getClearButton()).not.toBeInTheDocument();
     });
 
-    it('when user clicks on clear the focus returns to btn', async () => {
-      const view = await setup();
-      clickClearButton(view);
-      expect(getOpenButton(view)).toHaveFocus();
+    it('when user clicks on clear the focus returns to btn', () => {
+      clickClearButton();
+      expect(getOpenButton()).toHaveFocus();
     });
 
-    it('onChange gets called with null when reset button is clicked', async () => {
-      const view = await setup();
-      clickClearButton(view);
+    it('onChange gets called with null when reset button is clicked', () => {
+      clickClearButton();
       expect(props.onChange).toHaveBeenCalledWith(null);
     });
   });
 
-  const openDateLookup = (/** @type {import('@testing-library/react').RenderResult} */ view) =>
-    user.click(getOpenButton(view));
+  const openDateLookup = () => {
+    user.click(getOpenButton());
+  };
 
-  const clickDateButton = (/** @type {import('@testing-library/react').RenderResult} */ view) =>
-    user.click(getDateButton(view));
+  const clickDateButton = () => {
+    user.click(getDateButton());
+  };
 
   // Close dateLookup and removes events attached to documents.
-  const closeDateLookup = (/** @type {import('@testing-library/react').RenderResult} */ view) =>
-    user.click(view.container);
+  const closeDateLookup = () => {
+    user.click(container);
+  };
 
-  const clickClearButton = (/** @type {import('@testing-library/react').RenderResult} */ view) =>
-    user.click(getClearButton(view));
+  const clickClearButton = () => {
+    user.click(getClearButton());
+  };
 
-  const getActiveYearButton = (
-    /** @type {import('@testing-library/react').RenderResult} */ view,
-  ) => {
-    return view.container.querySelector('button.tw-date-lookup-year-option.active');
+  const getActiveYearButton = () => {
+    return container.querySelector('button.tw-date-lookup-year-option.active');
   };
 
-  const getActiveMonthButton = (
-    /** @type {import('@testing-library/react').RenderResult} */ view,
-  ) => {
-    return view.container.querySelector('button.tw-date-lookup-month-option.active');
+  const getActiveMonthButton = () => {
+    return container.querySelector('button.tw-date-lookup-month-option.active');
   };
 
-  const getActiveDayButton = (
-    /** @type {import('@testing-library/react').RenderResult} */ view,
-  ) => {
-    return view.container.querySelector('button.tw-date-lookup-day-option.active');
+  const getActiveDayButton = () => {
+    return container.querySelector('button.tw-date-lookup-day-option.active');
   };
 
-  const getButtonByAriaLabel = (/** @type {string} */ ariaLabel) => {
+  const getButtonByAriaLabel = (ariaLabel) => {
     return screen.getByRole('button', { name: ariaLabel });
   };
-  const getClearButton = (/** @type {import('@testing-library/react').RenderResult} */ view) =>
-    view.container.querySelector('.clear-btn');
-  const getOpenButton = (/** @type {import('@testing-library/react').RenderResult} */ view) =>
-    view.container.querySelector('button.np-date-trigger');
-  const getDateButton = (/** @type {import('@testing-library/react').RenderResult} */ view) =>
-    view.container.querySelector('button.tw-date-lookup-header-current');
+  const getClearButton = () => container.querySelector('.clear-btn');
+  const getOpenButton = () => container.querySelector('button.np-date-trigger');
+  const getDateButton = () => container.querySelector('button.tw-date-lookup-header-current');
+  const getBottomSheet = () => container.querySelector('.np-bottom-sheet');
+  const getPanel = () => container.querySelector('.np-panel');
 });

package/src/drawer/Drawer.js

@@ -1,6 +1,6 @@
+import { useId } from '@radix-ui/react-id';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import { useId } from 'react';
 
 import { Position, Typography } from '../common';
 import { CloseButton } from '../common/closeButton';
@@ -56,12 +56,12 @@ Drawer.propTypes = {
   footerContent: PropTypes.node,
   /** The content to appear in the drawer header. */
   headerTitle: PropTypes.node,
+  /** The action to perform on close click. */
+  onClose: PropTypes.func,
   /** The status of Drawer either open or not. */
   open: PropTypes.bool,
   /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */
   position: PropTypes.oneOf(['left', 'right', 'bottom']),
-  /** The action to perform on close click. */
-  onClose: PropTypes.func,
 };
 
 Drawer.defaultProps = {

package/src/field/Field.tsx

@@ -1,5 +1,5 @@
+import { useId } from '@radix-ui/react-id';
 import classNames from 'classnames';
-import { useId } from 'react';
 
 import { Sentiment } from '../common';
 import InlineAlert from '../inlineAlert/InlineAlert';
@@ -27,10 +27,10 @@ export const Field = ({ id, label, hint, error, className, children }: FieldProp
 
   const labelId = useId();
 
-  const fallbackInputId = useId();
+  const fallbackInputId = useId(); // TODO: Use `React.useId()` when react>=18
   const inputId = id !== null ? id ?? fallbackInputId : undefined;
 
-  const descriptionId = useId();
+  const descriptionId = useId(); // TODO: Use `React.useId()` when react>=18
 
   return (
     <FieldLabelIdContextProvider value={labelId}>

package/src/index.ts

@@ -6,6 +6,7 @@ export type { ActionOptionProps } from './actionOption';
 export type { AlertAction, AlertProps, AlertType } from './alert';
 export type { AvatarProps } from './avatar';
 export type { BadgeProps } from './badge';
+export type { CarouselProps } from './carousel';
 export type { CircularButtonProps } from './circularButton';
 export type {
   BodyTypes,
@@ -52,7 +53,6 @@ export type {
 export type { NavigationOptionListProps } from './navigationOptionsList';
 export type { PhoneNumberInputProps } from './phoneNumberInput/PhoneNumberInput';
 export type { PopoverProps } from './popover';
-export type { ProcessIndicatorProps } from './processIndicator';
 export type { ProgressProps } from './progress';
 export type { ProgressBarProps } from './progressBar';
 export type { DirectionProviderProps, LanguageProviderProps, ProviderProps } from './provider';
@@ -85,6 +85,7 @@ export { default as AvatarWrapper } from './avatarWrapper';
 export { default as Badge } from './badge';
 export { default as Body } from './body';
 export { default as Button } from './button';
+export { default as Carousel } from './carousel';
 export { default as Card } from './card';
 export { default as Checkbox } from './checkbox';
 export { default as CheckboxButton } from './checkboxButton';
@@ -105,8 +106,8 @@ export { default as Display } from './display';
 export { default as Drawer } from './drawer';
 export { default as DropFade } from './dropFade';
 export { default as Emphasis } from './emphasis';
-export { Field } from './field/Field';
 export { default as FlowNavigation } from './flowNavigation/FlowNavigation';
+export { Field } from './field/Field';
 export { default as Header } from './header';
 export { default as Image } from './image';
 export { default as Info } from './info';
@@ -140,7 +141,7 @@ export { default as Popover } from './popover';
 export { default as ProcessIndicator } from './processIndicator';
 export { default as Progress } from './progress';
 export { default as ProgressBar } from './progressBar';
-export { default as PromoCard, PromoCardGroup } from './promoCard';
+export { PromoCardGroup, default as PromoCard } from './promoCard';
 export { DirectionProvider, LanguageProvider, default as Provider } from './provider';
 export { default as Radio } from './radio';
 export { default as RadioGroup } from './radioGroup';

package/src/inputWithDisplayFormat/InputWithDisplayFormat.tsx

@@ -1,8 +1,7 @@
 import { Input, type InputProps } from '../inputs/Input';
 import WithDisplayFormat, { type WithDisplayFormatProps } from '../withDisplayFormat';
 
-export interface InputWithDisplayFormatProps
-  extends Omit<WithDisplayFormatProps<InputProps>, 'render'> {}
+export interface InputWithDisplayFormatProps extends Omit<WithDisplayFormatProps, 'render'> {}
 
 const InputWithDisplayFormat = (props: InputWithDisplayFormatProps) => (
   <WithDisplayFormat<InputProps> {...props} render={(renderProps) => <Input {...renderProps} />} />

package/src/inputs/SelectInput.story.tsx

@@ -197,7 +197,6 @@ export const Currencies: Story<Currency> = {
 
       const input = screen.getByRole('searchbox');
 
-      await userEvent.click(input);
       await userEvent.type(input, 'huf');
       await expect(
         within(screen.getByRole('listbox')).queryByRole('option'),

package/src/inputs/SelectInput.tsx

@@ -1,17 +1,9 @@
 import { Listbox as ListboxBase } from '@headlessui/react';
+import { useId } from '@radix-ui/react-id';
 import { Check, ChevronDown, Cross, CrossCircle } from '@transferwise/icons';
 import classNames from 'classnames';
 import mergeProps from 'merge-props';
-import {
-  createContext,
-  forwardRef,
-  useContext,
-  useEffect,
-  useId,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import { createContext, forwardRef, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 
 import { useEffectEvent } from '../common/hooks/useEffectEvent';

package/src/main.css

@@ -643,6 +643,141 @@ div.critical-comms .critical-comms-body {
   border-radius: 16px 16px 0 0;
   border-radius: var(--radius-medium) var(--radius-medium) 0 0;
 }
+.carousel-wrapper {
+  overflow: hidden;
+}
+.carousel {
+  display: flex;
+  align-items: center;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  gap: 16px;
+  gap: var(--size-16);
+  padding: 8px;
+  padding: var(--size-8);
+  margin: 8px;
+  margin: var(--size-8);
+}
+@media (max-width: 767px) {
+  .carousel {
+    gap: 8px;
+    gap: var(--size-8);
+  }
+}
+.carousel__header {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  min-height: 32px;
+  min-height: var(--size-32);
+  padding-bottom: 16px;
+  padding-bottom: var(--size-16);
+}
+.carousel__card,
+.carousel__card:hover,
+.carousel__card:focus,
+.carousel__card:focus-within {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  transition: none !important;
+  box-shadow: none !important;
+}
+.carousel__card {
+  display: block;
+  position: relative;
+  text-align: left;
+  border: none;
+  overflow: hidden;
+  background: rgba(134,167,189,0.10196);
+  background: var(--color-background-neutral);
+  border-radius: 32px;
+  border-radius: var(--size-32);
+  scroll-snap-align: center;
+  -webkit-scroll-snap-align: center;
+  transition: all 0.4s !important;
+}
+@media (min-width: 1200px) {
+  .carousel__card {
+    min-width: 280px;
+    width: 280px;
+    height: 280px;
+  }
+}
+@media (max-width: 1199px) {
+  .carousel__card {
+    min-width: 242px;
+    width: 242px;
+    height: 242px;
+  }
+}
+@media (max-width: 767px) {
+  .carousel__card {
+    min-width: 336px;
+    width: 336px;
+    height: 336px;
+    scroll-snap-stop: always;
+  }
+}
+.carousel__card:focus,
+.carousel__card:has(:focus-visible) {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width) !important;
+  outline-offset: var(--ring-outline-offset) !important;
+}
+.carousel__card:hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.carousel__card:focus {
+  background-color: var(--color-background-neutral-hover);
+}
+.carousel__card-content {
+  height: 100%;
+  font-weight: normal;
+  padding: 24px;
+  padding: var(--size-24);
+}
+.carousel__scroll-button {
+  width: 32px;
+  width: var(--size-32);
+  height: 32px;
+  height: var(--size-32);
+  align-items: center;
+  justify-content: center;
+}
+.carousel__indicators {
+  display: flex;
+  justify-content: center;
+  padding-top: 8px;
+  padding-top: var(--size-8);
+  gap: 8px;
+  gap: var(--size-8);
+}
+.carousel__indicator {
+  width: 12px;
+  width: var(--size-12);
+  height: 12px;
+  height: var(--size-12);
+  border-radius: 8px;
+  border-radius: var(--size-8);
+  background: #c9cbce;
+  background: var(--color-interactive-secondary);
+  border: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  transition: all 0.1s;
+}
+.carousel__indicator:hover {
+  width: 16px;
+  width: var(--size-16);
+}
+.carousel__indicator--selected,
+.carousel__indicator--selected:hover {
+  background: var(--color-interactive-primary);
+  width: 24px;
+  width: var(--size-24);
+}
 .np-checkbox-button input[type="checkbox"] {
   position: absolute;
   width: 24px;

package/src/main.less

@@ -5,6 +5,7 @@
 @import "./badge/Badge.less";
 @import "./button/Button.less";
 @import "./card/Card.less";
+@import "./carousel/Carousel.less";
 @import "./checkboxButton/CheckboxButton.less";
 @import "./chips/Chip.less";
 @import "./circularButton/CircularButton.less";

package/src/modal/Modal.tsx

@@ -1,5 +1,6 @@
+import { useId } from '@radix-ui/react-id';
 import classNames from 'classnames';
-import { ReactNode, useId, useRef } from 'react';
+import { ReactNode, useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 
 import {