@rikstv/shared-components 3.3.6 → 3.3.7-alpha.1

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # 📖 Changelog
 
+## 3.3.7
+
+- Specify color for CircularProgress
+
 ## 3.3.5
 
 - TextField styling for RiksTV

package/dist/components/progress/{CircularProgress-CD_dLu6N.mjs → CircularProgress-DlB7Fl1m.mjs}

@@ -1,12 +1,12 @@
-import { jsxs as e, Fragment as u, jsx as s } from "react/jsx-runtime";
-import { forwardRef as m, useState as t, useEffect as f } from "react";
-import { S as h } from "../typography/Typography-CXNJ1SFo.mjs";
-const x = ({ progressRatio: r }) => (1 - r) * 100 * Math.PI, _ = m(
-  ({ progressRatio: r, label: a, size: l = "small", className: c = "", children: d, ...o }, i) => {
-    const [n, p] = t(0), [g] = t(l === "small" ? "160px" : "260px");
-    return f(() => {
-      p(x({ progressRatio: r }));
-    }, [r]), /* @__PURE__ */ e(u, { children: [
+import { jsxs as e, Fragment as f, jsx as s } from "react/jsx-runtime";
+import { forwardRef as h, useState as t, useEffect as x } from "react";
+import { S as _ } from "../typography/Typography-CXNJ1SFo.mjs";
+const v = ({ progressRatio: r }) => (1 - r) * 100 * Math.PI, C = h(
+  ({ progressRatio: r, label: a, size: l = "small", className: c = "", children: d, stopColor0: o, stopColor100: i, ...n }, p) => {
+    const [g, u] = t(0), [m] = t(l === "small" ? "160px" : "260px");
+    return x(() => {
+      u(v({ progressRatio: r }));
+    }, [r]), /* @__PURE__ */ e(f, { children: [
       /* @__PURE__ */ e("label", { className: "sr-only", "data-testid": "rds-progress__label", children: [
         a,
         /* @__PURE__ */ s("progress", { "data-testid": "rds-progress__progress", value: r, max: 1 })
@@ -14,24 +14,24 @@ const x = ({ progressRatio: r }) => (1 - r) * 100 * Math.PI, _ = m(
       /* @__PURE__ */ e(
         "div",
         {
-          ref: i,
+          ref: p,
           "data-testid": "rds-progress",
           className: `rds-progress--circular ${c}`,
-          style: { "--progress-circle-size": g },
-          ...o,
+          style: { "--progress-circle-size": m },
+          ...n,
           children: [
-            /* @__PURE__ */ s("div", { className: "rds-progress--circular__outer", "data-testid": "rds-progress__content", children: d || /* @__PURE__ */ s(h, { "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: d || /* @__PURE__ */ s(_, { "data-testid": "rds-progress__default-text", lookLike: "title-3", children: r === 1 ? "Du er i mål!" : `${r * 100} %` }) }),
             /* @__PURE__ */ e(
               "svg",
               {
-                style: { "--calculated-progress": n, "--progress": `${r + 1}s` },
+                style: { "--calculated-progress": g, "--progress": `${r + 1}s` },
                 xmlns: "http://www.w3.org/2000/svg",
                 version: "1.1",
                 viewBox: "-10 0 120 100",
                 children: [
                   /* @__PURE__ */ s("defs", { children: /* @__PURE__ */ e("linearGradient", { id: "GradientColor", children: [
-                    /* @__PURE__ */ s("stop", { offset: "0%", stopColor: "var(--rds-heading-accent)" }),
-                    /* @__PURE__ */ s("stop", { offset: "100%", stopColor: "var(--rds-background-card)" })
+                    /* @__PURE__ */ s("stop", { offset: "0%", stopColor: `var(${o ?? "--rds-heading-accent"})` }),
+                    /* @__PURE__ */ s("stop", { offset: "100%", stopColor: `var(${i ?? "--rds-background-card"})` })
                   ] }) }),
                   /* @__PURE__ */ s("circle", { id: "path", cx: "50", cy: "50", r: "50", strokeLinecap: "round" }),
                   /* @__PURE__ */ s("circle", { id: "prog", cx: "50", cy: "50", r: "50", strokeLinecap: "round" })
@@ -44,7 +44,7 @@ const x = ({ progressRatio: r }) => (1 - r) * 100 * Math.PI, _ = m(
     ] });
   }
 );
-_.displayName = "CircularProgress";
+C.displayName = "CircularProgress";
 export {
-  _ as C
+  C
 };

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

@@ -4,6 +4,8 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
     label: string;
     size?: "small" | "large";
     className?: string;
+    stopColor0?: string;
+    stopColor100?: string;
 }
 export declare const calculateProgress: ({ progressRatio }: Pick<Props, "progressRatio">) => number;
 export declare const CircularProgress: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLDivElement>>;

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-CD_dLu6N.mjs";
+import { C as ne } from "./components/progress/CircularProgress-DlB7Fl1m.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.6",
+  "version": "3.3.7-alpha.1",
   "publishConfig": {
     "access": "public"
   },