@temp-spotwork/ui 1.7.8 → 1.7.9

package/dist/components/molecules/dataviz/progress-bar/ProgressBar.stories.d.ts

@@ -11,3 +11,4 @@ export declare const WithLabelColorAlert: Story;
 export declare const WithLabelColorWarning: Story;
 export declare const WithLabelColorActive: Story;
 export declare const WithTotalCount: Story;
+export declare const WithTextClassName: Story;

package/dist/components/molecules/dataviz/progress-bar/ProgressBar.stories.js

@@ -1,9 +1,13 @@
-import { ProgressBar as o } from "./progress-bar.js";
+import t from "react";
+import { ProgressBar as e } from "./progress-bar.js";
 import "../../../styles/colors/colors.js";
-import { glyphColorsKeys as t } from "../../../styles/colors/colormap.js";
-const s = {
+import { glyphColorsKeys as l } from "../../../styles/colors/colormap.js";
+const n = {
   title: "@spotwork-ui/ProgresBar",
-  component: o,
+  component: e,
+  decorators: [
+    (o) => t.createElement("div", { style: { width: 100 } }, t.createElement(o))
+  ],
   parameters: {
     layout: "centered"
   },
@@ -11,7 +15,7 @@ const s = {
   argTypes: {
     labelColor: {
       control: "select",
-      options: t,
+      options: l,
       description: 'Custom color for the label. Defaults to "subdued" if not provided.'
     },
     progress: {
@@ -27,47 +31,47 @@ const s = {
       control: "text"
     }
   }
-}, a = {
+}, c = {
   args: {
     progress: 50,
     total: 100,
     text: "Filled"
   }
-}, n = {
+}, g = {
   args: {
     progress: 75,
     total: 100,
     text: "Filled"
   }
-}, i = {
+}, p = {
   args: {
     progress: 80,
     total: 100,
     text: "Filled",
     labelColor: "success"
   }
-}, c = {
+}, u = {
   args: {
     progress: 30,
     total: 100,
     text: "Filled",
     labelColor: "alert"
   }
-}, g = {
+}, C = {
   args: {
     progress: 60,
     total: 100,
     text: "Filled",
     labelColor: "warning"
   }
-}, p = {
+}, d = {
   args: {
     progress: 90,
     total: 100,
     text: "Filled",
     labelColor: "active"
   }
-}, u = {
+}, m = {
   args: {
     progress: 75,
     total: 100,
@@ -75,14 +79,24 @@ const s = {
     hasTotalCount: !0,
     labelColor: "active"
   }
+}, b = {
+  args: {
+    progress: 75,
+    total: 100,
+    text: "",
+    hasTotalCount: !0,
+    labelColor: "active",
+    textClassName: "flex justify-center items-center"
+  }
 };
 export {
-  a as Default,
-  p as WithLabelColorActive,
-  c as WithLabelColorAlert,
-  i as WithLabelColorSuccess,
-  g as WithLabelColorWarning,
-  u as WithTotalCount,
-  n as WithoutLabelColor,
-  s as default
+  c as Default,
+  d as WithLabelColorActive,
+  u as WithLabelColorAlert,
+  p as WithLabelColorSuccess,
+  C as WithLabelColorWarning,
+  b as WithTextClassName,
+  m as WithTotalCount,
+  g as WithoutLabelColor,
+  n as default
 };

package/dist/components/molecules/dataviz/progress-bar/progress-bar.d.ts

@@ -30,5 +30,9 @@ export type ProgressBarProps = {
      * Custom class name for the component
      */
     className?: string;
+    /**
+     * Custom class name for the text label
+     */
+    textClassName?: string;
 };
-export declare function ProgressBar({ progress, total, hasTotalCount, text, swStyle, labelColor, className, }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProgressBar({ progress, total, hasTotalCount, text, swStyle, labelColor, className, textClassName, }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/dataviz/progress-bar/progress-bar.js

@@ -1,41 +1,42 @@
-import { jsx as a, jsxs as c } from "react/jsx-runtime";
-import { Typography as h } from "../../../styles/typography/typography.js";
+import { jsx as d, jsxs as t } from "react/jsx-runtime";
+import { Typography as b } from "../../../styles/typography/typography.js";
 import "../../../styles/colors/colors.js";
-import { surface as b, crusta as B, sun as v, apple as y } from "../../../styles/colors/colormap.js";
+import { surface as B, crusta as v, sun as y, apple as N } from "../../../styles/colors/colormap.js";
 import { getStyles as $ } from "./styles.js";
 import { t as o } from "../../../../bundle-mjs-BjFsLjkg.js";
-function P({
+function W({
   progress: e,
   total: r,
-  hasTotalCount: n = !1,
-  text: l = "Filled",
+  hasTotalCount: l = !1,
+  text: n = "Filled",
   swStyle: m = 1,
   labelColor: u,
-  className: p
+  className: p,
+  textClassName: f
 }) {
-  const s = e && r > 0 ? e / r * 100 : 0, i = 100 - s, f = s <= 33.99 ? b.badge : s <= 66.99 ? B[400] : s <= 99.99 ? v[400] : y[600], g = (n ? `${e > r ? r : e}/${r}` : `${e > r ? r : e}`) + " " + l, t = u ?? "subdued", d = $();
-  return /* @__PURE__ */ a("div", { children: /* @__PURE__ */ c("div", { className: o(d.container, p), children: [
-    /* @__PURE__ */ a(h, { swStyle: m, color: t, children: g }),
-    /* @__PURE__ */ c("div", { className: d.chartBox, children: [
-      /* @__PURE__ */ a(
+  const s = e && r > 0 ? e / r * 100 : 0, i = 100 - s, g = s <= 33.99 ? B.badge : s <= 66.99 ? v[400] : s <= 99.99 ? y[400] : N[600], h = (l ? `${e > r ? r : e}/${r}` : `${e > r ? r : e}`) + " " + n, c = u ?? "subdued", a = $();
+  return /* @__PURE__ */ d("div", { children: /* @__PURE__ */ t("div", { className: o(a.container, p), children: [
+    /* @__PURE__ */ d(b, { swStyle: m, className: f, color: c, children: h }),
+    /* @__PURE__ */ t("div", { className: a.chartBox, children: [
+      /* @__PURE__ */ d(
         "div",
         {
           "data-testid": "progress-bar",
-          style: { width: `${s}%`, background: f },
+          style: { width: `${s}%`, background: g },
           className: o(
-            d.progressBar,
+            a.progressBar,
             s >= 100 ? "rounded-r-[0.3rem] rounded-l-[0.3rem]" : "rounded-l-[0.3rem]"
           )
         }
       ),
-      /* @__PURE__ */ a(
+      /* @__PURE__ */ d(
         "div",
         {
           "data-testid": "unfilled-progress-bar",
           style: { width: `${i}%` },
           className: o(
-            d.progressBar,
-            t === "active" ? "bg-progressBar-trackActive" : "bg-progressBar-trackDefault",
+            a.progressBar,
+            c === "active" ? "bg-progressBar-trackActive" : "bg-progressBar-trackDefault",
             i >= 100 ? "rounded-[0.3rem]" : "rounded-r-[0.3rem]"
           )
         }
@@ -44,5 +45,5 @@ function P({
   ] }) });
 }
 export {
-  P as ProgressBar
+  W as ProgressBar
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@temp-spotwork/ui",
   "private": false,
-  "version": "1.7.8",
+  "version": "1.7.9",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",