Storybook: Add controls to PanelChrome story (#54741)

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

@@ -1,6 +1,7 @@
-import { ComponentMeta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { merge } from 'lodash';
-import React, { CSSProperties, useState } from 'react';
+import React, { CSSProperties, useState, ReactNode } from 'react';
 import { useInterval } from 'react-use';
 
 import { GrafanaTheme2 } from '@grafana/data';
@@ -14,10 +15,23 @@ const meta: ComponentMeta<typeof PanelChrome> = {
   component: PanelChrome,
   decorators: [withCenteredStory],
   parameters: {
+    controls: {
+      exclude: ['children'],
+    },
     docs: {},
   },
 };
 
+function getContentStyle(theme: GrafanaTheme2): CSSProperties {
+  return {
+    background: theme.colors.background.secondary,
+    color: theme.colors.text.primary,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  };
+}
+
 function renderPanel(name: string, overrides: Partial<PanelChromeProps>, theme: GrafanaTheme2) {
   const props: PanelChromeProps = {
     width: 400,
@@ -28,12 +42,7 @@ function renderPanel(name: string, overrides: Partial<PanelChromeProps>, theme:
 
   merge(props, overrides);
 
-  const contentStyle: CSSProperties = {
+  const contentStyle = getContentStyle(theme);
-    background: theme.colors.background.secondary,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  };
 
   return (
     <PanelChrome {...props}>
@@ -105,4 +114,50 @@ export const Examples = () => {
   );
 };
 
+export const Basic: ComponentStory<typeof PanelChrome> = (args: PanelChromeProps) => {
+  const theme = useTheme2();
+  const contentStyle = getContentStyle(theme);
+
+  return (
+    <PanelChrome {...args}>
+      {(width: number, height: number) => <div style={{ height, width, ...contentStyle }}>Description text</div>}
+    </PanelChrome>
+  );
+};
+
+const Default: ReactNode = [];
+const LoadingIcon = [
+  <PanelChrome.LoadingIndicator key="loadingIndicator" loading onCancel={action('LoadingIndicator: onCancel fired')} />,
+];
+const ErrorIcon = [
+  <PanelChrome.ErrorIndicator
+    key="errorIndicator"
+    error="Error text"
+    onClick={action('ErrorIndicator: onClick fired')}
+  />,
+];
+
+const leftItems = { LoadingIcon, ErrorIcon, Default };
+
+Basic.argTypes = {
+  leftItems: {
+    options: Object.keys(leftItems),
+    mapping: leftItems,
+    control: {
+      type: 'select',
+      labels: {
+        LoadingIcon: 'With loading icon',
+        ErrorIcon: 'With error icon',
+        Default: 'Default (no elements)',
+      },
+    },
+  },
+};
+
+Basic.args = {
+  width: 400,
+  height: 200,
+  title: 'Title text',
+};
+
 export default meta;