Merge pull request #135 from appfolio/addTooltip

Add Tooltip Component

src/components/Tooltip.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Tooltip as InnerTooltip } from 'reactstrap';
+
+export default class Tooltip extends React.Component {
+  static propTypes = {
+    isOpen: React.PropTypes.bool
+  };
+
+  static defaultProps = {
+    isOpen: false
+  };
+
+  state = {
+    isOpen: this.props.isOpen
+  };
+
+  toggle = () => this.setState({
+    isOpen: !this.state.isOpen
+  });
+
+  render() {
+    const { isOpen, ...props } = this.props;
+
+    return (
+      <InnerTooltip isOpen={this.state.isOpen} toggle={this.toggle} {...props} />
+    );
+  }
+}

src/index.js

@@ -59,8 +59,7 @@ import {
   Row,
   TabContent,
   TabPane,
-  TetherContent,
-  Tooltip
+  TetherContent
 } from 'reactstrap';
 
 // Gears:
@@ -86,6 +85,7 @@ import Steps from './components/Steps.js';
 import SummaryBox from './components/SummaryBox.js';
 import SummaryBoxItem from './components/SummaryBoxItem.js';
 import Table from './components/Table.js';
+import Tooltip from './components/Tooltip.js';
 
 export {
   // reactstrap
@@ -152,7 +152,6 @@ export {
   TabPane,
   Table,
   TetherContent,
-  Tooltip,
 
   Select,
 
@@ -175,5 +174,6 @@ export {
   Spinner,
   Steps,
   SummaryBox,
-  SummaryBoxItem
+  SummaryBoxItem,
+  Tooltip
 };

stories/Tooltip.js

@@ -3,43 +3,18 @@ import { Tooltip } from '../src';
 import { storiesOf } from '@kadira/storybook';
 import { select } from '@kadira/storybook-addon-knobs';
 
-export default class TooltipExample extends React.Component {
-  static displayName = 'Tooltip';
-
-  state = {
-    tooltipOpen: false
-  };
-
-  toggle = () => this.setState({
-    tooltipOpen: !this.state.tooltipOpen
-  });
-
-  render() {
-    return (
-      <Tooltip
-        placement={this.props.placement}
-        isOpen={this.state.tooltipOpen}
-        target={this.props.target}
-        toggle={this.toggle}
-      >
-        {this.props.children}
-      </Tooltip>
-    );
-  }
-}
-
 storiesOf('Tooltip', module)
   .addWithInfo('Live example', () => (
     <div>
       <p>
         Somewhere in here is a <a id="TooltipExample">tooltip</a>.
       </p>
-      <TooltipExample
+      <Tooltip
         placement={select('placement', ['top', 'left', 'bottom', 'right'], 'right')}
         target="TooltipExample"
       >
         Hello world!
-      </TooltipExample>
+      </Tooltip>
     </div>
   )
 );

test/components/Tooltip.spec.js

@@ -0,0 +1,36 @@
+/* eslint-env mocha */
+import React from 'react';
+import assert from 'assert';
+import { shallow } from 'enzyme';
+
+import Tooltip from '../../src/components/Tooltip';
+
+describe('<Tooltip />', () => {
+  describe('by default', () => {
+    const component = shallow(<Tooltip placement="right" children="Hello World" target="foo" />);
+
+    it('should be closed', () => {
+      assert.equal(component.prop('isOpen'), false);
+      assert.equal(component.state('isOpen'), false);
+    });
+
+    it('should forward props', () => {
+      assert.equal(component.prop('placement'), 'right');
+    });
+
+    it('should toggle state', () => {
+      component.prop('toggle')();
+      assert.equal(component.prop('isOpen'), true);
+      assert.equal(component.state('isOpen'), true);
+    });
+  });
+
+  describe('with initial props', () => {
+    const component = shallow(<Tooltip isOpen children="Hello World" target="foo" />);
+
+    it('should seed state', () => {
+      assert.equal(component.prop('isOpen'), true);
+      assert.equal(component.state('isOpen'), true);
+    });
+  });
+});