feat(searchBox): add poweredBy option, disabled by default

Author: Jerska

README.md

@@ -199,6 +199,7 @@ search.addWidget(
     container: '#search-box',
     placeholder: 'Search for products',
     // cssClass
+    // poweredBy: boolean
   })
 );
 ```

components/PoweredBy/algolia_logo.png

@@ -0,0 +1,10 @@
+.as-powered-by {
+  text-align: right;
+  line-height: 18px;
+  font-size: 12px;
+}
+
+.as-powered-by--image {
+  height: 16px;
+  margin-bottom: 2px;
+}

components/PoweredBy/index.css

@@ -0,0 +1,32 @@
+var React = require('react');
+var bem = require('../BemHelper')('as-powered-by');
+var logo = require('url?limit=10000!./algolia_logo.png');
+
+require('style?prepend!raw!./index.css');
+
+class PoweredBy extends React.Component {
+  render() {
+    var poweredByDisplay = (this.props.display === true) ? 'block' : 'none';
+
+    return (
+      <div
+        className={bem()}
+        style={{display: poweredByDisplay}}
+      >
+        Powered by
+        <a href="https://www.algolia.com/">
+          <img
+            className={bem('image')}
+            src={logo}
+          />
+        </a>
+      </div>
+    );
+  }
+}
+
+PoweredBy.propTypes = {
+  display: React.PropTypes.bool
+};
+
+module.exports = PoweredBy;

components/PoweredBy/index.js

@@ -1,4 +1,5 @@
 var React = require('react');
+var PoweredBy = require('./PoweredBy');
 var bem = require('./BemHelper')('as-search-box');
 var cx = require('classnames');
 
@@ -12,15 +13,18 @@ class SearchBox {
     var classNames = cx(bem('input'), this.props.inputClass);
 
     return (
-      <input type="text"
-        placeholder={this.props.placeholder}
-        name="algolia-query"
-        className={classNames}
-        autoComplete="off"
-        autoFocus="autofocus"
-        onChange={this.handleChange.bind(this)}
-        role="textbox"
-      />
+      <div>
+        <input type="text"
+          placeholder={this.props.placeholder}
+          name="algolia-query"
+          className={classNames}
+          autoComplete="off"
+          autoFocus="autofocus"
+          onChange={this.handleChange.bind(this)}
+          role="textbox"
+        />
+        <PoweredBy display={this.props.poweredBy} />
+      </div>
     );
   }
 }
@@ -31,6 +35,7 @@ SearchBox.propTypes = {
     React.PropTypes.string,
     React.PropTypes.array
   ]),
+  poweredBy: React.PropTypes.bool,
   setQuery: React.PropTypes.func,
   search: React.PropTypes.func
 };

components/SearchBox.js

@@ -11,7 +11,8 @@ search.addWidget(
   instantsearch.widgets.searchBox({
     container: '#search-box',
     placeholder: 'Search for products',
-    cssClass: 'form-control'
+    cssClass: 'form-control',
+    poweredBy: true
   })
 );
 

example/app.js

@@ -42,6 +42,7 @@
     "tap-spec": "4.1.0",
     "tape": "4.2.0",
     "uglifyjs": "2.4.10",
+    "url-loader": "^0.5.6",
     "webpack": "1.12.2",
     "webpack-dev-server": "1.11.0"
   },

npm-shrinkwrap.json

@@ -15,6 +15,7 @@ function searchbox(params) {
           search={helper.search.bind(helper)}
           placeholder={params.placeholder}
           inputClass={params.cssClass}
+          poweredBy={params.poweredBy}
         />,
         container
       );