[Project - Onboarding]: Implement Modal component (without styling)

[valentinpalkovic]

Implement React Component: Modal

Objective:

The objective of this issue is to create a new React component named Modal. This component will be used to display different kinds of modals for the onboarding flow.

Component Requirements:

1. Properties:

Property	Type	Description	Required
children	React.ReactNode	Children elements	Yes
onClose	() => void	Called to close the modal	No

2. Behaviors:

• Overlay and centered: The modal should be centered
• Darken the background: The modal should be on top of a background, which darkens the content below (use the opacity of 30% and color black for now.
• The modals visibility is controlled outside. The parent component decides whether the modal should be displayed or not.
• Use React.Portal to display the modal at document.body to guarantee a proper overlay of the underlying content

3. Design (DRAFT):

Acceptance Criteria:

• The component is implemented according to the requirements described above, or an existing component is taken, which fulfills the requirements.
• The component passes all defined test cases and has Stories displaying its states
• The component linked to a figma component in Storybook - speak to designers!
• The component should be responsive and display correctly on browser windows (min-width 1024px)
• You should not implement any complex CSS styles! The design is still work in progress. The component will be finalized design-wise in a separate ticket. Make sure, that the properties and the behaviors are implemented accordingly.

[valentinpalkovic]

I have considered using https://github.com/reactjs/react-modal/ but it doesn't support React 18 currently. Searching for an alternative