From c6d578c5c5b8e177461c1336b24691d543d03f03 Mon Sep 17 00:00:00 2001
From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com>
Date: Fri, 18 Mar 2022 19:13:14 +0100
Subject: [PATCH] feat(system): add Popover component

---
 .../status-react/src/system/popover/index.tsx |  1 +
 .../src/system/popover/popover.docs.mdx       |  5 +++
 .../src/system/popover/popover.tsx            | 40 +++++++++++++++++++
 .../src/system/popover/styles.tsx             | 13 ++++++
 4 files changed, 59 insertions(+)
 create mode 100644 packages/status-react/src/system/popover/index.tsx
 create mode 100644 packages/status-react/src/system/popover/popover.docs.mdx
 create mode 100644 packages/status-react/src/system/popover/popover.tsx
 create mode 100644 packages/status-react/src/system/popover/styles.tsx

diff --git a/packages/status-react/src/system/popover/index.tsx b/packages/status-react/src/system/popover/index.tsx
new file mode 100644
index 0000000..696a65c
--- /dev/null
+++ b/packages/status-react/src/system/popover/index.tsx
@@ -0,0 +1 @@
+export { Popover, PopoverTrigger } from './popover'
diff --git a/packages/status-react/src/system/popover/popover.docs.mdx b/packages/status-react/src/system/popover/popover.docs.mdx
new file mode 100644
index 0000000..e47c12e
--- /dev/null
+++ b/packages/status-react/src/system/popover/popover.docs.mdx
@@ -0,0 +1,5 @@
+# Popover
+
+```tsx
+import { Popover } from '@status-im/components'
+```
diff --git a/packages/status-react/src/system/popover/popover.tsx b/packages/status-react/src/system/popover/popover.tsx
new file mode 100644
index 0000000..e30965c
--- /dev/null
+++ b/packages/status-react/src/system/popover/popover.tsx
@@ -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 }
diff --git a/packages/status-react/src/system/popover/styles.tsx b/packages/status-react/src/system/popover/styles.tsx
new file mode 100644
index 0000000..5223ba8
--- /dev/null
+++ b/packages/status-react/src/system/popover/styles.tsx
@@ -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',
+})