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

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

@@ -0,0 +1,135 @@
+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
+} from './styles';
+import { MoonIcon, LocationIcon, BoatIcon, CalendarIcon } from './assets';
+
+export const TripCard: FC<TripCardProps> = ({ card }) => {
+  const [imageLoaded, setImageLoaded] = useState(false);
+
+  return (
+    <CardContainer>
+      <a
+        href={card.cta_url}
+        target="_blank"
+        rel="noopener noreferrer"
+        style={{ textDecoration: 'none', color: 'inherit' }}
+      >
+        <ImageContainer>
+          {!imageLoaded && <Placeholder />}
+          <CardImage
+            src={card.image}
+            alt={card.headline}
+            onLoad={() => setImageLoaded(true)}
+            style={{ display: imageLoaded ? 'block' : 'none' }}
+          />
+          {card.offer_label && <OfferLabel>{card.offer_label}</OfferLabel>}
+          {card.gift_banner && <GiftBanner>{card.gift_banner}</GiftBanner>}
+        </ImageContainer>
+      </a>
+
+      <CardContent>
+        <TopContainer>
+          <a
+            href={card.cta_url}
+            target="_blank"
+            rel="noopener noreferrer"
+            style={{ textDecoration: 'none', color: 'inherit' }}
+          >
+            <Headline>{card.headline}</Headline>
+          </a>
+
+          <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>
+              <OfferContainer>
+                {card.price !== 'Enquire now' && <PriceLabel>From</PriceLabel>}
+                {card.original_price && (
+                  <OriginalPrice>{card.original_price}</OriginalPrice>
+                )}
+              </OfferContainer>
+              <CurrentPrice>{card.price}</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

@@ -0,0 +1,67 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { TripCards } from './index';
+
+storiesOf('Typescript Component/TripCards', module)
+  .add('Default', () => (
+    <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}
+    />
+  ))
+  .add('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}
+    />
+  ))
+  .add('Three Cards', () => (
+    <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}
+    />
+  ))
+  .add('Six Cards (Carousel)', () => (
+    <TripCards
+      element={{
+        class: 'trip-cards',
+        tripcards: btoa(
+          JSON.stringify([2074350, 2140335, 2177685, 2074351, 2140336, 2177686])
+        ),
+        title: 'Featured Voyages',
+        titleUrl: 'https://www.thetimes.com/travel/holidays',
+        description: 'Handpicked by our travel experts'
+      }}
+      useMockData={true}
+    />
+  ))
+  .add('With Title Link', () => (
+    <TripCards
+      element={{
+        class: 'trip-cards',
+        tripcards: btoa(JSON.stringify([2074350, 2140335, 2177685])),
+        title: 'Explore Mediterranean',
+        titleUrl: 'https://www.thetimes.com/travel/holidays/cruises',
+        description: 'Discover amazing cruise deals'
+      }}
+      useMockData={true}
+    />
+  ));

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

@@ -0,0 +1,75 @@
+import React, { FC } from 'react';
+import { CarouselComponent, CarouselItem } from '../carousel-component';
+import { TripCardsLayoutProps } from './types';
+import {
+  Container,
+  TitleSection,
+  TitleBar,
+  TitleContent,
+  Title,
+  Subtitle,
+  TitleLink,
+  StaticCardsGrid
+} from './styles';
+import { ChevronRightIcon } from './assets';
+
+export const TripCardsLayout: FC<TripCardsLayoutProps> = ({
+  element,
+  items,
+  CardComponent,
+  itemsPerPage
+}) => {
+  const { titleUrl, title, description } = element;
+  const isStaticGrid = items.length === 2;
+  return (
+    <Container data-testid="trip-cards-container">
+      <TitleSection data-testid="title-section">
+        <TitleBar data-testid="title-bar">
+          <TitleContent data-testid="title-content">
+            <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>
+
+      {isStaticGrid ? (
+        <StaticCardsGrid data-testid="static-cards-grid">
+          {items.map(item => (
+            <CardComponent key={item.id} card={item.data} />
+          ))}
+        </StaticCardsGrid>
+      ) : (
+        <CarouselComponent
+          items={items.map(item => (
+            <CarouselItem
+              key={item.id}
+              widthConfig={{
+                mobile: '90%',
+                tablet: '43.5%',
+                desktop: '46.5%',
+                xl: '45.5%'
+              }}
+            >
+              <CardComponent card={item.data} />
+            </CarouselItem>
+          ))}
+          options={{
+            itemsPerPage
+          }}
+          showArrows={true}
+          showDots={true}
+        />
+      )}
+    </Container>
+  );
+};

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

@@ -0,0 +1,169 @@
+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);
+  });
+});

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

@@ -0,0 +1,120 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { TripCard } from '../TripCard';
+import { TripCardApiData } from '../types';
+
+const mockCard: TripCardApiData = {
+  cruise_id: '2074350',
+  image: 'https://example.com/image.jpg',
+  headline: 'Mediterranean from Barcelona',
+  date: 'Oct 2025 - Oct 2025',
+  duration: 'Seven Days',
+  route: 'Barcelona → Marseille',
+  ship: 'MSC Seaside',
+  price: '£2000',
+  logo: 'https://example.com/logo.png',
+  logo_url: 'https://example.com',
+  cta_url: 'https://example.com/cruise',
+  cta_text: 'View Itinerary'
+};
+
+describe('TripCard', () => {
+  it('renders card with all required data', () => {
+    render(<TripCard card={mockCard} />);
+
+    expect(
+      screen.getByText('Mediterranean from Barcelona')
+    ).toBeInTheDocument();
+    expect(screen.getByText('Oct 2025 - Oct 2025')).toBeInTheDocument();
+    expect(screen.getByText('Seven Days')).toBeInTheDocument();
+    expect(screen.getByText('Barcelona → Marseille')).toBeInTheDocument();
+    expect(screen.getByText('MSC Seaside')).toBeInTheDocument();
+    expect(screen.getByText('£2000')).toBeInTheDocument();
+    expect(screen.getByText('From')).toBeInTheDocument();
+    expect(screen.getByText('View Itinerary')).toBeInTheDocument();
+  });
+
+  it('renders image with correct src and alt', () => {
+    render(<TripCard card={mockCard} />);
+
+    const image = screen.getByAltText('Mediterranean from Barcelona');
+    expect(image).toHaveAttribute('src', 'https://example.com/image.jpg');
+  });
+
+  it('renders offer label when provided', () => {
+    const cardWithOffer = {
+      ...mockCard,
+      offer_label: 'Special Offer'
+    };
+
+    render(<TripCard card={cardWithOffer} />);
+
+    expect(screen.getByText('Special Offer')).toBeInTheDocument();
+  });
+
+  it('renders gift banner when provided', () => {
+    const cardWithGift = {
+      ...mockCard,
+      gift_banner: 'Free gift with purchase'
+    };
+
+    render(<TripCard card={cardWithGift} />);
+
+    expect(screen.getByText('Free gift with purchase')).toBeInTheDocument();
+  });
+
+  it('renders original price when provided', () => {
+    const cardWithOriginalPrice = {
+      ...mockCard,
+      original_price: '£2500'
+    };
+
+    render(<TripCard card={cardWithOriginalPrice} />);
+
+    expect(screen.getByText('£2500')).toBeInTheDocument();
+  });
+
+  it('does not render "From" when price is "Enquire now"', () => {
+    const cardWithEnquire = {
+      ...mockCard,
+      price: 'Enquire now'
+    };
+
+    render(<TripCard card={cardWithEnquire} />);
+
+    expect(screen.queryByText('From')).not.toBeInTheDocument();
+    expect(screen.getByText('Enquire now')).toBeInTheDocument();
+  });
+
+  it('renders all CTA links with correct href and target', () => {
+    render(<TripCard card={mockCard} />);
+
+    const links = screen.getAllByRole('link');
+    const imageLink = links[0];
+    const headlineLink = links[1];
+    const ctaButton = screen.getByText('View Itinerary').closest('a');
+
+    expect(imageLink).toHaveAttribute('href', 'https://example.com/cruise');
+    expect(imageLink).toHaveAttribute('target', '_blank');
+    expect(headlineLink).toHaveAttribute('href', 'https://example.com/cruise');
+    expect(ctaButton).toHaveAttribute('href', 'https://example.com/cruise');
+  });
+
+  it('renders logo with link when provided', () => {
+    render(<TripCard card={mockCard} />);
+    const logoLink = screen.getByRole('link', { name: /partner logo/i });
+    expect(logoLink).toHaveAttribute('href', 'https://example.com');
+    const logoImg = screen.getByAltText('Partner logo');
+    expect(logoImg).toHaveAttribute('src', 'https://example.com/logo.png');
+  });
+
+  it('shows card image after it loads', () => {
+    render(<TripCard card={mockCard} />);
+
+    const cardImage = screen.getByAltText('Mediterranean from Barcelona');
+    expect(cardImage).toHaveStyle({ display: 'none' });
+    fireEvent.load(cardImage);
+    expect(cardImage).toHaveStyle({ display: 'block' });
+  });
+});