(SP: 5) Create Chip component aligned with design system

[Mav-Ivan]

Description:

Implement a reusable Chip component that meets the design system standards. This component will be used throughout the application to maintain consistency in chip 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.

• Props:

  • type: Supports different types (filter, input, categories, state).
  • variant: Depending on type can have different variants (filled, outlined, filled & outlined ).
  • label: Provide a label for the chip.
  • size: Supports different sizes (sm, md, lg).
  • startIcon: Depending on the type can have startIcon.
  • endIcon: Depending on the type can have endIcon.

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