-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat(ui-kit): init * feat(ui-kit): Button 컴포넌트 스토리 추가 * feat(ui-kit): 리뷰 내용 반영
- Loading branch information
Showing
3 changed files
with
96 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,27 @@ | ||
import React, { HTMLAttributes } from 'react'; | ||
import React, { Ref, forwardRef } from 'react'; | ||
import classnames from 'classnames'; | ||
import { CombineElementProps } from 'src/types/utils'; | ||
import { Text } from '..'; | ||
|
||
export default function Button(props: HTMLAttributes<HTMLButtonElement>): JSX.Element { | ||
return <button className="button" {...props} />; | ||
interface ButtonBaseProps { | ||
size?: 'small' | 'medium' | 'large'; | ||
} | ||
type ButtonProps = CombineElementProps<'button', ButtonBaseProps>; | ||
|
||
const Button = ( | ||
{ size = 'small', disabled, style, ...props }: ButtonProps, | ||
ref: Ref<HTMLButtonElement> | ||
) => { | ||
return ( | ||
<button | ||
className={classnames('lubycon-button', `lubycon-button__${size}`)} | ||
disabled={disabled} | ||
style={style} | ||
ref={ref} | ||
> | ||
<Text typography={size === 'large' ? 'p1' : 'p2'} fontWeight="bold" {...props}></Text> | ||
</button> | ||
); | ||
}; | ||
|
||
export default forwardRef(Button) as typeof Button; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,33 @@ | ||
.button { | ||
outline: 0; | ||
.lubycon-button { | ||
font: inherit; | ||
text-align: inherit; | ||
outline: none; | ||
border: 0; | ||
margin: 0; | ||
background-color: get-color('blue50'); | ||
border-radius: 4px; | ||
color: #ffffff; | ||
cursor: pointer; | ||
|
||
&__small { | ||
height: 32px; | ||
padding: 4px 16px; | ||
} | ||
&__medium { | ||
height: 40px; | ||
padding: 8px 16px; | ||
} | ||
&__large { | ||
height: 56px; | ||
padding: 12px 32px; | ||
} | ||
|
||
&:hover, &:active { | ||
background-color: get-color('blue60'); | ||
} | ||
&:disabled { | ||
color: get-color('gray60'); | ||
background-color: get-color('gray40'); | ||
cursor: not-allowed; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,47 @@ | ||
import React from 'react'; | ||
import Button from 'components/Button'; | ||
import Text from 'components/Text'; | ||
import { Meta } from '@storybook/react/types-6-0'; | ||
|
||
export default { | ||
title: 'Lubycon UI Kit/Button', | ||
component: Button, | ||
} as Meta; | ||
|
||
export const Default = () => <Button>기본 버튼</Button>; | ||
const sizeList = ['small', 'medium', 'large'] as const; | ||
const btnText = '버튼 텍스트'; | ||
|
||
export const Default = () => { | ||
return ( | ||
<div> | ||
<Text as="div" typography="h5" style={{ marginBottom: '40px' }}> | ||
Rounded Button | ||
</Text> | ||
<ul style={{ listStyle: 'none' }}> | ||
{sizeList.map((size, index) => ( | ||
<li | ||
key={index} | ||
style={{ | ||
display: 'grid', | ||
gridTemplateColumns: '100px 150px 150px', | ||
gridGap: '50px', | ||
marginBottom: '30px', | ||
alignItems: 'center', | ||
}} | ||
> | ||
<Text style={{ width: '100px' }}>{size.charAt(0).toUpperCase() + size.slice(1)}</Text> | ||
<div> | ||
<Button size={size} key={index}> | ||
{btnText} | ||
</Button> | ||
</div> | ||
<div> | ||
<Button size={size} key={index + 'disabled'} disabled> | ||
{btnText} | ||
</Button> | ||
</div> | ||
</li> | ||
))} | ||
</ul> | ||
</div> | ||
); | ||
}; |