diff --git a/packages/bezier-react/src/components/ProgressBar/ProgressBar.mdx b/packages/bezier-react/src/components/ProgressBar/ProgressBar.mdx
new file mode 100644
index 0000000000..a57dd99c42
--- /dev/null
+++ b/packages/bezier-react/src/components/ProgressBar/ProgressBar.mdx
@@ -0,0 +1,64 @@
+import {
+ ArgsTable,
+ Canvas,
+ Story,
+} from '@storybook/addon-docs'
+import { ProgressBar } from 'Components/ProgressBar'
+
+# ProgressBar
+
+## Overview
+
+진행도를 나타낼 때 사용합니다.
+
+
+
+## Usage
+
+### Width
+
+`width` prop을 통해 ProgressBar의 너비를 지정할 수 있습니다. 기본값은 36px입니다.
+
+
+
+### Value
+
+`value` prop을 통해 ProgressBar에 진행도를 표시할 수 있습니다. 기본값은 0입니다.
+
+진행도를 나타내는 `value`는 0보다 크거나 같고 1보다 작거나 같은 수입니다. 0보다 작은 값은 0으로, 1보다 큰 값은 1로 처리합니다.
+
+
+
+## Variants
+
+### Size
+
+S, M 2개의 size가 있으며, 기본값은 M입니다.
+
+`size` prop을 통해 ProgressBar의 높이를 선택할 수 있으며, `ProgressBarSize` enum을 사용할 수 있습니다.
+
+
+
+### Color
+
+Green, Monochrome 2개의 color가 있으며, 기본값은 Green입니다.
+
+`variant` prop을 통해 ProgressBar의 active 부분 색상을 선택할 수 있으며, `ProgressBarVariant` enum을 사용할 수 있습니다.
+
+
+
+## API
+
+### ProgressBar
+
+
+
+## Version
+
+- Available since v1.0.0-next-v1.156
diff --git a/packages/bezier-react/src/components/ProgressBar/ProgressBar.stories.tsx b/packages/bezier-react/src/components/ProgressBar/ProgressBar.stories.tsx
index 6c8ae562de..abe0ffd459 100644
--- a/packages/bezier-react/src/components/ProgressBar/ProgressBar.stories.tsx
+++ b/packages/bezier-react/src/components/ProgressBar/ProgressBar.stories.tsx
@@ -1,18 +1,31 @@
/* External dependencies */
-import React from 'react'
+import React, { useState } from 'react'
import base from 'paths.macro'
-import { Story, Meta } from '@storybook/react'
+import type { Story, Meta } from '@storybook/react'
/* Internal dependencies */
-import { styled } from 'Foundation'
import { getTitle, getObjectFromEnum } from 'Utils/storyUtils'
-import ProgressBar from './ProgressBar'
+import {
+ VStack,
+ HStack,
+ StackItem,
+ Spacer,
+} from 'Components/Stack'
+import { Text } from 'Components/Text'
+import { Button } from 'Components/Button'
+import { ProgressBar } from './ProgressBar'
import type ProgressBarProps from './ProgressBar.types'
import { ProgressBarSize, ProgressBarVariant } from './ProgressBar.types'
+import mdx from './ProgressBar.mdx'
export default {
title: getTitle(base),
component: ProgressBar,
+ parameters: {
+ docs: {
+ page: mdx,
+ },
+ },
argTypes: {
size: {
control: {
@@ -40,27 +53,287 @@ export default {
},
},
},
-} as Meta
-
-const Wrapper = styled.div`
- display: flex;
- align-items: center;
- justify-content: center;
- width: 720px;
- padding: 16px;
- border: 1px solid ${({ foundation }) => foundation?.theme?.['bg-grey-light']};
-`
+} as Meta
-const Template: Story = (args) => (
-
-
-
-)
-
-export const Primary: Story = Template.bind({})
-Primary.args = {
+export const Playground: Story = (props) =>
+Playground.args = {
size: ProgressBarSize.M,
variant: ProgressBarVariant.Green,
width: '36',
value: 0.5,
}
+
+export const Overview: Story<{}> = () => {
+ const [values, setValues] = useState([0.25, 0.5, 0.75, 1])
+
+ const handleSetRandomValues = () => {
+ setValues([...Array(4)].map(() => Math.random()))
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export const UsageWidth: Story<{}> = () => (
+
+
+
+
+ 36px (default)
+
+
+
+
+
+
+
+
+
+ 80px
+
+
+
+
+
+
+
+
+
+ 200px
+
+
+
+
+
+
+
+)
+
+UsageWidth.storyName = 'Usage (width)'
+
+export const UsageValue: Story<{}> = () => (
+
+
+
+
+ 0 (default)
+
+
+
+
+
+
+
+
+
+ 0.25
+
+
+
+
+
+
+
+
+
+ 0.5
+
+
+
+
+
+
+
+
+
+ 0.75
+
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+
+
+
+
+
+ -1 (invalid value)
+
+
+
+
+
+
+
+
+
+ 3 (invalid value)
+
+
+
+
+
+
+
+)
+
+UsageValue.storyName = 'Usage (value)'
+
+export const SizeVariant: Story<{}> = () => (
+
+
+
+
+ M (6px)
+
+
+
+
+
+
+
+
+
+
+ S (4px)
+
+
+
+
+
+
+
+
+)
+
+SizeVariant.storyName = 'Variant (size)'
+
+export const Variant: Story<{}> = () => (
+
+
+
+
+ green
+
+
+
+
+
+
+
+
+
+
+ monochrome
+
+
+
+
+
+
+
+
+)
+
+Variant.storyName = 'Variant (color)'
diff --git a/packages/bezier-react/src/components/ProgressBar/ProgressBar.test.tsx b/packages/bezier-react/src/components/ProgressBar/ProgressBar.test.tsx
index 316e252220..7bbc788bbc 100644
--- a/packages/bezier-react/src/components/ProgressBar/ProgressBar.test.tsx
+++ b/packages/bezier-react/src/components/ProgressBar/ProgressBar.test.tsx
@@ -4,7 +4,10 @@ import React from 'react'
/* Interanal dependencies */
import { LightFoundation } from 'Foundation'
import { render } from 'Utils/testUtils'
-import ProgressBar, { PROGRESS_BAR_ACTIVE_TEST_ID } from './ProgressBar'
+import {
+ ProgressBar,
+ PROGRESS_BAR_ACTIVE_TEST_ID,
+} from './ProgressBar'
import type ProgressBarProps from './ProgressBar.types'
import { ProgressBarSize, ProgressBarVariant } from './ProgressBar.types'
diff --git a/packages/bezier-react/src/components/ProgressBar/ProgressBar.tsx b/packages/bezier-react/src/components/ProgressBar/ProgressBar.tsx
index 8d2540cf53..43448a9aca 100644
--- a/packages/bezier-react/src/components/ProgressBar/ProgressBar.tsx
+++ b/packages/bezier-react/src/components/ProgressBar/ProgressBar.tsx
@@ -13,7 +13,7 @@ import { StyledProgressBarWrapper, StyledProgressBarActive } from './ProgressBar
export const PROGRESS_BAR_ACTIVE_TEST_ID = 'bezier-react-progress-bar-active'
-function ProgressBar(
+export const ProgressBar = memo(forwardRef(function ProgressBar(
{
size = ProgressBarSize.M,
variant = ProgressBarVariant.Green,
@@ -50,6 +50,4 @@ function ProgressBar(
/>
)
-}
-
-export default memo(forwardRef(ProgressBar))
+}))
diff --git a/packages/bezier-react/src/components/ProgressBar/index.ts b/packages/bezier-react/src/components/ProgressBar/index.ts
index 656ba77cd1..bbc7e6fa10 100644
--- a/packages/bezier-react/src/components/ProgressBar/index.ts
+++ b/packages/bezier-react/src/components/ProgressBar/index.ts
@@ -1,4 +1,4 @@
-import ProgressBar from './ProgressBar'
+import { ProgressBar } from './ProgressBar'
import type ProgressBarProps from './ProgressBar.types'
import { ProgressBarSize, ProgressBarVariant } from './ProgressBar.types'