feat: enhance ProgressBar stories with decorators for better visualiz…

…ation
Amsterdam-Music-Lab · Nov 14, 2024 · 1c61b3e · 1c61b3e
1 parent c14e50e
commit 1c61b3e
Showing 1 changed file with 18 additions and 1 deletion.
diff --git 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) => (