@transferwise/components 46.30.2 → 46.32.0

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/ });

package/src/carousel/Carousel.story.tsx

@@ -0,0 +1,63 @@
+import type { StoryFn } from '@storybook/react';
+import { Illustration } from '@wise/art';
+import React from 'react';
+
+import Display from '../display';
+
+import Carousel, { type CarouselCard } from './Carousel';
+
+export default {
+  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',
+    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>,
+  },
+];
+
+const Template: StoryFn = (args) => {
+  return <Carousel header="Pretty nifty stuff" cards={carouselCards} {...args} />;
+};
+
+export const CarouselDefault = {
+  render: Template,
+  args: {},
+};

package/src/carousel/Carousel.tsx

@@ -0,0 +1,345 @@
+import { ChevronLeft, ChevronRight } from '@transferwise/icons';
+import classNames from 'classnames';
+import { type CSSProperties, type ReactNode, useEffect, useRef, useState } from 'react';
+
+import ActionButton from '../actionButton';
+import Title from '../title';
+import type { PromoCardLinkProps } from '../promoCard/PromoCard';
+import PromoCard from '../promoCard/PromoCard';
+
+export type CarouselCardCommon = {
+  id: string;
+  href?: string;
+  onClick?: () => void;
+  className?: string;
+  styles?: CSSProperties;
+};
+
+export type CarouselDefaultCard = CarouselCardCommon & {
+  type: 'anchor' | 'button';
+  content: ReactNode;
+};
+
+export type CarouselPromoCard = CarouselCardCommon & {
+  type: 'promo';
+} & Omit<PromoCardLinkProps, 'type'>;
+
+export type CarouselCard = CarouselDefaultCard | CarouselPromoCard;
+export interface CarouselProps {
+  header: string | ReactNode;
+  className?: string;
+  cards: CarouselCard[];
+  onClick?: (cardId: string) => void;
+}
+
+type CardsReference = {
+  type: 'promo' | 'default';
+  cardElement: HTMLDivElement | HTMLAnchorElement;
+  anchorElement?: HTMLAnchorElement;
+};
+
+const LEFT_SCROLL_OFFSET = 8;
+
+const Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }) => {
+  const [scrollPosition, setScrollPosition] = useState(0);
+  const [previousScrollPosition, setPreviousScrollPosition] = useState(0);
+  const [scrollIsAtEnd, setScrollIsAtEnd] = useState(false);
+  const [visibleCardOnMobileView, setVisibleCardOnMobileView] = useState<string>('');
+  const carouselElementRef = useRef<HTMLDivElement>(null);
+  const carouselCardsRef = useRef<CardsReference[]>([]);
+
+  const isLeftActionButtonEnabled = scrollPosition > LEFT_SCROLL_OFFSET;
+
+  const areActionButtonsEnabled = isLeftActionButtonEnabled || !scrollIsAtEnd;
+
+  const [focusedCard, setFocusedCard] = useState(cards?.[0]?.id);
+
+  const updateScrollButtonsState = () => {
+    if (carouselElementRef.current) {
+      const { scrollWidth, offsetWidth } = carouselElementRef.current;
+
+      const scrollAtEnd = scrollWidth - offsetWidth <= scrollPosition + LEFT_SCROLL_OFFSET;
+      setScrollIsAtEnd(scrollAtEnd);
+    }
+
+    const scrollDirecton = scrollPosition > previousScrollPosition ? 'right' : 'left';
+
+    const cardsInFullViewIds: string[] = [];
+    carouselCardsRef.current.forEach((card) => {
+      if (isVisible(carouselElementRef.current as HTMLElement, card.cardElement as HTMLElement)) {
+        // eslint-disable-next-line functional/immutable-data
+        cardsInFullViewIds.push(card.cardElement.getAttribute('id') ?? '');
+      }
+    });
+
+    if (cardsInFullViewIds.length >= 1) {
+      const visibleCardIndex = scrollDirecton === 'right' ? cardsInFullViewIds.length - 1 : 0;
+      const visibleCardId = cardsInFullViewIds[visibleCardIndex];
+      setVisibleCardOnMobileView(visibleCardId);
+      setFocusedCard(visibleCardId);
+    }
+
+    setPreviousScrollPosition(scrollPosition);
+  };
+
+  const scrollCarousel = (direction: 'left' | 'right' = 'right') => {
+    if (carouselElementRef.current) {
+      const { scrollWidth } = carouselElementRef.current;
+
+      const cardWidth = scrollWidth / carouselCardsRef.current.length;
+
+      const res = Math.floor(cardWidth - cardWidth * 0.05);
+
+      carouselElementRef.current.scrollBy({
+        left: direction === 'right' ? res : -res,
+        behavior: 'smooth',
+      });
+    }
+  };
+
+  const handleOnKeyDown = (
+    event: React.KeyboardEvent<HTMLAnchorElement | HTMLDivElement>,
+    index: number,
+  ) => {
+    if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
+      const nextIndex = event.key === 'ArrowRight' ? index + 1 : index - 1;
+      const nextCard = cards[nextIndex];
+      if (nextCard) {
+        const ref = carouselCardsRef.current[nextIndex];
+        if (ref.type === 'promo') {
+          ref.anchorElement?.focus();
+        } else {
+          ref.cardElement?.focus();
+        }
+
+        scrollCardIntoView(carouselCardsRef.current[nextIndex].cardElement, nextCard);
+        event.preventDefault();
+      }
+    }
+
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.currentTarget.click();
+    }
+  };
+
+  const scrollCardIntoView = (element: HTMLElement, card: CarouselCard) => {
+    element.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest',
+      inline: 'center',
+    });
+
+    setFocusedCard(card.id);
+  };
+
+  useEffect(() => {
+    updateScrollButtonsState();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [scrollPosition]);
+
+  useEffect(() => {
+    window.addEventListener('resize', updateScrollButtonsState);
+
+    return () => {
+      window.removeEventListener('resize', updateScrollButtonsState);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const addElementToCardsRefArray = (index: number, ref: Partial<CardsReference>) => {
+    if (ref) {
+      // eslint-disable-next-line functional/immutable-data
+      carouselCardsRef.current[index] = {
+        type: ref.type ?? carouselCardsRef.current?.[index]?.type,
+        cardElement: ref.cardElement ?? carouselCardsRef.current?.[index]?.cardElement,
+        anchorElement: ref.anchorElement ?? carouselCardsRef.current?.[index]?.anchorElement,
+      };
+    }
+  };
+
+  return (
+    <div className={classNames('carousel-wrapper', className)}>
+      <div className="d-flex justify-content-between carousel__header">
+        {typeof header === 'string' ? (
+          <Title as="span" type="title-body">
+            {header}
+          </Title>
+        ) : (
+          header
+        )}
+        {areActionButtonsEnabled ? (
+          <div className="hidden-xs">
+            <ActionButton
+              className="carousel__scroll-button"
+              tabIndex={-1}
+              priority="secondary"
+              disabled={!isLeftActionButtonEnabled}
+              aria-hidden="true"
+              data-testid="scroll-carousel-left"
+              onClick={() => scrollCarousel('left')}
+            >
+              <ChevronLeft />
+            </ActionButton>
+            <ActionButton
+              tabIndex={-1}
+              className="carousel__scroll-button m-l-1"
+              priority="secondary"
+              aria-hidden="true"
+              data-testid="scroll-carousel-right"
+              disabled={scrollIsAtEnd}
+              onClick={() => scrollCarousel()}
+            >
+              <ChevronRight />
+            </ActionButton>
+          </div>
+        ) : null}
+      </div>
+      <div
+        ref={carouselElementRef}
+        tabIndex={-1}
+        role="list"
+        className="carousel"
+        onScroll={(event) => {
+          const target = event.target as HTMLElement;
+          setScrollPosition(target.scrollLeft);
+        }}
+      >
+        {cards?.map((card, index) => {
+          const sharedProps = {
+            id: card.id,
+            className: classNames('carousel__card', {
+              'carousel__card--focused': card.id === focusedCard,
+            }),
+            onClick: () => {
+              card.onClick?.();
+              onClick?.(card.id);
+            },
+            onFocus: (event: React.FocusEvent<HTMLAnchorElement | HTMLDivElement>) => {
+              scrollCardIntoView(event.currentTarget, card);
+            },
+          };
+
+          const cardContent =
+            card.type !== 'promo' ? (
+              <div
+                id={`${card.id}-content`}
+                className={classNames('carousel__card-content', {
+                  [card.className ?? '']: !!card.className,
+                })}
+                // eslint-disable-next-line react/forbid-dom-props
+                style={card.styles}
+              >
+                {card.content}
+              </div>
+            ) : null;
+
+          if (card.type === 'button') {
+            return (
+              <div key={card.id} aria-labelledby={`${card.id}-content`} role="listitem">
+                <div
+                  {...sharedProps}
+                  ref={(el) => {
+                    if (el) {
+                      // eslint-disable-next-line functional/immutable-data
+                      carouselCardsRef.current[index] = {
+                        type: 'default',
+                        cardElement: el,
+                      };
+                    }
+                  }}
+                  role="button"
+                  tabIndex={0}
+                  onKeyDown={(event) => handleOnKeyDown(event, index)}
+                >
+                  {cardContent}
+                </div>
+              </div>
+            );
+          }
+
+          if (card.type === 'promo') {
+            return (
+              <div key={card.id} id={card.id} role="listitem" aria-labelledby={`${card.id}-anchor`}>
+                <PromoCard
+                  {...{ ...card, type: undefined }}
+                  {...{ ...sharedProps }}
+                  ref={(el: HTMLDivElement | null) => {
+                    if (el) {
+                      addElementToCardsRefArray(index, {
+                        type: 'promo',
+                        cardElement: el,
+                      });
+                    }
+                  }}
+                  anchorRef={(el: HTMLAnchorElement) => {
+                    if (el) {
+                      addElementToCardsRefArray(index, {
+                        type: 'promo',
+                        anchorElement: el,
+                      });
+                    }
+                  }}
+                  anchorId={`${card.id}-anchor`}
+                  onKeyDown={(event) => handleOnKeyDown(event, index)}
+                />
+              </div>
+            );
+          }
+
+          return (
+            <div key={card.id} aria-labelledby={`${card.id}-content`} role="listitem">
+              <a
+                {...sharedProps}
+                ref={(el) => {
+                  if (el) {
+                    // eslint-disable-next-line functional/immutable-data
+                    carouselCardsRef.current[index] = {
+                      type: 'default',
+                      cardElement: el,
+                    };
+                  }
+                }}
+                href={card.href}
+                rel="noreferrer"
+                onKeyDown={(event) => handleOnKeyDown(event, index)}
+              >
+                {cardContent}
+              </a>
+            </div>
+          );
+        })}
+      </div>
+      <div className="visible-xs">
+        <div className="carousel__indicators">
+          {cards?.map((card, index) => (
+            <button
+              key={`${card.id}-indicator`}
+              data-testid={`${card.id}-indicator`}
+              tabIndex={-1}
+              aria-hidden
+              type="button"
+              className={classNames('carousel__indicator', {
+                'carousel__indicator--selected': card.id === visibleCardOnMobileView,
+              })}
+              onClick={() => {
+                scrollCardIntoView(carouselCardsRef.current[index].cardElement, card);
+              }}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const isVisible = (container: HTMLElement, el: HTMLElement) => {
+  const cWidth = container.offsetWidth;
+  const cScrollOffset = container.scrollLeft;
+
+  const elemLeft = el.offsetLeft - container.offsetLeft;
+  const elemRight = elemLeft + el.offsetWidth;
+
+  return elemLeft >= cScrollOffset && elemRight <= cScrollOffset + cWidth;
+};
+
+export default Carousel;

package/src/carousel/index.ts

@@ -0,0 +1,3 @@
+export * from './Carousel';
+
+export { default } from './Carousel';