feat(inputGroup): add InputGroup components (#99)

Resolves #74
Add InputGroup with size prop
Add InputGroupAddon
Change Input to add addon prop for radio/checkbox to not `add form-check-input` class
Add InputGroupButton with convinence shorthand when only a single string is passed
Add tests for all of the above
Add documention

docs/lib/Components/InputGroupPage.jsx

@@ -0,0 +1,126 @@
+/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+import React from 'react';
+import { PrismCode } from 'react-prism';
+import Helmet from 'react-helmet';
+import OverviewExample from '../examples/InputGroupOverview';
+const OverviewExampleSource = require('!!raw!../examples/InputGroupOverview.jsx');
+import AddonExample from '../examples/InputGroupAddon';
+const AddonExampleSource = require('!!raw!../examples/InputGroupAddon.jsx');
+import AddonSizingExample from '../examples/InputGroupSizing';
+const AddonSizingExampleSource = require('!!raw!../examples/InputGroupSizing.jsx');
+import ButtonExample from '../examples/InputGroupButton';
+const ButtonExampleSource = require('!!raw!../examples/InputGroupButton.jsx');
+import ButtonShorthandExample from '../examples/InputGroupButtonShorthand';
+const ButtonShorthandExampleSource = require('!!raw!../examples/InputGroupButtonShorthand.jsx');
+
+export default class InputGroupPage extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      dropdownOpen: false
+    };
+  }
+
+  toggle() {
+    this.setState({
+      dropdownOpen: !this.state.dropdownOpen
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <Helmet title="Input Group" />
+        <h3>Input Group</h3>
+        <div className="docs-example">
+          <OverviewExample />
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+            {OverviewExampleSource}
+          </PrismCode>
+        </pre>
+        <h4>Properties</h4>
+        <pre>
+          <PrismCode className="language-jsx">
+{`InputGroup.propTypes = {
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  size: PropTypes.string,
+  className: PropTypes.any
+};
+
+InputGroupAddOn.propTypes = {
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  className: PropTypes.any
+};
+
+InputGroupButton.propTypes = {
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  children: PropTypes.node,
+  groupClassName: PropTypes.any, // only used in shorthand
+  groupAttributes: PropTypes.object, // only used in shorthand
+  className: PropTypes.any
+};`}
+          </PrismCode>
+        </pre>
+        <h3>Addons</h3>
+        <div className="docs-example">
+          <div>
+            <AddonExample />
+          </div>
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+            {AddonExampleSource}
+          </PrismCode>
+        </pre>
+
+        <h3>Addon Sizing</h3>
+        <div className="docs-example">
+          <div>
+            <AddonSizingExample />
+          </div>
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+            {AddonSizingExampleSource}
+          </PrismCode>
+        </pre>
+
+        <h3>Buttons / Dropdowns</h3>
+        <div className="docs-example">
+          <div>
+            <ButtonExample />
+          </div>
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+            {ButtonExampleSource}
+          </PrismCode>
+        </pre>
+
+        <h3>Button Shorthand</h3>
+        <p>
+          Button shorthand is a convenience method for adding just a button. It is triggered when only a single string
+          is the child. A Button will be created and all of the props will be passed to it with the exception of
+          <code>groupClassName</code> and <code>groupAttributes</code>, which are used to added classes and attributes
+          to the wrapping container. This means you can add your <code>onClick</code> and other handlers directly to
+          <code>InputGroupButton</code>. If you want your string to not be wrapped in a button, then you really want to
+          use <code>InputGroupAddon</code> (see Addons above for that).
+        </p>
+        <div className="docs-example">
+          <div>
+            <ButtonShorthandExample />
+          </div>
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+            {ButtonShorthandExampleSource}
+          </PrismCode>
+        </pre>
+      </div>
+    );
+  }
+}

docs/lib/Components/index.jsx

@@ -39,6 +39,10 @@ class Components extends React.Component {
           name: 'Form',
           to: '/components/form/'
         },
+        {
+          name: 'Input Group',
+          to: '/components/input-group/'
+        },
         {
           name: 'Breadscrumbs',
           to: '/components/breadcrumbs/'

docs/lib/examples/InputGroupAddon.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { InputGroup, InputGroupAddon, Input } from 'reactstrap';
+
+const Example = (props) => {
+  return (
+    <div>
+      <InputGroup>
+        <InputGroupAddon>To the Left!</InputGroupAddon>
+        <Input />
+      </InputGroup>
+      <br />
+      <InputGroup>
+        <Input />
+        <InputGroupAddon>To the Right!</InputGroupAddon>
+      </InputGroup>
+      <br />
+      <InputGroup>
+        <InputGroupAddon>To the Left!</InputGroupAddon>
+        <Input placeholder="and..." />
+        <InputGroupAddon>To the Right!</InputGroupAddon>
+      </InputGroup>
+    </div>
+  );
+};
+
+export default Example;

docs/lib/examples/InputGroupButton.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { InputGroup, InputGroupButton, Input, Button } from 'reactstrap';
+import ButtonDropdownExample from './ButtonDropdown';
+
+const Example = (props) => {
+  return (
+    <div>
+      <InputGroup>
+        <InputGroupButton><Button>I'm a button</Button></InputGroupButton>
+        <Input />
+      </InputGroup>
+      <br />
+      <InputGroup>
+        <Input />
+        <InputGroupButton><ButtonDropdownExample /></InputGroupButton>
+      </InputGroup>
+      <br />
+      <InputGroup>
+        <InputGroupButton><ButtonDropdownExample /></InputGroupButton>
+        <Input placeholder="and..." />
+        <InputGroupButton><Button color="secondary">I'm a button</Button></InputGroupButton>
+      </InputGroup>
+    </div>
+  );
+};
+
+export default Example;

docs/lib/examples/InputGroupButtonShorthand.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { InputGroup, InputGroupButton, Input } from 'reactstrap';
+
+const Example = (props) => {
+  return (
+    <div>
+      <InputGroup>
+        <InputGroupButton>To the Left!</InputGroupButton>
+        <Input />
+      </InputGroup>
+      <br />
+      <InputGroup>
+        <Input />
+        <InputGroupButton color="secondary">To the Right!</InputGroupButton>
+      </InputGroup>
+      <br />
+      <InputGroup>
+        <InputGroupButton color="danger">To the Left!</InputGroupButton>
+        <Input placeholder="and..." />
+        <InputGroupButton color="success">To the Right!</InputGroupButton>
+      </InputGroup>
+    </div>
+  );
+};
+
+export default Example;

docs/lib/examples/InputGroupOverview.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { InputGroup, InputGroupAddon, Input } from 'reactstrap';
+
+const Example = (props) => {
+  return (
+    <div>
+      <InputGroup>
+        <InputGroupAddon>@</InputGroupAddon>
+        <Input placeholder="username" />
+      </InputGroup>
+      <br />
+      <InputGroup>
+        <InputGroupAddon>
+          <Input addon type="checkbox" aria-label="Checkbox for following text input" />
+        </InputGroupAddon>
+        <Input placeholder="Check it out" />
+      </InputGroup>
+      <br />
+      <InputGroup>
+        <Input placeholder="username" />
+        <InputGroupAddon>@example.com</InputGroupAddon>
+      </InputGroup>
+      <br />
+      <InputGroup>
+        <InputGroupAddon>$</InputGroupAddon>
+        <InputGroupAddon>$</InputGroupAddon>
+        <Input placeholder="Dolla dolla billz yo!" />
+        <InputGroupAddon>$</InputGroupAddon>
+        <InputGroupAddon>$</InputGroupAddon>
+      </InputGroup>
+      <br />
+      <InputGroup>
+        <InputGroupAddon>$</InputGroupAddon>
+        <Input placeholder="Amount" type="number" step="1" />
+        <InputGroupAddon>.00</InputGroupAddon>
+      </InputGroup>
+    </div>
+  );
+};
+
+export default Example;

docs/lib/examples/InputGroupSizing.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { InputGroup, InputGroupAddon, Input } from 'reactstrap';
+
+const Example = (props) => {
+  return (
+    <div>
+      <InputGroup size="lg">
+        <InputGroupAddon>@lg</InputGroupAddon>
+        <Input />
+      </InputGroup>
+      <br />
+      <InputGroup>
+        <InputGroupAddon>@normal</InputGroupAddon>
+        <Input />
+      </InputGroup>
+      <br />
+      <InputGroup size="sm">
+        <InputGroupAddon>@sm</InputGroupAddon>
+        <Input />
+      </InputGroup>
+    </div>
+  );
+};
+
+export default Example;

docs/lib/routes.jsx

@@ -10,6 +10,7 @@ import ButtonGroupPage from './Components/ButtonGroupPage';
 import ButtonDropdownPage from './Components/ButtonDropdownPage';
 import DropdownsPage from './Components/DropdownsPage';
 import FormPage from './Components/FormPage';
+import InputGroupPage from './Components/InputGroupPage';
 import PopoversPage from './Components/PopoversPage';
 import TooltipsPage from './Components/TooltipsPage';
 import TagsPage from './Components/TagsPage';
@@ -31,6 +32,7 @@ const routes = (
       <Route path="button-dropdown/" component={ButtonDropdownPage} />
       <Route path="dropdowns/" component={DropdownsPage} />
       <Route path="form/" component={FormPage} />
+      <Route path="input-group/" component={InputGroupPage} />
       <Route path="popovers/" component={PopoversPage} />
       <Route path="tooltips/" component={TooltipsPage} />
       <Route path="tags/" component={TagsPage} />

src/Input.jsx

@@ -8,6 +8,7 @@ const propTypes = {
   state: PropTypes.string,
   tag: PropTypes.string,
   static: PropTypes.bool,
+  addon: PropTypes.bool,
   className: PropTypes.string,
 };
 
@@ -23,6 +24,7 @@ const Input = (props) => {
     size,
     state,
     tag,
+    addon,
     static: staticInput,
     ...attributes,
   } = props;
@@ -42,7 +44,11 @@ const Input = (props) => {
   } else if (fileInput) {
     formControlClass = `${formControlClass}-file`;
   } else if (checkInput) {
-    formControlClass = 'form-check-input';
+    if (addon) {
+      formControlClass = null;
+    } else {
+      formControlClass = 'form-check-input';
+    }
   }
 
   const classes = classNames(

src/InputGroup.jsx

@@ -0,0 +1,35 @@
+import React, { PropTypes } from 'react';
+import classNames from 'classnames';
+
+const propTypes = {
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  size: PropTypes.string,
+  className: PropTypes.any
+};
+
+const defaultProps = {
+  tag: 'div'
+};
+
+const InputGroup = (props) => {
+  const {
+    className,
+    tag: Tag,
+    size,
+    ...attributes
+  } = props;
+  const classes = classNames(
+    className,
+    'input-group',
+    size ? `input-group-${size}` : null
+  );
+
+  return (
+    <Tag {...attributes} className={classes} />
+  );
+};
+
+InputGroup.propTypes = propTypes;
+InputGroup.defaultProps = defaultProps;
+
+export default InputGroup;