feat(menu): implement InstantSearch.css

dev/app/builtin/stories/menu.stories.js

@@ -14,7 +14,7 @@ export default () => {
         window.search.addWidget(
           instantsearch.widgets.menu({
             container,
-            attributeName: 'categories',
+            attribute: 'categories',
           })
         );
       })
@@ -25,7 +25,7 @@ export default () => {
         window.search.addWidget(
           instantsearch.widgets.menu({
             container,
-            attributeName: 'categories',
+            attribute: 'categories',
             transformItems: items =>
               items.map(item => ({
                 ...item,
@@ -36,35 +36,33 @@ export default () => {
       })
     )
     .add(
-      'with show more and header',
+      'with show more',
       wrapWithHits(container => {
         window.search.addWidget(
           instantsearch.widgets.menu({
             container,
-            attributeName: 'categories',
+            attribute: 'categories',
             limit: 3,
-            showMore: {
-              templates: {
-                active: '<button>Show less</button>',
-                inactive: '<button>Show more</button>',
-              },
-              limit: 10,
-            },
-            templates: {
-              header: 'Categories (menu widget)',
-            },
+            showMore: true,
+            showMoreLimit: 10,
           })
         );
       })
     )
     .add(
-      'as a Select DOM element',
+      'with show more and templates',
       wrapWithHits(container => {
         window.search.addWidget(
-          instantsearch.widgets.menuSelect({
+          instantsearch.widgets.menu({
             container,
-            attributeName: 'categories',
-            limit: 10,
+            attribute: 'categories',
+            limit: 3,
+            showMore: true,
+            showMoreLimit: 10,
+            templates: {
+              showMoreActive: 'Show way less',
+              showMoreInactive: 'Show way more',
+            },
           })
         );
       })

dev/app/jquery/stories/menu.stories.js

@@ -12,7 +12,7 @@ export default () => {
         window.search.addWidget(
           widgets.menu({
             containerNode,
-            attributeName: 'categories',
+            attribute: 'categories',
             limit: 3,
           })
         );
@@ -24,7 +24,7 @@ export default () => {
         window.search.addWidget(
           widgets.showMoreMenu({
             containerNode,
-            attributeName: 'categories',
+            attribute: 'categories',
             limit: 3,
             showMoreLimit: 10,
           })

docgen/src/guides/v3-migration.md

@@ -278,6 +278,81 @@ With the redo button:
   <button class="ais-InfiniteHits-loadMore">Show more results</button>
 ```
 
+### Menu
+
+#### Options
+
+| Before                        | After                        |
+| ----------------------------- | ---------------------------- |
+| `attributeName`               | `attribute`                  |
+| `showMore.limit`              | `showMoreLimit`              |
+| `showMore.templates.active`   | `templates.showMoreActive`   |
+| `showMore.templates.inactive` | `templates.showMoreInactive` |
+
+- `showMore` is now a boolean option (`showMore.templates` are now in `templates`)
+- `sortBy` defaults to `['isRefined', 'name:asc']`
+
+#### CSS classes
+
+| Before                   | After                         |
+| ------------------------ | ----------------------------- |
+| `ais-menu`               | `ais-Menu`                    |
+| `ais-menu--list`         | `ais-Menu-list`               |
+| `ais-menu--item`         | `ais-Menu-item`               |
+| `ais-menu--item__active` | `ais-Menu-item--selected`     |
+| `ais-menu--link`         | `ais-Menu-link`               |
+|                          | `ais-Menu-label`              |
+| `ais-menu--count`        | `ais-Menu-count`              |
+|                          | `ais-Menu-noResults`          |
+|                          | `ais-Menu-showMore`           |
+|                          | `ais-Menu-showMore--disabled` |
+
+#### Markup
+
+##### Default
+
+```html
+<div class="ais-Menu">
+  <ul class="ais-Menu-list">
+    <li class="ais-Menu-item ais-Menu-item--selected">
+      <a class="ais-Menu-link" href="#">
+        <span class="ais-Menu-label">Appliances</span>
+        <span class="ais-Menu-count">4,306</span>
+      </a>
+    </li>
+    <li class="ais-Menu-item">
+      <a class="ais-Menu-link" href="#">
+        <span class="ais-Menu-label">Audio</span>
+        <span class="ais-Menu-count">1,570</span>
+      </a>
+    </li>
+  </ul>
+  <button class="ais-Menu-showMore">Show more</button>
+</div>
+```
+
+##### Show more disabled
+
+```html
+<div class="ais-Menu">
+  <ul class="ais-Menu-list">
+    <li class="ais-Menu-item ais-Menu-item--selected">
+      <a class="ais-Menu-link" href="#">
+        <span class="ais-Menu-label">Appliances</span>
+        <span class="ais-Menu-count">4,306</span>
+      </a>
+    </li>
+    <li class="ais-Menu-item">
+      <a class="ais-Menu-link" href="#">
+        <span class="ais-Menu-label">Audio</span>
+        <span class="ais-Menu-count">1,570</span>
+      </a>
+    </li>
+  </ul>
+  <button class="ais-Menu-showMore ais-Menu-showMore--disabled" disabled>Show more</button>
+</div>
+```
+
 ### MenuSelect
 
 #### Options

src/connectors/menu/connectMenu.js

@@ -17,8 +17,8 @@ search.addWidget(
   customMenu({
     attribute,
     [ limit ],
-    [ showMoreLimit ]
-    [ sortBy = ['name:asc'] ]
+    [ showMoreLimit ],
+    [ sortBy = ['isRefined', 'name:asc'] ],
     [ transformItems ]
   })
 );
@@ -37,8 +37,8 @@ Full documentation available at https://community.algolia.com/instantsearch.js/v
  * @typedef {Object} CustomMenuWidgetOptions
  * @property {string} attribute Name of the attribute for faceting (eg. "free_shipping").
  * @property {number} [limit = 10] How many facets values to retrieve.
- * @property {number} [showMoreLimit = undefined] How many facets values to retrieve when `toggleShowMore` is called, this value is meant to be greater than `limit` option.
- * @property {string[]|function} [sortBy = ['name:asc']] How to sort refinements. Possible values: `count|isRefined|name:asc|name:desc`.
+ * @property {number} [showMoreLimit = 10] How many facets values to retrieve when `toggleShowMore` is called, this value is meant to be greater than `limit` option.
+ * @property {string[]|function} [sortBy = ['isRefined', 'name:asc']] How to sort refinements. Possible values: `count|isRefined|name:asc|name:desc`.
  *
  * You can also use a sort function that behaves like the standard Javascript [compareFunction](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Syntax).
  * @property {function(object[]):object[]} [transformItems] Function to transform the items passed to the templates.
@@ -113,8 +113,8 @@ export default function connectMenu(renderFn, unmountFn) {
     const {
       attribute,
       limit = 10,
-      sortBy = ['name:asc'],
-      showMoreLimit,
+      sortBy = ['isRefined', 'name:asc'],
+      showMoreLimit = limit,
       transformItems = items => items,
     } = widgetParams;
 

src/widgets/menu/__tests__/__snapshots__/menu-test.js.snap

@@ -3,19 +3,19 @@
 exports[`menu render renders transformed items 1`] = `
 <RefinementList
   canToggleShowMore={false}
-  collapsible={false}
   createURL={[Function]}
   cssClasses={
     Object {
-      "active": "ais-menu--item__active",
-      "body": "ais-menu--body",
-      "count": "ais-menu--count",
-      "footer": "ais-menu--footer",
-      "header": "ais-menu--header",
-      "item": "ais-menu--item",
-      "link": "ais-menu--link",
-      "list": "ais-menu--list",
-      "root": "ais-menu",
+      "count": "ais-Menu-count",
+      "disabledShowMore": "ais-Menu-showMore--disabled",
+      "item": "ais-Menu-item",
+      "label": "ais-Menu-label",
+      "link": "ais-Menu-link",
+      "list": "ais-Menu-list",
+      "noRefinementRoot": "ais-Menu--noRefinement",
+      "root": "ais-Menu",
+      "selectedItem": "ais-Menu-item--selected",
+      "showMore": "ais-Menu-showMore",
     }
   }
   depth={0}
@@ -36,21 +36,20 @@ exports[`menu render renders transformed items 1`] = `
     ]
   }
   isShowingMore={false}
-  shouldAutoHideContainer={false}
   showMore={false}
   templateProps={
     Object {
       "templates": Object {
-        "footer": "",
-        "header": "",
-        "item": "<a class=\\"{{cssClasses.link}}\\" href=\\"{{url}}\\">{{label}} <span class=\\"{{cssClasses.count}}\\">{{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}}</span></a>",
+        "item": "<a class=\\"{{cssClasses.link}}\\" href=\\"{{url}}\\"><span class=\\"{{cssClasses.label}}\\">{{label}}</span><span class=\\"{{cssClasses.count}}\\">{{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}}</span></a>",
+        "showMoreActive": "Show less",
+        "showMoreInactive": "Show more",
       },
       "templatesConfig": undefined,
       "transformData": undefined,
       "useCustomCompileOptions": Object {
-        "footer": false,
-        "header": false,
         "item": false,
+        "showMoreActive": false,
+        "showMoreInactive": false,
       },
     }
   }
@@ -62,19 +61,19 @@ exports[`menu render renders transformed items 1`] = `
 exports[`menu render snapshot 1`] = `
 <RefinementList
   canToggleShowMore={false}
-  collapsible={false}
   createURL={[Function]}
   cssClasses={
     Object {
-      "active": "ais-menu--item__active",
-      "body": "ais-menu--body",
-      "count": "ais-menu--count",
-      "footer": "ais-menu--footer",
-      "header": "ais-menu--header",
-      "item": "ais-menu--item",
-      "link": "ais-menu--link",
-      "list": "ais-menu--list",
-      "root": "ais-menu",
+      "count": "ais-Menu-count",
+      "disabledShowMore": "ais-Menu-showMore--disabled",
+      "item": "ais-Menu-item",
+      "label": "ais-Menu-label",
+      "link": "ais-Menu-link",
+      "list": "ais-Menu-list",
+      "noRefinementRoot": "ais-Menu--noRefinement",
+      "root": "ais-Menu",
+      "selectedItem": "ais-Menu-item--selected",
+      "showMore": "ais-Menu-showMore",
     }
   }
   depth={0}
@@ -93,21 +92,20 @@ exports[`menu render snapshot 1`] = `
     ]
   }
   isShowingMore={false}
-  shouldAutoHideContainer={false}
   showMore={false}
   templateProps={
     Object {
       "templates": Object {
-        "footer": "",
-        "header": "",
-        "item": "<a class=\\"{{cssClasses.link}}\\" href=\\"{{url}}\\">{{label}} <span class=\\"{{cssClasses.count}}\\">{{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}}</span></a>",
+        "item": "<a class=\\"{{cssClasses.link}}\\" href=\\"{{url}}\\"><span class=\\"{{cssClasses.label}}\\">{{label}}</span><span class=\\"{{cssClasses.count}}\\">{{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}}</span></a>",
+        "showMoreActive": "Show less",
+        "showMoreInactive": "Show more",
       },
       "templatesConfig": undefined,
       "transformData": undefined,
       "useCustomCompileOptions": Object {
-        "footer": false,
-        "header": false,
         "item": false,
+        "showMoreActive": false,
+        "showMoreInactive": false,
       },
     }
   }

src/widgets/menu/__tests__/menu-test.js

@@ -1,14 +1,37 @@
 import menu from '../menu';
 
 describe('menu', () => {
-  it('throws an exception when no attributeName', () => {
+  it('throws an exception when no attribute', () => {
     const container = document.createElement('div');
     expect(menu.bind(null, { container })).toThrow(/^Usage/);
   });
 
   it('throws an exception when no container', () => {
-    const attributeName = '';
-    expect(menu.bind(null, { attributeName })).toThrow(/^Usage/);
+    expect(menu.bind(null, { attribute: '' })).toThrow(/^Usage/);
+  });
+
+  it('throws an exception when showMoreLimit without showMore option', () => {
+    const container = document.createElement('div');
+    expect(
+      menu.bind(null, { attribute: 'attribute', container, showMoreLimit: 10 })
+    ).toThrowErrorMatchingInlineSnapshot(
+      `"\`showMoreLimit\` must be used with \`showMore\` set to \`true\`."`
+    );
+  });
+
+  it('throws an exception when showMoreLimit is lower than limit', () => {
+    const container = document.createElement('div');
+    expect(
+      menu.bind(null, {
+        attribute: 'attribute',
+        container,
+        limit: 20,
+        showMore: true,
+        showMoreLimit: 10,
+      })
+    ).toThrowErrorMatchingInlineSnapshot(
+      `"\`showMoreLimit\` should be greater than \`limit\`."`
+    );
   });
 
   describe('render', () => {
@@ -35,7 +58,7 @@ describe('menu', () => {
     it('snapshot', () => {
       const widget = menu({
         container: document.createElement('div'),
-        attributeName: 'test',
+        attribute: 'test',
       });
 
       widget.init({
@@ -51,7 +74,7 @@ describe('menu', () => {
     it('renders transformed items', () => {
       const widget = menu({
         container: document.createElement('div'),
-        attributeName: 'test',
+        attribute: 'test',
         transformItems: items =>
           items.map(item => ({ ...item, transformed: true })),
       });

src/widgets/menu/defaultTemplates.js

@@ -1,7 +1,10 @@
 /* eslint-disable max-len */
 export default {
-  header: '',
   item:
-    '<a class="{{cssClasses.link}}" href="{{url}}">{{label}} <span class="{{cssClasses.count}}">{{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}}</span></a>',
-  footer: '',
+    '<a class="{{cssClasses.link}}" href="{{url}}">' +
+    '<span class="{{cssClasses.label}}">{{label}}</span>' +
+    '<span class="{{cssClasses.count}}">{{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}}</span>' +
+    '</a>',
+  showMoreActive: 'Show less',
+  showMoreInactive: 'Show more',
 };