Add ButtonGroup component

src/components/ButtonGroup/ButtonGroup.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { arrayOf, bool, node } from 'prop-types';
+import glamorous, { Div } from 'glamorous';
+
+import Button from '../Button/Button';
+import constants from '../../constants';
+
+const { borderRadius } = constants;
+
+const ButtonGroupItem = glamorous(Button)({
+   borderRadius: 0,
+   borderRightWidth: 0,
+
+   '&:first-of-type': {
+      borderTopLeftRadius: borderRadius,
+      borderBottomLeftRadius: borderRadius,
+   },
+   '&:last-of-type': {
+      borderTopRightRadius: borderRadius,
+      borderBottomRightRadius: borderRadius,
+      borderRightWidth: 1,
+   },
+});
+
+const ButtonGroup = ({ children, disabled, ...props }) => (
+   <Div display="inline-block" {...props}>
+      {React.Children.map(children, child => {
+         if (child.type !== Button) {
+            return child;
+         }
+         return (
+            <ButtonGroupItem
+               {...child.props}
+               disabled={disabled || child.props.disabled}
+            />
+         );
+      })}
+   </Div>
+);
+
+ButtonGroup.propTypes = {
+   /** Buttons to be grouped together. */
+   children: arrayOf(node).isRequired,
+   /** Indicates that the control is not available for interaction */
+   disabled: bool,
+};
+
+ButtonGroup.defaultProps = {
+   disabled: false,
+};
+
+export default ButtonGroup;

src/components/ButtonGroup/ButtonGroup.test.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import ButtonGroup from './ButtonGroup';
+import Button from '../Button/Button';
+
+test('renders without crashing', () => {
+   const tree = renderer
+      .create(
+         <ButtonGroup>
+            <Button>Button 1</Button>
+            <Button>Button 2</Button>
+         </ButtonGroup>,
+      )
+      .toJSON();
+   expect(tree).toMatchSnapshot();
+});
+
+test('renders when disabled', () => {
+   const tree = renderer
+      .create(
+         <ButtonGroup disabled>
+            <Button>Button 1</Button>
+            <Button>Button 2</Button>
+         </ButtonGroup>,
+      )
+      .toJSON();
+   expect(tree).toMatchSnapshot();
+});
+
+test('renders with disabled children', () => {
+   const tree = renderer
+      .create(
+         <ButtonGroup>
+            <Button disabled>Button 1</Button>
+            <Button>Button 2</Button>
+         </ButtonGroup>,
+      )
+      .toJSON();
+   expect(tree).toMatchSnapshot();
+});
+
+test('renders with non-button children', () => {
+   const tree = renderer
+      .create(
+         <ButtonGroup>
+            <Button>Button 1</Button>
+            <Button>Button 2</Button>
+            <span>Span</span>
+         </ButtonGroup>,
+      )
+      .toJSON();
+   expect(tree).toMatchSnapshot();
+});

src/components/ButtonGroup/README.md

@@ -0,0 +1,10 @@
+### Example
+
+```
+<ButtonGroup>
+   <Button>File</Button>
+   <Button>Edit</Button>
+   <Button>View</Button>
+   <Button>History</Button>
+</ButtonGroup>
+```