@times-components/ts-components 1.145.1-82bc6796129e892c1eb22c6257c5e3809c159767.3 → 1.145.1-cfea81c4084e6f91221ea00fec9fc730d5b933cb.4

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

@@ -0,0 +1,187 @@
+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 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;
+            }, 800);
+          }
+        }
+      }
+    },
+    [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 handleMouseMove = useCallback((e: React.MouseEvent) => {
+    if (!isDraggingRef.current) {
+      return;
+    }
+    e.preventDefault();
+  }, []);
+
+  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(() => {
+    if (!isDraggingRef.current) {
+      return;
+    }
+    isDraggingRef.current = false;
+    if (carouselRef.current) {
+      carouselRef.current.style.cursor = 'grab';
+    }
+  }, []);
+
+  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);
+          }
+        }
+      }
+    },
+    [currentPage, 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,
+    handleMouseMove,
+    handleMouseUp,
+    handleMouseLeave
+  };
+};

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

@@ -0,0 +1,88 @@
+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,
+    handleMouseMove,
+    handleMouseUp,
+    handleMouseLeave
+  } = 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}
+            onMouseMove={handleMouseMove}
+            onMouseUp={handleMouseUp}
+            onMouseLeave={handleMouseLeave}
+          >
+            {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,140 @@
+import styled from 'styled-components';
+
+export const breakpoints = {
+  sm: '390px',
+  md: '768px',
+  lg: '1024px',
+  xl: '1320px'
+};
+
+export const colors = {
+  primary: '#005C8A',
+  white: '#FFFFFF'
+};
+
+export const ItemContainer = styled.div<{
+  widthConfig: {
+    mobile?: string;
+    tablet?: string;
+    desktop?: string;
+    xl?: string;
+  };
+}>`
+  flex: 0 0 ${({ widthConfig }) => widthConfig.mobile};
+  scroll-snap-align: start;
+  border-radius: 8px;
+  transition: filter 0.3s ease;
+
+  @media (min-width: ${breakpoints.md}) {
+    flex: 0 0 ${({ widthConfig }) => widthConfig.tablet};
+  }
+
+  @media (min-width: ${breakpoints.lg}) {
+    flex: 0 0 ${({ widthConfig }) => widthConfig.desktop};
+  }
+
+  @media (min-width: ${breakpoints.xl}) {
+    flex: 0 0 ${({ widthConfig }) => widthConfig.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: auto;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  padding: 0;
+  scroll-behavior: smooth;
+  cursor: grab;
+  user-select: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &:active {
+    cursor: grabbing;
+  }
+
+  @media (max-width: ${breakpoints.md}) {
+    padding-left: 10px;
+  }
+`;
+
+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: -60px;' : 'right: -60px;'} 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,51 @@
+import { ReactNode } from 'react';
+
+export interface CarouselComponentProps {
+  items: ReactNode[];
+  options?: UseCarouselOptions;
+  showArrows?: boolean;
+  showDots?: boolean;
+  arrowComponent?: React.ComponentType<{
+    direction: 'left' | 'right';
+    onClick: () => void;
+    disabled: boolean;
+  }>;
+  dotComponent?: React.ComponentType<{
+    active: boolean;
+    onClick: () => void;
+    index: number;
+  }>;
+  className?: string;
+}
+
+export interface CarouselItemProps {
+  children: ReactNode;
+  widthConfig?: {
+    xs?: string;
+    mobile?: string;
+    tablet?: string;
+    desktop?: string;
+    xl?: string;
+  };
+  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;
+  handleMouseMove: (e: React.MouseEvent) => void;
+  handleMouseUp: (e: React.MouseEvent) => void;
+  handleMouseLeave: () => 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/opta/football/opta-match-stats/summary/OptaMatchStatsSummary.stories.tsx

@@ -26,7 +26,7 @@ const showcase = {
           <OptaMatchStatsSummary
             season="2025"
             competition="8"
-            match="2562044"
+            match="2561901"
             isApp
           />
         </>

package/src/components/opta/football/opta-match-stats/summary/OptaMatchStatsSummary.tsx

@@ -72,7 +72,7 @@ export const OptaMatchStatsSummary: React.FC<{
               show_competition_name: true,
               competition_naming: 'full',
               team_naming: 'full',
-              player_naming: 'last_name',
+              player_naming: 'initial',
               show_live: false,
               show_logo: false,
               show_title: false

package/src/components/opta/football/opta-match-stats/summary/WidgetContainer.tsx

@@ -316,23 +316,14 @@ export const WidgetContainer = styled.div<{
           display: flex;
           text-align: right;
         }
-
-        &.Opta-Home {
-          .Opta-Event-Player {
-            text-align: left;
-          }
-        }
-
-        &.Opta-Away {
-          .Opta-Event-Player {
-            text-align: right;
-          }
-        }
       }
 
       .Opta-Event-Text {
         display: flex;
         align-items: center;
+        .Opta-Event-Player {
+          text-align: left;
+        }
 
         &.Opta-Home {
           li {

package/src/components/opta/football/opta-match-stats/summary/__tests__/__snapshots__/OptaMatchStatsSummary.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`OptaMatchStatsSummary should render correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-ifAKCX hkuAFt"
+    class="sc-ifAKCX eIVfcL"
   />
   <div
     class="sc-bwzfXH eSqyJ"

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

@@ -0,0 +1,54 @@
+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';
+
+export const SkeletonCard: FC = () => {
+  return (
+    <CardContainer data-testid="skeleton-card-container">
+      <ImageContainer data-testid="skeleton-image-container">
+        <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>
+  );
+};