Storybook stories for the `QuickActionMarquee` component, showcasing horizontally-scrolling quick-action chip strips used in the OpenFrame chat interface — covering layout variants, scroll directions, interactivity modes, and edge cases. ## Key Components | Export | Description | |---|---| | `Default` | Single fae-row marquee scrolling left with interactive chips | | `TwoRows` | Stacked fae (left) + mingo (right) rows mirroring the Figma design | | `ScrollRight` | Mingo-row marquee with reversed scroll direction | | `Decorative` | Non-interactive, non-focusable chip strip for marketing/display use | | `FewItems` | Edge case with fewer than 12 items — validates `minChips` auto-padding | | `FastNoPause` | High-speed (`120px/s`) marquee with hover-pause disabled | **Item Fixtures:** - `FAE_ITEMS` — 6 chips with `pink`-accented icons, mirrors the Figma fae row - `MINGO_ITEMS` — 6 chips with `cyan`-accented icons, mirrors the Figma mingo row ## Usage Example ```typescript import { QuickActionMarquee } from '../components/chat/quick-action-marquee' // Interactive strip console.log(item.id)} /> // Decorative-only (no onSelect → non-focusable) // Stacked two-row layout
``` ## Notes - Scroll speed is constant in `px/s` regardless of item count - Strips automatically pause under `prefers-reduced-motion` - Omitting `onSelect` renders chips as plain decorative tags (not focusable) - Cloned track copies are `aria-hidden` for accessibility **Source:** [`QuickActionMarquee.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/QuickActionMarquee.stories.tsx)