docs(Table): add story for small size table

packages/core/src/components/Table/Table/__stories__/Table.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/blocks";
 import Table from "../Table";
 import TableHeader from "../../TableHeader/TableHeader";
 import TableHeaderCell from "../../TableHeaderCell/TableHeaderCell";
@@ -50,7 +50,7 @@ Tables are used to organize data, making it easier to understand.
 
 ### Sizes
 
-The table is available in 2 different row heights: medium (40px) and large (48 px). Medium size is the default size.
+The table is available in 3 different row heights: small (32px) medium (40px) and large (48 px). Medium size is the default size.
 
 <Canvas of={TableStories.Sizes} />
 

packages/core/src/components/Table/Table/__stories__/Table.stories.tsx

@@ -43,7 +43,14 @@ export default {
     TableVirtualizedBody
   },
   argTypes: metaSettings.argTypes,
-  decorators: metaSettings.decorators
+  decorators: metaSettings.decorators,
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { TableAvatar, TableErrorState, TableEmptyState }
+      }
+    }
+  }
 };
 
 const tableTemplate = (args: ITableProps) => <Table {...args}></Table>;
@@ -177,6 +184,13 @@ export const Overview = {
       </TableBody>
     ]
   },
+  parameters: {
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
+    }
+  },
   name: "Overview"
 };
 
@@ -186,13 +200,12 @@ export const Sizes = {
       {
         id: "sentOn",
         title: "Sent on",
-        width: 180,
         loadingStateType: "medium-text"
       },
       {
         id: "subject",
         title: "Subject",
-        width: 200,
+
         loadingStateType: "long-text"
       }
     ];
@@ -210,6 +223,32 @@ export const Sizes = {
     ];
     return (
       <>
+        <Table
+          style={{ width: "auto" }}
+          size={Table.sizes.SMALL}
+          errorState={<TableErrorState />}
+          emptyState={<TableEmptyState />}
+          columns={columns}
+        >
+          <TableHeader>
+            {columns.map((headerCell, index) => (
+              <TableHeaderCell
+                key={index}
+                title={headerCell.title}
+                icon={headerCell.icon}
+                infoContent={headerCell.infoContent}
+              />
+            ))}
+          </TableHeader>
+          <TableBody>
+            {data.map(rowItem => (
+              <TableRow key={rowItem.id}>
+                <TableCell>{rowItem.sentOn}</TableCell>
+                <TableCell>{rowItem.subject}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
         <Table
           style={{ width: "auto" }}
           size={Table.sizes.MEDIUM}
@@ -267,7 +306,7 @@ export const Sizes = {
   },
   decorators: [
     (Story: typeof React.Component) => (
-      <Flex align={Flex.align.START} justify={Flex.justify.SPACE_BETWEEN} style={{ flex: 1 }}>
+      <Flex align={Flex.align.START} justify={Flex.justify.SPACE_BETWEEN} gap={Flex.gaps.MEDIUM} style={{ flex: 1 }}>
         <Story />
       </Flex>
     )
@@ -446,7 +485,13 @@ export const TableHeaderFunctionality = {
       </Table>
     );
   },
-
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { emailTableData, emailColumns }
+      }
+    }
+  },
   name: "Table Header Functionality"
 };
 
@@ -482,7 +527,13 @@ export const Loading = {
       </TableBody>
     </Table>
   ),
-
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { emailTableData, emailColumns }
+      }
+    }
+  },
   name: "Loading"
 };
 
@@ -525,7 +576,13 @@ export const Scroll = {
       </Table>
     </div>
   ),
-
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { scrollTableColumns, scrollTableData, priorityColumnToLabelColor, statusColumnToLabelColor }
+      }
+    }
+  },
   name: "Scroll"
 };
 
@@ -558,7 +615,13 @@ export const VirtualizedScroll = {
       </Table>
     );
   },
-
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { virtualizedScrollTableColumns, virtualizedScrollTableData }
+      }
+    }
+  },
   name: "Virtualized Scroll"
 };
 
@@ -592,7 +655,13 @@ export const StickyColumn = {
       </Table>
     );
   },
-
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { stickyColumns, stickyTableData, statusColumnToLabelColor }
+      }
+    }
+  },
   name: "Sticky column"
 };
 
@@ -627,6 +696,12 @@ export const HighlightedRow = {
       </Table>
     );
   },
-
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { emailColumns, emailTableData }
+      }
+    }
+  },
   name: "Highlighted row"
 };