mautourco-components 0.2.15 → 0.2.16

package/dist/components/molecules/TimelineItem/TimelineItem.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import './TimelineItem.css';
+export interface TimelineItemProps {
+    children: React.ReactNode;
+}
+declare function TimelineItem(props: TimelineItemProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TimelineItem {
+    var Transfer: import("react").FC<import("./ServiceTransfer").ServiceTransferProps>;
+    var Accommodation: import("react").FC<import("./ServiceAccommodation").ServiceAccommodationProps>;
+    var Excursion: import("react").FC<import("./ServiceExcursion").ServiceExcursionProps>;
+}
+export default TimelineItem;

package/dist/components/molecules/TimelineItem/TimelineItem.js

@@ -0,0 +1,23 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ServiceAccommodation } from './ServiceAccommodation';
+import { ServiceExcursion } from './ServiceExcursion';
+import { ServiceTransfer } from './ServiceTransfer';
+import './TimelineItem.css';
+export default function TimelineItem(props) {
+    var children = props.children;
+    return _jsx("div", __assign({ className: "timeline-item" }, { children: children }));
+}
+TimelineItem.Transfer = ServiceTransfer;
+TimelineItem.Accommodation = ServiceAccommodation;
+TimelineItem.Excursion = ServiceExcursion;

package/dist/components/organisms/Timeline/Timeline.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ServiceAccommodationProps } from '../../molecules/TimelineItem/ServiceAccommodation';
+import { ServiceExcursionProps } from '../../molecules/TimelineItem/ServiceExcursion';
+import { ServiceTransferProps } from '../../molecules/TimelineItem/ServiceTransfer';
+export interface TimelineServices {
+    type: 'transfer' | 'accommodation' | 'excursion';
+    data: ServiceTransferProps | ServiceAccommodationProps | ServiceExcursionProps;
+}
+export interface TimelineProps {
+    arrival: string;
+    departure: string;
+    services: TimelineServices[];
+}
+export declare const Timeline: React.FC<TimelineProps>;

package/dist/components/organisms/Timeline/Timeline.js

@@ -0,0 +1,19 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from '../../atoms/Typography/Typography';
+import TextWithIcon from '../../molecules/TextWithIcon/TextWithIcon';
+import TimelineItem from '../../molecules/TimelineItem/TimelineItem';
+export var Timeline = function (props) {
+    var arrival = props.arrival, departure = props.departure, services = props.services;
+    return (_jsxs("div", __assign({ className: "space-y-10" }, { children: [_jsxs(TextWithIcon, __assign({ icon: "arrival", color: "accent", iconSize: "lg" }, { children: ["Arrival :", ' ', _jsx(Text, __assign({ variant: "regular", size: "lg", leading: "5", color: "default", as: "span" }, { children: arrival }))] })), _jsx("div", __assign({ className: "overflow-x-auto" }, { children: _jsx("div", __assign({ className: "flex gap-x-3 pb-8 2xl:pb-0" }, { children: services.map(function (service, index) { return (_jsxs(TimelineItem, { children: [service.type === 'transfer' && (_jsx(TimelineItem.Transfer, __assign({}, service.data))), service.type === 'accommodation' && (_jsx(TimelineItem.Accommodation, __assign({}, service.data))), service.type === 'excursion' && (_jsx(TimelineItem.Excursion, __assign({}, service.data)))] }, "tm-".concat(index))); }) })) })), _jsxs(TextWithIcon, __assign({ icon: "departure", color: "accent", iconSize: "lg" }, { children: ["Departure :", ' ', _jsx(Text, __assign({ variant: "regular", size: "lg", leading: "5", color: "default", as: "span" }, { children: departure }))] }))] })));
+};

package/dist/index.d.ts

@@ -26,6 +26,7 @@ export { default as SectionTitle } from './components/molecules/SectionTitle/Sec
 export { default as ServiceSelector } from './components/molecules/ServiceSelector/ServiceSelector';
 export { default as Stepper } from './components/molecules/Stepper/Stepper';
 export { default as TextWithIcon } from './components/molecules/TextWithIcon/TextWithIcon';
+export { default as TimelineItem } from './components/molecules/TimelineItem/TimelineItem';
 export { Illustration } from './components/atoms/Illustration/Illustration';
 export { default as TableServiceItem } from './components/molecules/TableServiceItem';
 export { default as CarBookingCard } from './components/organisms/CarBookingCard/CarBookingCard';
@@ -39,6 +40,7 @@ export { QuoteHeader } from './components/organisms/QuoteHeader/QuoteHeader';
 export { default as RoundTrip } from './components/organisms/RoundTrip/RoundTrip';
 export { default as SearchBarTransfer } from './components/organisms/SearchBarTransfer/SearchBarTransfer';
 export * from './components/organisms/Table';
+export { Timeline } from './components/organisms/Timeline/Timeline';
 export { TopNavigation } from './components/organisms/TopNavigation/TopNavigation';
 export { default as TransferLine } from './components/organisms/TransferLine/TransferLine';
 export { default as ButtonSpinner } from './components/atoms/Spinner/variants/ButtonSpinner';
@@ -71,5 +73,10 @@ export type { TransferLineData, TransferLineProps, TransferType, } from './compo
 export type { FromToProps } from './components/molecules/FromTo/FromTo';
 export type { SectionTitleProps } from './components/molecules/SectionTitle/SectionTitle';
 export type { DetailsColProps, ItemColProps, RowAccommodationProps, RowExcursionProps, RowTransferProps, } from './components/molecules/TableServiceItem';
+export type { ServiceAccommodationProps } from './components/molecules/TimelineItem/ServiceAccommodation';
+export type { ServiceExcursionProps } from './components/molecules/TimelineItem/ServiceExcursion';
+export type { ServiceTransferProps } from './components/molecules/TimelineItem/ServiceTransfer';
+export type { TimelineHeaderProps } from './components/molecules/TimelineItem/TimelineHeader';
 export type { QuoteHeaderProps } from './components/organisms/QuoteHeader/QuoteHeader';
+export type { TimelineProps, TimelineServices, } from './components/organisms/Timeline/Timeline';
 export * from './types/table';

package/dist/index.js

@@ -28,6 +28,7 @@ export { default as SectionTitle } from './components/molecules/SectionTitle/Sec
 export { default as ServiceSelector } from './components/molecules/ServiceSelector/ServiceSelector';
 export { default as Stepper } from './components/molecules/Stepper/Stepper';
 export { default as TextWithIcon } from './components/molecules/TextWithIcon/TextWithIcon';
+export { default as TimelineItem } from './components/molecules/TimelineItem/TimelineItem';
 // Organisms - Complex components
 export { Illustration } from './components/atoms/Illustration/Illustration';
 export { default as TableServiceItem } from './components/molecules/TableServiceItem';
@@ -42,6 +43,7 @@ export { QuoteHeader } from './components/organisms/QuoteHeader/QuoteHeader';
 export { default as RoundTrip } from './components/organisms/RoundTrip/RoundTrip';
 export { default as SearchBarTransfer } from './components/organisms/SearchBarTransfer/SearchBarTransfer';
 export * from './components/organisms/Table';
+export { Timeline } from './components/organisms/Timeline/Timeline';
 export { TopNavigation } from './components/organisms/TopNavigation/TopNavigation';
 export { default as TransferLine } from './components/organisms/TransferLine/TransferLine';
 // Spinner Variants

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mautourco-components",
-  "version": "0.2.15",
+  "version": "0.2.16",
   "private": false,
   "description": "Bibliothèque de composants Motorco pour le redesign",
   "main": "dist/index.js",

package/src/components/atoms/Icon/icons/BusIcon.tsx

@@ -33,11 +33,15 @@ const BusIcon: React.FC<BusIconProps> = ({ size = 'md', className = '', color })
   const classes = `${sizeClasses} ${colorClass} ${className}`;
 
   return (
-    <svg className={classes} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg
+      className={classes}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
       <g clip-path="url(#clip0_7033_40084)">
         <path
           d="M12.5821 8.08301H3.41512V11.333C3.41512 11.6552 3.67694 11.917 3.99911 11.917H11.9991C12.3211 11.9168 12.5821 11.6551 12.5821 11.333V8.08301ZM5.33895 9.25L5.41512 9.25391C5.79348 9.29216 6.08895 9.61156 6.08895 10C6.08895 10.3884 5.79348 10.7078 5.41512 10.7461L5.33895 10.75H5.33211C4.9179 10.75 4.58211 10.4142 4.58211 10C4.58211 9.58579 4.9179 9.25 5.33211 9.25H5.33895ZM10.672 9.25C11.0862 9.25 11.422 9.58579 11.422 10C11.422 10.4142 11.0862 10.75 10.672 10.75H10.6651C10.2511 10.7498 9.91512 10.4141 9.91512 10C9.91512 9.5859 10.2511 9.25018 10.6651 9.25H10.672ZM3.99911 2.75C3.67705 2.75 3.4153 3.01099 3.41512 3.33301V6.58301H12.5821V3.33301C12.5819 3.0111 12.321 2.75018 11.9991 2.75H3.99911ZM9.33211 3.25C9.74633 3.25 10.0821 3.58579 10.0821 4C10.0821 4.41421 9.74633 4.75 9.33211 4.75H6.66512C6.25106 4.74982 5.91512 4.41411 5.91512 4C5.91512 3.58589 6.25106 3.25018 6.66512 3.25H9.33211ZM14.0821 11.333C14.0821 12.2187 13.5284 12.973 12.7491 13.2744V14C12.7491 14.4141 12.4132 14.7498 11.9991 14.75C11.5849 14.75 11.2491 14.4142 11.2491 14V13.417H4.74911V14C4.74911 14.4141 4.41317 14.7498 3.99911 14.75C3.58489 14.75 3.24911 14.4142 3.24911 14V13.2754C2.46934 12.9742 1.91512 12.219 1.91512 11.333V5.21387L1.66708 5.33789C1.29669 5.52273 0.846371 5.37226 0.661216 5.00195C0.476074 4.63149 0.626713 4.18131 0.997153 3.99609L1.91512 3.53613V3.33301C1.9153 2.18256 2.84862 1.25 3.99911 1.25H11.9991C13.1494 1.25018 14.0819 2.18267 14.0821 3.33301V3.53613L15.0011 3.99609C15.3714 4.18142 15.5212 4.63156 15.336 5.00195C15.1508 5.37235 14.7006 5.52293 14.3302 5.33789L14.0821 5.21289V11.333Z"
-          fill="#303642"
+          fill="currentColor"
         />
       </g>
       <defs>

package/src/components/molecules/Breadcrumbs/Breadcrumbs.css

@@ -0,0 +1,10 @@
+.breadcrumbs {
+  @apply flex items-center gap-x-2;
+  li {
+    @apply flex items-center gap-x-2;
+  }
+  li:not(:first-child) {
+    @apply pl-2;
+    border-left: solid 1px var(--divider-color-default);
+  }
+}

package/src/components/molecules/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,47 @@
+import { cn } from '@/src/lib/utils';
+import React from 'react';
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+import './Breadcrumbs.css';
+
+export interface BreadcrumbsItem {
+  label: string;
+  onClick: () => void;
+}
+
+export interface BreadcrumbsProps {
+  items: BreadcrumbsItem[];
+  onBack: () => void;
+}
+
+export const Breadcrumbs: React.FC<BreadcrumbsProps> = (props) => {
+  const { items, onBack } = props;
+
+  return (
+    <ol className="breadcrumbs">
+      <Text
+        variant="medium"
+        size="sm"
+        leading="4"
+        as="li"
+        className="cursor-pointer"
+        onClick={onBack}>
+        <Icon name="chevron-left" size="sm" />
+        Back
+      </Text>
+      {items.map((item, index) => (
+        <Text
+          key={`bc-${index}`}
+          as="li"
+          variant="medium"
+          size="sm"
+          onClick={item.onClick}
+          color={index === items.length - 1 ? 'accent' : 'default'}
+          leading="4"
+          className={cn(index < items.length - 1 && 'cursor-pointer')}>
+          {item.label}
+        </Text>
+      ))}
+    </ol>
+  );
+};

package/src/components/molecules/TableServiceItem/DetailsCol.tsx

@@ -1,8 +1,9 @@
+import { cn } from '@/src/lib/utils';
 import React from 'react';
 import { IconName } from '../../atoms/Icon/Icon';
 import TextWithIcon from '../TextWithIcon/TextWithIcon';
 
-interface DetailsColData {
+export interface DetailsColData {
   icon: IconName;
   value: React.ReactNode;
 }
@@ -10,15 +11,18 @@ interface DetailsColData {
 export interface DetailsColProps {
   data: DetailsColData[];
   index?: number;
+  className?: string;
 }
 
 export const DetailsCol: React.FC<DetailsColProps> = (props) => {
-  const { data } = props;
+  const { data, className } = props;
 
   return (
-    <div className="grid gap-y-1">
-      {data.map((item) => (
-        <TextWithIcon icon={item.icon}>{item.value}</TextWithIcon>
+    <div className={cn('grid gap-y-1', className)}>
+      {data.map((item, index) => (
+        <TextWithIcon icon={item.icon} key={`dc-${index}`}>
+          {item.value}
+        </TextWithIcon>
       ))}
     </div>
   );

package/src/components/molecules/TextWithIcon/TextWithIcon.tsx

@@ -1,6 +1,11 @@
 import { cn } from '@/src/lib/utils';
 import Icon, { IconName } from '../../atoms/Icon/Icon';
-import { Text, TextColor, TextLeading, TextVariant } from '../../atoms/Typography/Typography';
+import {
+  Text,
+  TextColor,
+  TextLeading,
+  TextVariant,
+} from '../../atoms/Typography/Typography';
 
 export interface TextWithIconProps {
   /** Icon to display */
@@ -34,7 +39,14 @@ export interface TextWithIconProps {
  * @returns
  */
 const TextWithIcon: React.FC<TextWithIconProps> = (props) => {
-  const { icon, children, iconSize = 'sm', color = 'default', textLeading = '5', textVariant = 'medium' } = props;
+  const {
+    icon,
+    children,
+    iconSize = 'sm',
+    color = 'default',
+    textLeading = '5',
+    textVariant = 'medium',
+  } = props;
 
   return (
     <div
@@ -43,9 +55,11 @@ const TextWithIcon: React.FC<TextWithIconProps> = (props) => {
         color === 'yellow' && 'text-[var(--color-yellow-600)]',
         color === 'accent' && 'text-[var(--color-text-accent)]'
       )}>
-      <span>
-        <Icon name={icon} size={iconSize} />
-      </span>
+      {icon && (
+        <span>
+          <Icon name={icon} size={iconSize} />
+        </span>
+      )}
       <Text
         variant={textVariant}
         size={iconSize}

package/src/components/molecules/TimelineItem/ServiceAccommodation.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Text } from '../../atoms/Typography/Typography';
+import { DateDisplay } from '../DateDisplay/DateDisplay';
+import { DetailsCol, DetailsColData } from '../TableServiceItem/DetailsCol';
+import { TimelineHeader } from './TimelineHeader';
+
+export interface ServiceAccommodationProps {
+  hotelName: string;
+  details: DetailsColData[];
+  dates: string[] | Date[];
+  isOnRequest?: boolean;
+}
+
+export const ServiceAccommodation: React.FC<ServiceAccommodationProps> = (props) => {
+  const { hotelName, details, dates, isOnRequest } = props;
+
+  return (
+    <div className="space-y-3">
+      <TimelineHeader icon="accom" title="Accomodation" isOnRequest={isOnRequest} />
+      <Text variant="bold" size="sm" leading="5">
+        {hotelName}
+      </Text>
+      <div className="space-y-2">
+        <DateDisplay date={dates} />
+        <DetailsCol data={details} className="gap-y-2" />
+      </div>
+    </div>
+  );
+};

package/src/components/molecules/TimelineItem/ServiceExcursion.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Text } from '../../atoms/Typography/Typography';
+import { DateDisplay } from '../DateDisplay/DateDisplay';
+import { DetailsCol, DetailsColData } from '../TableServiceItem/DetailsCol';
+import { TimelineHeader } from './TimelineHeader';
+
+export interface ServiceExcursionProps {
+  name: string;
+  details: DetailsColData[];
+  date: string;
+}
+
+export const ServiceExcursion: React.FC<ServiceExcursionProps> = (props) => {
+  const { name, details, date } = props;
+
+  return (
+    <div className="space-y-3">
+      <TimelineHeader icon="map" title="Excursion" />
+      <Text variant="bold" size="sm" leading="5">
+        {name}
+      </Text>
+      <div className="space-y-2">
+        <DateDisplay date={[date]} />
+        <DetailsCol data={details} className="gap-y-2" />
+      </div>
+    </div>
+  );
+};

package/src/components/molecules/TimelineItem/ServiceTransfer.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import FromTo from '../FromTo/FromTo';
+import { DetailsCol, DetailsColData } from '../TableServiceItem/DetailsCol';
+import { TimelineHeader } from './TimelineHeader';
+
+export interface ServiceTransferProps {
+  transferType: string;
+  location: {
+    from: string;
+    to: string;
+  };
+  details: DetailsColData[];
+}
+
+export const ServiceTransfer: React.FC<ServiceTransferProps> = (props) => {
+  const { transferType, location, details } = props;
+
+  return (
+    <div className="space-y-3">
+      <TimelineHeader icon="car" title="Transfer" extraText={transferType} />
+      <FromTo from={location.from} to={location.to} />
+      <DetailsCol data={details} className="gap-y-2" />
+    </div>
+  );
+};

package/src/components/molecules/TimelineItem/TimelineHeader.css

@@ -0,0 +1,44 @@
+.timeline-header {
+  @apply space-y-2;
+  min-width: 307px;
+
+  &.timeline-header--request {
+    .timeline-header__icon-container::after {
+      content: '';
+      @apply absolute top-1/2 left-10 -translate-y-1/2;
+      height: 1px;
+      background-color: transparent;
+      background-image: repeating-linear-gradient(
+        to right,
+        var(--color-yellow-600) 0,
+        var(--color-yellow-600) 8px,
+        transparent 8px,
+        transparent 16px
+      );
+    }
+    .timeline-header__icon {
+      border-color: var(--color-yellow-600);
+      color: var(--color-yellow-600);
+      background-color: var(--color-yellow-50);
+    }
+  }
+}
+
+.timeline-header__icon-container {
+  @apply flex items-center relative;
+  &::after {
+    content: '';
+    @apply absolute top-1/2 left-10 right-0 -translate-y-1/2;
+    height: 1px;
+    background-color: var(--color-border-accent-secondary);
+  }
+}
+
+.timeline-header__icon {
+  @apply flex items-center justify-center;
+  @apply w-8 h-8 shrink-0 grow-0 basis-8;
+  @apply rounded-full;
+  border: solid 1px var(--color-border-accent-secondary);
+  color: var(--color-border-accent-secondary);
+  background-color: var(--color-atoll-green-100);
+}

package/src/components/molecules/TimelineItem/TimelineHeader.tsx

@@ -0,0 +1,41 @@
+import { cn } from '@/src/lib/utils';
+import React from 'react';
+import Chip from '../../atoms/Chip/Chip';
+import Icon, { IconName } from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+import './TimelineHeader.css';
+
+export interface TimelineHeaderProps {
+  icon: IconName;
+  title: string;
+  extraText?: string;
+  isOnRequest?: boolean;
+}
+
+export const TimelineHeader: React.FC<TimelineHeaderProps> = (props) => {
+  const { icon = 'car', title, extraText, isOnRequest = false } = props;
+  return (
+    <div className={cn('timeline-header', isOnRequest && 'timeline-header--request')}>
+      <div className="timeline-header__icon-container">
+        <div className="timeline-header__icon">
+          <Icon name={icon} />
+        </div>
+      </div>
+      <div className="flex gap-x-2 items-center">
+        <Text
+          variant="bold"
+          size="md"
+          color={isOnRequest ? 'yellow' : 'accent'}
+          leading="5">
+          {title}
+        </Text>
+        {extraText && (
+          <Text variant="medium" size="md" color="accent" className="italic" leading="5">
+            {extraText}
+          </Text>
+        )}
+        {isOnRequest && <Chip color="yellow">On request</Chip>}
+      </div>
+    </div>
+  );
+};

package/src/components/molecules/TimelineItem/TimelineItem.css

@@ -0,0 +1,7 @@
+.timeline-item {
+  &:last-child {
+    .timeline-header__icon-container::after {
+      display: none;
+    }
+  }
+}

package/src/components/molecules/TimelineItem/TimelineItem.tsx

@@ -0,0 +1,17 @@
+import { ServiceAccommodation } from './ServiceAccommodation';
+import { ServiceExcursion } from './ServiceExcursion';
+import { ServiceTransfer } from './ServiceTransfer';
+import './TimelineItem.css';
+
+export interface TimelineItemProps {
+  children: React.ReactNode;
+}
+
+export default function TimelineItem(props: TimelineItemProps) {
+  const { children } = props;
+  return <div className="timeline-item">{children}</div>;
+}
+
+TimelineItem.Transfer = ServiceTransfer;
+TimelineItem.Accommodation = ServiceAccommodation;
+TimelineItem.Excursion = ServiceExcursion;

package/src/components/organisms/Timeline/Timeline.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Text } from '../../atoms/Typography/Typography';
+import TextWithIcon from '../../molecules/TextWithIcon/TextWithIcon';
+import { ServiceAccommodationProps } from '../../molecules/TimelineItem/ServiceAccommodation';
+import { ServiceExcursionProps } from '../../molecules/TimelineItem/ServiceExcursion';
+import { ServiceTransferProps } from '../../molecules/TimelineItem/ServiceTransfer';
+import TimelineItem from '../../molecules/TimelineItem/TimelineItem';
+
+export interface TimelineServices {
+  type: 'transfer' | 'accommodation' | 'excursion';
+  data: ServiceTransferProps | ServiceAccommodationProps | ServiceExcursionProps;
+}
+
+export interface TimelineProps {
+  arrival: string;
+  departure: string;
+  services: TimelineServices[];
+}
+
+export const Timeline: React.FC<TimelineProps> = (props) => {
+  const { arrival, departure, services } = props;
+  return (
+    <div className="space-y-10">
+      <TextWithIcon icon="arrival" color="accent" iconSize="lg">
+        Arrival :{' '}
+        <Text variant="regular" size="lg" leading="5" color="default" as="span">
+          {arrival}
+        </Text>
+      </TextWithIcon>
+      <div className="overflow-x-auto">
+        <div className="flex gap-x-3 pb-8 2xl:pb-0">
+          {services.map((service, index) => (
+            <TimelineItem key={`tm-${index}`}>
+              {service.type === 'transfer' && (
+                <TimelineItem.Transfer {...(service.data as ServiceTransferProps)} />
+              )}
+              {service.type === 'accommodation' && (
+                <TimelineItem.Accommodation
+                  {...(service.data as ServiceAccommodationProps)}
+                />
+              )}
+              {service.type === 'excursion' && (
+                <TimelineItem.Excursion {...(service.data as ServiceExcursionProps)} />
+              )}
+            </TimelineItem>
+          ))}
+        </div>
+      </div>
+      <TextWithIcon icon="departure" color="accent" iconSize="lg">
+        Departure :{' '}
+        <Text variant="regular" size="lg" leading="5" color="default" as="span">
+          {departure}
+        </Text>
+      </TextWithIcon>
+    </div>
+  );
+};