import { Canvas, Controls, DocsStory, Meta } from '@storybook/blocks'
import { Installation, ResourceLinks } from '~storybook/components'
import * as ProgressStepperStories from './ProgressStepper.stories'

<Meta of={ProgressStepperStories} />

# Progress Stepper

<ResourceLinks
  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Workflow"
  figma="https://www.figma.com/file/IJTy1JpS4Xyop5cQwroRje/%F0%9F%9B%A0%EF%B8%8F-Self-reflection%3A-Build-Handoff?node-id=188%3A62005&t=x4zyx07E2G3BmKGw-1"
  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3064989884/Documentation"
/>

<Installation
  installCommand="pnpm add @kaizen/components"
  importStatement='import { Workflow } from "@kaizen/components"'
/>

## Overview

This component is used in the `Footer` to track progress of the Workflows steps.

It has no reverse variant and should only be used in the Worflow's `Footer` component.

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

## API

<DocsStory of={ProgressStepperStories.ProgressStates} />

<DocsStory of={ProgressStepperStories.AllStepsComplete} />

<DocsStory of={ProgressStepperStories.FewerSteps} />

<DocsStory of={ProgressStepperStories.EightSteps} />