rk-designsystem 1.3.0 → 1.3.2

package/dist/components/Donor/index.js

@@ -0,0 +1,382 @@
+"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 { 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 i from "./styles.module.css.js";
+const L = () => /* @__PURE__ */ t(
+  "svg",
+  {
+    width: "19",
+    height: "18",
+    viewBox: "0 0 19.2905 18.125",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: /* @__PURE__ */ t(
+      "path",
+      {
+        d: "M13.7703 0C15.2893 5.94513e-05 16.5938 0.76302 17.6755 1.84473C20.0479 4.2172 19.8818 8.19893 16.6755 11.4053L10.1765 17.9043C10.0359 18.0449 9.84412 18.1249 9.64527 18.125C9.44642 18.125 9.25564 18.0458 9.115 17.9053L2.615 11.4053C-0.591399 8.19889 -0.757477 4.21721 1.615 1.84473C2.69673 0.763025 4.00125 0 5.52027 0C6.86917 5.33075e-05 8.24623 0.601427 9.64527 1.84375C11.0443 0.601491 12.4214 0 13.7703 0Z",
+        fill: "#B42419"
+      }
+    )
+  }
+), ee = () => /* @__PURE__ */ t(
+  "svg",
+  {
+    width: "16",
+    height: "15",
+    viewBox: "0 0 25.721 24.166",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: /* @__PURE__ */ t(
+      "path",
+      {
+        d: "M18.3605 0C20.3858 2.70913e-05 22.1252 1.01674 23.5675 2.45898C26.7308 5.62229 26.5097 10.9318 22.2345 15.207L13.5685 23.873C13.381 24.0605 13.1256 24.166 12.8605 24.166C12.5953 24.166 12.341 24.0606 12.1535 23.873L3.48648 15.207C-0.78872 10.9319 -1.00983 5.6223 2.15347 2.45898C3.59576 1.01676 5.33517 -7.94691e-07 7.3605 0C9.15905 2.54762e-05 10.9951 0.801582 12.8605 2.45801C14.7259 0.801611 16.562 0 18.3605 0ZM18.3605 2C17.0526 2 15.4585 2.64907 13.5675 4.54004C13.38 4.72756 13.1257 4.83299 12.8605 4.83301C12.5953 4.83301 12.341 4.72755 12.1535 4.54004C10.2625 2.64908 8.6684 2.00003 7.3605 2C6.05266 2 4.7918 2.64884 3.56753 3.87305C1.39752 6.04307 1.17573 10.0682 4.90054 13.793L12.8605 21.752L20.8205 13.793C24.5452 10.0682 24.3235 6.04306 22.1535 3.87305C20.9292 2.64881 19.6683 2.00003 18.3605 2Z",
+        fill: "#D52B1E"
+      }
+    )
+  }
+), te = () => /* @__PURE__ */ t(
+  "svg",
+  {
+    width: "64",
+    height: "16",
+    viewBox: "0 0 64 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: /* @__PURE__ */ t(
+      "path",
+      {
+        d: "M34.0879 0C36.392 2.1216e-05 39.0869 1.89904 39.0869 5.95996C39.0868 10.2022 36.4949 12.2627 33.8408 12.2627C32.4216 12.2627 31.1671 11.7169 30.2002 10.4238V16H27.2998V0.323242H30.2002V1.91895C31.0027 0.82803 32.2573 0 34.0879 0ZM48.0156 0C50.3197 0.000234933 53.0137 1.89927 53.0137 5.95996C53.0136 10.2021 50.4223 12.2625 47.7686 12.2627C46.3493 12.2627 45.0939 11.7169 44.127 10.4238V16H41.2266V0.323242H44.1279V1.91895C44.9302 0.828069 46.185 0 48.0156 0ZM12.2402 6.58594C12.7958 6.20212 13.5569 6.36346 14.0508 7.09082C15.285 8.86842 16.8693 10.081 18.9053 10.0811L19.2695 10.0693C21.0418 9.95993 22.0986 9.0452 23.1016 7.75781C23.6771 7.01059 24.4387 6.86826 24.9531 7.27246C25.5084 7.69677 25.5289 8.46462 24.9531 9.21191C23.4106 11.2322 21.4357 12.4443 18.9053 12.4443C16.1488 12.4443 13.7835 10.9494 12.0762 8.38379C11.6033 7.71699 11.726 6.94964 12.2402 6.58594ZM59.1445 0C61.5312 0 63.2798 1.09116 64 3.83887L61.3877 4.24219C61.3465 2.84847 60.4618 2.42489 59.207 2.4248C58.2195 2.4248 57.499 2.84883 57.499 3.51562C57.4992 4.04069 57.8697 4.58616 58.9805 4.78809L60.9756 5.15137C62.9298 5.51551 63.9795 6.76793 63.9795 8.48535C63.9792 11.0102 61.6543 12.2627 59.4736 12.2627C57.1698 12.2626 54.6192 11.0904 54.208 8.24219L56.8203 7.83789C56.9644 9.31277 57.8903 9.83881 59.3711 9.83887C60.5024 9.83887 61.2636 9.43452 61.2637 8.72754C61.2637 8.10123 60.9141 7.63618 59.6797 7.41406L57.8691 7.09082C55.9565 6.74715 54.7842 5.41356 54.7842 3.7168C54.7844 1.09068 57.211 7.8171e-05 59.1445 0ZM5.9248 8.16113L8.63965 0.302734H11.8281L7.09668 11.959H4.73145L0 0.302734H3.18848L5.9248 8.16113ZM33.1826 2.50488C31.5988 2.50497 30.2003 3.61605 30.2002 6.10059C30.2002 8.4844 31.5987 9.73711 33.1621 9.7373C34.643 9.7373 36.166 8.56534 36.166 6.10059C36.1659 3.67634 34.6431 2.50488 33.1826 2.50488ZM47.1104 2.50488C45.5265 2.50488 44.1271 3.61595 44.127 6.10059C44.127 8.48459 45.5262 9.7373 47.0898 9.7373C48.5708 9.73729 50.0928 8.56533 50.0928 6.10059C50.0926 3.67645 48.5708 2.50499 47.1104 2.50488ZM21.0039 2.06055C21.8679 2.06067 22.6084 2.70741 22.6084 3.63672L22.5996 3.80762C22.5149 4.64394 21.8138 5.2118 21.0039 5.21191C20.1401 5.21191 19.3996 4.56573 19.3994 3.63672C19.3994 2.70732 20.14 2.06055 21.0039 2.06055Z",
+        fill: "white"
+      }
+    )
+  }
+), ie = [
+  { value: 220, label: "220 kr" },
+  { value: 345, label: "345 kr" },
+  { value: 660, label: "660 kr" }
+], me = ({
+  "data-color": e = "primary-color-red",
+  amounts: N = ie,
+  defaultAmount: I = 345,
+  oneTimeLabel: B = "En gang",
+  monthlyLabel: z = "Hver måned",
+  customAmountPlaceholder: x = "Valgfritt beløp",
+  amountLabel: H = "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",
+  onVippsClick: f,
+  onAvtalegiroClick: c,
+  onAmountChange: r,
+  showVippsButton: T = !0,
+  showAvtalegiroLink: V = !0,
+  showImpactMessage: j = !0,
+  heartVariant: E = "outlined"
+}) => {
+  const v = J(), [d, F] = m("monthly"), [C, P] = m(I), [u, b] = m(""), [w, h] = m(!1);
+  K(() => {
+    const a = "rk-donor-inline-styles";
+    if (typeof document > "u" || document.getElementById(a)) return;
+    const n = ae(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 = a.target.value;
+    b(n), h(!0);
+    const o = parseInt(n, 10);
+    o > 0 && (r == null || r(o, d));
+  }, q = () => {
+    h(!0);
+  }, G = (a) => {
+    const n = a;
+    F(n), r == null || r(p, n);
+  }, R = () => {
+    p > 0 && (f == null || f(p, d));
+  }, U = () => {
+    c == null || c();
+  }, O = () => {
+    const a = `${p} ${Z}`, 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: [
+    /* @__PURE__ */ l("div", { className: i.amountSection, children: [
+      /* @__PURE__ */ t(Y, { className: i.amountLabel, "data-size": "sm", id: v, children: H }),
+      /* @__PURE__ */ t(
+        "div",
+        {
+          className: i.amountButtons,
+          role: "group",
+          "aria-labelledby": v,
+          children: N.map((a) => {
+            const n = !w && C === a.value;
+            return /* @__PURE__ */ t(
+              Q,
+              {
+                variant: n ? "primary" : "secondary",
+                "data-color": n ? "primary-color-red" : "neutral",
+                "aria-pressed": n,
+                onClick: () => D(a.value),
+                children: a.label
+              },
+              a.value
+            );
+          })
+        }
+      ),
+      /* @__PURE__ */ t("div", { className: i.customAmountField, children: /* @__PURE__ */ t(
+        X,
+        {
+          "aria-label": x,
+          placeholder: x,
+          value: u,
+          onChange: W,
+          onFocus: q,
+          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() })
+    ] }),
+    /* @__PURE__ */ l("div", { className: i.actionsSection, children: [
+      T && /* @__PURE__ */ l(
+        "button",
+        {
+          className: i.vippsButton,
+          onClick: R,
+          type: "button",
+          "aria-label": `${g} Vipps`,
+          "data-brand-exception": "vipps",
+          children: [
+            /* @__PURE__ */ t("span", { className: i.vippsButtonLabel, children: g }),
+            /* @__PURE__ */ t("span", { className: i.vippsLogo, children: /* @__PURE__ */ t(te, {}) })
+          ]
+        }
+      ),
+      V && /* @__PURE__ */ t(
+        A,
+        {
+          href: S,
+          "data-color": "neutral",
+          className: i.avtalegiroLink,
+          onClick: (a) => {
+            c && (a.preventDefault(), U());
+          },
+          children: k
+        }
+      )
+    ] })
+  ] }), _ = e === "primary" ? "primary-color-red" : e;
+  return /* @__PURE__ */ t("div", { className: i.donor, "data-color": _, children: /* @__PURE__ */ l(
+    s,
+    {
+      defaultValue: "monthly",
+      onChange: G,
+      "data-size": "md",
+      className: i.tabsWrapper,
+      children: [
+        /* @__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(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 })
+      ]
+    }
+  ) });
+};
+function ae(e) {
+  return `
+.${e.donor} {
+  border-radius: 16px;
+  overflow: hidden;
+  background-color: var(--ds-color-primary-color-red-surface-default, #ffffff);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  max-width: 344px;
+  padding-top: var(--ds-size-2, 8px);
+}
+.${e.tabsWrapper} {
+  width: 100%;
+  overflow: hidden;
+  border-radius: 4px;
+}
+.${e.tabsWrapper} [role="tablist"] {
+  display: flex !important;
+  width: 100% !important;
+}
+.${e.tabPanel} {
+  width: 100%;
+  padding: 0;
+}
+.${e.tabsWrapper} [role="tab"] {
+  flex: 1 1 50% !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  text-align: center;
+  white-space: nowrap;
+}
+.${e.content} {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-size-6, 24px);
+  align-items: center;
+  justify-content: center;
+  padding: var(--ds-size-6, 24px);
+  width: 100%;
+  box-sizing: border-box;
+}
+.${e.amountSection} {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-size-2, 8px);
+  align-items: flex-start;
+  width: 296px;
+}
+.${e.amountLabel} {
+  font-weight: var(--ds-font-weight-regular, 400);
+  font-size: var(--ds-font-size-3, 16px);
+  line-height: 1.5;
+  letter-spacing: 0.04px;
+  color: var(--ds-color-neutral-text-default, #333333);
+  margin: 0;
+}
+.${e.amountButtons} {
+  display: flex;
+  gap: var(--ds-size-2, 8px);
+  align-items: flex-start;
+  width: 100%;
+}
+.${e.amountButtons} > button {
+  flex: 1;
+}
+.${e.customAmountField} {
+  width: 100%;
+}
+.${e.impactRow} {
+  display: flex;
+  gap: var(--ds-size-3, 12px);
+  align-items: center;
+  width: 296px;
+  min-height: 48px;
+}
+.${e.heartIcon} {
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.${e.heartIcon} svg {
+  width: 19px;
+  height: 18px;
+}
+.${e.impactText} {
+  flex: 1;
+  font-weight: var(--ds-font-weight-regular, 400);
+  font-size: var(--ds-font-size-3, 16px);
+  line-height: 1.5;
+  letter-spacing: 0.04px;
+  color: var(--ds-color-neutral-text-default, #333333);
+  margin: 0;
+}
+.${e.impactAmount} {
+  font-weight: var(--ds-font-weight-semibold, 600);
+}
+.${e.actionsSection} {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-size-2, 8px);
+  align-items: center;
+  justify-content: center;
+  width: 296px;
+}
+.${e.vippsButton} {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  justify-content: center;
+  width: 300px;
+  height: 44px;
+  padding: 12px 16px;
+  background-color: #ff5b24;
+  border: none;
+  border-radius: var(--ds-border-radius-xl, 12px);
+  overflow: hidden;
+  cursor: pointer;
+  transition: opacity 0.15s ease;
+  font-family: inherit;
+}
+.${e.vippsButton}:hover {
+  opacity: 0.9;
+}
+.${e.vippsButton}:active {
+  opacity: 0.8;
+}
+.${e.vippsButton}:focus-visible {
+  outline: 2px solid var(--ds-color-neutral-border-default, #797979);
+  outline-offset: 2px;
+}
+.${e.vippsButtonLabel} {
+  font-family: inherit;
+  font-weight: 700;
+  font-size: 18.5px;
+  line-height: 1;
+  color: #ffffff;
+  white-space: nowrap;
+}
+.${e.vippsLogo} {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex-shrink: 0;
+}
+.${e.vippsLogo} svg {
+  width: 64px;
+  height: 16px;
+}
+.${e.avtalegiroLink} {
+  text-align: center;
+}
+.${e.tabHeartIcon} {
+  display: inline-flex;
+  align-items: center;
+  margin-right: 4px;
+  vertical-align: middle;
+}
+.${e.tabHeartIcon} svg {
+  width: 16px;
+  height: 15px;
+}
+`;
+}
+export {
+  me as Donor
+};

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

@@ -0,0 +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 = {
+  donor: t,
+  tabsWrapper: o,
+  content: a,
+  amountSection: n,
+  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
+};
+export {
+  m as actionsSection,
+  c as amountButtons,
+  _ as amountLabel,
+  n as amountSection,
+  l as avtalegiroLink,
+  a as content,
+  s as customAmountField,
+  b as default,
+  t as donor,
+  i as heartIcon,
+  u as impactAmount,
+  e as impactRow,
+  p as impactText,
+  q as tabHeartIcon,
+  z as tabPanel,
+  o as tabsWrapper,
+  x as vippsButton,
+  k as vippsButtonLabel,
+  r as vippsLogo
+};

package/dist/components/Dropdown/index.js

@@ -0,0 +1,12 @@
+"use client";
+import { Dropdown as o, DropdownButton as n, DropdownHeading as r, DropdownItem as t, DropdownList as d, DropdownTrigger as p, DropdownTriggerContext as w } from "@digdir/designsystemet-react";
+const e = o, s = p, g = w, i = r, a = d, c = t, $ = n;
+export {
+  e as Dropdown,
+  $ as DropdownButton,
+  i as DropdownHeading,
+  c as DropdownItem,
+  a as DropdownList,
+  s as DropdownTrigger,
+  g as DropdownTriggerContext
+};

package/dist/components/ErrorSummary/index.js

@@ -0,0 +1,6 @@
+"use client";
+import { ErrorSummary as r } from "@digdir/designsystemet-react";
+const o = r;
+export {
+  o as ErrorSummary
+};

package/dist/components/Field/index.js

@@ -0,0 +1,10 @@
+"use client";
+import { Field as e, FieldCounter as i, FieldDescription as l } from "@digdir/designsystemet-react";
+const s = e, o = l, t = i;
+o.displayName = "Field.Description";
+t.displayName = "Field.Counter";
+export {
+  s as Field,
+  t as FieldCounter,
+  o as FieldDescription
+};

package/dist/components/Fieldset/index.js

@@ -0,0 +1,6 @@
+"use client";
+import { Fieldset as e } from "@digdir/designsystemet-react";
+const s = e;
+export {
+  s as Fieldset
+};