Description: The Notification component displays important messages to users, such as alerts, warnings, successes, and informational updates. It enhances user engagement and informs them of critical events or system statuses, typically appearing as a temporary message with an optional close button.

Requirements:

1. Component Implementation:

• Implement the Notification component in TypeScript.
• Utilize SCSS with BEM methodology for styling.
• Integrate design tokens from @geneui/tokens for consistent colors, font sizes, spacing, and notification styles.
• Support different types of notifications (e.g., success, warning, error, info) with corresponding iconography and color themes.
• Allow options for dismissible notifications (with a close button), auto-dismiss with configurable timeout, and persistent messages.
• Include animations for appearing and disappearing notifications.
• Ensure accessibility features like ARIA roles (alert, status) and keyboard navigation.

2. Unit Tests:

• Write unit tests using Jest and React Testing Library.
• Ensure test coverage for all props, including rendering different notification types, icon presence, and dismiss functionality.
• Test for edge cases, such as unsupported notification types, missing content, and invalid timeout values.
• Storybook Stories:

3. Storybook Stories:

• Create a Storybook story for the Notification component.
• Showcase different notification types (e.g., success, error, warning, info) with icons, close buttons, and timeout variations.
• Create controls for the props so users can interact with the Notification component in Storybook.
• Document all props of the public interfaces.

4. Figma Design:

Follow the design outlined in the provided Figma link.

Checklist:

• omponent is implemented in TypeScript.
• Styling follows SCSS using BEM methodology.
• Design tokens from @geneui/tokens are used for colors, font sizes, spacing, and notification styles.
• Unit tests written and cover different states and edge cases.
• Storybook stories created with examples of all props and notification types.
• Figma design matches the component implementation.