Merge pull request #435 from Infineon/434-documentation-status

Documentation: status

packages/components/src/components/status/Usage.mdx

@@ -0,0 +1,45 @@
+import { Meta  } from '@storybook/blocks';
+import * as StatusStories from './status.stories';
+import StatusVariantOutline from '../../../public-storybook/images/status/status-variant-outline.png';
+import StatusVariantSimple from '../../../public-storybook/images/status/status-variant-simple.png';
+import StatusUsageInfo from '../../../public-storybook/images/status/status-usage-info.png';
+import StatusUsageTable from '../../../public-storybook/images/status/status-usage-table.png';
+
+
+<Meta of={StatusStories} />
+
+# Status
+The status component serves as a visual indicator to convey additional information about an element on the interface. It is often used to highlight the status of processes to enhance the user's understanding of the content.
+
+## Usage
+
+### When to use
+- If you want to visually highlight past, current or upcoming events.
+- If you want to provide supplementary information to a product inside a table.
+
+### When not to use
+- Avoid using status components for elements that do not carry significant importance or meaning.
+- Do not use status components solely for decorative purposes, especially if they do not serve a functional or informative role.
+- Avoid using status components to display redundant or duplicative information.
+- Avoid to use long label names. Be precise and concise.
+
+## Variants
+
+### With Outline
+This variant offers the strongest contrast when it comes to displaying very complex information structures at a glance.
+<img src={StatusVariantOutline} alt="Status Variant Outline" />
+
+#### Example
+<img src={StatusUsageTable} alt="Status Usage Table" />
+
+### Simple
+This variant can be placed singly next to the corresponding element.
+<img src={StatusVariantSimple} alt="Status Variant Simple" />
+
+#### Example
+<img src={StatusUsageInfo} alt="Status Usage Simple" />
+
+
+***
+Check out the Figma component: **[Status](https://www.figma.com/file/zPvPwPgb4EsYFXKC2nhzSG/Infineon-DDS-%7C-Main?type=design&node-id=22477-15125&mode=design&t=N3jewrmlr18EfHS8-4)**
+***