Create components for form fields

[miherb]

1- Review the previous components for Form fields that are already developed 2- Add what it is missing to be completed with all states (Empty, Hover, Focus, Filled, Error, Validating, Success and Empty Disabled) 3- Add to Storybook.

It's here in the design file.

Done Light mode

• [x] Input
• [x] Text Area
• [x] Search bar

Dark mode

• [x] Input
• [x] Text Area
• [x] Search bar

///////////////////////////////////

Backburner (Not a priority right now)

Light mode

• [ ] Country/Lang 
Dropdown
• [ ] Password
• [ ] Number
• [ ] Phone Number
• [ ] Dropdown

Dark mode

• [ ] Dropdown
• [ ] Country/Lang 
Dropdown
• [ ] Password
• [ ] Number
• [ ] Phone Number

[highshot-rk]

Ok, No problem.

[miherb]

Part 1 done. To reopen after if needed.

[ktryndchrs]

@highshot-rk

Here is my review:

I. The font (Inter)

It does not work here on Safari & Firefox

1. We should use the variable font version here is a file accordingly: inter.woff2.zip

2. And here is the css I use to the variable version of Inter on another project (as an example)

   @font-face {
   font-family: 'Inter';
   src: url('/path_to_the_font/inter.woff2') format('woff2');
   font-weight: 100 900;  /* To define the variable weight  */
   font-style: oblique 0deg 12deg;   /* To define the variable italic */
   font-display: fallback;
   }

II. Inputs

The background is missing ( bg-gray-50 ). Which cause a weird gray background color on the disabled state.

III. Colors

The gray colour is a custom one

gray: {
  50: '#fafbfb',
  100: '#f3f4f6',
  200: '#e5e7eb',
  300: '#d1d5db',
  400: '#9ca3af',
  500: '#6b7280',
  600: '#4b5563',
  700: '#313b4a',
  800: '#222735',
  900: '#171a22'
}

As an extra, here is the brand colour style:

brand: {
  50: '#f3fcfe',
  100: '#e4f8fc',
  200: '#bdeff9',
  300: '#9ee9f5',
  400: '#6ad8e9',
  500: '#17c0d9',
  600: '#1196AE',
  700: '#0B6A7D',
  800: '#023846',
  900: '#022631'
}

Great job so far!