rk-designsystem 1.3.2 → 1.3.5

package/dist/components/Donor/index.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { useId as J, useState as m, useEffect as K } from "react";
+import { useId as K, useState as u, useEffect as Q } from "react";
 import { Tabs as s } from "../Tabs/index.js";
-import { Button as Q } from "../Button/index.js";
-import { Textfield as X } from "../Textfield/index.js";
-import { Paragraph as Y } from "../Paragraph/index.js";
-import { Link as A } from "../Link/index.js";
+import { Button as X } from "../Button/index.js";
+import { Textfield as Y } from "../Textfield/index.js";
+import { Paragraph as A } from "../Paragraph/index.js";
+import { Link as ee } from "../Link/index.js";
 import i from "./styles.module.css.js";
-const L = () => /* @__PURE__ */ t(
+const k = () => /* @__PURE__ */ t(
   "svg",
   {
     width: "19",
@@ -25,7 +25,7 @@ const L = () => /* @__PURE__ */ t(
       }
     )
   }
-), ee = () => /* @__PURE__ */ t(
+), te = () => /* @__PURE__ */ t(
   "svg",
   {
     width: "16",
@@ -43,7 +43,7 @@ const L = () => /* @__PURE__ */ t(
       }
     )
   }
-), te = () => /* @__PURE__ */ t(
+), ie = () => /* @__PURE__ */ t(
   "svg",
   {
     width: "64",
@@ -61,79 +61,82 @@ const L = () => /* @__PURE__ */ t(
       }
     )
   }
-), ie = [
+), ae = [
   { value: 220, label: "220 kr" },
   { value: 345, label: "345 kr" },
   { value: 660, label: "660 kr" }
-], me = ({
+], N = (e) => {
+  const d = Number(e);
+  return Number.isSafeInteger(d) && d > 0 ? d : null;
+}, ue = ({
   "data-color": e = "primary-color-red",
-  amounts: N = ie,
-  defaultAmount: I = 345,
+  amounts: d = ae,
+  defaultAmount: z = 345,
   oneTimeLabel: B = "En gang",
-  monthlyLabel: z = "Hver måned",
+  monthlyLabel: I = "Hver måned",
   customAmountPlaceholder: x = "Valgfritt beløp",
-  amountLabel: H = "Velg ønsket beløp:",
+  amountLabel: S = "Velg ønsket beløp:",
   impactMessage: M = "En gave på {amount} bidrar til ...",
-  vippsButtonLabel: g = "Gi med",
-  avtalegiroLabel: k = "Gi med avtalegiro",
-  avtalegiroHref: S = "#",
-  currencySuffix: Z = "kr",
+  vippsButtonLabel: v = "Gi med",
+  avtalegiroLabel: H = "Gi med avtalegiro",
+  avtalegiroHref: Z = "#",
+  currencySuffix: T = "kr",
   onVippsClick: f,
-  onAvtalegiroClick: c,
+  onAvtalegiroClick: p,
   onAmountChange: r,
-  showVippsButton: T = !0,
+  showVippsButton: j = !0,
   showAvtalegiroLink: V = !0,
-  showImpactMessage: j = !0,
-  heartVariant: E = "outlined"
+  showImpactMessage: E = !0,
+  heartVariant: F = "outlined"
 }) => {
-  const v = J(), [d, F] = m("monthly"), [C, P] = m(I), [u, b] = m(""), [w, h] = m(!1);
-  K(() => {
+  const g = K(), [c, P] = u("monthly"), [b, D] = u(z), [C, w] = u(""), [y, h] = u(!1);
+  Q(() => {
     const a = "rk-donor-inline-styles";
     if (typeof document > "u" || document.getElementById(a)) return;
-    const n = ae(i), o = document.createElement("style");
+    const n = ne(i), o = document.createElement("style");
     o.id = a, o.textContent = n, document.head.prepend(o);
   }, []);
-  const y = parseInt(u, 10), p = w && u && y > 0 ? y : C, D = (a) => {
-    P(a), h(!1), b(""), r == null || r(a, d);
-  }, W = (a) => {
+  const $ = N(C), m = y && $ !== null ? $ : b, W = (a) => {
+    D(a), h(!1), w(""), r == null || r(a, c);
+  }, q = (a) => {
     const n = a.target.value;
-    b(n), h(!0);
-    const o = parseInt(n, 10);
-    o > 0 && (r == null || r(o, d));
-  }, q = () => {
+    w(n), h(!0);
+    const o = N(n);
+    o !== null && (r == null || r(o, c));
+  }, R = () => {
     h(!0);
   }, G = (a) => {
     const n = a;
-    F(n), r == null || r(p, n);
-  }, R = () => {
-    p > 0 && (f == null || f(p, d));
+    P(n), r == null || r(m, n);
   }, U = () => {
-    c == null || c();
+    m > 0 && (f == null || f(m, c));
   }, O = () => {
-    const a = `${p} ${Z}`, n = M.split("{amount}");
+    p == null || p();
+  }, _ = () => {
+    const a = `${m} ${T}`, n = M.split("{amount}");
     return /* @__PURE__ */ l("span", { children: [
       n[0],
       /* @__PURE__ */ t("span", { className: i.impactAmount, children: a }),
       n[1] || ""
     ] });
-  }, $ = /* @__PURE__ */ l("div", { className: i.content, children: [
+  }, L = /* @__PURE__ */ l("div", { className: i.content, children: [
     /* @__PURE__ */ l("div", { className: i.amountSection, children: [
-      /* @__PURE__ */ t(Y, { className: i.amountLabel, "data-size": "sm", id: v, children: H }),
+      /* @__PURE__ */ t(A, { className: i.amountLabel, "data-size": "sm", id: g, children: S }),
       /* @__PURE__ */ t(
         "div",
         {
           className: i.amountButtons,
           role: "group",
-          "aria-labelledby": v,
-          children: N.map((a) => {
-            const n = !w && C === a.value;
+          "aria-labelledby": g,
+          children: d.map((a) => {
+            const n = !y && b === a.value;
             return /* @__PURE__ */ t(
-              Q,
+              X,
               {
                 variant: n ? "primary" : "secondary",
                 "data-color": n ? "primary-color-red" : "neutral",
                 "aria-pressed": n,
-                onClick: () => D(a.value),
+                onClick: () => W(a.value),
                 children: a.label
               },
               a.value
@@ -142,52 +145,52 @@ const L = () => /* @__PURE__ */ t(
         }
       ),
       /* @__PURE__ */ t("div", { className: i.customAmountField, children: /* @__PURE__ */ t(
-        X,
+        Y,
         {
           "aria-label": x,
           placeholder: x,
-          value: u,
-          onChange: W,
-          onFocus: q,
+          value: C,
+          onChange: q,
+          onFocus: R,
           type: "number",
           min: 1
         }
       ) })
     ] }),
-    j && /* @__PURE__ */ l("div", { className: i.impactRow, children: [
-      /* @__PURE__ */ t("div", { className: i.heartIcon, children: E === "filled" ? /* @__PURE__ */ t(L, {}) : /* @__PURE__ */ t(ee, {}) }),
-      /* @__PURE__ */ t("p", { className: i.impactText, children: O() })
+    E && /* @__PURE__ */ l("div", { className: i.impactRow, children: [
+      /* @__PURE__ */ t("div", { className: i.heartIcon, children: F === "filled" ? /* @__PURE__ */ t(k, {}) : /* @__PURE__ */ t(te, {}) }),
+      /* @__PURE__ */ t("p", { className: i.impactText, children: _() })
     ] }),
     /* @__PURE__ */ l("div", { className: i.actionsSection, children: [
-      T && /* @__PURE__ */ l(
+      j && /* @__PURE__ */ l(
         "button",
         {
           className: i.vippsButton,
-          onClick: R,
+          onClick: U,
           type: "button",
-          "aria-label": `${g} Vipps`,
+          "aria-label": `${v} Vipps`,
           "data-brand-exception": "vipps",
           children: [
-            /* @__PURE__ */ t("span", { className: i.vippsButtonLabel, children: g }),
-            /* @__PURE__ */ t("span", { className: i.vippsLogo, children: /* @__PURE__ */ t(te, {}) })
+            /* @__PURE__ */ t("span", { className: i.vippsButtonLabel, children: v }),
+            /* @__PURE__ */ t("span", { className: i.vippsLogo, children: /* @__PURE__ */ t(ie, {}) })
           ]
         }
       ),
       V && /* @__PURE__ */ t(
-        A,
+        ee,
         {
-          href: S,
+          href: Z,
           "data-color": "neutral",
           className: i.avtalegiroLink,
           onClick: (a) => {
-            c && (a.preventDefault(), U());
+            p && (a.preventDefault(), O());
           },
-          children: k
+          children: H
         }
       )
     ] })
-  ] }), _ = e === "primary" ? "primary-color-red" : e;
-  return /* @__PURE__ */ t("div", { className: i.donor, "data-color": _, children: /* @__PURE__ */ l(
+  ] }), J = e === "primary" ? "primary-color-red" : e;
+  return /* @__PURE__ */ t("div", { className: i.donor, "data-color": J, children: /* @__PURE__ */ l(
     s,
     {
       defaultValue: "monthly",
@@ -198,17 +201,17 @@ const L = () => /* @__PURE__ */ t(
         /* @__PURE__ */ l(s.List, { children: [
           /* @__PURE__ */ t(s.Tab, { value: "one-time", children: B }),
           /* @__PURE__ */ l(s.Tab, { value: "monthly", children: [
-            /* @__PURE__ */ t("span", { className: i.tabHeartIcon, children: /* @__PURE__ */ t(L, {}) }),
-            z
+            /* @__PURE__ */ t("span", { className: i.tabHeartIcon, children: /* @__PURE__ */ t(k, {}) }),
+            I
           ] })
         ] }),
-        /* @__PURE__ */ t(s.Panel, { value: "one-time", className: i.tabPanel, children: d === "one-time" ? $ : null }),
-        /* @__PURE__ */ t(s.Panel, { value: "monthly", className: i.tabPanel, children: d === "monthly" ? $ : null })
+        /* @__PURE__ */ t(s.Panel, { value: "one-time", className: i.tabPanel, children: c === "one-time" ? L : null }),
+        /* @__PURE__ */ t(s.Panel, { value: "monthly", className: i.tabPanel, children: c === "monthly" ? L : null })
       ]
     }
   ) });
 };
-function ae(e) {
+function ne(e) {
   return `
 .${e.donor} {
   border-radius: 16px;
@@ -325,7 +328,7 @@ function ae(e) {
   justify-content: center;
   width: 300px;
   height: 44px;
-  padding: 12px 16px;
+  padding: var(--ds-size-3, 12px) var(--ds-size-4, 16px);
   background-color: #ff5b24;
   border: none;
   border-radius: var(--ds-border-radius-xl, 12px);
@@ -368,15 +371,26 @@ function ae(e) {
 .${e.tabHeartIcon} {
   display: inline-flex;
   align-items: center;
-  margin-right: 4px;
+  margin-right: var(--ds-size-1, 4px);
   vertical-align: middle;
 }
 .${e.tabHeartIcon} svg {
   width: 16px;
   height: 15px;
 }
+
+/* Mobil: uten disse fikk en konsument som ikke importerer stilarket
+   skrivebordsbreddene på telefon — kortet låst til 344px på en 390px-skjerm.
+   Speiler @media-blokken i styles.module.css. */
+@media (max-width: 480px) {
+  .${e.donor} { max-width: 100%; }
+  .${e.amountSection},
+  .${e.impactRow},
+  .${e.actionsSection} { width: 100%; }
+  .${e.vippsButton} { width: 100%; max-width: 300px; }
+}
 `;
 }
 export {
-  me as Donor
+  ue as Donor
 };

package/dist/components/Donor/styles.module.css.js

@@ -1,42 +1,42 @@
 "use client";
-const t = "_donor_xzqak_1", o = "_tabsWrapper_xzqak_14", a = "_content_xzqak_35", n = "_amountSection_xzqak_47", _ = "_amountLabel_xzqak_55", c = "_amountButtons_xzqak_64", s = "_customAmountField_xzqak_75", e = "_impactRow_xzqak_80", i = "_heartIcon_xzqak_88", p = "_impactText_xzqak_102", u = "_impactAmount_xzqak_112", m = "_actionsSection_xzqak_117", x = "_vippsButton_xzqak_127", k = "_vippsButtonLabel_xzqak_157", r = "_vippsLogo_xzqak_166", l = "_avtalegiroLink_xzqak_179", q = "_tabHeartIcon_xzqak_184", z = "_tabPanel_xzqak_214", b = {
+const t = "_donor_5kh8b_1", o = "_tabsWrapper_5kh8b_14", n = "_content_5kh8b_35", a = "_amountSection_5kh8b_47", _ = "_amountLabel_5kh8b_55", c = "_amountButtons_5kh8b_64", s = "_customAmountField_5kh8b_75", e = "_impactRow_5kh8b_80", i = "_heartIcon_5kh8b_88", p = "_impactText_5kh8b_102", b = "_impactAmount_5kh8b_112", u = "_actionsSection_5kh8b_117", m = "_vippsButton_5kh8b_127", h = "_vippsButtonLabel_5kh8b_157", k = "_vippsLogo_5kh8b_166", r = "_avtalegiroLink_5kh8b_179", l = "_tabHeartIcon_5kh8b_184", v = "_tabPanel_5kh8b_214", L = {
   donor: t,
   tabsWrapper: o,
-  content: a,
-  amountSection: n,
+  content: n,
+  amountSection: a,
   amountLabel: _,
   amountButtons: c,
   customAmountField: s,
   impactRow: e,
   heartIcon: i,
   impactText: p,
-  impactAmount: u,
-  actionsSection: m,
-  vippsButton: x,
-  vippsButtonLabel: k,
-  vippsLogo: r,
-  avtalegiroLink: l,
-  tabHeartIcon: q,
-  tabPanel: z
+  impactAmount: b,
+  actionsSection: u,
+  vippsButton: m,
+  vippsButtonLabel: h,
+  vippsLogo: k,
+  avtalegiroLink: r,
+  tabHeartIcon: l,
+  tabPanel: v
 };
 export {
-  m as actionsSection,
+  u as actionsSection,
   c as amountButtons,
   _ as amountLabel,
-  n as amountSection,
-  l as avtalegiroLink,
-  a as content,
+  a as amountSection,
+  r as avtalegiroLink,
+  n as content,
   s as customAmountField,
-  b as default,
+  L as default,
   t as donor,
   i as heartIcon,
-  u as impactAmount,
+  b as impactAmount,
   e as impactRow,
   p as impactText,
-  q as tabHeartIcon,
-  z as tabPanel,
+  l as tabHeartIcon,
+  v as tabPanel,
   o as tabsWrapper,
-  x as vippsButton,
-  k as vippsButtonLabel,
-  r as vippsLogo
+  m as vippsButton,
+  h as vippsButtonLabel,
+  k as vippsLogo
 };