From 4a6268014af5ae01c0a1ed848a9bdecdcb29cebf Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Mon, 24 Aug 2020 14:13:28 +0300
Subject: [PATCH] Grafana-UI: Add story and mdx file (#27152)

---
 .../components/AlphaNotice/AlphaNotice.mdx    | 10 ++++++++++
 .../AlphaNotice/AlphaNotice.story.tsx         | 20 +++++++++++++++++++
 .../components/AlphaNotice/AlphaNotice.tsx    |  2 +-
 3 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.mdx
 create mode 100644 packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.story.tsx

diff --git a/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.mdx b/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.mdx
new file mode 100644
index 00000000000..e0ac489850e
--- /dev/null
+++ b/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.mdx
@@ -0,0 +1,10 @@
+import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { AlphaNotice } from './AlphaNotice';
+
+<Meta title="MDX|AlphaNotice" component={AlphaNotice} />
+
+# AlphaNotice
+
+Used to indicate plugin state - Alpha, Beta or Deprecated.
+
+<Props of={AlphaNotice}/>
diff --git a/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.story.tsx b/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.story.tsx
new file mode 100644
index 00000000000..67b5236ba5a
--- /dev/null
+++ b/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.story.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { PluginState } from '@grafana/data';
+import { AlphaNotice } from './AlphaNotice';
+import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
+import mdx from './AlphaNotice.mdx';
+
+export default {
+  title: 'Overlays/AlphaNotice',
+  component: AlphaNotice,
+  decorators: [withCenteredStory, withHorizontallyCenteredStory],
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+export const basic = () => {
+  return <AlphaNotice state={PluginState.alpha} text="This is an alpha feature" />;
+};
diff --git a/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.tsx b/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.tsx
index 1b2fb38c8d5..8f6e35fae93 100644
--- a/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.tsx
+++ b/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.tsx
@@ -4,7 +4,7 @@ import { ThemeContext } from '../../index';
 import { PluginState } from '@grafana/data';
 import { Icon } from '../Icon/Icon';
 
-interface Props {
+export interface Props {
   state?: PluginState;
   text?: string;
   className?: string;