[FEAT] - Components → Input

stephen-gift commented 3 months ago

Description

Create a versatile Input component with customizable features including error handling, label, helper text, optional button integration, inline label positioning, and disabled state.

Acceptance Criteria

Implement an Input component that supports error handling, label, helper text, button integration, inline label positioning, and disabled state.
Ensure the component is visually appealing and functional across different configurations.
Maintain accessibility standards with appropriate aria attributes.

Requirements

The Input component should support the following props:

error?: any - Optional prop to handle error state.
label?: string - Optional label for the input field.
helperText?: string | React.ReactNode - Optional helper text or component.
button?: React.ReactNode - Optional button component to be placed beside the input field.
inline?: boolean - Optional boolean to position label inline with the input field.
isDisabled?: boolean - Optional boolean to disable the input field.

Testing

Verify that the Input component renders correctly with various configurations of props.
Test error handling functionality with different error types.
Ensure button integration works as expected.
Test inline label positioning and disabled state.
Conduct accessibility testing to ensure screen reader compatibility.

Tasks

[ ] Component Development: Develop the Input component based on the specified requirements.
[ ] Props Implementation: Implement support for error, label, helperText, button, inline, and isDisabled props.
[ ] Styling: Ensure consistent styling and layout across different configurations.
[ ] Unit Testing: Write unit tests to validate component behavior.
[ ] Accessibility Testing: Verify accessibility features are properly implemented.
[ ] Documentation: Update documentation with usage examples and prop details.

Images

Default Input

Size=default, State=default, type=default

Inline label

Size=small, State=default, type=label to the left

Link

Figma Link

JulianaSau commented 3 months ago

@Benieytah you can assign yourself once its approved

JulianaSau commented 3 months ago

@stephen-gift update the task to merge issues #122 #108 and #211 into this one to form one task This issue should handle matching the input component from shadcn with the design, and the different variants provided in the design

Benieytah commented 3 months ago

@Benieytah you can assign yourself once its approved

How can i be approved ? I read that we can assign ourselves to issues we can deliver

JulianaSau commented 3 months ago

@Benieytah you can assign yourself once its approved

How can i be approved ? I read that we can assign ourselves to issues we can deliver

I said it's. meaning the issue. As per the instructions, you attach yourself to an approved issue. this one is still in review. So once it's updated and approved, you can attach yourself to it.

hngprojects / hng_boilerplate_nextjs