Form Input Masked - Design System

# Form Input Masked - Design System

## 1 - Prerequisites

- Host element will have the `.dcx-form-input-masked` class name
- Host element will have conditional classes for filled state `.dcx-form-input--filled` class name

## 2 - Overview

### 2.1 - Possible states

| Name | Description |
| -------- | ---------------------------------------------- |
| Default | Instance without specific properties defined |
| Disabled | Instance with native input disabled |
| Filled | Instance with value |
| Focus | Instance while receiving focus on native input |

### 2.2 - Variants

- No variant specified

### 2.3 - Structure

| Element | Description |  Token Name |
| -------------- | ----------------------- | ------------ |
| InputMaskedBox | The native input itself |  formcontrol |

When developing take a close look to the FormSelect component. It is a form element as well, the tokens and styling approach should be similar.

### 2.4 - Tokens definition

Considerations:

- ❗ Take a close look to the FormSelect component. It is a form element as well, the tokens and styling approach should be similar.
- Add the tokens to `src/design-system/tokens.json`
- Define all styles in `src/design-system/forminput.css`
- Add import to the new CSS file in `src/design-system/index.css`

Possible tokens:

- color-text-formcontrol
- color-text-formcontrol-filled
- etc.

Follow the [naming pattern](https://github.com/Capgemini/dcx-react-library/wiki/Contributing#11---naming-pattern)

## 3 - Storybook

Create the pages for:

- Playground
- Default
- AccessibleTheme
- DarkTheme
- MaterialTheme

On each MDX page make examples for each possible variant

## 4 - Initial setup

Please follow these steps to create your branch:

```bash
git checkout release/1.1.0
git pull
git checkout -b 'feature/forminput-design-system'
```