CharacterCount - Design System

# CharacterCount - Design System

## 1 - Prerequisites

* Host element will have the `.dcx-character-count` class name
* Host element will have conditional classes for error state `.dcx-character-count--error` class name
* Host element will have conditional classes for filled state `.dcx-character-count--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 |
| Error | Instance with validation errors |

### 2.2 - Variants

| Name | Description |
| --- | --- |
| Default | Default look & feel |
| Floating | Same as FormSelect we can have a floating label effect |

### 2.3 - Structure

| Element | Description | Token Name |
| --- | ---| --- |
| CharacterCountBox | The native input itself | formcontrol |
| Label | The label element, acts as placeholder too | formcontrol_label |
| Error | The error message | formcontrol_error |
| Hint | The hint message | formcontrol_hint |

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
* color-text-formcontrol-error
* color-text-formcontrol-floating-filled
* color-text-formcontrol_label
* color-text-formcontrol_label-filled
* color-text-formcontrol_label-error
* color-text-formcontrol_label-floating-error
* 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'
```