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

<Meta title="Components/Feedback/Sparkles" component={Sparkles} />

<ComponentHeading
  componentName="Sparkles"
  description="Use to playfully highlight something"
  sourcePath="src/components/Sparkles/Sparkles.tsx"
/>

## Installation

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

## Basic usage

<Canvas withSource={SourceState.OPEN}>
  <Story name="Sparkles">
    <Sparkles>This is the Sparkles component.</Sparkles>
  </Story>
</Canvas>

Usage guidelines or other high-level information about the component goes here.

## API

<ArgsTable of={Sparkles} />

## Demos

### On a button

Pointer events are disabled on the sparkles so that clickable elements are
still clickable.

<Canvas withSource={SourceState.OPEN}>
  <Story name="Sparkles on a button">
    <Sparkles>
      <Button>Edit</Button>
    </Sparkles>
  </Story>
</Canvas>