diff --git a/packages/components-faraday/src/components/UIComponents/Spinner.js b/packages/components-faraday/src/components/UIComponents/Spinner.js index 42c828c4bd85664bc3885daf6c0b0b70eec33a0e..020eebbd4f16c40cf543b1efceb921df6683dc65 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 0000000000000000000000000000000000000000..613387829983e4756f9364e36e8c60eafacd21df --- /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 +```