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

[Mav-Ivan]

Description:

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

• Props:

  • label: Provide a label for the switch.
  • labelPosition: Supports different positions (bottom, top, end)
  • size: Supports different sizes (sm, md, lg).
  • loading: Disables the switch when true. When loading, the switch shouldn't shrink or change its size compared to its default state
  • disabled: Disables the switch when true.

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