@multiplatform.one/table 6.6.0 → 7.0.0

package/src/components/SimpleTable/SimpleTable.stories.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { SimpleTable, type SimpleTableColumn, type SimpleTableProps } from "./index";
 
 export default {
@@ -8,7 +9,7 @@ export default {
 
 const peopleColumns: SimpleTableColumn[] = [
   { accessorKey: "name", header: "Name" },
-  { accessorKey: "age", header: "Age" },
+  { accessorKey: "age", header: "Age", align: "right" },
   { accessorKey: "city", header: "City" },
 ];
 
@@ -39,6 +40,7 @@ export const main = {
 export const columnAlignment = () => (
   <SimpleTable
     aria-label="Invoices"
+    layout="table"
     columns={[
       { accessorKey: "item", header: "Item", align: "left" },
       { accessorKey: "quantity", header: "Qty", align: "center" },
@@ -56,6 +58,7 @@ export const columnAlignment = () => (
 export const intentRows = () => (
   <SimpleTable
     aria-label="Service status"
+    layout="table"
     columns={[
       { accessorKey: "service", header: "Service" },
       { accessorKey: "status", header: "Status" },
@@ -72,9 +75,9 @@ export const intentRows = () => (
 );
 
 /**
- * Card layout: each row renders as a stacked card of label/value pairs.
- * `layout="cards"` pins it so the story shows cards at any viewport;
- * `_intent` rows keep their theming in card mode.
+ * Card layout: first column is the card title; remaining fields are
+ * label/value rows. `layout="cards"` pins it so the story shows cards at
+ * any viewport; `_intent` rows keep their theming in card mode.
  */
 export const cardLayout = () => (
   <SimpleTable
@@ -105,10 +108,31 @@ export const responsiveAuto = () => (
 
 /** Empty data renders the localized EmptyState instead of bare rows. */
 export const empty = () => (
-  <SimpleTable aria-label="People empty" columns={peopleColumns} data={[]} />
+  <SimpleTable aria-label="People empty" layout="table" columns={peopleColumns} data={[]} />
 );
 
 /** Empty state in pinned card layout. */
 export const emptyCards = () => (
   <SimpleTable layout="cards" aria-label="People empty cards" columns={peopleColumns} data={[]} />
 );
+
+/**
+ * Row press: the row is one control. Keyboard-origin focus paints one inset
+ * ring (LC-71); selected state is fill via `_intent`, never a second outline.
+ */
+export const rowPress = () => {
+  const [selected, setSelected] = useState<string | null>("Jane Smith");
+  const data = peopleData.map((row) =>
+    row.name === selected ? { ...row, _intent: "accent" as const } : row,
+  );
+  return (
+    <SimpleTable
+      layout="table"
+      data={data}
+      columns={peopleColumns}
+      aria-label="People"
+      onRowPress={(row) => setSelected(row.name)}
+      rowLabel={(row) => row.name}
+    />
+  );
+};