import { StackItem, VStack } from '~/src/components/Stack'
import * as BannerStories from './Banner.stories'
import { ArgTypes, Canvas, Meta, Story } from '@storybook/addon-docs'

<Meta of={BannerStories} />

# Banner

## Overview

안내, 경고, 추천 등의 다양한 정보를 잘 전달하고 싶을 때 사용합니다.

<Canvas of={BannerStories.Overview} />

## Usage

- 최소 너비는 200px입니다.

<Canvas of={BannerStories.UsageMinWidth} />

- Parent의 너비를 가득 채웁니다.

<Canvas of={BannerStories.UsageFullWidth} />

- 최대 너비는 없으나, Banner의 텍스트 영역은 좌측 상단에 위치합니다.

<Canvas of={BannerStories.UsageMaxWidth} />

- 연속으로 보여줘야 하는 경우, Banner 간의 간격은 6px 입니다.

<Canvas of={BannerStories.UsageConsecutive} />

- 아이콘을 제거하여 사용할 수 있습니다.

<Canvas of={BannerStories.UsageNoIcon} />

### Link

- 링크가 필요한 경우, 마지막에 bold, underlined text로 들어가게 됩니다.
- `hasLink={true}` prop을 통해 링크를 enable하고, `linkText` prop으로 링크의 텍스트를 설정할 수 있습니다.

<Canvas of={BannerStories.UsageLink} />

- `linkTo` prop을 활용하면, 링크를 클릭했을 때 이동할 location을 지정할 수 있습니다.
- 기본적으로, 링크를 클릭하면 새 탭으로 해당 location이 열리게 됩니다. (`<a>` 태그, `target="_blank"`, `rel="noopener noreferrer"` 를 기본으로 합니다.)

<Canvas of={BannerStories.UsageLinkTo} />

- Default로 제공되는 링크 메커니즘을 이용할 수 없는 경우가 있습니다. (대표적인 usecase는, SPA에서 `react-router`와 같은 라이브러리가 제공하는 링크 컴포넌를 활용하는 경우입니다.) 이 경우, `renderLink` prop을 지정하여 링크를 어떤 컴포넌트로 렌더링할지 결정할 수 있습니다.

```tsx
import { Link } from 'react-router-dom'

const renderLink = ({ content, linkTo }) => <Link to={linkTo}>{ content }</Link>

<Banner
  ...
  renderLink={renderLink}
/>
```

## API

<ArgTypes of={BannerStories} />

## Version

- Available since v1.0.0-next-v1.53