Skip to content

Commit

Permalink
feat: cta-button story control 설정
Browse files Browse the repository at this point in the history
  • Loading branch information
황 태환 committed Feb 26, 2024
1 parent a82a1a7 commit 8950bcd
Show file tree
Hide file tree
Showing 3 changed files with 28 additions and 7 deletions.
1 change: 1 addition & 0 deletions .storybook/preview.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ const preview: Preview = {
color: /(background|color)$/i,
date: /Date$/i,
},
expanded: true,
},
},
};
Expand Down
31 changes: 26 additions & 5 deletions src/components/create-character/stories/cta-button.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,37 @@
import { Meta, StoryObj } from '@storybook/react';
import CtaButton from '@/components/ui/cta-button';
import { PageContainer } from '@/components/ui';
import FixedBottomArea from '@/components/fixed-bottom-area';

export default {
title: 'Components/CtaButton', // story 이름
component: CtaButton,
} as Meta<typeof CtaButton>;

type Story = StoryObj<typeof CtaButton>;

const args = {
text: '테스트',
disabled: false,
};
const argTypes = {
text: { description: '버튼의 텍스트', control: 'text' },
disabled: { description: '버튼의 활성화 여부', control: 'boolean' },
};

export const Basic: Story = {
argTypes: {
text: { control: 'text' },
disabled: { control: 'boolean' },
},
render: (props) => <CtaButton {...props} />,
args,
argTypes,
render: (args) => <CtaButton {...args} className="mb-[31px]" />,
};
export const BottomFixed: Story = {
args,
argTypes,
render: (props) => (
<PageContainer>
<FixedBottomArea>
<CtaButton {...props} className="mb-[31px]" />
</FixedBottomArea>
</PageContainer>
),
};
3 changes: 1 addition & 2 deletions src/components/ui/cta-button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,9 @@
type Props = {
text?: string;
children?: React.ReactNode;
shadow?: boolean;
} & React.ButtonHTMLAttributes<HTMLButtonElement>;

export default function CTAButton({ children, text, shadow = true, disabled, ...props }: Props) {
export default function CTAButton({ children, text, disabled, ...props }: Props) {
return (
<button
{...props}
Expand Down

0 comments on commit 8950bcd

Please sign in to comment.