mautourco-components 0.2.166 → 0.2.168

package/dist/components/molecules/BookingResume/ResumeAccom/ResumeAccom.css

@@ -14,4 +14,20 @@
 
 .resume-accom .service-info__item-content::before {
       background-color: var(--color-border-medium);
-    }
+    }
+
+.resume-accom__rooms > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+
+.resume-accom__content {
+  margin-top: 1rem;
+}
+
+.resume-accom__content > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
+}

package/dist/components/molecules/BookingResume/ResumeAccom/ResumeAccom.d.ts

@@ -5,7 +5,7 @@ export interface ResumeAccomProps {
     image: string;
     dates: string[];
     clientType: string;
-    pax: BookingPax;
+    pax: BookingPax[];
     hotelName: string;
     rooms: Partial<RoomItem>[];
 }

package/dist/components/molecules/BookingResume/ResumeAccom/ResumeAccom.js

@@ -11,5 +11,5 @@ import './ResumeAccom.css';
 export function ResumeAccom(props) {
     var image = props.image, dates = props.dates, clientType = props.clientType, pax = props.pax, rooms = props.rooms, hotelName = props.hotelName;
     var stay = useStays(dates).stay;
-    return (_jsxs(BookingResumeLayout, { title: "Accommodation", icon: "accom", image: image, className: "resume-accom", children: [_jsx(ServiceTitle, { title: hotelName }), _jsxs("div", { className: "space-y-2 mt-4", children: [_jsx(DateDisplay, { dates: dates, colorMode: "green" }), _jsxs(TextWithIcon, { icon: "night", children: [stay, " Nights"] }), _jsxs(Text, { variant: "medium", size: "sm", leading: "4", children: [_jsx("strong", { children: "Client types:" }), " ", clientType] }), _jsx(PaxDisplay, { pax: pax }), _jsx("div", { children: rooms.map(function (room, index) { return (_jsxs("div", { className: "space-y-1", children: [_jsx(TextWithIcon, { icon: "accom", textSize: "sm", textVariant: "medium", children: room.RoomName }), _jsx(ServiceInfo.Item, { icon: "utensils", iconSize: "sm", textSize: "sm", textLeading: "4", textVariant: "medium", label: "Meal-Plan", children: room.MealPlan })] }, "rm-".concat(index))); }) })] })] }));
+    return (_jsxs(BookingResumeLayout, { title: "Accommodation", icon: "accom", image: image, className: "resume-accom", children: [_jsx(ServiceTitle, { title: hotelName }), _jsxs("div", { className: "resume-accom__content", children: [_jsx(DateDisplay, { dates: dates, colorMode: "green" }), _jsxs(TextWithIcon, { icon: "night", children: [stay, " Nights"] }), _jsxs(Text, { variant: "medium", size: "sm", leading: "4", children: [_jsx("strong", { children: "Client types:" }), " ", clientType] }), _jsx("div", { className: "resume-accom__rooms", children: rooms.map(function (room, index) { return (_jsxs("div", { children: [_jsx(PaxDisplay, { pax: pax[index] }), _jsxs("div", { className: "space-y-1", children: [_jsx(TextWithIcon, { icon: "accom", textSize: "sm", textVariant: "medium", children: room.RoomName }), _jsx(ServiceInfo.Item, { icon: "utensils", iconSize: "sm", textSize: "sm", textLeading: "4", textVariant: "medium", label: "Meal-Plan", children: room.MealPlan })] })] }, "rm-".concat(index))); }) })] })] }));
 }

package/dist/components/organisms/Booking/BookingDocket/BookingDocket.css

@@ -100,4 +100,18 @@
       --component-button-color-outline-secondary-background-hover,
       var(--button-color-outline-secondary-background-hover, #f0fdfb)
     );
+  }
+
+.booking-docket__date-range {
+  display: flex;
+  flex-direction: column;
+}
+
+@media (width > 1280px) {
+
+.booking-docket__date-range {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
   }

package/dist/components/organisms/Booking/BookingDocket/BookingDocket.js

@@ -41,5 +41,5 @@ export function BookingDocket(props) {
             setIsBookingOpen(true);
         }
     }, [isBookingOpen, resumes, isDesktop]);
-    return (_jsx(LazyMotion, { features: domAnimation, children: _jsxs("div", { className: "booking-docket__container", children: [!isDesktop && !isBookingOpen && (_jsx("div", { className: "flex justify-end mb-4", children: _jsxs(motion.button, { className: "booking-docket__mobile-button", onClick: handleBookingOpen, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.3 }, children: [_jsx(Icon, { name: "booking", size: "lg" }), _jsx(Text, { size: "lg", as: "span", variant: "bold", children: "Your booking" }), _jsx(Icon, { name: "eye", size: "lg" })] }, "booking-open") })), _jsx(AnimatePresence, { initial: false, children: isBookingOpen && (_jsx(motion.div, { className: "booking-docket", initial: { height: 0, opacity: 0 }, animate: { height: height, opacity: 1 }, exit: { height: 0 }, children: _jsxs("div", { ref: contentRef, children: [_jsxs("div", { className: "booking-docket__content", children: [_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Heading, { level: 6, color: "accent", as: "h2", children: "Your Booking" }), _jsx("img", { src: logo, alt: "Mautourco Logo", width: 150 })] }), _jsxs("div", { className: "flex flex-col xl:flex-row gap-x-4 xl:items-center", children: [_jsx(Text, { variant: "bold", size: "lg", children: "Booking file date range :" }), _jsx(DateDisplay, { dates: dates })] })] }), _jsx(BookingResume, { children: resumes.map(function (resume, index) { return (_jsxs("div", { children: [resume.type === 'accommodation' && (_jsx(BookingResume.Accommodation, __assign({}, resume.data))), resume.type === 'transfer' && (_jsx(BookingResume.Transfer, __assign({}, resume.data))), resume.type === 'excursion' && (_jsx(BookingResume.Excursion, __assign({}, resume.data))), resume.type === 'otherService' && (_jsx(BookingResume.OtherService, __assign({}, resume.data)))] }, index)); }) })] }), _jsx("div", { className: "booking-docket__bg", children: _jsx(BookingDocketDeco, {}) })] }) }, "booking-docket")) }), !isDesktop && isBookingOpen && (_jsx("div", { className: "flex justify-end mt-10", children: _jsxs(motion.button, { className: "booking-docket__mobile-button", onClick: handleBookingOpen, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.3 }, children: [_jsx(Text, { size: "lg", as: "span", variant: "bold", children: "Close" }), _jsx(Icon, { name: "close-circle", size: "lg" })] }, "booking-close") }))] }) }));
+    return (_jsx(LazyMotion, { features: domAnimation, children: _jsxs("div", { className: "booking-docket__container", children: [!isDesktop && !isBookingOpen && (_jsx("div", { className: "flex justify-end mb-4", children: _jsxs(motion.button, { className: "booking-docket__mobile-button", onClick: handleBookingOpen, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.3 }, children: [_jsx(Icon, { name: "booking", size: "lg" }), _jsx(Text, { size: "lg", as: "span", variant: "bold", children: "Your booking" }), _jsx(Icon, { name: "eye", size: "lg" })] }, "booking-open") })), _jsx(AnimatePresence, { initial: false, children: isBookingOpen && (_jsx(motion.div, { className: "booking-docket", initial: { height: 0, opacity: 0 }, animate: { height: height, opacity: 1 }, exit: { height: 0 }, children: _jsxs("div", { ref: contentRef, children: [_jsxs("div", { className: "booking-docket__content", children: [_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Heading, { level: 6, color: "accent", as: "h2", children: "Your Booking" }), _jsx("img", { src: logo, alt: "Mautourco Logo", width: 150 })] }), _jsxs("div", { className: "booking-docket__date-range", children: [_jsx(Text, { variant: "bold", size: "lg", children: "Booking file date range :" }), _jsx(DateDisplay, { dates: dates })] })] }), _jsx(BookingResume, { children: resumes.map(function (resume, index) { return (_jsxs("div", { children: [resume.type === 'accommodation' && (_jsx(BookingResume.Accommodation, __assign({}, resume.data))), resume.type === 'transfer' && (_jsx(BookingResume.Transfer, __assign({}, resume.data))), resume.type === 'excursion' && (_jsx(BookingResume.Excursion, __assign({}, resume.data))), resume.type === 'otherService' && (_jsx(BookingResume.OtherService, __assign({}, resume.data)))] }, index)); }) })] }), _jsx("div", { className: "booking-docket__bg", children: _jsx(BookingDocketDeco, {}) })] }) }, "booking-docket")) }), !isDesktop && isBookingOpen && (_jsx("div", { className: "flex justify-end mt-10", children: _jsxs(motion.button, { className: "booking-docket__mobile-button", onClick: handleBookingOpen, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.3 }, children: [_jsx(Text, { size: "lg", as: "span", variant: "bold", children: "Close" }), _jsx(Icon, { name: "close-circle", size: "lg" })] }, "booking-close") }))] }) }));
 }

package/package.json

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

package/src/components/molecules/BookingResume/ResumeAccom/ResumeAccom.css

@@ -10,3 +10,11 @@
     }
   }
 }
+
+.resume-accom__rooms {
+  @apply space-y-4;
+}
+
+.resume-accom__content {
+  @apply space-y-2 mt-4;
+}

package/src/components/molecules/BookingResume/ResumeAccom/ResumeAccom.tsx

@@ -14,7 +14,7 @@ export interface ResumeAccomProps {
   image: string;
   dates: string[];
   clientType: string;
-  pax: BookingPax;
+  pax: BookingPax[];
   hotelName: string;
   rooms: Partial<RoomItem>[];
 }
@@ -31,28 +31,30 @@ export function ResumeAccom(props: ResumeAccomProps) {
       image={image}
       className="resume-accom">
       <ServiceTitle title={hotelName} />
-      <div className="space-y-2 mt-4">
+      <div className="resume-accom__content">
         <DateDisplay dates={dates} colorMode="green" />
         <TextWithIcon icon="night">{stay} Nights</TextWithIcon>
         <Text variant="medium" size="sm" leading="4">
           <strong>Client types:</strong> {clientType}
         </Text>
-        <PaxDisplay pax={pax} />
-        <div>
+        <div className="resume-accom__rooms">
           {rooms.map((room, index) => (
-            <div key={`rm-${index}`} className="space-y-1">
-              <TextWithIcon icon="accom" textSize="sm" textVariant="medium">
-                {room.RoomName}
-              </TextWithIcon>
-              <ServiceInfo.Item
-                icon="utensils"
-                iconSize="sm"
-                textSize="sm"
-                textLeading="4"
-                textVariant="medium"
-                label="Meal-Plan">
-                {room.MealPlan}
-              </ServiceInfo.Item>
+            <div key={`rm-${index}`}>
+              <PaxDisplay pax={pax[index]} />
+              <div className="space-y-1">
+                <TextWithIcon icon="accom" textSize="sm" textVariant="medium">
+                  {room.RoomName}
+                </TextWithIcon>
+                <ServiceInfo.Item
+                  icon="utensils"
+                  iconSize="sm"
+                  textSize="sm"
+                  textLeading="4"
+                  textVariant="medium"
+                  label="Meal-Plan">
+                  {room.MealPlan}
+                </ServiceInfo.Item>
+              </div>
             </div>
           ))}
         </div>

package/src/components/organisms/Booking/BookingDocket/BookingDocket.css

@@ -69,3 +69,10 @@
     );
   }
 }
+
+.booking-docket__date-range {
+  @apply flex flex-col;
+  @media (width > 1280px) {
+    @apply flex-row items-center justify-between;
+  }
+}

package/src/components/organisms/Booking/BookingDocket/BookingDocket.tsx

@@ -96,7 +96,7 @@ export function BookingDocket(props: BookingDocketProps) {
                       </Heading>
                       <img src={logo} alt="Mautourco Logo" width={150} />
                     </div>
-                    <div className="flex flex-col xl:flex-row gap-x-4 xl:items-center">
+                    <div className="booking-docket__date-range">
                       <Text variant="bold" size="lg">
                         Booking file date range :
                       </Text>