Storybook: Add controls to `CollapsableSection` story (#54943)

packages/grafana-ui/src/components/Collapse/CollapsableSection.story.tsx

@@ -1,24 +1,50 @@
-import { ComponentMeta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { useArgs } from '@storybook/client-api';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
 
-import { CollapsableSection } from './CollapsableSection';
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+
+import { CollapsableSection, Props } from './CollapsableSection';
 import mdx from './CollapsableSection.mdx';
 
 const meta: ComponentMeta<typeof CollapsableSection> = {
   title: 'Layout/CollapsableSection',
   component: CollapsableSection,
+  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,
     },
+    controls: {
+      exclude: ['className', 'contentClassName', 'onToggle', 'labelId', 'isOpen'],
+    },
+  },
+  args: {
+    isOpen: false,
+    loading: false,
+    label: 'Collapsable section title',
+    children: 'Collapsed content data',
+  },
+  argTypes: {
+    label: { control: 'text' },
   },
 };
 
-export const simple = () => {
+export const Basic: ComponentStory<typeof CollapsableSection> = ({ children, ...args }: Props) => {
+  const [, updateArgs] = useArgs();
+
+  const onToggle = (isOpen: boolean) => {
+    action('onToggle fired')({ isOpen });
+    updateArgs({ isOpen });
+  };
+
   return (
-    <CollapsableSection label="Collapsable section" isOpen>
+    <div>
-      <div>{"Here's some content"}</div>
+      <CollapsableSection {...args} onToggle={onToggle}>
-    </CollapsableSection>
+        <>{children}</>
+      </CollapsableSection>
+    </div>
   );
 };