[FEAT] - Components → DialogBox

[stephen-gift]

Description

Create a Dialog Box component that includes a header with text and description, and a footer that accepts multiple buttons.

Acceptance Criteria

• Implement a Dialog Box component with a header that includes headerText and description.
• The footer should accept multiple buttons.
• Ensure the Dialog Box component is visually appealing and responsive.
• Maintain accessibility standards with appropriate aria attributes.

Requirements

The Dialog Box component should support the following props:

• headerText: string - Required text to be displayed in the header.
• description?: string - Optional description to be displayed under the header text.
• buttons: React.ReactNode[] - An array of button components to be displayed in the footer.

Testing

• Verify that the Dialog Box component renders correctly with the provided headerText, description, and buttons.
• Test that the footer can accommodate multiple buttons.
• Ensure responsiveness and visual appeal across different screen sizes.
• Conduct accessibility testing to ensure screen reader compatibility.

Tasks

• [ ] Component Development: Develop the Dialog Box component based on the specified requirements.
• [ ] Props Implementation: Implement support for headerText, description, and buttons props.
• [ ] Styling: Ensure consistent styling for the header, description, and footer.
• [ ] Unit Testing: Write unit tests to validate component behavior.
• [ ] Accessibility Testing: Verify accessibility features are properly implemented.
• [ ] Documentation: Update documentation with usage examples and prop details.

Figma Design (if available)

Dialog Card

Link

Figma Link

[chumex412]

@Ayomide0123 create a variant for the dialog. A variant for success, warning, error and as indicated in the design

[Ayomide0123]

the one in the design I'm assuming is a warning variant, am I to create two additional dialog components (success and error)? I was of the assumption that since the component I'm creating is making use of props, the values of those props would determine the dialogbox variant @chumex412

[chumex412]

Yes and it has to be dynamic to cater to the different variants and contents

[Ayomide0123]

Okay, thank you very much