@times-components/ts-components 1.146.2-be27d508c972211ad80599875cd69c63bf67d4b1.45 → 1.146.2-c9973aa4b92ab539c7e626ec928a64701390290d.3

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

@@ -1,140 +0,0 @@
-import React, { FC, useState } from 'react';
-import { Placeholder } from '@times-components/image';
-import { TripCardProps } from './types';
-import {
-  CardContainer,
-  ImageContainer,
-  CardImage,
-  OfferLabel,
-  GiftBanner,
-  CardContent,
-  TopContainer,
-  BottomContainer,
-  Headline,
-  DataPointsList,
-  DataPoint,
-  DataIcon,
-  PriceSection,
-  PriceContainer,
-  OfferContainer,
-  PriceLabel,
-  OriginalPrice,
-  CurrentPrice,
-  LogoContainer,
-  CTAButton,
-  PriceSuffix,
-  StyledLink
-} from './styles';
-import { MoonIcon, LocationIcon, BoatIcon, CalendarIcon } from './assets';
-
-export const TripCard: FC<TripCardProps> = ({
-  card,
-  isStaticGrid,
-  imgHeight = {}
-}) => {
-  const [imageLoaded, setImageLoaded] = useState(false);
-
-  return (
-    <CardContainer>
-      <StyledLink href={card.cta_url} target="_blank" rel="noopener noreferrer">
-        <ImageContainer isStaticGrid={isStaticGrid} {...imgHeight}>
-          {!imageLoaded && <Placeholder />}
-          <CardImage
-            src={card.image}
-            alt={card.headline}
-            onLoad={() => setImageLoaded(true)}
-            isLoaded={imageLoaded}
-          />
-          {card.offer_label && <OfferLabel>{card.offer_label}</OfferLabel>}
-          {card.gift_banner && <GiftBanner>{card.gift_banner}</GiftBanner>}
-        </ImageContainer>
-      </StyledLink>
-
-      <CardContent>
-        <TopContainer>
-          <StyledLink
-            href={card.cta_url}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Headline>{card.headline}</Headline>
-          </StyledLink>
-
-          <DataPointsList>
-            {card.date && (
-              <DataPoint>
-                <DataIcon>
-                  <CalendarIcon />
-                </DataIcon>
-                <span>{card.date}</span>
-              </DataPoint>
-            )}
-            {card.duration && (
-              <DataPoint>
-                <DataIcon>
-                  <MoonIcon />
-                </DataIcon>
-                <span>{card.duration}</span>
-              </DataPoint>
-            )}
-            {card.route && (
-              <DataPoint>
-                <DataIcon>
-                  <LocationIcon />
-                </DataIcon>
-                <span>{card.route}</span>
-              </DataPoint>
-            )}
-            {card.ship && (
-              <DataPoint>
-                <DataIcon>
-                  <BoatIcon />
-                </DataIcon>
-                <span>{card.ship}</span>
-              </DataPoint>
-            )}
-          </DataPointsList>
-        </TopContainer>
-
-        <BottomContainer>
-          <PriceSection>
-            <PriceContainer>
-              {card.price !== 'Enquire now' && (
-                <OfferContainer>
-                  {<PriceLabel>From</PriceLabel>}
-                  {card.original_price && (
-                    <OriginalPrice>{card.original_price}</OriginalPrice>
-                  )}
-                </OfferContainer>
-              )}
-              <CurrentPrice $isEnquire={card.price === 'Enquire now'}>
-                {card.price}
-                {card.price !== 'Enquire now' && <PriceSuffix>pp</PriceSuffix>}
-              </CurrentPrice>
-            </PriceContainer>
-
-            {card.logo && (
-              <LogoContainer>
-                <a
-                  href={card.logo_url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <img src={card.logo} alt="Partner logo" />
-                </a>
-              </LogoContainer>
-            )}
-          </PriceSection>
-
-          <CTAButton
-            href={card.cta_url}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            {card.cta_text || 'View Itinerary'}
-          </CTAButton>
-        </BottomContainer>
-      </CardContent>
-    </CardContainer>
-  );
-};

package/src/components/trip-cards/TripCards.stories.tsx

@@ -1,224 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { TripCards } from './index';
-import styled from 'styled-components';
-import { defaultTripCardImgHeight } from './helpers';
-
-const spacing = (multiplier: number) => `${multiplier * 8}px`;
-
-const breakpoints = {
-  medium: 768,
-  wide: 1024
-};
-
-const InteractiveContainer = styled.div`
-  position: relative;
-  margin-bottom: ${spacing(4)};
-  padding: 0 ${spacing(2)};
-
-  @media (min-width: ${breakpoints.medium}px) {
-    width: 80.8%;
-    margin-left: auto;
-    margin-right: auto;
-    padding: 0;
-  }
-
-  @media (min-width: ${breakpoints.wide}px) {
-    width: 56.2%;
-  }
-`;
-
-storiesOf('Typescript Component/TripCards', module)
-  .add('Channel View Two Cards', () => (
-    <TripCards
-      element={{
-        class: 'trip-cards',
-        tripcards: btoa(JSON.stringify([2074350, 2140335])),
-        title: 'Similar cruises',
-        titleurl: 'https://www.thetimes.com/travel/holidays',
-        description: 'Brought to you by Times Holidays'
-      }}
-      useMockData={true}
-      maxWidthItemConfig={{
-        xs: '85%',
-        mobile: '87%',
-        tablet: '44%',
-        desktop: '314px',
-        xl: '368px'
-      }}
-      widthContainerConfig={{
-        tablet: '728px',
-        desktop: '984px',
-        xl: '1144px'
-      }}
-    />
-  ))
-  .add('Channel View Three Cards', () => (
-    <TripCards
-      element={{
-        class: 'trip-cards',
-        tripcards: btoa(JSON.stringify([2074350, 2140335, 2177685])),
-        title: 'Featured Voyages',
-        titleurl: 'https://www.thetimes.com/travel/holidays',
-        description: 'Handpicked by our travel experts'
-      }}
-      forceStaticGrid={true}
-      maxWidthItemConfig={{
-        xs: '85%',
-        mobile: '87%',
-        tablet: '44%',
-        desktop: '314px',
-        xl: '368px'
-      }}
-      widthContainerConfig={{
-        tablet: '728px',
-        desktop: '984px',
-        xl: '1144px'
-      }}
-      useMockData={true}
-    />
-  ))
-  .add('Article View Two Trip Cards', () => (
-    <InteractiveContainer>
-      <TripCards
-        element={{
-          class: 'trip-cards',
-          tripcards: btoa(JSON.stringify([2074350, 2140335])),
-          title: 'Similar cruises',
-          titleurl: 'https://www.thetimes.com/travel/holidays',
-          description: 'Brought to you by Times Holidays'
-        }}
-        useMockData={true}
-        maxWidthItemConfig={{
-          mobile: '320px',
-          tablet: '260px',
-          desktop: '260px',
-          xl: '300px'
-        }}
-        widthContainerConfig={{
-          mobile: '390px',
-          tablet: '620px',
-          desktop: '574px',
-          xl: '663px'
-        }}
-        imgHeight={defaultTripCardImgHeight}
-      />
-    </InteractiveContainer>
-  ))
-  .add('Article View Three Cards', () => (
-    <InteractiveContainer>
-      <TripCards
-        element={{
-          class: 'trip-cards',
-          tripcards: btoa(JSON.stringify([2074350, 2140335, 2177685])),
-          title: 'Similar cruises',
-          titleurl: 'https://www.thetimes.com/travel/holidays',
-          description: 'Brought to you by Times Holidays'
-        }}
-        useMockData={true}
-        maxWidthItemConfig={{
-          mobile: '320px',
-          tablet: '260px',
-          desktop: '260px',
-          xl: '300px'
-        }}
-        widthContainerConfig={{
-          mobile: '390px',
-          tablet: '620px',
-          desktop: '574px',
-          xl: '663px'
-        }}
-        imgHeight={{ ...defaultTripCardImgHeight, $heightXs: '100%' }}
-      />
-    </InteractiveContainer>
-  ))
-  .add('Article View Two Trip Cards', () => (
-    <InteractiveContainer>
-      <TripCards
-        element={{
-          class: 'trip-cards',
-          tripcards: btoa(JSON.stringify([2074350, 2140335])),
-          title: 'Similar cruises',
-          titleurl: 'https://www.thetimes.com/travel/holidays',
-          description: 'Brought to you by Times Holidays'
-        }}
-        useMockData={true}
-        maxWidthItemConfig={{
-          mobile: '320px',
-          tablet: '260px',
-          desktop: '260px',
-          xl: '300px'
-        }}
-        widthContainerConfig={{
-          mobile: '390px',
-          tablet: '620px',
-          desktop: '574px',
-          xl: '663px'
-        }}
-        imgHeight={defaultTripCardImgHeight}
-      />
-    </InteractiveContainer>
-  ))
-  .add('Article View Trip Cards', () => (
-    <InteractiveContainer>
-      <TripCards
-        element={{
-          class: 'trip-cards',
-          tripcards: btoa(JSON.stringify([2074350, 2140335, 2177685])),
-          title: 'Similar cruises',
-          titleurl: 'https://www.thetimes.com/travel/holidays',
-          description: 'Brought to you by Times Holidays'
-        }}
-        useMockData={true}
-        maxWidthItemConfig={{
-          mobile: '320px',
-          tablet: '260px',
-          desktop: '260px',
-          xl: '300px'
-        }}
-        widthContainerConfig={{
-          mobile: '390px',
-          tablet: '620px',
-          desktop: '574px',
-          xl: '663px'
-        }}
-        imgHeight={defaultTripCardImgHeight}
-      />
-    </InteractiveContainer>
-  ))
-  .add('Article View Six Cards', () => (
-    <InteractiveContainer>
-      <TripCards
-        element={{
-          class: 'trip-cards',
-          tripcards: btoa(
-            JSON.stringify([
-              2074350,
-              2140335,
-              2177685,
-              2074351,
-              2140336,
-              2177686
-            ])
-          ),
-          title: 'Similar cruises',
-          titleurl: 'https://www.thetimes.com/travel/holidays',
-          description: 'Brought to you by Times Holidays'
-        }}
-        useMockData={true}
-        maxWidthItemConfig={{
-          mobile: '320px',
-          tablet: '260px',
-          desktop: '260px',
-          xl: '300px'
-        }}
-        widthContainerConfig={{
-          mobile: '390px',
-          tablet: '620px',
-          desktop: '574px',
-          xl: '663px'
-        }}
-        imgHeight={defaultTripCardImgHeight}
-      />
-    </InteractiveContainer>
-  ));

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

@@ -1,145 +0,0 @@
-import React, { FC, useRef, useState, useEffect } from 'react';
-import { CarouselComponent, CarouselItem } from '../carousel-component';
-import { TripCardsLayoutProps } from './types';
-import {
-  Container,
-  TitleSection,
-  TitleBar,
-  TitleContent,
-  Title,
-  Subtitle,
-  TitleLink,
-  StaticCardsGrid,
-  StyledLink
-} from './styles';
-import { ChevronRightIcon } from './assets';
-
-export const TripCardsLayout: FC<TripCardsLayoutProps> = ({
-  element,
-  items,
-  CardComponent,
-  itemsPerPage,
-  widthContainerConfig = {},
-  widthItemConfig,
-  maxWidthItemConfig,
-  imgHeight,
-  forceStaticGrid
-}) => {
-  const { titleurl, title, description } = element;
-  const gridRef = useRef<HTMLDivElement>(null);
-  const [hasOverflow, setHasOverflow] = useState(false);
-  const [isTabletMobile, setIsTabletMobile] = useState(false);
-
-  const isStaticGrid = items.length === 2 || forceStaticGrid;
-
-  // Handle responsive breakpoint detection
-  useEffect(() => {
-    const mediaQuery = window.matchMedia('(max-width: 1024px)');
-    const handleMediaChange = (e: MediaQueryListEvent | MediaQueryList) => {
-      setIsTabletMobile(e.matches);
-    };
-    handleMediaChange(mediaQuery);
-    mediaQuery.addEventListener('change', handleMediaChange);
-
-    return () => {
-      mediaQuery.removeEventListener('change', handleMediaChange);
-    };
-  }, []);
-
-  useEffect(
-    () => {
-      if (!isStaticGrid || !gridRef.current) {
-        setHasOverflow(false);
-        return;
-      }
-
-      const checkOverflow = () => {
-        if (gridRef.current) {
-          const isOverflowing =
-            gridRef.current.scrollWidth > gridRef.current.clientWidth;
-          setHasOverflow(isOverflowing);
-        }
-      };
-
-      checkOverflow();
-      const resizeObserver = new ResizeObserver(checkOverflow);
-      resizeObserver.observe(gridRef.current);
-
-      return () => {
-        resizeObserver.disconnect();
-      };
-    },
-    [isStaticGrid, items.length]
-  );
-
-  const shouldUseCarousel =
-    (isTabletMobile && items.length >= 3) || !isStaticGrid || hasOverflow;
-
-  return (
-    <Container data-testid="trip-cards-container" {...widthContainerConfig}>
-      <TitleSection data-testid="title-section">
-        <TitleBar
-          data-testid="title-bar"
-          applyRightPadding={!!widthContainerConfig.mobile}
-        >
-          <TitleContent data-testid="title-content">
-            {titleurl ? (
-              <StyledLink
-                href={titleurl}
-                target="_blank"
-                rel="noopener noreferrer"
-                data-testid="trip-cards-title-link"
-              >
-                <Title data-testid="trip-cards-title">{title}</Title>
-              </StyledLink>
-            ) : (
-              <Title data-testid="trip-cards-title">{title}</Title>
-            )}
-            <Subtitle data-testid="trip-cards-subtitle">{description}</Subtitle>
-          </TitleContent>
-          {titleurl && (
-            <TitleLink
-              href={titleurl}
-              target="_blank"
-              rel="noopener noreferrer"
-              data-testid="title-link"
-            >
-              <ChevronRightIcon />
-            </TitleLink>
-          )}
-        </TitleBar>
-      </TitleSection>
-
-      {!shouldUseCarousel ? (
-        <StaticCardsGrid data-testid="static-cards-grid" ref={gridRef}>
-          {items.map(item => (
-            <CardComponent
-              imgHeight={imgHeight}
-              key={item.id}
-              card={item.data}
-              isStaticGrid={true}
-              forceStaticGrid={forceStaticGrid}
-            />
-          ))}
-        </StaticCardsGrid>
-      ) : (
-        <CarouselComponent
-          items={items.map(item => (
-            <CarouselItem
-              key={item.id}
-              widthItemConfig={widthItemConfig}
-              maxWidthItemConfig={maxWidthItemConfig}
-            >
-              <CardComponent card={item.data} imgHeight={imgHeight} />
-            </CarouselItem>
-          ))}
-          options={{
-            itemsPerPage
-          }}
-          showArrows={!isStaticGrid}
-          showDots={true}
-        />
-      )}
-    </Container>
-  );
-};

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

@@ -1,169 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { SkeletonCard } from '../SkeletonCard';
-
-describe('SkeletonCard', () => {
-  it('renders without crashing', () => {
-    const { container } = render(<SkeletonCard />);
-    expect(container.firstChild).toBeInTheDocument();
-  });
-
-  it('renders placeholder image', () => {
-    render(<SkeletonCard />);
-    const imageContainer = screen.getByTestId('skeleton-image-container');
-    expect(imageContainer).toBeInTheDocument();
-  });
-
-  it('renders skeleton headline', () => {
-    render(<SkeletonCard />);
-    const skeletonHeadline = screen.getByTestId('skeleton-headline');
-    expect(skeletonHeadline).toBeInTheDocument();
-  });
-
-  it('renders four skeleton data points in the list', () => {
-    render(<SkeletonCard />);
-    const dataPoints = [
-      screen.getByTestId('skeleton-data-point-1'),
-      screen.getByTestId('skeleton-data-point-2'),
-      screen.getByTestId('skeleton-data-point-3'),
-      screen.getByTestId('skeleton-data-point-4')
-    ];
-    expect(dataPoints.length).toBe(4);
-  });
-
-  it('renders skeleton lines for data points', () => {
-    render(<SkeletonCard />);
-    const skeletonLines = [
-      screen.getByTestId('skeleton-line-1'),
-      screen.getByTestId('skeleton-line-2'),
-      screen.getByTestId('skeleton-line-3'),
-      screen.getByTestId('skeleton-line-4'),
-      screen.getByTestId('skeleton-price-label')
-    ];
-    expect(skeletonLines.length).toBe(5);
-  });
-
-  it('renders skeleton price', () => {
-    render(<SkeletonCard />);
-    const skeletonPrice = screen.getByTestId('skeleton-price');
-    expect(skeletonPrice).toBeInTheDocument();
-  });
-
-  it('renders skeleton button', () => {
-    render(<SkeletonCard />);
-    const skeletonButton = screen.getByTestId('skeleton-button');
-    expect(skeletonButton).toBeInTheDocument();
-  });
-
-  it('has correct card structure', () => {
-    render(<SkeletonCard />);
-    const cardContainer = screen.getByTestId('skeleton-card-container');
-    const cardContent = screen.getByTestId('skeleton-card-content');
-    const topContainer = screen.getByTestId('skeleton-top-container');
-    const bottomContainer = screen.getByTestId('skeleton-bottom-container');
-
-    expect(cardContainer).toBeInTheDocument();
-    expect(cardContent).toBeInTheDocument();
-    expect(topContainer).toBeInTheDocument();
-    expect(bottomContainer).toBeInTheDocument();
-  });
-
-  it('renders price section with container', () => {
-    render(<SkeletonCard />);
-    const priceSection = screen.getByTestId('skeleton-price-section');
-    const priceContainer = screen.getByTestId('skeleton-price-container');
-
-    expect(priceSection).toBeInTheDocument();
-    expect(priceContainer).toBeInTheDocument();
-  });
-
-  it('renders data points list', () => {
-    render(<SkeletonCard />);
-    const dataPointsList = screen.getByTestId('skeleton-data-points-list');
-    expect(dataPointsList).toBeInTheDocument();
-  });
-
-  it('skeleton lines are rendered for each data point', () => {
-    render(<SkeletonCard />);
-    const skeletonLines = [
-      screen.getByTestId('skeleton-line-1'),
-      screen.getByTestId('skeleton-line-2'),
-      screen.getByTestId('skeleton-line-3'),
-      screen.getByTestId('skeleton-line-4'),
-      screen.getByTestId('skeleton-price-label')
-    ];
-    expect(skeletonLines.length).toBe(5);
-  });
-
-  it('renders with correct skeleton styling', () => {
-    render(<SkeletonCard />);
-
-    expect(screen.getByTestId('skeleton-headline')).toBeInTheDocument();
-    expect(screen.getByTestId('skeleton-price')).toBeInTheDocument();
-    expect(screen.getByTestId('skeleton-button')).toBeInTheDocument();
-    // Check that skeleton lines are present
-    expect(screen.getByTestId('skeleton-line-1')).toBeInTheDocument();
-  });
-
-  it('renders consistent structure', () => {
-    render(<SkeletonCard />);
-
-    expect(screen.getByTestId('skeleton-card-container')).toBeInTheDocument();
-    expect(screen.getByTestId('skeleton-image-container')).toBeInTheDocument();
-    expect(screen.getByTestId('skeleton-card-content')).toBeInTheDocument();
-    expect(screen.getByTestId('skeleton-top-container')).toBeInTheDocument();
-    expect(screen.getByTestId('skeleton-bottom-container')).toBeInTheDocument();
-  });
-
-  it('can render multiple skeleton cards', () => {
-    render(
-      <>
-        <SkeletonCard />
-        <SkeletonCard />
-        <SkeletonCard />
-      </>
-    );
-
-    const cards = screen.getAllByTestId('skeleton-card-container');
-    expect(cards.length).toBe(3);
-  });
-
-  it('renders skeleton elements in correct order', () => {
-    render(<SkeletonCard />);
-
-    const cardContent = screen.getByTestId('skeleton-card-content');
-    const topContainer = screen.getByTestId('skeleton-top-container');
-    const bottomContainer = screen.getByTestId('skeleton-bottom-container');
-
-    // Verify both containers exist as children of card content
-    expect(cardContent.contains(topContainer)).toBe(true);
-    expect(cardContent.contains(bottomContainer)).toBe(true);
-  });
-
-  it('skeleton button has correct structure', () => {
-    render(<SkeletonCard />);
-    const skeletonButton = screen.getByTestId('skeleton-button');
-
-    expect(skeletonButton.tagName.toLowerCase()).toBe('div');
-  });
-
-  it('skeleton lines have correct width props', () => {
-    render(<SkeletonCard />);
-
-    // Check that the skeleton lines are rendered
-    expect(screen.getByTestId('skeleton-line-1')).toBeInTheDocument();
-    expect(screen.getByTestId('skeleton-line-2')).toBeInTheDocument();
-    expect(screen.getByTestId('skeleton-line-3')).toBeInTheDocument();
-    expect(screen.getByTestId('skeleton-line-4')).toBeInTheDocument();
-  });
-
-  it('renders without any interactive elements', () => {
-    const { container } = render(<SkeletonCard />);
-    const buttons = container.querySelectorAll('button');
-    const links = container.querySelectorAll('a');
-
-    expect(buttons.length).toBe(0);
-    expect(links.length).toBe(0);
-  });
-});