From 4efd84e583a80ffc5a0e4251a74802782ef86e85 Mon Sep 17 00:00:00 2001
From: Alexandru Munteanu <alexandru.munteanu@thinslices.com>
Date: Wed, 7 Feb 2018 15:07:57 +0200
Subject: [PATCH] Enhance Spinner component and write docs
---
.../src/components/UIComponents/Spinner.js | 6 ++++--
.../src/components/UIComponents/Spinner.md | 20 +++++++++++++++++++
2 files changed, 24 insertions(+), 2 deletions(-)
create mode 100644 packages/components-faraday/src/components/UIComponents/Spinner.md
diff --git a/packages/components-faraday/src/components/UIComponents/Spinner.js b/packages/components-faraday/src/components/UIComponents/Spinner.js
index 42c828c4b..020eebbd4 100644
--- a/packages/components-faraday/src/components/UIComponents/Spinner.js
+++ b/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>
)
diff --git a/packages/components-faraday/src/components/UIComponents/Spinner.md b/packages/components-faraday/src/components/UIComponents/Spinner.md
new file mode 100644
index 000000000..613387829
--- /dev/null
+++ b/packages/components-faraday/src/components/UIComponents/Spinner.md
@@ -0,0 +1,20 @@
+# 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
+```
--
GitLab