Created Legend.mdx (#26146)

Add simple docs to legend component

Signed-off-by: Oana <oana.mangiurea@gmail.com>

packages/grafana-ui/src/components/Forms/Legend.mdx

@@ -0,0 +1,23 @@
+import { Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { Legend } from './Legend';
+
+<Meta title="MDX|Legend" component={Legend} />
+
+# Legend
+
+
+### When to use
+
+Legend should be used to add a caption to a group of related form elements that have been grouped toegheter into a `FieldSet`. 
+
+
+### Usage
+
+```jsx
+import { Forms } from '@grafana/ui';
+
+<Legend>{label}</Legend>
+```
+
+### Props
+<Props of={Legend} />

packages/grafana-ui/src/components/Forms/Legend.story.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { text } from '@storybook/addon-knobs';
 
 import { Legend } from './Legend';
+import mdx from './Legend.mdx';
 
 const getKnobs = () => {
   return {
@@ -12,6 +13,11 @@ const getKnobs = () => {
 export default {
   title: 'Forms/Legend',
   component: Legend,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
 };
 
 export const basic = () => {