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

[Mav-Ivan]

Description:

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

Figma

Requirements:

• Styles:

  • Follow design system variables for colors, typography, padding, and other styles.
  • Support different variants (check, middle).
  • Ensure hover, focus, active, and disabled states are defined according to the design system.
  • Provide a label for checkbox

• Props:

  • variant: Defines type (check, middle).
  • label: Provide a label for the checkbox.
  • labelPosition: Supports different positions (bottom, top, end)
  • color: Supports different colors (primary, secondary, error, success)
  • size: Supports different sizes (sm, md, lg).
  • loading: Disables the checkbox when true. When loading, the checkbox shouldn't shrink or change its size compared to its default state
  • disabled: Disables the checkbox when true.

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