@transferwise/components 0.0.0-experimental-bb7ed4a → 0.0.0-experimental-137c428

package/src/carousel/Carousel.less

@@ -0,0 +1,125 @@
+.carousel {
+  display: flex;
+  align-items: center;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  gap: var(--size-16);
+}
+
+.carousel__header {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  min-height: var(--size-32);
+}
+
+.carousel__card,
+.carousel__card:hover,
+.carousel__card:focus {
+  text-decoration: none;
+}
+
+.carousel__card {
+  position: relative;
+  text-align: left;
+  border: none;
+  overflow: hidden;
+  background: var(--color-background-neutral);
+  border-radius: var(--size-16);
+  scroll-snap-align: center;
+  -webkit-scroll-snap-align: center;
+  transition: all 0.4s;
+}
+
+@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 {
+  outline: 0;
+}
+
+.carousel__card:focus:after {
+  content: '';
+  position: absolute;
+  z-index: 4;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--size-16);
+  box-shadow: inset 0 0 0 2px var(--ring-outline-color);
+}
+
+.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;
+}
+
+.carousel__scroll-button {
+  width: var(--size-32);
+  height: var(--size-32) !important;
+  padding: 0 !important;
+  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.story.tsx

@@ -0,0 +1,62 @@
+import type { StoryFn } from '@storybook/react';
+import { Illustration } from '@wise/art';
+import React from 'react';
+
+import Display from '../display';
+import Title from '../title';
+
+import Carousel, { type CarouselCard } from './Carousel';
+
+export default {
+  component: Carousel,
+  title: 'Navigation/Carousel',
+};
+
+const carouselCards: CarouselCard[] = [
+  {
+    id: 'YOUR_INVOICE',
+    type: 'anchor',
+    href: 'https://wise.com',
+    onClick: () => {},
+    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: 'button',
+    onClick: () => {},
+    styles: {
+      backgroundColor: 'var(--color-interactive-accent)',
+    },
+    content: <Title type="title-screen">Wise.</Title>,
+  },
+  {
+    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.test.tsx

@@ -0,0 +1,221 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+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('listitem', {
+    name: /Add a link in accounting software like Xero or QuickBooks\./,
+  });
+
+const getSecondCard = () => screen.getByRole('listitem', { name: /Wise\./ });
+
+const getThirdCard = () => screen.getByRole('listitem', { name: /Get Quick Pay/ });

package/src/carousel/Carousel.tsx

@@ -0,0 +1,269 @@
+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';
+
+export type CarouselCard = {
+  id: string;
+  type: 'anchor' | 'button';
+  href?: string;
+  onClick?: () => void;
+  className?: string;
+  styles?: CSSProperties;
+  content: ReactNode;
+};
+
+export interface CarouselProps {
+  header: string | ReactNode;
+  className?: string;
+  cards: CarouselCard[];
+  onClick?: (cardId: string) => void;
+}
+
+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 caraouselCardsRef = useRef<(HTMLAnchorElement | HTMLButtonElement)[]>([]);
+
+  const isLeftActionButtonEnabled = scrollPosition > 8;
+
+  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 + 8;
+      setScrollIsAtEnd(scrollAtEnd);
+    }
+
+    const scrollDirecton = scrollPosition > previousScrollPosition ? 'right' : 'left';
+
+    const cardsInFullViewIds: string[] = [];
+    caraouselCardsRef.current.forEach((card) => {
+      if (isVisible(carouselElementRef.current as HTMLElement, card as HTMLElement)) {
+        // eslint-disable-next-line functional/immutable-data
+        cardsInFullViewIds.push(card.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 / caraouselCardsRef.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 | HTMLButtonElement>,
+    index: number,
+  ) => {
+    if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
+      const nextIndex = event.key === 'ArrowRight' ? index + 1 : index - 1;
+      const nextCard = cards[nextIndex];
+      if (nextCard) {
+        caraouselCardsRef.current[nextIndex].focus();
+        scrollCardIntoView(caraouselCardsRef.current[nextIndex], nextCard);
+        event.preventDefault();
+      }
+    }
+  };
+
+  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
+  }, []);
+
+  return (
+    <div className={className}>
+      <div className="d-flex justify-content-between m-b-1 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,
+            }),
+            role: 'listitem',
+            'aria-labelledby': `${card.id}-content`,
+            onClick: () => {
+              card.onClick?.();
+              onClick?.(card.id);
+            },
+            onFocus: (event: React.FocusEvent<HTMLAnchorElement | HTMLButtonElement>) => {
+              scrollCardIntoView(event.currentTarget, card);
+            },
+          };
+
+          const cardContent = (
+            <div
+              id={`${card.id}-content`}
+              className={classNames('carousel__card-content', 'p-a-1', {
+                [card.className ?? '']: !!card.className,
+              })}
+              // eslint-disable-next-line react/forbid-dom-props
+              style={card.styles}
+            >
+              {card.content}
+            </div>
+          );
+
+          if (card.type === 'button') {
+            return (
+              <button
+                {...sharedProps}
+                ref={(el) => {
+                  if (el) {
+                    // eslint-disable-next-line functional/immutable-data
+                    caraouselCardsRef.current[index] = el;
+                  }
+                }}
+                key={card.id}
+                type="button"
+                onKeyDown={(event) => handleOnKeyDown(event, index)}
+              >
+                {cardContent}
+              </button>
+            );
+          }
+
+          return (
+            <a
+              {...sharedProps}
+              ref={(el) => {
+                if (el) {
+                  // eslint-disable-next-line functional/immutable-data
+                  caraouselCardsRef.current[index] = el;
+                }
+              }}
+              key={card.id}
+              target="_blank"
+              rel="noreferrer"
+              href={card.href}
+              onKeyDown={(event) => handleOnKeyDown(event, index)}
+            >
+              {cardContent}
+            </a>
+          );
+        })}
+      </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}
+              type="button"
+              className={classNames('carousel__indicator', {
+                'carousel__indicator--selected': card.id === visibleCardOnMobileView,
+              })}
+              onClick={() => {
+                scrollCardIntoView(caraouselCardsRef.current[index], 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';

package/src/common/dateUtils/index.ts

@@ -5,4 +5,3 @@ export { getMonthNames } from './getMonthNames/getMonthNames';
 export { isDateValid } from './isDateValid/isDateValid';
 export { isMonthAndYearFormat } from './isMonthAndYearFormat/isMonthAndYearFormat';
 export { MDY, YMD } from './getFormatForLocale/getFormatForLocale';
-export { returnDateView } from './getDateView/getDateView';