feat(system): add Checkbox component

This commit is contained in:
Pavel Prichodko 2022-04-11 21:29:58 +02:00
parent eba39b7e27
commit 555d22e006
No known key found for this signature in database
GPG Key ID: 0EB8D75C775AB6F1
6 changed files with 78 additions and 0 deletions

View File

@ -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",

View File

@ -0,0 +1,5 @@
# Checkbox
```tsx
import { Checkbox } from '@status-im/components'
```

View File

@ -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 }

View File

@ -0,0 +1,2 @@
export type { CheckboxProps } from './checkbox'
export { Checkbox } from './checkbox'

View File

@ -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%',
})

View File

@ -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 {