Allow for a custom icon for search submit button

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-storefront",
-  "version": "8.0.1",
+  "version": "8.1.0",
   "description": "Build and deploy e-commerce progressive web apps (PWAs) in record time.",
   "module": "./index.js",
   "license": "Apache-2.0",

src/search/SearchField.js

@@ -95,6 +95,7 @@ const SearchField = forwardRef(
       submitButtonVariant,
       showClearButton,
       SubmitButtonComponent,
+      SubmitButtonIcon,
       clearButtonProps,
       inputProps,
       value,
@@ -167,6 +168,7 @@ const SearchField = forwardRef(
               [classes.hidden]: empty,
             })}
             text={value}
+            ButtonIcon={SubmitButtonIcon}
             {...submitButtonProps}
           />
         )}
@@ -184,6 +186,10 @@ SearchField.propTypes = {
    * The component to use for the submit button.
    */
   SubmitButtonComponent: PropTypes.elementType,
+  /**
+   * An icon to use for the submit button.
+   */
+  SubmitButtonIcon: PropTypes.elementType,
   /**
    * The type of submit button to display.
    */

src/search/SearchSubmitButton.js

@@ -1,7 +1,7 @@
+import SearchIcon from '@material-ui/icons/Search'
 import React from 'react'
 import makeStyles from '@material-ui/core/styles/makeStyles'
 import PropTypes from 'prop-types'
-import SearchIcon from '@material-ui/icons/Search'
 
 export const styles = theme => ({
   /**
@@ -20,7 +20,7 @@ const useStyles = makeStyles(styles, { name: 'RSFSearchSubmitButton' })
 /**
  * A button to submit the search.  All other props are spread to the provided `Component`.
  */
-export default function SearchSubmitButton({ Component, classes, text, ...others }) {
+export default function SearchSubmitButton({ Component, ButtonIcon, classes, text, ...others }) {
   classes = useStyles({ classes })
 
   return (
@@ -32,7 +32,7 @@ export default function SearchSubmitButton({ Component, classes, text, ...others
       disabled={text.trim().length === 0}
       {...others}
     >
-      <SearchIcon />
+      <ButtonIcon />
     </Component>
   )
 }
@@ -46,10 +46,16 @@ SearchSubmitButton.propTypes = {
    * A Material UI button component to display.
    */
   Component: PropTypes.elementType.isRequired,
+  /**
+   * A Material UI button component to display.
+   */
+  ButtonIcon: PropTypes.elementType,
   /**
    * The current search text.
    */
   text: PropTypes.string.isRequired,
 }
 
-SearchSubmitButton.defaultProps = {}
+SearchSubmitButton.defaultProps = {
+  ButtonIcon: SearchIcon,
+}

test/search/SearchField.test.js

@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 import { mount } from 'enzyme'
 import SearchField from 'react-storefront/search/SearchField'
-import SearchContext from 'react-storefront/search/SearchContext'
 import SearchSubmitButton from 'react-storefront/search/SearchSubmitButton'
 import { Fab, Button } from '@material-ui/core'
 import { IconButton } from '@material-ui/core'

test/search/SearchSubmitButton.test.js

@@ -1,3 +1,4 @@
+import { Apps } from '@material-ui/icons'
 import React from 'react'
 import { mount } from 'enzyme'
 import SearchSubmitButton from 'react-storefront/search/SearchSubmitButton'
@@ -24,4 +25,9 @@ describe('SearchSubmitButton', () => {
     wrapper = mount(<SearchSubmitButton Component={Button} text="" spreadprops="spreadpropstest" />)
     expect(wrapper.find(Button).prop('spreadprops')).toBe('spreadpropstest')
   })
+
+  it('should change the icon based on the given prop', () => {
+    wrapper = mount(<SearchSubmitButton ButtonIcon={Apps} Component={Button} text="" />)
+    expect(wrapper.find(Apps)).toExist()
+  })
 })