fix(searchBox): fixes cssClasses option

We were trying to call classList.add('a list of css classes');
while it's only callable like this: classList.add('a', 'list',
'of'..);

fixes #775

This is a hotfix

Author: vvo

src/widgets/search-box/__tests__/search-box-test.js

@@ -49,22 +49,22 @@ describe('search-box()', () => {
   });
 
   context('targeting a div', () => {
+    let opts;
+
     beforeEach(() => {
       container = document.createElement('div');
-      widget = searchBox({container});
-    });
-
-    it('configures nothing', () => {
-      expect(widget.getConfiguration).toEqual(undefined);
+      opts = {container};
     });
 
     it('adds an input inside the div', () => {
+      widget = searchBox(opts);
       widget.init({state, helper});
       let inputs = container.getElementsByTagName('input');
       expect(inputs.length).toEqual(1);
     });
 
     it('sets default HTML attribute to the input', () => {
+      widget = searchBox(opts);
       widget.init({state, helper});
       let input = container.getElementsByTagName('input')[0];
       expect(input.getAttribute('autocapitalize')).toEqual('off');
@@ -76,6 +76,23 @@ describe('search-box()', () => {
       expect(input.getAttribute('spellcheck')).toEqual('false');
       expect(input.getAttribute('type')).toEqual('text');
     });
+
+    it('supports cssClasses option', () => {
+      opts.cssClasses = {
+        root: 'root-class',
+        input: 'input-class'
+      };
+
+      widget = searchBox(opts);
+      widget.init({state, helper});
+      let actualRootClasses = container.querySelector('input').parentNode.getAttribute('class');
+      let actualInputClasses = container.querySelector('input').getAttribute('class');
+      let expectedRootClasses = 'ais-search-box root-class';
+      let expectedInputClasses = 'ais-search-box--input input-class';
+
+      expect(actualRootClasses).toEqual(expectedRootClasses);
+      expect(actualInputClasses).toEqual(expectedInputClasses);
+    });
   });
 
   context('targeting an input', () => {
@@ -102,6 +119,20 @@ describe('search-box()', () => {
       expect(container.getAttribute('class')).toEqual('my-class ais-search-box--input');
       expect(container.getAttribute('placeholder')).toEqual('Search');
     });
+
+    it('supports cssClasses', () => {
+      container = createHTMLNodeFromString('<input class="my-class" />');
+      widget = searchBox({container, cssClasses: {root: 'root-class', input: 'input-class'}});
+      widget.init({state, helper});
+
+      let actualRootClasses = container.parentNode.getAttribute('class');
+      let actualInputClasses = container.getAttribute('class');
+      let expectedRootClasses = 'ais-search-box root-class';
+      let expectedInputClasses = 'my-class ais-search-box--input input-class';
+
+      expect(actualRootClasses).toEqual(expectedRootClasses);
+      expect(actualInputClasses).toEqual(expectedInputClasses);
+    });
   });
 
   context('wraps the input in a div', () => {

src/widgets/search-box/search-box.js

@@ -19,10 +19,10 @@ const KEY_SUPPRESS = 8;
  * @param  {boolean} [options.searchOnEnterKeyPressOnly=false] If set, trigger the search
  * once `<Enter>` is pressed only
  * @param  {Object} [options.cssClasses] CSS classes to add
- * @param  {string} [options.cssClasses.root] CSS class to add to the
+ * @param  {string|string[]} [options.cssClasses.root] CSS class to add to the
  * wrapping div (if `wrapInput` set to `true`)
- * @param  {string} [options.cssClasses.input] CSS class to add to the input
- * @param  {string} [options.cssClasses.poweredBy] CSS class to add to the poweredBy element
+ * @param  {string|string[]} [options.cssClasses.input] CSS class to add to the input
+ * @param  {string|string[]} [options.cssClasses.poweredBy] CSS class to add to the poweredBy element
  * @return {Object}
  */
 const usage = `Usage:
@@ -66,7 +66,8 @@ function searchBox({
     wrapInput: function(input) {
       // Wrap input in a .ais-search-box div
       let wrapper = document.createElement('div');
-      wrapper.classList.add(cx(bem(null), cssClasses.root));
+      let CSSClassesToAdd = cx(bem(null), cssClasses.root).split(' ');
+      wrapper.classList.add.apply(wrapper.classList, CSSClassesToAdd);
       wrapper.appendChild(input);
       return wrapper;
     },
@@ -91,7 +92,8 @@ function searchBox({
       });
 
       // Add classes
-      input.classList.add(cx(bem('input'), cssClasses.input));
+      let CSSClassesToAdd = cx(bem('input'), cssClasses.input).split(' ');
+      input.classList.add.apply(input.classList, CSSClassesToAdd);
     },
     addPoweredBy: function(input) {
       let PoweredBy = require('../../components/PoweredBy/PoweredBy.js');