In this challenge, you will build a versatile modal component as part of a design system. These components will be essential for showing contextual information and actions across various projects and apps found within the platform.
- Variants: There are two supported variants for the modal dialogs – primary and danger that determines which buttons are shown.
- Title: The modal dialog title.
- Body: Contents of the modal dialog.
- Design fidelity: Aim to follow the design as closely as possible. All elements in the design should be present, using the specified text color, font size, font weight, spacing, dimensions, etc.
- Trigger: The modal dialog can be triggered via JavaScript. Build a way to display the modal dialog.
- Cross-browser compatibility: Check that your solution works for major browsers including Chrome, Firefox, and Safari.
- [Stretch goal] Performance optimization: Optimize image assets and code for quick load times, ensuring a smooth and responsive user experience.
- [Stretch goal] Accessibility and semantics: Follow best practices for web accessibility, such as using semantic HTML and ARIA roles where necessary and using proper
alt
tags for images.