import {
  Meta,
  Canvas,
  Story,
  SourceState,
  ArgsTable,
} from "@storybook/blocks";
import { ComponentHeading } from "../../storybook-components";
import { LoadingDots } from "./LoadingDots";

<Meta title="Components/Feedback/Loading Dots" component={LoadingDots} />

export const ExampleContainer = ({ ...props }) => (
  <div className="h-64" {...props} />
);

<ComponentHeading
  componentName="Loading Dots"
  description="Provides a loading animation with three dots."
  sourcePath="src/components/LoadingDots/LoadingDots.tsx"
/>

## Installation

```jsx
import { LoadingDots } from "@conveyorhq/arrow-ds";
```

## Basic usage

<Canvas withSource={SourceState.OPEN}>
  <Story name="LoadingDots">
    <LoadingDots />
  </Story>
</Canvas>

## API

Accepts a forwarded ref as well as the props listed below.

<ArgsTable of={LoadingDots} />

## Demos

### Adjust dot size and spacing

Use the `size` and `spacing` props to adjust the size of each loading dot.

<Canvas withSource={SourceState.OPEN}>
  <Story name="LoadingDots - Size and spacing">
    <LoadingDots size={8} spacing={8} />
  </Story>
</Canvas>

### Bounce animation

Set the `bounce` prop to `true` to enable a bounce animation.

<Canvas withSource={SourceState.OPEN}>
  <Story name="LoadingDots - Bounce">
    <LoadingDots size={8} spacing={8} bounce />
  </Story>
</Canvas>