feat(system): add Checkbox component
This commit is contained in:
parent
eba39b7e27
commit
555d22e006
|
@ -27,11 +27,13 @@
|
|||
"@hcaptcha/react-hcaptcha": "^1.0.0",
|
||||
"@radix-ui/react-accessible-icon": "^0.1.4",
|
||||
"@radix-ui/react-alert-dialog": "^0.1.7",
|
||||
"@radix-ui/react-checkbox": "^0.1.5",
|
||||
"@radix-ui/react-collapsible": "^0.1.6",
|
||||
"@radix-ui/react-compose-refs": "^0.1.0",
|
||||
"@radix-ui/react-context-menu": "^0.1.6",
|
||||
"@radix-ui/react-dialog": "^0.1.7",
|
||||
"@radix-ui/react-dropdown-menu": "^0.1.6",
|
||||
"@radix-ui/react-label": "^0.1.5",
|
||||
"@radix-ui/react-popover": "^0.1.6",
|
||||
"@radix-ui/react-separator": "^0.1.4",
|
||||
"@radix-ui/react-toggle-group": "^0.1.5",
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
# Checkbox
|
||||
|
||||
```tsx
|
||||
import { Checkbox } from '@status-im/components'
|
||||
```
|
|
@ -0,0 +1,36 @@
|
|||
import React, { forwardRef } from 'react'
|
||||
|
||||
import { Text } from '../text'
|
||||
import { Indicator, Root, Wrapper } from './styles'
|
||||
|
||||
import type { Ref } from 'react'
|
||||
|
||||
interface Props {
|
||||
children: string
|
||||
checked?: boolean
|
||||
onChange?: (checked: boolean) => void
|
||||
required?: boolean
|
||||
}
|
||||
|
||||
const Checkbox = (props: Props, ref: Ref<HTMLButtonElement>) => {
|
||||
const { children, checked, onChange, required } = props
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
<Root
|
||||
ref={ref}
|
||||
checked={checked}
|
||||
onCheckedChange={onChange}
|
||||
required={required}
|
||||
>
|
||||
<Indicator>{/* TODO: add <CheckIcon /> */}</Indicator>
|
||||
</Root>
|
||||
<Text>{children}</Text>
|
||||
</Wrapper>
|
||||
)
|
||||
}
|
||||
|
||||
const _Checkbox = forwardRef(Checkbox)
|
||||
|
||||
export { _Checkbox as Checkbox }
|
||||
export type { Props as CheckboxProps }
|
|
@ -0,0 +1,2 @@
|
|||
export type { CheckboxProps } from './checkbox'
|
||||
export { Checkbox } from './checkbox'
|
|
@ -0,0 +1,32 @@
|
|||
import * as Checkbox from '@radix-ui/react-checkbox'
|
||||
import { Label } from '@radix-ui/react-label'
|
||||
|
||||
import { styled, theme } from '~/src/styles/config'
|
||||
|
||||
export const Wrapper = styled(Label, {
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
})
|
||||
|
||||
export const Root = styled(Checkbox.Root, {
|
||||
height: 18,
|
||||
width: 18,
|
||||
flexShrink: 0,
|
||||
borderRadius: theme.radii['1'],
|
||||
background: theme.colors['accent-8'],
|
||||
|
||||
'&:hover': {},
|
||||
|
||||
'&[aria-checked="true"]': {
|
||||
background: theme.colors['primary-1'],
|
||||
color: theme.colors.white,
|
||||
'&:hover': {},
|
||||
},
|
||||
})
|
||||
|
||||
export const Indicator = styled(Checkbox.Indicator, {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
})
|
|
@ -2,6 +2,7 @@ export { Avatar } from './avatar'
|
|||
export { Box } from './box'
|
||||
export { Button } from './button'
|
||||
export { ButtonGroup } from './button-group'
|
||||
export { Checkbox } from './checkbox'
|
||||
export { ContextMenu, ContextMenuTrigger } from './context-menu'
|
||||
export { CopyInput } from './copy-input'
|
||||
export {
|
||||
|
|
Loading…
Reference in New Issue