import { Meta, Canvas, Story, SourceState } from "@storybook/blocks";
import { ComponentHeading } from "../../storybook-components";
import { Heading } from "../Heading";
import { Box } from "../Box";
import { Skeleton } from "./Skeleton";

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

<ComponentHeading
  componentName="Skeleton"
  description="Used as a placeholder to indicate that content is being loaded into an area of the app"
  sourcePath="src/components/Skeleton/Skeleton.tsx"
/>

## Installation

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

## Basic usage

<Canvas>
  <Story name="Skeleton">
    <Skeleton />
  </Story>
</Canvas>

## API

Extends BoxProps

## Demos

### Height

`Skeleton` will inherit the current font size and adjust its height accordingly.

<Canvas withSource={SourceState.OPEN}>
  <Story name="Skeleton variant">
    <Box>
      <Heading.H1 className="mb-4">
        H1
        <Skeleton />
      </Heading.H1>
      <Heading.H2 className="mb-4">
        H2
        <Skeleton />
      </Heading.H2>
      <Heading.H3 className="mb-4">
        H3
        <Skeleton />
      </Heading.H3>
      <p className="mb-4">
        paragraph
        <Skeleton />
      </p>
    </Box>
  </Story>
</Canvas>