feat(price-ranges): implement InstantSearch.css

dev/app/builtin/init-stories.js

@@ -13,7 +13,6 @@ import initMenuSelectStories from './stories/menu-select.stories';
 import initNumericRefinementListStories from './stories/numeric-refinement-list.stories';
 import initNumericSelectorStories from './stories/numeric-selector.stories';
 import initPaginationStories from './stories/pagination.stories';
-import initPriceRangesStories from './stories/price-ranges.stories';
 import initRangeInputStories from './stories/range-input.stories.js';
 import initRangeSliderStories from './stories/range-slider.stories';
 import initRefinementListStories from './stories/refinement-list.stories';
@@ -41,7 +40,6 @@ export default () => {
   initNumericRefinementListStories();
   initNumericSelectorStories();
   initPaginationStories();
-  initPriceRangesStories();
   initRangeInputStories();
   initRangeSliderStories();
   initRefinementListStories();

dev/app/init-unmount-widgets.js

@@ -233,19 +233,6 @@ export default () => {
     )
   );
 
-  storiesOf('PriceRanges').add(
-    'default',
-    wrapWithUnmount(container =>
-      instantsearch.widgets.priceRanges({
-        container,
-        attributeName: 'price',
-        templates: {
-          header: 'Price ranges',
-        },
-      })
-    )
-  );
-
   storiesOf('RefinementList').add(
     'default',
     wrapWithUnmount(container =>

dev/app/jquery/init-stories.js

@@ -8,7 +8,6 @@ import initMenuStories from './stories/menu.stories';
 import initNumericRefinementListStories from './stories/numeric-refinement-list.stories';
 import initNumericSelectorStories from './stories/numeric-selector.stories';
 import initPaginationStories from './stories/pagination.stories';
-import initPriceRangesStories from './stories/price-ranges.stories';
 import initRefinementListStories from './stories/refinement-list.stories';
 import initSearchBoxStories from './stories/search-box.stories';
 import initSortBySelectorStories from './stories/sort-by-selector.stories';
@@ -28,7 +27,6 @@ export default () => {
   initNumericRefinementListStories();
   initNumericSelectorStories();
   initPaginationStories();
-  initPriceRangesStories();
   initRefinementListStories();
   initSearchBoxStories();
   initSortBySelectorStories();

dev/app/jquery/widgets/index.js

@@ -8,7 +8,6 @@ export { default as hits } from './hits';
 export { default as refinementList } from './refinementList';
 export { default as numericSelector } from './numericSelector';
 export { default as numericRefinementList } from './numericRefinementList';
-export { default as priceRanges } from './priceRanges';
 export { default as searchBox } from './searchBox';
 export { default as sortBySelector } from './sortBySelector';
 export { default as starRating } from './starRating';

docgen/src/examples/e-commerce/index.html

@@ -27,7 +27,6 @@
         <div id="materials" class="facet"></div>
         <div id="colors" class="facet"></div>
         <div id="rating" class="facet"></div>
-        <div id="prices" class="facet"></div>
       </section>
       <div class="thank-you">Data courtesy of <a href="http://www.ikea.com/">ikea.com</a></div>
     </aside>

docgen/src/examples/e-commerce/main.scss

@@ -312,48 +312,6 @@ aside {
     }
     // to fix - add more colors
   }
-
-  .ais-price-ranges--form {
-    margin-top: 8px;
-  }
-
-  .ais-price-ranges--currency {
-    display: inline-block;
-    margin-right: 4px;
-  }
-
-  .ais-price-ranges--input {
-    display: inline-block;
-    width: 50px;
-    border-radius: 2px;
-    border: solid 1px $gray;
-    font-weight: normal;
-  }
-
-  .ais-price-ranges--button {
-    display: block;
-    float: right;
-    width: 22px;
-    height: 22px;
-    padding: 0;
-    margin-left: 4px;
-    font-size: 10px;
-    line-height: 20px;
-    border: solid 1px $gray;
-    border-radius: 50%;
-    text-align: center;
-    background-color: $gray-light;
-
-    &:hover {
-      color: $brand-primary;
-      background-color: #FFFFFF;
-    }
-
-    &:focus {
-      outline: none;
-      box-shadow: inset 0 0 0 1px $primary-color;
-    }
-  }
 }
 
 .results-wrapper {

docgen/src/guides/routing.md

@@ -230,9 +230,6 @@ But the `uiState` object is created by InstantSearch.js internally and thus part
   numericSelector: {
     widthInCm: 30
   },
-  priceRanges: {
-    price: '200-20000'
-  },
   range: {
     ageInYears: '2-10'
   },

docgen/src/guides/v3-migration.md

@@ -298,6 +298,10 @@ InstantSearch 3 introduces some breaking changes in the widget's naming, options
 </div>
 ```
 
+### PriceRanges
+
+Widget removed.
+
 ## Connectors
 
 ### connectRange

functional-tests/app/app.js

@@ -269,25 +269,6 @@ search.once('render', function() {
   document.querySelector('.search').className = 'row search search--visible';
 });
 
-search.addWidget(
-  instantsearch.widgets.priceRanges({
-    container: '#price-ranges',
-    attributeName: 'price',
-    templates: {
-      header: 'Price ranges',
-    },
-    cssClasses: {
-      header: 'facet-title',
-      body: 'nav nav-stacked',
-      range: 'facet-value',
-      form: '',
-      input: 'fixed-input-sm',
-      button: 'btn btn-default btn-sm',
-      item: 'item',
-    },
-  })
-);
-
 search.addWidget(
   instantsearch.widgets.numericSelector({
     container: '#popularity-selector',

functional-tests/app/index.html

@@ -27,7 +27,6 @@ <h1><a href="./">Instant search demo</a> <small>using instantsearch.js</small></
         <div class="facet" id="free-shipping"></div>
         <div class="facet" id="price"></div>
         <div class="facet" id="categories"></div>
-        <div class="facet" id="price-ranges"></div>
         <div class="facet" id="price-numeric-list"></div>
       </div>
       <div class="col-md-9">

functional-tests/app/style.css

@@ -111,10 +111,6 @@ body {
   display: block;
 }
 
-.ais-price-ranges .ais-price-ranges--input{
-  width: 65px;
-}
-
 .ais-refinement-list--label input[type=radio]{
   margin: 4px 8px 0 0;
 }