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

# Text

<Meta of={TextStories} />

<br />

## Overview

텍스트를 표시하는 데 사용됩니다. 이 구성 요소는 `span` 요소를 기반으로 합니다.

UI 라이브러리에서는 기본 글꼴로 국문과 영문 모두 <strong>Noto Sans KR</strong>을 사용합니다.

<Canvas of={TextStories.Default} />

<Controls />

<br />

## Usage

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

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

<template>
  <Text>텍스트</Text>
</template>;
```

<br />

## Variant

### Color Props

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

기본 값은 `black` 입니다.

<Canvas of={TextStories.Color} />

### Weight Props

`weight` props는 컴포넌트의 텍스트 굵기를 변경합니다.

기본 값은 `medium` 입니다.

<Canvas of={TextStories.Weight} />

### Size Props

`size` props는 컴포넌트의 크기를 변경합니다.

기본 값은 `3` 입니다.

<Canvas of={TextStories.Size} />

### Align Props

`align` props는 텍스트의 정렬 방식을 지정합니다.

<Canvas of={TextStories.Align} />