@gobolt/genesis 0.4.5 → 0.4.7

package/dist/components/Table/__mocks__/table-mocks.d.ts

@@ -9,6 +9,18 @@ export interface AppointmentWithSimpleAddress {
         address: string;
     };
     job_subtype: "delivery" | "pickup";
+    progress?: {
+        firstBarData: {
+            text: string;
+            status: string;
+            value: number;
+        };
+        secondBarData?: {
+            text: string;
+            status: string;
+            value: number;
+        };
+    };
 }
 export interface MockDataSource {
     appointments: AppointmentWithSimpleAddress[];

package/dist/index.cjs

@@ -80792,15 +80792,12 @@ const getTextComponent = (firstBarData, secondBarData, stateColor, theme, isText
   );
 };
 const getCombinedPercent = (firstBarData, secondBarData) => {
-  if (secondBarData?.value === 0) {
-    return firstBarData?.value;
-  }
-  if (firstBarData?.value && secondBarData?.value) {
-    const total = firstBarData?.value + secondBarData?.value;
+  if (firstBarData?.value !== void 0 && secondBarData?.value !== void 0) {
+    const total = firstBarData.value + secondBarData.value;
     const dividedBy = total / 2;
-    return dividedBy;
+    return Math.round(dividedBy * 10) / 10;
   }
-  return 0;
+  return firstBarData?.value || 0;
 };
 const Progress = ({
   firstBarData,
@@ -80819,6 +80816,7 @@ const Progress = ({
     strokeColor: theme?.colors?.inputs?.progress?.[secondBarData.status]
   } : null;
   const stateColor = strokeColor;
+  const percentDisplayWidth = 110;
   const gap = 8;
   if (isSingleBarOverallSuccess && secondBarData !== null) {
     const overallPercent = secondBarData.value;
@@ -80834,30 +80832,79 @@ const Progress = ({
           showInfo: false
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", width: 80 }, children: /* @__PURE__ */ jsxRuntime.jsxs(Typography, { color: textColor, variant: "digits3", children: [
-        overallPercent,
-        "%"
-      ] }) })
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            width: percentDisplayWidth
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsxs(Typography, { color: textColor, variant: "digits3", children: [
+            overallPercent,
+            "%"
+          ] })
+        }
+      )
     ] });
   }
   if (isProgressCombined) {
     const combinedPercent = getCombinedPercent(firstBarData, secondBarData);
     const textColor = Number(combinedPercent) === 100 ? "green" : "black";
+    const adjustedFirstBar = secondBarData?.value === 100 ? 100 : firstBarData?.value || 0;
+    const firstBarStrokeColor = theme?.colors?.inputs?.progress?.[firstBarData?.status || "info"];
+    const secondBarStrokeColor = secondBarData?.value && secondBarData.value > 0 ? theme?.colors?.inputs?.progress?.[secondBarData.status] : null;
+    secondBarData?.value && secondBarData.value > 0 ? {
+      percent: secondBarData.value
+    } : null;
     return /* @__PURE__ */ jsxRuntime.jsxs(Tile, { style: { width, height, alignItems: "center", gap }, isHorizontal: true, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", width: "100%" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Progress$1,
+          {
+            "data-testid": "progress",
+            percent: adjustedFirstBar,
+            strokeColor: firstBarStrokeColor,
+            showInfo: false
+          }
+        ),
+        secondBarData?.value && secondBarData.value > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "100%",
+              pointerEvents: "none"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              Progress$1,
+              {
+                percent: secondBarData.value,
+                strokeColor: secondBarStrokeColor,
+                showInfo: false,
+                style: { background: "transparent" }
+              }
+            )
+          }
+        ) : null
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        Progress$1,
+        "div",
         {
-          "data-testid": "progress",
-          percent,
-          success,
-          strokeColor,
-          showInfo: false
+          style: {
+            display: "flex",
+            alignItems: "center",
+            width: percentDisplayWidth
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsxs(Typography, { color: textColor, variant: "digits3", children: [
+            combinedPercent,
+            "%"
+          ] })
         }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", width: 80 }, children: /* @__PURE__ */ jsxRuntime.jsxs(Typography, { color: textColor, variant: "digits3", children: [
-        combinedPercent,
-        "%"
-      ] }) })
+      )
     ] });
   }
   if (isTextBeforeBar) {
@@ -84567,6 +84614,20 @@ const mockColumns = [
         state: colorStateMap[jobSubtype]
       });
     }
+  },
+  {
+    title: "Progress",
+    dataIndex: "progress",
+    render: (progress) => {
+      if (!progress) return null;
+      return React.createElement(Progress, {
+        firstBarData: progress.firstBarData,
+        secondBarData: progress.secondBarData,
+        width: 150,
+        height: 20,
+        isProgressCombined: true
+      });
+    }
   }
 ];
 mockColumns.map((column2) => ({
@@ -84583,7 +84644,19 @@ const mockDataSource = {
         nickname: "Home",
         address: "123 Main St"
       },
-      job_subtype: "delivery"
+      job_subtype: "delivery",
+      progress: {
+        firstBarData: {
+          text: "Loading",
+          status: "info",
+          value: 100
+        },
+        secondBarData: {
+          text: "Processing",
+          status: "success",
+          value: 25
+        }
+      }
     },
     {
       id: "2",
@@ -84594,7 +84667,19 @@ const mockDataSource = {
         nickname: "Work",
         address: "456 Elm St"
       },
-      job_subtype: "pickup"
+      job_subtype: "pickup",
+      progress: {
+        firstBarData: {
+          text: "Preparing",
+          status: "info",
+          value: 100
+        },
+        secondBarData: {
+          text: "Final Check",
+          status: "success",
+          value: 0
+        }
+      }
     },
     {
       id: "3",
@@ -84605,7 +84690,19 @@ const mockDataSource = {
         nickname: "Store",
         address: "789 Oak St"
       },
-      job_subtype: "delivery"
+      job_subtype: "delivery",
+      progress: {
+        firstBarData: {
+          text: "Pending",
+          status: "info",
+          value: 0
+        },
+        secondBarData: {
+          text: "Awaiting",
+          status: "success",
+          value: 0
+        }
+      }
     },
     {
       id: "4",
@@ -84616,7 +84713,19 @@ const mockDataSource = {
         nickname: "Office",
         address: "321 Pine St"
       },
-      job_subtype: "pickup"
+      job_subtype: "pickup",
+      progress: {
+        firstBarData: {
+          text: "In Progress",
+          status: "info",
+          value: 100
+        },
+        secondBarData: {
+          text: "Validation",
+          status: "success",
+          value: 30
+        }
+      }
     },
     {
       id: "5",
@@ -84627,7 +84736,19 @@ const mockDataSource = {
         nickname: "Library",
         address: "555 Book Lane"
       },
-      job_subtype: "delivery"
+      job_subtype: "delivery",
+      progress: {
+        firstBarData: {
+          text: "Completed",
+          status: "info",
+          value: 100
+        },
+        secondBarData: {
+          text: "Verified",
+          status: "success",
+          value: 100
+        }
+      }
     },
     {
       id: "6",
@@ -84638,7 +84759,19 @@ const mockDataSource = {
         nickname: "Gym",
         address: "777 Fitness Ave"
       },
-      job_subtype: "pickup"
+      job_subtype: "pickup",
+      progress: {
+        firstBarData: {
+          text: "Phase 1",
+          status: "info",
+          value: 75
+        },
+        secondBarData: {
+          text: "Phase 2",
+          status: "success",
+          value: 50
+        }
+      }
     },
     {
       id: "7",
@@ -84649,7 +84782,19 @@ const mockDataSource = {
         nickname: "Mall",
         address: "888 Shopping Center"
       },
-      job_subtype: "delivery"
+      job_subtype: "delivery",
+      progress: {
+        firstBarData: {
+          text: "Queued",
+          status: "info",
+          value: 0
+        },
+        secondBarData: {
+          text: "Waiting",
+          status: "success",
+          value: 0
+        }
+      }
     },
     {
       id: "8",
@@ -84660,7 +84805,19 @@ const mockDataSource = {
         nickname: "School",
         address: "999 Education Rd"
       },
-      job_subtype: "pickup"
+      job_subtype: "pickup",
+      progress: {
+        firstBarData: {
+          text: "Delivered",
+          status: "info",
+          value: 100
+        },
+        secondBarData: {
+          text: "Confirmed",
+          status: "success",
+          value: 100
+        }
+      }
     },
     {
       id: "9",
@@ -84671,7 +84828,19 @@ const mockDataSource = {
         nickname: "Restaurant",
         address: "111 Food Court"
       },
-      job_subtype: "delivery"
+      job_subtype: "delivery",
+      progress: {
+        firstBarData: {
+          text: "Preparing",
+          status: "info",
+          value: 100
+        },
+        secondBarData: {
+          text: "Quality Check",
+          status: "success",
+          value: 15
+        }
+      }
     },
     {
       id: "10",
@@ -84682,7 +84851,19 @@ const mockDataSource = {
         nickname: "Park",
         address: "222 Green Ave"
       },
-      job_subtype: "pickup"
+      job_subtype: "pickup",
+      progress: {
+        firstBarData: {
+          text: "Processing",
+          status: "info",
+          value: 80
+        },
+        secondBarData: {
+          text: "Review",
+          status: "success",
+          value: 0
+        }
+      }
     },
     {
       id: "11",

package/dist/index.js

@@ -80774,15 +80774,12 @@ const getTextComponent = (firstBarData, secondBarData, stateColor, theme, isText
   );
 };
 const getCombinedPercent = (firstBarData, secondBarData) => {
-  if (secondBarData?.value === 0) {
-    return firstBarData?.value;
-  }
-  if (firstBarData?.value && secondBarData?.value) {
-    const total = firstBarData?.value + secondBarData?.value;
+  if (firstBarData?.value !== void 0 && secondBarData?.value !== void 0) {
+    const total = firstBarData.value + secondBarData.value;
     const dividedBy = total / 2;
-    return dividedBy;
+    return Math.round(dividedBy * 10) / 10;
   }
-  return 0;
+  return firstBarData?.value || 0;
 };
 const Progress = ({
   firstBarData,
@@ -80801,6 +80798,7 @@ const Progress = ({
     strokeColor: theme?.colors?.inputs?.progress?.[secondBarData.status]
   } : null;
   const stateColor = strokeColor;
+  const percentDisplayWidth = 110;
   const gap = 8;
   if (isSingleBarOverallSuccess && secondBarData !== null) {
     const overallPercent = secondBarData.value;
@@ -80816,30 +80814,79 @@ const Progress = ({
           showInfo: false
         }
       ),
-      /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", width: 80 }, children: /* @__PURE__ */ jsxs(Typography, { color: textColor, variant: "digits3", children: [
-        overallPercent,
-        "%"
-      ] }) })
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            width: percentDisplayWidth
+          },
+          children: /* @__PURE__ */ jsxs(Typography, { color: textColor, variant: "digits3", children: [
+            overallPercent,
+            "%"
+          ] })
+        }
+      )
     ] });
   }
   if (isProgressCombined) {
     const combinedPercent = getCombinedPercent(firstBarData, secondBarData);
     const textColor = Number(combinedPercent) === 100 ? "green" : "black";
+    const adjustedFirstBar = secondBarData?.value === 100 ? 100 : firstBarData?.value || 0;
+    const firstBarStrokeColor = theme?.colors?.inputs?.progress?.[firstBarData?.status || "info"];
+    const secondBarStrokeColor = secondBarData?.value && secondBarData.value > 0 ? theme?.colors?.inputs?.progress?.[secondBarData.status] : null;
+    secondBarData?.value && secondBarData.value > 0 ? {
+      percent: secondBarData.value
+    } : null;
     return /* @__PURE__ */ jsxs(Tile, { style: { width, height, alignItems: "center", gap }, isHorizontal: true, children: [
+      /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: "100%" }, children: [
+        /* @__PURE__ */ jsx(
+          Progress$1,
+          {
+            "data-testid": "progress",
+            percent: adjustedFirstBar,
+            strokeColor: firstBarStrokeColor,
+            showInfo: false
+          }
+        ),
+        secondBarData?.value && secondBarData.value > 0 ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "100%",
+              pointerEvents: "none"
+            },
+            children: /* @__PURE__ */ jsx(
+              Progress$1,
+              {
+                percent: secondBarData.value,
+                strokeColor: secondBarStrokeColor,
+                showInfo: false,
+                style: { background: "transparent" }
+              }
+            )
+          }
+        ) : null
+      ] }),
       /* @__PURE__ */ jsx(
-        Progress$1,
+        "div",
         {
-          "data-testid": "progress",
-          percent,
-          success,
-          strokeColor,
-          showInfo: false
+          style: {
+            display: "flex",
+            alignItems: "center",
+            width: percentDisplayWidth
+          },
+          children: /* @__PURE__ */ jsxs(Typography, { color: textColor, variant: "digits3", children: [
+            combinedPercent,
+            "%"
+          ] })
         }
-      ),
-      /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", width: 80 }, children: /* @__PURE__ */ jsxs(Typography, { color: textColor, variant: "digits3", children: [
-        combinedPercent,
-        "%"
-      ] }) })
+      )
     ] });
   }
   if (isTextBeforeBar) {
@@ -84549,6 +84596,20 @@ const mockColumns = [
         state: colorStateMap[jobSubtype]
       });
     }
+  },
+  {
+    title: "Progress",
+    dataIndex: "progress",
+    render: (progress) => {
+      if (!progress) return null;
+      return React__default.createElement(Progress, {
+        firstBarData: progress.firstBarData,
+        secondBarData: progress.secondBarData,
+        width: 150,
+        height: 20,
+        isProgressCombined: true
+      });
+    }
   }
 ];
 mockColumns.map((column2) => ({
@@ -84565,7 +84626,19 @@ const mockDataSource = {
         nickname: "Home",
         address: "123 Main St"
       },
-      job_subtype: "delivery"
+      job_subtype: "delivery",
+      progress: {
+        firstBarData: {
+          text: "Loading",
+          status: "info",
+          value: 100
+        },
+        secondBarData: {
+          text: "Processing",
+          status: "success",
+          value: 25
+        }
+      }
     },
     {
       id: "2",
@@ -84576,7 +84649,19 @@ const mockDataSource = {
         nickname: "Work",
         address: "456 Elm St"
       },
-      job_subtype: "pickup"
+      job_subtype: "pickup",
+      progress: {
+        firstBarData: {
+          text: "Preparing",
+          status: "info",
+          value: 100
+        },
+        secondBarData: {
+          text: "Final Check",
+          status: "success",
+          value: 0
+        }
+      }
     },
     {
       id: "3",
@@ -84587,7 +84672,19 @@ const mockDataSource = {
         nickname: "Store",
         address: "789 Oak St"
       },
-      job_subtype: "delivery"
+      job_subtype: "delivery",
+      progress: {
+        firstBarData: {
+          text: "Pending",
+          status: "info",
+          value: 0
+        },
+        secondBarData: {
+          text: "Awaiting",
+          status: "success",
+          value: 0
+        }
+      }
     },
     {
       id: "4",
@@ -84598,7 +84695,19 @@ const mockDataSource = {
         nickname: "Office",
         address: "321 Pine St"
       },
-      job_subtype: "pickup"
+      job_subtype: "pickup",
+      progress: {
+        firstBarData: {
+          text: "In Progress",
+          status: "info",
+          value: 100
+        },
+        secondBarData: {
+          text: "Validation",
+          status: "success",
+          value: 30
+        }
+      }
     },
     {
       id: "5",
@@ -84609,7 +84718,19 @@ const mockDataSource = {
         nickname: "Library",
         address: "555 Book Lane"
       },
-      job_subtype: "delivery"
+      job_subtype: "delivery",
+      progress: {
+        firstBarData: {
+          text: "Completed",
+          status: "info",
+          value: 100
+        },
+        secondBarData: {
+          text: "Verified",
+          status: "success",
+          value: 100
+        }
+      }
     },
     {
       id: "6",
@@ -84620,7 +84741,19 @@ const mockDataSource = {
         nickname: "Gym",
         address: "777 Fitness Ave"
       },
-      job_subtype: "pickup"
+      job_subtype: "pickup",
+      progress: {
+        firstBarData: {
+          text: "Phase 1",
+          status: "info",
+          value: 75
+        },
+        secondBarData: {
+          text: "Phase 2",
+          status: "success",
+          value: 50
+        }
+      }
     },
     {
       id: "7",
@@ -84631,7 +84764,19 @@ const mockDataSource = {
         nickname: "Mall",
         address: "888 Shopping Center"
       },
-      job_subtype: "delivery"
+      job_subtype: "delivery",
+      progress: {
+        firstBarData: {
+          text: "Queued",
+          status: "info",
+          value: 0
+        },
+        secondBarData: {
+          text: "Waiting",
+          status: "success",
+          value: 0
+        }
+      }
     },
     {
       id: "8",
@@ -84642,7 +84787,19 @@ const mockDataSource = {
         nickname: "School",
         address: "999 Education Rd"
       },
-      job_subtype: "pickup"
+      job_subtype: "pickup",
+      progress: {
+        firstBarData: {
+          text: "Delivered",
+          status: "info",
+          value: 100
+        },
+        secondBarData: {
+          text: "Confirmed",
+          status: "success",
+          value: 100
+        }
+      }
     },
     {
       id: "9",
@@ -84653,7 +84810,19 @@ const mockDataSource = {
         nickname: "Restaurant",
         address: "111 Food Court"
       },
-      job_subtype: "delivery"
+      job_subtype: "delivery",
+      progress: {
+        firstBarData: {
+          text: "Preparing",
+          status: "info",
+          value: 100
+        },
+        secondBarData: {
+          text: "Quality Check",
+          status: "success",
+          value: 15
+        }
+      }
     },
     {
       id: "10",
@@ -84664,7 +84833,19 @@ const mockDataSource = {
         nickname: "Park",
         address: "222 Green Ave"
       },
-      job_subtype: "pickup"
+      job_subtype: "pickup",
+      progress: {
+        firstBarData: {
+          text: "Processing",
+          status: "info",
+          value: 80
+        },
+        secondBarData: {
+          text: "Review",
+          status: "success",
+          value: 0
+        }
+      }
     },
     {
       id: "11",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gobolt/genesis",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "description": "genesis design system",
   "author": "gobolt",
   "license": "MIT",