style(theme): Default theme

* chore(dev): hot-reload of scss theme * feat(ClearAll): add `-disabled` className when no refinements * feat(dev): make searchParameters overridable per story * style(theme): clear-all * feat(dev): more examples for ClearAll * feat(dev): add more examples CurrentRefinedValues * feat(CurrentRefinedValues): add class `-disabled` when no refinements * style(theme): current refined values * feat(dev): add more examples hierarchical menu * style(theme): hierarchical menu * chore(dev): add `autoprefixer-loader` * style(theme): hits per page selector * feat(dev): add more examples menu * style(theme): menu * style(theme): refinement list * style(theme): numeric selector * style(theme): pagination * style(theme): price ranges * style(theme): range slider * style(theme): search-box * style(theme): sort by selector * style(theme): star rating * refactor(theme): use variable for color * style(theme): add stats * style(theme): toggle * chore(webpack): add css loader in staging conf * chore(theme): change filename to include into build * doc(theme): add note into guides to import css theme * test(ClearAll): update snapshot * chore(gitignore): css is exported on staging build * feat(search-box): add clear btn and magnifying glass * feat(connectSearchBox): provide `clear()` fn * feat(search-box): add reset button into the input * fix(search-box): handle case `containerNode === input` * test(search-box): reset button * style(theme): reset button of search-box * feat(search-box): add magnifier at begin of input * style(theme): magnifier of search-box * doc(search-box): descript `magnifier` option * test(search-box): presence of the magnifier * refactor(search-box): use template for magnifier * refactor(connectSearchBox.clear): use `helper.setQuery()` * test(search-box): only test spies are called * feat(search-box): throw on incorrect template * test(connectSearchBox): ensure it provides same fn reference * test(connectSearchBox): clear on init * doc(search-box): typo * doc(migration): explain changes from the searchbox * doc(migration): add an example to revert back the behavior for the searchbox
algolia · Jun 20, 2017 · dc68f46 · dc68f46
1 parent 22ec08d
commit dc68f46
Show file tree

Hide file tree

Showing 39 changed files with 1,597 additions and 145 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,6 +5,7 @@ npm-debug.log
 .DS_Store
 docs/
 !scripts/docs/
+dev/instantsearch-theme-algolia.css
 
 # Ignore Argos CI screenshots.
 functional-tests/screenshots/
diff --git a/dev/app/index.js b/dev/app/index.js
@@ -1,22 +1,11 @@
 /* eslint-disable import/default */
-import {registerInitializer, registerDisposer, start} from 'dev-novel';
-
-import instantsearch from '../../index.js';
+import {registerDisposer, start} from 'dev-novel';
 
 import initBuiltInWidgets from './init-builtin-widgets.js';
 import initVanillaWidgets from './init-vanilla-widgets.js';
 import initJqueryWidgets from './init-jquery-widgets.js';
 
-registerInitializer(() => {
-  window.search = instantsearch({
-    appId: 'latency',
-    apiKey: '6be0576ff61c053d5f9a3225e2a90f76',
-    indexName: 'instant_search',
-    searchParameters: {
-      hitsPerPage: 3,
-    },
-  });
-});
+import '../../src/css/instantsearch-theme-algolia.scss';
 
 registerDisposer(() => {
   window.search = undefined;

diff --git a/dev/app/init-builtin-widgets.js b/dev/app/init-builtin-widgets.js
@@ -100,50 +100,81 @@ export default () => {
     );
   }));
 
-  storiesOf('ClearAll').add('default', wrapWithHits(container => {
-    window.search.addWidget(
-      instantsearch.widgets.clearAll({
-        container,
-        autoHideContainer: false,
-      })
-    );
-  }));
-
-  storiesOf('CurrentRefinedValues').add('default', wrapWithHits(container => {
-    window.search.addWidget(
-      instantsearch.widgets.currentRefinedValues({
-        container,
-        templates: {
-          header: 'Current refinements',
-        },
-        attributes: [
-          {
-            name: 'price',
-            label: 'Price',
-            transformData: data => {
-              data.name = `$${data.name}`;
-              return data;
-            },
+  storiesOf('ClearAll')
+    .add('default', wrapWithHits(container => {
+      window.search.addWidget(
+        instantsearch.widgets.clearAll({
+          container,
+          autoHideContainer: false,
+        })
+      );
+    }, {
+      searchParameters: {
+        disjunctiveFacetsRefinements: {brand: ['Apple']},
+        disjunctiveFacets: ['brand'],
+      },
+    }))
+    .add('with nothing to clear', wrapWithHits(container => {
+      window.search.addWidget(
+        instantsearch.widgets.clearAll({
+          container,
+          autoHideContainer: false,
+        })
+      );
+    }))
+    .add('with clear refinements and query', wrapWithHits(container => {
+      window.search.addWidget(
+        instantsearch.widgets.clearAll({
+          container,
+          autoHideContainer: false,
+          clearsQuery: true,
+          templates: {
+            link: 'Clear refinements and query',
           },
-          {
-            name: 'price_range',
-            label: 'Price range',
-            transformData: data => {
-              data.name = data.name.replace(/(\d+)/g, '$$$1');
-              return data;
-            },
+        })
+      );
+    }, {
+      searchParameters: {
+        disjunctiveFacetsRefinements: {brand: ['Apple']},
+        disjunctiveFacets: ['brand'],
+      },
+    }));
+
+  storiesOf('CurrentRefinedValues')
+    .add('default', wrapWithHits(container => {
+      window.search.addWidget(instantsearch.widgets.currentRefinedValues({container}));
+    }, {
+      searchParameters: {
+        disjunctiveFacetsRefinements: {brand: ['Apple', 'Samsung']},
+        disjunctiveFacets: ['brand'],
+      },
+    }))
+    .add('with header', wrapWithHits(container => {
+      window.search.addWidget(
+        instantsearch.widgets.currentRefinedValues({
+          container,
+          templates: {
+            header: 'Current refinements',
           },
-          {
-            name: 'free_shipping',
-            transformData: data => {
-              if (data.name === 'true') data.name = 'Free shipping';
-              return data;
-            },
+        })
+      );
+    }, {
+      searchParameters: {
+        disjunctiveFacetsRefinements: {brand: ['Apple', 'Samsung']},
+        disjunctiveFacets: ['brand'],
+      },
+    }))
+    .add('with header but no refinements', wrapWithHits(container => {
+      window.search.addWidget(
+        instantsearch.widgets.currentRefinedValues({
+          container,
+          autoHideContainer: false,
+          templates: {
+            header: 'Current refinements',
           },
-        ],
-      })
-    );
-  }));
+        })
+      );
+    }));
 
   storiesOf('RefinementList')
     .add('default', wrapWithHits(container => {
@@ -296,25 +327,34 @@ export default () => {
       );
     }));
 
-  storiesOf('Menu').add('with show more', wrapWithHits(container => {
-    window.search.addWidget(
-      instantsearch.widgets.menu({
-        container,
-        attributeName: 'categories',
-        limit: 3,
-        showMore: {
+  storiesOf('Menu')
+    .add('Default', wrapWithHits(container => {
+      window.search.addWidget(
+        instantsearch.widgets.menu({
+          container,
+          attributeName: 'categories',
+        })
+      );
+    }))
+    .add('with show more and header', wrapWithHits(container => {
+      window.search.addWidget(
+        instantsearch.widgets.menu({
+          container,
+          attributeName: 'categories',
+          limit: 3,
+          showMore: {
+            templates: {
+              active: '<button>Show less</button>',
+              inactive: '<button>Show more</button>',
+            },
+            limit: 10,
+          },
           templates: {
-            active: '<button>Show less</button>',
-            inactive: '<button>Show more</button>',
+            header: 'Categories (menu widget)',
           },
-          limit: 10,
-        },
-        templates: {
-          header: 'Categories (menu widget)',
-        },
-      })
-    );
-  }));
+        })
+      );
+    }));
 
   storiesOf('RangeSlider').add('default', wrapWithHits(container => {
     window.search.addWidget(
@@ -335,22 +375,55 @@ export default () => {
     );
   }));
 
-  storiesOf('HierarchicalMenu').add('default', wrapWithHits(container => {
-    window.search.addWidget(
-      instantsearch.widgets.hierarchicalMenu({
-        container,
-        attributes: [
-          'hierarchicalCategories.lvl0',
-          'hierarchicalCategories.lvl1',
-          'hierarchicalCategories.lvl2',
-        ],
-        rootPath: 'Cameras & Camcorders',
-        templates: {
-          header: 'Hierarchical categories',
+  storiesOf('HierarchicalMenu')
+    .add('default', wrapWithHits(container => {
+      window.search.addWidget(
+        instantsearch.widgets.hierarchicalMenu({
+          container,
+          attributes: [
+            'hierarchicalCategories.lvl0',
+            'hierarchicalCategories.lvl1',
+            'hierarchicalCategories.lvl2',
+          ],
+          rootPath: 'Cameras & Camcorders',
+        })
+      );
+    }))
+    .add('with default selected item', wrapWithHits(container => {
+      window.search.addWidget(
+        instantsearch.widgets.hierarchicalMenu({
+          container,
+          attributes: [
+            'hierarchicalCategories.lvl0',
+            'hierarchicalCategories.lvl1',
+            'hierarchicalCategories.lvl2',
+          ],
+          rootPath: 'Cameras & Camcorders',
+        })
+      );
+    }, {
+      searchParameters: {
+        hierarchicalFacetsRefinements: {
+          'hierarchicalCategories.lvl0': ['Cameras & Camcorders > Digital Cameras'],
         },
-      })
-    );
-  }));
+      },
+    }))
+    .add('with header', wrapWithHits(container => {
+      window.search.addWidget(
+        instantsearch.widgets.hierarchicalMenu({
+          container,
+          attributes: [
+            'hierarchicalCategories.lvl0',
+            'hierarchicalCategories.lvl1',
+            'hierarchicalCategories.lvl2',
+          ],
+          rootPath: 'Cameras & Camcorders',
+          templates: {
+            header: 'Hierarchical categories',
+          },
+        })
+      );
+    }));
 
   storiesOf('PriceRanges').add('default', wrapWithHits(container => {
     window.search.addWidget(

diff --git a/dev/app/wrap-with-hits.js b/dev/app/wrap-with-hits.js
@@ -4,7 +4,14 @@ import instantsearch from '../../index.js';
 import item from './templates/item.html';
 import empty from './templates/no-results.html';
 
-export default initWidget => container => {
+export default (initWidget, opts = {}) => container => {
+  window.search = instantsearch({
+    appId: 'latency',
+    apiKey: '6be0576ff61c053d5f9a3225e2a90f76',
+    indexName: 'instant_search',
+    searchParameters: {hitsPerPage: 3, ...opts.searchParameters || {}},
+  });
+
   container.innerHTML = `
     <div id="widget-display"></div>
     <div id="results-display">

diff --git a/dev/webpack.dev.config.babel.js b/dev/webpack.dev.config.babel.js
@@ -18,6 +18,10 @@ export default {
       test: /\.js$/, exclude: /node_modules/, loader: 'babel',
     }, {
       test: /\.html$/, exclude: /node_modules/, loader: 'raw',
+    }, {
+      test: /\.scss$/,
+      include: /src\/css\/instantsearch-theme-algolia/,
+      loader: 'style!css!autoprefixer-loader!sass',
     }, {
       test: require.resolve('react'), loader: 'expose?React',
     }, {

diff --git a/dev/webpack.staging.config.babel.js b/dev/webpack.staging.config.babel.js
@@ -17,6 +17,10 @@ export default {
       test: /\.js$/, exclude: /node_modules/, loader: 'babel',
     }, {
       test: /\.html$/, exclude: /node_modules/, loader: 'raw',
+    }, {
+      test: /\.scss$/,
+      include: /src\/css\/instantsearch-theme-algolia/,
+      loader: 'style!css!autoprefixer-loader!sass',
     }],
   },
   // when module not found, find locally first

diff --git a/docgen/src/getting-started.md b/docgen/src/getting-started.md
@@ -45,6 +45,12 @@ Use a built version of **InstantSearch.js** from the [jsDeliver](https://www.jsd
 <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.0.0-beta.3/dist/instantsearch.min.js"></script>
 ```
 
+We also provide you a default Algolia theme for the widgets to be effectively styled:
+
+```html
+<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.0.0-beta.3/dist/instantsearch-theme-algolia.min.css">
+```
+
 You will then have access to the `instantsearch` function in the global scope (window).
 
 The jsDeliver CDN is highly available with [over 110 locations](https://www.jsdelivr.com/features/network-map) in the world.
@@ -66,6 +72,12 @@ You need to manually load the companion [CSS file](http://cdn.jsdelivr.net/npm/i
 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.0.0-beta.3/dist/instantsearch.min.css">
 ```
 
+You will also need to load manually the default Algolia theme for the widgets to be effectively styled:
+
+```html
+<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.0.0-beta.6/dist/instantsearch-theme-algolia.min.css">
+```
+
 ## Initialization
 
 To initialize InstantSearch.js, you need an Algolia account with a configured and non-empty index.

diff --git a/docgen/src/guides/migration.md b/docgen/src/guides/migration.md
@@ -9,6 +9,30 @@ editable: true
 githubSource: docgen/src/guides/migration.md
 ---
 
+## The searchBox widget has new default options
+
+To identify correctly the input as a search box we added a magnifier glass at the start of the input
+and a reset button displayed as a cross on the end.
+
+You can customize the result with these two options:
+ - **reset** `boolan|{template?: string|Function, cssClasses?: {root: string}}`
+   Display a reset button in the input when there is a query.
+ - **magnifier** `boolan|{template?: string|Function, cssClasses?: {root: string}}`
+   Display a magnifier should at beginning of the input.
+
+To make the search box like in v1, you can do the following:
+
+```javascript
+const search = instantsearch(/* Your parameters here */);
+search.addWidget(instantsearch.widgets.searchbox({
+  container: '#your-search-input',
+  reset: false,
+  magnifier: false,
+}));
+```
+
+You can read more about these options [here](/widgets/searchBox.html).
+
 ## No more `hitsPerPage` in `hits` and `infiniteHits`
 
 This option has been removed from those two widgets. To configure