From c14b74002ddb62ae807b75456a6138ab59bf1b81 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 { + value: V + onChange: (value: V) => void + children: React.ReactElement[] +} + +const ButtonGroup = (props: Props) => { + const { children, value, onChange } = props + + const handleChange = (value: string) => { + // Ensure non-empty value + if (value) { + onChange(value as Value) + } + } + + return ( + + {children} + + ) +} + +interface ItemProps { + value: string + children: string +} + +const ButtonGroupItem = (props: ItemProps) => { + const { value, children } = props + + return +} + +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 {