rk-designsystem 1.3.4 → 1.4.0

package/dist/components/Footer/index.js

@@ -1,54 +1,55 @@
 "use client";
-import { jsxs as n, jsx as t, Fragment as ne } from "react/jsx-runtime";
-import X from "react";
+import { jsxs as n, jsx as t, Fragment as ie } from "react/jsx-runtime";
+import F from "react";
 import e from "./styles.module.css.js";
 import { Link as c } from "../Link/index.js";
-import { Button as ie } from "../Button/index.js";
-import { Input as se } from "../Input/index.js";
+import { Button as se } from "../Button/index.js";
+import { Input as le } from "../Input/index.js";
 import { GraphicElement as u } from "../GraphicElement/index.js";
-import { RedCrossLogo as L } from "../../assets/logos/RedCrossLogo.js";
-import { useLanguageOptional as le } from "../../context/LanguageContext.js";
-const ue = ({
+import { RedCrossLogo as P } from "../../assets/logos/RedCrossLogo.js";
+import { useLanguageOptional as oe } from "../../context/LanguageContext.js";
+const ve = ({
   "data-color": p = "neutral",
   variant: a = "default",
-  colorScheme: F,
-  columns: v,
+  colorScheme: v,
+  columns: w,
   showGraphicElements: m = !1,
   newsletterDescription: K = "Tekst om rødekors som kan være rundt 2 linjebrudd i lengde.",
   newsletterPlaceholder: O = "Input tekst",
-  newsletterButtonText: P = "Meld deg på",
-  newsletterConsentText: V,
-  onNewsletterSubmit: w,
-  hideNewsletter: G = !1,
-  shortcutsLinks: W,
-  linksLinks: Y,
-  shortcutsTitle: T,
-  linksTitle: R,
-  visitingAddress: N = ["Hausmannsgate 7 (Korsegården)", "0186 Oslo"],
-  organizationNumber: b = "XXX XXX XXX",
-  email: k = "post@redcross.no",
-  showPrimaryLogo: z = !0,
+  newsletterInputLabel: V,
+  newsletterButtonText: T = "Meld deg på",
+  newsletterConsentText: G,
+  onNewsletterSubmit: N,
+  hideNewsletter: W = !1,
+  shortcutsLinks: Y,
+  linksLinks: A,
+  shortcutsTitle: R,
+  linksTitle: S,
+  visitingAddress: b = ["Hausmannsgate 7 (Korsegården)", "0186 Oslo"],
+  organizationNumber: k = "XXX XXX XXX",
+  email: z = "post@redcross.no",
+  showPrimaryLogo: $ = !0,
   primaryLogoSrc: d,
-  primaryLogoAlt: $ = "Røde Kors Logo",
+  primaryLogoAlt: C = "Røde Kors Logo",
   whiteSectionSlot: f,
-  socialLinks: S = [],
+  socialLinks: E = [],
   contactPersons: j = [],
   legalLinks: g = [],
-  socialLinksTitle: E,
-  contactPersonsTitle: M
+  socialLinksTitle: M,
+  contactPersonsTitle: I
 } = {}) => {
-  const C = (/* @__PURE__ */ new Date()).getFullYear(), { t: A } = le(), y = p === "primary" ? "primary-color-red" : p === "additional" ? "additional-color-ocean" : p, [I, H] = X.useState(""), s = (i, l) => {
-    const o = A(i);
+  const y = (/* @__PURE__ */ new Date()).getFullYear(), { t: H } = oe(), L = p === "primary" ? "primary-color-red" : p === "additional" ? "additional-color-ocean" : p, [B, q] = F.useState(""), s = (i, l) => {
+    const o = H(i);
     return o === i ? l : o;
   };
-  X.useEffect(() => {
+  F.useEffect(() => {
     const i = "rk-footer-inline-styles";
     if (typeof document > "u" || document.getElementById(i)) return;
-    const l = oe(e), o = document.createElement("style");
+    const l = re(e), o = document.createElement("style");
     o.id = i, o.textContent = l, document.head.prepend(o);
   }, []);
-  const q = (i) => {
-    i.preventDefault(), w == null || w(I);
+  const J = (i) => {
+    i.preventDefault(), N == null || N(B);
   }, x = [
     { label: s("footer.shortcutsLinks.services", "Tilbudene"), href: "#" },
     { label: s("footer.shortcutsLinks.volunteer", "Bli frivillig"), href: "#" },
@@ -56,26 +57,26 @@ const ue = ({
     { label: s("footer.shortcutsLinks.about", "Om Røde Kors"), href: "#" },
     { label: s("footer.shortcutsLinks.support", "Støtt arbeidet"), href: "#" },
     { label: s("footer.shortcutsLinks.contact", "Kontakt oss"), href: "#" }
-  ], B = [
+  ], D = [
     { label: s("footer.legal.privacy", "Personvern"), href: "#" },
     { label: s("footer.legal.press", "For presse"), href: "#" },
     { label: s("footer.legal.procurement", "Regler for innkjøp"), href: "#" },
     { label: s("footer.legal.whistleblowing", "Varsling/Misconduct"), href: "#" }
-  ], J = /* @__PURE__ */ n(ne, { children: [
+  ], Q = /* @__PURE__ */ n(ie, { children: [
     'Ved å trykke "',
-    P,
+    T,
     '" samtykker du til å motta nyhetsbrev.',
     /* @__PURE__ */ t("br", {}),
     "Du kan når som helst ",
     /* @__PURE__ */ t(c, { href: "#", children: "melde deg av" }),
     " nyhetsbrevet uten kostnad."
-  ] }), Q = W || x, U = Y || B, Z = () => /* @__PURE__ */ n("div", { className: e.socialLinksSection, children: [
-    E && /* @__PURE__ */ t("h3", { className: e.socialLinksTitle, children: E }),
-    /* @__PURE__ */ t("ul", { className: e.socialLinksList, children: S.map((i, l) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ n(c, { href: i.href, className: e.socialLink, children: [
+  ] }), U = Y || x, Z = A || D, _ = () => /* @__PURE__ */ n("div", { className: e.socialLinksSection, children: [
+    M && /* @__PURE__ */ t("h3", { className: e.socialLinksTitle, children: M }),
+    /* @__PURE__ */ t("ul", { className: e.socialLinksList, children: E.map((i, l) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ n(c, { href: i.href, className: e.socialLink, children: [
       /* @__PURE__ */ t("span", { className: e.socialLinkIcon, children: i.icon }),
       i.label
     ] }) }, l)) })
-  ] }), _ = ({ person: i }) => /* @__PURE__ */ n("div", { className: e.contactPersonCard, children: [
+  ] }), ee = ({ person: i }) => /* @__PURE__ */ n("div", { className: e.contactPersonCard, children: [
     /* @__PURE__ */ t("p", { className: e.contactPersonName, children: i.name }),
     /* @__PURE__ */ t("p", { className: e.contactPersonRole, children: i.role }),
     /* @__PURE__ */ n("div", { className: e.contactPersonDetails, children: [
@@ -97,10 +98,10 @@ const ue = ({
       ] }),
       i.address && /* @__PURE__ */ t("p", { className: e.contactPersonAddress, children: i.address })
     ] })
-  ] }), ee = () => /* @__PURE__ */ n("div", { className: e.contactPersonsSection, children: [
-    M && /* @__PURE__ */ t("h3", { className: e.contactPersonsTitle, children: M }),
-    /* @__PURE__ */ t("div", { className: e.contactPersonsGrid, children: j.map((i, l) => /* @__PURE__ */ t(_, { person: i }, l)) })
-  ] }), te = () => /* @__PURE__ */ t("ul", { className: e.legalLinksRow, children: g.map((i, l) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(c, { href: i.href, className: e.legalLink, children: i.label }) }, l)) });
+  ] }), te = () => /* @__PURE__ */ n("div", { className: e.contactPersonsSection, children: [
+    I && /* @__PURE__ */ t("h3", { className: e.contactPersonsTitle, children: I }),
+    /* @__PURE__ */ t("div", { className: e.contactPersonsGrid, children: j.map((i, l) => /* @__PURE__ */ t(ee, { person: i }, l)) })
+  ] }), ae = () => /* @__PURE__ */ t("ul", { className: e.legalLinksRow, children: g.map((i, l) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(c, { href: i.href, className: e.legalLink, children: i.label }) }, l)) });
   if (a === "columns") {
     const i = [
       {
@@ -115,26 +116,26 @@ const ue = ({
         title: s("footer.shortcuts", "Snarveier"),
         links: x
       }
-    ], l = v && v.length > 0 ? v : i, o = g.length > 0 ? g : B;
-    return /* @__PURE__ */ n("footer", { className: e.footer, "data-color": y, "data-color-scheme": F, children: [
+    ], l = w && w.length > 0 ? w : i, o = g.length > 0 ? g : D;
+    return /* @__PURE__ */ n("footer", { className: e.footer, "data-color": L, "data-color-scheme": v, children: [
       /* @__PURE__ */ t("div", { className: e.dpMain, children: /* @__PURE__ */ n("div", { className: e.dpContainer, children: [
         /* @__PURE__ */ t("div", { className: e.dpColumns, children: l.map((r, h) => /* @__PURE__ */ n("nav", { className: e.dpColumn, "aria-label": r.title, children: [
           /* @__PURE__ */ t("h3", { className: e.dpColTitle, children: r.title }),
-          /* @__PURE__ */ t("ul", { className: e.dpList, children: r.links.map((D, ae) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(c, { href: D.href, className: e.dpLink, children: D.label }) }, ae)) })
+          /* @__PURE__ */ t("ul", { className: e.dpList, children: r.links.map((X, ne) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(c, { href: X.href, className: e.dpLink, children: X.label }) }, ne)) })
         ] }, h)) }),
         /* @__PURE__ */ t("hr", { className: e.dpDivider }),
         /* @__PURE__ */ n("div", { className: e.dpMeta, children: [
           /* @__PURE__ */ n("div", { className: e.dpMetaCol, children: [
             /* @__PURE__ */ t("h4", { className: e.dpMetaTitle, children: s("footer.contact.visitingAddress", "Besøksadresse") }),
-            N.map((r, h) => /* @__PURE__ */ t("p", { className: e.dpMetaText, children: r }, h))
+            b.map((r, h) => /* @__PURE__ */ t("p", { className: e.dpMetaText, children: r }, h))
           ] }),
           /* @__PURE__ */ n("div", { className: e.dpMetaCol, children: [
             /* @__PURE__ */ t("h4", { className: e.dpMetaTitle, children: s("footer.contact.organizationNumber", "Organisasjonsnummer") }),
-            /* @__PURE__ */ t("p", { className: e.dpMetaText, children: b })
+            /* @__PURE__ */ t("p", { className: e.dpMetaText, children: k })
           ] }),
           /* @__PURE__ */ n("div", { className: e.dpMetaCol, children: [
             /* @__PURE__ */ t("h4", { className: e.dpMetaTitle, children: s("footer.contact.email", "E-post") }),
-            /* @__PURE__ */ t("p", { className: e.dpMetaText, children: k })
+            /* @__PURE__ */ t("p", { className: e.dpMetaText, children: z })
           ] })
         ] }),
         /* @__PURE__ */ t("hr", { className: e.dpDivider }),
@@ -142,51 +143,51 @@ const ue = ({
           /* @__PURE__ */ t("ul", { className: e.dpLegal, children: o.map((r, h) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(c, { href: r.href, className: e.dpLegalLink, children: r.label }) }, h)) }),
           /* @__PURE__ */ n("p", { className: e.dpCopyright, children: [
             "© ",
-            C,
+            y,
             " ",
             s("footer.copyright", "Røde Kors")
           ] })
         ] })
       ] }) }),
-      z && /* @__PURE__ */ t("div", { className: e.whiteSection, "data-color-scheme": "light", children: /* @__PURE__ */ t("div", { className: e.whiteContainer, children: /* @__PURE__ */ t("div", { className: e.whiteContent, children: d ? /* @__PURE__ */ t(
+      $ && /* @__PURE__ */ t("div", { className: e.whiteSection, "data-color-scheme": "light", children: /* @__PURE__ */ t("div", { className: e.whiteContainer, children: /* @__PURE__ */ t("div", { className: e.whiteContent, children: d ? /* @__PURE__ */ t(
         "img",
         {
           src: d,
-          alt: $,
+          alt: C,
           className: e.logo,
           loading: "lazy"
         }
-      ) : /* @__PURE__ */ t("div", { className: e.logo, children: /* @__PURE__ */ t(L, { className: e.redCrossLogo }) }) }) }) })
+      ) : /* @__PURE__ */ t("div", { className: e.logo, children: /* @__PURE__ */ t(P, { className: e.redCrossLogo }) }) }) }) })
     ] });
   }
-  return a === "contact" ? /* @__PURE__ */ n("footer", { className: e.footer, "data-color": y, children: [
+  return a === "contact" ? /* @__PURE__ */ n("footer", { className: e.footer, "data-color": L, "data-color-scheme": v, children: [
     /* @__PURE__ */ t("div", { className: e.mainSection, children: /* @__PURE__ */ n("div", { className: e.mainContainer, children: [
       m && /* @__PURE__ */ t("div", { className: e.graphicElementTopRight, children: /* @__PURE__ */ t(u, { shape: "angle", position: "top-right", size: "md", "aria-hidden": !0 }) }),
       /* @__PURE__ */ n("div", { className: e.contentRowContact, children: [
-        S.length > 0 && /* @__PURE__ */ t(Z, {}),
-        j.length > 0 && /* @__PURE__ */ t(ee, {})
+        E.length > 0 && /* @__PURE__ */ t(_, {}),
+        j.length > 0 && /* @__PURE__ */ t(te, {})
       ] }),
       /* @__PURE__ */ t("div", { className: e.divider }),
       /* @__PURE__ */ n("div", { className: e.contactSection, children: [
         /* @__PURE__ */ n("div", { className: e.contactColumn, children: [
           /* @__PURE__ */ t("h4", { className: e.contactTitle, children: s("footer.contact.visitingAddress", "Besøks adresse") }),
-          /* @__PURE__ */ t("div", { className: e.contactContent, children: N.map((i, l) => /* @__PURE__ */ t("p", { children: i }, l)) })
+          /* @__PURE__ */ t("div", { className: e.contactContent, children: b.map((i, l) => /* @__PURE__ */ t("p", { children: i }, l)) })
         ] }),
         /* @__PURE__ */ n("div", { className: e.contactColumn, children: [
           /* @__PURE__ */ t("h4", { className: e.contactTitle, children: s("footer.contact.organizationNumber", "Organisasjonsnummer") }),
-          /* @__PURE__ */ t("p", { className: e.contactContent, children: b })
+          /* @__PURE__ */ t("p", { className: e.contactContent, children: k })
         ] }),
         /* @__PURE__ */ n("div", { className: e.contactColumn, children: [
           /* @__PURE__ */ t("h4", { className: e.contactTitle, children: s("footer.contact.email", "E-post") }),
-          /* @__PURE__ */ t("p", { className: e.contactContent, children: k })
+          /* @__PURE__ */ t("p", { className: e.contactContent, children: z })
         ] })
       ] }),
       /* @__PURE__ */ t("div", { className: e.divider }),
       /* @__PURE__ */ n("div", { className: e.bottomRowContact, children: [
-        g.length > 0 && /* @__PURE__ */ t(te, {}),
+        g.length > 0 && /* @__PURE__ */ t(ae, {}),
         /* @__PURE__ */ n("p", { className: e.copyrightText, children: [
           "© ",
-          C,
+          y,
           " ",
           s("footer.copyright", "Rødekors")
         ] })
@@ -194,46 +195,47 @@ const ue = ({
       m && /* @__PURE__ */ t("div", { className: e.graphicElementBottomLeft, children: /* @__PURE__ */ t(u, { shape: "angle", position: "bottom-left", size: "md", "aria-hidden": !0 }) })
     ] }) }),
     /* @__PURE__ */ t("div", { className: e.whiteSection, children: /* @__PURE__ */ t("div", { className: e.whiteContainer, children: /* @__PURE__ */ n("div", { className: e.whiteContent, children: [
-      z && (d ? /* @__PURE__ */ t(
+      $ && (d ? /* @__PURE__ */ t(
         "img",
         {
           src: d,
-          alt: $,
+          alt: C,
           className: e.logo,
           loading: "lazy"
         }
-      ) : /* @__PURE__ */ t("div", { className: e.logo, children: /* @__PURE__ */ t(L, { className: e.redCrossLogo }) })),
+      ) : /* @__PURE__ */ t("div", { className: e.logo, children: /* @__PURE__ */ t(P, { className: e.redCrossLogo }) })),
       f && /* @__PURE__ */ t("div", { className: e.slotLarge, children: f })
     ] }) }) })
-  ] }) : /* @__PURE__ */ n("footer", { className: e.footer, "data-color": y, children: [
+  ] }) : /* @__PURE__ */ n("footer", { className: e.footer, "data-color": L, "data-color-scheme": v, children: [
     /* @__PURE__ */ t("div", { className: e.mainSection, children: /* @__PURE__ */ n("div", { className: e.mainContainer, children: [
       m && /* @__PURE__ */ t("div", { className: e.graphicElementTopRight, children: /* @__PURE__ */ t(u, { shape: "angle", position: "top-right", size: "md", "aria-hidden": !0 }) }),
       /* @__PURE__ */ n("div", { className: e.contentRow, children: [
-        !G && /* @__PURE__ */ n("div", { className: e.newsletterSection, children: [
+        !W && /* @__PURE__ */ n("div", { className: e.newsletterSection, children: [
           /* @__PURE__ */ t("p", { className: e.newsletterDescription, children: K }),
-          /* @__PURE__ */ t("form", { className: e.newsletterForm, onSubmit: q, children: /* @__PURE__ */ n("div", { className: e.newsletterInputGroup, children: [
+          /* @__PURE__ */ t("form", { className: e.newsletterForm, onSubmit: J, children: /* @__PURE__ */ n("div", { className: e.newsletterInputGroup, children: [
             /* @__PURE__ */ t(
-              se,
+              le,
               {
                 type: "email",
+                "aria-label": V ?? s("footer.newsletterEmailLabel", "E-postadresse"),
                 placeholder: O,
-                value: I,
-                onChange: (i) => H(i.target.value),
+                value: B,
+                onChange: (i) => q(i.target.value),
                 className: e.newsletterInput
               }
             ),
-            /* @__PURE__ */ t(ie, { type: "submit", variant: "primary", "data-color": "neutral", children: P })
+            /* @__PURE__ */ t(se, { type: "submit", variant: "primary", "data-color": "neutral", children: T })
           ] }) }),
-          /* @__PURE__ */ t("p", { className: e.consentText, children: V || J })
+          /* @__PURE__ */ t("p", { className: e.consentText, children: G || Q })
         ] }),
         /* @__PURE__ */ n("div", { className: e.linksSection, children: [
-          /* @__PURE__ */ n("nav", { className: e.linksColumn, "aria-label": T || s("footer.shortcuts", "Snarveier"), children: [
-            /* @__PURE__ */ t("h3", { className: e.linksTitle, children: T || s("footer.shortcuts", "Snarveier") }),
-            /* @__PURE__ */ t("ul", { className: e.linksList, children: Q.map((i, l) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(c, { href: i.href, className: e.footerLink, children: i.label }) }, l)) })
-          ] }),
-          /* @__PURE__ */ n("nav", { className: e.linksColumn, "aria-label": R || s("footer.links", "Lenker"), children: [
-            /* @__PURE__ */ t("h3", { className: e.linksTitle, children: R || s("footer.links", "Lenker") }),
+          /* @__PURE__ */ n("nav", { className: e.linksColumn, "aria-label": R || s("footer.shortcuts", "Snarveier"), children: [
+            /* @__PURE__ */ t("h3", { className: e.linksTitle, children: R || s("footer.shortcuts", "Snarveier") }),
             /* @__PURE__ */ t("ul", { className: e.linksList, children: U.map((i, l) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(c, { href: i.href, className: e.footerLink, children: i.label }) }, l)) })
+          ] }),
+          /* @__PURE__ */ n("nav", { className: e.linksColumn, "aria-label": S || s("footer.links", "Lenker"), children: [
+            /* @__PURE__ */ t("h3", { className: e.linksTitle, children: S || s("footer.links", "Lenker") }),
+            /* @__PURE__ */ t("ul", { className: e.linksList, children: Z.map((i, l) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(c, { href: i.href, className: e.footerLink, children: i.label }) }, l)) })
           ] })
         ] })
       ] }),
@@ -241,41 +243,41 @@ const ue = ({
       /* @__PURE__ */ n("div", { className: e.contactSection, children: [
         /* @__PURE__ */ n("div", { className: e.contactColumn, children: [
           /* @__PURE__ */ t("h4", { className: e.contactTitle, children: s("footer.contact.visitingAddress", "Besøks adresse") }),
-          /* @__PURE__ */ t("div", { className: e.contactContent, children: N.map((i, l) => /* @__PURE__ */ t("p", { children: i }, l)) })
+          /* @__PURE__ */ t("div", { className: e.contactContent, children: b.map((i, l) => /* @__PURE__ */ t("p", { children: i }, l)) })
         ] }),
         /* @__PURE__ */ n("div", { className: e.contactColumn, children: [
           /* @__PURE__ */ t("h4", { className: e.contactTitle, children: s("footer.contact.organizationNumber", "Organisasjonsnummer") }),
-          /* @__PURE__ */ t("p", { className: e.contactContent, children: b })
+          /* @__PURE__ */ t("p", { className: e.contactContent, children: k })
         ] }),
         /* @__PURE__ */ n("div", { className: e.contactColumn, children: [
           /* @__PURE__ */ t("h4", { className: e.contactTitle, children: s("footer.contact.email", "E-post") }),
-          /* @__PURE__ */ t("p", { className: e.contactContent, children: k })
+          /* @__PURE__ */ t("p", { className: e.contactContent, children: z })
         ] })
       ] }),
       /* @__PURE__ */ t("div", { className: e.divider }),
       /* @__PURE__ */ t("div", { className: e.copyrightSection, children: /* @__PURE__ */ n("p", { className: e.copyrightText, children: [
         "© ",
-        C,
+        y,
         " ",
         s("footer.copyright", "Rødekors")
       ] }) }),
       m && /* @__PURE__ */ t("div", { className: e.graphicElementBottomLeft, children: /* @__PURE__ */ t(u, { shape: "angle", position: "bottom-left", size: "md", "aria-hidden": !0 }) })
     ] }) }),
     /* @__PURE__ */ t("div", { className: e.whiteSection, children: /* @__PURE__ */ t("div", { className: e.whiteContainer, children: /* @__PURE__ */ n("div", { className: e.whiteContent, children: [
-      z && (d ? /* @__PURE__ */ t(
+      $ && (d ? /* @__PURE__ */ t(
         "img",
         {
           src: d,
-          alt: $,
+          alt: C,
           className: e.logo,
           loading: "lazy"
         }
-      ) : /* @__PURE__ */ t("div", { className: e.logo, children: /* @__PURE__ */ t(L, { className: e.redCrossLogo }) })),
+      ) : /* @__PURE__ */ t("div", { className: e.logo, children: /* @__PURE__ */ t(P, { className: e.redCrossLogo }) })),
       f && /* @__PURE__ */ t("div", { className: e.slotLarge, children: f })
     ] }) }) })
   ] });
 };
-function oe(p) {
+function re(p) {
   const a = p;
   return `
 .${a.footer} {
@@ -713,5 +715,5 @@ function oe(p) {
 `;
 }
 export {
-  ue as Footer
+  ve as Footer
 };

package/dist/components/GraphicElement/index.js

@@ -253,9 +253,9 @@ const N = {
     "bottom-right": e.barVertical
   }
 }, v = 34, z = {
-  front: a.faceFront,
-  top: a.faceTop,
-  right: a.faceRight
+  front: a.faceFront ?? "",
+  top: a.faceTop ?? "",
+  right: a.faceRight ?? ""
 };
 function P(t) {
   return t in H;