@transferwise/components 46.31.0 → 46.33.0

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';

package/src/common/card/Card.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { MouseEvent, ReactNode, useRef } from 'react';
+import { MouseEvent, type ReactNode, forwardRef, useRef } from 'react';
 
 import { CloseButton } from '../closeButton';
 import { stopPropagation } from '../domHelpers';
@@ -48,48 +48,56 @@ export interface CardProps {
  *   <p>Hello World!</p>
  * </Card>
  */
-const Card: React.FC<CardProps> = ({
-  className,
-  children = null,
-  id,
-  isDisabled = false,
-  isSmall = false,
-  onDismiss,
-  testId,
-  ...props
-}) => {
-  const closeButtonReference = useRef(null);
+const Card = forwardRef<HTMLDivElement, CardProps>(
+  (
+    {
+      className,
+      children = null,
+      id,
+      isDisabled = false,
+      isSmall = false,
+      onDismiss,
+      testId,
+      ...props
+    },
+    ref,
+  ) => {
+    const closeButtonReference = useRef(null);
 
-  return (
-    <div
-      className={classNames(
-        'np-Card',
-        {
-          'np-Card--small': !!isSmall,
-          'is-disabled': !!isDisabled,
-        },
-        className,
-      )}
-      id={id}
-      data-testid={testId}
-      {...props}
-    >
-      {onDismiss && (
-        <CloseButton
-          ref={closeButtonReference}
-          className="np-Card-closeButton"
-          size={isSmall ? 'sm' : 'md'}
-          isDisabled={isDisabled}
-          testId="close-button"
-          onClick={(e) => {
-            stopPropagation(e);
-            onDismiss();
-          }}
-        />
-      )}
-      {children}
-    </div>
-  );
-};
+    return (
+      <div
+        ref={ref}
+        className={classNames(
+          'np-Card',
+          {
+            'np-Card--small': !!isSmall,
+            'is-disabled': !!isDisabled,
+          },
+          className,
+        )}
+        id={id}
+        data-testid={testId}
+        {...props}
+      >
+        {onDismiss && (
+          <CloseButton
+            ref={closeButtonReference}
+            className="np-Card-closeButton"
+            size={isSmall ? 'sm' : 'md'}
+            isDisabled={isDisabled}
+            testId="close-button"
+            onClick={(e) => {
+              stopPropagation(e);
+              onDismiss();
+            }}
+          />
+        )}
+        {children}
+      </div>
+    );
+  },
+);
+
+Card.displayName = 'Card';
 
 export default Card;

package/src/common/domHelpers/documentIosClick.ts

@@ -35,8 +35,3 @@ export function stopPropagation(event: SyntheticEvent) {
     event.nativeEvent.stopImmediatePropagation();
   }
 }
-
-export function getSimpleRandomId(prefix: string): string {
-  const random = Math.ceil(Math.random() * 999999);
-  return `${prefix}${random}`;
-}

package/src/common/domHelpers/index.ts

@@ -1,6 +1,5 @@
 export {
   addClickClassToDocumentOnIos,
-  getSimpleRandomId,
   isBrowser,
   isServerSide,
   removeClickClassFromDocumentOnIos,

package/src/dateLookup/DateLookup.rtl.spec.tsx

@@ -14,8 +14,7 @@ describe('DateLookup', () => {
         <DateLookup value={now} onChange={() => {}} />
       </Field>,
     );
-    expect(screen.getByLabelText('Date of birth')).toHaveTextContent(
-      now.getUTCFullYear().toString(),
-    );
+    // TODO: Replace with `.toHaveAttribute('aria-haspopup')`
+    expect(screen.getByLabelText('Date of birth')).toHaveTextContent(now.getFullYear().toString());
   });
 });

package/src/dateLookup/DateLookup.tsx

@@ -354,7 +354,5 @@ export const DateLookupWithoutInputAttributes = DateLookup;
 
 export default withInputAttributes(
   DateLookup as React.ComponentType<DateLookupPropsWithInputAttributes>,
-  {
-    nonLabelable: true,
-  },
+  { nonLabelable: true },
 );

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,
@@ -84,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';

package/src/inputs/SelectInput.spec.tsx

@@ -235,6 +235,6 @@ describe('SelectInput', () => {
         <SelectInput items={[{ type: 'option', value: 'USD' }]} value="USD" />
       </Field>,
     );
-    expect(screen.getByLabelText('Currency')).toHaveTextContent('USD');
+    expect(screen.getByLabelText('Currency')).toHaveAttribute('aria-haspopup');
   });
 });