@times-components/ts-components 1.146.2-784617dc4a33959b8795da1d7f425c9929322fae.24 → 1.146.2-e5795a0ef59e2adb61ba52aeb7332fda4405cb7a.4

package/src/components/travel-mini-cta/styles.ts

@@ -1,331 +0,0 @@
-import styled from 'styled-components';
-import { getMediaQuery, applyDarkMode } from '../../utils';
-
-const BaseLabel = styled.div<{ isApp?: boolean }>`
-  font-family: 'Roboto';
-  font-weight: 500;
-  line-height: 1.125;
-  font-size: 14px;
-  letter-spacing: 0em;
-  color: #236fa3;
-  text-transform: uppercase;
-
-  ${({ isApp }) =>
-    applyDarkMode(
-      `
-        color: #f5f5f5 !important;
-    `,
-      isApp
-    )};
-`;
-
-export const Container = styled.div<{ isApp?: boolean }>`
-  background-color: #ffffff;
-  padding: 24px 0;
-  border-top: 1px dashed;
-  border-bottom: 1px dashed;
-  border-color: #cccccc;
-
-  ${({ isApp }) =>
-    applyDarkMode(
-      `
-        background-color: #f5f5f5 !important;
-        border-color: #e4e4e4 !important;
-    `,
-      isApp
-    )};
-`;
-
-export const ContentWrapper = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 20px;
-
-  ${getMediaQuery('xs', 'md')} {
-    flex-direction: column;
-    gap: 24px;
-  }
-`;
-
-export const LeftSection = styled.div`
-  display: flex;
-  align-items: flex-start;
-  width: 50%;
-  gap: 24px;
-
-  ${getMediaQuery('xs', 'md')} {
-    width: 100%;
-    flex-direction: column;
-    gap: 16px;
-  }
-`;
-
-export const LogoContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-
-  ${getMediaQuery('xs', 'md')} {
-    flex-direction: row-reverse;
-    justify-content: flex-start;
-    justify-content: space-between;
-    width: 100%;
-  }
-`;
-
-export const LogoBox = styled.div<{ isApp?: boolean }>`
-  width: 40px;
-  height: 40px;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #236fa3;
-
-  ${({ isApp }) =>
-    applyDarkMode(
-      `
-        background-color: #c2c2c2 !important;
-    `,
-      isApp
-    )};
-`;
-
-export const LogoText = styled.span<{ isApp?: boolean }>`
-  font-family: 'Times Modern', serif;
-  font-weight: 700;
-  font-size: 40px;
-  line-height: 1.125;
-  letter-spacing: 0.02em;
-  color: #ffffff;
-  padding-top: 4px;
-
-  ${({ isApp }) =>
-    applyDarkMode(
-      `
-        color: #1d1d1b !important;
-    `,
-      isApp
-    )};
-`;
-
-export const TextContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  max-width: 375px;
-
-  ${getMediaQuery('xs', 'md')} {
-    gap: 24px;
-  }
-`;
-
-export const Label = styled(BaseLabel)`
-  ${getMediaQuery('xs', 'md')} {
-    display: none;
-  }
-`;
-
-export const MobileLabel = styled(BaseLabel)`
-  display: none;
-
-  ${getMediaQuery('xs', 'md')} {
-    display: block;
-  }
-`;
-
-export const Description = styled.div<{ isApp?: boolean }>`
-  font-family: 'Times Modern';
-  font-weight: 700;
-  line-height: 1.125;
-  font-size: 24px;
-  letter-spacing: 0em;
-  color: #333333;
-
-  ${({ isApp }) =>
-    applyDarkMode(
-      `
-        color: #cccccc !important;
-    `,
-      isApp
-    )};
-
-  ${getMediaQuery('xs', 'md')} {
-    margin-right: 64px;
-  }
-`;
-
-export const RightSection = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  width: 50%;
-
-  ${getMediaQuery('xs', 'md')} {
-    gap: 32px;
-    width: 100%;
-  }
-`;
-
-export const ContactInfo = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-`;
-
-export const PhoneLabel = styled.a<{ isApp?: boolean }>`
-  text-decoration: none;
-  display: inline;
-  font-family: 'Times Digital W04 Regular';
-  font-weight: 400;
-  line-height: 1.5;
-  font-size: 18px;
-  letter-spacing: 0em;
-  color: #333333;
-  cursor: pointer;
-
-  ${({ isApp }) =>
-    applyDarkMode(
-      `
-        color: #c2c2c2 !important;
-    `,
-      isApp
-    )};
-
-  &:hover {
-    text-decoration: underline;
-  }
-`;
-
-export const PhoneNumber = styled.span<{ isApp?: boolean }>`
-  font-family: 'Times Modern';
-  font-weight: 700;
-  line-height: 1.125;
-  font-size: 22px;
-  letter-spacing: 0em;
-  color: #333333;
-
-  ${({ isApp }) =>
-    applyDarkMode(
-      `
-        color: #c2c2c2 !important;
-    `,
-      isApp
-    )};
-`;
-
-export const WorkingHoursContainer = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-
-  ${getMediaQuery('xs', 'md')} {
-    flex-direction: column;
-  }
-`;
-
-export const WorkingHoursText = styled.div<{ isApp?: boolean }>`
-  font-family: 'Times Digital W04 Regular';
-  font-weight: 400;
-  line-height: 1.5;
-  font-size: 18px;
-  letter-spacing: 0em;
-  color: #333333;
-
-  ${({ isApp }) =>
-    applyDarkMode(
-      `
-        color: #cccccc !important;
-    `,
-      isApp
-    )};
-`;
-
-export const ButtonsContainer = styled.div`
-  display: flex;
-  gap: 16px;
-
-  ${getMediaQuery('xs', 'md')} {
-    flex-direction: column;
-  }
-`;
-
-const BaseButton = styled.a`
-  text-decoration: none;
-  border-radius: 0px;
-  width: 100%;
-  min-height: 44px;
-  font-family: 'Roboto';
-  font-weight: 500;
-  line-height: 1.5;
-  font-size: 16px;
-  letter-spacing: 0em;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 12px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-`;
-
-export const PrimaryButton = styled(BaseButton)<{
-  disabled?: boolean;
-  isApp?: boolean;
-}>`
-  border: none;
-  background-color: #005c8a;
-  color: #ffffff;
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
-  opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
-
-  div[data-lp-event] {
-    cursor: pointer;
-    font-family: 'Roboto';
-    font-weight: 500;
-    line-height: 1.5;
-    font-size: 16px;
-    letter-spacing: 0em;
-  }
-
-  &:hover {
-    background-color: #00527a;
-  }
-
-  ${({ isApp }) =>
-    applyDarkMode(
-      `
-        background-color: #74bade !important;
-        color: #1d1d1b !important;
-
-        &:hover {
-            background-color: #93cbe8 !important;
-        }
-    `,
-      isApp
-    )};
-`;
-
-export const SecondaryButton = styled(BaseButton)<{ isApp?: boolean }>`
-  border: 1px solid #005c8a;
-  background-color: transparent;
-  color: #005c8a;
-
-  &:hover {
-    background-color: #f5f5f5;
-  }
-
-  ${({ isApp }) =>
-    applyDarkMode(
-      `
-        border-color: #74bade !important;
-        color: #74bade !important;
-
-        &:hover {
-            background-color: #01000d !important;
-        }
-    `,
-      isApp
-    )};
-`;

package/src/components/travel-mini-cta/travel-mini-cta.stories.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { TravelMiniCTA } from './index';
-import { ArticleHarness } from '../../fixtures/article-harness/ArticleHarness';
-
-storiesOf('Typescript Component/In Article/Travel Mini CTA', module).add(
-  'Travel Mini CTA',
-  () => (
-    <ArticleHarness>
-      <div style={{ padding: '16px' }}>
-        <TravelMiniCTA
-          description="Begin your journey to Croatia with a holiday designed around you, guided by a dedicated travel expert."
-          phoneLabel="Call us on"
-          phoneNumber="08083049757"
-          workingHours={['Mon - Fri: 9am - 6pm', 'Sat: 10am - 5pm']}
-          primaryButtonText="Chat with us"
-          secondaryButtonText="Enquire now"
-          secondaryButtonUrl="/enquire"
-        />
-      </div>
-    </ArticleHarness>
-  )
-);

package/src/components/travel-mini-cta/types.ts

@@ -1,10 +0,0 @@
-export interface TravelMiniCTAProps {
-  description?: string;
-  phoneLabel?: string;
-  phoneNumber?: string;
-  workingHours?: string[];
-  primaryButtonText?: string;
-  secondaryButtonText?: string;
-  secondaryButtonUrl?: string;
-  isApp?: boolean;
-}

package/src/utils/applyDarkMode.ts

@@ -1,12 +0,0 @@
-// Helper for dark mode styling
-export const applyDarkMode = (styles: string, isApp?: boolean) => {
-  if (!isApp) {
-    return '';
-  }
-
-  return `
-        @media (prefers-color-scheme: dark) {
-            ${styles}
-        }
-    `;
-};

package/src/utils/getMediaQuery.ts

@@ -1,25 +0,0 @@
-export const breakpoints = {
-  xs: 0,
-  sm: 520,
-  md: 768,
-  lg: 1024,
-  xl: 1320,
-  all: 0
-};
-
-export type BreakPointKeys = keyof typeof breakpoints;
-export type MQ = Partial<Record<BreakPointKeys, string>> | string;
-
-export const getMediaQuery = (
-  minWidth?: keyof typeof breakpoints,
-  maxWidth?: keyof typeof breakpoints
-) => () => {
-  const queries = ['@media screen'];
-  if (minWidth && breakpoints[minWidth]) {
-    queries.push(` and (min-width: ${breakpoints[minWidth]}px)`);
-  }
-  if (maxWidth) {
-    queries.push(` and (max-width: ${breakpoints[maxWidth] - 1}px)`);
-  }
-  return queries.join('');
-};

package/src/utils/index.ts

@@ -1,2 +0,0 @@
-export { applyDarkMode } from './applyDarkMode';
-export { getMediaQuery } from './getMediaQuery';