Update proportion bar component

tests/components/ProportionBar.test.tsx

@@ -2,21 +2,21 @@ import React from "react";
 import { describe, it, expect } from "vitest";
 import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom/vitest";
-import Progress from "../../app/components/progress/Progress";
+import ProportionBar from "../../app/components/progress/ProportionBar";
 import {
   componentTestSuite,
   ComponentTestSuiteConfig,
 } from "../utils/componentTestSuite";
 
-type ProgressProps = React.ComponentProps<typeof Progress>;
+type ProportionBarProps = React.ComponentProps<typeof ProportionBar>;
 
-const baseProps: ProgressProps = {
+const baseProps: ProportionBarProps = {
   progress: "2-1",
 };
 
-const config: ComponentTestSuiteConfig<ProgressProps> = {
-  component: Progress,
-  name: "Progress",
+const config: ComponentTestSuiteConfig<ProportionBarProps> = {
+  component: ProportionBar,
+  name: "ProportionBar",
   props: baseProps,
   requiredProps: [],
   optionalProps: {
@@ -27,17 +27,17 @@ const config: ComponentTestSuiteConfig<ProgressProps> = {
   testCases: {
     renders: true,
     accessibility: true,
-    keyboardNavigation: false, // Progress is not keyboard navigable
-    disabledState: false, // Progress doesn't have disabled state
+    keyboardNavigation: false, // ProportionBar is not keyboard navigable
+    disabledState: false, // ProportionBar doesn't have disabled state
     errorState: false,
   },
 };
 
-componentTestSuite<ProgressProps>(config);
+componentTestSuite<ProportionBarProps>(config);
 
-describe("Progress (behavioral tests)", () => {
-  it("renders progress bar with correct progress value", () => {
-    render(<Progress progress="2-1" />);
+describe("ProportionBar (behavioral tests)", () => {
+  it("renders proportion bar with correct progress value", () => {
+    render(<ProportionBar progress="2-1" />);
     const progressbar = screen.getByRole("progressbar");
     // 2-1: First section full (1) + second section 1/3 filled = 1 + 1/3 ≈ 1.333
     expect(progressbar).toHaveAttribute("aria-valuenow", "1.3333333333333333");
@@ -46,18 +46,18 @@ describe("Progress (behavioral tests)", () => {
   });
 
   it("applies custom className", () => {
-    const { container } = render(<Progress className="custom-class" />);
+    const { container } = render(<ProportionBar className="custom-class" />);
     expect(container.firstChild).toHaveClass("custom-class");
   });
 
   it("defaults to progress 3-2 when progress is not specified", () => {
-    render(<Progress />);
+    render(<ProportionBar />);
     const progressbar = screen.getByRole("progressbar");
     // 3-2: First two sections full (2) + third section 2/3 filled = 2 + 2/3 ≈ 2.667
     expect(progressbar).toHaveAttribute("aria-valuenow", "2.6666666666666665");
   });
 
-  it("handles all progress states correctly", () => {
+  it("handles all proportion states correctly", () => {
     const testCases = [
       { progress: "1-0" as const, expected: 1 / 6 }, // First section 1/6 filled
       { progress: "1-5" as const, expected: 1 }, // First section 6/6 filled (fully filled)
@@ -68,7 +68,7 @@ describe("Progress (behavioral tests)", () => {
     ];
 
     testCases.forEach(({ progress, expected }) => {
-      const { unmount } = render(<Progress progress={progress} />);
+      const { unmount } = render(<ProportionBar progress={progress} />);
       const progressbar = screen.getByRole("progressbar");
       expect(progressbar).toHaveAttribute("aria-valuenow", String(expected));
       unmount();

tests/components/Stepper.test.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { describe, it, expect } from "vitest";
 import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom/vitest";
-import Stepper from "../../app/components/progress/Progress/Stepper";
+import Stepper from "../../app/components/progress/Stepper";
 import {
   componentTestSuite,
   ComponentTestSuiteConfig,