Merge pull request #405 from Infineon/225-documentation-progress-bar

Documentation: progress bar

packages/components/src/components/progress-bar/Usage.mdx

@@ -0,0 +1,58 @@
+import { Meta  } from '@storybook/blocks';
+import * as ProgressBarStories from './progress-bar.stories';
+import ProgressBarSize4px from '../../../public-storybook/images/progress-bar/progressbar-4px.png';
+import ProgressBarSize20px from '../../../public-storybook/images/progress-bar/progressbar-20px.png';
+import ProgressBarAnatomy from '../../../public-storybook/images/progress-bar/progressbar-anatomy.png';
+
+<Meta of={ProgressBarStories} />
+
+
+# Progress Bar
+The Progress bar is a control element that visually represents the progress of a job or task. It provides feedback to users about the completion status of a process, such as installation or loading.
+
+## Usage
+
+### When to use
+- When you need to visually represent the progress or completion status of a task or process.
+- To show continuous progress, where the progress bar moves continuously until the task is completed.
+- When you want to provide users with additional numerical information about the progress.
+
+### When not to use
+- When there is no relevant task or process that needs to be visually represented to the user.
+- If the progress is not measurable or if the progress does not have a clear endpoint.
+- If the progress you are trying to convey is better represented through alternative means, such as a spinner or alert messages
+
+## Anatomy
+<img src={ProgressBarAnatomy} alt="Progress Bar Anatomy" />
+
+
+**Fill (1)**\
+Shows the current progress of the bar.
+
+
+**Value (2)**\
+Can be displayed to give additional %-information.
+
+
+**Track (3)**\
+The horizontal bar that represents the entire progress range.
+
+
+## Size
+There are two different sizes of the progress bar available: 4px and 20px.
+
+### 20px
+This is the default size for the progress bar, suitable for most use cases where a normal visual presence is desired.
+<img src={ProgressBarSize20px} alt="Progress Bar Size 20px" />
+
+### 4px
+This size is ideal for situations where space is limited or a more compact representation of the progress bar is needed.
+<img src={ProgressBarSize4px} alt="Progress Bar Size 4px" />
+
+## Progress behavior
+Implement a technical solution so the progress bar always starts at **2% of its maximum progress (instead of 0%)**.  Avoid starting at 0% as it can be frustrating for the user if progress really takes a few seconds to start.
+
+
+***
+Check out the Figma component: **[Progress Bar](https://www.figma.com/file/zPvPwPgb4EsYFXKC2nhzSG/Infineon-DDS-%7C-Main?type=design&node-id=37224-10014&mode=design&t=15iRXx0cf6GC1SMq-4)**
+***