progressbar component (#1556)

Author: adred

frontend/app/element/progressbar.scss

@@ -0,0 +1,39 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+.progress-bar-container {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .outer {
+        border: 1px solid rgb(from var(--main-text-color) r g b / 15%);
+        border-radius: 40px;
+        padding: 4px;
+        background-color: var(--main-bg-color);
+        flex-grow: 1;
+
+        .progress-bar-fill {
+            height: 100%;
+            transition: width 0.3s ease-in-out;
+            background-color: var(--success-color);
+            border-radius: 9px;
+            width: 100%;
+        }
+    }
+
+    .progress-bar-label {
+        width: 40px;
+        flex-shrink: 0;
+        font-size: 0.9rem;
+        color: var(--main-text-color);
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+        text-align: right;
+    }
+}

frontend/app/element/progressbar.stories.tsx

@@ -0,0 +1,52 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { ProgressBar } from "./progressbar";
+
+const meta: Meta<typeof ProgressBar> = {
+    title: "Elements/ProgressBar",
+    component: ProgressBar,
+    args: {
+        progress: 0, // Default value
+        label: "Progress",
+    },
+    argTypes: {
+        progress: {
+            description: "Percentage of progress (0-100)",
+            control: { type: "range", min: 0, max: 100 },
+        },
+        label: {
+            description: "Accessible label for the progress bar",
+            control: "text",
+        },
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ProgressBar>;
+
+export const EmptyProgress: Story = {
+    render: (args) => (
+        <div style={{ padding: "20px", background: "#111", color: "#fff" }}>
+            <ProgressBar {...args} />
+        </div>
+    ),
+    args: {
+        progress: 0, // No progress
+        label: "Empty progress bar",
+    },
+};
+
+export const FilledProgress: Story = {
+    render: (args) => (
+        <div style={{ padding: "20px", background: "#111", color: "#fff" }}>
+            <ProgressBar {...args} />
+        </div>
+    ),
+    args: {
+        progress: 90, // Filled to 90%
+        label: "Filled progress bar",
+    },
+};

frontend/app/element/progressbar.tsx

@@ -0,0 +1,32 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { boundNumber } from "@/util/util";
+import "./progressbar.scss";
+
+type ProgressBarProps = {
+    progress: number;
+    label?: string;
+};
+
+const ProgressBar = ({ progress, label = "Progress" }: ProgressBarProps) => {
+    const progressWidth = boundNumber(progress, 0, 100);
+
+    return (
+        <div
+            className="progress-bar-container"
+            role="progressbar"
+            aria-valuenow={progressWidth}
+            aria-valuemin={0}
+            aria-valuemax={100}
+            aria-label={label}
+        >
+            <div className="outer">
+                <div className="progress-bar-fill" style={{ width: `${progressWidth}%` }}></div>
+            </div>
+            <span className="progress-bar-label">{progressWidth}%</span>
+        </div>
+    );
+};
+
+export { ProgressBar };