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

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

@@ -1,426 +0,0 @@
-import styled from 'styled-components';
-
-const breakpoints = {
-  sm: '390px',
-  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`
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 80px 0 40px;
-
-  @media (max-width: ${breakpoints.md}) {
-    padding: 40px 0;
-  }
-`;
-
-export const TitleSection = styled.div`
-  padding: 0;
-  margin-bottom: 16px;
-
-  @media (max-width: ${breakpoints.md}) {
-    padding: 0 10px;
-  }
-`;
-
-export const TitleBar = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 12px;
-  border-top: 1px dashed ${colors.border};
-  border-bottom: 1px dashed ${colors.border};
-  padding: 20px 0px;
-
-  @media (max-width: ${breakpoints.md}) {
-    justify-content: space-between;
-  }
-`;
-
-export const TitleContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-
-  @media (min-width: ${breakpoints.md}) {
-    flex-direction: row;
-    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`
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 20px;
-  padding: 0;
-
-  @media (min-width: ${breakpoints.md}) {
-    grid-template-columns: repeat(2, 1fr);
-  }
-`;
-
-// Card Styles
-export const CardContainer = styled.div`
-  width: 100%;
-  height: 100%;
-  border: 1.2px solid ${colors.border};
-  background: ${colors.white};
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-`;
-
-export const ImageContainer = styled.div`
-  position: relative;
-  width: 100%;
-  aspect-ratio: 3 / 2;
-  height: 100%;
-  overflow: hidden;
-  flex-shrink: 0;
-
-  @media (min-width: ${breakpoints.sm}) {
-    height: 213px;
-  }
-
-  @media (min-width: ${breakpoints.md}) {
-    height: 173px;
-  }
-
-  @media (min-width: ${breakpoints.xl}) {
-    height: 200px;
-  }
-`;
-
-export const CardImage = styled.img`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: center;
-`;
-
-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`
-  font-family: 'Times Modern', serif;
-  font-size: 44px;
-  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 NavigationArrow = styled.button<{
-  direction: 'left' | 'right';
-  disabled?: boolean;
-}>`
-  display: none;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  ${({ direction }) =>
-    direction === 'left' ? 'left: -65px;' : 'right: -65px;'} z-index: 10;
-  width: 48px;
-  height: 48px;
-  border: none;
-  border-radius: 50%;
-  background: ${({ disabled }) => (disabled ? '#CCCCCC' : colors.primary)};
-  cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
-  align-items: center;
-  justify-content: center;
-  transition: background 0.2s ease;
-  pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
-
-  svg {
-    width: 24px;
-    height: 24px;
-  }
-
-  svg path {
-    stroke: ${colors.white};
-  }
-
-  &:hover:not(:disabled) {
-    background: #004a6e;
-  }
-
-  @media (min-width: ${breakpoints.lg}) {
-    display: flex;
-  }
-`;
-
-export const PageControl = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
-  padding: 12px;
-  background: ${colors.white};
-`;
-
-export const PageDot = styled.button<{ active: boolean }>`
-  width: 8px;
-  height: 8px;
-  border-radius: 1000px;
-  border: none;
-  padding: 0;
-  background: ${({ active }) => (active ? '#01000D' : '#AAAAAA')};
-  cursor: pointer;
-  transition: background 0.2s ease;
-
-  &:hover {
-    background: #01000d;
-  }
-`;
-
-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,91 +0,0 @@
-import { ComponentType } from 'react';
-
-export interface TripCardsElement {
-  class?: string;
-  tripcards: string;
-  title?: string;
-  titleUrl?: string;
-  description?: string;
-}
-
-export interface TripCardsProps {
-  element: TripCardsElement;
-  useMockData?: 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;
-}
-
-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: {
-    cheapest_price: number | string;
-    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;
-}