carbon-components/src/components/progress-indicator/README.md

Carbon Components is a component library for IBM Cloud

### SCSS

#### Modifiers

Use these modifiers with `.bx--progress` class.

| Selector                       | Description                                    |
|--------------------------------|------------------------------------------------|
| .bx--progress-step--current    | Applies styles for the current progress-step   |
| .bx--progress-step--incomplete | Applies styles for an incomplete progress-step |
| .bx--progress-step--complete   | Applies styles for a complete progress-step    |

### Javascript

#### Getting component class reference

##### ES2015

```javascript
import { ProgressIndicator } from 'carbon-components';
```

##### With pre-build bundle (`carbon-components.min.js`)

```javascript
var ProgressIndicator = CarbonComponents.ProgressIndicator;
```

#### Instantiating

```javascript
// `#my-progress` is an element with `[data-progress]` attribute
ProgressIndicator.create(document.getElementById('my-progress'));
```

#### Public Methods

| Name       | Params                   | Description                                                                                                                                                                                                                                                    |
|------------|--------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| getSteps   |                          | Returns Array of Objects with `element` and `order` key/value pairs. The `element` key contains a step element. The `order` key is what order the step element is, order starts counting from 1 (the first step element) to whatever the last step element is. |
| getCurrent |                          | Returns an Object with data of the current step (`element` and `order` key/value pairs)                                                                                                                                                                        |
| setCurrent | newCurrentStep: `Number` | Changes the current step with the given `index` number. (ex. `setCurrent(0)` sets the first step as the current step)                                                                                                                                          |

##### Example - Changing the current step

```javascript
// `#my-progress` is an element with `[data-progress]` attribute
var progressIndicatorInstance = ProgressIndicator.create(document.getElementById('my-progress'));
// Sets the 2nd step current
progressIndicatorInstance.setCurrent(1);
```

- All index numbers less than the current index will be complete
- All index numbers greater than the current index will be incomplete

#### Options

| Option                | Default Selector                 | Description                                         |
|-----------------------|----------------------------------|-----------------------------------------------------|
| `selectorInit`        | `[data-progress]`                | The selector to find the ProgressIndicator element. |
| `selectorStepElement` | `.bx--progress-step`             | The selector to find the step element.              |
| `selectorCurrent`     | `.bx--progress-step--current`    | The selector to find the step current step element. |
| `selectorIncomplete`  | `.bx--progress-step--incomplete` | The selector to find incomplete step elements.      |
| `selectorComplete`    | `.bx--progress-step--complete`   | The selector to find complete step elements.        |
| `classStep`           | `bx--progress-step`              | ClassName for step element                          |
| `classCompleteStep`   | `bx--progress-step--complete`    | ClassName for complete step element                 |
| `classIncompleteStep` | `bx--progress-step--incomplete`  | ClassName for incomplete step element               |
| `classCurrent`        | `bx--progress-step--current`     | ClassName for current step element                  |

#### Classes

| Name                             | Description                                         |
|----------------------------------|-----------------------------------------------------|
| `bx--progress-step`              | The class for a step element                        |
| `bx--progress-step--complete`    | The class for a complete step element               |
| `bx--progress-step--incomplete`  | The class for an incomplete step element            |
| `bx--progress-step--current`     | The class for a current step element                |

### FAQ

#### Adding or removing Progress steps

Once `ProgressIndicator` instance is initialized, simply add or remove Progress steps in the HTML. The JavaScript will automatically acommodate for any number of steps. A Progress step in HTML looks like this:

```html
<li class="bx--progress-step bx--progress-step--complete">
  <svg width="24px" height="24px" viewBox="0 0 24 24">
    <circle cx="12" cy="12" r="12"></circle>
    <polygon points="10.3 13.6 7.7 11 6.3 12.4 10.3 16.4 17.8 9 16.4 7.6"></polygon>
  </svg>
  <p class="bx--progress-label">Label 1</p>
  <span class="bx--progress-line"></span>
</li>
```

Note that each progress step will need a modifier class. In the example above, it is `bx--progress-step--complete`, but the JavaScript will set this to the appropriate modifier class relative to the current step as indicated by `bx--progress-step--incomplete`.