Skip to content

Commit

Permalink
feat: Tabs 컴포넌트 스토리 파일 추가
Browse files Browse the repository at this point in the history
  • Loading branch information
dmswl98 committed Dec 28, 2023
1 parent 839d3d3 commit 9f6f53c
Showing 1 changed file with 53 additions and 0 deletions.
53 changes: 53 additions & 0 deletions src/components/Tabs/Tabs.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import Tabs from '.';
import type { TabsRootProps } from './TabsRoot';
import type { StoryObj } from '@storybook/react';
import { type Meta } from '@storybook/react';

const COMPONENT_DESCRIPTION = `
- \`<Tabs />\`: 모든 컴포넌트에 대한 컨텍스트와 상태를 제공합니다.
- \`<Tabs.List />\`: \`<Tabs.Trigger />\` 컴포넌트들을 위한 Wrapper 컴포넌트입니다.
- \`<Tabs.Trigger />\`: 선택된 탭에 해당되는 컨텐츠를 표시하기 위한 버튼입니다.
- \`<Tabs.Content />\`: 선택된 탭에 해당되는 컨텐츠를 보여줍니다.
`;

const meta: Meta<typeof Tabs> = {
title: 'Components/Tabs',
component: Tabs,
tags: ['autodocs'],
argTypes: {
defaultValue: {
defaultValue: '끄적이는',
description: 'Tabs 컴포넌트의 선택된 탭을 정의합니다.',
options: ['끄적이는', '참고하는'],
control: 'inline-radio',
},
},
parameters: {
componentSubtitle: '한 번에 하나씩 표시될 컨텐츠들의 집합입니다.',
docs: {
description: {
component: COMPONENT_DESCRIPTION,
},
},
},
};

export default meta;

type Story = StoryObj<typeof Tabs>;

export const Basic: Story = {
args: {
defaultValue: '끄적이는',
},
render: (args: TabsRootProps) => (
<Tabs {...args}>
<Tabs.List>
<Tabs.Trigger value="끄적이는">끄적이는</Tabs.Trigger>
<Tabs.Trigger value="참고하는">참고하는</Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="끄적이는">끄적이는 내용</Tabs.Content>
<Tabs.Content value="참고하는">참고하는 내용</Tabs.Content>
</Tabs>
),
};

0 comments on commit 9f6f53c

Please sign in to comment.