From 1c61b3eb9e60776e76769d07d9852d781e214891 Mon Sep 17 00:00:00 2001
From: Drikus Roor <drikusroor@gmail.com>
Date: Thu, 14 Nov 2024 14:30:42 +0100
Subject: [PATCH] feat: enhance ProgressBar stories with decorators for better
 visualization

---
 frontend/src/stories/ProgressBar.stories.tsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/frontend/src/stories/ProgressBar.stories.tsx b/frontend/src/stories/ProgressBar.stories.tsx
index b57d83a4a..7e53b3181 100644
--- a/frontend/src/stories/ProgressBar.stories.tsx
+++ b/frontend/src/stories/ProgressBar.stories.tsx
@@ -14,7 +14,24 @@ export const Default = {
         max: 100,
         showPercentage: false,
         label: "3 / 20",
-        size: "md",
+    },
+    decorators: [
+        (Story) => (
+            <div
+                style={{ width: "100%", height: "100%", backgroundColor: "#666", padding: "1rem" }}
+            >
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+export const WithPercentage = {
+    args: {
+        value: 50,
+        max: 100,
+        showPercentage: true,
+        label: "3 / 20",
     },
     decorators: [
         (Story) => (