import Example from "../../components/example";
import Layout from "../../components/layout";
import Exports from "../../components/exports";

import ProgressStepsDotted from "examples/progress-steps/dotted";
import ProgressStepsNumbered from "examples/progress-steps/numbered";
import ProgressStepsHorizontal from "examples/progress-steps/horizontal";

import { ProgressSteps, Step, NumberedStep } from "baseui/progress-steps";
import * as ProgressStepsExports from "baseui/progress-steps";
import { Block } from "baseui/block";

import Yard from "../../components/yard/index";
import progressStepsYardConfig from "../../components/yard/config/progress-steps";
import progressStepsNumberedYardConfig from "../../components/yard/config/progress-steps-numbered";

export default Layout;

# Progress steps

<Yard placeholderHeight={20} {...progressStepsYardConfig} />

## Numbered progress steps

<Yard
  placeholderHeight={20}
  queryStringName="numbered-steps-state"
  {...progressStepsNumberedYardConfig}
/>

Progress lists in Base are used to denote staged progress of an action or activity. This
list type provides the user with a sense of awareness around progress and the steps remaining.

## Examples

<Example title="Progress Steps Dotted Usage" path="progress-steps/dotted.tsx">
  <ProgressStepsDotted />
</Example>

<Example
  title="Progress Steps Numbered Usage"
  path="progress-steps/numbered.tsx"
>
  <ProgressStepsNumbered />
</Example>

<Example
  title="Progress Steps Horizontal Usage"
  path="progress-steps/horizontal.tsx"
>
  <ProgressStepsHorizontal />
</Example>

<Exports
  component={ProgressStepsExports}
  title="Progress Steps exports"
  path="baseui/progress-steps"
/>