@transferwise/components 46.31.0 → 46.33.0

package/build/types/promoCard/PromoCard.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { CardProps } from '../common/card';
-import { PromoCardIndicatorProps } from './PromoCardIndicator';
-export type ReferenceType = React.Ref<HTMLInputElement>;
+import { type CardProps } from '../common/card';
+import { type PromoCardIndicatorProps } from './PromoCardIndicator';
+export type ReferenceType = React.Ref<HTMLInputElement> | React.Ref<HTMLDivElement>;
 export type RelatedTypes = '' | 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'next' | 'nofollow' | 'noreferrer' | 'noopener' | 'prev' | 'search' | 'tag';
 export interface PromoCardCommonProps {
     /** Optional prop to specify classNames onto the PromoCard */
@@ -30,12 +30,15 @@ export interface PromoCardCommonProps {
     isDisabled?: boolean;
     /** Specify an onClick event handler */
     onClick?: () => void;
+    /** Specify an onKeyDown event handler */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     /** Optional prop to specify the ID used for testing */
     testId?: string;
     /** Required prop to specify the title text of the PromoCard  */
     title: string;
     /** Set to false to use body font style for the title   */
     useDisplayFont?: boolean;
+    ref?: ReferenceType;
 }
 export interface PromoCardLinkProps extends PromoCardCommonProps, Omit<CardProps, 'children'> {
     /**
@@ -47,6 +50,12 @@ export interface PromoCardLinkProps extends PromoCardCommonProps, Omit<CardProps
     href?: string;
     /** Optionally specify the language of the linked URL */
     hrefLang?: string;
+    /** Optional property that can be pass a ref for the anchor. */
+    anchorRef?: React.Ref<HTMLAnchorElement>;
+    /**
+     * Optional prop to specify the ID of the anchor element which can be useful when using a ref.
+     */
+    anchorId?: string;
     /**
      * Relationship between the PromoCard href URL and the current page. See
      * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
@@ -59,7 +68,7 @@ export interface PromoCardLinkProps extends PromoCardCommonProps, Omit<CardProps
     isChecked?: never;
     tabIndex?: never;
     type?: never;
-    reference?: never;
+    ref?: ReferenceType;
     value?: never;
 }
 export interface PromoCardCheckedProps extends PromoCardCommonProps, Omit<CardProps, 'children'> {
@@ -70,7 +79,7 @@ export interface PromoCardCheckedProps extends PromoCardCommonProps, Omit<CardPr
     /** Optional prop to specify the tabIndex of the PromoCard */
     tabIndex?: number;
     /** Optional property to provide component Ref */
-    reference?: ReferenceType;
+    ref?: ReferenceType;
     /** Optional prop to specify the input type of the PromoCard  */
     type?: 'checkbox' | 'radio';
     /** Specify the value attribute of the PromoCard if Checkbox or Radio */
@@ -78,6 +87,8 @@ export interface PromoCardCheckedProps extends PromoCardCommonProps, Omit<CardPr
     /** Only applies to <a />s */
     download?: never;
     href?: never;
+    anchorRef?: never;
+    anchorId?: never;
     hrefLang?: never;
     rel?: never;
     target?: never;

package/build/types/promoCard/PromoCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PromoCard.d.ts","sourceRoot":"","sources":["../../../src/promoCard/PromoCard.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PromoCard.d.ts","sourceRoot":"","sources":["../../../src/promoCard/PromoCard.tsx"],"names":[],"mappings":"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"}

package/build/types/select/Select.d.ts

@@ -47,21 +47,21 @@ export interface SelectProps {
      * if `function` you can define your own search function to implement custom search experience. This search function used while filtering the options array. The custom search function takes two parameters. First is the option the second is the keyword.
      */
     search?: SelectSearch;
+    options: SelectOptions[];
+    searchValue?: string;
+    searchPlaceholder?: string;
+    classNames?: any;
+    dropdownUp?: boolean;
+    buttonProps?: Object;
+    dropdownProps?: Object;
     onChange: (...args: any[])=>any;
     onFocus?: (...args: any[])=>any;
     onBlur?: (...args: any[])=>any;
-    options: SelectOptions[];
     /**
      * To have full control of your search value and response use `onSearchChange` function combined with `searchValue` and custom filtering on the options array.
      * DO NOT USE TOGETHER WITH `search` PROPERTY
      */
     onSearchChange?: (...args: any[])=>any;
-    searchValue?: string;
-    searchPlaceholder?: string;
-    classNames?: any;
-    dropdownUp?: boolean;
-    buttonProps?: Object;
-    dropdownProps?: Object;
 }
 
 declare const Select: React.FC<SelectProps>;

package/build/types/select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/select/Select.js"],"names":[],"mappings":"AA6EA;;GAEG;AACH;;;;;;;;;;;;;;;;;;;;;;gCAieC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/select/Select.js"],"names":[],"mappings":"AA+EA;;GAEG;AACH;;;;;;;;;;;;;;;;;;;;;;gCAkeC"}

package/build/types/typeahead/Typeahead.d.ts

@@ -1,8 +1,6 @@
-import { DebouncedFunc } from 'lodash';
-import { Component, ReactNode } from 'react';
-import { Size, SizeMedium, SizeLarge } from '../common';
+import { ReactNode } from 'react';
+import { SizeMedium, SizeLarge } from '../common';
 import { InlineAlertProps } from '../inlineAlert/InlineAlert';
-import TypeaheadOption from './typeaheadOption/TypeaheadOption';
 export type TypeaheadOption<T = string> = {
     label: string;
     note?: string;
@@ -43,55 +41,6 @@ export interface TypeaheadProps<T> {
     onSearch?: (query: string) => void;
     validateChip?: (chip: TypeaheadOption<T>) => boolean;
 }
-type TypeaheadState<T> = {
-    selected: readonly TypeaheadOption<T>[];
-    keyboardFocusedOptionIndex: number | null;
-    errorState: boolean;
-    query: string;
-    optionsShown: boolean;
-    isFocused: boolean;
-};
-export default class Typeahead<T> extends Component<TypeaheadProps<T>, TypeaheadState<T>> {
-    props: TypeaheadProps<T> & Required<Pick<TypeaheadProps<T>, keyof typeof Typeahead.defaultProps>>;
-    static defaultProps: {
-        allowNew: false;
-        autoFillOnBlur: true;
-        autoFocus: false;
-        chipSeparators: never[];
-        clearable: true;
-        initialValue: never[];
-        inputAutoComplete: string;
-        minQueryLength: number;
-        multiple: false;
-        searchDelay: number;
-        showSuggestions: true;
-        showNewEntry: true;
-        size: Size.MEDIUM;
-        validateChip: () => true;
-    };
-    constructor(props: TypeaheadProps<T>);
-    handleSearchDebounced: DebouncedFunc<Typeahead<T>['handleSearch']>;
-    UNSAFE_componentWillReceiveProps(nextProps: TypeaheadProps<T>): void;
-    componentWillUnmount(): void;
-    handleOnFocus: () => void;
-    onOptionSelected: (event: React.MouseEvent, item: TypeaheadOption<T>) => void;
-    handleOnChange: React.ChangeEventHandler<HTMLInputElement>;
-    handleOnPaste: React.ClipboardEventHandler<HTMLInputElement>;
-    handleOnKeyDown: React.KeyboardEventHandler<HTMLInputElement>;
-    moveFocusedOption(offset: number): void;
-    selectItem: (item: TypeaheadOption<T>) => void;
-    handleSearch: (query: string) => void;
-    handleDocumentClick: () => void;
-    showMenu: () => void;
-    hideMenu: () => void;
-    updateSelectedValue: (selected: readonly TypeaheadOption<T>[]) => void;
-    clear: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    removeChip: (option: TypeaheadOption<T>) => void;
-    renderChip: (option: TypeaheadOption<T>, idx: number) => ReactNode;
-    renderMenu: ({ footer, options, id, keyboardFocusedOptionIndex, query, allowNew, showNewEntry, dropdownOpen, }: Pick<TypeaheadProps<T>, "footer" | "id" | "options" | "allowNew" | "showNewEntry"> & Pick<TypeaheadState<T>, "query" | "keyboardFocusedOptionIndex"> & {
-        dropdownOpen: boolean;
-    }) => import("react").JSX.Element;
-    render(): import("react").JSX.Element;
-}
-export {};
+declare const _default: <T>(props: TypeaheadProps<T>) => React.ReactElement;
+export default _default;
 //# sourceMappingURL=Typeahead.d.ts.map

package/build/types/typeahead/Typeahead.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../../src/typeahead/Typeahead.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../../src/typeahead/Typeahead.tsx"],"names":[],"mappings":"AASA,OAAO,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7C,OAAO,EAAmB,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAOnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAS9D,MAAM,MAAM,eAAe,CAAC,CAAC,GAAG,MAAM,IAAI;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE;QACN,OAAO,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;QACtC,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;KACjC,CAAC;IACF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,YAAY,CAAC,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAE9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC;IAClD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC;CACtD;yDA6cI,MAAM,YAAY;AAFvB,wBAEwB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.31.0",
+  "version": "46.33.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/carousel/Carousel.css

@@ -0,0 +1,135 @@
+.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);
+}

package/src/carousel/Carousel.less

@@ -0,0 +1,133 @@
+.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: var(--size-16);
+  padding: var(--size-8);
+  margin: var(--size-8);
+}
+
+@media (--screen-sm-max) {
+  .carousel {
+    gap: var(--size-8);
+  }
+}
+
+
+.carousel__header {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  min-height: var(--size-32);
+  padding-bottom: var(--size-16)
+}
+
+// The specificity inside PromoCard is too high for transition / box-shaodw, so we need to use !important below
+.carousel__card,
+.carousel__card:hover,
+.carousel__card:focus,
+.carousel__card:focus-within {
+  text-decoration: none;
+  transition: none !important;
+  box-shadow: none !important;
+}
+
+.carousel__card {
+  display: block;
+  position: relative;
+  text-align: left;
+  border: none;
+  overflow: hidden;
+  background: var(--color-background-neutral);
+  border-radius: var(--size-32);
+  scroll-snap-align: center;
+  -webkit-scroll-snap-align: center;
+  transition: all 0.4s !important;
+}
+
+@media (--screen-xl) {
+  .carousel__card {
+    min-width: 280px;
+    width: 280px;
+    height: 280px;
+  }
+}
+
+
+@media (--screen-lg-max) {
+  .carousel__card {
+    min-width: 242px;
+    width: 242px;
+    height: 242px;
+  }
+}
+
+
+@media (--screen-sm-max) {
+  .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: var(--size-24);
+}
+
+.carousel__scroll-button {
+  width: var(--size-32);
+  height: var(--size-32);
+  align-items: center;
+  justify-content: center;
+}
+
+.carousel__indicators {
+  display: flex;
+  justify-content: center;
+  padding-top: var(--size-8);
+  gap: var(--size-8);
+}
+
+.carousel__indicator {
+  width: var(--size-12);
+  height: var(--size-12);
+  border-radius: var(--size-8);
+  background: var(--color-interactive-secondary);
+  border: none;
+  appearance: none;
+  transition: all 0.1s;
+}
+
+.carousel__indicator:hover {
+  width: var(--size-16)
+}
+
+.carousel__indicator--selected,
+.carousel__indicator--selected:hover {
+  background: var(--color-interactive-primary);
+  width: var(--size-24);
+}

package/src/carousel/Carousel.spec.tsx

@@ -0,0 +1,221 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { userEvent } from '../test-utils';
+
+import Display from '../display';
+import Title from '../title';
+
+import Carousel, { type CarouselCard } from './Carousel';
+
+jest.mock('@wise/components-theming', () => ({
+  ...jest.requireActual<Record<string, unknown>>('@wise/components-theming'),
+  useTheme: jest.fn().mockReturnValue({ theme: 'personal' }),
+}));
+
+const yourInvoiceOnClick = jest.fn();
+
+const carouselCards: CarouselCard[] = [
+  {
+    id: 'YOUR_INVOICE',
+    type: 'anchor',
+    href: 'https://wise.com',
+    onClick: yourInvoiceOnClick,
+    content: <div>Add a link in accounting software like Xero or QuickBooks.</div>,
+  },
+  {
+    id: 'YOUR_WEBSITE',
+    type: 'button',
+    onClick: () => {},
+    content: <Title type="title-screen">Wise.</Title>,
+  },
+  {
+    id: 'SHOP_OR_STALL',
+    type: 'anchor',
+    href: 'https://wise.com',
+    onClick: () => {},
+    content: <Display type="display-small">Get Quick Pay</Display>,
+  },
+];
+
+const onClick = jest.fn();
+
+const renderCarousel = () => {
+  render(<Carousel header="Cool stuff" cards={carouselCards} onClick={onClick} />);
+};
+
+describe('Carousel', () => {
+  const focusSpy = jest.fn();
+  const scrollBy = jest.fn();
+
+  beforeEach(() => {
+    // eslint-disable-next-line functional/immutable-data
+    window.HTMLElement.prototype.scrollIntoView = focusSpy;
+    // eslint-disable-next-line functional/immutable-data
+    window.HTMLElement.prototype.scrollBy = scrollBy;
+  });
+
+  afterEach(() => {
+    focusSpy.mockClear();
+  });
+
+  it('shows expected content on page', async () => {
+    renderCarousel();
+
+    expect(
+      screen.getByText('Add a link in accounting software like Xero or QuickBooks.'),
+    ).toBeInTheDocument();
+
+    expect(screen.getByText('Wise.')).toBeInTheDocument();
+
+    expect(screen.getByText('Get Quick Pay')).toBeInTheDocument();
+  });
+
+  it('allows user to scroll carousel to the right when at start', () => {
+    mockPositions(948, 903);
+
+    renderCarousel();
+
+    const scrollLeftButton = screen.getByTestId('scroll-carousel-left');
+    const scrollRightButton = screen.getByTestId('scroll-carousel-right');
+
+    expect(scrollLeftButton).toBeDisabled();
+    expect(scrollRightButton).toBeEnabled();
+
+    userEvent.click(scrollRightButton);
+
+    expect(scrollBy).toHaveBeenCalledWith({ left: 300, behavior: 'smooth' });
+  });
+
+  it('allows user to scroll carousel to the left or right when in middle', () => {
+    mockPositions(948, 903);
+
+    renderCarousel();
+
+    const carousel = screen.getByRole('list');
+    fireEvent.scroll(carousel, { target: { scrollLeft: 10 } });
+
+    const scrollLeftButton = screen.getByTestId('scroll-carousel-left');
+    const scrollRightButton = screen.getByTestId('scroll-carousel-right');
+
+    expect(scrollLeftButton).toBeEnabled();
+    expect(scrollRightButton).toBeEnabled();
+
+    userEvent.click(scrollLeftButton);
+
+    expect(scrollBy).toHaveBeenCalledWith({ left: -300, behavior: 'smooth' });
+
+    userEvent.click(scrollRightButton);
+
+    expect(scrollBy).toHaveBeenCalledWith({ left: 300, behavior: 'smooth' });
+  });
+
+  it('allows user to scroll carousel to the left when at end', () => {
+    mockPositions(948, 903);
+
+    renderCarousel();
+
+    const carousel = screen.getByRole('list');
+    fireEvent.scroll(carousel, { target: { scrollLeft: 50 } });
+
+    const scrollLeftButton = screen.getByTestId('scroll-carousel-left');
+    const scrollRightButton = screen.getByTestId('scroll-carousel-right');
+
+    expect(scrollLeftButton).toBeEnabled();
+    expect(scrollRightButton).toBeDisabled();
+
+    userEvent.click(scrollLeftButton);
+
+    expect(scrollBy).toHaveBeenCalledWith({ left: -300, behavior: 'smooth' });
+  });
+
+  it('allows user to go through carousel by indicator', async () => {
+    mockPositions(948, 903);
+
+    renderCarousel();
+
+    const yourInvoiceIndicator = screen.getByTestId('YOUR_INVOICE-indicator');
+    const yourWebsiteIndicator = screen.getByTestId('YOUR_WEBSITE-indicator');
+    const shopOrStallIndicator = screen.getByTestId('SHOP_OR_STALL-indicator');
+    const firstCard = getFirstCard();
+    const secondCard = getSecondCard();
+    const thirdCard = getThirdCard();
+
+    expect(focusSpy).toHaveBeenCalledTimes(0);
+    expect(firstCard).toHaveClass('carousel__card--focused');
+
+    userEvent.click(yourWebsiteIndicator);
+
+    expect(focusSpy).toHaveBeenCalledTimes(1);
+    expect(secondCard).toHaveClass('carousel__card--focused');
+
+    userEvent.click(shopOrStallIndicator);
+
+    expect(focusSpy).toHaveBeenCalledTimes(2);
+    expect(thirdCard).toHaveClass('carousel__card--focused');
+
+    userEvent.click(yourInvoiceIndicator);
+
+    expect(focusSpy).toHaveBeenCalledTimes(3);
+    expect(firstCard).toHaveClass('carousel__card--focused');
+  });
+
+  it('is focused on the first element and lets user navigate through them', () => {
+    renderCarousel();
+
+    const firstCard = getFirstCard();
+    const secondCard = getSecondCard();
+    const thirdCard = getThirdCard();
+
+    expect(firstCard).toBeInTheDocument();
+
+    firstCard.focus();
+    expect(firstCard).toHaveFocus();
+
+    userEvent.keyboard('{arrowright}');
+
+    expect(secondCard).toHaveFocus();
+
+    userEvent.keyboard('{arrowright}');
+
+    expect(thirdCard).toHaveFocus();
+
+    userEvent.keyboard('{arrowleft}');
+
+    expect(secondCard).toHaveFocus();
+
+    userEvent.keyboard('{arrowleft}');
+
+    expect(firstCard).toHaveFocus();
+  });
+
+  it('calls onClick when a card is clicked', () => {
+    renderCarousel();
+
+    userEvent.click(getFirstCard());
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(yourInvoiceOnClick).toHaveBeenCalledTimes(1);
+  });
+});
+
+const mockPositions = (scrollWidth: number, offsetWidth: number) => {
+  // eslint-disable-next-line functional/immutable-data
+  Object.defineProperty(HTMLElement.prototype, 'scrollWidth', {
+    configurable: true,
+    value: scrollWidth,
+  });
+
+  // eslint-disable-next-line functional/immutable-data
+  Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
+    configurable: true,
+    value: offsetWidth,
+  });
+};
+
+const getFirstCard = () =>
+  screen.getByRole('link', {
+    name: /Add a link in accounting software like Xero or QuickBooks\./,
+  });
+
+const getSecondCard = () => screen.getByRole('button', { name: /Wise\./ });
+
+const getThirdCard = () => screen.getByRole('link', { name: /Get Quick Pay/ });