(SP: 3) Create Alert component aligned with design system

[Mav-Ivan]

Description:

Implement a reusable Alert component that meets the design system standards. This component will be used throughout the application to maintain consistency in alert styles, behavior, and accessibility.

Figma

Requirements:

• Styles:

  • Follow design system variables for colors, typography, padding, and other styles.
  • Ensure hover, focus, active, and disabled states are defined according to the design system.
  • Provide a title for the alert.

• Props:

  • variant: Defines type (filled, outlined).
  • label: Provide a label for the Alert.
  • title : Provide a title for the Alert.
  • description: Provide a description for the Alert.
  • severity : Representing different states (success, info, error, warning).
  • icon: Optional prop, have the icon to each severity by default

Don't forget to cover component with tests and add to the storybook