fix(ProgressBar): change error prop as status

src/components/molecules/ProgressBar/ProgressBar.scss

@@ -37,16 +37,6 @@
     }
 
     &_size {
-        &_large,
-        &_medium {
-            #{ $this }__status {
-                font-family: var(--guit-sem-font-label-medium-default-semibold-font-family);
-                font-size: var(--guit-sem-font-label-medium-default-semibold-font-size);
-                font-weight: var(--guit-sem-font-label-medium-default-medium-font-weight);
-                line-height: var(--guit-sem-font-label-medium-default-semibold-line-height);
-            }
-        }
-
         &_large {
             #{ $this }__track {
                 height: var(--guit-sem-dimension-height-xsmall);
@@ -66,18 +56,11 @@
                 height: var(--guit-sem-dimension-height-3xsmall);
                 border-radius: var(--guit-ref-radius-3xsmall);
             }
-
-            #{ $this }__status {
-                font-family: var(--guit-sem-font-label-small-default-medium-font-family);
-                font-size: var(--guit-sem-font-label-small-default-medium-font-size);
-                font-weight: var(--guit-sem-font-label-small-default-medium-font-weight);
-                line-height: var(--guit-sem-font-label-small-default-medium-line-height);
-            }
         }
     }
 
-    &_color {
-        &_default {
+    &_status {
+        &_rest {
             #{ $this }__fill,
             #{ $this }__loadingBar {
                 background-color: var(--guit-sem-color-background-brand-2);
@@ -127,7 +110,7 @@
         word-break: break-word;
     }
 
-    &__status {
+    &__statusBar {
         margin-inline-start: auto;
         color: var(--guit-sem-color-foreground-neutral-2);
         flex: 0 0 auto;

src/components/molecules/ProgressBar/ProgressBar.stories.tsx

@@ -17,15 +17,16 @@ const meta: Meta<IProgressBarProps> = {
         percent: args({ control: "number", ...propCategory.content }),
         infoText: args({ control: "text", ...propCategory.content }),
         label: args({ control: "text", ...propCategory.content }),
-        error: args({ control: "boolean", ...propCategory.states })
+        status: args({ control: "select", ...propCategory.states })
     },
     args: {
         uploadingText: "Uploading",
         type: "determinate",
         helperText: "Helper Text",
         percent: 44,
         size: "medium",
-        label: "Label"
+        label: "Label",
+        status: "rest"
     }
 };
 

src/components/molecules/ProgressBar/ProgressBar.test.tsx

@@ -4,6 +4,7 @@ import { mount, ReactWrapper } from "enzyme";
 // Components
 import HelperText from "@components/atoms/HelperText";
 import Label from "@components/atoms/Label";
+import Text from "@components/atoms/Text";
 
 import ProgressBar, { IProgressBarProps } from "./index";
 
@@ -47,21 +48,26 @@ describe("ProgressBar ", () => {
         const uploadingText = "uploadingText";
         const percent = 33;
         const wrapper = setup.setProps({ uploadingText, percent });
-
-        expect(wrapper.find(".progressBar__uploadingText").text()).toStrictEqual(`${uploadingText}`);
+        expect(
+            wrapper
+                .find(Text)
+                .findWhere((item) => item.hasClass("progressBar__uploadingText"))
+                .at(1)
+                .text()
+        ).toStrictEqual(`${uploadingText}`);
     });
 
     it("renders percent prop correctly", () => {
         const percent = 33;
         const wrapper = setup.setProps({ percent });
-
-        expect(wrapper.find(".progressBar__percent").text()).toStrictEqual(`${percent}%`);
+        expect(wrapper.find(Text).text()).toStrictEqual(`${percent}%`);
     });
 
-    it("renders error prop correctly", () => {
-        const wrapper = setup.setProps({ error: true });
+    it.each<IProgressBarProps["status"]>(["rest", "warning", "error"])("should have %s status", (status) => {
+        const wrapper = setup.setProps({ status });
+        const className = status === "warning" ? "rest" : status;
         wrapper.update();
-        expect(wrapper.find(".progressBar").hasClass(`progressBar_color_error`)).toBeTruthy();
+        expect(wrapper.find(".progressBar").hasClass(`progressBar_status_${className}`)).toBeTruthy();
     });
 
     it.each<IProgressBarProps["size"]>(["large", "medium", "small"])("should have %s size", (size) => {

src/components/molecules/ProgressBar/ProgressBar.tsx

@@ -1,9 +1,10 @@
-import React, { FC, useEffect, useMemo, useState } from "react";
+import React, { FC, useMemo } from "react";
 import classNames from "classnames";
 
 // Components
 import HelperText from "@components/atoms/HelperText";
 import Label from "@components/atoms/Label";
+import Text from "@components/atoms/Text";
 
 // Styles
 import "./ProgressBar.scss";
@@ -31,10 +32,10 @@ interface IProgressBarProps {
      */
     type?: "determinate" | "indeterminate";
     /**
-     * Indicates an error state for the progress bar.<br>
-     *  When `true`, the progress bar appears in the error style.
+     *  Determines the `ProgressBar` appearance based on its status.<br>
+     *  Possible values: `rest | warning | error`
      */
-    error?: boolean;
+    status?: "rest" | "warning" | "error";
     /**
      *  Adds supplementary information below the progress bar.
      */
@@ -54,84 +55,89 @@ interface IProgressBarProps {
     className?: string;
 }
 
-const helperTextTypeMap = {
-    default: "rest",
-    success: "rest",
-    error: "error"
-} as const;
-
 const helperTextAndLabelSizeMap = {
     large: "medium",
     medium: "medium",
     small: "small"
 } as const;
 
+const textVariantMap = {
+    large: "labelMediumMedium",
+    medium: "labelMediumMedium",
+    small: "labelSmallMedium"
+} as const;
+
 /**
  * A progress bar offers visual feedback on the status and duration of a process, such as a download, file transfer, or installation, helping users understand how much longer they need to wait.
  */
 const ProgressBar: FC<IProgressBarProps> = ({
     className,
     size = "medium",
     type = "determinate",
-    error,
+    status = "rest",
     helperText,
     percent,
     uploadingText,
     infoText,
     label
 }) => {
-    const [status, setStatus] = useState<"default" | "success" | "error">("default");
-
     const isDeterminate = type === "determinate";
-    const isTypeDefault = status === "default";
+    const isTypeRest = status === "rest";
     const isPercentLowerThanMax = percent !== undefined && percent < 100;
+    const isError = status === "error";
+    const isSuccess = percent === 100;
+    const effectiveType = isError ? "determinate" : type;
+    const isRestOrWarning = status === "rest" || status === "warning";
 
     const processedPercent = useMemo(() => {
         let result = percent || 0;
 
-        if (result < 0 && !error) result = 0;
-        if (result >= 100 || error) result = 100;
+        if (result < 0 && !isError) result = 0;
+        if (result >= 100 || isError) result = 100;
 
         return `${result}%`;
-    }, [percent, error]);
-
-    useEffect(() => {
-        if (error && status !== "error") {
-            setStatus("error");
-        } else if (percent !== undefined && !error) {
-            if (percent >= 100 && status !== "success" && isDeterminate) {
-                setStatus("success");
-            } else if ((!isTypeDefault && isPercentLowerThanMax && isDeterminate) || !isDeterminate) {
-                setStatus("default");
-            }
-        }
-    }, [error, isTypeDefault, status, percent, isDeterminate]);
+    }, [percent, isError]);
 
     return (
         <div
             className={classNames(
-                `progressBar progressBar_type_${error ? "determinate" : type} progressBar_size_${size} progressBar_color_${status}`,
-                className
+                "progressBar",
+                `progressBar_type_${effectiveType}`,
+                `progressBar_size_${size}`,
+                className,
+                {
+                    progressBar_status_error: isError,
+                    progressBar_status_success: isSuccess,
+                    progressBar_status_rest: isRestOrWarning
+                }
             )}
         >
             <Label text={label} size={helperTextAndLabelSizeMap[size]} infoText={infoText} />
             <div className="progressBar__track">
-                {(isDeterminate || error) && <div className="progressBar__fill" style={{ width: processedPercent }} />}
+                {(isDeterminate || isError) && (
+                    <div className="progressBar__fill" style={{ width: processedPercent }} />
+                )}
                 <div className="progressBar__loadingBar" />
             </div>
             <div className="progressBar__info">
                 {helperText && (
                     <HelperText
                         text={helperText}
                         size={helperTextAndLabelSizeMap[size]}
-                        status={helperTextTypeMap[status]}
+                        status={status}
                         className="progressBar__helperText"
                     />
                 )}
-                {isDeterminate && isTypeDefault && isPercentLowerThanMax && (
-                    <p className="progressBar__status">
-                        <span className="progressBar__uploadingText">{uploadingText}</span>
-                        <span className="progressBar__percent">{processedPercent}</span>
+                {isDeterminate && isTypeRest && isPercentLowerThanMax && (
+                    <p className="progressBar__statusBar">
+                        {uploadingText && (
+                            <Text as="span" variant={textVariantMap[size]} className="progressBar__uploadingText">
+                                {uploadingText}
+                            </Text>
+                        )}
+                        <Text as="span" variant={textVariantMap[size]} className="progressBar__percent">
+                            {processedPercent}
+                        </Text>
                     </p>
                 )}
             </div>