89 lines
2.3 KiB
TypeScript
89 lines
2.3 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react'
|
|
import { Descriptions } from './Descriptions'
|
|
|
|
const meta = {
|
|
title: 'Components/Descriptions',
|
|
component: Descriptions,
|
|
argTypes: {
|
|
column: {
|
|
control: 'select',
|
|
options: [1, 2, 3, 4],
|
|
},
|
|
},
|
|
} satisfies Meta<typeof Descriptions>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const Default: Story = {
|
|
args: {
|
|
items: [
|
|
{ title: '이름', content: '홍길동' },
|
|
{ title: '이메일', content: 'hong@example.com' },
|
|
{ title: '전화번호', content: '010-1234-5678' },
|
|
],
|
|
},
|
|
}
|
|
|
|
export const TwoColumns: Story = {
|
|
args: {
|
|
column: 2,
|
|
items: [
|
|
{ title: '이름', content: '홍길동' },
|
|
{ title: '이메일', content: 'hong@example.com' },
|
|
{ title: '전화번호', content: '010-1234-5678' },
|
|
{ title: '주소', content: '서울특별시 강남구' },
|
|
],
|
|
},
|
|
}
|
|
|
|
export const ThreeColumns: Story = {
|
|
args: {
|
|
column: 3,
|
|
items: [
|
|
{ title: '이름', content: '홍길동' },
|
|
{ title: '이메일', content: 'hong@example.com' },
|
|
{ title: '전화번호', content: '010-1234-5678' },
|
|
{ title: '주소', content: '서울특별시 강남구' },
|
|
{ title: '부서', content: '개발팀' },
|
|
{ title: '직급', content: '선임연구원' },
|
|
],
|
|
},
|
|
}
|
|
|
|
export const FourColumns: Story = {
|
|
args: {
|
|
column: 4,
|
|
items: [
|
|
{ title: '이름', content: '홍길동' },
|
|
{ title: '이메일', content: 'hong@example.com' },
|
|
{ title: '전화번호', content: '010-1234-5678' },
|
|
{ title: '주소', content: '서울특별시 강남구' },
|
|
],
|
|
},
|
|
}
|
|
|
|
export const WithSpan: Story = {
|
|
args: {
|
|
column: 2,
|
|
items: [
|
|
{ title: '이름', content: '홍길동' },
|
|
{ title: '이메일', content: 'hong@example.com' },
|
|
{ title: '주소', content: '서울특별시 강남구 역삼동 123-456', span: 'filled' },
|
|
],
|
|
},
|
|
}
|
|
|
|
export const WithCustomTitleWidth: Story = {
|
|
args: {
|
|
column: 2,
|
|
titleWidth: 150,
|
|
items: [
|
|
{ title: '사용자 이름', content: '홍길동' },
|
|
{ title: '이메일 주소', content: 'hong@example.com' },
|
|
{ title: '휴대전화 번호', content: '010-1234-5678' },
|
|
{ title: '거주지 주소', content: '서울특별시 강남구' },
|
|
],
|
|
},
|
|
}
|