Storybook stories for the `InfoCard` component, demonstrating all supported variants including progress bars, copyable values, item icons, footers, and multi-card grid layouts. ## Key Components | Export | Description | |---|---| | `DiskC` | Basic card with title, subtitle, usage items, and a progress bar | | `DiskD` | Progress bar with `warningThreshold` and `criticalThreshold` thresholds configured | | `PhysicalRAM` | RAM metric card showing the standard progress bar pattern | | `WithCopyableValues` | Items with `copyable: true`, plus a footer with icon, logo, and external link | | `WithItemIcon` | Inline icon rendered alongside individual item labels | | `WithFooter` | Full footer with icon, signed-by text, logo, and a link | | `WithFooterWithoutLink` | Footer without an external `link` href | | `Grid` | Three `InfoCard` instances arranged in a responsive 3-column grid | ## Usage Example ```typescript import { InfoCard } from '../components' import { ShieldCheckIcon } from '../components/icons-v2-generated/security' import { FlamingoLogo } from '../components/icons' // Basic card with progress bar // Card with copyable values and footer , }, ], footer: { icon: , text: 'Signed by Flamingo', logo: , link: { href: 'https://github.com/flamingo-ai/fleetdm' }, }, }} /> ``` ## Notes - All stories wrap the card in a fixed-width `div` (`w-80` or `w-96`) to simulate real layout constraints. - The `progress` object accepts an optional `warningThreshold` and `criticalThreshold` to change bar color at defined percentages. - The `footer.link` property is optional; omitting it renders the footer without an external link anchor. - Source: [`InfoCard.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/InfoCard.stories.tsx)