init

frontend/app/element/progressbar.scss

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

frontend/app/element/progressbar.stories.tsx

@@ -0,0 +1,54 @@
+// 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: "Components/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" }}>
+            <h4>Empty Progress Bar</h4>
+            <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" }}>
+            <h4>Filled Progress Bar</h4>
+            <ProgressBar {...args} />
+        </div>
+    ),
+    args: {
+        progress: 90, // Filled to 90%
+        label: "Filled progress bar",
+    },
+};

frontend/app/element/progressbar.tsx

@@ -0,0 +1,31 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import React from "react";
+
+import "./progressbar.scss";
+
+type ProgressBarProps = {
+    progress: number;
+    label?: string;
+};
+
+const ProgressBar: React.FC<ProgressBarProps> = ({ progress, label = "Progress" }) => {
+    const progressWidth = Math.min(Math.max(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="progress-bar-fill" style={{ width: `${progressWidth}%` }}></div>
+            <span className="progress-bar-label">{progressWidth}%</span>
+        </div>
+    );
+};
+
+export { ProgressBar };