mautourco-components 0.2.17 → 0.2.19

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>
                 );

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

@@ -23,7 +23,7 @@ export const Timeline: React.FC<TimelineProps> = (props) => {
   const { arrival, departure, services, className } = props;
   return (
     <div className={cn('space-y-10', className)}>
-      <TextWithIcon icon="arrival" color="accent" iconSize="lg">
+      <TextWithIcon icon="arrival" color="accent" iconSize="lg" textSize="lg">
         Arrival :{' '}
         <Text variant="regular" size="lg" leading="5" color="default" as="span">
           {arrival}
@@ -48,7 +48,7 @@ export const Timeline: React.FC<TimelineProps> = (props) => {
           ))}
         </div>
       </div>
-      <TextWithIcon icon="departure" color="accent" iconSize="lg">
+      <TextWithIcon icon="departure" color="accent" iconSize="lg" textSize="lg">
         Departure :{' '}
         <Text variant="regular" size="lg" leading="5" color="default" as="span">
           {departure}