[FEAT] Create a Reusable Action Confirmation Component

[SilverBeing]

Develop a reusable confirmation component to enable users to confirm their actions before proceeding. This feature will help prevent users from making mistakes by providing a confirmation step. The component should be responsive and reflect the state of the action (destructive or confirmation).

Purpose

The purpose of this component is to enable users to confirm their actions before proceeding, thus preventing unintended actions and mistakes. By providing a confirmation step, the component ensures that users are certain about their decisions, enhancing the overall user experience and reducing the likelihood of errors.

Acceptance Criteria

Requirements The component should receive the following props

1. Heading - The main heading or title of the confirmation dialog.
2. Description - A description or message providing details about the action.
3. Close Action - A function to close the confirmation dialog without any action
4. Cancel Action - A function to cancel the action and close the dialog.
5. Confirmation Action - A function to confirm the action and proceed.
6. Variants: There should be different variants (Success, Destructive, etc)

Tasks

• [ ] Develop the UI according to how you see it on the design
• [ ] The component must be responsive on all screen sizes as seen on the design
• [ ] Implement props to receive heading, description, close action, cancel action, confirmation action,
• [ ] Create separate variants - destructive, confirmation, success and error 
• [ ] There must be proper management of states
• [ ] Implement state management to handle the open/close state of the confirmation dialog.
• [ ] Implement visual indicators for destructive actions (e.g., red buttons, warning icons).
• [ ] Implement visual indicators for confirmation actions (e.g., green buttons, check icons).
• [ ] Write unit tests to cover different states, variants and props.

Note

• Ensure code quality and maintainability.
• Write unit tests to cover different states and props.
• Provide clear documentation and usage examples**.

Deadline: Friday 10am**

Images and Figma Link https://www.figma.com/design/VEItfX6St5NSAqqNHImcxD/HNG-Boilerplate-Designs?node-id=2202-12521&m=dev

[JulianaSau]

@SilverBeing Given that the modal has several states, it would be wise to create variants for the component rather than using booleans to specify which variant it is

[SilverBeing]

@JulianaSau Okay. So I should edit the issue right?

[JulianaSau]

yes

@JulianaSau Okay. So I should edit the issue right?

[SilverBeing]

yes

@JulianaSau Okay. So I should edit the issue right?

I have updated it

[JulianaSau]

@Feng-09 how far are you with this issue?

[Feng-09]

@Feng-09 how far are you with this issue?

@JulianaSau I've been done with the component since morning, literally. But the tests to render the DialongContent keep failing. This is because the content isn't rendered in the same component. It is rendered outside the component, fixed to the body element.

[JulianaSau]

@Feng-09 how far are you with this issue?

@JulianaSau I've been done with the component since morning, literally. But the tests to render the DialongContent keep failing. This is because the content isn't rendered in the same component. It is rendered outside the component, fixed to the body element.

you can dm me about this issue on slack we discuss more