import { ArgTypes, Title, Subtitle } from '@storybook/addon-docs';

<div className="bq-doc__wrapper" data-theme="light">
  <div className="bq-doc__container">
    <Title>Progress</Title>

    The progress bar is a user interface component that visually represents the completion status of a task or process. It typically consists of a horizontal bar 
    that fills up gradually to indicate the progress of the task, often accompanied by textual or graphical indicators such as percentages or toolip labels.

    <Subtitle>Usage</Subtitle>

    - Use the progress bar to visually track the completion status of a task, operation, or process.
    - Use the progress bar to provide users with feedback on the progress of actions, such as file uploads, form submissions, or loading processes.
    - Use the progress bar to improve the user experience by offering a clear indication of the current status and remaining duration of ongoing operations.
    - Use the progress bar to manage user expectations by displaying a progress bar actions that require some time to complete, reducing uncertainty and frustration.

    <Subtitle>👍 When to use</Subtitle>

    - When to employ communication for tasks or operations that take a significant amount of time to complete, ensuring users stay informed about the ongoing process.
    - When to implement communication for asynchronous actions, like data fetching, API calls, or background processes, to signify activity and provide users with confidence in system responsiveness.
    - When to offer communication on user interactions, such as button clicks, form submissions, or page transitions, by employing methods like progress bars to indicate ongoing actions.
    - When to apply communication for dynamic updates, where progress is updated in real-time based on changing conditions or user inputs, enhancing clarity and responsiveness.

    <Title>Properties</Title>

    <ArgTypes of="bq-progress" />
  </div>
</div>
