@times-components/ts-components 1.145.1-76ee0965069e2a17bc1f8dcf02d24e8fefd6869a.0 → 1.145.1-7e7a12feaf05c514789e802bf49cadca92e6a2b9.10

package/src/components/carousel-component/hooks/useCarousel.ts

@@ -0,0 +1,231 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { UseCarouselOptions, UseCarouselReturn } from '../types';
+
+export const useCarousel = (
+  totalItems: number,
+  options: UseCarouselOptions = {}
+): UseCarouselReturn => {
+  const { itemsPerPage = 2, onPageChange } = options;
+
+  const [currentPage, setCurrentPage] = useState(0);
+  const carouselRef = useRef<HTMLDivElement>(null);
+  const isScrollingRef = useRef(false);
+  const isDraggingRef = useRef(false);
+  const startXRef = useRef(0);
+  const touchStartXRef = useRef<number | null>(null);
+  const isSwipingRef = useRef(false);
+
+  const totalPages = Math.ceil(totalItems / itemsPerPage);
+
+  const scrollToPage = useCallback(
+    (page: number) => {
+      if (carouselRef.current) {
+        const cardElements = carouselRef.current.children;
+
+        if (cardElements.length > 0) {
+          isScrollingRef.current = true;
+
+          const container = carouselRef.current;
+          const targetCardIndex = page * itemsPerPage;
+          const targetCard = cardElements[targetCardIndex] as HTMLElement;
+
+          if (targetCard) {
+            const targetScroll = targetCard.offsetLeft;
+
+            container.scrollTo({
+              left: targetScroll,
+              behavior: 'smooth'
+            });
+            setCurrentPage(page);
+
+            if (onPageChange) {
+              onPageChange(page);
+            }
+
+            setTimeout(() => {
+              isScrollingRef.current = false;
+            }, 400);
+          }
+        }
+      }
+    },
+    [itemsPerPage, onPageChange]
+  );
+
+  const handlePrevious = useCallback(
+    () => {
+      const newPage = Math.max(0, currentPage - 1);
+      scrollToPage(newPage);
+    },
+    [currentPage, scrollToPage]
+  );
+
+  const handleNext = useCallback(
+    () => {
+      const newPage = Math.min(totalPages - 1, currentPage + 1);
+      scrollToPage(newPage);
+    },
+    [currentPage, totalPages, scrollToPage]
+  );
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    if (!carouselRef.current) {
+      return;
+    }
+    e.preventDefault();
+    isDraggingRef.current = true;
+    startXRef.current = e.pageX;
+    carouselRef.current.style.cursor = 'grabbing';
+  }, []);
+
+  const handleMouseUp = useCallback(
+    (e: React.MouseEvent) => {
+      if (!isDraggingRef.current) {
+        return;
+      }
+      isDraggingRef.current = false;
+
+      if (carouselRef.current) {
+        carouselRef.current.style.cursor = 'grab';
+
+        const endX = e.pageX;
+        const diff = startXRef.current - endX;
+
+        if (Math.abs(diff) > 30) {
+          if (diff > 0) {
+            handleNext();
+          } else {
+            handlePrevious();
+          }
+        }
+      }
+    },
+    [handleNext, handlePrevious]
+  );
+
+  const handleMouseLeave = useCallback(
+    (e: React.MouseEvent) => {
+      if (!isDraggingRef.current) {
+        return;
+      }
+      isDraggingRef.current = false;
+
+      if (carouselRef.current) {
+        carouselRef.current.style.cursor = 'grab';
+
+        const endX = e.pageX;
+        const diff = startXRef.current - endX;
+
+        if (Math.abs(diff) > 30) {
+          if (diff > 0) {
+            handleNext();
+          } else {
+            handlePrevious();
+          }
+        }
+      }
+    },
+    [handleNext, handlePrevious]
+  );
+
+  const handleTouchStart = (e: React.TouchEvent) => {
+    if (!carouselRef.current) {
+      return;
+    }
+    touchStartXRef.current = e.touches[0].clientX;
+    isSwipingRef.current = false;
+  };
+
+  const handleTouchMove = (e: React.TouchEvent) => {
+    if (touchStartXRef.current === null || isSwipingRef.current) {
+      return;
+    }
+
+    const currentX = e.touches[0].clientX;
+    const diff = touchStartXRef.current - currentX;
+
+    if (Math.abs(diff) > 30) {
+      isSwipingRef.current = true;
+
+      if (diff > 0) {
+        handleNext();
+      } else {
+        handlePrevious();
+      }
+    }
+  };
+
+  const handleTouchEnd = () => {
+    touchStartXRef.current = null;
+    isSwipingRef.current = false;
+  };
+
+  const handleScroll = useCallback(
+    () => {
+      if (isScrollingRef.current) {
+        return;
+      }
+
+      if (carouselRef.current) {
+        const container = carouselRef.current;
+        const children = container.children;
+        if (children.length === 0) {
+          return;
+        }
+
+        const scrollLeft = container.scrollLeft;
+
+        let closestPage = 0;
+        let closestDistance = Infinity;
+
+        for (let page = 0; page < totalPages; page++) {
+          const cardIndex = page * itemsPerPage;
+          if (cardIndex < children.length) {
+            const card = children[cardIndex] as HTMLElement;
+            const distance = Math.abs(card.offsetLeft - scrollLeft);
+            if (distance < closestDistance) {
+              closestDistance = distance;
+              closestPage = page;
+            }
+          }
+        }
+
+        if (closestPage !== currentPage) {
+          setCurrentPage(closestPage);
+          if (onPageChange) {
+            onPageChange(closestPage);
+          }
+        }
+      }
+    },
+    [totalPages, itemsPerPage, onPageChange]
+  );
+
+  useEffect(
+    () => {
+      const carousel = carouselRef.current;
+      if (carousel) {
+        carousel.addEventListener('scroll', handleScroll);
+        return () => carousel.removeEventListener('scroll', handleScroll);
+      }
+      return undefined;
+    },
+    [handleScroll]
+  );
+
+  return {
+    currentPage,
+    totalPages,
+    carouselRef,
+    isScrolling: isScrollingRef.current,
+    handlePrevious,
+    handleNext,
+    scrollToPage,
+    handleMouseDown,
+    handleMouseUp,
+    handleMouseLeave,
+    handleTouchStart,
+    handleTouchMove,
+    handleTouchEnd
+  };
+};

package/src/components/carousel-component/index.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { useCarousel } from './hooks/useCarousel';
+import {
+  CarouselContainer,
+  CarouselWrapper,
+  CarouselContent,
+  CardsRow,
+  PageControl
+} from './styles';
+import { DefaultNavigationArrow } from './DefaultNavigationArrow';
+import { DefaultPageDot } from './DefaultPageDot';
+import { CarouselComponentProps } from './types';
+
+export const CarouselComponent: React.FC<CarouselComponentProps> = ({
+  items,
+  options,
+  showArrows = true,
+  showDots = true,
+  arrowComponent: CustomArrow,
+  dotComponent: CustomDot,
+  className
+}) => {
+  const {
+    currentPage,
+    totalPages,
+    carouselRef,
+    handlePrevious,
+    handleNext,
+    scrollToPage,
+    handleMouseDown,
+    handleMouseUp,
+    handleMouseLeave,
+    handleTouchStart,
+    handleTouchMove,
+    handleTouchEnd
+  } = useCarousel(items.length, options);
+
+  const ArrowComponent = CustomArrow || DefaultNavigationArrow;
+  const DotComponent = CustomDot || DefaultPageDot;
+
+  return (
+    <CarouselContainer className={className}>
+      <CarouselWrapper>
+        {showArrows && (
+          <ArrowComponent
+            direction="left"
+            onClick={handlePrevious}
+            disabled={currentPage === 0}
+          />
+        )}
+
+        <CarouselContent>
+          <CardsRow
+            ref={carouselRef}
+            onMouseDown={handleMouseDown}
+            onMouseUp={handleMouseUp}
+            onMouseLeave={handleMouseLeave}
+            onTouchStart={handleTouchStart}
+            onTouchMove={handleTouchMove}
+            onTouchEnd={handleTouchEnd}
+          >
+            {items}
+          </CardsRow>
+        </CarouselContent>
+
+        {showArrows && (
+          <ArrowComponent
+            direction="right"
+            onClick={handleNext}
+            disabled={currentPage >= totalPages - 1}
+          />
+        )}
+      </CarouselWrapper>
+
+      {showDots &&
+        totalPages > 1 && (
+          <PageControl>
+            {Array.from({ length: totalPages }).map((_, pageIndex) => (
+              <DotComponent
+                key={pageIndex}
+                active={pageIndex === currentPage}
+                onClick={() => scrollToPage(pageIndex)}
+                index={pageIndex}
+              />
+            ))}
+          </PageControl>
+        )}
+    </CarouselContainer>
+  );
+};
+
+export { CarouselItem } from './CarouselItem';

package/src/components/carousel-component/styles.ts

@@ -0,0 +1,185 @@
+import styled, { css } from 'styled-components';
+import { ResponsiveConfig } from './types';
+export const breakpoints = {
+  sm: '390px',
+  md: '768px',
+  lg: '1024px',
+  xl: '1320px'
+};
+
+export const colors = {
+  primary: '#005C8A',
+  white: '#FFFFFF'
+};
+
+export const ItemContainer = styled.div<{
+  widthItemConfig?: ResponsiveConfig;
+  maxWidthItemConfig?: ResponsiveConfig;
+}>`
+  scroll-snap-align: start;
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+
+  ${props => {
+    if (!props.widthItemConfig) {
+      return '';
+    }
+    const { mobile, tablet, desktop, xl } = props.widthItemConfig;
+    return css`
+      ${mobile &&
+        `
+        @media (min-width: ${breakpoints.sm}) {
+          flex: 0 0 ${mobile};
+        }
+      `}
+      ${tablet &&
+        `
+        @media (min-width: ${breakpoints.md}) {
+          flex: 0 0 ${tablet};
+        }
+      `}
+      ${desktop &&
+        `
+        @media (min-width: ${breakpoints.lg}) {
+          flex: 0 0 ${desktop};
+        }
+      `}
+      ${xl &&
+        `
+        @media (min-width: ${breakpoints.xl}) {
+          flex: 0 0 ${xl};
+        }
+      `}
+    `;
+  }} ${props => {
+    if (!props.maxWidthItemConfig) {
+      return '';
+    }
+    const { mobile, tablet, desktop, xl } = props.maxWidthItemConfig;
+    return css`
+      ${mobile &&
+        `
+        @media (min-width: ${breakpoints.sm}) {
+          max-width: ${mobile};
+        }
+      `}
+      ${tablet &&
+        `
+        @media (min-width: ${breakpoints.md}) {
+          max-width: ${tablet};
+        }
+      `}
+      ${desktop &&
+        `
+        @media (min-width: ${breakpoints.lg}) {
+          max-width: ${desktop};
+        }
+      `}
+      ${xl &&
+        `
+        @media (min-width: ${breakpoints.xl}) {
+          max-width: ${xl};
+        }
+      `}
+    `;
+  }};
+`;
+
+export const CarouselContainer = styled.div`
+  width: 100%;
+`;
+
+export const CarouselWrapper = styled.div`
+  position: relative;
+  width: 100%;
+`;
+
+export const CarouselContent = styled.div`
+  overflow: hidden;
+`;
+
+export const CardsRow = styled.div`
+  display: flex;
+  gap: 20px;
+  overflow-x: hidden;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  padding: 0;
+  scroll-behavior: smooth;
+  cursor: grab;
+  user-select: none;
+  align-items: stretch;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &:active {
+    cursor: grabbing;
+  }
+`;
+
+export const PageControl = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  padding: 12px;
+  background: ${colors.white};
+`;
+
+export const NavigationArrowButton = styled.button<{
+  direction: 'left' | 'right';
+  disabled?: boolean;
+}>`
+  display: none;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  ${({ direction }) =>
+    direction === 'left' ? 'left: -68px;' : 'right: -68px;'} z-index: 10;
+  width: 48px;
+  height: 48px;
+  border: none;
+  border-radius: 50%;
+  background: ${({ disabled }) => (disabled ? '#CCCCCC' : colors.primary)};
+  cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
+  align-items: center;
+  justify-content: center;
+  transition: background 0.2s ease;
+  pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
+
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+
+  svg path {
+    stroke: ${colors.white};
+  }
+
+  &:hover:not(:disabled) {
+    background: #004a6e;
+  }
+
+  @media (min-width: ${breakpoints.lg}) {
+    display: flex;
+  }
+`;
+
+export const PageDotButton = styled.button<{ active: boolean }>`
+  width: 8px;
+  height: 8px;
+  border-radius: 1000px;
+  border: none;
+  padding: 0;
+  background: ${({ active }) => (active ? '#01000D' : '#AAAAAA')};
+  cursor: pointer;
+  transition: background 0.2s ease;
+
+  &:hover {
+    background: #01000d;
+  }
+`;

package/src/components/carousel-component/types.ts

@@ -0,0 +1,62 @@
+import { ReactNode } from 'react';
+
+export interface ResponsiveConfig {
+  xs?: string;
+  mobile?: string;
+  tablet?: string;
+  desktop?: string;
+  xl?: string;
+}
+
+export type ResponsiveConfigNoXs = Omit<ResponsiveConfig, 'xs'>;
+
+export interface ArrowComponentProps {
+  direction: 'left' | 'right';
+  onClick: () => void;
+  disabled: boolean;
+}
+
+export interface DotComponentProps {
+  active: boolean;
+  onClick: () => void;
+  index: number;
+}
+
+export interface CarouselComponentProps {
+  items: ReactNode[];
+  options?: UseCarouselOptions;
+  showArrows?: boolean;
+  showDots?: boolean;
+  arrowComponent?: React.ComponentType<ArrowComponentProps>;
+  dotComponent?: React.ComponentType<DotComponentProps>;
+  className?: string;
+}
+
+export interface CarouselItemProps {
+  children: ReactNode;
+  widthItemConfig?: ResponsiveConfig;
+  maxWidthItemConfig?: ResponsiveConfigNoXs;
+  className?: string;
+}
+
+// Carousel Hook Types
+export interface UseCarouselOptions {
+  itemsPerPage?: number;
+  onPageChange?: (page: number) => void;
+}
+
+export interface UseCarouselReturn {
+  currentPage: number;
+  totalPages: number;
+  carouselRef: React.RefObject<HTMLDivElement>;
+  isScrolling: boolean;
+  handlePrevious: () => void;
+  handleNext: () => void;
+  scrollToPage: (page: number) => void;
+  handleMouseDown: (e: React.MouseEvent) => void;
+  handleMouseUp: (e: React.MouseEvent) => void;
+  handleMouseLeave: (e: React.MouseEvent<Element, MouseEvent>) => void;
+  handleTouchStart: (e: React.TouchEvent) => void;
+  handleTouchMove: (e: React.TouchEvent) => void;
+  handleTouchEnd: () => void;
+}

package/src/components/opta/football/opta-match-stats/commentary/__tests__/__snapshots__/OptaMatchStatsCommentary.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`OptaMatchStatsCommentary renders and initialises widget 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bxivhb eKHCQT"
+    class="sc-bxivhb hlADP"
   >
     <h3>
       Commentary

package/src/components/opta/football/opta-match-stats/shared/styles.ts

@@ -54,13 +54,5 @@ export const WidgetWrapper = styled.div<{
         @media (max-width: ${maxMDBreakpoint}px) {
           display: none;
         }
-
-        ${props =>
-          props.isApp &&
-          `
-          @media(prefers-color-scheme: dark) {
-            color: ${darkTextColor} !important;
-          }
-        `}
       }
     `;

package/src/components/opta/football/opta-match-stats/stats-graphs/__tests__/__snapshots__/OptaMatchStatsGraphs.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`OptaMatchStatsSummary should render correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bxivhb dwwqvg"
+    class="sc-bxivhb JyPwY"
   >
     <h3>
       Match Stats

package/src/components/trip-cards/SkeletonCard.tsx

@@ -0,0 +1,62 @@
+import React, { FC } from 'react';
+import { Placeholder } from '@times-components/image';
+import {
+  CardContainer,
+  ImageContainer,
+  CardContent,
+  TopContainer,
+  BottomContainer,
+  DataPointsList,
+  DataPoint,
+  PriceSection,
+  PriceContainer
+} from './styles';
+import {
+  SkeletonLine,
+  SkeletonHeadline,
+  SkeletonPrice,
+  SkeletonButton
+} from './skeletonStyles';
+import { ImageHeightConfig } from './types';
+
+export const SkeletonCard: FC<{
+  isStaticGrid?: boolean;
+  imgHeight?: Omit<ImageHeightConfig, '$heightXs'>;
+}> = ({ isStaticGrid, imgHeight = {} }) => {
+  return (
+    <CardContainer data-testid="skeleton-card-container">
+      <ImageContainer
+        data-testid="skeleton-image-container"
+        isStaticGrid={isStaticGrid}
+        {...imgHeight}
+      >
+        <Placeholder />
+      </ImageContainer>
+      <CardContent data-testid="skeleton-card-content">
+        <TopContainer data-testid="skeleton-top-container">
+          <SkeletonHeadline data-testid="skeleton-headline" />
+          <DataPointsList data-testid="skeleton-data-points-list">
+            {[1, 2, 3, 4].map(i => (
+              <DataPoint key={i} data-testid={`skeleton-data-point-${i}`}>
+                <SkeletonLine width="80px" data-testid={`skeleton-line-${i}`} />
+              </DataPoint>
+            ))}
+          </DataPointsList>
+        </TopContainer>
+        <BottomContainer data-testid="skeleton-bottom-container">
+          <PriceSection data-testid="skeleton-price-section">
+            <PriceContainer data-testid="skeleton-price-container">
+              <SkeletonLine
+                width="40px"
+                marginBottom="4px"
+                data-testid="skeleton-price-label"
+              />
+              <SkeletonPrice data-testid="skeleton-price" />
+            </PriceContainer>
+          </PriceSection>
+          <SkeletonButton as="div" data-testid="skeleton-button" />
+        </BottomContainer>
+      </CardContent>
+    </CardContainer>
+  );
+};