feat(react-search): Add a stateless SearchInput component.

[#84034250]

src/pivotal-ui/components/forms.scss

@@ -1251,3 +1251,23 @@ Add the focus-input directive to an element that should be focused if the focus-
 ```
 
 */
+
+/*doc
+---
+title: React Search Inputs
+name: form_search_input_react
+categories:
+  - Beta
+---
+
+```html_example
+<div id='react-search-example'></div>
+```
+
+```jsx_example
+React.render(
+  <SearchInput placeholder="Search..."/>,
+  document.getElementById('react-search-example')
+);
+```
+*/

src/pivotal-ui/javascripts/inputs.jsx

@@ -0,0 +1,27 @@
+'use strict';
+
+var React = require('react');
+var _ = require('lodash');
+
+var SearchInput = React.createClass({
+  render: function () {
+    var inputClasses = ['form-control'];
+
+    if (this.props.className) {
+      inputClasses.push(this.props.className);
+    }
+
+    inputClasses = inputClasses.join(" ");
+
+    return(
+      <div className='form-group form-group-search'>
+        <input {...this.props} type='text' className={inputClasses} placeholder={this.props.placeholder}/>
+        <i className='fa fa-search' />
+      </div>
+    );
+  }
+});
+
+module.exports = {
+  SearchInput: SearchInput
+};

src/pivotal-ui/javascripts/pivotal-ui-react.js

@@ -31,6 +31,8 @@ global.DangerButton = require('./buttons.jsx').DangerButton;
 global.HighlightButton = require('./buttons.jsx').HighlightButton;
 global.HighlightAltButton = require('./buttons.jsx').HighlightAltButton;
 
+global.SearchInput = require('./inputs.jsx').SearchInput;
+
 global.Divider = require('./dividers.jsx').Divider;
 global.DividerInverse = require('./dividers.jsx').DividerInverse;
 

test/spec/javascripts/input_spec.js

@@ -0,0 +1,81 @@
+'use strict';
+
+var $ = require('jquery');
+var React = require('react/addons');
+
+var SearchInput = React.createFactory(require('../../../src/pivotal-ui/javascripts/inputs.jsx').SearchInput);
+var TestUtils = React.addons.TestUtils;
+
+describe('SearchInput', function() {
+  beforeEach(function() {
+    this.node = $('<div id="container"></div>').appendTo('body').get(0);
+
+    React.render(
+      SearchInput({}),
+      this.node
+    );
+  });
+
+  afterEach(function() {
+    React.unmountComponentAtNode(this.node);
+    document.body.removeChild(this.node);
+  });
+
+  it("renders a form group with the search classes", function() {
+    expect($('#container .form-group')).toHaveClass('form-group-search');
+
+    expect($('#container .form-group input')).toHaveClass('form-control');
+
+    expect($('#container .form-group i')).toHaveClass('fa');
+    expect($('#container .form-group i')).toHaveClass('fa-search');
+  });
+
+  describe("when a placeholder is provided", function() {
+    beforeEach(function() {
+      React.render(
+        SearchInput({
+          placeholder: 'Search here...'
+        }),
+        this.node
+      );
+    });
+
+    it("renders the input with a placeholder", function() {
+      expect($('#container .form-group input').attr('placeholder')).toEqual('Search here...');
+    });
+  });
+
+  describe("when a className is provided", function() {
+    beforeEach(function() {
+      React.render(
+        SearchInput({
+          className: 'foo myClass'
+        }),
+        this.node
+      );
+    });
+
+    it("adds the classes to the input", function() {
+      expect($('#container .form-group input')).toHaveClass('foo');
+      expect($('#container .form-group input')).toHaveClass('myClass');
+    });
+  });
+
+  describe("when event handlers are provided", function() {
+    beforeEach(function() {
+      this.changeFn = jasmine.createSpy();
+
+      React.render(
+        SearchInput({
+          onChange: this.changeFn
+        }),
+        this.node
+      );
+    });
+
+    it("adds the handlers to the search input", function() {
+      TestUtils.Simulate.change($('#container input').get(0));
+      expect(this.changeFn).toHaveBeenCalled();
+    });
+  });
+});