feat(sort-by): implement InstantSearch.css (#3120)

* feat(sort-by): apply changes

* feat(sort-by): rename widget

* feat(migration): add widget

dev/app/builtin/init-stories.js

@@ -19,7 +19,7 @@ import initRangeSliderStories from './stories/range-slider.stories';
 import initRefinementListStories from './stories/refinement-list.stories';
 import initReloadStories from './stories/reload.stories';
 import initSearchBoxStories from './stories/search-box.stories';
-import initSortBySelectorStories from './stories/sort-by-selector.stories';
+import initSortByStories from './stories/sort-by.stories';
 import initStarRatingStories from './stories/star-rating.stories';
 import initStatsStories from './stories/stats.stories';
 import initToggleStories from './stories/toggle.stories';
@@ -47,7 +47,7 @@ export default () => {
   initRefinementListStories();
   initReloadStories();
   initSearchBoxStories();
-  initSortBySelectorStories();
+  initSortByStories();
   initStatsStories();
   initStarRatingStories();
   initToggleStories();

dev/app/builtin/stories/sort-by-selector.stories.js → dev/app/builtin/stories/sort-by.stories.js

@@ -2,19 +2,19 @@
 
 import { storiesOf } from 'dev-novel';
 import instantsearch from '../../../../index';
-import { wrapWithHits } from '../../utils/wrap-with-hits.js';
+import { wrapWithHits } from '../../utils/wrap-with-hits';
 
-const stories = storiesOf('SortBySelector');
+const stories = storiesOf('SortBy');
 
 export default () => {
   stories
     .add(
       'default',
       wrapWithHits(container => {
         window.search.addWidget(
-          instantsearch.widgets.sortBySelector({
+          instantsearch.widgets.sortBy({
             container,
-            indices: [
+            items: [
               { name: 'instant_search', label: 'Most relevant' },
               { name: 'instant_search_price_asc', label: 'Lowest price' },
               { name: 'instant_search_price_desc', label: 'Highest price' },
@@ -27,9 +27,9 @@ export default () => {
       'with transformed items',
       wrapWithHits(container => {
         window.search.addWidget(
-          instantsearch.widgets.sortBySelector({
+          instantsearch.widgets.sortBy({
             container,
-            indices: [
+            items: [
               { name: 'instant_search', label: 'Most relevant' },
               { name: 'instant_search_price_asc', label: 'Lowest price' },
               { name: 'instant_search_price_desc', label: 'Highest price' },

dev/app/init-unmount-widgets.js

@@ -272,12 +272,12 @@ export default () => {
     )
   );
 
-  storiesOf('SortBySelector').add(
+  storiesOf('SortBy').add(
     'default',
     wrapWithUnmount(container =>
-      instantsearch.widgets.sortBySelector({
+      instantsearch.widgets.sortBy({
         container,
-        indices: [
+        items: [
           { name: 'instant_search', label: 'Most relevant' },
           { name: 'instant_search_price_asc', label: 'Lowest price' },
           { name: 'instant_search_price_desc', label: 'Highest price' },

dev/app/jquery/init-stories.js

@@ -11,7 +11,7 @@ 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';
+import initSortByStories from './stories/sort-by.stories';
 import initStarRatingStories from './stories/star-rating.stories';
 import initStatsStories from './stories/stats.stories';
 import initToggleStories from './stories/toggle.stories';
@@ -31,7 +31,7 @@ export default () => {
   initPriceRangesStories();
   initRefinementListStories();
   initSearchBoxStories();
-  initSortBySelectorStories();
+  initSortByStories();
   initStarRatingStories();
   initStatsStories();
   initToggleStories();

dev/app/jquery/stories/sort-by-selector.stories.js → dev/app/jquery/stories/sort-by.stories.js

@@ -2,16 +2,16 @@ import { storiesOf } from 'dev-novel';
 import { wrapWithHitsAndJquery } from '../../utils/wrap-with-hits.js';
 import * as widgets from '../widgets/index.js';
 
-const stories = storiesOf('SortBySelector');
+const stories = storiesOf('SortBy');
 
 export default () => {
   stories.add(
     'default',
     wrapWithHitsAndJquery(containerNode => {
       window.search.addWidget(
-        widgets.sortBySelector({
+        widgets.sortBy({
           containerNode,
-          indices: [
+          items: [
             { name: 'instant_search', label: 'Most relevant' },
             { name: 'instant_search_price_asc', label: 'Lowest price' },
             { name: 'instant_search_price_desc', label: 'Highest price' },

dev/app/jquery/widgets/index.js

@@ -10,7 +10,7 @@ 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 sortBy } from './sortBy';
 export { default as starRating } from './starRating';
 export { default as stats } from './stats';
 export { default as toggle } from './toggle';

dev/app/jquery/widgets/sortBySelector.js → dev/app/jquery/widgets/sortBy.js

@@ -26,4 +26,4 @@ const renderFn = (
   containerNode.find('select').html(optionsHTML);
 };
 
-export default instantsearch.connectors.connectSortBySelector(renderFn);
+export default instantsearch.connectors.connectSortBy(renderFn);

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

@@ -36,7 +36,7 @@
       <section id="results-topbar">
         <div class="sort-by">
           <label>Sort by</label>
-          <div id="sort-by-selector"></div>
+          <div id="sort-by"></div>
         </div>
         <div id="stats" class="text-muted"></div>
       </section>

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

@@ -375,7 +375,7 @@ aside {
     font-size: .8em;
   }
 
-  #sort-by-selector {
+  #sort-by {
     display: inline-block;
   }
 }

docgen/src/examples/e-commerce/search.js

@@ -154,9 +154,9 @@ search.addWidget(
 );
 
 search.addWidget(
-  instantsearch.widgets.sortBySelector({
-    container: '#sort-by-selector',
-    indices: [
+  instantsearch.widgets.sortBy({
+    container: '#sort-by',
+    items: [
       {name: 'ikea', label: 'Featured'},
       {name: 'ikea_price_asc', label: 'Price asc.'},
       {name: 'ikea_price_desc', label: 'Price desc.'}

docgen/src/guides/v3-migration.md

@@ -149,6 +149,33 @@ InstantSearch 3 introduces some breaking changes in the widget's naming, options
   <button class="ais-InfiniteHits-loadMore">Show more results</button>
 ```
 
+### SortBy
+
+#### Options
+
+| Before    | After   |
+| --------- | ------- |
+| `indices` | `items` |
+
+#### CSS classes
+
+| Before                 | After               |
+| ---------------------- | ------------------- |
+|                        | `ais-SortBy`        |
+| `ais-sort-by-selector` | `ais-SortBy-select` |
+| `ais-sort-by--item`    | `ais-SortBy-option` |
+
+#### Markup
+
+```html
+<div class="ais-SortBy">
+ <select class="ais-SortBy-select">
+   <option class="ais-SortBy-option" value="Most relevant">Most relevant</option>
+   <option class="ais-SortBy-option" value="Lowest price">Lowest price</option>
+ </select>
+</div>
+```
+
 ### Stats
 
 #### CSS classes

functional-tests/app/app.js

@@ -26,9 +26,9 @@ search.addWidget(
 );
 
 search.addWidget(
-  instantsearch.widgets.sortBySelector({
-    container: '#sort-by-selector',
-    indices: [
+  instantsearch.widgets.sortBy({
+    container: '#sort-by',
+    items: [
       { name: 'instant_search', label: 'Most relevant' },
       { name: 'instant_search_price_asc', label: 'Lowest price' },
       { name: 'instant_search_price_desc', label: 'Highest price' },

functional-tests/app/index.html

@@ -49,16 +49,16 @@ <h1><a href="./">Instant search demo</a> <small>using instantsearch.js</small></
           <div class="col-md-3 text-right">
             <div class="form-inline">
               <div class="form-group">
-                <label for="sort-by-selector-select">Popularity:</label>
+                <label for="sort-by-select">Popularity:</label>
                 <span id="popularity-selector"></span>
               </div>
             </div>
           </div>
           <div class="col-md-3 text-right">
             <div class="form-inline">
               <div class="form-group">
-                <label for="sort-by-selector-select">Sort by:</label>
-                <span id="sort-by-selector"></span>
+                <label for="sort-by-select">Sort by:</label>
+                <span id="sort-by"></span>
               </div>
             </div>
           </div>

src/components/Selector.js

@@ -1,10 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'preact-compat';
+import cx from 'classnames';
 
-import autoHideContainer from '../decorators/autoHideContainer.js';
-import headerFooter from '../decorators/headerFooter.js';
-
-export class RawSelector extends Component {
+export class Selector extends Component {
   componentWillMount() {
     this.handleChange = this.handleChange.bind(this);
   }
@@ -18,13 +16,13 @@ export class RawSelector extends Component {
 
     return (
       <select
-        className={this.props.cssClasses.select}
+        className={cx(this.props.cssClasses.select)}
         onChange={this.handleChange}
         value={`${currentValue}`}
       >
         {options.map(option => (
           <option
-            className={this.props.cssClasses.item}
+            className={cx(this.props.cssClasses.option)}
             key={option.label + option.value}
             value={`${option.value}`}
           >
@@ -36,7 +34,7 @@ export class RawSelector extends Component {
   }
 }
 
-RawSelector.propTypes = {
+Selector.propTypes = {
   cssClasses: PropTypes.shape({
     root: PropTypes.oneOfType([
       PropTypes.string,
@@ -46,7 +44,7 @@ RawSelector.propTypes = {
       PropTypes.string,
       PropTypes.arrayOf(PropTypes.string),
     ]),
-    item: PropTypes.oneOfType([
+    option: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.arrayOf(PropTypes.string),
     ]),
@@ -61,4 +59,4 @@ RawSelector.propTypes = {
   setValue: PropTypes.func.isRequired,
 };
 
-export default autoHideContainer(headerFooter(RawSelector));
+export default Selector;

src/components/__tests__/Selector-test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { RawSelector as Selector } from '../Selector';
+import Selector from '../Selector';
 import renderer from 'react-test-renderer';
 
 describe('Selector', () => {
@@ -10,7 +10,7 @@ describe('Selector', () => {
       cssClasses: {
         root: 'custom-root',
         select: 'custom-select',
-        item: 'custom-item',
+        option: 'custom-item',
       },
       options: [
         { value: 'index-a', label: 'Index A' },
@@ -28,7 +28,7 @@ describe('Selector', () => {
       cssClasses: {
         root: 'custom-root',
         select: 'custom-select',
-        item: 'custom-item',
+        option: 'custom-item',
       },
       options: [
         { value: 10, label: '10 results per page' },

src/connectors/index.js

@@ -35,9 +35,7 @@ export {
   default as connectRefinementList,
 } from './refinement-list/connectRefinementList.js';
 export { default as connectSearchBox } from './search-box/connectSearchBox.js';
-export {
-  default as connectSortBySelector,
-} from './sort-by-selector/connectSortBySelector.js';
+export { default as connectSortBy } from './sort-by/connectSortBy.js';
 export {
   default as connectStarRating,
 } from './star-rating/connectStarRating.js';

src/connectors/sort-by-selector/__tests__/__snapshots__/connectSortBySelector-test.js.snap → src/connectors/sort-by/__tests__/__snapshots__/connectSortBy-test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`connectSortBySelector routing getWidgetSearchParameters should add the refinements according to the UI state provided 1`] = `
+exports[`connectSortBy routing getWidgetSearchParameters should add the refinements according to the UI state provided 1`] = `
 SearchParameters {
   "advancedSyntax": undefined,
   "allowTyposOnNumericTokens": undefined,
@@ -57,7 +57,7 @@ SearchParameters {
 }
 `;
 
-exports[`connectSortBySelector routing getWidgetSearchParameters should enforce the default value 1`] = `
+exports[`connectSortBy routing getWidgetSearchParameters should enforce the default value 1`] = `
 SearchParameters {
   "advancedSyntax": undefined,
   "allowTyposOnNumericTokens": undefined,
@@ -114,7 +114,7 @@ SearchParameters {
 }
 `;
 
-exports[`connectSortBySelector routing getWidgetState should add an entry equal to the refinement 1`] = `
+exports[`connectSortBy routing getWidgetState should add an entry equal to the refinement 1`] = `
 Object {
   "sortBy": "priceASC",
 }