feat(system): add Popover component

This commit is contained in:
Pavel Prichodko 2022-03-18 19:13:14 +01:00
parent a5d820d58c
commit 0adf32dc7a
No known key found for this signature in database
GPG Key ID: 0EB8D75C775AB6F1
4 changed files with 59 additions and 0 deletions

View File

@ -0,0 +1 @@
export { Popover, PopoverTrigger } from './popover'

View File

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

View File

@ -0,0 +1,40 @@
import React, { forwardRef } from 'react'
import * as Primitive from '@radix-ui/react-popover'
import { Content } from './styles'
interface TriggerProps {
children: [React.ReactElement, React.ReactElement]
}
const PopoverTrigger = (props: TriggerProps) => {
const { children } = props
const [trigger, content] = children
return (
<Primitive.Root>
<Primitive.Trigger asChild>{trigger}</Primitive.Trigger>
{content}
</Primitive.Root>
)
}
interface PopoverProps {
children: React.ReactNode
}
const Popover = (props: PopoverProps, ref) => {
const { children } = props
return (
<Content as={Primitive.Content} portalled={true} ref={ref}>
{children}
</Content>
)
}
const _Popover = forwardRef(Popover)
export { _Popover as Popover, PopoverTrigger }

View File

@ -0,0 +1,13 @@
import { styled } from '~/src/styles/config'
import type { VariantProps } from '~/src/styles/config'
export type Variants = VariantProps<typeof Content>
export const Content = styled('div', {
backgroundColor: 'white',
padding: '$4',
borderRadius: 8,
boxShadow:
'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
})