@loadsmart/loadsmart-ui 6.2.0 → 6.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@loadsmart/loadsmart-ui",
-	"version": "6.2.0",
+	"version": "6.3.0",
 	"description": "Miranda UI, a React UI library",
 	"main": "dist",
 	"files": [

package/src/components/Table/Table.stories.tsx

@@ -518,17 +518,17 @@ export function WithExpandableRow(args: TableProps): JSX.Element {
 
   return (
     <div className="p-4 bg-neutral-white">
-      <Table {...args}>
-        <Table.Head>
+      <Table withExpandableRows {...args}>
+        <Table.Expandable.Head>
           <Table.Row>
             <Table.Expandable.HeadCell />
             <Table.Expandable.HeadCell>reference</Table.Expandable.HeadCell>
             <Table.Expandable.HeadCell>product</Table.Expandable.HeadCell>
             <Table.Expandable.HeadCell>price</Table.Expandable.HeadCell>
           </Table.Row>
-        </Table.Head>
+        </Table.Expandable.Head>
 
-        <Table.Body withExpandableRows>
+        <Table.Body>
           <Table.Expandable.Row
             leading={leading}
             expandableContent={<div>Forced expanded with custom leading</div>}

package/src/components/Table/Table.test.tsx

@@ -196,7 +196,7 @@ describe('<Table />', () => {
             <Table.HeadCell alignment="right">Price $</Table.HeadCell>
           </Table.Row>
         </Table.Head>
-        <Table.Body withExpandableRows>
+        <Table.Body>
           <Table.Expandable.Row
             expandableContent={<div>This is an expandable content on index 0</div>}
             expanded

package/src/components/Table/Table.tsx

@@ -36,15 +36,11 @@ import type {
   TablePickerItemProps,
   TablePickerProps,
   ExpandableTableRowProps,
-  TableBodyProps,
   TableHeadCellProps,
 } from './Table.types'
 
-const StyledTableBody = styled.tbody<{ $withExpandableRows?: boolean }>`
-  background-color: ${conditional({
-    'color-neutral-lightest': whenProps({ $withExpandableRows: true }),
-    initial: whenProps({ $withExpandableRows: false }),
-  })};
+const StyledTableBody = styled.tbody`
+  /* placeholder */
 `
 
 const StyledTableFoot = styled.tfoot`
@@ -117,6 +113,17 @@ const StyledTableHead = styled.thead`
   }
 `
 
+const StyledExpandableTableHead = styled.thead`
+  border: 1px solid ${token('color-neutral-lighter')};
+
+  ${StyledTableCell} {
+    padding: ${token('space-s')};
+
+    font-weight: ${token('font-weight-bold')};
+    text-transform: capitalize;
+  }
+`
+
 const BaseStyledTableRow = styled.tr`
   ${StyledTableHead} > & {
     height: 36px;
@@ -155,22 +162,23 @@ const StyledTableRow = styled(BaseStyledTableRow)<{ selected?: boolean }>`
 const StyledExpandableTableRow = styled.tr<{ $isExpanded: boolean }>`
   background-color: ${token('color-neutral-white')};
 
-  border-color: ${token('color-neutral-light')};
+  border-color: ${token('color-neutral-lighter')};
   border-width: 1px;
-  border-style: ${conditional({
+  border-top-style: solid;
+  border-right-style: solid;
+  border-left-style: solid;
+  border-bottom-style: ${conditional({
     solid: whenProps({ $isExpanded: false }),
-    'hidden solid': whenProps({ $isExpanded: true }),
+    hidden: whenProps({ $isExpanded: true }),
   })};
 
   box-shadow: ${conditional({
-    '0px 4px 8px 3px rgba(32, 42, 49, 0.15), 0px 1px 3px 0px rgba(94, 118, 138, 0.20)': whenProps({
-      $isExpanded: true,
-    }),
+    '0px 3px 3px 0px #C1CED9': whenProps({ $isExpanded: true }),
     none: whenProps({ $isExpanded: false }),
   })};
 
   ${hoverable`
-    background-color: ${token('table-row-variant-color')};
+    background-color: ${token('color-neutral-lighter')};
   `}
 
   ${focusable`
@@ -179,17 +187,23 @@ const StyledExpandableTableRow = styled.tr<{ $isExpanded: boolean }>`
 `
 
 const StyledExpandableContentRow = styled.tr`
-  border-color: ${token('color-neutral-light')};
+  border-color: ${token('color-neutral-lighter')};
   border-width: 1px;
-  border-style: hidden solid;
+  border-top-style: hidden;
+  border-right-style: solid;
+  border-left-style: solid;
+  border-bottom-style: solid;
 `
 
-const StyledTable = styled.table<{ scale?: string }>`
+const StyledTable = styled.table<{ scale?: string; withExpandableRows?: boolean }>`
   width: 100%;
 
   white-space: nowrap;
 
-  background-color: ${token('color-neutral-white')};
+  background-color: ${conditional({
+    'color-neutral-lightest': whenProps({ withExpandableRows: true }),
+    'color-neutral-white': whenProps({ withExpandableRows: false }),
+  })};
 
   border-collapse: collapse;
 
@@ -226,13 +240,14 @@ function Table<T>({
   children,
   selection,
   scale = 'default',
+  withExpandableRows,
   ...others
 }: TableProps<T>): JSX.Element {
   return (
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     <TableSelectionProvider selection={selection}>
-      <StyledTable scale={scale} {...others}>
+      <StyledTable scale={scale} withExpandableRows={withExpandableRows} {...others}>
         {children}
       </StyledTable>
     </TableSelectionProvider>
@@ -258,16 +273,12 @@ function TableHead({ children, ...others }: TableSectionProps): JSX.Element {
   return <StyledTableHead {...others}>{children}</StyledTableHead>
 }
 
-function TableBody({
-  children,
-  withExpandableRows = false,
-  ...others
-}: TableBodyProps): JSX.Element {
-  return (
-    <StyledTableBody {...others} $withExpandableRows={withExpandableRows}>
-      {children}
-    </StyledTableBody>
-  )
+function ExpandableTableHead({ children, ...others }: TableSectionProps): JSX.Element {
+  return <StyledExpandableTableHead {...others}>{children}</StyledExpandableTableHead>
+}
+
+function TableBody({ children, ...others }: TableSectionProps): JSX.Element {
+  return <StyledTableBody {...others}>{children}</StyledTableBody>
 }
 
 function TableCell({
@@ -553,6 +564,7 @@ Table.Selection = {
   HeadCell: SelectionHeadCell,
 }
 Table.Expandable = {
+  Head: ExpandableTableHead,
   HeadCell: ExpandableHeadCell,
   Cell: ExpandableCell,
   Row: ExpandableTableRow,

package/src/components/Table/Table.types.ts

@@ -17,6 +17,7 @@ export interface TableProps<T extends Selectable = TableSelectableRow>
   extends HTMLAttributes<HTMLTableElement> {
   scale?: Scale
   selection?: TableSelectionConfig<T>
+  withExpandableRows?: boolean
 }
 
 export interface TableCaptionProps extends HTMLAttributes<HTMLTableCaptionElement> {
@@ -38,10 +39,6 @@ export interface TableSectionProps extends HTMLAttributes<HTMLTableSectionElemen
   scale?: Scale
 }
 
-export interface TableBodyProps extends TableSectionProps {
-  withExpandableRows?: boolean
-}
-
 export type TableRowProps = HTMLAttributes<HTMLTableRowElement>
 
 export type ExpandableTableRowProps = TableRowProps & {