Grafana-UI: Add Collapse docs (#27291)

* Grafana-UI: Add Collapse docs

* Grafana-UI: Add comments

* Clarify description

packages/grafana-ui/src/components/Collapse/Collapse.mdx

+import { Meta, Preview, Props } from '@storybook/addon-docs/blocks';
+import {Collapse} from "./Collapse";
+
+# Collapse
+
+A content area, which can be horizontally collapsed and expanded. Can be used to hide extra information on the page.
+
+## Usage
+
+```jsx
+const [isOpen, setIsOpen] = useState(false);
+
+<Collapse label="Collapse panel" isOpen={isOpen} onToggle={() => setIsOpen(!isOpen)}>
+  <p>Panel data</p>
+</Collapse>
+```
+
+<Props of={Collapse}/>

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

+import React from 'react';
+import { Collapse, ControlledCollapse } from './Collapse';
+import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
+import { UseState } from '../../utils/storybook/UseState';
+import mdx from './Collapse.mdx';
+
+export default {
+  title: 'Layout/Collapse',
+  component: Collapse,
+  decorators: [withCenteredStory, withHorizontallyCenteredStory],
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+export const basic = () => {
+  return (
+    <UseState initialState={{ isOpen: false }}>
+      {(state, updateValue) => {
+        return (
+          <Collapse
+            collapsible
+            label="Collapse panel"
+            isOpen={state.isOpen}
+            onToggle={() => updateValue({ isOpen: !state.isOpen })}
+          >
+            <p>Panel data</p>
+          </Collapse>
+        );
+      }}
+    </UseState>
+  );
+};
+
+export const controlled = () => {
+  return (
+    <ControlledCollapse label="Collapse panel">
+      <p>Panel data</p>
+    </ControlledCollapse>
+  );
+};

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

@@ -82,11 +82,16 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
   `,
 }));
 
-interface Props {
+export interface Props {
+  /** Expand or collapse te content */
   isOpen?: boolean;
+  /** Text for the Collapse header */
   label: string;
+  /** Indicates loading state of the content */
   loading?: boolean;
+  /** Toggle collapsed header icon */
   collapsible?: boolean;
+  /** Callback for the toggle functionality */
   onToggle?: (isOpen: boolean) => void;
 }