Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Write mdx documentation for ProgressBar component #1035

Merged
merged 9 commits into from
Nov 30, 2022
Merged

Write mdx documentation for ProgressBar component #1035

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
1284517
refactor(progress-bar): change to named export
Dogdriip Nov 17, 2022
2fcd003
docs(progress-bar.mdx): write default template of mdx docs
Dogdriip Nov 17, 2022
21055fb
docs(progress-bar.mdx): add docs, story about size variants
Dogdriip Nov 17, 2022
9e8a82a
docs(progress-bar.mdx): add docs, story about color variants
Dogdriip Nov 17, 2022
716a98c
docs(progress-bar.mdx): add docs, story about usage (width, value)
Dogdriip Nov 17, 2022
5707916
docs(progress-bar.mdx): add short overview
Dogdriip Nov 17, 2022
d99ec94
docs(progress-bar.stories): add random values playground in overview …
Dogdriip Nov 18, 2022
623b55b
fix(progress-bar.mdx): add API section via ArgsTable
Dogdriip Nov 30, 2022
26e5541
fix(progress-bar.stories): remove initial random value setting
Dogdriip Nov 30, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 64 additions & 0 deletions packages/bezier-react/src/components/ProgressBar/ProgressBar.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import {
ArgsTable,
Canvas,
Story,
} from '@storybook/addon-docs'
import { ProgressBar } from 'Components/ProgressBar'

# ProgressBar

## Overview

진행도를 나타낼 때 사용합니다.
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😢 채워주실 내용이 있다면 브랜치로 직접 푸시해 주시거나 코멘트 달아주시면 감사하겠습니다!


<Canvas>
<Story id="components-progressbar--overview" />
</Canvas>

## Usage

### Width

`width` prop을 통해 ProgressBar의 너비를 지정할 수 있습니다. 기본값은 36px입니다.

<Canvas>
<Story id="components-progressbar--usage-width" />
</Canvas>

### Value

`value` prop을 통해 ProgressBar에 진행도를 표시할 수 있습니다. 기본값은 0입니다.

진행도를 나타내는 `value`는 0보다 크거나 같고 1보다 작거나 같은 수입니다. 0보다 작은 값은 0으로, 1보다 큰 값은 1로 처리합니다.

<Canvas>
<Story id="components-progressbar--usage-value" />
</Canvas>

## Variants

### Size

S, M 2개의 size가 있으며, 기본값은 M입니다.

`size` prop을 통해 ProgressBar의 높이를 선택할 수 있으며, `ProgressBarSize` enum을 사용할 수 있습니다.

<Story id="components-progressbar--size-variant" />

### Color

Green, Monochrome 2개의 color가 있으며, 기본값은 Green입니다.

`variant` prop을 통해 ProgressBar의 active 부분 색상을 선택할 수 있으며, `ProgressBarVariant` enum을 사용할 수 있습니다.

<Story id="components-progressbar--variant" />

## API

### ProgressBar

<ArgsTable of={ProgressBar} />

## Version

- Available since v1.0.0-next-v1.156
Loading