Add ButtonGroup component

src/components/ButtonGroup/ButtonGroup.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import glamorous from 'glamorous';
+
+import Button from '../Button/Button';
+import constants from '../../constants';
+
+const { borderRadius } = constants;
+
+const ButtonGroupContainer = glamorous.div({
+   display: 'inline-block',
+});
+
+const GroupedButton = glamorous(Button)({
+   borderRadius: 0,
+
+   '&:first-of-type': {
+      borderTopLeftRadius: borderRadius,
+      borderBottomLeftRadius: borderRadius,
+   },
+   '&:last-of-type': {
+      borderTopRightRadius: borderRadius,
+      borderBottomRightRadius: borderRadius,
+   },
+});
+
+const ButtonGroup = ({
+   children,
+   className,
+   disabled,
+   onMouseEnter,
+   onMouseLeave,
+}) => (
+   <ButtonGroupContainer
+      className={className}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+   >
+      {React.Children.map(children, child => {
+         if (child.type !== Button) {
+            return child;
+         }
+         return <GroupedButton disabled={disabled} {...child.props} />;
+      })}
+   </ButtonGroupContainer>
+);
+
+ButtonGroup.propTypes = {
+   /** Buttons to be grouped together. */
+   children: PropTypes.arrayOf(PropTypes.node),
+   /** Set class name of containing element. */
+   className: PropTypes.string,
+   /** Indicates that the control is not available for interaction */
+   disabled: PropTypes.bool,
+   /** Callback when mouse enters component. */
+   onMouseEnter: PropTypes.func,
+   /** Callback when mouse leaves component. */
+   onMouseLeave: PropTypes.func,
+};
+
+ButtonGroup.defaultProps = {
+   children: [],
+   className: '',
+   disabled: false,
+   onMouseEnter: () => {},
+   onMouseLeave: () => {},
+};
+
+export default ButtonGroup;

src/components/ButtonGroup/ButtonGroup.test.jsx

@@ -0,0 +1,21 @@
+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 />).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();
+});

src/components/ButtonGroup/README.md

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

src/components/ButtonGroup/__snapshots__/ButtonGroup.test.jsx.snap

@@ -0,0 +1,137 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders when disabled 1`] = `
+.glamor-6,
+[data-glamor-6] {
+  display: inline-block;
+}
+
+.glamor-2,
+[data-glamor-2] {
+  display: inline-block;
+  box-sizing: border-box;
+  font-family: inherit;
+  text-decoration: none;
+  border: 1px solid transparent;
+  border-radius: 0;
+  outline: 0;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  transition: all 150ms ease-in-out;
+  color: rgba(0, 3, 6, 0.87);
+  background-color: transparent;
+  border-color: rgba(0, 3, 6, 0.12);
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-transition: all 150ms ease-in-out;
+  -moz-transition: all 150ms ease-in-out;
+}
+
+.glamor-2:hover,
+[data-glamor-2]:hover {
+  background-color: rgba(0, 3, 6, 0.04);
+}
+
+.glamor-2:focus,
+[data-glamor-2]:focus {
+  box-shadow: 0 0 0 3px rgba(0, 3, 6, 0.12);
+}
+
+.glamor-2:first-of-type,
+[data-glamor-2]:first-of-type {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+.glamor-2:last-of-type,
+[data-glamor-2]:last-of-type {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.glamor-1,
+[data-glamor-1] {
+  width: 100%;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+}
+
+.glamor-1> :not(:first-child),
+[data-glamor-1]> :not(:first-child) {
+  margin-left: 0.5rem;
+}
+
+.glamor-0,
+[data-glamor-0] {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+<div
+  className="glamor-6"
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+>
+  <button
+    className="glamor-2"
+    disabled={false}
+    onClick={[Function]}
+    tabIndex={0}
+  >
+    <span
+      className="glamor-1"
+    >
+      <span
+        className="glamor-0"
+      >
+        Button 1
+      </span>
+    </span>
+  </button>
+  <button
+    className="glamor-2"
+    disabled={false}
+    onClick={[Function]}
+    tabIndex={0}
+  >
+    <span
+      className="glamor-1"
+    >
+      <span
+        className="glamor-0"
+      >
+        Button 2
+      </span>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`renders without crashing 1`] = `
+.glamor-0,
+[data-glamor-0] {
+  display: inline-block;
+}
+
+<div
+  className="glamor-0"
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+/>
+`;

src/index.js

@@ -7,6 +7,7 @@ import './plugins';
 export { default as glamorous } from 'glamorous';
 
 export { default as Button } from './components/Button/Button';
+export { default as ButtonGroup } from './components/ButtonGroup/ButtonGroup';
 export { default as Checkbox } from './components/Checkbox/Checkbox';
 export { default as Grid } from './components/Grid/Grid';
 export { default as Icon } from './components/Icon/Icon';