[ ] Expand the component's functionality by adding three new onClick event handlers:
onClickCopy: Triggered when a copy action is initiated.
onClickPreview: Triggered when the preview option is selected.
onClickUse: Triggered when the use option is selected.
Ensure that these handlers are optional props and provide default implementations that can be easily overridden.
Icon Customization:
[ ] Replace the static import of MoreHorizIcon with a dynamic approach that allows different icons to be used based on the context where the CardWithHover is used.
[ ] Implement a prop to pass any icon component (e.g., from @mui/icons-material or custom SVGs) which will replace the default MoreHorizIcon. This prop should allow the color of the icon to be customized to match the theme of the card.
Implementation Notes:
Use Material-UI theming conventions to ensure that the component remains consistent with the rest of the application’s design.
Include PropTypes for new props to ensure proper usage and integrate seamlessly with existing types.
Provide examples in the documentation on how to customize the background color and icons.
Acceptance Criteria:
The background color should change according to the specified prop with a sensible default.
onClickCopy, onClickPreview, and onClickUse must function correctly and should log actions to the console if no other handlers are provided.
Icons should be customizable in terms of the component used and its color, and this should be demonstrated in the storybook with at least three variations.
Please ensure all code changes are accompanied by unit tests that verify both the existing and new functionality.
Tasks:
onClickCopy: Triggered when a copy action is initiated. onClickPreview: Triggered when the preview option is selected. onClickUse: Triggered when the use option is selected.
Ensure that these handlers are optional props and provide default implementations that can be easily overridden. Icon Customization:
[ ] Replace the static import of MoreHorizIcon with a dynamic approach that allows different icons to be used based on the context where the CardWithHover is used.
[ ] Implement a prop to pass any icon component (e.g., from @mui/icons-material or custom SVGs) which will replace the default MoreHorizIcon. This prop should allow the color of the icon to be customized to match the theme of the card.
Implementation Notes: Use Material-UI theming conventions to ensure that the component remains consistent with the rest of the application’s design. Include PropTypes for new props to ensure proper usage and integrate seamlessly with existing types. Provide examples in the documentation on how to customize the background color and icons. Acceptance Criteria: The background color should change according to the specified prop with a sensible default. onClickCopy, onClickPreview, and onClickUse must function correctly and should log actions to the console if no other handlers are provided. Icons should be customizable in terms of the component used and its color, and this should be demonstrated in the storybook with at least three variations. Please ensure all code changes are accompanied by unit tests that verify both the existing and new functionality.