@rikstv/shared-components 3.3.11 → 3.3.12-alpha.1

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # 📖 Changelog
 
+## 3.3.12
+
+- Allow to set Circular Progress size in px
+
 ## 3.3.11
 
 - Allow to override Circular Progress stroke color background (not completed part of stroke)

package/dist/components/progress/{CircularProgress-D4pvWH68.mjs → CircularProgress-BKmJjWRu.mjs}

@@ -1,11 +1,11 @@
 import { jsxs as e, Fragment as v, jsx as s } from "react/jsx-runtime";
-import { forwardRef as _, useState as d, useId as k, useEffect as y } from "react";
-import { S as P } from "../typography/Typography-CXNJ1SFo.mjs";
-const $ = ({ progressRatio: r }) => (1 - r) * 100 * Math.PI, w = _(
+import { forwardRef as _, useState as o, useId as k, useEffect as $ } from "react";
+import { S as y } from "../typography/Typography-CXNJ1SFo.mjs";
+const P = ({ progressRatio: r }) => (1 - r) * 100 * Math.PI, w = _(
   ({
     progressRatio: r,
-    label: o,
-    size: c = "small",
+    label: c,
+    size: t = "160px",
     className: l = "",
     children: i,
     stopColor0: n,
@@ -13,12 +13,12 @@ const $ = ({ progressRatio: r }) => (1 - r) * 100 * Math.PI, w = _(
     backgroundColor: g,
     ...u
   }, m) => {
-    const [f, h] = d(0), [x] = d(c === "small" ? "160px" : "260px"), t = k(), a = `url(#${t})`;
-    return y(() => {
-      h($({ progressRatio: r }));
+    const [f, h] = o(0), [x] = o(t.endsWith("px") ? t : `${t}px`), a = k(), d = `url(#${a})`;
+    return $(() => {
+      h(P({ progressRatio: r }));
     }, [r]), /* @__PURE__ */ e(v, { children: [
       /* @__PURE__ */ e("label", { className: "sr-only", "data-testid": "rds-progress__label", children: [
-        o,
+        c,
         /* @__PURE__ */ s("progress", { "data-testid": "rds-progress__progress", value: r, max: 1 })
       ] }),
       /* @__PURE__ */ e(
@@ -30,7 +30,7 @@ const $ = ({ progressRatio: r }) => (1 - r) * 100 * Math.PI, w = _(
           style: { "--progress-circle-size": x },
           ...u,
           children: [
-            /* @__PURE__ */ s("div", { className: "rds-progress--circular__outer", "data-testid": "rds-progress__content", children: i || /* @__PURE__ */ s(P, { "data-testid": "rds-progress__default-text", lookLike: "title-3", children: r === 1 ? "Du er i mål!" : `${r * 100} %` }) }),
+            /* @__PURE__ */ s("div", { className: "rds-progress--circular__outer", "data-testid": "rds-progress__content", children: i || /* @__PURE__ */ s(y, { "data-testid": "rds-progress__default-text", lookLike: "title-3", children: r === 1 ? "Du er i mål!" : `${r * 100} %` }) }),
             /* @__PURE__ */ e(
               "svg",
               {
@@ -43,12 +43,12 @@ const $ = ({ progressRatio: r }) => (1 - r) * 100 * Math.PI, w = _(
                 version: "1.1",
                 viewBox: "-10 0 120 100",
                 children: [
-                  /* @__PURE__ */ s("defs", { children: /* @__PURE__ */ e("linearGradient", { id: t, children: [
+                  /* @__PURE__ */ s("defs", { children: /* @__PURE__ */ e("linearGradient", { id: a, children: [
                     /* @__PURE__ */ s("stop", { offset: "0%", stopColor: `var(${n ?? "--rds-heading-accent"})` }),
                     /* @__PURE__ */ s("stop", { offset: "100%", stopColor: `var(${p ?? "--rds-background-card"})` })
                   ] }) }),
-                  /* @__PURE__ */ s("circle", { id: "path", cx: "50", cy: "50", r: "50", stroke: a, strokeLinecap: "round" }),
-                  /* @__PURE__ */ s("circle", { id: "prog", cx: "50", cy: "50", r: "50", stroke: a, strokeLinecap: "round" })
+                  /* @__PURE__ */ s("circle", { id: "path", cx: "50", cy: "50", r: "50", stroke: d, strokeLinecap: "round" }),
+                  /* @__PURE__ */ s("circle", { id: "prog", cx: "50", cy: "50", r: "50", stroke: d, strokeLinecap: "round" })
                 ]
               }
             )

package/dist/components/progress/CircularProgress.d.ts

@@ -2,7 +2,7 @@ import { HTMLAttributes } from 'react';
 interface Props extends HTMLAttributes<HTMLDivElement> {
     progressRatio: number;
     label: string;
-    size?: "small" | "large";
+    size?: string;
     className?: string;
     stopColor0?: string;
     stopColor100?: string;

package/dist/shared-components.mjs

@@ -10,7 +10,7 @@ import { A as z } from "./components/alert/Alert-BDfwNOJx.mjs";
 import { B as K, a as X } from "./components/breadcrumb/Breadcrumb-BJNLZ7iB.mjs";
 import { P as Z } from "./components/progress/Progress-CjnegHvC.mjs";
 import { L as re } from "./components/loader/Loader-gjL6yh1f.mjs";
-import { C as ne } from "./components/progress/CircularProgress-D4pvWH68.mjs";
+import { C as ne } from "./components/progress/CircularProgress-BKmJjWRu.mjs";
 import { D as se } from "./components/dropdown/Dropdown-CWVW7rKD.mjs";
 import { G as ae, P as ce, S as ue, T as de } from "./components/button/Button-DGXKZhwG.mjs";
 import { G as fe, P as le, S as xe, T as ge } from "./components/button/ArrowButton-DqViaPQ-.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rikstv/shared-components",
-  "version": "3.3.11",
+  "version": "3.3.12-alpha.1",
   "publishConfig": {
     "access": "public"
   },