Merge pull request #348 from Infineon/346-documentation-dropdown-menu

added dropdown-menu doc and images

packages/components/src/components/dropdown/Usage.mdx

@@ -0,0 +1,82 @@
+import { Meta  } from '@storybook/blocks';
+import * as DropdownMenuStories from './dropdown.stories';
+import DropdownMenuVariants from '../../../public-storybook/images/dropdown/dropdown-menu-variants.png';
+import DropdownMenuTrigger from '../../../public-storybook/images/dropdown/dropdown-menu-trigger.png';
+import DropdownMenuStates from '../../../public-storybook/images/dropdown/dropdown-menu-states.png';
+import DropdownMenuSizes from '../../../public-storybook/images/dropdown/dropdown-menu-sizes.png';
+import DropdownMenuScrollBehavior from '../../../public-storybook/images/dropdown/dropdown-menu-scroll-behavior.png';
+import DropdownMenuFilterSearch from '../../../public-storybook/images/dropdown/dropdown-menu-filter-search.png';
+import DropdownMenuFilterSearchFlow from '../../../public-storybook/images/dropdown/dropdown-menu-filter-search-flow.png';
+
+
+<Meta of={DropdownMenuStories} />
+
+# Dropdown Menu
+The dropdown menu drops-down when a trigger is clicked. There are different dropdown menu items that are used dependent on the function.
+
+## Usage
+
+### When to use
+- When you want to avoid cluttering the screen with numerous options.
+- When you want to present a list of options which can be opened with any trigger.
+
+### When not to use
+- When you want to present a list of options which can be opened with a select field. Use a select instead.
+- When you want to provide additional menu links in the navbar. Use a submenu instead.
+
+## Variants
+<img src={DropdownMenuVariants} alt="Dropdown Menu Variants" />
+
+**Default**\
+Our default menu items which can be used or combined with different properties.
+
+
+**Icons**\
+It is possible to use icons on the left side of the menu item.
+
+
+**Divider**\
+Use a divider to provide a clear distinction between different categories of options.
+
+
+**Header**\
+It is possible to use a descriptive heading that summarizes the actions that can be made in the drop-down menu.
+
+
+### Filter search
+The Filter Search feature offers the possibility to filter inside a dropdown menu. This is very helpful if there is a lot of data which can be filtered in order to e.g. filter the output of a data table. The Filter Search feature can be applied to any other trigger like a simple icon or a link.
+<img src={DropdownMenuFilterSearch} alt="Dropdown Menu Filter Search" />
+
+- The Filter Search variant is always located at the top of a drop-down menu.  
+- Due to the scrolling behavior, the Filter Search is fixed at the top.  
+
+##### Autocomplete
+The system suggests possible search queries or completions as users type in their search terms.
+<img src={DropdownMenuFilterSearchFlow} alt="Dropdown Menu Filter Search Flow" />
+
+## Trigger
+A dropdown menu is placed directly under it’s triggers bounding box. A trigger can be for example a button, a text link or an icon button.
+<img src={DropdownMenuTrigger} alt="Dropdown Menu Trigger" />
+
+## Scrolling behavior
+To enhance user experience, it is advisable to display a portion equal to 50% of the container height for the last item, even when scroll bars are not enabled. This serves as a visual cue that there is additional content within the menu. Starting the scroll at the sixth option in the menu is a suggested approach. In some cases the optimal starting point may differ depending on your specific use case.
+<img src={DropdownMenuScrollBehavior} alt="Dropdown Menu Scroll Behavior" width="50%" />
+
+**Scroll bar (1)**\
+Can be optionally displayed if there are lots of menu items in the dropdown. The bar is browser native.
+
+
+**Clipped menu(2)**\
+Indicates that there is more to scroll.
+
+
+## Size
+There are two dropdown menu sizes: 40px (Large) and 36px (Small). 
+<img src={DropdownMenuSizes} alt="Dropdown Menu Sizes" />
+
+## States
+<img src={DropdownMenuStates} alt="Dropdown Menu States" />
+
+***
+Check out the Figma component: **[Dropdown Menu](https://www.figma.com/file/zPvPwPgb4EsYFXKC2nhzSG/Infineon-DDS-%7C-Main?type=design&node-id=2602-6446&mode=design)**
+***