import { Canvas, Controls, DocsStory, Meta } from '@storybook/blocks'
import { ResourceLinks, KAIOInstallation } from '~storybook/components'
import * as ProgressBarStories from './ProgressBar.stories'

<Meta of={ProgressBarStories} />

# ProgressBar

<ResourceLinks
  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/ProgressBar"
  figma="https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-UI-Kit%3A-Heart?type=design&node-id=1929%3A20889&mode=design&t=mSqG0g2n5Iquqx6m-1"
  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896891/Progress+Bar"

/>

<KAIOInstallation exportNames="ProgressBar" />

## Overview

Progress bars show continuous progress through a process, such as a percentage value. They show how much progress is complete and how much remains.

<Canvas of={ProgressBarStories.Playground} />
<Controls of={ProgressBarStories.Playground} />

## API

### isAnimating

Adds an animated state that indicates system processes, such as downloading, uploading, or processing.

<Canvas of={ProgressBarStories.IsAnimating} />

### Colors

<Canvas of={ProgressBarStories.Colors} />

### Value and max

While `value` and `max` can be used to represent progress as either a percentage or fraction, screen readers will always announce this as a calculated percentage.

<Canvas of={ProgressBarStories.ValueAndMax} />

<DocsStory of={ProgressBarStories.Reversed} />

### Accessible context

Due to the optional `label` prop, the progress bar does not have an accessible name. You can provide context for assistive technologies with aria attributes such as `aria-label` or `aria-labelledby`.

<Canvas of={ProgressBarStories.AccessibleName} />