@aurigma/ui-framework/docs/widgets/steps.md

A platform which allows building print product personalization editors based on Aurigma's Customer's Canvas.

Steps
=====

This _non-visual_ widget is used to control what steps are available for the user. By default, a user can jump to any step, but you can limit them only by the next and previous or all visited steps. It is also possible to add some rules for the availability of a particular step.

## General info

- **type**: `steps`

## Params

- `availabilityMode` - the possible values are `visible` and `previous`. For `visible`, the user can visit the next step and all previously visited steps. For `previous`, the user can visit only the next step and all previous steps. If omitted, all steps are available.

  To understand the difference, consider the following situation. There is a 4-step config. A user starts from Step 1, then goes to Step 2, and then goes back to Step 1.
   - For `visited`, Step 1, 2, and 3 are available. Step 4 is not available (unless the user goes to Step 3).
   - For `previous`, only Step 1 and 2 are available. Step 3 and 4 are locked.

- `steps` - a dictionary object where the key is a step title or index (zero-based) and the value is an object like `{enabled: true|false}`. It allows you to override the availability mode of a particular step.

## Examples

### Visited mode

``` json
{
    "name": "steps",
    "type": "steps",
    "params": {
        "availabilityMode": "visited"
    }
}
```

### Previous-only mode

``` json
{
    "name": "steps",
    "type": "steps",
    "params": {
        "availabilityMode": "previous"
    }
}
```

### Overriding availability

Let's assume than on the Step 2 we have a checkbox. We don't want to proceed to the Step 3 unless the user sets this checkbox.

``` json
{
    "widgets": [
        {
            "name": "steps",
            "type": "steps",
            "params": {
                "availabilityMode": "visited",
                "steps": {
                    "Step 3": {
                        "enabled": "{{$['confirmation-checkbox']._}}"
                    }
                }
            }
        },
        {
            "name": "confirmation-checkbox",
            "type": "checkbox",
            "params": {
                "value": false,
                "prompt": "I confirm that I am ready for Step 3."
            }
        }
    ],
    "steps": [{
        "title": "Step 1",
        ...
    },{
        "title": "Step 2",
        ...
    }{
        "title": "Step 3",
        ...
    }]
}

```

## See also

- [FinishButton widget](finish-button.md)
- [Checkbox widget](checkbox.md)