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

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

@@ -0,0 +1,143 @@
+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
+} from './styles';
+import { MoonIcon, LocationIcon, BoatIcon, CalendarIcon } from './assets';
+
+export const TripCard: FC<TripCardProps> = ({
+  card,
+  isStaticGrid,
+  imgHeight = {}
+}) => {
+  const [imageLoaded, setImageLoaded] = useState(false);
+
+  return (
+    <CardContainer>
+      <a
+        href={card.cta_url}
+        target="_blank"
+        rel="noopener noreferrer"
+        style={{ textDecoration: 'none', color: 'inherit' }}
+      >
+        <ImageContainer isStaticGrid={isStaticGrid} {...imgHeight}>
+          {!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 $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

@@ -0,0 +1,254 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { TripCards } from './index';
+import styled from 'styled-components';
+
+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}
+      widthContainerConfig={{
+        mobile: '390px',
+        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={{
+        mobile: '320px',
+        tablet: '320px',
+        desktop: '314px',
+        xl: '368px'
+      }}
+      widthContainerConfig={{
+        mobile: '390px',
+        tablet: '728px',
+        desktop: '984px',
+        xl: '1144px'
+      }}
+      imgHeight={{
+        $heightXs: '153px',
+        $heightSm: '213px',
+        $heightMd: '213px',
+        $heightLg: '210px',
+        $heightXl: '245px'
+      }}
+      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={{
+          $heightXs: '153px',
+          $heightSm: '213px',
+          $heightMd: '173px',
+          $heightLg: '173px',
+          $heightXl: '200px'
+        }}
+      />
+    </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={{
+          $heightXs: '153px',
+          $heightSm: '213px',
+          $heightMd: '213px',
+          $heightLg: '173px',
+          $heightXl: '200px'
+        }}
+      />
+    </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={{
+          $heightXs: '153px',
+          $heightSm: '213px',
+          $heightMd: '173px',
+          $heightLg: '173px',
+          $heightXl: '200px'
+        }}
+      />
+    </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={{
+          $heightXs: '153px',
+          $heightSm: '213px',
+          $heightMd: '173px',
+          $heightLg: '173px',
+          $heightXl: '200px'
+        }}
+      />
+    </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={{
+          $heightXs: '153px',
+          $heightSm: '213px',
+          $heightMd: '173px',
+          $heightLg: '173px',
+          $heightXl: '200px'
+        }}
+      />
+    </InteractiveContainer>
+  ));

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

@@ -0,0 +1,108 @@
+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
+} 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;
+
+  useEffect(
+    () => {
+      const checkScreenAndOverflow = () => {
+        setIsTabletMobile(window.innerWidth <= 768);
+
+        if (isStaticGrid && gridRef.current) {
+          const isOverflowing =
+            gridRef.current.scrollWidth > gridRef.current.clientWidth;
+          setHasOverflow(isOverflowing);
+        }
+      };
+
+      checkScreenAndOverflow();
+      window.addEventListener('resize', checkScreenAndOverflow);
+      return () => window.removeEventListener('resize', checkScreenAndOverflow);
+    },
+    [items, isStaticGrid]
+  );
+
+  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">
+          <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>
+
+      {!shouldUseCarousel ? (
+        <StaticCardsGrid data-testid="static-cards-grid" ref={gridRef}>
+          {items.map(item => (
+            <CardComponent
+              imgHeight={imgHeight}
+              key={item.id}
+              card={item.data}
+              isStaticGrid={true}
+            />
+          ))}
+        </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

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