added accordion documentation

packages/components/src/components/accordion/Usage.mdx

@@ -0,0 +1,57 @@
+import { Meta  } from '@storybook/blocks';
+import * as AccordionStories from './accordion.stories';
+import AccordionElementsMobile from '../../../public-storybook/images/accordion/accordion-elements-mobile.png';
+import AccordionElements from '../../../public-storybook/images/accordion/accordion-elements.png';
+import AccordionStates from '../../../public-storybook/images/accordion/accordion-states.png';
+
+<Meta of={AccordionStories} />
+
+
+# Accordion
+The accordion component allows users to expand and collapse content within a webpage or application. This component is commonly used for organizing and presenting large amounts of information in a compact and user-friendly manner.
+
+## Usage
+
+### When to use
+- Frequently asked questions, product features, and other types of content where space is at a premium.
+
+### When not to use
+- If the content within the accordion is critical and necessary for users to see. Instead place the content directly on the page.
+- If the content within the accordion is brief.
+- If there is only one section of content that needs to be displayed.
+
+## Anatomy
+<img src={AccordionElements} alt="Accordion Anatomy" />
+
+**Header (1)**\
+Headers are the clickable elements that users can interact with to expand or collapse the accordion panel content. They consists of a Label and a Icon-Button on the left side.
+
+
+**Accordion Label Text (2)**\
+Describes the content within the panel.
+
+
+**Collapsed State (3)**\
+A chevron-down icon indicates that the panel is collapsed.
+
+
+**Expanded State (4)**\
+A chevron-up icon indicates that the panel is collapsed.
+
+
+**Panel (5)**\
+Panels are the content that appears when the user clicks on a header. They can contain text, images, or other types of content. Panels are hidden by default, and they only become visible when the user clicks on the corresponding header.
+
+
+**Container (6)**\
+The container is the outermost element that contains all the accordion components. The container's role is to provide a visual boundary for the accordion and to group all the headers and panels together.
+
+## Mobile
+<img src={AccordionElementsMobile} alt="Accordion Mobile" />
+
+## States
+<img src={AccordionStates} alt="Accordion States" />
+
+***
+Check out the Figma component: **[Accordion](https://www.figma.com/file/zPvPwPgb4EsYFXKC2nhzSG/Infineon-DDS-%7C-Main?type=design&node-id=19400-13883&mode=design&t=prLFLH9aC0Nm9m70-4)**.
+***