Merge pull request #321 from Infineon/320-documentation-tabs

added doc

packages/components/src/components/tabs/Usage.mdx

@@ -0,0 +1,77 @@
+
+import { Meta } from '@storybook/blocks';
+
+import * as TabsStories from './tabs.stories';
+import TabsAnatomy from '../../../public-storybook/images/tabs/tabs-anatomy.png';
+import TabsDesktopHorizontal from '../../../public-storybook/images/tabs/tabs-desktop-horizontal.png';
+import TabsDesktopVertical from '../../../public-storybook/images/tabs/tabs-desktop-vertical.png';
+import TabsMobileHorizontal from '../../../public-storybook/images/tabs/tabs-mobile-horizontal.png';
+import TabsStates from '../../../public-storybook/images/tabs/tabs-states.png';
+import TabsSize from '../../../public-storybook/images/tabs/tabs-size.png';
+import TabsMouseInteraction from '../../../public-storybook/images/tabs/tabs-mouse-interaction.png';
+
+
+<Meta of={TabsStories} /> 
+
+# Tabs
+The tab component guides the user step-by-step through the user interface and allows them to access more specific content without overwhelming them with all the available options at once.
+
+## Usage
+
+### When to use
+- If you have a significant amount of content organized into distinct sections or categories and you want to provide users with a structured way to navigate through them.
+
+### When not to use
+- If your interface has only a small amount of content that doesn't require a hierarchical navigation structure.
+- If the navigation hierarchy is shallow or flat, and the content sections or categories are easily scannable or accessible without the need for tabs.
+- If the available screen space is extremely limited and cannot accommodate the content navigation component without compromising the overall user experience.
+
+## Anatomy
+<img src={TabsAnatomy} alt="Tabs Anatomy" />
+
+**Selected Tab Item (1)**\
+As default the first tab item should be selected.
+
+
+**Tab Item (2)**\
+The unselected state of a tab navigation.
+
+
+**Tab Container (3)**\
+The parent element that holds all the individual tab items and the content area associated with each tab.
+
+
+**Content Area(4)**\
+The content area is the part where the actual content related to the active tab is displayed. When a user clicks on a tab, the content area updates to show the corresponding content associated with that tab.
+
+## Variants
+
+### Horizontal
+This variant is intended for use in layouts with a horizontal orientation. Each tab represents a specific section or content, and users can click on them to switch between the different sections seamlessly.
+<img src={TabsDesktopHorizontal} alt="Tabs Desktop Horizontal" />
+
+### Vertical
+This variant is designed for use in layouts with a vertical orientation. In this variant, the tabs are stacked vertically, typically on the left of the content area. Users can click on each tab to navigate to the respective content or section.
+<img src={TabsDesktopVertical} alt="Tabs Desktop Vertical" />
+
+#### Mobile
+<img src={TabsMobileHorizontal} alt="Tabs Mobile Use" width="50%" />
+- For mobile devices, it is recommended to use the horizontal tab variant exclusively.
+- The small size should be used.
+- If the tabs become too long for mobile screens, they can be wiped.
+
+## Size
+Only one size is available for the vertical tab variant, which should primarily be used for desktop and not for mobile. The vertical tab variant can be used for all viewports.
+<img src={TabsSize} alt="Tabs Size" />
+
+## Mouse Interaction
+The whole tab item area should be clickable.
+<img src={TabsMouseInteraction} alt="Tabs Mouse Interaction" />
+
+## State
+<img src={TabsStates} alt="Tabs States" />
+
+
+***
+Check out the Figma component: **[Tabs](https://www.figma.com/file/VxG1MQaNdzsjiW6P6WmVt9/Documentation-assets?type=design&node-id=16847-13055&mode=design&t=SPEdFh90JrvCz8JT-4)**
+***