Grafana-UI: Add story and mdx file (#27152)

packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.mdx

+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}/>

packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.story.tsx

+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" />;
+};

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;