From db8bd605ec7419280977a4b81f0ee10c6f8a5dae Mon Sep 17 00:00:00 2001 From: Pixelastic Date: Fri, 9 Oct 2015 16:05:04 +0200 Subject: [PATCH] feat(searchbox): Make the searchBox BEMish I've also updated the `poweredBy` as well. I've changed the logic of adding inline `style` to using a specific class (defined in the default `css` file). I've switched the display/hide logic. We no longer need to define a `display=true` in the props to show it, but a `hidden=true` to hide it instead. BREAKING CHANGE: The `searchBox` widget now expect a `cssClasses.{input, poweredBy}` --- README.md | 30 ++++++++++++++++++++++-- components/PoweredBy/PoweredBy.js | 31 +++++++++++++++++++++++++ components/PoweredBy/index.css | 10 -------- components/PoweredBy/index.js | 28 ---------------------- components/PoweredBy/powered-by.css | 8 +++++++ widgets/search-box.js | 36 ++++++++++++++++++++--------- 6 files changed, 92 insertions(+), 51 deletions(-) create mode 100644 components/PoweredBy/PoweredBy.js delete mode 100644 components/PoweredBy/index.css delete mode 100644 components/PoweredBy/index.js create mode 100644 components/PoweredBy/powered-by.css diff --git a/README.md b/README.md index c052c79c6f..79cc98944f 100644 --- a/README.md +++ b/README.md @@ -250,8 +250,36 @@ search.addWidget( ); ``` +#### Styling + +```html + + +
+ Powered by + + + +
+``` + +```css +/* With poweredBy; true */ +.ais-powered-by { + display: block; + font-size: 12px; + line-height: 18px; + text-align: right; +} +.ais-powered-by--image { + height: 16px; + margin-bottom: 2px; +} +``` ### stats +![Example of the stats widget][stats] + #### API ```js @@ -276,9 +304,7 @@ search.addWidget( */ ``` -#### Usage -![Example of the stats widget][stats] #### Usage diff --git a/components/PoweredBy/PoweredBy.js b/components/PoweredBy/PoweredBy.js new file mode 100644 index 0000000000..ecb3967923 --- /dev/null +++ b/components/PoweredBy/PoweredBy.js @@ -0,0 +1,31 @@ +var React = require('react'); +var bem = require('../../lib/utils').bemHelper('ais-powered-by'); +var cx = require('classnames'); +var logo = require('url?limit=10000!./algolia_logo.png'); + +require('style?prepend!raw!./powered-by.css'); + +class PoweredBy extends React.Component { + render() { + var cssClasses = { + root: cx(this.props.className, bem(null)), + link: bem('link'), + image: bem('image') + }; + + return ( +
+ Powered by + + + +
+ ); + } +} + +PoweredBy.propTypes = { + className: React.PropTypes.string +}; + +module.exports = PoweredBy; diff --git a/components/PoweredBy/index.css b/components/PoweredBy/index.css deleted file mode 100644 index a0773506df..0000000000 --- a/components/PoweredBy/index.css +++ /dev/null @@ -1,10 +0,0 @@ -.as-powered-by { - text-align: right; - line-height: 18px; - font-size: 12px; -} - -.as-powered-by--image { - height: 16px; - margin-bottom: 2px; -} diff --git a/components/PoweredBy/index.js b/components/PoweredBy/index.js deleted file mode 100644 index 3c70ca813f..0000000000 --- a/components/PoweredBy/index.js +++ /dev/null @@ -1,28 +0,0 @@ -var React = require('react'); -var bem = require('../../lib/utils').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() { - return ( -
- Powered by - - - -
- ); - } -} - -PoweredBy.propTypes = { -}; - -module.exports = PoweredBy; diff --git a/components/PoweredBy/powered-by.css b/components/PoweredBy/powered-by.css new file mode 100644 index 0000000000..ef825ad1ed --- /dev/null +++ b/components/PoweredBy/powered-by.css @@ -0,0 +1,8 @@ +.ais-powered-by { + font-size: 0.8em; + text-align: right; +} +.ais-powered-by--image { + height: 16px; + margin-bottom: 2px; +} diff --git a/widgets/search-box.js b/widgets/search-box.js index 969ad4dc24..9b9b9e527b 100644 --- a/widgets/search-box.js +++ b/widgets/search-box.js @@ -1,24 +1,33 @@ var utils = require('../lib/utils.js'); var forEach = require('lodash/collection/forEach'); +var bem = require('../lib/utils').bemHelper('ais-search-box'); +var cx = require('classnames'); /** * Instantiate a searchbox * @param {String|DOMElement} options.container CSS Selector or DOMElement to insert the widget - * @param {String} [options.placeholder='Search here'] Input's placeholder - * @param {Object} [options.cssClass] CSS classes to add to the input + * @param {String} [options.placeholder] Input's placeholder + * @param {Object} [options.cssClasses] CSS classes to add + * @param {String} [options.cssClasses.input] CSS class to add to the input + * @param {String} [options.cssClasses.poweredBy] CSS class to add to the poweredBy element * @param {boolean} [poweredBy=false] Show a powered by Algolia link below the input * @param {boolean|string} [autofocus='auto'] autofocus on the input * @return {Object} */ -function searchbox({ +function searchBox({ container, placeholder, - cssClass, + cssClasses = {}, poweredBy = false, autofocus = 'auto' }) { - // Hook on an existing input, or add one if none targeted var input = utils.getContainerNode(container); + + if (!input) { + throw new Error('Usage: searchBox({container[, placeholder, cssClasses.{input,poweredBy}, poweredBy, autofocus]})'); + } + + // Hook on an existing input, or add one if none targeted if (input.tagName !== 'INPUT') { input = input.appendChild(document.createElement('input')); } @@ -34,7 +43,6 @@ function searchbox({ autocapitalize: 'off', autocomplete: 'off', autocorrect: 'off', - className: cssClass, placeholder: placeholder, role: 'textbox', spellcheck: 'false', @@ -50,8 +58,8 @@ function searchbox({ input.setAttribute(key, value); }); - // Always add our own classes - input.classList.add('as-search-box__input'); + // Add classes + input.classList.add(bem('input'), cssClasses.input); input.addEventListener('keyup', () => { helper.setQuery(input.value).search(); @@ -60,10 +68,16 @@ function searchbox({ // Optional "powered by Algolia" widget if (poweredBy) { var React = require('react'); - var PoweredBy = require('../components/PoweredBy'); + var PoweredBy = require('../components/PoweredBy/PoweredBy.js'); var poweredByContainer = document.createElement('div'); input.parentNode.appendChild(poweredByContainer); - React.render(, poweredByContainer); + var poweredByClassName = cx(bem('powered-by'), cssClasses.poweredBy); + React.render( + , + poweredByContainer + ); } helper.on('change', function(state) { @@ -80,4 +94,4 @@ function searchbox({ }; } -module.exports = searchbox; +module.exports = searchBox;