[FEAT] Create Modal Component

[ezenardr]

Description

Develop a reusable Modal view component. This component will be used across the app for various purposes, such as displaying forms, confirmation dialogs, and informational content. The Modal View should be visually appealing, easy to use, and customizable.

Acceptance Criteria

• The Modal component is implemented according to the design
• The component should be fully responsive and look good on all screen sizes.
• Ensure accessibility standards are met, including appropriate alt text for images and proper semantic HTML.

Requirements

• The component should receive a children prop
• The main content area should receive a children prop where dynamic content such as forms, dialog etc. can be displayed.
• A semi-transparent background overlay that darkens the rest of the page when the modal is open.
• Ability to close the modal by clicking the close button, the overlay, or pressing the Esc key.
• Ensure the modal is accessible, including focus management and ARIA attributes.

Testing

• Ensure the component renders correctly with all required elements.
• Test the open and close functionality, including clicking the overlay and pressing the Esc key.
• Validate the responsiveness and accessibility features.
• Check that the component handles different types of content gracefully.

Tasks

• [ ] Develop the Modal component based on the provided requirements.
• [ ] Implement the component in the codebase.
• [ ] Write unit tests to ensure the component works as expected.
• [ ] Test the component for responsiveness and accessibility.
• [ ] Update documentation with usage instructions.

Images

Modal with forms

Modal with Dialogs

Link

Figma design

[lerderl]

Is this for the blog card component or the modal component?

The acceptance criteria do not match the rest of the issue description.

[ezenardr]

Sorry. It was a typo. I've fixed it and fixed the figma link too @lerderl

[abeeebdon]

Working on it already Work in progress