Storybook stories file for the `DashboardInfoCard` component, providing interactive examples and documentation for all supported prop combinations and visual variants. ## Key Components ### Stories | Story | Description | |---|---| | `Default` | Basic card with title and numeric value | | `StringValue` | Card with a string value | | `WithPercentage` | Value with percentage display | | `WithProgress` | Circular progress indicator | | `CustomProgressVariant` | Progress ring color variants (`success`, `warning`, `error`, `info`, `accent`) | | `WithTooltip` | Question-mark icon tooltip | | `WithHref` | Clickable card via Next.js Link | | `WarningWithTag` / `ErrorWithTag` | Overflow percentage rendered as colored `Tag` | | `OverflowWrap` / `OverflowComparison` | `progressOverflow="wrap"` vs `"clamp"` behavior | | `PlainPercentageWithColoredRing` | Colored ring with neutral plain-text percentage | | `DeviceStatusesOverview` | Four-column Figma "Devices Overview" grid | | `ProgressSizeComparison` | 24px vs 56px responsive ring sizes | | `WithTitleTag` / `WithTitleAndTag` | Figma "status" variant with `Tag` in title row | | `WithIcon` / `WithImage` | Bordered icon/image slot (Figma "icon" variant) | | `KitchenSink` | All props combined | ## Usage Example ```typescript import { DashboardInfoCard } from '../components/ui/dashboard-info-card' import { Tag } from '../components/ui/tag' import { MonitorIcon } from '../components/icons-v2-generated/devices/monitor-icon' // Basic card // With circular progress and overflow wrapping // Figma "icon" variant with navigation } href="/devices" /> // Figma "status" variant with title Tag } /> ``` ## Source [`DashboardInfoCard.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/DashboardInfoCard.stories.tsx)