@rikstv/shared-components 3.3.15-alpha.3 → 3.3.15

package/CHANGELOG.md

@@ -1,10 +1,5 @@
 # 📖 Changelog
 
-## 3.3.15
-
-- Refactor ToggleLinkButton to use `<button>` instead of checkbox for WCAG-compliant disclosure pattern (aria-expanded, aria-controls)
-- Add support for controlled mode via `checked` prop (in addition to `defaultChecked`)
-
 ## 3.3.12
 
 - Allow to set Circular Progress size in px

package/dist/components/alert/Alert-BvwcxnzO.mjs

@@ -0,0 +1,70 @@
+import { jsxs as o, jsx as s } from "react/jsx-runtime";
+import { forwardRef as w, useState as d } from "react";
+import { H as B, B as F } from "../typography/Typography-CXNJ1SFo.mjs";
+import "../icons/HeartToggle-Bwgo4FxH.mjs";
+import { S as T, a as b, b as x, c as O, d as R } from "../icons/Icons-CgcqUFmH.mjs";
+const E = "_rds-alert--icon_m8jce_67", H = "_rds-alert--content-title_m8jce_79", M = "_rds-alert--content_m8jce_79", V = "_rds-alert--dismiss_m8jce_109", q = "_dismissed_m8jce_138", z = "_dismiss-fade-out_m8jce_1", e = {
+  rdsAlertIcon: E,
+  rdsAlertContentTitle: H,
+  rdsAlertContent: M,
+  rdsAlertDismiss: V,
+  dismissed: q,
+  dismissFadeOut: z
+}, G = {
+  warning: { title: "Advarsel", Icon: O },
+  error: { title: "Feil", Icon: x },
+  info: { title: "Informasjon", Icon: b },
+  success: { title: "Vellykket", Icon: T }
+}, J = w(
+  ({
+    className: c,
+    intent: t = "warning",
+    variant: r = "filled",
+    testId: m = "rds-alert",
+    heading: A,
+    noHeading: i = !1,
+    children: f,
+    dismissible: _ = !0,
+    lightBackground: v,
+    onDismissed: u,
+    LinkToDetails: C,
+    ...p
+  }, j) => {
+    const [I, l] = d(!1), [h, n] = d(!1), g = ["rds-alert", v ? "rds-light" : "", I ? e.dismissed : "", c].filter(Boolean).join(" ");
+    if (h)
+      return null;
+    const N = () => {
+      l(!1), n(!1);
+    }, { title: a, Icon: S } = G[t], y = (k) => {
+      k.animationName === e.dismissFadeOut && (n(!0), u?.(N));
+    }, D = _ && r !== "inline";
+    return /* @__PURE__ */ o(
+      "div",
+      {
+        role: "alert",
+        "aria-live": "polite",
+        ref: j,
+        className: g,
+        "data-testid": m,
+        "data-intent": t,
+        "data-variant": r,
+        onAnimationEnd: y,
+        ...p,
+        children: [
+          /* @__PURE__ */ s(S, { className: e.rdsAlertIcon }),
+          /* @__PURE__ */ o("div", { className: e.rdsAlertContent, children: [
+            !i && /* @__PURE__ */ s(B, { className: e.rdsAlertContentTitle, as: "span", children: A || a }),
+            i && /* @__PURE__ */ s("span", { className: "sr-only", children: a }),
+            /* @__PURE__ */ s(F, { as: "div", children: f }),
+            C
+          ] }),
+          D && /* @__PURE__ */ s("div", { className: e.rdsAlertDismiss, children: /* @__PURE__ */ s("button", { "aria-label": "Avvis varsel", onClick: () => l(!0), children: /* @__PURE__ */ s(R, {}) }) })
+        ]
+      }
+    );
+  }
+);
+J.displayName = "Alert";
+export {
+  J as A
+};

package/dist/components/core/Core-BdJiu9y4.mjs

@@ -0,0 +1,46 @@
+import { jsx as i } from "react/jsx-runtime";
+let n = !1, a = !1, u = !1;
+const r = {
+  mousedown: c,
+  keydown: d,
+  touchstart: m
+};
+function s() {
+  Object.keys(r).forEach((t) => {
+    document.removeEventListener(t, r[t]);
+  });
+}
+function e(t) {
+  document.addEventListener(t, r[t]);
+}
+function c() {
+  if (!n && !u) {
+    n = !0, a = !1;
+    const t = document.querySelector("html");
+    t?.setAttribute("data-mousenavigation", "true"), t?.removeAttribute("data-touchnavigation"), s(), e("touchstart"), e("keydown");
+  }
+}
+function d(t) {
+  if (t.key === "Tab") {
+    const o = document.querySelector("html");
+    s(), o?.removeAttribute("data-mousenavigation"), o?.removeAttribute("data-touchnavigation"), n = !1, a = !1, e("touchstart"), e("mousedown");
+  }
+}
+function m() {
+  if (!a) {
+    n = !1, a = !0;
+    const t = document.querySelector("html");
+    t?.setAttribute("data-touchnavigation", "true"), t?.removeAttribute("data-mousenavigation"), s(), e("touchstart"), e("keydown"), e("mousedown");
+  }
+  u = !0, setTimeout(() => {
+    u = !1;
+  }, 150);
+}
+function l() {
+  typeof document < "u" && (e("touchstart"), e("mousedown"));
+}
+l();
+const h = ({ brand: t, children: o }) => /* @__PURE__ */ i("div", { "data-testid": "core-entry", className: t, children: o });
+export {
+  h as C
+};

package/dist/components/core/{RiksTV-CxHetJcp.mjs → RiksTV-D1wr-aYp.mjs}

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import { C as s } from "./Core-DVnHiJm2.mjs";
+import { C as s } from "./Core-BdJiu9y4.mjs";
 const m = ({ children: r }) => /* @__PURE__ */ o(s, { brand: "rtv", children: r });
 export {
   m as R

package/dist/components/core/{Strim-C1ajVDCm.mjs → Strim-1ocLRXTP.mjs}

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import { C as m } from "./Core-DVnHiJm2.mjs";
+import { C as m } from "./Core-BdJiu9y4.mjs";
 const i = ({ children: r }) => /* @__PURE__ */ o(m, { brand: "strm", children: r });
 export {
   i as S

package/dist/components/dropdown/{Dropdown-CWVW7rKD.mjs → Dropdown-c9wdxVoJ.mjs}

@@ -1,44 +1,43 @@
 import { jsxs as n, jsx as l } from "react/jsx-runtime";
-const f = ({
+const w = ({
   label: a,
   id: s,
   options: r,
-  onChange: t,
-  className: o = "",
-  defaultValue: h,
-  rightIcon: m,
+  onChange: i,
+  className: t = "",
+  defaultValue: o,
+  rightIcon: h,
   leftIcon: c,
-  innerRef: v,
-  ...u
+  innerRef: m,
+  ...v
 }) => {
-  var i;
-  const p = `dropdown-styling ${c ? "menu-with-left-icon" : ""} ${o}`;
-  return /* @__PURE__ */ n("span", { className: p, children: [
+  const u = `dropdown-styling ${c ? "menu-with-left-icon" : ""} ${t}`;
+  return /* @__PURE__ */ n("span", { className: u, children: [
     /* @__PURE__ */ l("label", { htmlFor: s, children: a }),
     /* @__PURE__ */ n("div", { className: "select-wrapper", children: [
       /* @__PURE__ */ l(
         "select",
         {
-          defaultValue: h,
-          value: (i = r.find((e) => e.selected)) == null ? void 0 : i.value,
+          defaultValue: o,
+          value: r.find((e) => e.selected)?.value,
           id: s,
-          ref: v,
+          ref: m,
           onChange: ({ target: e }) => {
-            const d = r.find((w) => w.value === e.value) ?? r[0];
-            t(d);
+            const d = r.find((p) => p.value === e.value) ?? r[0];
+            i(d);
           },
-          ...u,
+          ...v,
           children: r.map((e, d) => /* @__PURE__ */ l("option", { value: e.value, children: e.title }, `dropdown-${a}-${e.title}-${d}`))
         }
       ),
       /* @__PURE__ */ n("div", { children: [
         /* @__PURE__ */ l("div", { className: "left-icon", children: c }),
-        /* @__PURE__ */ l("div", { className: "right-icon", children: m })
+        /* @__PURE__ */ l("div", { className: "right-icon", children: h })
       ] })
     ] })
   ] });
 };
-f.displayName = "Dropdown";
+w.displayName = "Dropdown";
 export {
-  f as D
+  w as D
 };

package/dist/components/icons/{Icons-knwkK_Mh.mjs → Icons-CgcqUFmH.mjs}

@@ -28,6 +28,6 @@ export {
   g as c,
   i as d,
   o as e,
-  f,
-  d as g
+  d as f,
+  f as g
 };

package/dist/components/index.d.ts

@@ -17,7 +17,7 @@ export { PrimaryArrowButton, SecondaryArrowButton, GhostArrowButton, TertiaryArr
 export { PrimaryIconButton, SecondaryIconButton, GhostIconButton, TertiaryIconButton } from './button/IconButton';
 export { ToggleButton } from './toggleButton/ToggleButton';
 export { ToggleInlineButton } from './toggleInlineButton/ToggleInlineButton';
-export { ToggleLinkButton, type ToggleLinkButtonChangeEvent } from './toggleLinkButton/ToggleLinkButton';
+export { ToggleLinkButton } from './toggleLinkButton/ToggleLinkButton';
 export { Checkbox } from './checkbox/Checkbox';
 export { RadioToggleInput } from './toggle/RadioToggle';
 export { FieldSet } from './toggle/FieldSet';

package/dist/components/list/{CheckmarkListItem-DokxieXU.mjs → CheckmarkListItem-DE0v1Zhg.mjs}

@@ -1,7 +1,7 @@
 import { jsx as t } from "react/jsx-runtime";
 import "react";
 import "../icons/HeartToggle-Bwgo4FxH.mjs";
-import { e as o } from "../icons/Icons-knwkK_Mh.mjs";
+import { e as o } from "../icons/Icons-CgcqUFmH.mjs";
 import { L as e } from "./ListItem-ClQsSisn.mjs";
 const k = ({ children: r, ...m }) => /* @__PURE__ */ t(e, { testId: "rds-list-item--check", icon: /* @__PURE__ */ t(o, {}), ...m, children: r });
 export {

package/dist/components/list/{CrossmarkListItem-CRelk7jn.mjs → CrossmarkListItem-DFXTjZR6.mjs}

@@ -1,7 +1,7 @@
 import { jsx as t } from "react/jsx-runtime";
 import "react";
 import "../icons/HeartToggle-Bwgo4FxH.mjs";
-import { d as o } from "../icons/Icons-knwkK_Mh.mjs";
+import { d as o } from "../icons/Icons-CgcqUFmH.mjs";
 import { L as m } from "./ListItem-ClQsSisn.mjs";
 const d = ({ children: r, ...s }) => /* @__PURE__ */ t(m, { testId: "rds-list-item--cross", icon: /* @__PURE__ */ t(o, {}), ...s, children: r });
 export {

package/dist/components/panel/Panel-D2Nkdd54.mjs

@@ -0,0 +1,63 @@
+import { jsx as n, jsxs as s } from "react/jsx-runtime";
+import { forwardRef as x, Children as v } from "react";
+import { S as C } from "../typography/Typography-CXNJ1SFo.mjs";
+import "../icons/HeartToggle-Bwgo4FxH.mjs";
+import { c as y, S as N, a as r } from "../icons/Icons-CgcqUFmH.mjs";
+const $ = "_rds-panel_1x54j_1", P = "_content-and-buttons_1x54j_34", S = "_content_1x54j_34", b = "_title_1x54j_60", A = "_content-centered_1x54j_69", g = "_icon_1x54j_80", k = "_buttons_1x54j_87", t = {
+  rdsPanel: $,
+  contentAndButtons: P,
+  content: S,
+  title: b,
+  contentCentered: A,
+  icon: g,
+  buttons: k
+}, B = {
+  error: {
+    title: "Feil",
+    icon: /* @__PURE__ */ n(r, {})
+  },
+  info: {
+    title: "Informasjon",
+    icon: /* @__PURE__ */ n(r, {})
+  },
+  success: {
+    title: "Vellykket",
+    icon: /* @__PURE__ */ n(N, {})
+  },
+  warning: {
+    title: "Advarsel",
+    icon: /* @__PURE__ */ n(y, {})
+  }
+}, I = x(
+  ({ className: a = "", intent: c = "info", heading: e, action: i, id: d, children: o, ..._ }, m) => {
+    const { title: p, icon: f } = B[c], u = typeof e == "string" ? e : e?.title ?? p, j = typeof e == "string" ? "span" : e?.level ?? "span", l = v.count(o) === 0 || typeof o == "string" && o.trim() === "";
+    return /* @__PURE__ */ s(
+      "div",
+      {
+        id: d,
+        className: `${t.rdsPanel} ${a}`,
+        "data-testid": "rds-panel",
+        "data-intent": c,
+        ref: m,
+        ..._,
+        children: [
+          /* @__PURE__ */ s("span", { className: `${t.icon} ${l ? t.contentCentered : ""}`, children: [
+            " ",
+            f
+          ] }),
+          /* @__PURE__ */ s("div", { className: t.contentAndButtons, children: [
+            /* @__PURE__ */ s("div", { className: `${t.content} ${l ? t.contentCentered : ""}`, children: [
+              /* @__PURE__ */ n(j, { className: `${t.title} rds-title-4`, children: u }),
+              /* @__PURE__ */ n(C, { children: o })
+            ] }),
+            i && /* @__PURE__ */ n("div", { className: t.buttons, children: i })
+          ] })
+        ]
+      }
+    );
+  }
+);
+I.displayName = "Panel";
+export {
+  I as P
+};

package/dist/components/toggleButton/{ToggleButton-CGLyQll6.mjs → ToggleButton-Dhxp8g2g.mjs}

@@ -1,27 +1,26 @@
-import { jsx as t, jsxs as l, Fragment as C } from "react/jsx-runtime";
-import { forwardRef as N, useRef as T, useState as y } from "react";
-import { B } from "../checkbox/BaseCheckbox-BGkrjof6.mjs";
-const R = N(
-  ({ children: a, className: h = "", defaultChecked: c, icons: e, iconClass: i = "", id: b, onChange: s, alwaysShowLabel: f = !1, ...m }, p) => {
-    const I = T(null), [n, g] = y(!!c), r = e && "checkedIcon" in e ? e.checkedIcon : null, d = e && "uncheckedIcon" in e ? e.uncheckedIcon : null, u = e && "toggleIcon" in e ? e.toggleIcon : null, o = p || I, k = (x) => {
-      var _;
-      typeof s == "function" && s(x), g(typeof o != "function" ? !!((_ = o.current) != null && _.checked) : !n);
+import { jsx as t, jsxs as l, Fragment as x } from "react/jsx-runtime";
+import { forwardRef as C, useRef as N, useState as T } from "react";
+import { B as y } from "../checkbox/BaseCheckbox-BGkrjof6.mjs";
+const B = C(
+  ({ children: a, className: _ = "", defaultChecked: c, icons: e, iconClass: h = "", id: i, onChange: s, alwaysShowLabel: b = !1, ...f }, m) => {
+    const p = N(null), [n, g] = T(!!c), r = e && "checkedIcon" in e ? e.checkedIcon : null, d = e && "uncheckedIcon" in e ? e.uncheckedIcon : null, u = e && "toggleIcon" in e ? e.toggleIcon : null, o = m || p, I = (k) => {
+      typeof s == "function" && s(k), g(typeof o != "function" ? !!o.current?.checked : !n);
     };
     return /* @__PURE__ */ t(
-      B,
+      y,
       {
-        id: b,
+        id: i,
         ref: o,
         dataTestId: "toggle-button__label",
-        containerClassName: h + " rds-toggle-button-container",
+        containerClassName: _ + " rds-toggle-button-container",
         inputClassName: "rds-toggle-button__input",
         labelClassName: "rds-toggle-button",
-        onChange: k,
+        onChange: I,
         defaultChecked: c,
-        ...m,
+        ...f,
         children: /* @__PURE__ */ l("span", { className: "rds-toggle-button__content", children: [
-          e && /* @__PURE__ */ l(C, { children: [
-            /* @__PURE__ */ l("span", { className: `rds-toggle-button__icon ${i}`, children: [
+          e && /* @__PURE__ */ l(x, { children: [
+            /* @__PURE__ */ l("span", { className: `rds-toggle-button__icon ${h}`, children: [
               u && /* @__PURE__ */ t(u, { checked: n }),
               r && n && /* @__PURE__ */ t(r, {}),
               d && !n && /* @__PURE__ */ t(d, {})
@@ -30,7 +29,7 @@ const R = N(
               "span",
               {
                 "data-testid": "toggle-button__icon__label__text",
-                className: `label-text__icon ${f ? "always-show-label" : ""}`,
+                className: `label-text__icon ${b ? "always-show-label" : ""}`,
                 children: a
               }
             )
@@ -41,7 +40,7 @@ const R = N(
     );
   }
 );
-R.displayName = "ToggleButton";
+B.displayName = "ToggleButton";
 export {
-  R as T
+  B as T
 };

package/dist/components/toggleInlineButton/ToggleInlineButton-9ZcLN5Lf.mjs

@@ -0,0 +1,39 @@
+import { jsx as l } from "react/jsx-runtime";
+import { forwardRef as p, useRef as _, useState as b } from "react";
+import { B as C } from "../checkbox/BaseCheckbox-BGkrjof6.mjs";
+const k = p(
+  ({
+    defaultChecked: s,
+    lightBackground: a,
+    children: i,
+    onChange: t,
+    id: r,
+    className: c = "",
+    inputClassName: d = "",
+    labelClassName: g = "",
+    ...u
+  }, f) => {
+    const h = _(null), [n, o] = b(!!s), e = f || h;
+    return /* @__PURE__ */ l(
+      C,
+      {
+        id: r,
+        ref: e,
+        onChange: (m) => {
+          typeof t == "function" && t(m), o(typeof e != "function" ? !!e.current?.checked : !n);
+        },
+        checked: n,
+        dataTestId: "toggle-inline-button__label",
+        containerClassName: `rds-toggle-inline-button ${c}`,
+        inputClassName: `rds-toggle-inline-button__input ${d}`,
+        labelClassName: `${a ? "rds-light" : ""} ${g}`,
+        ...u,
+        children: /* @__PURE__ */ l("span", { "data-testid": "toggle-inline-button__label__text", className: "rds-toggle-inline-button__content", children: i })
+      }
+    );
+  }
+);
+k.displayName = "ToggleInlineButton";
+export {
+  k as T
+};

package/dist/components/toggleLinkButton/ToggleLinkButton-B01oBGAX.mjs

@@ -0,0 +1,36 @@
+import { jsx as n, jsxs as k } from "react/jsx-runtime";
+import { forwardRef as m, useRef as b, useState as p } from "react";
+import { B as h } from "../checkbox/BaseCheckbox-BGkrjof6.mjs";
+import "../icons/HeartToggle-Bwgo4FxH.mjs";
+import { f as C, g as N } from "../icons/Icons-CgcqUFmH.mjs";
+const x = m(
+  ({ defaultChecked: s, toggledContentId: a, lightBackground: i, children: r, onChange: o, id: c, className: g = "", ...d }, u) => {
+    const _ = b(null), [t, l] = p(!!s), e = u || _;
+    return /* @__PURE__ */ n(
+      h,
+      {
+        id: c,
+        ref: e,
+        onChange: (f) => {
+          typeof o == "function" && o(f), l(typeof e != "function" ? !!e.current?.checked : !t);
+        },
+        checked: t,
+        "aria-controls": a,
+        dataTestId: "toggle-link-button__label",
+        containerClassName: "rds-toggle-link-button",
+        inputClassName: "rds-toggle-link-button__input",
+        labelClassName: `rds-toggle-link-button__label ${i ? "rds-light" : ""} ${g}`,
+        ...d,
+        children: /* @__PURE__ */ k("span", { className: "rds-toggle-link-button__label__content rds-link", "data-testid": "toggle-link-button__label__text", children: [
+          r,
+          !t && /* @__PURE__ */ n(C, { className: "rds-toggle-link-button__icon" }),
+          t && /* @__PURE__ */ n(N, { className: "rds-toggle-link-button__icon" })
+        ] })
+      }
+    );
+  }
+);
+x.displayName = "ToggleLinkButton";
+export {
+  x as T
+};

package/dist/components/toggleLinkButton/ToggleLinkButton.d.ts

@@ -1,16 +1,8 @@
-import { ButtonHTMLAttributes } from 'react';
-export interface ToggleLinkButtonChangeEvent {
-    target: {
-        checked: boolean;
-    };
-}
-interface Props extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "children"> {
+import { InputHTMLAttributes } from 'react';
+interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
     children: string;
     toggledContentId: string;
     lightBackground?: boolean;
-    checked?: boolean;
-    defaultChecked?: boolean;
-    onChange?: (e: ToggleLinkButtonChangeEvent) => void;
 }
-export declare const ToggleLinkButton: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const ToggleLinkButton: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/toggleLinkButton/toggleLinkButton.scss

@@ -1,24 +1,19 @@
 .rds-toggle-link-button {
-  background: none;
-  border: none;
-  padding: 0;
-  margin: 0;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
   display: inline-block;
   user-select: none;
 
-  &:focus-visible {
-    outline: 2px solid currentColor;
-    outline-offset: 2px;
-    border-radius: 2px;
+  &__input {
+    opacity: 0;
+    position: absolute;
   }
 
-  &__label__content {
-    text-decoration: underline;
-    display: flex;
-    align-items: center;
+  &__label {
+    &__content {
+      text-decoration: underline;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+    }
   }
 
   &__icon {
@@ -27,6 +22,8 @@
   }
 }
 
-.rds-toggle-link-button.rds-light {
-  color: var(--rds-button-primary-fg);
+.rds-light {
+  .rds-toggle-link-button__label {
+    color: var(--rds-button-primary-fg);
+  }
 }