Merge pull request #381 from Infineon/378-documentation-number-indicator

Documentation: number indicator

packages/components/src/components/number-indicator/Usage.mdx

@@ -0,0 +1,32 @@
+
+import { Meta } from '@storybook/blocks';
+import * as NumberIndicatorStories from './number-indicator.stories';
+import NumberIndicatorStyle from '../../../public-storybook/images/number-indicator/number-indicator-style.png';
+import NumberIndicatorUse from '../../../public-storybook/images/number-indicator/number-indicator-use.png';
+
+
+<Meta of={NumberIndicatorStories} />
+
+# Number Indicator
+The number indicator component refers to some of our UI elements that visually represents or displays numeric information to users.
+
+## When to use
+- If you want to display the count of items in a list or container, like the number of items in a shopping cart or the unread emails in an inbox.
+- If you want to inform the user about new notification e.g. messages.
+- If the user has selected many options and these can no longer be displayed due to lack of space.
+
+## When not to use
+- If you want to use it as different style for a numbered list. Use an icon or native numbered list style instead.
+
+## Variants
+The number indicator component can be used in different use cases. As a counter in a shopping cart, or as indicator for unseen items. The "+" affix communicates to users that there are additional selected options beyond what's currently visible.
+<img src={NumberIndicatorUse} alt="Number Indicator Variants" />
+
+## Style
+The number indicator is available in two different styles: default and inverted.
+<img src={NumberIndicatorStyle} alt="Number Indicator Style" />
+
+
+***
+Check out the Figma component: **[Number Indicator](https://www.figma.com/file/zPvPwPgb4EsYFXKC2nhzSG/Infineon-DDS-%7C-Main?type=design&node-id=14392-7580&mode=design&t=pKWbfynUyxqZh47W-4)**
+***