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

# Toast

<Meta of={ToastStories} />

<br />

## Overview

팝업 UI형태로 화면 하단에 일시적으로 노출되는 메시지 창 컴포넌트입니다.

<Canvas of={ToastStories.Default} />

<Controls />

<br />

## Usage

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

```vue
import { Toast } from '@lotte-innovate/lui-vue';

<template>
  <ToastRoot>
    <ToastTitle></ToastTitle>
    <ToastDescription></ToastDescription>
    <ToastActionButton></ToastActionButton>
  </ToastRoot>
</template>
```

<br />

## API Reference

### Root

`Toast`의 모든 부분을 포함합니다.

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>as</td>
      <td>AsTag | Component</td>
      <td>
        이 구성 요소가 렌더링되어야 하는 요소 또는 구성 요소입니다. asChild로 덮어쓸 수 있습니다.
      </td>
      <td>li</td>
    </tr>
    <tr>
      <td>asChild</td>
      <td>boolean</td>
      <td>자식으로 전달된 기본 렌더링 요소를 변경하여 해당 props와 동작을 병합합니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>defaultOpen</td>
      <td>boolean</td>
      <td>
        처음 렌더링될 때 Toast의 열린 상태입니다. 열린 상태를 제어할 필요가 없을 때 사용합니다.
      </td>
      <td>true</td>
    </tr>
    <tr>
      <td>duration</td>
      <td>number</td>
      <td>Toast가 계속 표시되어야 하는 시간(밀리초)입니다</td>
      <td>3000</td>
    </tr>
    <tr>
      <td>open</td>
      <td>boolean</td>
      <td>Toast의 제어된 열린 상태입니다. v-model:open으로 바인딩할 수 있습니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>type</td>
      <td>'foreground' | 'background'</td>
      <td>
        접근성을 위해 `Toast`의 감도를 제어합니다. 사용자 작업의 결과인 알림의 경우 전경을
        선택합니다. 백그라운드 작업에서 생성된 알림은 백그라운드를 사용해야 합니다.
      </td>
      <td>foreground</td>
    </tr>
  </tbody>
</table>

### Title

`Toast`의 제목 영역입니다.

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>as</td>
      <td>AsTag | Component</td>
      <td>
        이 구성 요소가 렌더링되어야 하는 요소 또는 구성 요소입니다. asChild로 덮어쓸 수 있습니다.
      </td>
      <td>div</td>
    </tr>
    <tr>
      <td>asChild</td>
      <td>boolean</td>
      <td>자식으로 전달된 기본 렌더링 요소를 변경하여 해당 props와 동작을 병합합니다.</td>
      <td></td>
    </tr>
  </tbody>
</table>

### Description

`Toast`의 메세지 영역입니다.

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>as</td>
      <td>AsTag | Component</td>
      <td>
        이 구성 요소가 렌더링되어야 하는 요소 또는 구성 요소입니다. asChild로 덮어쓸 수 있습니다.
      </td>
      <td>div</td>
    </tr>
    <tr>
      <td>asChild</td>
      <td>boolean</td>
      <td>자식으로 전달된 기본 렌더링 요소를 변경하여 해당 props와 동작을 병합합니다.</td>
      <td></td>
    </tr>
  </tbody>
</table>

### ActionButton

`Toast`를 닫거나 액션 역할을 하는 버튼입니다.

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>altText*</td>
      <td>string</td>
      <td>
        스크린 리더 사용자들이 버튼으로 쉽게/빠르게 이동할 수 없는 경우에 대한 대체 방법을 설명하는
        짧은 설명입니다.
      </td>
      <td></td>
    </tr>
    <tr>
      <td>as</td>
      <td>AsTag | Component</td>
      <td>
        이 구성 요소가 렌더링되어야 하는 요소 또는 구성 요소입니다. asChild로 덮어쓸 수 있습니다.
      </td>
      <td>div</td>
    </tr>
    <tr>
      <td>asChild</td>
      <td>boolean</td>
      <td>자식으로 전달된 기본 렌더링 요소를 변경하여 해당 props와 동작을 병합합니다.</td>
      <td></td>
    </tr>
  </tbody>
</table>

## Variant

### Color

`color` props는 컴포넌트의 배경색을 변경합니다.

`information`, `danger`, `warning`, `success` 4가지의 Semantic Color를 사용합니다.

`color` props를 지정하지 않을 시 토스트의 배경색이 하얀색으로 나타납니다.

{/* <Canvas of={ToastStories.Color} /> */}

### Title 없는 경우

`Description`과 `ActionButton` 으로 이루어진 경우입니다.

{/* <Canvas of={ToastStories.NoTitleToast} /> */}

### ActionButton 없는 경우

`Title`과 `Description` 으로 이루어진 경우입니다.

{/* <Canvas of={ToastStories.NoButtonToast} /> */}