[MT-3568] EPCC Ref Store - Global search: Enable voice search (#50)

* [[MT-3568]add voicesearch functionality and adjust styles

* fully working voicesearch implementation with styled components method

* using classic css on voicesearch instead of styled component, and remove styled component from package.json

* change voicesearch icon animation name

* resolve isListening console error message

* revert change for form labelling

Co-authored-by: Barton Dong <barton97daz@gmail.com>

Author: bdong8boss

src/SearchBar.scss

@@ -6,6 +6,7 @@
   max-width: 500px;
 
   #{$block}__hints {
+    top: 50px;
     position: absolute;
     z-index: 2;
     background-color: $mainBackgroundColor;
@@ -60,6 +61,7 @@
   #{$block}__input {
     position: relative;
     margin-left: 40px;
+    display: flex;
 
     input {
       height: 40px;
@@ -80,6 +82,10 @@
       }
     }
 
+    .ais-SearchBox{
+      width: 100%;
+    }
+
     .ais-SearchBox-form {
       position: relative;
     }
@@ -107,7 +113,55 @@
     .ais-SearchBox-loadingIndicator {
       padding-top: 3px;
     }
+
+    .VoiceSearchButton {
+      all: unset;
+      display: block;
+      width: 36px;
+      height: 36px;
+      border-radius: 36px;
+      margin-left: 8px;
+      cursor: pointer;
+      background-image: url(./images/icons/icon-search-mic.svg);
+      background-repeat: no-repeat;
+      background-position: center;
+
+      &:hover {
+        background-image: url(./images/icons/icon-search-mic-hover.svg);
+      }
+
+      &:active {
+        background-image: url(./images/icons/icon-search-mic-active.svg);
+      }
+    }
+
+    @keyframes breatheAnimation {
+      100% { opacity: 1 }
+      50% { opacity: 0.65 }
+    }
+
+    .VoiceSearchButtonBreathing {
+      background-repeat: no-repeat;
+      background-position: center;
+      all: unset;
+      display: block;
+      width: 36px;
+      height: 36px;
+      border-radius: 36px;
+      margin-left: 8px;
+      cursor: pointer;
+      background-image: url(./images/icons/icon-search-mic-active.svg);
+      animation-name: breatheAnimation;
+      animation-duration: 0.9s;
+      animation-iteration-count: infinite;
+    }
+
   }
+
+  .ais-VoiceSearch-status {
+    display: none;
+  }
+
 }
 
 @media (max-width: $mobileWidth - 1px) {

src/SearchBar.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import useOnclickOutside from 'react-cool-onclickoutside';
-import { SearchBox, Hits, PoweredBy } from 'react-instantsearch-dom';
+import { SearchBox, Hits, PoweredBy, VoiceSearch } from 'react-instantsearch-dom';
 import { useTranslation } from './app-state';
 import { createSearchUrl } from './routes';
 
@@ -13,6 +13,14 @@ import './SearchBar.scss';
 interface SearchBoxProps {
 }
 
+const SearchButtonMic = (props: any) => (
+  props.islistening==="true" ?
+    <span className="VoiceSearchButtonBreathing"
+      {...props} /> :
+    <span className="VoiceSearchButton"
+      {...props} />
+)
+
 export const SearchBar: React.FC<SearchBoxProps> = () => {
   const { t } = useTranslation();
   const [ inputVisible, setInputVisible] = useState(false);
@@ -52,6 +60,22 @@ export const SearchBar: React.FC<SearchBoxProps> = () => {
     setInputVisible(false);
   };
 
+  const VoiceSearchButtonText = ({
+    isListening,
+    isBrowserSupported
+  }: {isListening:any, isBrowserSupported:any}) => (
+    isBrowserSupported ? (
+      isListening ?
+        <SearchButtonMic
+          islistening={isListening.toString()}
+        /> :
+        <SearchButtonMic
+          islistening={isListening.toString()}
+          onClick={() => handleFocus()}
+        />
+    ) : null
+  )
+
   const Hit = ({ hit }: any) => {
     return (
       <Link className="searchbar__hint" to={`/product/${hit.slug}`} onClick={handleLinkClick}>
@@ -88,6 +112,10 @@ export const SearchBar: React.FC<SearchBoxProps> = () => {
           reset={<ClearIcon />}
           translations={translations}
         />
+        <VoiceSearch
+          searchAsYouSpeak={true}
+          buttonTextComponent={VoiceSearchButtonText}
+        />
         <button
           className={`searchbar__close ${searchValue && '--show'}`}
           onClick={onCancel}>