GroupButton component and docz

platform/ui/src/components/ButtonGroup/ButtonGroup.jsx

@@ -0,0 +1,130 @@
+import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+const baseButtonClass = 'border';
+const roundedClasses = {
+  vertical: {
+    none: '',
+    small: 'first:rounded-t last:rounded-b',
+    medium: 'first:rounded-t-md last:rounded-b-md',
+    large: 'first:rounded-t-lg last:rounded-b-lg',
+    full: 'first:rounded-t-full last:rounded-b-full',
+  },
+  horizontal: {
+    none: '',
+    small: 'first:rounded-l last:rounded-r',
+    medium: 'first:rounded-l-md last:rounded-r-md',
+    large: 'first:rounded-l-lg last:rounded-r-lg',
+    full: 'first:rounded-l-full last:rounded-r-full',
+  },
+};
+
+const borderClasses = {
+  text: {
+    vertical: 'border-t-0 border-l-0 border-r-0 last:border-b-0',
+    horizontal: 'border-l-0 border-t-0 border-b-0 last:border-r-0',
+  },
+  outlined: {
+    vertical: 'border border-b-0 last:border-b',
+    horizontal: 'border border-r-0 last:border-r',
+  },
+  contained: {
+    vertical: 'border-t-0 border-l-0 border-r-0 last:border-b-0',
+    horizontal: 'border-l-0 border-t-0 border-b-0 last:border-r-0',
+  },
+};
+
+const variantClasses = {
+  text: {
+    default: 'border-custom-aquaBright',
+    primary: 'border-custom-blue',
+    secondary: 'border-custom-violetPale',
+    white: 'border-white',
+  },
+  outlined: {
+    default: '',
+    primary: '',
+    secondary: '',
+    white: '',
+  },
+  contained: {
+    default: 'border-white',
+    primary: 'border-white',
+    secondary: 'border-white',
+    white: 'border-black',
+  },
+};
+
+const orientationClasses = {
+  vertical: 'flex-col',
+  horizontal: 'flex-row',
+};
+
+const baseDisplayClass = 'inline-flex';
+const fullWidthDisplayClass = 'flex';
+
+const ButtonGroup = ({
+  children,
+  className,
+  disabled = false,
+  fullWidth = false,
+  color = 'default',
+  orientation = 'horizontal',
+  rounded = 'medium',
+  size = 'medium',
+  variant = 'outlined',
+  ...other
+}) => {
+  const ref = useRef(null);
+
+  const buttonClasses = classnames(
+    baseButtonClass,
+    borderClasses[variant] && borderClasses[variant][orientation],
+    variantClasses[variant] && variantClasses[variant][color],
+    roundedClasses[orientation] && roundedClasses[orientation][rounded]
+  );
+
+  return (
+    <div
+      role="group"
+      className={classnames(
+        className,
+        orientationClasses[orientation],
+        fullWidth ? fullWidthDisplayClass : baseDisplayClass
+      )}
+      ref={ref}
+      {...other}
+    >
+      {React.Children.map(children, child => {
+        if (!React.isValidElement(child)) {
+          return null;
+        }
+
+        return React.cloneElement(child, {
+          className: classnames(buttonClasses, child.props.className),
+          disabled: child.props.disabled || disabled,
+          color: child.props.color || color,
+          fullWidth,
+          rounded: 'none',
+          size: child.props.size || size,
+          variant: child.props.variant || variant,
+        });
+      })}
+    </div>
+  );
+};
+
+ButtonGroup.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary']),
+  disabled: PropTypes.bool,
+  fullWidth: PropTypes.bool,
+  orientation: PropTypes.oneOf(['vertical', 'horizontal']),
+  rounded: PropTypes.oneOf(['none', 'small', 'medium', 'large', 'full']),
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  variant: PropTypes.oneOf(['text', 'outlined', 'contained']),
+};
+
+export default ButtonGroup;

platform/ui/src/components/ButtonGroup/ButtonGroup.mdx

@@ -0,0 +1,120 @@
+---
+name: ButtonGroup
+menu: Components
+route: components/buttonGroup
+---
+
+import { Playground, Props } from 'docz';
+import Button from '../Button';
+import IconButton from '../IconButton';
+import ButtonGroup from './';
+
+# ButtonGroup
+
+Group Button display buttons together sharing its configurations
+
+## Import
+
+```javascript
+import { ButtonGroup } from '@ohfi/ui';
+```
+
+## Basic button group
+
+<Playground>
+  <div className="flex flex-col items-center">
+    <ButtonGroup color="primary" className="m-2">
+      <Button>One</Button>
+      <Button>Two</Button>
+      <Button>Tree</Button>
+    </ButtonGroup>
+    <ButtonGroup color="primary" variant="contained" className="m-2">
+      <Button>One</Button>
+      <Button>Two</Button>
+      <Button>Tree</Button>
+    </ButtonGroup>
+    <ButtonGroup color="primary" variant="text" className="m-2">
+      <Button>One</Button>
+      <Button>Two</Button>
+      <Button>Tree</Button>
+    </ButtonGroup>
+  </div>
+</Playground>
+
+## Group sizes and colorss
+
+<Playground>
+  <div className="flex flex-col items-center">
+    <ButtonGroup color="default" size="small" className="m-2">
+      <Button>One</Button>
+      <Button>Two</Button>
+      <Button>Tree</Button>
+    </ButtonGroup>
+    <ButtonGroup color="primary" size="medium" className="m-2">
+      <Button>One</Button>
+      <Button>Two</Button>
+      <Button>Tree</Button>
+    </ButtonGroup>
+    <ButtonGroup color="secondary" size="large" className="m-2">
+      <Button>One</Button>
+      <Button>Two</Button>
+      <Button>Tree</Button>
+    </ButtonGroup>
+  </div>
+</Playground>
+
+## Group orientation
+
+<Playground>
+  <div className="flex flex-row justify-center">
+    <ButtonGroup orientation="vertical" color="primary" className="m-2">
+      <Button>One</Button>
+      <Button>Two</Button>
+      <Button>Tree</Button>
+    </ButtonGroup>
+    <ButtonGroup
+      orientation="vertical"
+      color="primary"
+      variant="contained"
+      className="m-2"
+    >
+      <Button>One</Button>
+      <Button>Two</Button>
+      <Button>Tree</Button>
+    </ButtonGroup>
+    <ButtonGroup
+      orientation="vertical"
+      color="primary"
+      variant="text"
+      className="m-2"
+    >
+      <Button>One</Button>
+      <Button>Two</Button>
+      <Button>Tree</Button>
+    </ButtonGroup>
+  </div>
+</Playground>
+
+## Split Button
+
+<Playground>
+  <div className="flex flex-col items-center">
+    <ButtonGroup color="primary" className="m-2">
+      <Button>Search</Button>
+      <IconButton className="mr-2">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+        >
+          <path d="M23.822 20.88l-6.353-6.354c.93-1.465 1.467-3.2 1.467-5.059.001-5.219-4.247-9.467-9.468-9.467s-9.468 4.248-9.468 9.468c0 5.221 4.247 9.469 9.468 9.469 1.768 0 3.421-.487 4.839-1.333l6.396 6.396 3.119-3.12zm-20.294-11.412c0-3.273 2.665-5.938 5.939-5.938 3.275 0 5.94 2.664 5.94 5.938 0 3.275-2.665 5.939-5.94 5.939-3.274 0-5.939-2.664-5.939-5.939z" />
+        </svg>
+      </IconButton>
+    </ButtonGroup>
+  </div>
+</Playground>
+
+## Properties
+
+<Props of={ButtonGroup} />

platform/ui/src/components/ButtonGroup/index.js

@@ -0,0 +1,2 @@
+import ButtonGroup from './ButtonGroup';
+export default ButtonGroup;

platform/ui/tailwind.config.js

@@ -665,9 +665,9 @@ module.exports = {
     backgroundSize: ['responsive'],
     borderCollapse: ['responsive'],
     borderColor: ['responsive', 'hover', 'focus', 'active'],
-    borderRadius: ['responsive', 'focus'],
+    borderRadius: ['responsive', 'focus', 'first', 'last'],
     borderStyle: ['responsive', 'focus'],
-    borderWidth: ['responsive', 'focus'],
+    borderWidth: ['responsive', 'focus', 'first', 'last'],
     boxShadow: ['responsive', 'hover', 'focus'],
     boxSizing: ['responsive'],
     cursor: ['responsive'],