From 3188524f1ff950b9cb3060b9bf0de457532bb323 Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Mon, 28 Sep 2020 10:16:20 +0300
Subject: [PATCH] Grafana-UI: Add docs for FormattedValueDisplay (#27759)

* Add docs for FormattedValueDisplay

* Move to visualizations
---
 .../FormattedValueDisplay.mdx                 | 14 ++++++++++++++
 .../FormattedValueDisplay.story.tsx           | 19 +++++++++++++++++++
 2 files changed, 33 insertions(+)
 create mode 100644 packages/grafana-ui/src/components/FormattedValueDisplay/FormattedValueDisplay.mdx
 create mode 100644 packages/grafana-ui/src/components/FormattedValueDisplay/FormattedValueDisplay.story.tsx

diff --git a/packages/grafana-ui/src/components/FormattedValueDisplay/FormattedValueDisplay.mdx b/packages/grafana-ui/src/components/FormattedValueDisplay/FormattedValueDisplay.mdx
new file mode 100644
index 00000000000..8a5917ef97f
--- /dev/null
+++ b/packages/grafana-ui/src/components/FormattedValueDisplay/FormattedValueDisplay.mdx
@@ -0,0 +1,14 @@
+import { Props } from '@storybook/addon-docs/blocks';
+import { FormattedValueDisplay } from './FormattedValueDisplay';
+
+# FormattedValueDisplay
+
+Used to display a value, which also supports prefix and suffix.
+### Usage
+
+```jsx
+ <FormattedValueDisplay value={{ text: 'Test value' }} style={{ fontSize: 12 }} />
+```
+
+### Props
+<Props of={FormattedValueDisplay} />
diff --git a/packages/grafana-ui/src/components/FormattedValueDisplay/FormattedValueDisplay.story.tsx b/packages/grafana-ui/src/components/FormattedValueDisplay/FormattedValueDisplay.story.tsx
new file mode 100644
index 00000000000..d81bceb6b8b
--- /dev/null
+++ b/packages/grafana-ui/src/components/FormattedValueDisplay/FormattedValueDisplay.story.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { FormattedValueDisplay } from './FormattedValueDisplay';
+import { withCenteredStory } from '@grafana/ui/src/utils/storybook/withCenteredStory';
+import mdx from './FormattedValueDisplay.mdx';
+
+export default {
+  title: 'Visualizations/FormattedValueDisplay',
+  component: FormattedValueDisplay,
+  decorators: [withCenteredStory],
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+export const basic = () => {
+  return <FormattedValueDisplay value={{ text: 'Test value' }} style={{ fontSize: 12 }} />;
+};