feat: Add ButtonGroup component

* Add ButtonGroup component

This adds a component for grouping Buttons together. It simply adds the
correct borderRadius to any of it's children that are buttons and passes
through the rest of the props. Along with this, the group can be
disabled rather than having to disable all buttons individually.

* Add `children` PropType validation and export ButtonGroup

* Make `GroupedButton` component fit on one line

* style: Make GroupedButton on one line

There are still CI failures. Hopefully this actually fixes them.

* test: Add missing ButtonGroup test

This adds new tests for the ButtonGroup with snapshots. It also pushes
the latest version of the toolbox distribution since that got borked
during merging.

* fix(buttongroup): Fix disabled prop being overridden

The issue was that the disabled prop was being overridden by the more
generic {...child.props}. To fix this I just had to reorder the props.

Along with this I made several style changes suggested in CR.

* fix(buttongroup): Remove borderRight from middle elements

This fixes the issue of having both the borderLeft of one button and the
borderRight of the other button creating a border with twice the normal
width. Instead, we remove the borderRight for all but the last button
and use only the borderLefts to separate buttons.

* test(buttongroup): Add test case for non-button children

This adds the test case for when a ButtonGroup has other children
besides Button components. It should, in this case, not alter the other
children as the updated shapshots show.

* fix(buttongroup): Fix bug preventing children from being disabled

The fact that the ButtonGroup's disabled overrode the childrens meant
that you couldn't individually disable the children. This updates it so
you still can and adds a test case to verify it works.

* style(buttongroup): Fix glamorous import

This removes the unnecessary additional line for destructuring glamorous
to get Div.

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>
+```