fix(breadcrumb): rename noRefinement to noRefinementRoot

src/components/Breadcrumb/Breadcrumb.js

@@ -51,7 +51,7 @@ const Breadcrumb = ({
 }) => (
   <div
     className={cx(cssClasses.root, {
-      [cssClasses.noRefinement]: items.length > 0,
+      [cssClasses.noRefinementRoot]: items.length === 0,
     })}
   >
     <ul className={cssClasses.list}>
@@ -84,7 +84,7 @@ Breadcrumb.propTypes = {
   createURL: PropTypes.func.isRequired,
   cssClasses: PropTypes.shape({
     root: PropTypes.string.isRequired,
-    noRefinement: PropTypes.string.isRequired,
+    noRefinementRoot: PropTypes.string.isRequired,
     list: PropTypes.string.isRequired,
     item: PropTypes.string.isRequired,
     selectedItem: PropTypes.string.isRequired,

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

@@ -12,7 +12,7 @@ describe('Breadcrumb', () => {
       items: [],
       cssClasses: {
         root: 'root',
-        noRefinement: 'noRefinement',
+        noRefinementRoot: 'noRefinementRoot',
         list: 'list',
         item: 'item',
         selectedItem: 'selectedItem',
@@ -29,6 +29,7 @@ describe('Breadcrumb', () => {
     };
     const wrapper = mount(<Breadcrumb {...props} />);
 
+    expect(wrapper.find('.noRefinementRoot')).toHaveLength(1);
     expect(wrapper).toMatchSnapshot();
   });
 
@@ -46,7 +47,7 @@ describe('Breadcrumb', () => {
       ],
       cssClasses: {
         root: 'root',
-        noRefinement: 'noRefinement',
+        noRefinementRoot: 'noRefinementRoot',
         list: 'list',
         item: 'item',
         selectedItem: 'selectedItem',
@@ -63,10 +64,11 @@ describe('Breadcrumb', () => {
     };
     const wrapper = mount(<Breadcrumb {...props} />);
 
+    expect(wrapper.find('.noRefinementRoot')).toHaveLength(0);
     expect(wrapper).toMatchSnapshot();
   });
 
-  it('should render <Breadcrumb /> with items', () => {
+  it('should render <Breadcrumb /> with multiple items', () => {
     const props = {
       createURL: data => {
         JSON.stringify(data);
@@ -84,7 +86,7 @@ describe('Breadcrumb', () => {
       ],
       cssClasses: {
         root: 'root',
-        noRefinement: 'noRefinement',
+        noRefinementRoot: 'noRefinementRoot',
         list: 'list',
         item: 'item',
         selectedItem: 'selectedItem',
@@ -101,6 +103,7 @@ describe('Breadcrumb', () => {
     };
     const wrapper = mount(<Breadcrumb {...props} />);
 
+    expect(wrapper.find('.noRefinementRoot')).toHaveLength(0);
     expect(wrapper).toMatchSnapshot();
   });
 });

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

@@ -2,7 +2,7 @@
 
 exports[`Breadcrumb should render <Breadcrumb /> 1`] = `
 <div
-  className="root"
+  className="root noRefinementRoot"
 >
   <ul
     className="list"
@@ -26,7 +26,7 @@ exports[`Breadcrumb should render <Breadcrumb /> 1`] = `
 
 exports[`Breadcrumb should render <Breadcrumb /> with a single item 1`] = `
 <div
-  className="root noRefinement"
+  className="root"
 >
   <ul
     className="list"
@@ -63,9 +63,9 @@ exports[`Breadcrumb should render <Breadcrumb /> with a single item 1`] = `
 </div>
 `;
 
-exports[`Breadcrumb should render <Breadcrumb /> with items 1`] = `
+exports[`Breadcrumb should render <Breadcrumb /> with multiple items 1`] = `
 <div
-  className="root noRefinement"
+  className="root"
 >
   <ul
     className="list"

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

@@ -9,7 +9,7 @@ exports[`breadcrumb() render renders transformed items correctly 1`] = `
       "item": "ais-Breadcrumb-item",
       "link": "ais-Breadcrumb-link",
       "list": "ais-Breadcrumb-list",
-      "noRefinement": "ais-Breadcrumb--noRefinement",
+      "noRefinementRoot": "ais-Breadcrumb--noRefinement",
       "root": "ais-Breadcrumb",
       "selectedItem": "ais-Breadcrumb-item--selected",
       "separator": "ais-Breadcrumb-separator",

src/widgets/breadcrumb/breadcrumb.js

@@ -40,15 +40,15 @@ breadcrumb({
   container,
   attributes,
   [ rootPath = null ],
-  [ templates.{home, separator}]
   [ transformItems ],
+  [ templates.{home, separator}],
   [ cssClasses.{root, noRefinement, list, item, selectedItem, separator, link} ],
 })`;
 
 /**
  * @typedef {Object} BreadcrumbCSSClasses
  * @property {string|string[]} [root] CSS class to add to the root element of the widget.
- * @property {string|string[]} [noRefinement] CSS class to add to the root element of the widget if there are no refinements.
+ * @property {string|string[]} [noRefinementRoot] CSS class to add to the root element of the widget if there are no refinements.
  * @property {string|string[]} [list] CSS class to add to the list element.
  * @property {string|string[]} [item] CSS class to add to the items of the list. The items contains the link and the separator.
  * @property {string|string[]} [selectedItem] CSS class to add to the selected item in the list: the last one or the home if there are no refinements.
@@ -146,9 +146,9 @@ export default function breadcrumb({
 
   const cssClasses = {
     root: cx(suit(), userCssClasses.root),
-    noRefinement: cx(
+    noRefinementRoot: cx(
       suit({ modifierName: 'noRefinement' }),
-      userCssClasses.noRefinement
+      userCssClasses.noRefinementRoot
     ),
     list: cx(suit({ descendantName: 'list' }), userCssClasses.list),
     item: cx(suit({ descendantName: 'item' }), userCssClasses.item),