feat(DropdownButton): DropdownButton and SplitButton components

Export DropdownButton and SplitButton from react-bootstrap

re #11

Author: Avi Sharvit

package-lock.json

@@ -5,9 +5,10 @@ import { BUTTON_BS_STYLES } from './constants';
 
 const Button = props => <BsButton {...props} />;
 
-Button.propTypes = Object.assign(BsButton.propTypes, {
+Button.propTypes = {
+  ...BsButton.propTypes,
   bsStyle: PropTypes.oneOf(BUTTON_BS_STYLES),
-});
+};
 
 Button.BUTTON_BS_STYLES = BUTTON_BS_STYLES;
 

src/components/Button/Button.js

@@ -1,8 +1,11 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { withKnobs, select } from '@storybook/addon-knobs';
 import { defaultTemplate } from '../../../storybook/decorators/storyTemplates';
-import { Button, ButtonGroup } from './index';
-import { Grid, Row, Col } from '../../index';
+import { Grid, Row, Col, MenuItem } from '../../index';
+import { Button, ButtonGroup, DropdownButton, SplitButton } from './index';
+import { BUTTON_BS_STYLES } from './constants';
 
 const stories = storiesOf('Button', module);
 
@@ -16,6 +19,7 @@ const description = (
   </p>
 );
 
+stories.addDecorator(withKnobs);
 stories.addDecorator(
   defaultTemplate({
     title: 'Button',
@@ -138,3 +142,43 @@ stories.addWithInfo('ButtonGroup', () => {
     </Grid>
   );
 });
+
+stories.addWithInfo('DropdownButton', '', () => {
+  const bsStyle = select('Style', BUTTON_BS_STYLES, 'default');
+  const bsSize = select('Size', [undefined, 'xsmall', 'small', 'large']);
+
+  const props = { bsStyle, title: bsStyle, id: 'dropdown-example' };
+  if (bsSize) props.bsSize = bsSize;
+
+  return (
+    <DropdownButton {...props} onClick={action('onClick')}>
+      <MenuItem eventKey="1">Action</MenuItem>
+      <MenuItem eventKey="2">Another action</MenuItem>
+      <MenuItem eventKey="3" active>
+        Active Item
+      </MenuItem>
+      <MenuItem divider />
+      <MenuItem eventKey="4">Separated link</MenuItem>
+    </DropdownButton>
+  );
+});
+
+stories.addWithInfo('SplitButton', '', () => {
+  const bsStyle = select('Style', BUTTON_BS_STYLES, 'default');
+  const bsSize = select('Size', [undefined, 'xsmall', 'small', 'large']);
+
+  const props = { bsStyle, title: bsStyle, id: 'dropdown-example' };
+  if (bsSize) props.bsSize = bsSize;
+
+  return (
+    <SplitButton {...props} onClick={action('onClick')}>
+      <MenuItem eventKey="1">Action</MenuItem>
+      <MenuItem eventKey="2">Another action</MenuItem>
+      <MenuItem eventKey="3" active>
+        Active Item
+      </MenuItem>
+      <MenuItem divider />
+      <MenuItem eventKey="4">Separated link</MenuItem>
+    </SplitButton>
+  );
+});

src/components/Button/Button.stories.js

@@ -1,2 +1 @@
-import { ButtonGroup } from 'react-bootstrap';
-export default ButtonGroup;
+export { ButtonGroup as default } from 'react-bootstrap';

src/components/Button/ButtonGroup.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { DropdownButton as BsDropdownButton } from 'react-bootstrap';
+import { BUTTON_BS_STYLES } from './constants';
+
+const DropdownButton = props => <BsDropdownButton {...props} />;
+
+DropdownButton.propTypes = {
+  ...BsDropdownButton.propTypes,
+  bsStyle: PropTypes.oneOf(BUTTON_BS_STYLES),
+};
+
+DropdownButton.BUTTON_BS_STYLES = BUTTON_BS_STYLES;
+
+export default DropdownButton;

src/components/Button/DropdownButton.js

@@ -0,0 +1,26 @@
+/* eslint-env jest */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import DropdownButton from './DropdownButton';
+import { MenuItem } from '../MenuItem';
+
+test('DropdownButton should renders properly', () => {
+  DropdownButton.BUTTON_BS_STYLES.forEach(bsStyle => {
+    const component = renderer.create(
+      <DropdownButton title={bsStyle} id={`dropdown-button-test-${bsStyle}`}>
+        <MenuItem eventKey="1">Action</MenuItem>
+        <MenuItem eventKey="2">Another action</MenuItem>
+        <MenuItem eventKey="3" active>
+          Active Item
+        </MenuItem>
+        <MenuItem divider />
+        <MenuItem eventKey="4">Separated link</MenuItem>
+      </DropdownButton>,
+    );
+
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/Button/DropdownButton.test.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { SplitButton as BsSplitButton } from 'react-bootstrap';
+import { BUTTON_BS_STYLES } from './constants';
+
+const SplitButton = props => <BsSplitButton {...props} />;
+
+SplitButton.propTypes = {
+  ...BsSplitButton.propTypes,
+  bsStyle: PropTypes.oneOf(BUTTON_BS_STYLES),
+};
+
+SplitButton.BUTTON_BS_STYLES = BUTTON_BS_STYLES;
+
+export default SplitButton;

src/components/Button/SplitButton.js

@@ -0,0 +1,26 @@
+/* eslint-env jest */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import SplitButton from './SplitButton';
+import { MenuItem } from '../MenuItem';
+
+test('SplitButton should renders properly', () => {
+  SplitButton.BUTTON_BS_STYLES.forEach(bsStyle => {
+    const component = renderer.create(
+      <SplitButton title={bsStyle} id={`dropdown-button-test-${bsStyle}`}>
+        <MenuItem eventKey="1">Action</MenuItem>
+        <MenuItem eventKey="2">Another action</MenuItem>
+        <MenuItem eventKey="3" active>
+          Active Item
+        </MenuItem>
+        <MenuItem divider />
+        <MenuItem eventKey="4">Separated link</MenuItem>
+      </SplitButton>,
+    );
+
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});