From 5bbdc62044a8217687ecf7342d80d986783d5f5f Mon Sep 17 00:00:00 2001 From: Alexa V <239999+axelavargas@users.noreply.github.com> Date: Mon, 20 Mar 2023 06:48:41 +0100 Subject: [PATCH] Storybook: Add MDX PanelChrome documentation (#64916) --- .betterer.results | 3 - .../components/PanelChrome/PanelChrome.mdx | 484 ++++++++++++++++++ .../PanelChrome/PanelChrome.story.tsx | 6 +- 3 files changed, 489 insertions(+), 4 deletions(-) create mode 100644 packages/grafana-ui/src/components/PanelChrome/PanelChrome.mdx diff --git a/.betterer.results b/.betterer.results index 78da1cbe4b8..fd96ef7a3b8 100644 --- a/.betterer.results +++ b/.betterer.results @@ -6825,9 +6825,6 @@ exports[`no undocumented stories`] = { "packages/grafana-ui/src/components/PageLayout/PageToolbar.story.tsx:5381": [ [0, 0, 0, "No undocumented stories are allowed, please add an .mdx file with some documentation", "5381"] ], - "packages/grafana-ui/src/components/PanelChrome/PanelChrome.story.tsx:5381": [ - [0, 0, 0, "No undocumented stories are allowed, please add an .mdx file with some documentation", "5381"] - ], "packages/grafana-ui/src/components/QueryField/QueryField.story.tsx:5381": [ [0, 0, 0, "No undocumented stories are allowed, please add an .mdx file with some documentation", "5381"] ], diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.mdx b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.mdx new file mode 100644 index 00000000000..868b714d1b3 --- /dev/null +++ b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.mdx @@ -0,0 +1,484 @@ +import { Meta, Canvas, Story, Preview, Props } from '@storybook/addon-docs/blocks'; +import { PanelChrome } from './PanelChrome'; +import { LoadingIndicator } from './LoadingIndicator'; + +import { action } from '@storybook/addon-actions'; +import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas'; +import { HorizontalGroup } from '../Layout/Layout'; +import { LoadingState } from '@grafana/data'; +import { Button } from '../Button/Button.tsx'; +import { Menu } from '../Menu/Menu'; + + + +# PanelChrome + +Component used for rendering content wrapped in the same style as grafana panels + +### Basic Usage: Title, Description and Content + +```tsx + + {(innerwidth, innerheight) => { + return ( +
+ New panel with old API +
+ ); + }} + +``` + + + + {(innerwidth, innerheight) => { + return ( +
+ Content +
+ ); + }} + + + +### Menu: Standard & Hover + +```tsx +} + menu={() => ( + + + + + + + + )} + description="Here I will put a description that explains a bit more this panel" + width={400} + height={200} +> + {(innerwidth, innerheight) => { + return ( +
+ New panel with old API +
+ ); + }} + +``` + + + + + ( + + + + + + + + )} + description="Here I will put a description that explains a bit more this panel" + width={400} + height={200} + +> + + {(innerwidth, innerheight) => { + return ( +
+ Content with fixed header +
+ ); + }} + + + + ( + + + + + + + + )} + hoverHeader={true} + description="Here I will put a description that explains a bit more this panel" + width={400} + height={200} + +> + + {(innerwidth, innerheight) => { + return ( +
+ Content with hoverHeader=true +
+ ); + }} + + + + + +### States: Loading , Streaming, Error + +```tsx +} + statusMessage='Error text' + statusMessageOnClick={action('ErrorIndicator: onClick fired')} + width={400} + height={200} +> + {(innerwidth, innerheight) => { + return ( +
+ New panel with old API +
+ ); + }} + +``` + + + + + + + {(innerwidth, innerheight) => { + return ( +
+ Data is loading +
+ ); + }} + + + + + + {(innerwidth, innerheight) => { + return ( +
+ Data is Streaming +
+ ); + }} + + + + + + {(innerwidth, innerheight) => { + return ( +
+ There is an error +
+ ); + }} + + + + + +### Extra options? Title Items + +```tsx + +