From fa7c4d91aa6551708f19f3b4eb4a0439df47800d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Karine=20Valen=C3=A7a?= <valenca.karine@gmail.com>
Date: Mon, 3 Aug 2020 10:34:09 -0300
Subject: [PATCH] Docs: Storybook - Spinner (#26754)

* add docs for spinner component

* fix lint

* Code review fixes
---
 .../src/components/Spinner/Spinner.mdx        | 17 ++++++++++++++
 .../src/components/Spinner/Spinner.story.tsx  | 22 ++++++++++++++++++-
 2 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 packages/grafana-ui/src/components/Spinner/Spinner.mdx

diff --git a/packages/grafana-ui/src/components/Spinner/Spinner.mdx b/packages/grafana-ui/src/components/Spinner/Spinner.mdx
new file mode 100644
index 00000000000..2b06d8de226
--- /dev/null
+++ b/packages/grafana-ui/src/components/Spinner/Spinner.mdx
@@ -0,0 +1,17 @@
+import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { Spinner } from './Spinner';
+
+<Meta title="MDX|Spinner" component={Spinner} />
+
+# Spinner
+
+Spinner is `fa-spinner` icon animated. It is used to alert a user to wait for an activity to complete.
+
+<Preview>
+	<div>
+		<Spinner />
+		<Spinner className="my-spin-div" iconClassName="my-spinner-classname" size={24}/>
+	</div>
+</Preview>
+
+<Props of={Spinner} />
\ No newline at end of file
diff --git a/packages/grafana-ui/src/components/Spinner/Spinner.story.tsx b/packages/grafana-ui/src/components/Spinner/Spinner.story.tsx
index a8b7e4ebcdd..3dbb826c44b 100644
--- a/packages/grafana-ui/src/components/Spinner/Spinner.story.tsx
+++ b/packages/grafana-ui/src/components/Spinner/Spinner.story.tsx
@@ -1,12 +1,18 @@
 import React from 'react';
-
+import { number, color } from '@storybook/addon-knobs';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { Spinner } from '@grafana/ui';
+import mdx from './Spinner.mdx';
 
 export default {
   title: 'Visualizations/Spinner',
   component: Spinner,
   decorators: [withCenteredStory],
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
 };
 
 export const basic = () => {
@@ -16,3 +22,17 @@ export const basic = () => {
     </div>
   );
 };
+
+export const withStyle = () => {
+  return (
+    <div>
+      <Spinner
+        style={{
+          backgroundColor: color('White', 'white'),
+          color: color('Red', 'red'),
+        }}
+        size={number('Size', 34)}
+      />
+    </div>
+  );
+};