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

[Mav-Ivan]

Description:

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

Figma

Requirements:

• Styles:

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

• Props:

  • variant: Defines type (large, small, outlined).
  • label: Provide a label for the inputField.
  • disabled: Disables the inputField when true.
  • value: Provides the value to the component.
  • placeholder: Supports placeholder for component.
  • helperText: Supports helperText in giving user hints or warnings.
  • error: Supports error text and error icon in giving user hints or warnings when true
  • onChange : A callback function to handle input changes.
  • search : adds a search icon when true
  • sx: The sx prop will accept a style object that can be merged with the existing styles.

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