@transferwise/components 46.31.0 → 46.32.0

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/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/main.css

@@ -643,6 +643,141 @@ div.critical-comms .critical-comms-body {
   border-radius: 16px 16px 0 0;
   border-radius: var(--radius-medium) var(--radius-medium) 0 0;
 }
+.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);
+}
 .np-checkbox-button input[type="checkbox"] {
   position: absolute;
   width: 24px;

package/src/main.less

@@ -5,6 +5,7 @@
 @import "./badge/Badge.less";
 @import "./button/Button.less";
 @import "./card/Card.less";
+@import "./carousel/Carousel.less";
 @import "./checkboxButton/CheckboxButton.less";
 @import "./chips/Chip.less";
 @import "./circularButton/CircularButton.less";

package/src/promoCard/PromoCard.story.tsx

@@ -1,7 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { StarFill } from '@transferwise/icons';
 
-import PromoCard, { PromoCardCheckedProps, PromoCardLinkProps } from './PromoCard';
+import PromoCard, { type PromoCardCheckedProps, type PromoCardLinkProps } from './PromoCard';
 
 const meta: Meta<typeof PromoCard> = {
   component: PromoCard,