mautourco-components 0.2.138 → 0.2.140

package/dist/components/molecules/TableServiceItem/ItemCol.d.ts

@@ -8,5 +8,6 @@ export interface ItemColProps {
     iconName?: IconName;
     showName?: boolean;
     children?: React.ReactNode;
+    extraContent?: string;
 }
 export declare function ItemCol(props: ItemColProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/TableServiceItem/ItemCol.js

@@ -3,11 +3,16 @@ import { Text } from '../../atoms/Typography/Typography';
 import { cn } from '../../../lib/utils';
 import Chip from '../../atoms/Chip/Chip';
 import TextWithIcon from '../TextWithIcon/TextWithIcon';
+var ExtraContent = function (props) {
+    return (_jsxs("div", { children: [_jsx(Text, { variant: "bold", size: "sm", leading: "5", children: props.label }), _jsx(Text, { variant: "regular", size: "sm", leading: "5", children: props.children })] }));
+};
 export function ItemCol(props) {
-    var serviceType = props.serviceType, serviceName = props.serviceName, offers = props.offers, status = props.status, _a = props.iconName, iconName = _a === void 0 ? 'accom' : _a, _b = props.showName, showName = _b === void 0 ? true : _b, extraTitle = props.extraTitle, children = props.children;
+    var serviceType = props.serviceType, serviceName = props.serviceName, offers = props.offers, status = props.status, _a = props.iconName, iconName = _a === void 0 ? 'accom' : _a, _b = props.showName, showName = _b === void 0 ? true : _b, extraTitle = props.extraTitle, extraContent = props.extraContent, children = props.children;
     var isOnRequest = (status === null || status === void 0 ? void 0 : status.toLowerCase()) === 'on request';
-    return (_jsxs("div", { className: cn('grid', (offers === null || offers === void 0 ? void 0 : offers.length) && 'gap-y-3'), children: [_jsxs("div", { children: [serviceName && (_jsxs("div", { className: "grid gap-y-1", children: [_jsxs("div", { className: "flex items-center gap-x-2", children: [_jsx(TextWithIcon, { icon: iconName, color: isOnRequest ? 'yellow' : 'accent', children: serviceType }), isOnRequest && _jsx(Chip, { color: "yellow", children: status }), extraTitle] }), _jsx(Text, { variant: "bold", size: "sm", children: showName && serviceName })] })), children] }), offers && offers.length > 0 && (_jsxs("div", { children: [_jsx(Text, { variant: "bold", size: "sm", leading: "5", children: "Applicable offers:" }), _jsx(Text, { variant: "regular", size: "sm", leading: "5", children: offers.map(function (o) {
-                            var offerValue = o.OfferType === 'GIFT' ? o.OfferName : "".concat(o.OfferValue, "%  offers applied");
-                            return _jsx("span", { children: offerValue });
-                        }) })] }))] }));
+    return (_jsxs("div", { className: cn('grid', {
+            'gap-y-3': (offers === null || offers === void 0 ? void 0 : offers.length) || !!extraContent,
+        }), children: [_jsxs("div", { children: [serviceName && (_jsxs("div", { className: "grid gap-y-1", children: [_jsxs("div", { className: "flex items-center gap-x-2", children: [_jsx(TextWithIcon, { icon: iconName, color: isOnRequest ? 'yellow' : 'accent', children: serviceType }), isOnRequest && _jsx(Chip, { color: "yellow", children: status }), extraTitle] }), _jsx(Text, { variant: "bold", size: "sm", children: showName && serviceName })] })), children] }), serviceType === 'Excursion' && (_jsx(ExtraContent, { label: "Pick up point", children: extraContent })), offers && offers.length > 0 && (_jsx(ExtraContent, { label: "Applicable offers:", children: offers.map(function (o) {
+                    var offerValue = o.OfferType === 'GIFT' ? o.OfferName : "".concat(o.OfferValue, "%  offers applied");
+                    return _jsx("span", { children: offerValue });
+                }) }))] }));
 }

package/dist/components/molecules/TableServiceItem/RowExcursion.js

@@ -15,8 +15,8 @@ export function DetailsCol(props) {
         ] }));
 }
 function FirstCol(props) {
-    var serviceName = props.serviceName, offers = props.offers;
-    return (_jsx(ItemCol, { serviceType: "Excursion", serviceName: serviceName, offers: offers, iconName: "map" }));
+    var serviceName = props.serviceName, extraContent = props.extraContent;
+    return (_jsx(ItemCol, { serviceType: "Excursion", serviceName: serviceName, extraContent: extraContent, iconName: "map" }));
 }
 RowExcursion.FirstCol = FirstCol;
 RowExcursion.DetailsCol = DetailsCol;

package/dist/components/organisms/Table/Table.css

@@ -46,24 +46,37 @@
   }
 }
 .table__body {
-  tr {
+  > tr {
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
   }
-  tr {
+  > tr {
     transition-duration: 200ms;
   }
-  tr {
+  > tr {
     border-top: solid 1px var(--color-surface-300);
-    &:hover:not(.table__no-hover) {
+    &:hover:not(.table__row-with-children) {
       background-color: var(--color-elevation-state-hover-subtle);
     }
     &.table__row-highlighted:hover {
-      tr {
+      .table__row-div-highlighted {
         background-color: var(--color-yellow-100);
       }
     }
+    &.table__row-div-highlighted {
+      div.table__nested-wrapper table tr {
+        background-color: var(--color-yellow-50);
+        &:hover {
+          background-color: var(--color-yellow-100);
+        }
+      }
+    }
+    &.table__row-with-children {
+      tr:hover {
+        background-color: var(--color-elevation-state-hover-subtle);
+      }
+    }
     &:first-child {
       border-top: none;
     }
@@ -72,7 +85,6 @@
       &:not(:nth-of-type(1)) {
         td {
           vertical-align: top;
-          padding-top: 0;
         }
       }
     }
@@ -188,9 +200,13 @@
   }
   .table .table__nested-wrapper tr {
     border-top: none;
+    background-color: #fff;
     &:last-child {
       border-bottom: solid 1px var(--color-surface-300);
     }
+    &:hover {
+      background-color: var(--color-elevation-state-hover-subtle);
+    }
   }
 }
 

package/dist/components/organisms/Table/columns/detail-resume-columns.js

@@ -23,7 +23,7 @@ export var detailResumeColumns = function (params) {
                 }
                 if (value === ServiceType.EXCURSION) {
                     var excursion = raw;
-                    return (_jsx(RowExcursion.FirstCol, { serviceName: excursion.ExcursionName }));
+                    return (_jsx(RowExcursion.FirstCol, { serviceName: excursion.ExcursionName, extraContent: excursion.LocationToName }));
                 }
                 if (value === ServiceType.TRANSFER) {
                     var transfer = raw;

package/dist/types/table/detail-resume.types.d.ts

@@ -60,7 +60,7 @@ export interface DetailResumeAccommodation extends TableRowData<DetailResumeItem
     Description: string;
     TitleDescription: string;
     Rooms: Room[];
-    RoomIndex: number;
+    RoomIndex?: number;
 }
 export interface DetailResumeTransfer extends TableRowData<DetailResumeItem> {
     Type: ServiceType;

package/package.json

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

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

@@ -13,8 +13,22 @@ export interface ItemColProps {
   iconName?: IconName;
   showName?: boolean;
   children?: React.ReactNode;
+  extraContent?: string;
 }
 
+const ExtraContent = (props: { label: string; children: React.ReactNode }) => {
+  return (
+    <div>
+      <Text variant="bold" size="sm" leading="5">
+        {props.label}
+      </Text>
+      <Text variant="regular" size="sm" leading="5">
+        {props.children}
+      </Text>
+    </div>
+  );
+};
+
 export function ItemCol(props: ItemColProps) {
   const {
     serviceType,
@@ -24,13 +38,17 @@ export function ItemCol(props: ItemColProps) {
     iconName = 'accom',
     showName = true,
     extraTitle,
+    extraContent,
     children,
   } = props;
 
   const isOnRequest = status?.toLowerCase() === 'on request';
 
   return (
-    <div className={cn('grid', offers?.length && 'gap-y-3')}>
+    <div
+      className={cn('grid', {
+        'gap-y-3': offers?.length || !!extraContent,
+      })}>
       <div>
         {serviceName && (
           <div className="grid gap-y-1">
@@ -48,20 +66,18 @@ export function ItemCol(props: ItemColProps) {
         )}
         {children}
       </div>
+      {serviceType === 'Excursion' && (
+        <ExtraContent label="Pick up point">{extraContent}</ExtraContent>
+      )}
       {offers && offers.length > 0 && (
-        <div>
-          <Text variant="bold" size="sm" leading="5">
-            Applicable offers:
-          </Text>
-          <Text variant="regular" size="sm" leading="5">
-            {offers.map((o) => {
-              const offerValue =
-                o.OfferType === 'GIFT' ? o.OfferName : `${o.OfferValue}%  offers applied`;
+        <ExtraContent label="Applicable offers:">
+          {offers.map((o) => {
+            const offerValue =
+              o.OfferType === 'GIFT' ? o.OfferName : `${o.OfferValue}%  offers applied`;
 
-              return <span>{offerValue}</span>;
-            })}
-          </Text>
-        </div>
+            return <span>{offerValue}</span>;
+          })}
+        </ExtraContent>
       )}
     </div>
   );

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

@@ -30,13 +30,13 @@ export function DetailsCol(props: RowExcursionProps) {
 }
 
 function FirstCol(props: Omit<ItemColProps, 'serviceType' | 'status'>) {
-  const { serviceName, offers } = props;
+  const { serviceName, extraContent } = props;
 
   return (
     <ItemCol
       serviceType="Excursion"
       serviceName={serviceName}
-      offers={offers}
+      extraContent={extraContent}
       iconName="map"
     />
   );

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

@@ -37,17 +37,30 @@
   }
 }
 .table__body {
-  tr {
+  > tr {
     @apply transition-colors duration-200;
     border-top: solid 1px var(--color-surface-300);
-    &:hover:not(.table__no-hover) {
+    &:hover:not(.table__row-with-children) {
       background-color: var(--color-elevation-state-hover-subtle);
     }
     &.table__row-highlighted:hover {
-      tr {
+      .table__row-div-highlighted {
         background-color: var(--color-yellow-100);
       }
     }
+    &.table__row-div-highlighted {
+      div.table__nested-wrapper table tr {
+        background-color: var(--color-yellow-50);
+        &:hover {
+          background-color: var(--color-yellow-100);
+        }
+      }
+    }
+    &.table__row-with-children {
+      tr:hover {
+        background-color: var(--color-elevation-state-hover-subtle);
+      }
+    }
     &:first-child {
       border-top: none;
     }
@@ -56,7 +69,6 @@
       &:not(:nth-of-type(1)) {
         td {
           vertical-align: top;
-          padding-top: 0;
         }
       }
     }
@@ -166,9 +178,13 @@
   }
   .table .table__nested-wrapper tr {
     border-top: none;
+    background-color: #fff;
     &:last-child {
       border-bottom: solid 1px var(--color-surface-300);
     }
+    &:hover {
+      background-color: var(--color-elevation-state-hover-subtle);
+    }
   }
 }
 

package/src/components/organisms/Table/columns/detail-resume-columns.tsx

@@ -40,7 +40,10 @@ export const detailResumeColumns: (params?: {
         if (value === ServiceType.EXCURSION) {
           const excursion = raw as DetailResumeExcursion;
           return (
-            <RowExcursion.FirstCol serviceName={excursion.ExcursionName as string} />
+            <RowExcursion.FirstCol
+              serviceName={excursion.ExcursionName as string}
+              extraContent={excursion.LocationToName}
+            />
           );
         }
         if (value === ServiceType.TRANSFER) {

package/src/types/table/detail-resume.types.ts

@@ -67,7 +67,7 @@ export interface DetailResumeAccommodation
   Description: string;
   TitleDescription: string;
   Rooms: Room[];
-  RoomIndex: number;
+  RoomIndex?: number;
 }
 
 export interface DetailResumeTransfer extends TableRowData<DetailResumeItem> {