## Steps
### 👍 Dos
- The steps should be used in this order: "Completed", "In Progress" and "To Do". You are free to choose the quantity of steps.
- Steps should be grouped together by their type.
### 👎 Don'ts
- Don't put more than one "in progress" step.
- Don't put steps of a different type in between steps of the same type (e.g. ["Completed", "In Progress", "Completed"]). Remember that the component represents a linear progression.
#### Simple Progress example
Second Action in Progress
```jsx
```
#### Progress with all steps to do
First Action Ready to Begin
```jsx
```
#### Completed Progress example
All completed
```jsx
```
#### Slim Progress example
Second Action in Progress
```jsx
```
#### Progress with a single step in progress example
In Progress
```jsx
```
Simple danger Progress example
```jsx
{' '}
Late Second Action in Progress
```
## Line
```jsx
const Button = require('../Button').default
const ProgressComponent = () => {
const [value, setValue] = React.useState(10)
const increment = () => {
if (value < 100) {
setValue(value + 10)
}
}
const decrement = () => {
if (value > 0) {
setValue(value - 10)
}
}
return (
)
}
;
```
### Line Completed
```jsx
```