@times-components/ts-components 1.145.1-cfea81c4084e6f91221ea00fec9fc730d5b933cb.4 → 1.145.1-e871182934034874ea6a75e1e684090e5504df44.2

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

@@ -1,67 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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

@@ -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);
-  });
-});

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

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