feat(breadcrumb): implement InstantSearch.css

dev/app/builtin/stories/breadcrumb.stories.js

@@ -37,6 +37,39 @@ export default () => {
         });
       })
     )
+    .add(
+      'With custom separators',
+      wrapWithHits(container => {
+        container.innerHTML = `
+        <div id="hierarchicalMenu"></div>
+        <div id="breadcrumb"></div>
+      `;
+
+        window.search.addWidget(
+          instantsearch.widgets.breadcrumb({
+            container: '#breadcrumb',
+            templates: {
+              separator: ' + ',
+            },
+            attributes: [
+              'hierarchicalCategories.lvl0',
+              'hierarchicalCategories.lvl1',
+              'hierarchicalCategories.lvl2',
+            ],
+          })
+        );
+
+        // Custom Widget to toggle refinement
+        window.search.addWidget({
+          init({ helper }) {
+            helper.toggleRefinement(
+              'hierarchicalCategories.lvl0',
+              'Cameras & Camcorders > Digital Cameras'
+            );
+          },
+        });
+      })
+    )
     .add(
       'with custom home label',
       wrapWithHits(container => {

docgen/src/guides/v3-migration.md

@@ -4,6 +4,41 @@ InstantSearch 3 introduces some breaking changes in the widget's naming, options
 
 ## Widgets
 
+### Breadcrumb
+
+#### CSS classes
+
+| Before                          | After                           |
+| ------------------------------- | ------------------------------- |
+| `ais-breadcrumb`                | `ais-Breadcrumb`                |
+|                                 | `ais-Breadcrumb--noRefinement`  |
+| `ais-breadcrumb`                | `ais-Breadcrumb-list`           |
+| `ais-breadcrumb--separator`     | `ais-Breadcrumb-separator`      |
+| `ais-breadcrumb--label`         | `ais-Breadcrumb-link`           |
+| `ais-breadcrumb--disabledLabel` |                                 |
+|                                 | `ais-Breadcrumb-item`           |
+|                                 | `ais-Breadcrumb-item--selected` |
+
+#### Markup
+
+```html
+<div class="ais-Breadcrumb">
+  <ul class="ais-Breadcrumb-list">
+    <li class="ais-Breadcrumb-item">
+      <a class="ais-Breadcrumb-link" href="#">Home</a>
+    </li>
+    <li class="ais-Breadcrumb-item">
+      <span class="ais-Breadcrumb-separator" aria-hidden="true">></span>
+      <a class="ais-Breadcrumb-link" href="#">Cooking</a>
+    </li>
+    <li class="ais-Breadcrumb-item ais-Breadcrumb-item--selected">
+      <span class="ais-Breadcrumb-separator" aria-hidden="true">></span>
+      Kitchen textiles
+    </li>
+  </ul>
+</div>
+```
+
 ### Hits
 
 #### Options
@@ -13,8 +48,8 @@ InstantSearch 3 introduces some breaking changes in the widget's naming, options
 | `escapeHits`    | `escapeHTML`    |
 | `showMoreLabel` | `loadMoreLabel` |
 
-* `escapeHTML` becomes `true` by default.
-* `allItems` template has been removed in favor of `connectHits`
+- `escapeHTML` becomes `true` by default.
+- `allItems` template has been removed in favor of `connectHits`
 
 #### CSS classes
 

src/components/Breadcrumb/Breadcrumb.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'preact-compat';
+import cx from 'classnames';
 import PropTypes from 'prop-types';
 import Template from '../Template.js';
-import autoHideContainerHOC from '../../decorators/autoHideContainer.js';
 
 const itemsPropType = PropTypes.arrayOf(
   PropTypes.shape({
@@ -10,6 +10,44 @@ const itemsPropType = PropTypes.arrayOf(
   })
 );
 
+const renderLink = ({ cssClasses, createURL, refine, templateProps }) => (
+  item,
+  idx,
+  items
+) => {
+  const isLast = idx === items.length - 1;
+  const link = isLast ? (
+    item.name
+  ) : (
+    <a
+      className={cssClasses.link}
+      href={createURL(item.value)}
+      onClick={e => {
+        e.preventDefault();
+        refine(item.value);
+      }}
+    >
+      {item.name}
+    </a>
+  );
+
+  const itemClassnames = cx(cssClasses.item, {
+    [cssClasses.selectedItem]: isLast,
+  });
+
+  return (
+    <li key={item.name + idx} className={itemClassnames}>
+      <Template
+        rootTagName="span"
+        rootProps={{ className: cx(cssClasses.separator), ariaHidden: true }}
+        templateKey="separator"
+        {...templateProps}
+      />
+      {link}
+    </li>
+  );
+};
+
 class Breadcrumb extends PureComponent {
   static propTypes = {
     createURL: PropTypes.func,
@@ -24,40 +62,15 @@ class Breadcrumb extends PureComponent {
   render() {
     const { createURL, items, refine, cssClasses } = this.props;
 
-    const breadcrumb = items.map((item, idx) => {
-      const isLast = idx === items.length - 1;
-      const label = isLast ? (
-        <a className={`${cssClasses.disabledLabel} ${cssClasses.label}`}>
-          {item.name}
-        </a>
-      ) : (
-        <a
-          className={cssClasses.label}
-          href={createURL(item.value)}
-          onClick={e => {
-            e.preventDefault();
-            refine(item.value);
-          }}
-        >
-          {item.name}
-        </a>
-      );
+    const breadcrumb = items.map(renderLink(this.props));
 
-      return [
-        <Template
-          key={item.name + idx}
-          rootProps={{ className: cssClasses.separator }}
-          templateKey="separator"
-          {...this.props.templateProps}
-        />,
-        label,
-      ];
+    const homeClassnames = cx(cssClasses.item, {
+      [cssClasses.selectedItem]: items.length === 0,
     });
 
-    const homeClassNames =
-      items.length > 0
-        ? [cssClasses.home, cssClasses.label]
-        : [cssClasses.disabledLabel, cssClasses.home, cssClasses.label];
+    const rootClassnames = cx(cssClasses.root, {
+      [cssClasses.noRefinement]: items.length > 0,
+    });
 
     const homeOnClickHandler = e => {
       e.preventDefault();
@@ -67,18 +80,25 @@ class Breadcrumb extends PureComponent {
     const homeUrl = createURL(null);
 
     return (
-      <div className={cssClasses.root}>
-        <a
-          className={homeClassNames.join(' ')}
-          href={homeUrl}
-          onClick={homeOnClickHandler}
-        >
-          <Template templateKey="home" {...this.props.templateProps} />
-        </a>
-        {breadcrumb}
+      <div className={rootClassnames}>
+        <ul className={cx(cssClasses.list)}>
+          <li className={homeClassnames}>
+            <Template
+              templateKey="home"
+              rootTagName="a"
+              rootProps={{
+                className: cx(cssClasses.link),
+                href: homeUrl,
+                onClick: homeOnClickHandler,
+              }}
+              {...this.props.templateProps}
+            />
+          </li>
+          {breadcrumb}
+        </ul>
       </div>
     );
   }
 }
 
-export default autoHideContainerHOC(Breadcrumb);
+export default Breadcrumb;

src/components/Breadcrumb/__tests__/Breadcrumb-test.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import Breadcrumb from '../Breadcrumb';
+import renderer from 'react-test-renderer';
+
+describe('Breadcrumb', () => {
+  it('should render <Breadcrumb />', () => {
+    const props = {
+      createURL: data => {
+        JSON.stringify(data);
+      },
+      refine: () => {},
+      items: [],
+      cssClasses: {
+        root: 'root',
+        noRefinement: 'no-refinement',
+        list: 'list',
+        item: 'item',
+        selectedItem: 'selectedItem',
+        link: 'link',
+        separator: 'separator',
+      },
+      templateProps: {
+        templates: {
+          home: 'home',
+          separator: ' > ',
+          link: 'link',
+        },
+      },
+    };
+    const tree = renderer.create(<Breadcrumb {...props} />).toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render <Breadcrumb /> with a single item', () => {
+    const props = {
+      createURL: data => {
+        JSON.stringify(data);
+      },
+      refine: () => {},
+      items: [
+        {
+          value: 'val0',
+          name: 'name0',
+        },
+      ],
+      cssClasses: {
+        root: 'root',
+        noRefinement: 'no-refinement',
+        list: 'list',
+        item: 'item',
+        selectedItem: 'selectedItem',
+        link: 'link',
+        separator: 'separator',
+      },
+      templateProps: {
+        templates: {
+          home: 'home',
+          separator: ' > ',
+          link: 'link',
+        },
+      },
+    };
+    const tree = renderer.create(<Breadcrumb {...props} />).toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render <Breadcrumb /> with items', () => {
+    const props = {
+      createURL: data => {
+        JSON.stringify(data);
+      },
+      refine: () => {},
+      items: [
+        {
+          value: 'val0',
+          name: 'name0',
+        },
+        {
+          value: 'val1',
+          name: 'name1',
+        },
+      ],
+      cssClasses: {
+        root: 'root',
+        noRefinement: 'no-refinement',
+        list: 'list',
+        item: 'item',
+        selectedItem: 'selectedItem',
+        link: 'link',
+        separator: 'separator',
+      },
+      templateProps: {
+        templates: {
+          home: 'home',
+          separator: ' > ',
+          link: 'link',
+        },
+      },
+    };
+    const tree = renderer.create(<Breadcrumb {...props} />).toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});