feat(ButtonGroup): Add button group and toolbar

eddywashere · eddywashere · commit 123b435fd172 · 2016-02-19T23:31:03.000-08:00
diff --git a/lib/ButtonGroup.jsx b/lib/ButtonGroup.jsx
@@ -0,0 +1,49 @@
+import React, { PropTypes } from 'react';
+import classNames from 'classnames';
+
+const propTypes = {
+  'aria-label': PropTypes.string,
+  className: PropTypes.string,
+  role: PropTypes.string,
+  size: PropTypes.string,
+  vertical: PropTypes.bool
+};
+
+const defaultProps = {
+  role: 'group'
+};
+
+class ButtonGroup extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const {
+      children,
+      className,
+      size,
+      vertical,
+      ...attributes
+    } = this.props;
+
+    const classes = classNames(
+      className,
+      'btn-group',
+      size ? 'btn-' + size : false,
+      vertical ? 'btn-group-vertical' : false
+    );
+
+    return (
+      <div {...attributes}
+        className={classes}>
+        {children}
+      </div>
+    );
+  }
+}
+
+ButtonGroup.propTypes = propTypes;
+ButtonGroup.defaultProps = defaultProps;
+
+export default ButtonGroup;
diff --git a/lib/ButtonToolbar.jsx b/lib/ButtonToolbar.jsx
@@ -0,0 +1,43 @@
+import React, { PropTypes } from 'react';
+import classNames from 'classnames';
+
+const propTypes = {
+  'aria-label': PropTypes.string,
+  className: PropTypes.string,
+  role: PropTypes.string
+};
+
+const defaultProps = {
+  role: 'toolbar'
+};
+
+class ButtonToolbar extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const {
+      children,
+      className,
+      ...attributes
+    } = this.props;
+
+    const classes = classNames(
+      className,
+      'btn-toolbar'
+    );
+
+    return (
+      <div {...attributes}
+        className={classes}>
+        {children}
+      </div>
+    );
+  }
+}
+
+ButtonToolbar.propTypes = propTypes;
+ButtonToolbar.defaultProps = defaultProps;
+
+export default ButtonToolbar;
diff --git a/lib/index.js b/lib/index.js
@@ -1,5 +1,9 @@
 import Button from './Button';
+import ButtonGroup from './ButtonGroup';
+import ButtonToolbar from './ButtonToolbar';
 
 export {
-  Button
+  Button,
+  ButtonGroup,
+  ButtonToolbar
 };
diff --git a/test/ButtonGroup.spec.js b/test/ButtonGroup.spec.js
@@ -0,0 +1,27 @@
+/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import { ButtonGroup } from '../lib';
+
+describe('ButtonGroup', () => {
+  it('should render children', () => {
+    const wrapper = shallow(<ButtonGroup>Ello world</ButtonGroup>);
+
+    expect(wrapper.text()).toBe('Ello world');
+    expect(wrapper.hasClass('btn-group')).toBe(true);
+  });
+
+  it('should render different size classes', () => {
+    const small = shallow(<ButtonGroup size="sm">Small Button</ButtonGroup>);
+    const large = shallow(<ButtonGroup size="lg">Large Button</ButtonGroup>);
+
+    expect(small.hasClass('btn-sm')).toBe(true);
+    expect(large.hasClass('btn-lg')).toBe(true);
+  });
+
+  it('should render vetical class', () => {
+    const wrapper = shallow(<ButtonGroup vertical>Vertical Group</ButtonGroup>);
+
+    expect(wrapper.hasClass('btn-group-vertical')).toBe(true);
+  });
+});
diff --git a/test/ButtonToolbar.spec.js b/test/ButtonToolbar.spec.js
@@ -0,0 +1,13 @@
+/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import { ButtonToolbar } from '../lib';
+
+describe('ButtonToolbar', () => {
+  it('should render children', () => {
+    const wrapper = shallow(<ButtonToolbar>Ello world</ButtonToolbar>);
+
+    expect(wrapper.text()).toBe('Ello world');
+    expect(wrapper.hasClass('btn-toolbar')).toBe(true);
+  });
+});
