-
Notifications
You must be signed in to change notification settings - Fork 2
feat(web): add quiz-button component and schema #441
Copy link
Copy link
Open
Description
Background
The quiz button is a visually distinct CTA that opens a modal with an embedded quiz iframe. It was previously implemented as part of a CTA variant, but deserves its own component and CMS schema for clarity and reuse.
Expected outcome
A dedicated quiz-button schema in the CMS and corresponding web component that renders a gradient animated button with a "Quiz" badge, text, and arrow icon. Clicking opens a full-screen modal with an iframe pointing to the configured quiz URL.
Acceptance criteria
- CMS schema
sections.quiz-buttoncreated withbuttonTextandiframeSrcattributes - Schema registered in section and container-slot dynamic zones
- Web component
QuizButtonrenders the gradient animated button matching reference design - QuizButton modal opens full-screen iframe on click
- GraphQL fragment created for quiz-button
- Section renderer handles
ComponentSectionsQuizButtontypename - Seed data includes quiz-button as last block in first section
Possible solution(s)
- Create
quiz-button.jsonschema,QuizButton.tsxcomponent, fragment, and wire into Section renderer
References
- Existing CTA component pattern in
apps/web/src/components/sections/CTA.tsx - Seed script
apps/cms/scripts/seed-easter.cjs
Reactions are currently unavailable