@times-components/ts-components 1.146.2-0f9388fe36c532b90db3f35d17847fc17a611f1e.44 → 1.146.2-784617dc4a33959b8795da1d7f425c9929322fae.24

package/src/components/trip-cards/styles.ts

@@ -1,450 +0,0 @@
-import styled from 'styled-components';
-import {
-  ContainerProps,
-  CurrentPriceProps,
-  ImageContainerProps
-} from './types';
-
-const breakpoints = {
-  xs: '0px',
-  sm: '520px',
-  md: '768px',
-  lg: '1024px',
-  xl: '1320px'
-};
-
-const colors = {
-  primary: '#005C8A', // interactivePrimary030
-  titleBlue: '#145683', // Title color
-  ink: '#333333', // inkBase
-  inkBrand: '#01000D', // inkBrand010 - active dot
-  secondary: '#696969', // Secondary text
-  border: '#E4E4E4', // Card border
-  offerBg: '#FFEECF', // Offer label background
-  offerBorder: '#FFB329', // Offer label left border
-  strikethrough: '#9F0000', // Slashed price color
-  dotActive: '#01000D', // inkBrand010
-  dotInactive: '#AAAAAA', // inkNonEssential
-  iconBlue: '#236FA3', // Data point icons
-  white: '#FFFFFF'
-};
-
-export const Container = styled.div<ContainerProps>`
-  max-width: 100%;
-  margin: 0 auto;
-  padding: 80px 0 40px;
-
-  @media (min-width: ${breakpoints.md}) {
-    max-width: var(
-      --wp--style--global--content-size,
-      ${props => props.tablet || '100%'}
-    );
-  }
-
-  @media (min-width: ${breakpoints.lg}) {
-    max-width: var(
-      --wp--style--global--content-size,
-      ${props => props.desktop || '100%'}
-    );
-  }
-
-  @media (min-width: ${breakpoints.xl}) {
-    max-width: var(
-      --wp--style--global--content-size,
-      ${props => props.xl || '100%'}
-    );
-  }
-
-  @media (max-width: ${breakpoints.md}) {
-    padding: 40px 0 0 ${props => (props.mobile ? '10px' : '20px')};
-  }
-`;
-
-export const TitleSection = styled.div`
-  padding: 0;
-  margin-bottom: 16px;
-`;
-
-export const TitleBar = styled.div<{ applyRightPadding?: boolean }>`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 12px;
-  border-top: 1px dashed ${colors.border};
-  border-bottom: 1px dashed ${colors.border};
-  padding: 20px ${props => (props.applyRightPadding ? '10px' : '20px')} 20px 0px;
-
-  @media (max-width: ${breakpoints.md}) {
-    justify-content: space-between;
-  }
-`;
-
-export const TitleContent = styled.div`
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: 8px;
-`;
-
-export const Title = styled.h2`
-  font-family: 'Times Modern', serif;
-  font-size: 24px;
-  font-weight: 800;
-  line-height: 1.13;
-  color: #145683;
-  margin: 0;
-`;
-
-export const Subtitle = styled.p`
-  font-family: 'Times Modern', serif;
-  font-size: 20px;
-  font-weight: 400;
-  line-height: 1.13;
-  color: #333333;
-  margin: 0;
-  vertical-align: bottom;
-`;
-
-export const TitleLink = styled.a`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  padding: 8px;
-  background: #eeeeee;
-  border-radius: 33.33px;
-  text-decoration: none;
-  transition: background-color 0.2s ease;
-  flex-shrink: 0;
-
-  &:hover {
-    background: #dddddd;
-  }
-
-  svg {
-    width: 16px;
-    height: 16px;
-    color: ${colors.ink};
-  }
-`;
-
-export const Description = styled.p`
-  font-family: 'Roboto', sans-serif;
-  font-size: 16px;
-  line-height: 1.5;
-  color: ${colors.secondary};
-  margin: 0 0 20px 0;
-`;
-
-export const StaticCardsGrid = styled.div<{
-  $minWidthMobile?: string;
-  $minWidthTablet?: string;
-  $minWidthDesktop?: string;
-  $minWidthXl?: string;
-}>`
-  display: flex;
-  gap: 20px;
-  padding: 0;
-  flex-wrap: nowrap;
-  overflow-x: auto;
-  scroll-snap-type: x mandatory;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  scroll-behavior: smooth;
-  align-items: stretch;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  > * {
-    flex: 0 0 ${props => props.$minWidthMobile || '90%'};
-    min-width: ${props => props.$minWidthMobile || '280px'};
-    scroll-snap-align: start;
-    display: flex;
-    flex-direction: column;
-  }
-
-  @media (min-width: ${breakpoints.md}) {
-    overflow-x: visible;
-
-    > * {
-      flex: 1 1 0;
-      min-width: 0;
-      max-width: calc(50% - 10px);
-    }
-  }
-
-  @media (min-width: ${breakpoints.lg}) {
-    > * {
-      flex: 1 1 0;
-      min-width: 0;
-      max-width: ${props => props.$minWidthDesktop || 'calc(50% - 10px)'};
-    }
-  }
-
-  @media (min-width: ${breakpoints.xl}) {
-    > * {
-      flex: 1 1 0;
-      min-width: 0;
-      max-width: ${props => props.$minWidthXl || 'calc(50% - 10px)'};
-    }
-  }
-`;
-
-// Card Styles
-export const CardContainer = styled.div`
-  flex: 1;
-  border: 1.2px solid ${colors.border};
-  background: ${colors.white};
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-`;
-
-export const ImageContainer = styled.div<ImageContainerProps>`
-  position: relative;
-  width: auto;
-  aspect-ratio: 3 / 2;
-  height: ${({ isStaticGrid, $heightXs }) =>
-    !isStaticGrid && $heightXs ? $heightXs : '100%'};
-  overflow: hidden;
-  flex-shrink: 0;
-
-  ${({ isStaticGrid, $heightSm, $heightMd, $heightLg, $heightXl }) =>
-    !isStaticGrid &&
-    `
-
-  @media (min-width: ${breakpoints.sm}) {
-    ${$heightSm && `height: ${$heightSm};`}
-  }
-
-  @media (min-width: ${breakpoints.md}) {
-    ${$heightMd && `height: ${$heightMd};`}
-  }
-
-  @media (min-width: ${breakpoints.lg}) {
-    ${$heightLg && `height: ${$heightLg};`}
-  }
-
-  @media (min-width: ${breakpoints.xl}) {
-    ${$heightXl && `height: ${$heightXl};`}
-  }
-  `};
-`;
-
-export const CardImage = styled.img<{ isLoaded?: boolean }>`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: center;
-  display: ${props => (props.isLoaded ? 'block' : 'none')};
-`;
-
-export const StyledLink = styled.a`
-  text-decoration: none;
-  color: inherit;
-`;
-
-export const OfferLabel = styled.div`
-  position: absolute;
-  bottom: 12px;
-  left: 0;
-  background: ${colors.offerBg};
-  border-left: 1.2px solid ${colors.offerBorder};
-  padding: 12px 16px;
-  font-family: 'Roboto', sans-serif;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 1.5;
-  color: ${colors.ink};
-`;
-
-export const GiftBanner = styled.div`
-  position: absolute;
-  bottom: 12px;
-  left: 0;
-  max-width: 80%;
-  background: ${colors.offerBg};
-  padding: 12px 16px;
-  font-family: 'Roboto', sans-serif;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 1.5;
-  color: ${colors.ink};
-  text-align: left;
-`;
-
-export const CardContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  padding: 20px 16px 16px 16px;
-  gap: 32px;
-`;
-
-export const TopContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  flex: 1;
-`;
-
-export const BottomContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-`;
-
-export const Headline = styled.h3`
-  font-family: 'Times Modern', serif;
-  font-size: 20px;
-  font-weight: 700;
-  line-height: 1.125;
-  color: ${colors.ink};
-  margin: 0;
-`;
-
-export const DataPointsList = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-`;
-
-export const DataPoint = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-family: 'Roboto', sans-serif;
-  font-size: 14px;
-  line-height: 1.5;
-  color: ${colors.secondary};
-  min-height: 21px;
-`;
-
-export const DataIcon = styled.span`
-  width: 17px;
-  height: 17px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  color: ${colors.iconBlue};
-  font-size: 17px;
-`;
-
-export const PriceSection = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 12px;
-`;
-
-export const PriceContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  flex: 1;
-`;
-
-export const OfferContainer = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 4px;
-`;
-
-export const PriceLabel = styled.span`
-  font-family: 'Roboto', sans-serif;
-  font-size: 14px;
-  line-height: 1.5;
-  color: ${colors.secondary};
-`;
-
-export const OriginalPrice = styled.span`
-  font-family: 'Roboto', sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1.5;
-  color: ${colors.strikethrough};
-  text-decoration: line-through;
-`;
-
-export const CurrentPrice = styled.span<CurrentPriceProps>`
-  font-family: 'Times Modern', serif;
-  font-size: ${props => (props.$isEnquire ? '24px' : '32px')};
-  font-weight: 300;
-  line-height: 1.125;
-  color: ${colors.ink};
-`;
-
-export const PriceSuffix = styled.span`
-  font-family: 'Times Modern', serif;
-  font-size: 24px;
-  font-weight: 300;
-  line-height: 1.125;
-  color: ${colors.ink};
-`;
-
-export const LogoContainer = styled.div`
-  width: 88px;
-  height: 44px;
-  display: flex;
-  align-items: center;
-
-  a {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-  }
-
-  img {
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: contain;
-  }
-`;
-
-export const CTAButton = styled.a`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  padding: 12px 16px;
-  background: ${colors.primary};
-  color: ${colors.white};
-  font-family: 'Roboto', sans-serif;
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 1.5;
-  text-decoration: none;
-  transition: background 0.2s ease;
-
-  &:hover {
-    background: #004a6e;
-  }
-`;
-
-// Navigation Arrow - positioned on sides of carousel
-export const LoadingContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 400px;
-  font-family: 'Roboto', sans-serif;
-  color: ${colors.secondary};
-`;
-
-export const ErrorContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 200px;
-  font-family: 'Roboto', sans-serif;
-  color: ${colors.strikethrough};
-`;

package/src/components/trip-cards/types.ts

@@ -1,128 +0,0 @@
-import { ComponentType } from 'react';
-
-export interface ResponsiveConfig {
-  xs?: string;
-  mobile?: string;
-  tablet?: string;
-  desktop?: string;
-  xl?: string;
-}
-
-export type ResponsiveConfigNoXs = Omit<ResponsiveConfig, 'xs'>;
-
-export interface ImageHeightConfig {
-  $heightXs?: string;
-  $heightSm?: string;
-  $heightMd?: string;
-  $heightLg?: string;
-  $heightXl?: string;
-  isStaticGrid?: boolean;
-}
-
-export interface TripCardsElement {
-  class?: string;
-  tripcards: string;
-  title?: string;
-  titleurl?: string;
-  description?: string;
-}
-
-export interface TripCardsProps {
-  element: TripCardsElement;
-  useMockData?: boolean;
-  widthContainerConfig?: ResponsiveConfig;
-  widthItemConfig?: ResponsiveConfig;
-  maxWidthItemConfig?: ResponsiveConfig;
-  imgHeight?: ImageHeightConfig;
-  forceStaticGrid?: boolean;
-}
-
-export interface DecodedTripCard {
-  cruise_id: string;
-}
-
-export interface TripCardApiData {
-  cruise_id: string;
-  image: string;
-  offer_label?: string;
-  gift_banner?: string;
-  headline: string;
-  date: string;
-  duration: string;
-  route: string;
-  ship: string;
-  original_price?: string;
-  price: string;
-  logo: string;
-  logo_url: string;
-  cta_url: string;
-  cta_text: string;
-}
-
-export interface TripCardProps {
-  card: TripCardApiData;
-  isStaticGrid?: boolean;
-  imgHeight?: ImageHeightConfig;
-}
-
-export interface ApiCruiseResult {
-  post_id: number;
-  cruise_id: number;
-  cruise_title: string;
-  cruise_line: {
-    name: string;
-    link: string;
-    logo: string;
-  };
-  ship: {
-    name: string;
-    link: string;
-    image: string;
-  };
-  departs: string;
-  ends: string;
-  date_label: string;
-  destination: string[];
-  duration: number;
-  itinerary: string[];
-  prices: {
-    cheapest_price: number | string;
-    inside: string | number;
-    outside: string | number;
-    balcony: string | number;
-    suite: string | number;
-  };
-  was_prices: {
-    inside: number;
-    outside: number;
-    balcony: number;
-    suite: number;
-  };
-  link: string;
-  campaigns: string[];
-  extras: {
-    date: string;
-    duration: string;
-    destination: string;
-    info: string;
-  };
-}
-export interface TripCardsLayoutProps {
-  element: TripCardsElement;
-  items: Array<{ id: string | number; data?: TripCardApiData }>;
-  CardComponent: ComponentType<any>;
-  itemsPerPage: number;
-  widthContainerConfig?: ResponsiveConfig;
-  widthItemConfig?: ResponsiveConfig;
-  maxWidthItemConfig?: ResponsiveConfig;
-  imgHeight?: ImageHeightConfig;
-  forceStaticGrid?: boolean;
-}
-
-export type ImageContainerProps = ImageHeightConfig;
-
-export type ContainerProps = Partial<ResponsiveConfig>;
-
-export interface CurrentPriceProps {
-  $isEnquire?: boolean;
-}