@transferwise/components 46.31.0 → 46.32.0

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

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: {},
+};