From 555d22e006eacdafd08bcc78922278840c83a8ce Mon Sep 17 00:00:00 2001
From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com>
Date: Mon, 11 Apr 2022 21:29:58 +0200
Subject: [PATCH] feat(system): add Checkbox component

---
 packages/status-react/package.json            |  2 ++
 .../src/system/checkbox/checkbox.mdx          |  5 +++
 .../src/system/checkbox/checkbox.tsx          | 36 +++++++++++++++++++
 .../src/system/checkbox/index.tsx             |  2 ++
 .../src/system/checkbox/styles.tsx            | 32 +++++++++++++++++
 packages/status-react/src/system/index.tsx    |  1 +
 6 files changed, 78 insertions(+)
 create mode 100644 packages/status-react/src/system/checkbox/checkbox.mdx
 create mode 100644 packages/status-react/src/system/checkbox/checkbox.tsx
 create mode 100644 packages/status-react/src/system/checkbox/index.tsx
 create mode 100644 packages/status-react/src/system/checkbox/styles.tsx

diff --git a/packages/status-react/package.json b/packages/status-react/package.json
index 5813e388..1e3b7cc4 100644
--- a/packages/status-react/package.json
+++ b/packages/status-react/package.json
@@ -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",
diff --git a/packages/status-react/src/system/checkbox/checkbox.mdx b/packages/status-react/src/system/checkbox/checkbox.mdx
new file mode 100644
index 00000000..ea6efcc4
--- /dev/null
+++ b/packages/status-react/src/system/checkbox/checkbox.mdx
@@ -0,0 +1,5 @@
+# Checkbox
+
+```tsx
+import { Checkbox } from '@status-im/components'
+```
diff --git a/packages/status-react/src/system/checkbox/checkbox.tsx b/packages/status-react/src/system/checkbox/checkbox.tsx
new file mode 100644
index 00000000..74f0b99e
--- /dev/null
+++ b/packages/status-react/src/system/checkbox/checkbox.tsx
@@ -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 }
diff --git a/packages/status-react/src/system/checkbox/index.tsx b/packages/status-react/src/system/checkbox/index.tsx
new file mode 100644
index 00000000..e3a61943
--- /dev/null
+++ b/packages/status-react/src/system/checkbox/index.tsx
@@ -0,0 +1,2 @@
+export type { CheckboxProps } from './checkbox'
+export { Checkbox } from './checkbox'
diff --git a/packages/status-react/src/system/checkbox/styles.tsx b/packages/status-react/src/system/checkbox/styles.tsx
new file mode 100644
index 00000000..ed73d613
--- /dev/null
+++ b/packages/status-react/src/system/checkbox/styles.tsx
@@ -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%',
+})
diff --git a/packages/status-react/src/system/index.tsx b/packages/status-react/src/system/index.tsx
index a4b205e2..c6b1a346 100644
--- a/packages/status-react/src/system/index.tsx
+++ b/packages/status-react/src/system/index.tsx
@@ -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 {