feat(bem): Add BEM-styling to the Stats widget

Updated the Stats widget to use ais-stats BEM classes. Exact same rendering as before, but open the way to theme creation. BREAKING CHANGE: We now use a `span.ais-stats--time` instead of a `small` tag in the stats widget.
algolia · Oct 6, 2015 · 92cebeb · 92cebeb
1 parent 6b42e34
commit 92cebeb
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 34 deletions.
diff --git a/README.md b/README.md
@@ -259,15 +259,16 @@ search.addWidget(
 /**
  * Display various stats about the current search state
  * @param  {String|DOMElement} options.container CSS Selector or DOMElement to insert the widget
- * @param  {Object} [options.cssClasses] CSS classes to add to the wrapping elements: root
- * @param  {String|String[]} [options.cssClasses.root] CSS class to add to the root element
+ * @param  {Object} [options.cssClasses] CSS classes to add to the default template
+ * @param  {String} [options.cssClasses.root] CSS class to add to the root element
+ * @param  {String} [options.cssClasses.time] CSS class to add to the element wrapping the time processingTimeMs
  * @param  {Object} [options.templates] Templates to use for the widget
  * @param  {String|Function} [options.templates.header=''] Header template
- * @param  {String|Function} [options.templates.body='<div>
+ * @param  {String|Function} [options.templates.body='<div class="{{cssClasses.root}}">
   {{#hasNoResults}}No results{{/hasNoResults}}
   {{#hasOneResult}}1 result{{/hasOneResult}}
   {{#hasManyResults}}{{#helpers.formatNumber}}{{nbHits}}{{/helpers.formatNumber}} results{{/hasManyResults}}
-  <small>found in {{processingTimeMS}}ms</small>
+  <span class="{{cssClasses.time}}">found in {{processingTimeMS}}ms</span>
 </div>'] Body template
  * @param  {String|Function} [options.templates.footer=''] Footer template
  * @param  {Function} [options.transformData] Function to change the object passed to the `body` template
@@ -276,13 +277,10 @@ search.addWidget(
  */
 ```
 
-
 #### Usage
 
 ![Example of the stats widget][stats]
 
-#### API
-
 #### Usage
 
 ```html
@@ -293,17 +291,9 @@ search.addWidget(
 search.addWidget(
   instantsearch.widgets.stats({
     container: '#stats',
-    template: // mustache string or function(stats) with the following keys
-              // hasManyResults: boolean
-              // hasNoResults: boolean
-              // hasOneResult: boolean
-              // hitsPerPage: number
-              // nbHits: number
-              // nbPages: number
-              // page: number
-              // processingTimeMS: number
-              // query: string
-    transformData: // function to modify the data passed to the template
+    cssClasses: {
+      time: 'label label-info'
+    }
   })
 );
 ```

diff --git a/components/Stats.js → components/Stats/Stats.js b/components/Stats.js → components/Stats/Stats.js
@@ -1,6 +1,10 @@
 var React = require('react');
 
-var Template = require('./Template');
+var Template = require('../Template');
+var bem = require('../../lib/utils').bemHelper('ais-stats');
+var cx = require('classnames');
+
+require('style?prepend!raw!./stats.css');
 
 class Stats extends React.Component {
   render() {
@@ -13,7 +17,11 @@ class Stats extends React.Component {
       nbPages: this.props.nbPages,
       page: this.props.page,
       processingTimeMS: this.props.processingTimeMS,
-      query: this.props.query
+      query: this.props.query,
+      cssClasses: {
+        root: cx(bem(null), this.props.cssClasses.root),
+        time: cx(bem('time'), this.props.cssClasses.time)
+      }
     };
 
     return (

diff --git a/components/Stats/stats.css b/components/Stats/stats.css
@@ -0,0 +1,5 @@
+.ais-stats {
+}
+.ais-stats--time {
+  font-size: small;
+}
diff --git a/widgets/stats/index.js b/widgets/stats/index.js
@@ -4,7 +4,7 @@ var utils = require('../../lib/utils.js');
 var autoHide = require('../../decorators/autoHide');
 var headerFooter = require('../../decorators/headerFooter');
 var bindProps = require('../../decorators/bindProps');
-var Stats = autoHide(headerFooter(require('../../components/Stats')));
+var Stats = autoHide(headerFooter(require('../../components/Stats/Stats.js')));
 
 var Template = require('../../components/Template');
 
@@ -17,33 +17,32 @@ var defaultTemplates = {
 /**
  * Display various stats about the current search state
  * @param  {String|DOMElement} options.container CSS Selector or DOMElement to insert the widget
- * @param  {Object} [options.cssClasses] CSS classes to add to the wrapping elements: root
- * @param  {String|String[]} [options.cssClasses.root] CSS class to add to the root element
+ * @param  {Object} [options.cssClasses] CSS classes to add to the default template
+ * @param  {String} [options.cssClasses.root] CSS class to add to the root element
+ * @param  {String} [options.cssClasses.time] CSS class to add to the element wrapping the time processingTimeMs
  * @param  {Object} [options.templates] Templates to use for the widget
  * @param  {String|Function} [options.templates.header=''] Header template
- * @param  {String|Function} [options.templates.body='<div>
+ * @param  {String|Function} [options.templates.body='<div class="{{cssClasses.root}}">
   {{#hasNoResults}}No results{{/hasNoResults}}
   {{#hasOneResult}}1 result{{/hasOneResult}}
   {{#hasManyResults}}{{#helpers.formatNumber}}{{nbHits}}{{/helpers.formatNumber}} results{{/hasManyResults}}
-  <small>found in {{processingTimeMS}}ms</small>
+  <span class="{{cssClasses.time}}">found in {{processingTimeMS}}ms</span>
 </div>'] Body template
  * @param  {String|Function} [options.templates.footer=''] Footer template
  * @param  {Function} [options.transformData] Function to change the object passed to the `body` template
  * @param  {boolean} [hideWhenNoResults=true] Hide the container when there's no results
  * @return {Object}
  */
 function stats({
-    container = null,
-    templates = defaultTemplates,
-    transformData,
+    container,
+    cssClasses = {},
     hideWhenNoResults = true,
-    cssClasses = {
-      root: null
-    }
+    templates = defaultTemplates,
+    transformData
   }) {
   var containerNode = utils.getContainerNode(container);
 
-  if (container === null) {
+  if (!containerNode) {
     throw new Error('Usage: stats({container[, template, transformData]})');
   }
 

diff --git a/widgets/stats/template.html b/widgets/stats/template.html
@@ -1,6 +1,6 @@
-<div>
+<div class="{{cssClasses.root}}">
   {{#hasNoResults}}No results{{/hasNoResults}}
   {{#hasOneResult}}1 result{{/hasOneResult}}
   {{#hasManyResults}}{{#helpers.formatNumber}}{{nbHits}}{{/helpers.formatNumber}} results{{/hasManyResults}}
-  <small>found in {{processingTimeMS}}ms</small>
+  <span class="{{cssClasses.time}}">found in {{processingTimeMS}}ms</span>
 </div>