Progress - Design System

# Progress - Design System

## 1 - Prerequisites

- Host element will have the `.dcx-progress` class name

## 2 - Overview

### 2.1 - Possible states

| Name | Description |
| ------- | -------------------------------------------- |
| Default | Instance without specific properties defined |

### 2.2 - Variants

- No variants

### 2.3 - Structure

| Element | Description |  Token Name |
| ----------- | ---------------------- | --------------------- |
| ProgressBox | Container native Input | spacing-x-formcontrol |
| Progress | Native progress itself |  formcontrol |

### 2.4 - Tokens definition

Considerations:

- 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:

- spacing-x-formcontrol
- color-background-progress_box
- color-background-formcontrol
- 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/progress-design-system'
```