mautourco-components 0.2.17 → 0.2.18

package/src/components/organisms/TabCancellationPolicy/PolicyTransfer.tsx

@@ -38,7 +38,7 @@ export default function PolicyTransfer(props: PolicyTransferProps) {
 
   return (
     <div className="policy-excursion">
-      <TextWithIcon icon="car" textVariant="bold" iconSize="md">
+      <TextWithIcon icon="car" textVariant="bold" iconSize="md" textSize="md">
         {carName}
       </TextWithIcon>
       <div className="grid grid-cols-2 xl:grid-cols-3 gap-x-4">

package/src/components/organisms/TabCancellationPolicy/TabCancellationPolicyLayout/TabCancellationPolicyLayout.css

@@ -6,10 +6,17 @@
   @apply flex gap-x-8;
   figure {
     @apply overflow-hidden;
-    flex: 0 0 400px;
-    height: 400px;
+    flex: 0 0 300px;
+    height: 300px;
     border-radius: var(--border-radius-rounded-2xl);
     box-shadow: 0 1px 7px rgba(0, 0, 0, 0.19);
+    @media (min-width: 1280px) {
+      flex: 0 0 400px;
+      height: 400px;
+    }
+  }
+  img {
+    object-fit: cover;
   }
 }
 

package/src/components/organisms/TabCancellationPolicy/TabCancellationPolicyLayout/TabCancellationPolicyLayout.tsx

@@ -7,7 +7,7 @@ import './TabCancellationPolicyLayout.css';
 interface TabCancellationPolicyLayoutProps {
   title: string;
   icon: IconName;
-  isOnRequest: boolean;
+  isOnRequest?: boolean;
   children: React.ReactNode;
   image: string;
   header: React.ReactNode;

package/src/components/organisms/TabServiceDetails/Accommodation.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { DetailsContentAccom, DetailsContentAccomProps } from './DetailsContentAccom';
+import TabServiceDetails from './TabServiceDetails';
+
+export interface AccommodationProps extends DetailsContentAccomProps {
+  /** Images of the accommodation */
+  images: string[];
+  /** Whether the accommodation is on request */
+  isOnRequest?: boolean;
+}
+
+/**
+ * Accommodation details tab  .
+ *
+ * @example
+ * <Accommodation
+ *   title="Accommodation"
+ *   icon="accom"
+ *   images={['image1.jpg', 'image2.jpg', 'image3.jpg']}
+ *   mobileContent={<div>Mobile content</div>}
+ *   isOnRequest={true}
+ * >
+ *   <div>Content</div>
+ * </Accommodation.Layout>
+ *
+ * @param props - Props of the Accommodation component
+ * @returns The Accommodation component
+ */
+export const Accommodation: React.FC<AccommodationProps> = (props) => {
+  const { images, isOnRequest, ...rest } = props;
+  return (
+    <TabServiceDetails.Layout
+      title="Accommodation"
+      icon="accom"
+      isOnRequest={isOnRequest}
+      images={images}
+      mobileContent={
+        <div className="mt-8">
+          <DetailsContentAccom.Body {...rest} />
+        </div>
+      }>
+      <DetailsContentAccom {...rest} />
+    </TabServiceDetails.Layout>
+  );
+};

package/src/components/organisms/TabServiceDetails/DetailContentTransfer.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import Chip from '../../atoms/Chip/Chip';
+
+export interface DetailContentTransferProps {
+  pax: string;
+  clientType: string;
+  carName: string;
+  airConditioning?: boolean;
+  luggageTruck?: number;
+}
+
+export const DetailContentTransfer: React.FC<DetailContentTransferProps> = (props) => {
+  const { pax, clientType, carName, airConditioning, luggageTruck } = props;
+  return (
+    <div className="flex gap-4">
+      <Chip type="outline" color="brand" label={pax} leadingIcon="user" isBlackText />
+      <Chip
+        type="outline"
+        color="brand"
+        label={`Client type: ${clientType}`}
+        leadingIcon="user"
+        isBlackText
+      />
+      <Chip type="outline" color="brand" label={carName} leadingIcon="car" isBlackText />
+      {airConditioning && (
+        <Chip
+          type="outline"
+          color="brand"
+          label="Air conditioning"
+          leadingIcon="air"
+          isBlackText
+        />
+      )}
+      {luggageTruck && (
+        <Chip
+          type="outline"
+          color="brand"
+          label={`Luggage truck: ${luggageTruck > 1 ? `x${luggageTruck}` : luggageTruck}`}
+          leadingIcon="luggage"
+          isBlackText
+        />
+      )}
+    </div>
+  );
+};

package/src/components/organisms/TabServiceDetails/DetailsContentAccom.tsx

@@ -0,0 +1,124 @@
+import { useMobile } from '@/src/hooks/useMobile';
+import CardServiceAccom from '../../atoms/CardServiceAccom/CardServiceAccom';
+import Chip from '../../atoms/Chip/Chip';
+import { Text } from '../../atoms/Typography/Typography';
+import {
+  GlobalAmenities,
+  GlobalAmenity,
+} from '../../molecules/GlobalAmenities/GlobalAmenities';
+import { TextWithBorderBottom } from '../../molecules/TextWithBorderBottom/TextWithBorderBottom';
+import TextWithIcon from '../../molecules/TextWithIcon/TextWithIcon';
+
+export interface RoomsInfo {
+  /** Name of the room */
+  roomName: string;
+  /** Number of pax */
+  roomPax: string;
+  /** Client type */
+  clientType: string;
+  /** Meal plan */
+  mealPlan: string;
+  /** Amenities of the room */
+  roomAmenities: string[];
+}
+
+export interface DetailsContentAccomProps {
+  /** Title of the room */
+  roomTitle: string;
+  /** Description of the room */
+  roomDescription: string;
+  /** Global amenities */
+  globalAmenities: GlobalAmenity[];
+  /** Rooms info */
+  roomsInfo: RoomsInfo[];
+}
+
+/**
+ * Body for the DetailsContentAccom component.
+ *
+ * @example
+ * <DetailsContentAccomBody
+ *   roomsInfo={roomsInfo}
+ *   globalAmenities={globalAmenities}
+ * />
+ * @param props - Props of the DetailsContentAccomBody component
+ * @returns The DetailsContentAccomBody component
+ */
+const DetailsContentAccomBody = (
+  props: Omit<DetailsContentAccomProps, 'roomTitle' | 'roomDescription'>
+) => {
+  const { roomsInfo, globalAmenities } = props;
+  return (
+    <div className="space-y-4">
+      <div className="grid grid-cols-2 gap-x-4">
+        {roomsInfo.map((room, index) => (
+          <div className="space-y-4" key={`ri-${index}`}>
+            <TextWithIcon icon="accom" textVariant="bold" textSize="sm">
+              {room.roomName}
+            </TextWithIcon>
+            <div className="flex flex-wrap gap-2">
+              <Chip color="brand" type="outline" leadingIcon="user" isBlackText>
+                {room.roomPax} pax
+              </Chip>
+              <Chip color="brand" type="outline" leadingIcon="user" isBlackText>
+                {room.clientType}
+              </Chip>
+              <Chip color="brand" type="outline" leadingIcon="utensils" isBlackText>
+                {room.mealPlan}
+              </Chip>
+            </div>
+            <div className="flex flex-wrap gap-2">
+              {room.roomAmenities.map((amenity, index) => (
+                <Chip key={`ra-${index}`} color="accent" type="outline" isBlackText>
+                  {amenity}
+                </Chip>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className="grid grid-cols-2 gap-x-8">
+        <GlobalAmenities amenities={globalAmenities} />
+        <CardServiceAccom className="flex items-center justify-center">
+          <Text variant="bold">Coming soon</Text>
+        </CardServiceAccom>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Details content for the Accommodation component.
+ *
+ * @example
+ * <DetailsContentAccom
+ *   roomTitle="Accommodation"
+ *   roomDescription="Accommodation description"
+ *   globalAmenities={globalAmenities}
+ *   roomsInfo={roomsInfo}
+ * />
+ *
+ * @param props - Props of the DetailsContentAccom component
+ * @returns The DetailsContentAccom component
+ */
+export function DetailsContentAccom(props: DetailsContentAccomProps) {
+  const { roomTitle, roomDescription, ...rest } = props;
+
+  const { isMobile } = useMobile(1280);
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-4">
+        <TextWithBorderBottom variant="bold" size="xl">
+          {roomTitle}
+        </TextWithBorderBottom>
+        <Text variant="medium" leading="5">
+          {roomDescription}
+        </Text>
+      </div>
+      {!isMobile && <DetailsContentAccomBody {...rest} />}
+    </div>
+  );
+}
+
+DetailsContentAccom.Body = DetailsContentAccomBody;

package/src/components/organisms/TabServiceDetails/DetailsContentExcursion.tsx

@@ -0,0 +1,65 @@
+import { Text } from '../../atoms/Typography/Typography';
+import { ServiceInfo } from '../../molecules/ServiceInfo/ServiceInfo';
+import { ServiceLanguages } from '../../molecules/ServiceLanguages/ServiceLanguages';
+import { TextWithBorderBottom } from '../../molecules/TextWithBorderBottom/TextWithBorderBottom';
+
+export interface ServiceInfoItem {
+  languages: string[];
+  duration: string;
+  meal: string;
+  difficulty: string;
+  withTransfer?: boolean;
+}
+
+export interface DetailsContentExcursionProps {
+  /** Title of the excursion */
+  excursionTitle: string;
+  /** Description of the excursion */
+  excursionDescription: string;
+  /** Pick-up point */
+  pickUpPoint: string;
+  /** Service information */
+  serviceInfos: ServiceInfoItem;
+}
+
+export function DetailsContentExcursion(props: DetailsContentExcursionProps) {
+  const { excursionTitle, excursionDescription, pickUpPoint, serviceInfos } = props;
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-4">
+        <TextWithBorderBottom variant="bold" size="xl">
+          {excursionTitle}
+        </TextWithBorderBottom>
+        <Text variant="medium" leading="5">
+          {excursionDescription}
+        </Text>
+      </div>
+      <div className="space-y-2">
+        <Text variant="bold" size="sm" leading="4">
+          Pick-up point:
+        </Text>
+        <Text size="sm" leading="4">
+          {pickUpPoint}
+        </Text>
+      </div>
+      <ServiceInfo>
+        <ServiceInfo.Item icon="micro" label="Languages">
+          <ServiceLanguages languages={serviceInfos.languages} />
+        </ServiceInfo.Item>
+        <ServiceInfo.Item icon="stopwatch" label="Duration">
+          {serviceInfos.duration}
+        </ServiceInfo.Item>
+        <ServiceInfo.Item icon="utensils" label="Meal">
+          {serviceInfos.meal}
+        </ServiceInfo.Item>
+        <ServiceInfo.Item icon="bike" label="Difficulty">
+          {serviceInfos.difficulty}
+        </ServiceInfo.Item>
+        {serviceInfos.withTransfer && (
+          <ServiceInfo.Item icon="bus" label="Prise en charge inclus" />
+        )}
+      </ServiceInfo>
+    </div>
+  );
+}

package/src/components/organisms/TabServiceDetails/Excursion.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {
+  DetailsContentExcursion,
+  DetailsContentExcursionProps,
+} from './DetailsContentExcursion';
+import TabServiceDetails from './TabServiceDetails';
+
+export interface ExcursionProps extends DetailsContentExcursionProps {
+  /** Images of the excursion */
+  images: string[];
+}
+
+export const Excursion: React.FC<ExcursionProps> = (props) => {
+  const { images, ...rest } = props;
+  return (
+    <TabServiceDetails.Layout title="Excursion" icon="map" images={images}>
+      <DetailsContentExcursion {...rest} />
+    </TabServiceDetails.Layout>
+  );
+};

package/src/components/organisms/TabServiceDetails/TabServiceDetails.tsx

@@ -0,0 +1,13 @@
+import { Accommodation } from './Accommodation';
+import { Excursion } from './Excursion';
+import TabServiceDetailsLayout from './TabServiceDetailsLayout/TabServiceDetailsLayout';
+import { Transfer } from './Transfer';
+
+export default function TabServiceDetails(props: React.PropsWithChildren) {
+  return <div className="tab-service-details" {...props} />;
+}
+
+TabServiceDetails.Layout = TabServiceDetailsLayout;
+TabServiceDetails.Accommodation = Accommodation;
+TabServiceDetails.Excursion = Excursion;
+TabServiceDetails.Transfer = Transfer;

package/src/components/organisms/TabServiceDetails/TabServiceDetailsLayout/TabServiceDetailsLayout.css

@@ -0,0 +1,55 @@
+.details-service__layout {
+  @apply grid gap-y-8;
+}
+
+.details-service__layout-flex {
+  @apply flex gap-x-8;
+}
+
+.details-service__layout-flex-images {
+  @apply space-y-4;
+  max-width: 300px;
+  @media (min-width: 1280px) {
+    max-width: 400px;
+  }
+  figure {
+    @apply overflow-hidden;
+    flex: 0 0 300px;
+    height: 181px;
+    border-radius: var(--border-radius-rounded-2xl);
+    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.19);
+    @media (min-width: 1280px) {
+      flex: 0 0 400px;
+      height: 241px;
+    }
+    &.single-image {
+      height: 300px;
+      @media (min-width: 1280px) {
+        height: 400px;
+      }
+    }
+  }
+  img {
+    object-fit: cover;
+  }
+}
+
+.details-service__layout-flex-images-grid {
+  @apply grid grid-cols-2 gap-x-4;
+  figure {
+    height: 107px;
+    max-width: 100%;
+    @media (min-width: 1280px) {
+      max-width: 192px;
+      height: 143px;
+    }
+  }
+}
+
+.details-service__layout-content {
+  @apply flex-1;
+}
+
+.details-service__layout-content-body {
+  @apply pt-6;
+}

package/src/components/organisms/TabServiceDetails/TabServiceDetailsLayout/TabServiceDetailsLayout.tsx

@@ -0,0 +1,82 @@
+import { useMobile } from '@/src/hooks/useMobile';
+import { cn } from '@/src/lib/utils';
+import React from 'react';
+import Chip from '../../../atoms/Chip/Chip';
+import { IconName } from '../../../atoms/Icon/Icon';
+import TextWithIcon from '../../../molecules/TextWithIcon/TextWithIcon';
+import './TabServiceDetailsLayout.css';
+
+export interface TabServiceDetailsLayoutProps {
+  /** Title of the service */
+  title: string;
+  /** Icon of the service */
+  icon: IconName;
+  /** Children of the service */
+  children: React.ReactNode;
+  /** Images of the service */
+  images: string[];
+  /** Mobile content of the service */
+  mobileContent?: React.ReactNode;
+  /** Whether the service is on request */
+  isOnRequest?: boolean;
+}
+
+/**
+ * Layout for the TabServiceDetails component.
+ *
+ * @example
+ * <TabServiceDetails.Layout
+ *   title="Accommodation"
+ *   icon="accom"
+ *   images={['image1.jpg', 'image2.jpg', 'image3.jpg']}
+ *   mobileContent={<div>Mobile content</div>}
+ *   isOnRequest={true}
+ * >
+ *   <div>Content</div>
+ * </TabServiceDetails.Layout>
+ *
+ * @param props - Props of the TabServiceDetailsLayout
+ * @returns The TabServiceDetailsLayout component
+ */
+export default function TabServiceDetailsLayout(props: TabServiceDetailsLayoutProps) {
+  const { title, icon, isOnRequest, children, images, mobileContent } = props;
+  const { isMobile } = useMobile(1280);
+
+  return (
+    <div>
+      <div className="details-service__layout">
+        <TextWithIcon
+          icon={icon}
+          color={isOnRequest ? 'yellow' : 'accent'}
+          textVariant="bold">
+          {title}
+          {isOnRequest && <Chip color="yellow">On request</Chip>}
+        </TextWithIcon>
+        <div className="details-service__layout-flex">
+          <div className="details-service__layout-flex-images">
+            {images[0] && (
+              <figure
+                key={images[0]}
+                className={cn(images.length === 1 && 'single-image')}>
+                <img src={images[0]} alt={title} width={400} height={400} />
+              </figure>
+            )}
+            {images.length > 1 && (
+              <div className="details-service__layout-flex-images-grid">
+                {images.slice(1, 3).map((image) => (
+                  <figure key={image}>
+                    <img src={image} alt={title} width={400} height={400} />
+                  </figure>
+                ))}
+              </div>
+            )}
+          </div>
+          <div className="details-service__layout-content">
+            <div className="details-service__layout-content-body">{children}</div>
+          </div>
+        </div>
+      </div>
+      {isMobile && mobileContent}
+    </div>
+  );
+}

package/src/components/organisms/TabServiceDetails/Transfer.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import CancellationHeader from '../TabCancellationPolicy/CancellationHeader';
+import { TransferData } from '../TabCancellationPolicy/HeaderExcursion/HeaderTransfer';
+import TabCancellationPolicy from '../TabCancellationPolicy/TabCancellationPolicy';
+import {
+  DetailContentTransfer,
+  DetailContentTransferProps,
+} from './DetailContentTransfer';
+
+export interface TransferProps {
+  /** Image of the transfer */
+  image: string;
+  /** Transfer data */
+  transferData: TransferData[];
+  /** Details of the transfer */
+  transferDetails: DetailContentTransferProps;
+}
+
+export const Transfer: React.FC<TransferProps> = (props) => {
+  const { image, transferData, transferDetails } = props;
+  return (
+    <TabCancellationPolicy.Layout
+      title="Transfer"
+      icon="car"
+      image={image}
+      header={
+        <CancellationHeader>
+          <CancellationHeader.Transfer data={transferData} />
+        </CancellationHeader>
+      }>
+      <DetailContentTransfer {...transferDetails} />
+    </TabCancellationPolicy.Layout>
+  );
+};

package/src/components/organisms/TabServiceDetails/index.ts

@@ -0,0 +1,5 @@
+export * from './TabServiceDetails';
+
+export type { AccommodationProps } from './Accommodation';
+export type { DetailsContentExcursionProps } from './DetailsContentExcursion';
+export type { TabServiceDetailsLayoutProps } from './TabServiceDetailsLayout/TabServiceDetailsLayout';

package/src/components/organisms/Table/Table.css

@@ -104,6 +104,54 @@
         border-bottom: none;
       }
     }
+    &.table__children--visible {
+      @apply relative;
+      border: 1px solid transparent;
+      border-left: none;
+      &::after {
+        content: '';
+        position: absolute;
+        inset: -1px;
+        pointer-events: none;
+        max-width: 100%;
+        background-image:
+          repeating-linear-gradient(
+            to right,
+            var(--color-border-medium) 0,
+            var(--color-border-medium) 16px,
+            transparent 16px,
+            transparent 32px
+          ),
+          repeating-linear-gradient(
+            to right,
+            var(--color-border-medium) 0,
+            var(--color-border-medium) 16px,
+            transparent 16px,
+            transparent 32px
+          ),
+          repeating-linear-gradient(
+            to bottom,
+            var(--color-border-medium) 0,
+            var(--color-border-medium) 16px,
+            transparent 16px,
+            transparent 32px
+          ),
+          repeating-linear-gradient(
+            to bottom,
+            var(--color-border-medium) 0,
+            var(--color-border-medium) 16px,
+            transparent 16px,
+            transparent 32px
+          );
+        background-size:
+          100% 1px,
+          100% 1px,
+          1px 100%,
+          1px 100%;
+        background-position: top, bottom, left, right;
+        background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
+      }
+    }
   }
   .table__nested-wrapper {
     overflow: hidden;
@@ -183,3 +231,9 @@
     }
   }
 }
+
+.table__row-with-children {
+  > td {
+    padding: 0;
+  }
+}

package/src/components/organisms/Table/Table.tsx

@@ -197,29 +197,44 @@ export const Table = <T extends TableRowData<T>>(props: TableProps<T>) => {
                       ) : (
                         defaultTable
                       )
+                    ) : !row.children ? (
+                      defaultTable
                     ) : (
-                      <>
-                        {defaultTable}
-                        <AnimatePresence initial={false}>
-                          {hasVisibleChildren && (
-                            <tr
-                              key={`nested-${rowIndex}`}
-                              className={cn('table__no-hover', {
-                                'table__row-nested':
-                                  row.children && row.children.length > 0,
-                              })}>
-                              <td colSpan={columns.length} className="table__cell-nested">
-                                <NestedContent<T>
-                                  rowIndex={rowIndex}
-                                  columns={columns}
-                                  children={row.children || []}
-                                  onClickRow={onClickRow}
-                                />
-                              </td>
-                            </tr>
-                          )}
-                        </AnimatePresence>
-                      </>
+                      <tr
+                        className="table__row-with-children"
+                        onClick={(e) => onClickRow?.(e, row)}>
+                        <td
+                          colSpan={columns.length}
+                          className={cn({
+                            'table__children--visible': hasVisibleChildren,
+                          })}>
+                          <table className="table">
+                            <tbody>
+                              {defaultTable}
+                              <AnimatePresence initial={false}>
+                                {hasVisibleChildren && (
+                                  <tr
+                                    key={`nested-${rowIndex}`}
+                                    className={cn('table__no-hover', {
+                                      'table__row-nested':
+                                        row.children && row.children.length > 0,
+                                    })}>
+                                    <td
+                                      colSpan={columns.length}
+                                      className="table__cell-nested">
+                                      <NestedContent<T>
+                                        rowIndex={rowIndex}
+                                        columns={columns}
+                                        children={row.children || []}
+                                      />
+                                    </td>
+                                  </tr>
+                                )}
+                              </AnimatePresence>
+                            </tbody>
+                          </table>
+                        </td>
+                      </tr>
                     )}
                   </Fragment>
                 );