From 9b0c3bba3ca10160fe46fafded9603869750f4cd Mon Sep 17 00:00:00 2001
From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com>
Date: Wed, 6 Apr 2022 14:47:10 +0200
Subject: [PATCH] feat(system): add ButtonGroup component

---
 .../system/button-group/button-group.docs.mdx |  5 +++
 .../src/system/button-group/button-group.tsx  | 42 +++++++++++++++++++
 .../src/system/button-group/index.tsx         |  2 +
 .../src/system/button-group/styles.tsx        | 41 ++++++++++++++++++
 packages/status-react/src/system/index.tsx    |  1 +
 5 files changed, 91 insertions(+)
 create mode 100644 packages/status-react/src/system/button-group/button-group.docs.mdx
 create mode 100644 packages/status-react/src/system/button-group/button-group.tsx
 create mode 100644 packages/status-react/src/system/button-group/index.tsx
 create mode 100644 packages/status-react/src/system/button-group/styles.tsx

diff --git a/packages/status-react/src/system/button-group/button-group.docs.mdx b/packages/status-react/src/system/button-group/button-group.docs.mdx
new file mode 100644
index 00000000..154cc727
--- /dev/null
+++ b/packages/status-react/src/system/button-group/button-group.docs.mdx
@@ -0,0 +1,5 @@
+# ButtonGroup
+
+```tsx
+import { ButtonGroup } from '@status-im/components'
+```
diff --git a/packages/status-react/src/system/button-group/button-group.tsx b/packages/status-react/src/system/button-group/button-group.tsx
new file mode 100644
index 00000000..87cb5c2a
--- /dev/null
+++ b/packages/status-react/src/system/button-group/button-group.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+
+import { Button, Group } from './styles'
+
+interface Props<V> {
+  value: V
+  onChange: (value: V) => void
+  children: React.ReactElement[]
+}
+
+const ButtonGroup = <Value extends string>(props: Props<Value>) => {
+  const { children, value, onChange } = props
+
+  const handleChange = (value: string) => {
+    // Ensure non-empty value
+    if (value) {
+      onChange(value as Value)
+    }
+  }
+
+  return (
+    <Group type="single" value={value} onValueChange={handleChange}>
+      {children}
+    </Group>
+  )
+}
+
+interface ItemProps {
+  value: string
+  children: string
+}
+
+const ButtonGroupItem = (props: ItemProps) => {
+  const { value, children } = props
+
+  return <Button value={value}>{children}</Button>
+}
+
+ButtonGroup.Item = ButtonGroupItem
+
+export { ButtonGroup }
+export type { Props as ButtonGroupProps }
diff --git a/packages/status-react/src/system/button-group/index.tsx b/packages/status-react/src/system/button-group/index.tsx
new file mode 100644
index 00000000..d26cf999
--- /dev/null
+++ b/packages/status-react/src/system/button-group/index.tsx
@@ -0,0 +1,2 @@
+export type { ButtonGroupProps } from './button-group'
+export { ButtonGroup } from './button-group'
diff --git a/packages/status-react/src/system/button-group/styles.tsx b/packages/status-react/src/system/button-group/styles.tsx
new file mode 100644
index 00000000..d78f6a11
--- /dev/null
+++ b/packages/status-react/src/system/button-group/styles.tsx
@@ -0,0 +1,41 @@
+import { Item, Root } from '@radix-ui/react-toggle-group'
+
+import { styled } from '~/src/styles/config'
+
+export const Group = styled(Root, {
+  backgroundColor: '$primary-3',
+  borderRadius: '$2',
+  height: 36,
+  display: 'inline-flex',
+  alignItems: 'stretch',
+})
+
+export const Button = styled(Item, {
+  backgroundColor: '$transparent',
+  color: '$primary-1',
+  display: 'inline-flex',
+  fontSize: 15,
+  lineHeight: 1.2,
+  fontWeight: '$500',
+  padding: '8px 36px',
+  alignItems: 'center',
+  justifyContent: 'center',
+  marginLeft: 1,
+
+  '&:first-child': {
+    marginLeft: 0,
+    borderTopLeftRadius: '$2',
+    borderBottomLeftRadius: '$2',
+  },
+
+  '&:last-child': {
+    borderTopRightRadius: '$2',
+    borderBottomRightRadius: '$2',
+  },
+
+  '&[data-state=on]': {
+    backgroundColor: '$primary-1',
+    color: '$white',
+    borderRadius: '$2',
+  },
+})
diff --git a/packages/status-react/src/system/index.tsx b/packages/status-react/src/system/index.tsx
index db1d6aa1..4aedbf61 100644
--- a/packages/status-react/src/system/index.tsx
+++ b/packages/status-react/src/system/index.tsx
@@ -1,6 +1,7 @@
 export { Avatar } from './avatar'
 export { Box } from './box'
 export { Button } from './button'
+export { ButtonGroup } from './button-group'
 export { ContextMenu, ContextMenuTrigger } from './context-menu'
 export { CopyInput } from './copy-input'
 export {