Storybook stories for the `InfoCardRow` UI component, providing visual documentation and interactive examples with and without icons.
## Key Components
| Export | Type | Description |
|---|---|---|
| `Default` | `Story` | Full row with company logo avatar, title/caption lead, and two stat sections with icons |
| `WithoutIcons` | `Story` | Text-only variant with all icon slots omitted |
| `meta` | `Meta` | Storybook metadata defining layout, argTypes, and component-level docs |
## Usage Example
```typescript
import { InfoCardRow } from '../components/ui/info-card-row'
import { CheckCircleIcon } from '../components/icons-v2-generated/signs-and-symbols/check-circle-icon'
import { TagIcon } from '../components/icons-v2-generated/shopping/tag-icon'
// Full row with icons
,
}}
stats={[
{
title: 'Resolved this week',
caption: '312',
icon: ,
},
{
title: 'Open tickets',
caption: '2',
icon: ,
},
]}
/>
```
## Story Variants
- **`Default`** — Matches the Figma spec: gradient avatar in the lead slot, `CheckCircleIcon` and `TagIcon` in the stat sections.
- **`WithoutIcons`** — All `icon` props omitted; validates the text-only layout path.
The decorator constrains each story to a `max-w-[1024px]` container to reflect realistic dashboard widths. The component internally uses a 50/25/25 column split, collapses stat sections to a wrapped row on mobile, and shares inner borders between neighbouring sections.
> View the full source on GitHub: [`InfoCardRow.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/InfoCardRow.stories.tsx)