Storybook stories for the `MingoAiButton` component, documenting the marketing-header AI launcher button in its realistic 72px unified header context. ## Key Components | Export | Type | Description | |--------|------|-------------| | `meta` | `Meta` | Story configuration with decorator simulating the `Header` (`config.mingo`) layout context | | `Default` | `Story` | Full button with "Mingo AI" wordmark visible, sourced from `'flamingo'` | | `IconOnly` | `Story` | Mobile viewport variant showing icon-only display when wordmark hides below `md` breakpoint | ## Usage Example ```typescript import { MingoAiButton } from '../components/navigation/mingo-ai-button' // Render the button inside a 72px header (as seen in Header config.mingo)
``` ## Notes - The decorator wraps every story in a `360px × 72px` header shell to accurately reproduce the left border divider and traveling accent edge light seen in the real `Header` component. - `source` controls the analytics/tracking origin passed to the launcher; accepts any string value via the `text` control in Storybook. - The `IconOnly` story uses `mobile1` viewport to demonstrate responsive hiding of the "Mingo AI" label below the `md` breakpoint — no code change required, purely viewport-driven via Tailwind responsive classes. ## Source [`MingoAiButton.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/MingoAiButton.stories.tsx)