ToolbarButton: Add back useful storybook story (#52683)

* ToolbarButton: Add back useful storybook story

* Remove duplicate bits

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

@@ -1,10 +1,12 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
 
+import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { ButtonGroup } from '../Button';
+import { HorizontalGroup, VerticalGroup } from '../Layout/Layout';
 
-import { ToolbarButton } from './ToolbarButton';
+import { ToolbarButton, ToolbarButtonVariant } from './ToolbarButton';
 import mdx from './ToolbarButton.mdx';
 import { ToolbarButtonRow } from './ToolbarButtonRow';
 
@@ -89,18 +91,71 @@ BasicWithIcon.args = {
   iconOnly: true,
 };
 
-export const List: ComponentStory<typeof ToolbarButton> = (args) => {
+export const Examples: ComponentStory<typeof ToolbarButton> = (args) => {
+  const variants: ToolbarButtonVariant[] = ['default', 'active', 'primary', 'destructive'];
+
   return (
-    <ToolbarButtonRow>
-      <ToolbarButton variant={args.variant} iconOnly={false} isOpen={false}>
-        Last 6 hours
-      </ToolbarButton>
-      <ButtonGroup>
-        <ToolbarButton icon="search-minus" variant={args.variant} />
-        <ToolbarButton icon="search-plus" variant={args.variant} />
-      </ButtonGroup>
-      <ToolbarButton icon="sync" isOpen={false} variant={args.variant} />
-    </ToolbarButtonRow>
+    <DashboardStoryCanvas>
+      <VerticalGroup>
+        Button states
+        <ToolbarButtonRow>
+          <ToolbarButton>Just text</ToolbarButton>
+          <ToolbarButton icon="sync" tooltip="Sync" />
+          <ToolbarButton imgSrc="./grafana_icon.svg">With imgSrc</ToolbarButton>
+          <ToolbarButton icon="cloud" isOpen={true}>
+            isOpen
+          </ToolbarButton>
+          <ToolbarButton icon="cloud" isOpen={false}>
+            isOpen = false
+          </ToolbarButton>
+        </ToolbarButtonRow>
+        <br />
+        disabled
+        <ToolbarButtonRow>
+          <ToolbarButton icon="sync" disabled>
+            Disabled
+          </ToolbarButton>
+        </ToolbarButtonRow>
+        <br />
+        Variants
+        <ToolbarButtonRow>
+          {variants.map((variant) => (
+            <ToolbarButton icon="sync" tooltip="Sync" variant={variant} key={variant}>
+              {variant}
+            </ToolbarButton>
+          ))}
+        </ToolbarButtonRow>
+        <br />
+        Wrapped in noSpacing ButtonGroup
+        <ButtonGroup>
+          <ToolbarButton icon="clock-nine" tooltip="Time picker">
+            2020-10-02
+          </ToolbarButton>
+          <ToolbarButton icon="search-minus" />
+        </ButtonGroup>
+        <br />
+        <ButtonGroup>
+          <ToolbarButton icon="sync" />
+          <ToolbarButton isOpen={false} narrow />
+        </ButtonGroup>
+        <br />
+        Inside button group
+        <HorizontalGroup>
+          <ButtonGroup>
+            <ToolbarButton variant="primary" icon="sync">
+              Run query
+            </ToolbarButton>
+            <ToolbarButton isOpen={false} narrow variant="primary" />
+          </ButtonGroup>
+          <ButtonGroup>
+            <ToolbarButton variant="destructive" icon="sync">
+              Run query
+            </ToolbarButton>
+            <ToolbarButton isOpen={false} narrow variant="destructive" />
+          </ButtonGroup>
+        </HorizontalGroup>
+      </VerticalGroup>
+    </DashboardStoryCanvas>
   );
 };