Create Reusable Components for Request Cards, Filters, and Toast Notifications #947
Description
Issue Description
We currently have different card components for extension requests, onboarding, and OOO requests. To improve reusability and consistency across the application, we need to create a standard request card component that can be used for all types of requests. This card should be reusable and flexible for different use cases. Additionally, the same approach should be applied to the filter component and toast notification components to ensure uniformity and maintainability.
Expected Behavior
A single reusable card component that can be used for all types of requests (extension, onboarding, OOO, etc.).
The card should accept dynamic content and styles as needed for each request type.
Reusable filter and toast notification components.
Current Behavior
- Currently, we have separate card components for each request type (extension, onboarding).
- Filter components and toast notifications are not standardized across the application.
Screenshots
- filter component on different pages
- Request cards
Reproducibility
- This issue is reproducible
- This issue is not reproducible
Severity/Priority
- Critical
- High
- Medium
- Low
Additional Information
-
Please first coordinate with the design team to create Figma designs for the request card, filter component, and toast notification. Ensure that the designs align with our existing design system for consistency across the application.
-
Since the project is built using vanilla JavaScript, we should also decide on the best approach for implementing the reusable components. Consider options like Web Components, class-based components, or function-based components, depending on the requirements for maintainability and flexibility. Once we have the designs and the implementation strategy, we can proceed with development.
Checklist
- I have read and followed the project's code of conduct.
- I have searched for similar issues before creating this one.
- I have provided all the necessary information to understand and reproduce the issue.
- I am willing to contribute to the resolution of this issue.