fix(priceRanges): fixed 'active' CSS class not using BEM

Updated doc & propTypes as well

BREAKING CHANGE: the `input-group` modifier has been renamed to `form`

Author: redox

components/PriceRanges.js

@@ -21,7 +21,7 @@ class PriceRange extends React.Component {
           var key = facetValue.from + '_' + facetValue.to;
           return (
             <a
-              className={cx(this.props.cssClasses.range, {active: facetValue.isRefined})}
+              className={cx(this.props.cssClasses.range, {[this.props.cssClasses.active]: facetValue.isRefined})}
               href="#"
               key={key}
               onClick={this.refine.bind(this, facetValue.from, facetValue.to)}
@@ -57,6 +57,11 @@ class PriceRange extends React.Component {
 
 PriceRange.propTypes = {
   cssClasses: React.PropTypes.shape({
+    active: React.PropTypes.string,
+    form: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.arrayOf(React.PropTypes.string)
+    ]),
     range: React.PropTypes.oneOfType([
       React.PropTypes.string,
       React.PropTypes.arrayOf(React.PropTypes.string)

widgets/price-ranges/__tests__/price-ranges-test.js

@@ -62,12 +62,13 @@ describe('priceRanges()', () => {
 
       props = {
         cssClasses: {
+          active: 'ais-price-ranges--range__active',
           body: 'ais-price-ranges--body',
           button: 'ais-price-ranges--button',
           footer: 'ais-price-ranges--footer',
           header: 'ais-price-ranges--header',
           input: 'ais-price-ranges--input',
-          form: 'ais-price-ranges--input-group',
+          form: 'ais-price-ranges--form',
           range: 'ais-price-ranges--range',
           root: 'ais-price-ranges'
         },

widgets/price-ranges/price-ranges.js

@@ -21,7 +21,9 @@ var cx = require('classnames/dedupe');
  * @param  {String|String[]} [options.cssClasses.header] CSS class to add to the header element
  * @param  {String|String[]} [options.cssClasses.body] CSS class to add to the body element
  * @param  {String|String[]} [options.cssClasses.footer] CSS class to add to the footer element
+ * @param  {String|String[]} [options.cssClasses.form] CSS class to add to the form element
  * @param  {String|String[]} [options.cssClasses.range] CSS class to add to the range element
+ * @param  {String|String[]} [options.cssClasses.active] CSS class to add to the active range element
  * @param  {String|String[]} [options.cssClasses.input] CSS class to add to the min/max input elements
  * @param  {String|String[]} [options.cssClasses.button] CSS class to add to the button element
  * @param  {Object} [options.templates] Templates to use for the widget
@@ -123,8 +125,9 @@ function priceRanges({
         body: cx(bem('body'), cssClasses.body),
         footer: cx(bem('footer'), cssClasses.footer),
         range: cx(bem('range'), cssClasses.range),
+        active: cx(bem('range', 'active'), cssClasses.active),
         input: cx(bem('input'), cssClasses.input),
-        form: cx(bem('input-group'), cssClasses.form),
+        form: cx(bem('form'), cssClasses.form),
         button: cx(bem('button'), cssClasses.button)
       };