Chore: Storybook improvements (#16239)

- Fixed BarGauge story throwing an error
- Added helpers for aligning stories

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

@@ -2,7 +2,7 @@ import { storiesOf } from '@storybook/react';
 import { number, text, boolean } from '@storybook/addon-knobs';
 import { BarGauge } from './BarGauge';
 import { VizOrientation } from '../../types';
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+import { withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
 
 const getKnobs = () => {
@@ -23,7 +23,7 @@ const getKnobs = () => {
 
 const BarGaugeStories = storiesOf('UI/BarGauge/BarGauge', module);
 
-BarGaugeStories.addDecorator(withCenteredStory);
+BarGaugeStories.addDecorator(withHorizontallyCenteredStory);
 
 BarGaugeStories.add('Simple with basic thresholds', () => {
   const {
@@ -41,9 +41,9 @@ BarGaugeStories.add('Simple with basic thresholds', () => {
   } = getKnobs();
 
   return renderComponentWithTheme(BarGauge, {
-    width: 700,
-    height: 700,
-    value: value,
+    width: 300,
+    height: 300,
+    value: { text: value.toString(), numeric: value },
     minValue: minValue,
     maxValue: maxValue,
     unit: unit,

packages/grafana-ui/src/utils/storybook/withCenteredStory.tsx

 import React from 'react';
 import { RenderFunction } from '@storybook/react';
 
-const CenteredStory: React.FunctionComponent<{}> = ({ children }) => {
+interface CenteredStoryProps {
+  children: React.ReactNode;
+  horizontal?: boolean;
+  vertical?: boolean;
+}
+const CenteredStory: React.FunctionComponent<CenteredStoryProps> = ({ horizontal, vertical, children }) => {
   return (
     <div
       style={{
-        height: '100vh  ',
+        minHeight: '100%',
+        width: '100%',
         display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
+        alignItems: vertical ? 'center' : 'flex-start',
+        justifyContent: horizontal ? 'center' : 'flex-start',
       }}
     >
       {children}
@@ -16,4 +22,13 @@ const CenteredStory: React.FunctionComponent<{}> = ({ children }) => {
   );
 };
 
-export const withCenteredStory = (story: RenderFunction) => <CenteredStory>{story()}</CenteredStory>;
+export const withNotCenteredStory = (story: RenderFunction) => <CenteredStory>{story()}</CenteredStory>;
+export const withCenteredStory = (story: RenderFunction) => (
+  <CenteredStory horizontal vertical>
+    {story()}
+  </CenteredStory>
+);
+export const withHorizontallyCenteredStory = (story: RenderFunction) => (
+  <CenteredStory horizontal>{story()}</CenteredStory>
+);
+export const withVerticallyCenteredStory = (story: RenderFunction) => <CenteredStory vertical>{story()}</CenteredStory>;

packages/grafana-ui/src/utils/storybook/withPaddedStory.tsx

@@ -5,7 +5,10 @@ const PaddedStory: React.FunctionComponent<{}> = ({ children }) => {
   return (
     <div
       style={{
+        minHeight: '100vh',
+        width: '100%',
         padding: '20px',
+        display: 'flex',
       }}
     >
       {children}