fix(sffv-searchbox): update classnames to avoid conflicts (#1781)

We were reusing the default class names from @Shipow searchbox
generator. If a user were to use those, it would break their
implementation. Move to something more specific, `sbx-sffv`
instead of `sbx-custom`.

src/components/SearchBox/index.js

@@ -27,7 +27,7 @@ export default class SearchBox extends React.Component {
 
     return (
       <form noValidate="novalidate"
-        className="searchbox sbx-custom"
+        className="searchbox sbx-sffv"
         onReset={() => { onChange(''); }}
         onSubmit={e => this.validateSearch(e) }
       >
@@ -41,14 +41,14 @@ export default class SearchBox extends React.Component {
           </symbol>
         </svg>
 
-        <div role="search" className="sbx-custom__wrapper">
-          <input type="search" name="search" placeholder={placeholder} autoComplete="off" required="required" className="sbx-custom__input" onChange={e => onChange(e.target.value)} ref={i => { this.input = i; }} />
-          <button type="submit" title="Submit your search query." className="sbx-custom__submit">
+        <div role="search" className="sbx-sffv__wrapper">
+          <input type="search" name="search" placeholder={placeholder} autoComplete="off" required="required" className="sbx-sffv__input" onChange={e => onChange(e.target.value)} ref={i => { this.input = i; }} />
+          <button type="submit" title="Submit your search query." className="sbx-sffv__submit">
             <svg role="img" aria-label="Search">
               <use xlinkHref="#sbx-icon-search-12"></use>
             </svg>
           </button>
-          <button type="reset" title="Clear the search query." className="sbx-custom__reset">
+          <button type="reset" title="Clear the search query." className="sbx-sffv__reset">
             <svg role="img" aria-label="Reset">
               <use xlinkHref="#sbx-icon-clear-2"></use>
             </svg>

src/css/default/_refinement-searchbox.scss

@@ -1,4 +1,4 @@
-$custom:(
+$config-sffv:(
   input-width: 100%,
   input-height: 25px,
   border-width: 1px,
@@ -9,13 +9,11 @@ $custom:(
   input-focus-background: #FFFFFF,
   font-size: 14px,
   placeholder-color: #BBBBBB,
-  icon: sbx-icon-search-12,
   icon-size: 14px,
   icon-position: left,
   icon-color: #337AB7,
   icon-background: #FFFFFF,
   icon-background-opacity: 0,
-  icon-clear: sbx-icon-clear-2,
   icon-clear-size: 14px
 );
 
@@ -213,8 +211,8 @@ $custom:(
   }
 }
 
-.sbx-custom{
-  @include searchbox($custom...);
+.sbx-sffv{
+  @include searchbox($config-sffv...);
 }
 
 .ais-refinement-list--item em {