Toggle - Design System

# Toggle - Design System

## 1 - Prerequisites

- Host element will have the `.dcx-toggle` class name
- Host element will have sub-element with `.dcx-toggle-custom-on-label` class name
- Host element will have sub-element with `.dcx-toggle-custom-off-label` class name

## 2 - Overview

### 2.1 - Possible states

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

### 2.2 - Variants

| Name | Description |
| ------- | ------------------- |
| Default | Default look & feel |

### 2.3 - Structure

| Element | Description |  Token Name |
| -------------- | ------------------------------- | ------------------ |
| InputBox | The container box label element |  formcontro_boxl |
| Input | The native input itself |  formcontrol |
| CustomOnLabel | The label custom element |  formcontrol_label |
| CustomOffLabel | The label custom element |  formcontrol_label |

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/toggle.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_label
- color-text-formcontrol_label-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.0.0
git pull
git checkout -b 'feature/toggle-design-system'
```