import { Badge } from 'terra-progress-bar/package.json?dev-site-package';

import ProgressBarDefault from './example/ProgressBarDefault?dev-site-example';
import ProgressBarSize from './example/ProgressBarSize?dev-site-example';
import ProgressBarColor from './example/ProgressBarColor?dev-site-example';
import ProgressBarTwoColors from './example/ProgressBarTwoColors?dev-site-example';
import ProgressBarCustomText from './example/ProgressBarCustomText?dev-site-example';

import ProgressBarPropsTable from 'terra-progress-bar/lib/ProgressBar?dev-site-props-table';

<Badge />

# Terra Progress Bar

The progress bar component provides users a way to display the progress of process or activity in a graphical manner. It can be modified
in height and fill color. Its styling is set such that, the `ProgressBar` element will occupy full width of its parent element and will
flex based on the width of the parent container.

Note: The progress bar displays fill with respect to percentage (value between 0 and 100). If `max` isn't specified in the input to the component, then `value` corresponds to a percentage value.

## Getting Started

- Install with [npmjs](https://www.npmjs.com):
  - `npm install terra-progress-bar`

<!-- AUTO-GENERATED-CONTENT:START Peer Dependencies -->
## Peer Dependencies

This component requires the following peer dependencies be installed in your app for the component to properly function.

| Peer Dependency | Version |
|-|-|
| react | ^16.8.5 |
| react-dom | ^16.8.5 |
| react-intl | ^2.8.0 |

<!-- AUTO-GENERATED-CONTENT:END -->

## Usage

```jsx
import ProgressBar from 'terra-progress-bar';
```

### Color Class

```css
:root {
  --my-app-progress-bar-example-1-background-color: rgb(255, 165, 0);
  --my-app-progress-bar-example-2-background-color: #8ccc62;
  --my-app-progress-bar-example-3-background-color: rgb(255, 0, 0);
}

:local {
  .color-bar-example-1 {
    color: var(--my-app-progress-bar-example-1-background-color, rgb(255, 165, 0));
    &::-webkit-progress-value { background-color: var(--my-app-progress-bar-example-1-background-color, rgb(255, 165, 0)); }
    &::-moz-progress-bar { background-color: var(--my-app-progress-bar-example-1-background-color, rgb(255, 165, 0)); }
    &::-ms-fill { background-color: var(--my-app-progress-bar-example-1-background-color, rgb(255, 165, 0)); }
  }

  .color-bar-example-2 {
    color: var(--my-app-progress-bar-example-2-background-color, #8ccc62);
    &::-webkit-progress-value { background-color: var(--my-app-progress-bar-example-2-background-color, #8ccc62); }
    &::-moz-progress-bar { background-color: var(--my-app-progress-bar-example-2-background-color, #8ccc62); }
    &::-ms-fill { background-color: var(--my-app-progress-bar-example-2-background-color, #8ccc62); }
  }

  .color-bar-example-3 {
    color: var(--my-app-progress-bar-example-3-background-color, rgb(255, 0, 0));
    &::-webkit-progress-value { background-color: var(--my-app-progress-bar-example-3-background-color, rgb(255, 0, 0)); }
    &::-moz-progress-bar { background-color: var(--my-app-progress-bar-example-3-background-color, rgb(255, 0, 0)); }
    &::-ms-fill { background-color: var(--my-app-progress-bar-example-3-background-color, rgb(255, 0, 0)); }
  }
}
```

## Component Features
* [Cross-Browser Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#cross-browser-support)
* [Responsive Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#responsive-support)
* [Mobile Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#mobile-support)

## Examples
<ProgressBarDefault title="Default" />
<ProgressBarCustomText title="Custom Text" />
<ProgressBarSize title="Size" />
<ProgressBarColor title="Color" description="By passing in a colorClass, authors can manually set the bar color of any `<ProgressBar />` component."/>
<ProgressBarTwoColors title="Foreground and Background Color" description="By passing in a colorClass, authors can manually set the bar color of any `<ProgressBar />` component."/>

## Progress Bar Props
<ProgressBarPropsTable />