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

<Meta title="Components/Layout/Panel" component={Panel} />

<ComponentHeading
  componentName="Panel"
  description="A stylized Box with built-in background and border color defaults"
  sourcePath="src/components/Panel/Panel.tsx"
/>

## Installation

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

## Basic usage

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

## API

<ArgsTable of={Panel} />

## Demos

### With padding

<Canvas withSource={SourceState.OPEN}>
  <Story name="Panel padding">
    <Panel className="p-8">
      This is the default Panel component with padding
    </Panel>
  </Story>
</Canvas>

### Controlling borders

The borders can be set to single, individual sides, or all sides (default).

#### With a top border

<Canvas withSource={SourceState.OPEN}>
  <Story name="Panel top border">
    <Panel border="top" className="p-8">
      This is the Panel component with only a top border
    </Panel>
  </Story>
</Canvas>

#### With a bottom border

<Canvas withSource={SourceState.OPEN}>
  <Story name="Panel bottom border">
    <Panel border="bottom" className="p-8">
      This is the Panel component with only a bottom border
    </Panel>
  </Story>
</Canvas>

#### With a left border

<Canvas withSource={SourceState.OPEN}>
  <Story name="Panel left border">
    <Panel border="left" className="p-8">
      This is the Panel component with only a left border
    </Panel>
  </Story>
</Canvas>

#### With a right border

<Canvas withSource={SourceState.OPEN}>
  <Story name="Panel right border">
    <Panel border="right" className="p-8">
      This is the Panel component with only a right border
    </Panel>
  </Story>
</Canvas>

### Without a background color

<Canvas withSource={SourceState.OPEN}>
  <Story name="Panel no background">
    <Panel background="none" className="p-8">
      This is the Panel component without a background
    </Panel>
  </Story>
</Canvas>