We'd like you to implement a modal dialog component using the codebase provided. We've kept the brief intentionally loose in places - we're interested in the decisions you make, not just the end result.
Using the existing codebase as your starting point, implement a modal dialog component. A rough reference for behaviour and appearance can be found here: stripe.com (see expand icon on homepage cards).
Consider this a starting point, not a strict spec. Your implementation should fit the patterns and conventions already established in the codebase.
The dialog should:
- Open and close correctly
- Avoid using any external UI libraries - we'd like to see your own implementation
- Be keyboard accessible - including Escape to close, and correct focus management when opening and closing
- Follow the existing component patterns, naming conventions, and file structure in the codebase
- Be written in TypeScript
We've deliberately left the following open - please make your own decisions and note them down:
- Mobile behaviour and breakpoints
- What happens to page scroll when the dialog is open
- Animation and transition behaviour
- How the trigger element is handled
Along with your code, please include a brief README (a few bullet points is fine) covering:
- Any assumptions you made where the spec was unclear
- Any trade-offs or decisions you'd approach differently with more time
- Anything you noticed in the existing codebase you'd flag in a code review
We'd suggest around 2–3 hours, but there's no hard limit. We're more interested in quality and thoughtfulness than completeness - if you run out of time, notes on what you'd do next are just as valuable.
We'll schedule a short call to walk through your submission together. Be prepared to talk through your decisions - there are no trick questions, we just want to understand your thinking.
Great! Please see the CONTRIBUTING.md file for setup instructions and guidelines on how to submit your work. We look forward to seeing your implementation!