feat(priceRanges): add currency option

This is a feature and also a fix.

Previously, we had labels.currency but it was not setting the currency
in the item template.

So you had to provide your own template item, and even doing so could
not access any `currency` template data.

No we only provide opts.currency (no more labels.currency, but we are
backward compatible).

And `currency` is a template data.

Author: vvo

Diff for: src/components/PriceRanges/PriceRanges.js

@@ -6,10 +6,15 @@ import cx from 'classnames';
 
 class PriceRanges extends React.Component {
   getForm() {
+    let labels = {
+      currency: this.props.currency,
+      ...this.props.labels
+    };
+
     return (
       <PriceRangesForm
         cssClasses={this.props.cssClasses}
-        labels={this.props.labels}
+        labels={labels}
         refine={this.refine.bind(this)}
       />
     );
@@ -30,14 +35,18 @@ class PriceRanges extends React.Component {
     let url = this.getURLFromFacetValue(facetValue);
     let key = facetValue.from + '_' + facetValue.to;
     let handleClick = this.refine.bind(this, facetValue.from, facetValue.to);
+    let data = {
+      currency: this.props.currency,
+      ...facetValue
+    };
     return (
       <div className={cssClassItem} key={key}>
         <a
           className={this.props.cssClasses.link}
           href={url}
           onClick={handleClick}
         >
-          <Template data={facetValue} templateKey="item" {...this.props.templateProps} />
+          <Template data={data} templateKey="item" {...this.props.templateProps} />
         </a>
       </div>
     );
@@ -80,10 +89,10 @@ PriceRanges.propTypes = {
     list: React.PropTypes.string,
     separator: React.PropTypes.string
   }),
+  currency: React.PropTypes.string,
   facetValues: React.PropTypes.array,
   labels: React.PropTypes.shape({
     button: React.PropTypes.string,
-    currency: React.PropTypes.string,
     to: React.PropTypes.string
   }),
   refine: React.PropTypes.func.isRequired,

Diff for: src/components/PriceRanges/__tests__/PriceRanges-test.js

@@ -103,7 +103,8 @@ describe('PriceRanges', () => {
             item: 'item',
             link: 'link',
             active: 'active'
-          }
+          },
+          currency: '$'
         };
         facetValue = {
           from: 1,
@@ -123,7 +124,7 @@ describe('PriceRanges', () => {
         expect(item).toEqualJSX(
           <div className="item" key="1_10">
             <a className="link" href="url" onClick={() => {}}>
-              <Template data={facetValue} templateKey="item"/>
+              <Template data={{currency: '$', ...facetValue}} templateKey="item"/>
             </a>
           </div>
         );
@@ -140,7 +141,7 @@ describe('PriceRanges', () => {
         expect(item).toEqualJSX(
           <div className="item active" key="1_10">
             <a className="link" href="url" onClick={() => {}}>
-              <Template data={facetValue} templateKey="item"/>
+              <Template data={{currency: '$', ...facetValue}} templateKey="item"/>
             </a>
           </div>
         );
@@ -172,7 +173,8 @@ describe('PriceRanges', () => {
         // Given
         let props = {
           cssClasses: 'cssClasses',
-          labels: 'labels',
+          labels: {button: 'hello'},
+          currency: '$',
           refine: 'refine'
         };
         let component = getComponentWithMockRendering(props);
@@ -184,7 +186,7 @@ describe('PriceRanges', () => {
         expect(form).toEqualJSX(
           <PriceRangesForm
             cssClasses={props.cssClasses}
-            labels={props.labels}
+            labels={{button: 'hello', currency: '$'}}
             refine={() => {}}
           />
         );

Diff for: src/widgets/price-ranges/__tests__/price-ranges-test.js

@@ -97,8 +97,8 @@ describe('priceRanges()', () => {
         },
         shouldAutoHideContainer: false,
         facetValues: generateRanges(results.getFacetStats()),
+        currency: '$',
         labels: {
-          currency: '$',
           separator: 'to',
           button: 'Go'
         },

Diff for: src/widgets/price-ranges/defaultTemplates.js

@@ -5,7 +5,7 @@ export default {
       {{^to}}
         ≥
       {{/to}}
-      \${{from}}
+      {{currency}}{{from}}
     {{/from}}
     {{#to}}
       {{#from}}
@@ -14,7 +14,7 @@ export default {
       {{^from}}
         ≤
       {{/from}}
-      \${{to}}
+      {{to}}
     {{/to}}
   `,
   footer: ``

Diff for: src/widgets/price-ranges/price-ranges.js

@@ -18,9 +18,9 @@ import cx from 'classnames';
  * @param  {string|DOMElement} options.container Valid CSS Selector as a string or DOMElement
  * @param  {string} options.attributeName Name of the attribute for faceting
  * @param  {Object} [options.templates] Templates to use for the widget
- * @param  {string|Function} [options.templates.item] Item template
+ * @param  {string|Function} [options.templates.item] Item template. Template data: `from`, `to` and `currency`
+ * @param  {string} [options.currency='$'] The currency to display
  * @param  {Object} [options.labels] Labels to use for the widget
- * @param  {string|Function} [options.labels.currency] Currency label
  * @param  {string|Function} [options.labels.separator] Separator label, between min and max
  * @param  {string|Function} [options.labels.button] Button label
  * @param  {boolean} [options.autoHideContainer=true] Hide the container when no refinements available
@@ -45,6 +45,7 @@ const usage = `Usage:
 priceRanges({
   container,
   attributeName,
+  [ currency=$ ],
   [ cssClasses.{root,header,body,list,item,active,link,form,label,input,currency,separator,button,footer} ],
   [ templates.{header,item,footer} ],
   [ labels.{currency,separator,button} ],
@@ -55,11 +56,8 @@ function priceRanges({
     attributeName,
     cssClasses: userCssClasses = {},
     templates = defaultTemplates,
-    labels = {
-      currency: '$',
-      button: 'Go',
-      separator: 'to'
-    },
+    labels: userLabels = {},
+    currency = '$',
     autoHideContainer = true
   } = {}) {
   if (!container || !attributeName) {
@@ -119,6 +117,14 @@ function priceRanges({
 
     render: function({results, helper, templatesConfig, state, createURL}) {
       let facetValues;
+      let labels = {
+        button: 'Go',
+        separator: 'to',
+        ...userLabels
+      };
+
+      // before we had opts.currency, you had to pass labels.currency
+      if (userLabels.currency !== undefined && userLabels.currency !== currency) currency = userLabels.currency;
 
       if (results.hits.length > 0) {
         facetValues = this._extractRefinedRange(helper);
@@ -170,6 +176,7 @@ function priceRanges({
             return createURL(newState);
           }}
           cssClasses={cssClasses}
+          currency={currency}
           facetValues={facetValues}
           labels={labels}
           refine={this._refine.bind(this, helper)}