import { Canvas, Meta, Controls } from '@storybook/addon-docs';
import * as SeparatorStories from './Separator.stories';

# Separator

<Meta of={SeparatorStories} />

<br />

## Overview

시각적, 의미적으로 콘텐츠를 구분하는 선입니다.

<Canvas of={SeparatorStories.Default} />

<Controls />

<br />

## API Reference

<table>
  <tr>
    <th>Props</th>
    <th>Type</th>
    <th>Default</th>
  </tr>
  <tr>
    <td>orientation</td>
    <td>"horizontal" | "vertical"</td>
    <td>"horizontal"</td>
  </tr>
</table>

## Usage

기본적인 <strong>Separator</strong> 컴포넌트 사용방법 입니다.

```javascript
import { Separator } from '@lotte-innovate/lui';

<Separator orientation={'horizontal'} {...args} />
<Separator orientation={'vertical'} {...args} />
```

<br />

## Variant

### Orientation Props

`orientation` props는 컴포넌트의 방향을 변경합니다.

기본 값은 `horizontal` 입니다.

### Horizontal Size

<Canvas of={SeparatorStories.Horizontal} />

Separator 컴포넌트가 수평일 경우 사이즈 별로 나타낸 모습입니다.

### Vertical Size

<Canvas of={SeparatorStories.Vertical} />

Separator 컴포넌트가 수직일 경우 사이즈 별로 나타낸 모습입니다.