docs: move accordion stories to the accordion folder

Author: Nikolai Lopin

src/components/Accordion/Accordion.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React, { PropsWithChildren } from 'react';
 import styled from 'styled-components';
 
 import { SemanticColors } from '../../essentials';
@@ -24,7 +24,7 @@ const RenderedSection = styled(Box)`
     }
 `;
 
-const Accordion = ({
+const Accordion: React.FC<PropsWithChildren<AccordionProps>> = ({
     heading,
     description,
     info,
@@ -34,7 +34,7 @@ const Accordion = ({
     children,
     onExpand = () => undefined,
     onCollapse = () => undefined
-}: AccordionProps): ReactElement => (
+}) => (
     <RenderedSection role="group">
         <HorizontalDividerTop />
         {variant === 'compact' ? (

src/components/Accordion/docs/Accordion.stories.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { StoryObj, Meta } from '@storybook/react';
+import { Accordion } from '../Accordion';
+
+const meta: Meta<typeof Accordion> = {
+    title: 'Components/Accordion',
+    component: Accordion,
+    args: {
+        heading: 'Driver Comments',
+        children: 'This is a very long text we need to hide',
+        description: 'Comments about the driver left by passengers'
+    },
+    argTypes: {
+        children: {
+            description: 'Accordion content'
+        },
+        variant: {
+            options: ['default', 'compact'],
+            control: { type: 'radio' }
+        }
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Accordion>;
+
+export const Default: Story = {
+    args: {
+        info: '99+ comments',
+        buttonLabel: 'Expand/Collapse'
+    }
+};
+
+export const Compact: Story = {
+    args: {
+        variant: 'compact'
+    }
+};

src/components/Accordion/docs/Accordion.storybook.mdx

@@ -0,0 +1,17 @@
+import { Meta, ArgsTable, Primary, Stories } from '@storybook/blocks';
+import * as AccordionStories from './Accordion.stories';
+import { Accordion } from '../Accordion';
+
+<Meta of={AccordionStories} />
+
+# Accordion
+
+Accordion component is used to display large amount of content in a compress and progressive way.
+
+<Primary />
+
+## Properties
+
+<ArgsTable story="Default" />
+
+<Stories includePrimary={false} />

src/components/Accordion/types.ts

@@ -1,13 +1,36 @@
-import { ReactNode } from 'react';
-
 export interface AccordionProps {
+    /**
+     * Heading of the Accordion section
+     */
     heading?: string;
+    /**
+     * Description of the section
+     */
     description?: string;
+    /**
+     * Extra text below description
+     */
     info?: string;
+    /**
+     * Text on the button
+     */
     buttonLabel?: string;
+    /**
+     * UI style
+     * @default default
+     */
     variant?: 'compact' | 'default';
+    /**
+     * Render accordion initially opened
+     * @default false
+     */
     defaultExpanded?: boolean;
-    children: ReactNode;
+    /**
+     * Callback, runs after the accordion is opened
+     */
     onExpand?: () => void;
+    /**
+     * Callback, runs after the accordion is closed
+     */
     onCollapse?: () => void;
 }