{% stories ProgressBar with {
  "title": "Atoms/Progress Bar",
  "parameters": {
    "componentSubtitle": "Bootstrap Progress bar Component",
    "docs": {
      "description": {
        "component": "Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels."
      },
      "story": {
        "inline": true
      }
    }
  },
  "argTypes": {
    "color": {
      "name": "Progress Bar Color",
      "description": "Use background utility classes to change the appearance of individual progress bars.",
      "defaultValue": "bg-secondary",
      "control": "select",
      "options": {
        "'- none -'": "",
        "Primary": "bg-primary",
        "Secondary": "bg-secondary",
        "Success": "bg-success",
        "Info": "bg-info",
        "Warning": "bg-warning",
        "Danger": "bg-danger",
        "Light": "bg-light",
        "Dark": "bg-dark",
        "Black": "bg-black",
        "White": "bg-white",
        "Body": "bg-body",
        "Transparent": "bg-transparent",
        "'Opacity 10'": "bg-opacity-10",
        "'Opacity 25'": "bg-opacity-25",
        "'Opacity 50'": "bg-opacity-50",
        "'Opacity 75'": "bg-opacity-75",
        "'Opacity 100'": "bg-opacity-100",
        "Gradient": "bg-gradient"
      }
    },
    "striped": {
      "name": "Striped",
      "description": "Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gradient over the background color.",
      "defaultValue": true,
      "control": "boolean"
    },
    "animated": {
      "name": "Animated",
      "description": "The striped gradient can also be animated. Add `.progress-bar-animated` to `.progress-bar` to animate the stripes right to left via CSS3 animations.",
      "defaultValue": true,
      "control": "boolean"
    },
    "label": {
      "name": "Label",
      "description": "Add labels to your progress bars by placing text within the `.progress-bar`.",
      "control": "text",
      "defaultValue": ""
    },
    "percent": {
      "name": "Percent",
      "description": "The percentage of the progress between 1 to 100.",
      "control": "number",
      "min": 0,
      "max": 100,
      "step": 1,
      "defaultValue": 0
    },
    "message": {
      "name": "Message",
      "description": "A string containing information to be displayed.",
      "control": "text",
      "defaultValue": ""
    },
    "progress_bar_utility_classes": {
      "name": "Utility Classes",
      "description": "An array of utility classes that can be used to add extra Bootstrap utility classes or custom classes to this component.",
      "control": "object",
      "defaultValue": []
    },
    "wrapper_attributes": {
      "name": "Wrapper Attributes",
      "description": "HTML attributes for the Progress Bar wrapper element.",
      "control": "object",
      "defaultValue": {}
    },
    "indicator_attributes": {
      "name": "Indicator Attributes",
      "description": "HTML attributes for the Progress Bar indicator element.",
      "control": "object",
      "defaultValue": {}
    },
    "label_attributes": {
      "name": "Label Attributes",
      "description": "HTML attributes for the  element.",
      "control": "object",
      "defaultValue": {}
    },
    "message_attributes": {
      "name": "Message Attributes",
      "description": "HTML attributes for the Progress Bar message element.",
      "control": "object",
      "defaultValue": {}
    }
  }
} %}

{% story Primary with {
  "name": "Primary",
  "args": {
    "color": "bg-primary",
    "striped": false,
    "animated": false,
    "label": "",
    "percent": 80,
    "message": "",
    "progress_bar_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:progress-bar') }}
{% endstory %}

{% story PrimaryStriped with {
  "name": "Primary striped",
  "args": {
    "color": "bg-primary",
    "striped": true,
    "animated": false,
    "label": "",
    "percent": 80,
    "message": "",
    "progress_bar_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:progress-bar') }}
{% endstory %}

{% story PrimaryAnimated with {
  "name": "Primary animated",
  "args": {
    "color": "bg-primary",
    "striped": true,
    "animated": true,
    "label": "",
    "percent": 80,
    "message": "",
    "progress_bar_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:progress-bar') }}
{% endstory %}

{% story Secondary with {
  "name": "Secondary",
  "args": {
    "color": "bg-secondary",
    "striped": false,
    "animated": false,
    "label": "",
    "percent": 80,
    "message": "",
    "progress_bar_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:progress-bar') }}
{% endstory %}

{% story SecondaryStriped with {
  "name": "Secondary striped",
  "args": {
    "color": "bg-secondary",
    "striped": true,
    "animated": false,
    "label": "",
    "percent": 80,
    "message": "",
    "progress_bar_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:progress-bar') }}
{% endstory %}

{% story SecondaryAnimated with {
  "name": "Secondary animated",
  "args": {
    "color": "bg-secondary",
    "striped": true,
    "animated": true,
    "label": "",
    "percent": 80,
    "message": "",
    "progress_bar_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:progress-bar') }}
{% endstory %}

{% story Success with {
  "name": "Success",
  "args": {
    "color": "bg-success",
    "striped": false,
    "animated": false,
    "label": "",
    "percent": 80,
    "message": "",
    "progress_bar_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:progress-bar') }}
{% endstory %}

{% story SuccessStriped with {
  "name": "Success striped",
  "args": {
    "color": "bg-success",
    "striped": true,
    "animated": false,
    "label": "",
    "percent": 80,
    "message": "",
    "progress_bar_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:progress-bar') }}
{% endstory %}

{% story SuccessAnimated with {
  "name": "Success animated",
  "args": {
    "color": "bg-success",
    "striped": true,
    "animated": true,
    "label": "",
    "percent": 80,
    "message": "",
    "progress_bar_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:progress-bar') }}
{% endstory %}

{% story Info with {
  "name": "Info",
  "args": {
    "color": "bg-info",
    "striped": false,
    "animated": false,
    "label": "",
    "percent": 80,
    "message": "",
    "progress_bar_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:progress-bar') }}
{% endstory %}

{% story InfoStriped with {
  "name": "Info striped",
  "args": {
    "color": "bg-info",
    "striped": true,
    "animated": false,
    "label": "",
    "percent": 80,
    "message": "",
    "progress_bar_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:progress-bar') }}
{% endstory %}

{% story InfoAnimated with {
  "name": "Info animated",
  "args": {
    "color": "bg-info",
    "striped": true,
    "animated": true,
    "label": "",
    "percent": 80,
    "message": "",
    "progress_bar_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:progress-bar') }}
{% endstory %}

{% story Warning with {
  "name": "Warning",
  "args": {
    "color": "bg-warning",
    "striped": false,
    "animated": false,
    "label": "",
    "percent": 80,
    "message": "",
    "progress_bar_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:progress-bar') }}
{% endstory %}

{% story WarningStriped with {
  "name": "Warning striped",
  "args": {
    "color": "bg-warning",
    "striped": true,
    "animated": false,
    "label": "",
    "percent": 80,
    "message": "",
    "progress_bar_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:progress-bar') }}
{% endstory %}

{% story WarningAnimated with {
  "name": "Warning animated",
  "args": {
    "color": "bg-warning",
    "striped": true,
    "animated": true,
    "label": "",
    "percent": 80,
    "message": "",
    "progress_bar_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:progress-bar') }}
{% endstory %}

{% story Danger with {
  "name": "Danger",
  "args": {
    "color": "bg-danger",
    "striped": false,
    "animated": false,
    "label": "",
    "percent": 80,
    "message": "",
    "progress_bar_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:progress-bar') }}
{% endstory %}

{% story DangerStriped with {
  "name": "Danger striped",
  "args": {
    "color": "bg-danger",
    "striped": true,
    "animated": false,
    "label": "",
    "percent": 80,
    "message": "",
    "progress_bar_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:progress-bar') }}
{% endstory %}

{% story DangerAnimated with {
  "name": "Danger animated",
  "args": {
    "color": "bg-danger",
    "striped": true,
    "animated": true,
    "label": "",
    "percent": 80,
    "message": "",
    "progress_bar_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:progress-bar') }}
{% endstory %}

{% story Light with {
  "name": "Light",
  "args": {
    "color": "bg-light",
    "striped": false,
    "animated": false,
    "label": "",
    "percent": 80,
    "message": "",
    "progress_bar_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:progress-bar') }}
{% endstory %}

{% story LightStriped with {
  "name": "Light striped",
  "args": {
    "color": "bg-light",
    "striped": true,
    "animated": false,
    "label": "",
    "percent": 80,
    "message": "",
    "progress_bar_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:progress-bar') }}
{% endstory %}

{% story LightAnimated with {
  "name": "Light animated",
  "args": {
    "color": "bg-light",
    "striped": true,
    "animated": true,
    "label": "",
    "percent": 80,
    "message": "",
    "progress_bar_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:progress-bar') }}
{% endstory %}

{% story Dark with {
  "name": "Dark",
  "args": {
    "color": "bg-dark",
    "striped": false,
    "animated": false,
    "label": "",
    "percent": 80,
    "message": "",
    "progress_bar_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:progress-bar') }}
{% endstory %}

{% story DarkStriped with {
  "name": "Dark striped",
  "args": {
    "color": "bg-dark",
    "striped": true,
    "animated": false,
    "label": "",
    "percent": 80,
    "message": "",
    "progress_bar_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:progress-bar') }}
{% endstory %}

{% story DarkAnimated with {
  "name": "Dark animated",
  "args": {
    "color": "bg-dark",
    "striped": true,
    "animated": true,
    "label": "",
    "percent": 80,
    "message": "",
    "progress_bar_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:progress-bar') }}
{% endstory %}

{% endstories %}
