Enhance Spinner component and write docs

packages/components-faraday/src/components/UIComponents/Spinner.js

@@ -4,9 +4,11 @@ import { Icon } from '@pubsweet/ui'
 
 import classes from './Spinner.local.scss'
 
-const Spinner = () => (
+const Spinner = ({ icon = 'loader', size = 16, color = '#444' }) => (
   <div className={classnames(classes.rotate, classes.icon)}>
-    <Icon size={16}>loader</Icon>
+    <Icon color={color} size={size}>
+      {icon}
+    </Icon>
   </div>
 )
 

packages/components-faraday/src/components/UIComponents/Spinner.md

+# Spinner
+
+Spinning icon used when loading or waiting for API calls to finish.
+
+## Props
+
+| Prop  |                                 Description                                  | Required | Default  |  Type  |
+| :---: | :--------------------------------------------------------------------------: | :------: | :------: | :----: |
+| icon  | Name of the icon to be used as a spinner. Can be any valid FeatherIcon icon. |  false   | 'loader' | string |
+| size  |                           The size of the spinner                            |  false   |    16    | number |
+| color |                            Color of the spinner.                             |  false   |  '#444'  | string |
+
+## Examples
+
+```js
+import { Spinner } from 'pubsweet-components-faraday/src/components'
+
+<Spinner /> // renders the default spinner
+<Spinner color="pink" size={40} icon="compass" /> // renders a huge pink spinning compass
+```