PanelChrome: Restore previous panel chrome story (#33258)

* PanelChrome: Restore previous panel chrome story

* Update story name

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

@@ -1,93 +1,103 @@
-import React, { useState } from 'react';
-import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
+import React, { CSSProperties, useState } from 'react';
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+import { PanelChrome, useTheme, PanelChromeProps } from '@grafana/ui';
+import { HorizontalGroup, VerticalGroup } from '../Layout/Layout';
+import { merge } from 'lodash';
+import { GrafanaTheme } from '@grafana/data';
 import { useInterval } from 'react-use';
-import { PanelChrome, PanelPadding } from './PanelChrome';
-import { LoadingIndicator } from './LoadingIndicator';
-import { ErrorIndicator } from './ErrorIndicator';
-import { useTheme } from '../../themes/ThemeContext';
 
 export default {
   title: 'Visualizations/PanelChrome',
   component: PanelChrome,
-  decorators: [withCenteredStory, withHorizontallyCenteredStory],
+  decorators: [withCenteredStory],
   parameters: {
     docs: {},
   },
-  argTypes: {
-    leftItems: {
-      control: {
-        type: 'multi-select',
-        options: ['none', 'loading', 'error'],
-      },
-    },
-    width: {
-      table: {
-        disable: true,
-      },
-    },
-    height: {
-      table: {
-        disable: true,
-      },
-    },
-  },
 };
 
-type PanelChromeStoryProps = {
-  leftItems: string[];
-  title: string | undefined;
-  padding: PanelPadding;
-};
+function renderPanel(name: string, overrides: Partial<PanelChromeProps>, theme: GrafanaTheme) {
+  const props: PanelChromeProps = {
+    width: 400,
+    height: 130,
+    title: 'Default title',
+    children: () => undefined,
+  };
 
-export const StandardPanel = (props: PanelChromeStoryProps) => {
-  const theme = useTheme();
-  const leftItems = mapToItems(props.leftItems);
+  merge(props, overrides);
 
-  return (
-    <div style={{ display: 'flex', height: '500px', alignItems: 'center' }}>
-      <PanelChrome {...props} width={400} height={230} leftItems={leftItems}>
-        {(innerWidth, innerHeight) => {
-          return (
-            <div
-              style={{
-                width: innerWidth,
-                height: innerHeight,
-                ...{
+  const contentStyle: CSSProperties = {
     background: theme.colors.bg2,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-                },
-              }}
-            ></div>
-          );
+  };
+
+  return (
+    <PanelChrome {...props}>
+      {(innerWidth, innerHeight) => {
+        return <div style={{ width: innerWidth, height: innerHeight, ...contentStyle }}>{name}</div>;
       }}
     </PanelChrome>
+  );
+}
+
+export const Examples = () => {
+  const theme = useTheme();
+  const [loading, setLoading] = useState(true);
+
+  useInterval(() => setLoading(true), 5000);
+
+  return (
+    <div style={{ background: theme.colors.dashboardBg, padding: 100 }}>
+      <HorizontalGroup spacing="md">
+        <VerticalGroup spacing="md">
+          {renderPanel('Default panel', {}, theme)}
+          {renderPanel('No padding', { padding: 'none' }, theme)}
+        </VerticalGroup>
+        <VerticalGroup spacing="md">
+          {renderPanel('No title', { title: '' }, theme)}
+          {renderPanel(
+            'Very long title',
+            { title: 'Very long title that should get ellipsis when there is no more space' },
+            theme
+          )}
+        </VerticalGroup>
+      </HorizontalGroup>
+      <div style={{ marginTop: theme.spacing.md }} />
+      <HorizontalGroup spacing="md">
+        <VerticalGroup spacing="md">
+          {renderPanel(
+            'No title and loading indicator',
+            {
+              title: '',
+              leftItems: [
+                <PanelChrome.LoadingIndicator
+                  loading={loading}
+                  onCancel={() => setLoading(false)}
+                  key="loading-indicator"
+                />,
+              ],
+            },
+            theme
+          )}
+        </VerticalGroup>
+        <VerticalGroup spacing="md">
+          {renderPanel(
+            'Very long title',
+            {
+              title: 'Very long title that should get ellipsis when there is no more space',
+              leftItems: [
+                <PanelChrome.LoadingIndicator
+                  loading={loading}
+                  onCancel={() => setLoading(false)}
+                  key="loading-indicator"
+                />,
+              ],
+            },
+            theme
+          )}
+        </VerticalGroup>
+      </HorizontalGroup>
     </div>
   );
 };
-
-StandardPanel.args = {
-  leftItems: ['none'],
-  title: 'Very long title that should get ellipsis when there is no more space',
-};
-
-const LoadingItem = () => {
-  const [loading, setLoading] = useState(true);
-  useInterval(() => setLoading(true), 5000);
-
-  return <LoadingIndicator loading={loading} onCancel={() => setLoading(false)} />;
-};
-
-const mapToItems = (selected: string[]): React.ReactNode[] => {
-  return selected.map((s) => {
-    switch (s) {
-      case 'loading':
-        return <LoadingItem key="loading" />;
-      case 'error':
-        return <ErrorIndicator error="Could not find datasource with id: 12345" onClick={() => {}} />;
-      default:
-        return null;
-    }
-  });
-};