Skip to content

Commit

Permalink
feat: subText 추가
Browse files Browse the repository at this point in the history
  • Loading branch information
hamo-o committed Aug 12, 2024
1 parent 1683c8c commit 1dd8d71
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 12 deletions.
9 changes: 9 additions & 0 deletions packages/wow-ui/src/components/Button/Button.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -184,3 +184,12 @@ export const SmallWithIcon: Story = {
icon: <Help />,
},
};

export const LargeWithSubText: Story = {
args: {
children: "버튼",
variant: "solid",
subText: "최종 수정 일시 : 2024년 5월 23일 23:11",
icon: <Help />,
},
};
40 changes: 28 additions & 12 deletions packages/wow-ui/src/components/Button/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import type {
* @description 버튼 컴포넌트의 속성을 정의합니다.
*
* @param {ReactNode} children - 버튼의 자식 요소.
* @param {string} subText - 버튼의 하단에 위치할 보조 텍스트.
* @param {boolean} [disabled] - 버튼이 비활성화되어 있는지 여부.
* @param {"lg" | "sm"} [size] - 버튼의 크기.
* @param {"solid" | "outline"} [variant] - 버튼의 종류.
Expand All @@ -33,6 +34,7 @@ import type {

export interface CustomButtonProps {
children: ReactNode;
subText?: string;
disabled?: boolean;
size?: "lg" | "sm";
variant?: "solid" | "outline";
Expand Down Expand Up @@ -60,6 +62,7 @@ const Button: ButtonComponent & { displayName?: string } = forwardRef(
{
as,
children,
subText,
disabled = false,
size = "lg",
variant = "solid",
Expand Down Expand Up @@ -108,14 +111,11 @@ const Button: ButtonComponent & { displayName?: string } = forwardRef(
onPointerUp={handlePointerUp}
{...rest}
>
{icon}
<styled.span
{...(typeof children === "string" && {
textStyle: size === "lg" ? "label1" : "label2",
})}
>
<styled.span className={ContentStyle({ size })}>
{icon}
{children}
</styled.span>
{subText && <styled.span textStyle="label3">{subText}</styled.span>}
</Component>
);
}
Expand All @@ -124,8 +124,10 @@ const Button: ButtonComponent & { displayName?: string } = forwardRef(
const ButtonStyle = cva({
base: {
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: "xs",

cursor: "pointer",
},
Expand All @@ -134,16 +136,10 @@ const ButtonStyle = cva({
lg: {
width: "100%",
maxWidth: { lgOnly: 316 },
height: "3rem",

gap: "xs",

padding: "1rem",
borderRadius: "md",
},
sm: {
gap: "xxs",

padding: "0.75rem 1.25rem",
borderRadius: "full",
},
Expand Down Expand Up @@ -212,5 +208,25 @@ const ButtonStyle = cva({
],
});

const ContentStyle = cva({
base: {
display: "flex",
alignItems: "center",
justifyContent: "center",
},
variants: {
size: {
lg: {
gap: "xs",
textStyle: "label1",
},
sm: {
gap: "xxs",
textStyle: "label2",
},
},
},
});

Button.displayName = "Button";
export default Button;

0 comments on commit 1dd8d71

Please sign in to comment.