feat(ui): added expanded prop for table rows

packages/ui/package.json

@@ -2,7 +2,7 @@
   "name": "@eqtylab/equality",
   "description": "EQTYLab's component and token-based design system",
   "homepage": "https://equality.eqtylab.io/",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "license": "Apache-2.0",
   "keywords": [
     "component library",

packages/ui/src/components/checkbox/checkbox.tsx

@@ -20,7 +20,7 @@ const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root
       {...props}
     >
       <CheckboxPrimitive.Indicator className={styles.indicator}>
-        <CheckIcon className={styles.check} />
+        {Icon ? <Icon className={styles.check} /> : <CheckIcon className={styles.check} />}
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
   )

packages/ui/src/components/control-status-badge/control-status-badge.tsx

@@ -102,6 +102,7 @@ export { ControlStatusBadge };
 const MessageCircleCheckIcon = ({ className }: { className?: string }) => {
   return (
     <svg
+      className={className}
       xmlns="http://www.w3.org/2000/svg"
       width="12"
       height="12"

packages/ui/src/components/date-range-picker/date-range-picker.tsx

@@ -1,6 +1,6 @@
-import { useState } from 'react';
 import * as React from 'react';
-import { CalendarDays, ChevronLeft, ChevronRight, X } from 'lucide-react';
+import { useState } from 'react';
+import { CalendarDays, ChevronLeft, ChevronRight } from 'lucide-react';
 
 import { Button } from '@/components/button/button';
 import styles from '@/components/date-range-picker/date-range-picker.module.css';
@@ -9,7 +9,6 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/popover/po
 import { cn } from '@/lib/utils';
 
 const CalendarDaysIcon = CalendarDays as React.ComponentType<{ className?: string }>;
-const XIcon = X as React.ComponentType<{ className?: string }>;
 const ChevronLeftIcon = ChevronLeft as React.ComponentType<{ className?: string }>;
 const ChevronRightIcon = ChevronRight as React.ComponentType<{ className?: string }>;
 

packages/ui/src/components/display-field/display-field.tsx

@@ -151,4 +151,4 @@ function DisplayField({
   );
 }
 
-export { DisplayField, displayFieldVariants };
+export { DisplayField };

packages/ui/src/components/drawer/drawer.tsx

@@ -63,7 +63,7 @@ const DrawerHeaderActions = React.forwardRef<
     <div
       ref={ref}
       className={cn(styles['drawer-header-actions'], className)}
-      style={{ '--row-span': rowSpan } as React.CSSProperties}
+      style={{ ...style, '--row-span': rowSpan } as React.CSSProperties}
       {...props}
     />
   );

packages/ui/src/components/icon-button/icon-button.tsx

@@ -91,4 +91,4 @@ function IconButton({
   );
 }
 
-export { IconButton, iconButtonVariants };
+export { IconButton };

packages/ui/src/components/table/table-components.tsx

@@ -11,7 +11,7 @@ const TableContainer = React.forwardRef<
   HTMLTableElement,
   React.HTMLAttributes<HTMLTableElement> & VariantProps<typeof tableElevationVariants>
 >(({ className, elevation = ELEVATION.RAISED, ...props }, ref) => (
-  <div className={(styles['table'], tableElevationVariants({ elevation }))}>
+  <div className={cn(styles['table'], tableElevationVariants({ elevation }), className)}>
     <table ref={ref} className={styles['table-inner']} {...props} />
   </div>
 ));
@@ -59,22 +59,24 @@ TableHead.displayName = 'TableHead';
 const TableCell = React.forwardRef<
   HTMLTableCellElement,
   React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => <td ref={ref} className={styles['table-cell']} {...props} />);
+>(({ className, ...props }, ref) => (
+  <td ref={ref} className={cn(styles['table-cell'], className)} {...props} />
+));
 TableCell.displayName = 'TableCell';
 
 const TableCaption = React.forwardRef<
   HTMLTableCaptionElement,
   React.HTMLAttributes<HTMLTableCaptionElement>
 >(({ className, ...props }, ref) => (
-  <caption ref={ref} className={styles['table-caption']} {...props} />
+  <caption ref={ref} className={cn(styles['table-caption'], className)} {...props} />
 ));
 TableCaption.displayName = 'TableCaption';
 
 export {
-  TableContainer,
   TableBody,
   TableCaption,
   TableCell,
+  TableContainer,
   TableFooter,
   TableHead,
   TableHeader,

packages/ui/src/components/table/table.module.css

@@ -53,3 +53,11 @@
 .table--floating.table-border {
   @apply border-border-floating;
 }
+
+.table-row-expandable:hover {
+  @apply bg-transparent;
+}
+
+.table-cell-expandable {
+  @apply border-none !p-0;
+}

packages/ui/src/components/table/table.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
+import { MotionCollapsibleContent } from '@/components/motion-collapsible/motion-collapsible';
 import {
   TableBody,
   TableCell,
@@ -25,6 +26,10 @@ type TableRowData = {
   cells: TableCellData[];
   onClick?: () => void;
   className?: string;
+  expandable?: {
+    isOpen: boolean;
+    content: React.ReactNode;
+  };
 };
 
 type TableCellData = {
@@ -70,17 +75,27 @@ const Table = ({
         </TableHeader>
         <TableBody>
           {rows.map((row) => (
-            <TableRow
-              key={row.key}
-              className={cn(row.className, row.onClick && styles['table-row-clickable'])}
-              onClick={row.onClick}
-            >
-              {row.cells.map((cell) => (
-                <TableCell key={cell.key} className={cell.className}>
-                  {cell.content}
-                </TableCell>
-              ))}
-            </TableRow>
+            <React.Fragment key={row.key}>
+              <TableRow
+                className={cn(row.className, row.onClick && styles['table-row-clickable'])}
+                onClick={row.onClick}
+              >
+                {row.cells.map((cell) => (
+                  <TableCell key={cell.key} className={cell.className}>
+                    {cell.content}
+                  </TableCell>
+                ))}
+              </TableRow>
+              {row.expandable && (
+                <TableRow className={styles['table-row-expandable']}>
+                  <TableCell colSpan={columns.length} className={styles['table-cell-expandable']}>
+                    <MotionCollapsibleContent isOpen={row.expandable.isOpen}>
+                      {row.expandable.content}
+                    </MotionCollapsibleContent>
+                  </TableCell>
+                </TableRow>
+              )}
+            </React.Fragment>
           ))}
         </TableBody>
       </TableContainer>

packages/ui/src/components/toast/toast.tsx

@@ -15,7 +15,7 @@ interface ToastProps {
 }
 
 const Toast = ({ toast }: ToastProps) => {
-  const { id, title, description, action, icon, variant, ...props } = toast;
+  const { title, description, action, icon, variant, ...props } = toast;
 
   // Default icons based on variant
   const getDefaultIcon = () => {