-
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): switch 컴포넌트 추가 * feat(ui-kit): label 추가 * feat(ui-kit): inline 케이스 추가 및 스타일 일부 수정 * feat(ui-kit): 컴포넌트 수정에 따른 스토리 수정 * feat(ui-kit): Switch transform 퍼센트 값으로 변경 * feat(ui-kit): 스위치 슬라이더 x축 이동 롤백
- Loading branch information
Showing
5 changed files
with
113 additions
and
0 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 |
---|---|---|
@@ -0,0 +1,33 @@ | ||
import React, { forwardRef } from 'react'; | ||
import { Ref } from 'react'; | ||
import { CombineElementProps } from 'src/types/utils'; | ||
import clxs from 'classnames'; | ||
import { generateID } from 'src/utils/generateID'; | ||
import { Text } from '..'; | ||
|
||
interface SwitchBaseProps { | ||
label?: string; | ||
display?: 'block' | 'inline'; | ||
} | ||
type SwitchProps = Omit<CombineElementProps<'input', SwitchBaseProps>, 'type'>; | ||
|
||
const Switch = ( | ||
{ label, display = 'block', style, ...props }: SwitchProps, | ||
ref: Ref<HTMLInputElement> | ||
) => { | ||
const id = generateID('switch'); | ||
|
||
return ( | ||
<label | ||
role="switch" | ||
className={clxs('lubycon-switch', `lubycon-switch--display-${display}`)} | ||
style={style} | ||
> | ||
<input className="lubycon-switch--input" ref={ref} type="checkbox" {...props} id={id} /> | ||
<span className="lubycon-switch--slider" /> | ||
{label ? <Text as="span">{label}</Text> : null} | ||
</label> | ||
); | ||
}; | ||
|
||
export default forwardRef(Switch) as typeof Switch; |
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
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 |
---|---|---|
@@ -0,0 +1,46 @@ | ||
.lubycon-switch { | ||
border-radius: 31.5px; | ||
display: flex; | ||
align-items: center; | ||
position: relative; | ||
cursor: pointer; | ||
|
||
&--input { | ||
display: none; | ||
} | ||
|
||
&--slider { | ||
position: relative; | ||
width: 40px; | ||
height: 21px; | ||
margin-right: 8px; | ||
border-radius: 31.5px; | ||
background-color: map-get($colors, 'gray40'); | ||
transition: background-color 0.3s; | ||
|
||
&::before { | ||
content: ''; | ||
position: absolute; | ||
width: 15px; | ||
height: 15px; | ||
left: 3.31px; | ||
top: 50%; | ||
transform: translateY(-50%); | ||
background-color: #ffffff; | ||
border-radius: 50%; | ||
transition: transform 0.3s; | ||
} | ||
} | ||
|
||
&--input:checked + &--slider { | ||
background-color: map-get($colors, 'green50'); | ||
} | ||
|
||
&--input:checked + &--slider::before { | ||
transform: translate(18.38px, -50%); | ||
} | ||
|
||
&--display-inline { | ||
display: inline-flex; | ||
} | ||
} |
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 |
---|---|---|
|
@@ -4,3 +4,4 @@ | |
@import './Row'; | ||
@import './Column'; | ||
@import './Checkbox'; | ||
@import './Switch'; |
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 |
---|---|---|
@@ -0,0 +1,32 @@ | ||
import React from 'react'; | ||
import { Meta } from '@storybook/react/types-6-0'; | ||
import Text from 'components/Text'; | ||
import Switch from 'components/Switch'; | ||
import { colors } from '../constants/colors'; | ||
|
||
export default { | ||
title: 'Lubycon UI Kit/Switch', | ||
} as Meta; | ||
|
||
export const Default = () => { | ||
return ( | ||
<div> | ||
<Text as="h2" typography="h2" style={{ color: colors.gray100 }}> | ||
스위치 | ||
</Text> | ||
<div style={{ padding: 0 }}> | ||
<Switch label={'Off'} style={{ marginBottom: '23.17px' }} /> | ||
<Switch defaultChecked={true} label={'On'} /> | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
export const Inline = () => { | ||
return ( | ||
<div> | ||
<Switch display="inline" label="Off" style={{ marginRight: '20px' }} /> | ||
<Switch defaultChecked={true} display="inline" label="On" /> | ||
</div> | ||
); | ||
}; |