Storybook stories for the `StackedRowsPanel` component, demonstrating its key layout variants including header cards, standard tables, single rows, info banners, and panels with nested data tables. ## Key Components | Export | Description | |---|---| | `HeaderCard` | Full-width title/description row paired with a multi-column metadata row | | `StandardTable` | Uniform multi-column rows with avatar, name/email, role, and status tag | | `SingleRow` | Single row that rounds all four corners | | `InfoBanner` | Row with a leading icon aligned against two text lines | | `WithNestedTable` | Panel row hosting an arbitrary node — in this case a nested `DataTable` | | `NestedDevicesTable` | Internal helper rendering a `DataTable` with device name and compliance status | ## Usage Example ```typescript import { StackedRowsPanel } from '../components/ui/stacked-rows-panel' import { Tag } from '../components/ui/tag' // Simple header card , label: 'Status', }, ], }, ]} /> // Single row — all four corners rounded 85%', label: 'Policy' }] }, ]} /> ``` ## Notes - **Corner rounding** is automatic: a single row rounds all corners; multiple rows round only the first row's top and last row's bottom corners. - **Column slots** accept either `value`/`label` text pairs or an arbitrary `content` node. - The `hideAt` prop on a column controls responsive visibility (e.g., `hideAt: 'md'`). - The `leadingIcon` prop centers a glyph vertically against both value and label lines. ## Source [`StackedRowsPanel.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/StackedRowsPanel.stories.tsx)