Input Component

Solution for a challenge from devChallenges.io.

Overview

Screenshot:

Live demo can be found here: https://devchallenges-input-component-pearl.vercel.app
The webpage was relatively easy to develop using Angular framework.
I used Angular 11, HTML5 and CSS3 (SCSS, CSS Grid, and Flexbox) to create the webpage.

This webpage was created as a submission to a DevChallenges (https://www.devchallenges.io/challenges) challenge. The challenge (https://devchallenges.io/challenges/TSqutYM4c5WtluM7QzGp) was to build a webpage that satisfies the following user stories:

User story: I can see error state
User story: I can choose to disable input
User story: I can choose to have helper text
User story: I can choose to have an icon on the left or right (Use Google Icon and at least 5 variants)
User story: I can have different input sizes
User story: I can have different colors
User story: I can choose to have input take the width of the parent
User story: I can have multiline input like a textarea
User story: When I hover or focus, I can see visual indicators
User story: I can still access all input attributes
User story (optional): Show input in a similar way like the design or use Storybook. Otherwise, showing the input in multiple states is enough