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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (143) hide show
  1. package/dist/components/carousel-component/CarouselComponent.stories.js +146 -0
  2. package/dist/components/carousel-component/CarouselItem.d.ts +3 -0
  3. package/dist/components/carousel-component/CarouselItem.js +11 -0
  4. package/dist/components/carousel-component/DefaultNavigationArrow.d.ts +8 -0
  5. package/dist/components/carousel-component/DefaultNavigationArrow.js +6 -0
  6. package/dist/components/carousel-component/DefaultPageDot.d.ts +8 -0
  7. package/dist/components/carousel-component/DefaultPageDot.js +4 -0
  8. package/dist/components/{opta/football/opta-match-stats/matchday-live/__tests__/OptaMatchStatsMatchdayLive.test.d.ts → carousel-component/__tests__/CarouselComponent.test.d.ts} +0 -1
  9. package/dist/components/carousel-component/__tests__/CarouselComponent.test.js +163 -0
  10. package/dist/components/carousel-component/__tests__/CarouselItem.test.d.ts +1 -0
  11. package/dist/components/carousel-component/__tests__/CarouselItem.test.js +80 -0
  12. package/dist/components/carousel-component/__tests__/DefaultNavigationArrow.test.d.ts +1 -0
  13. package/dist/components/carousel-component/__tests__/DefaultNavigationArrow.test.js +62 -0
  14. package/dist/components/carousel-component/__tests__/DefaultPageDot.test.d.ts +1 -0
  15. package/dist/components/carousel-component/__tests__/DefaultPageDot.test.js +68 -0
  16. package/dist/components/carousel-component/hooks/__tests__/useCarousel.test.d.ts +1 -0
  17. package/dist/components/carousel-component/hooks/__tests__/useCarousel.test.js +459 -0
  18. package/dist/components/carousel-component/hooks/useCarousel.d.ts +2 -0
  19. package/dist/components/carousel-component/hooks/useCarousel.js +175 -0
  20. package/dist/components/carousel-component/index.d.ts +4 -0
  21. package/dist/components/carousel-component/index.js +20 -0
  22. package/dist/components/carousel-component/styles.d.ts +27 -0
  23. package/dist/components/carousel-component/styles.js +169 -0
  24. package/dist/components/carousel-component/types.d.ts +53 -0
  25. package/dist/components/carousel-component/types.js +2 -0
  26. package/dist/components/opta/football/opta-match-stats/shared/styles.js +1 -8
  27. package/dist/components/trip-cards/SkeletonCard.d.ts +6 -0
  28. package/dist/components/trip-cards/SkeletonCard.js +21 -0
  29. package/dist/components/trip-cards/TripCard.d.ts +3 -0
  30. package/dist/components/trip-cards/TripCard.js +49 -0
  31. package/dist/components/trip-cards/TripCards.stories.d.ts +1 -0
  32. package/dist/components/trip-cards/TripCards.stories.js +189 -0
  33. package/dist/components/trip-cards/TripCardsLayout.d.ts +3 -0
  34. package/dist/components/trip-cards/TripCardsLayout.js +37 -0
  35. package/dist/components/trip-cards/__tests__/SkeletonCard.test.d.ts +1 -0
  36. package/dist/components/trip-cards/__tests__/SkeletonCard.test.js +139 -0
  37. package/dist/components/trip-cards/__tests__/TripCard.test.d.ts +1 -0
  38. package/dist/components/trip-cards/__tests__/TripCard.test.js +95 -0
  39. package/dist/components/trip-cards/__tests__/TripCardsLayout.test.d.ts +1 -0
  40. package/dist/components/trip-cards/__tests__/TripCardsLayout.test.js +277 -0
  41. package/dist/components/trip-cards/__tests__/assets.test.d.ts +1 -0
  42. package/dist/components/trip-cards/__tests__/assets.test.js +165 -0
  43. package/dist/components/trip-cards/__tests__/helpers.test.d.ts +1 -0
  44. package/dist/components/trip-cards/__tests__/helpers.test.js +216 -0
  45. package/dist/components/trip-cards/__tests__/index.test.d.ts +1 -0
  46. package/dist/components/trip-cards/__tests__/index.test.js +433 -0
  47. package/dist/components/trip-cards/__tests__/mockData.test.d.ts +1 -0
  48. package/dist/components/trip-cards/__tests__/mockData.test.js +57 -0
  49. package/dist/components/trip-cards/__tests__/skeletonStyles.test.d.ts +1 -0
  50. package/dist/components/trip-cards/__tests__/skeletonStyles.test.js +194 -0
  51. package/dist/components/trip-cards/assets/BoatIcon.d.ts +1 -0
  52. package/dist/components/trip-cards/assets/BoatIcon.js +4 -0
  53. package/dist/components/trip-cards/assets/CalendarIcon.d.ts +1 -0
  54. package/dist/components/trip-cards/assets/CalendarIcon.js +4 -0
  55. package/dist/components/trip-cards/assets/ChevronRightIcon.d.ts +1 -0
  56. package/dist/components/trip-cards/assets/ChevronRightIcon.js +4 -0
  57. package/dist/components/trip-cards/assets/LocationIcon.d.ts +1 -0
  58. package/dist/components/trip-cards/assets/LocationIcon.js +4 -0
  59. package/dist/components/trip-cards/assets/MoonIcon.d.ts +1 -0
  60. package/dist/components/trip-cards/assets/MoonIcon.js +4 -0
  61. package/dist/components/trip-cards/assets/index.d.ts +6 -0
  62. package/dist/components/trip-cards/assets/index.js +7 -0
  63. package/dist/components/trip-cards/helpers.d.ts +4 -0
  64. package/dist/components/trip-cards/helpers.js +115 -0
  65. package/dist/components/trip-cards/index.d.ts +4 -0
  66. package/dist/components/trip-cards/index.js +70 -0
  67. package/dist/components/trip-cards/mockData.d.ts +3 -0
  68. package/dist/components/trip-cards/mockData.js +317 -0
  69. package/dist/components/trip-cards/skeletonStyles.d.ts +9 -0
  70. package/dist/components/trip-cards/skeletonStyles.js +37 -0
  71. package/dist/components/trip-cards/styles.d.ts +38 -0
  72. package/dist/components/trip-cards/styles.js +401 -0
  73. package/dist/components/trip-cards/types.d.ts +119 -0
  74. package/dist/components/trip-cards/types.js +2 -0
  75. package/dist/index.d.ts +1 -0
  76. package/dist/index.js +2 -4
  77. package/package.json +3 -3
  78. package/rnw.js +1 -1
  79. package/src/components/carousel-component/CarouselComponent.stories.tsx +220 -0
  80. package/src/components/carousel-component/CarouselItem.tsx +25 -0
  81. package/src/components/carousel-component/DefaultNavigationArrow.tsx +37 -0
  82. package/src/components/carousel-component/DefaultPageDot.tsx +20 -0
  83. package/src/components/carousel-component/__tests__/CarouselComponent.test.tsx +259 -0
  84. package/src/components/carousel-component/__tests__/CarouselItem.test.tsx +140 -0
  85. package/src/components/carousel-component/__tests__/DefaultNavigationArrow.test.tsx +153 -0
  86. package/src/components/carousel-component/__tests__/DefaultPageDot.test.tsx +105 -0
  87. package/src/components/carousel-component/hooks/__tests__/useCarousel.test.ts +625 -0
  88. package/src/components/carousel-component/hooks/useCarousel.ts +231 -0
  89. package/src/components/carousel-component/index.tsx +92 -0
  90. package/src/components/carousel-component/styles.ts +185 -0
  91. package/src/components/carousel-component/types.ts +62 -0
  92. package/src/components/opta/football/opta-match-stats/commentary/__tests__/__snapshots__/OptaMatchStatsCommentary.test.tsx.snap +1 -1
  93. package/src/components/opta/football/opta-match-stats/shared/styles.ts +0 -8
  94. package/src/components/opta/football/opta-match-stats/stats-graphs/__tests__/__snapshots__/OptaMatchStatsGraphs.test.tsx.snap +1 -1
  95. package/src/components/trip-cards/SkeletonCard.tsx +62 -0
  96. package/src/components/trip-cards/TripCard.tsx +143 -0
  97. package/src/components/trip-cards/TripCards.stories.tsx +254 -0
  98. package/src/components/trip-cards/TripCardsLayout.tsx +108 -0
  99. package/src/components/trip-cards/__tests__/SkeletonCard.test.tsx +169 -0
  100. package/src/components/trip-cards/__tests__/TripCard.test.tsx +120 -0
  101. package/src/components/trip-cards/__tests__/TripCardsLayout.test.tsx +532 -0
  102. package/src/components/trip-cards/__tests__/assets.test.tsx +206 -0
  103. package/src/components/trip-cards/__tests__/helpers.test.ts +266 -0
  104. package/src/components/trip-cards/__tests__/index.test.tsx +495 -0
  105. package/src/components/trip-cards/__tests__/mockData.test.ts +67 -0
  106. package/src/components/trip-cards/__tests__/skeletonStyles.test.tsx +256 -0
  107. package/src/components/trip-cards/assets/BoatIcon.tsx +17 -0
  108. package/src/components/trip-cards/assets/CalendarIcon.tsx +17 -0
  109. package/src/components/trip-cards/assets/ChevronRightIcon.tsx +20 -0
  110. package/src/components/trip-cards/assets/LocationIcon.tsx +17 -0
  111. package/src/components/trip-cards/assets/MoonIcon.tsx +17 -0
  112. package/src/components/trip-cards/assets/index.ts +7 -0
  113. package/src/components/trip-cards/helpers.ts +150 -0
  114. package/src/components/trip-cards/index.tsx +119 -0
  115. package/src/components/trip-cards/mockData.ts +345 -0
  116. package/src/components/trip-cards/skeletonStyles.ts +46 -0
  117. package/src/components/trip-cards/styles.ts +446 -0
  118. package/src/components/trip-cards/types.ts +128 -0
  119. package/src/index.ts +2 -3
  120. package/dist/components/opta/football/opta-match-stats/matchday-live/DesktopWidget.d.ts +0 -10
  121. package/dist/components/opta/football/opta-match-stats/matchday-live/DesktopWidget.js +0 -69
  122. package/dist/components/opta/football/opta-match-stats/matchday-live/MobileWidget.d.ts +0 -12
  123. package/dist/components/opta/football/opta-match-stats/matchday-live/MobileWidget.js +0 -90
  124. package/dist/components/opta/football/opta-match-stats/matchday-live/OptaMatchStatsMatchdayLive.d.ts +0 -12
  125. package/dist/components/opta/football/opta-match-stats/matchday-live/OptaMatchStatsMatchdayLive.js +0 -10
  126. package/dist/components/opta/football/opta-match-stats/matchday-live/OptaMatchStatsMatchdayLive.stories.js +0 -24
  127. package/dist/components/opta/football/opta-match-stats/matchday-live/__tests__/OptaMatchStatsMatchdayLive.test.js +0 -48
  128. package/dist/components/opta/football/opta-match-stats/matchday-live/styles/MatchdayLiveController.d.ts +0 -1
  129. package/dist/components/opta/football/opta-match-stats/matchday-live/styles/MatchdayLiveController.js +0 -19
  130. package/dist/components/opta/football/opta-match-stats/matchday-live/styles/NavigationWrapper.d.ts +0 -12
  131. package/dist/components/opta/football/opta-match-stats/matchday-live/styles/NavigationWrapper.js +0 -67
  132. package/dist/components/opta/football/opta-match-stats/matchday-live/styles/WidgetContainer.d.ts +0 -6
  133. package/dist/components/opta/football/opta-match-stats/matchday-live/styles/WidgetContainer.js +0 -714
  134. package/src/components/opta/football/opta-match-stats/matchday-live/DesktopWidget.tsx +0 -108
  135. package/src/components/opta/football/opta-match-stats/matchday-live/MobileWidget.tsx +0 -158
  136. package/src/components/opta/football/opta-match-stats/matchday-live/OptaMatchStatsMatchdayLive.stories.tsx +0 -38
  137. package/src/components/opta/football/opta-match-stats/matchday-live/OptaMatchStatsMatchdayLive.tsx +0 -23
  138. package/src/components/opta/football/opta-match-stats/matchday-live/__tests__/OptaMatchStatsMatchdayLive.test.tsx +0 -61
  139. package/src/components/opta/football/opta-match-stats/matchday-live/__tests__/__snapshots__/OptaMatchStatsMatchdayLive.test.tsx.snap +0 -61
  140. package/src/components/opta/football/opta-match-stats/matchday-live/styles/MatchdayLiveController.tsx +0 -19
  141. package/src/components/opta/football/opta-match-stats/matchday-live/styles/NavigationWrapper.tsx +0 -81
  142. package/src/components/opta/football/opta-match-stats/matchday-live/styles/WidgetContainer.tsx +0 -745
  143. /package/dist/components/{opta/football/opta-match-stats/matchday-live/OptaMatchStatsMatchdayLive.stories.d.ts → carousel-component/CarouselComponent.stories.d.ts} +0 -0
@@ -0,0 +1,446 @@
1
+ import styled from 'styled-components';
2
+ import {
3
+ ContainerProps,
4
+ CurrentPriceProps,
5
+ ImageContainerProps
6
+ } from './types';
7
+
8
+ const breakpoints = {
9
+ sm: '390px',
10
+ md: '768px',
11
+ lg: '1024px',
12
+ xl: '1320px'
13
+ };
14
+
15
+ const colors = {
16
+ primary: '#005C8A', // interactivePrimary030
17
+ titleBlue: '#145683', // Title color
18
+ ink: '#333333', // inkBase
19
+ inkBrand: '#01000D', // inkBrand010 - active dot
20
+ secondary: '#696969', // Secondary text
21
+ border: '#E4E4E4', // Card border
22
+ offerBg: '#FFEECF', // Offer label background
23
+ offerBorder: '#FFB329', // Offer label left border
24
+ strikethrough: '#9F0000', // Slashed price color
25
+ dotActive: '#01000D', // inkBrand010
26
+ dotInactive: '#AAAAAA', // inkNonEssential
27
+ iconBlue: '#236FA3', // Data point icons
28
+ white: '#FFFFFF'
29
+ };
30
+
31
+ export const Container = styled.div<ContainerProps>`
32
+ max-width: var(
33
+ --wp--style--global--content-size,
34
+ ${props => props.mobile || '100%'}
35
+ );
36
+ margin: 0 auto;
37
+ padding: 80px 0 40px;
38
+
39
+ @media (min-width: ${breakpoints.md}) {
40
+ max-width: var(
41
+ --wp--style--global--content-size,
42
+ ${props => props.tablet || '100%'}
43
+ );
44
+ }
45
+
46
+ @media (min-width: ${breakpoints.lg}) {
47
+ max-width: var(
48
+ --wp--style--global--content-size,
49
+ ${props => props.desktop || '100%'}
50
+ );
51
+ }
52
+
53
+ @media (min-width: ${breakpoints.xl}) {
54
+ max-width: var(
55
+ --wp--style--global--content-size,
56
+ ${props => props.xl || '100%'}
57
+ );
58
+ }
59
+
60
+ @media (max-width: ${breakpoints.md}) {
61
+ padding: 40px 0 0 10px;
62
+ }
63
+ `;
64
+
65
+ export const TitleSection = styled.div`
66
+ padding: 0;
67
+ margin-bottom: 16px;
68
+ `;
69
+
70
+ export const TitleBar = styled.div`
71
+ display: flex;
72
+ flex-direction: row;
73
+ align-items: center;
74
+ gap: 12px;
75
+ border-top: 1px dashed ${colors.border};
76
+ border-bottom: 1px dashed ${colors.border};
77
+ padding: 20px 0px;
78
+
79
+ @media (max-width: ${breakpoints.md}) {
80
+ justify-content: space-between;
81
+ }
82
+ `;
83
+
84
+ export const TitleContent = styled.div`
85
+ display: flex;
86
+ flex-direction: row;
87
+ flex-wrap: wrap;
88
+ align-items: baseline;
89
+ gap: 8px;
90
+ `;
91
+
92
+ export const Title = styled.h2`
93
+ font-family: 'Times Modern', serif;
94
+ font-size: 24px;
95
+ font-weight: 800;
96
+ line-height: 1.13;
97
+ color: #145683;
98
+ margin: 0;
99
+ `;
100
+
101
+ export const Subtitle = styled.p`
102
+ font-family: 'Times Modern', serif;
103
+ font-size: 20px;
104
+ font-weight: 400;
105
+ line-height: 1.13;
106
+ color: #333333;
107
+ margin: 0;
108
+ vertical-align: bottom;
109
+ `;
110
+
111
+ export const TitleLink = styled.a`
112
+ display: inline-flex;
113
+ align-items: center;
114
+ justify-content: center;
115
+ width: 32px;
116
+ height: 32px;
117
+ padding: 8px;
118
+ background: #eeeeee;
119
+ border-radius: 33.33px;
120
+ text-decoration: none;
121
+ transition: background-color 0.2s ease;
122
+ flex-shrink: 0;
123
+
124
+ &:hover {
125
+ background: #dddddd;
126
+ }
127
+
128
+ svg {
129
+ width: 16px;
130
+ height: 16px;
131
+ color: ${colors.ink};
132
+ }
133
+ `;
134
+
135
+ export const Description = styled.p`
136
+ font-family: 'Roboto', sans-serif;
137
+ font-size: 16px;
138
+ line-height: 1.5;
139
+ color: ${colors.secondary};
140
+ margin: 0 0 20px 0;
141
+ `;
142
+
143
+ export const StaticCardsGrid = styled.div<{
144
+ $minWidthMobile?: string;
145
+ $minWidthTablet?: string;
146
+ $minWidthDesktop?: string;
147
+ $minWidthXl?: string;
148
+ }>`
149
+ display: flex;
150
+ gap: 20px;
151
+ padding: 0;
152
+ flex-wrap: nowrap;
153
+ overflow-x: auto;
154
+ scroll-snap-type: x mandatory;
155
+ scrollbar-width: none;
156
+ -ms-overflow-style: none;
157
+ scroll-behavior: smooth;
158
+ align-items: stretch;
159
+
160
+ &::-webkit-scrollbar {
161
+ display: none;
162
+ }
163
+
164
+ > * {
165
+ flex: 0 0 ${props => props.$minWidthMobile || '90%'};
166
+ min-width: ${props => props.$minWidthMobile || '280px'};
167
+ scroll-snap-align: start;
168
+ display: flex;
169
+ flex-direction: column;
170
+ }
171
+
172
+ @media (min-width: ${breakpoints.md}) {
173
+ overflow-x: visible;
174
+
175
+ > * {
176
+ flex: 1 1 0;
177
+ min-width: 0;
178
+ max-width: calc(50% - 10px);
179
+ }
180
+ }
181
+
182
+ @media (min-width: ${breakpoints.lg}) {
183
+ > * {
184
+ flex: 1 1 0;
185
+ min-width: 0;
186
+ max-width: ${props => props.$minWidthDesktop || 'calc(50% - 10px)'};
187
+ }
188
+ }
189
+
190
+ @media (min-width: ${breakpoints.xl}) {
191
+ > * {
192
+ flex: 1 1 0;
193
+ min-width: 0;
194
+ max-width: ${props => props.$minWidthXl || 'calc(50% - 10px)'};
195
+ }
196
+ }
197
+ `;
198
+
199
+ // Card Styles
200
+ export const CardContainer = styled.div`
201
+ flex: 1;
202
+ border: 1.2px solid ${colors.border};
203
+ background: ${colors.white};
204
+ overflow: hidden;
205
+ display: flex;
206
+ flex-direction: column;
207
+ `;
208
+
209
+ export const ImageContainer = styled.div<ImageContainerProps>`
210
+ position: relative;
211
+ width: auto;
212
+ aspect-ratio: 3 / 2;
213
+ height: ${({ isStaticGrid, $heightXs }) =>
214
+ !isStaticGrid && $heightXs ? $heightXs : '100%'};
215
+ overflow: hidden;
216
+ flex-shrink: 0;
217
+
218
+ ${({ isStaticGrid, $heightSm, $heightMd, $heightLg, $heightXl }) =>
219
+ !isStaticGrid &&
220
+ `
221
+
222
+ @media (min-width: ${breakpoints.sm}) {
223
+ ${$heightSm && `height: ${$heightSm};`}
224
+ }
225
+
226
+ @media (min-width: ${breakpoints.md}) {
227
+ ${$heightMd && `height: ${$heightMd};`}
228
+ }
229
+
230
+ @media (min-width: ${breakpoints.lg}) {
231
+ ${$heightLg && `height: ${$heightLg};`}
232
+ }
233
+
234
+ @media (min-width: ${breakpoints.xl}) {
235
+ ${$heightXl && `height: ${$heightXl};`}
236
+ }
237
+ `};
238
+ `;
239
+
240
+ export const CardImage = styled.img`
241
+ position: absolute;
242
+ top: 0;
243
+ left: 0;
244
+ width: 100%;
245
+ height: 100%;
246
+ object-fit: cover;
247
+ object-position: center;
248
+ `;
249
+
250
+ export const OfferLabel = styled.div`
251
+ position: absolute;
252
+ bottom: 12px;
253
+ left: 0;
254
+ background: ${colors.offerBg};
255
+ border-left: 1.2px solid ${colors.offerBorder};
256
+ padding: 12px 16px;
257
+ font-family: 'Roboto', sans-serif;
258
+ font-size: 14px;
259
+ font-weight: 400;
260
+ line-height: 1.5;
261
+ color: ${colors.ink};
262
+ `;
263
+
264
+ export const GiftBanner = styled.div`
265
+ position: absolute;
266
+ bottom: 12px;
267
+ left: 0;
268
+ max-width: 80%;
269
+ background: ${colors.offerBg};
270
+ padding: 12px 16px;
271
+ font-family: 'Roboto', sans-serif;
272
+ font-size: 14px;
273
+ font-weight: 400;
274
+ line-height: 1.5;
275
+ color: ${colors.ink};
276
+ text-align: left;
277
+ `;
278
+
279
+ export const CardContent = styled.div`
280
+ display: flex;
281
+ flex-direction: column;
282
+ flex: 1;
283
+ padding: 20px 16px 16px 16px;
284
+ gap: 32px;
285
+ `;
286
+
287
+ export const TopContainer = styled.div`
288
+ display: flex;
289
+ flex-direction: column;
290
+ gap: 16px;
291
+ flex: 1;
292
+ `;
293
+
294
+ export const BottomContainer = styled.div`
295
+ display: flex;
296
+ flex-direction: column;
297
+ gap: 16px;
298
+ `;
299
+
300
+ export const Headline = styled.h3`
301
+ font-family: 'Times Modern', serif;
302
+ font-size: 20px;
303
+ font-weight: 700;
304
+ line-height: 1.125;
305
+ color: ${colors.ink};
306
+ margin: 0;
307
+ `;
308
+
309
+ export const DataPointsList = styled.div`
310
+ display: flex;
311
+ flex-direction: column;
312
+ gap: 2px;
313
+ `;
314
+
315
+ export const DataPoint = styled.div`
316
+ display: flex;
317
+ align-items: center;
318
+ gap: 8px;
319
+ font-family: 'Roboto', sans-serif;
320
+ font-size: 14px;
321
+ line-height: 1.5;
322
+ color: ${colors.secondary};
323
+ min-height: 21px;
324
+ `;
325
+
326
+ export const DataIcon = styled.span`
327
+ width: 17px;
328
+ height: 17px;
329
+ display: flex;
330
+ align-items: center;
331
+ justify-content: center;
332
+ flex-shrink: 0;
333
+ color: ${colors.iconBlue};
334
+ font-size: 17px;
335
+ `;
336
+
337
+ export const PriceSection = styled.div`
338
+ display: flex;
339
+ flex-direction: row;
340
+ align-items: center;
341
+ gap: 12px;
342
+ `;
343
+
344
+ export const PriceContainer = styled.div`
345
+ display: flex;
346
+ flex-direction: column;
347
+ gap: 12px;
348
+ flex: 1;
349
+ `;
350
+
351
+ export const OfferContainer = styled.div`
352
+ display: flex;
353
+ align-items: center;
354
+ gap: 4px;
355
+ `;
356
+
357
+ export const PriceLabel = styled.span`
358
+ font-family: 'Roboto', sans-serif;
359
+ font-size: 14px;
360
+ line-height: 1.5;
361
+ color: ${colors.secondary};
362
+ `;
363
+
364
+ export const OriginalPrice = styled.span`
365
+ font-family: 'Roboto', sans-serif;
366
+ font-size: 14px;
367
+ font-weight: 500;
368
+ line-height: 1.5;
369
+ color: ${colors.strikethrough};
370
+ text-decoration: line-through;
371
+ `;
372
+
373
+ export const CurrentPrice = styled.span<CurrentPriceProps>`
374
+ font-family: 'Times Modern', serif;
375
+ font-size: ${props => (props.$isEnquire ? '24px' : '32px')};
376
+ font-weight: 300;
377
+ line-height: 1.125;
378
+ color: ${colors.ink};
379
+ `;
380
+
381
+ export const PriceSuffix = styled.span`
382
+ font-family: 'Times Modern', serif;
383
+ font-size: 24px;
384
+ font-weight: 300;
385
+ line-height: 1.125;
386
+ color: ${colors.ink};
387
+ `;
388
+
389
+ export const LogoContainer = styled.div`
390
+ width: 88px;
391
+ height: 44px;
392
+ display: flex;
393
+ align-items: center;
394
+
395
+ a {
396
+ display: flex;
397
+ align-items: center;
398
+ width: 100%;
399
+ height: 100%;
400
+ }
401
+
402
+ img {
403
+ max-width: 100%;
404
+ max-height: 100%;
405
+ object-fit: contain;
406
+ }
407
+ `;
408
+
409
+ export const CTAButton = styled.a`
410
+ display: flex;
411
+ align-items: center;
412
+ justify-content: center;
413
+ width: 100%;
414
+ padding: 12px 16px;
415
+ background: ${colors.primary};
416
+ color: ${colors.white};
417
+ font-family: 'Roboto', sans-serif;
418
+ font-size: 16px;
419
+ font-weight: 500;
420
+ line-height: 1.5;
421
+ text-decoration: none;
422
+ transition: background 0.2s ease;
423
+
424
+ &:hover {
425
+ background: #004a6e;
426
+ }
427
+ `;
428
+
429
+ // Navigation Arrow - positioned on sides of carousel
430
+ export const LoadingContainer = styled.div`
431
+ display: flex;
432
+ justify-content: center;
433
+ align-items: center;
434
+ min-height: 400px;
435
+ font-family: 'Roboto', sans-serif;
436
+ color: ${colors.secondary};
437
+ `;
438
+
439
+ export const ErrorContainer = styled.div`
440
+ display: flex;
441
+ justify-content: center;
442
+ align-items: center;
443
+ min-height: 200px;
444
+ font-family: 'Roboto', sans-serif;
445
+ color: ${colors.strikethrough};
446
+ `;
@@ -0,0 +1,128 @@
1
+ import { ComponentType } from 'react';
2
+
3
+ export interface ResponsiveConfig {
4
+ xs?: string;
5
+ mobile?: string;
6
+ tablet?: string;
7
+ desktop?: string;
8
+ xl?: string;
9
+ }
10
+
11
+ export type ResponsiveConfigNoXs = Omit<ResponsiveConfig, 'xs'>;
12
+
13
+ export interface ImageHeightConfig {
14
+ $heightXs?: string;
15
+ $heightSm?: string;
16
+ $heightMd?: string;
17
+ $heightLg?: string;
18
+ $heightXl?: string;
19
+ isStaticGrid?: boolean;
20
+ }
21
+
22
+ export interface TripCardsElement {
23
+ class?: string;
24
+ tripcards: string;
25
+ title?: string;
26
+ titleurl?: string;
27
+ description?: string;
28
+ }
29
+
30
+ export interface TripCardsProps {
31
+ element: TripCardsElement;
32
+ useMockData?: boolean;
33
+ widthContainerConfig?: ResponsiveConfig;
34
+ widthItemConfig?: ResponsiveConfig;
35
+ maxWidthItemConfig?: ResponsiveConfigNoXs;
36
+ imgHeight?: ImageHeightConfig;
37
+ forceStaticGrid?: boolean;
38
+ }
39
+
40
+ export interface DecodedTripCard {
41
+ cruise_id: string;
42
+ }
43
+
44
+ export interface TripCardApiData {
45
+ cruise_id: string;
46
+ image: string;
47
+ offer_label?: string;
48
+ gift_banner?: string;
49
+ headline: string;
50
+ date: string;
51
+ duration: string;
52
+ route: string;
53
+ ship: string;
54
+ original_price?: string;
55
+ price: string;
56
+ logo: string;
57
+ logo_url: string;
58
+ cta_url: string;
59
+ cta_text: string;
60
+ }
61
+
62
+ export interface TripCardProps {
63
+ card: TripCardApiData;
64
+ isStaticGrid?: boolean;
65
+ imgHeight?: Omit<ImageHeightConfig, '$heightXs'>;
66
+ }
67
+
68
+ export interface ApiCruiseResult {
69
+ post_id: number;
70
+ cruise_id: number;
71
+ cruise_title: string;
72
+ cruise_line: {
73
+ name: string;
74
+ link: string;
75
+ logo: string;
76
+ };
77
+ ship: {
78
+ name: string;
79
+ link: string;
80
+ image: string;
81
+ };
82
+ departs: string;
83
+ ends: string;
84
+ date_label: string;
85
+ destination: string[];
86
+ duration: number;
87
+ itinerary: string[];
88
+ prices: {
89
+ cheapest_price: number | string;
90
+ inside: string | number;
91
+ outside: string | number;
92
+ balcony: string | number;
93
+ suite: string | number;
94
+ };
95
+ was_prices: {
96
+ inside: number;
97
+ outside: number;
98
+ balcony: number;
99
+ suite: number;
100
+ };
101
+ link: string;
102
+ campaigns: string[];
103
+ extras: {
104
+ date: string;
105
+ duration: string;
106
+ destination: string;
107
+ info: string;
108
+ };
109
+ }
110
+ export interface TripCardsLayoutProps {
111
+ element: TripCardsElement;
112
+ items: Array<{ id: string | number; data?: TripCardApiData }>;
113
+ CardComponent: ComponentType<any>;
114
+ itemsPerPage: number;
115
+ widthContainerConfig?: ResponsiveConfig;
116
+ widthItemConfig?: ResponsiveConfig;
117
+ maxWidthItemConfig?: ResponsiveConfigNoXs;
118
+ imgHeight?: Omit<ImageHeightConfig, '$heightXs'>;
119
+ forceStaticGrid?: boolean;
120
+ }
121
+
122
+ export type ImageContainerProps = ImageHeightConfig;
123
+
124
+ export type ContainerProps = Partial<ResponsiveConfig>;
125
+
126
+ export interface CurrentPriceProps {
127
+ $isEnquire?: boolean;
128
+ }
package/src/index.ts CHANGED
@@ -104,6 +104,8 @@ export {
104
104
  default as ArticleHeader
105
105
  } from './components/article-header/ArticleHeader';
106
106
 
107
+ export { TripCards } from './components/trip-cards';
108
+
107
109
  export {
108
110
  UpdatedTimestamp
109
111
  } from './components/updated-timestamp/UpdatedTimestamp';
@@ -152,6 +154,3 @@ export {
152
154
  export {
153
155
  OptaMatchStatsCommentary
154
156
  } from './components/opta/football/opta-match-stats/commentary/OptaMatchStatsCommentary';
155
- // export {
156
- // OptaMatchStatsMatchdayLive
157
- // } from './components/opta/football/opta-match-stats/matchday-live/OptaMatchStatsMatchdayLive';
@@ -1,10 +0,0 @@
1
- import React from 'react';
2
- import { TeamColor } from '../shared/types';
3
- export declare const DesktopWidget: React.FC<{
4
- season: string;
5
- competition: string;
6
- match: string;
7
- isApp?: boolean;
8
- homeTeamColor?: TeamColor;
9
- awayTeamColor?: TeamColor;
10
- }>;
@@ -1,69 +0,0 @@
1
- import React, { useState, useEffect } from 'react';
2
- import { Placeholder } from '@times-components/image';
3
- import { initSettings, initStyleSheet, initScript, initElement, initComponent } from '../../../utils/config';
4
- import { PlaceholderContainer } from '../../../shared/shared-styles';
5
- import { WidgetContainer } from './styles/WidgetContainer';
6
- import { WidgetWrapper } from '../shared/styles';
7
- export const DesktopWidget = React.memo(({ season, competition, match, isApp = false, homeTeamColor = { light: '#000000', dark: '#a19c9cff' }, awayTeamColor = { light: '#007A3F', dark: '#007A3F' } }) => {
8
- const ref = React.createRef();
9
- const [isReady, setIsReady] = useState(false);
10
- useEffect(() => {
11
- const sport = 'football';
12
- initSettings();
13
- initStyleSheet(sport);
14
- initScript()
15
- .then(() => {
16
- if (ref.current) {
17
- ref.current.innerHTML = initElement('opta-widget', {
18
- sport,
19
- widget: 'matchday_live',
20
- season,
21
- competition,
22
- match,
23
- template: 'normal',
24
- live: true,
25
- orientation: 'horizontal',
26
- side: 'both',
27
- show_match_header: true,
28
- show_crests: true,
29
- show_pitch_crests: false,
30
- show_team_formation: true,
31
- show_score: false,
32
- show_halftime_score: false,
33
- show_competition_name: false,
34
- show_date: false,
35
- date_format: 'dddd D MMMM YYYY',
36
- narrow_date_format: 'DD/MM/YY',
37
- show_referee: true,
38
- show_venue: true,
39
- show_attendance: true,
40
- show_images: false,
41
- show_pitch_images: false,
42
- show_team_sheets: false,
43
- show_event_icons: true,
44
- show_player_names: true,
45
- show_player_stats: true,
46
- show_subs: 'all',
47
- competition_naming: 'brief',
48
- team_naming: 'full',
49
- player_naming: 'last_name',
50
- show_live: false,
51
- show_logo: false,
52
- show_title: false,
53
- breakpoints: '400, 700'
54
- }).outerHTML;
55
- initComponent();
56
- }
57
- })
58
- .then(() => {
59
- setIsReady(true);
60
- });
61
- }, []);
62
- return (React.createElement(React.Fragment, null,
63
- React.createElement(WidgetWrapper, { isApp: isApp, className: "matchday-live-widget-desktop" },
64
- React.createElement("h3", null, "Line-ups"),
65
- React.createElement(WidgetContainer, { ref: ref, isApp: isApp, homeTeamColor: homeTeamColor, awayTeamColor: awayTeamColor })),
66
- !isReady && (React.createElement(PlaceholderContainer, { "data-testid": "placeholder" },
67
- React.createElement(Placeholder, null)))));
68
- });
69
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRGVza3RvcFdpZGdldC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL29wdGEvZm9vdGJhbGwvb3B0YS1tYXRjaC1zdGF0cy9tYXRjaGRheS1saXZlL0Rlc2t0b3BXaWRnZXQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxFQUFFLEVBQUUsUUFBUSxFQUFFLFNBQVMsRUFBRSxNQUFNLE9BQU8sQ0FBQztBQUNuRCxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDdEQsT0FBTyxFQUNMLFlBQVksRUFDWixjQUFjLEVBQ2QsVUFBVSxFQUNWLFdBQVcsRUFDWCxhQUFhLEVBQ2QsTUFBTSx1QkFBdUIsQ0FBQztBQUMvQixPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUNyRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDM0QsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBR2pELE1BQU0sQ0FBQyxNQUFNLGFBQWEsR0FPckIsS0FBSyxDQUFDLElBQUksQ0FDYixDQUFDLEVBQ0MsTUFBTSxFQUNOLFdBQVcsRUFDWCxLQUFLLEVBQ0wsS0FBSyxHQUFHLEtBQUssRUFDYixhQUFhLEdBQUcsRUFBRSxLQUFLLEVBQUUsU0FBUyxFQUFFLElBQUksRUFBRSxXQUFXLEVBQUUsRUFDdkQsYUFBYSxHQUFHLEVBQUUsS0FBSyxFQUFFLFNBQVMsRUFBRSxJQUFJLEVBQUUsU0FBUyxFQUFFLEVBQ3RELEVBQUUsRUFBRTtJQUNILE1BQU0sR0FBRyxHQUFHLEtBQUssQ0FBQyxTQUFTLEVBQWtCLENBQUM7SUFDOUMsTUFBTSxDQUFDLE9BQU8sRUFBRSxVQUFVLENBQUMsR0FBRyxRQUFRLENBQVUsS0FBSyxDQUFDLENBQUM7SUFFdkQsU0FBUyxDQUFDLEdBQUcsRUFBRTtRQUNiLE1BQU0sS0FBSyxHQUFHLFVBQVUsQ0FBQztRQUV6QixZQUFZLEVBQUUsQ0FBQztRQUNmLGNBQWMsQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUN0QixVQUFVLEVBQUU7YUFDVCxJQUFJLENBQUMsR0FBRyxFQUFFO1lBQ1QsSUFBSSxHQUFHLENBQUMsT0FBTyxFQUFFO2dCQUNmLEdBQUcsQ0FBQyxPQUFPLENBQUMsU0FBUyxHQUFHLFdBQVcsQ0FBQyxhQUFhLEVBQUU7b0JBQ2pELEtBQUs7b0JBQ0wsTUFBTSxFQUFFLGVBQWU7b0JBQ3ZCLE1BQU07b0JBQ04sV0FBVztvQkFDWCxLQUFLO29CQUNMLFFBQVEsRUFBRSxRQUFRO29CQUNsQixJQUFJLEVBQUUsSUFBSTtvQkFDVixXQUFXLEVBQUUsWUFBWTtvQkFDekIsSUFBSSxFQUFFLE1BQU07b0JBQ1osaUJBQWlCLEVBQUUsSUFBSTtvQkFDdkIsV0FBVyxFQUFFLElBQUk7b0JBQ2pCLGlCQUFpQixFQUFFLEtBQUs7b0JBQ3hCLG1CQUFtQixFQUFFLElBQUk7b0JBQ3pCLFVBQVUsRUFBRSxLQUFLO29CQUNqQixtQkFBbUIsRUFBRSxLQUFLO29CQUMxQixxQkFBcUIsRUFBRSxLQUFLO29CQUM1QixTQUFTLEVBQUUsS0FBSztvQkFDaEIsV0FBVyxFQUFFLGtCQUFrQjtvQkFDL0Isa0JBQWtCLEVBQUUsVUFBVTtvQkFDOUIsWUFBWSxFQUFFLElBQUk7b0JBQ2xCLFVBQVUsRUFBRSxJQUFJO29CQUNoQixlQUFlLEVBQUUsSUFBSTtvQkFDckIsV0FBVyxFQUFFLEtBQUs7b0JBQ2xCLGlCQUFpQixFQUFFLEtBQUs7b0JBQ3hCLGdCQUFnQixFQUFFLEtBQUs7b0JBQ3ZCLGdCQUFnQixFQUFFLElBQUk7b0JBQ3RCLGlCQUFpQixFQUFFLElBQUk7b0JBQ3ZCLGlCQUFpQixFQUFFLElBQUk7b0JBQ3ZCLFNBQVMsRUFBRSxLQUFLO29CQUNoQixrQkFBa0IsRUFBRSxPQUFPO29CQUMzQixXQUFXLEVBQUUsTUFBTTtvQkFDbkIsYUFBYSxFQUFFLFdBQVc7b0JBQzFCLFNBQVMsRUFBRSxLQUFLO29CQUNoQixTQUFTLEVBQUUsS0FBSztvQkFDaEIsVUFBVSxFQUFFLEtBQUs7b0JBQ2pCLFdBQVcsRUFBRSxVQUFVO2lCQUN4QixDQUFDLENBQUMsU0FBUyxDQUFDO2dCQUViLGFBQWEsRUFBRSxDQUFDO2FBQ2pCO1FBQ0gsQ0FBQyxDQUFDO2FBQ0QsSUFBSSxDQUFDLEdBQUcsRUFBRTtZQUNULFVBQVUsQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUNuQixDQUFDLENBQUMsQ0FBQztJQUNQLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQztJQUVQLE9BQU8sQ0FDTDtRQUNFLG9CQUFDLGFBQWEsSUFBQyxLQUFLLEVBQUUsS0FBSyxFQUFFLFNBQVMsRUFBQyw4QkFBOEI7WUFDbkUsMkNBQWlCO1lBQ2pCLG9CQUFDLGVBQWUsSUFDZCxHQUFHLEVBQUUsR0FBRyxFQUNSLEtBQUssRUFBRSxLQUFLLEVBQ1osYUFBYSxFQUFFLGFBQWEsRUFDNUIsYUFBYSxFQUFFLGFBQWEsR0FDNUIsQ0FDWTtRQUNmLENBQUMsT0FBTyxJQUFJLENBQ1gsb0JBQUMsb0JBQW9CLG1CQUFhLGFBQWE7WUFDN0Msb0JBQUMsV0FBVyxPQUFHLENBQ00sQ0FDeEIsQ0FDQSxDQUNKLENBQUM7QUFDSixDQUFDLENBQ0YsQ0FBQyJ9
@@ -1,12 +0,0 @@
1
- import React from 'react';
2
- import { TeamColor } from '../shared/types';
3
- export declare const MobileWidget: React.FC<{
4
- season: string;
5
- competition: string;
6
- match: string;
7
- isApp?: boolean;
8
- homeTeamColor?: TeamColor;
9
- awayTeamColor?: TeamColor;
10
- homeTeamName: string;
11
- awayTeamName: string;
12
- }>;