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

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # 📖 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-CX6wPqur.mjs

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

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

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

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

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

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

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

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

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

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

@@ -28,6 +28,6 @@ export {
   g as c,
   i as d,
   o as e,
-  d as f,
-  f as g
+  f,
+  d 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 } from './toggleLinkButton/ToggleLinkButton';
+export { ToggleLinkButton, type ToggleLinkButtonChangeEvent } from './toggleLinkButton/ToggleLinkButton';
 export { Checkbox } from './checkbox/Checkbox';
 export { RadioToggleInput } from './toggle/RadioToggle';
 export { FieldSet } from './toggle/FieldSet';

package/dist/components/list/{CheckmarkListItem-DE0v1Zhg.mjs → CheckmarkListItem-DokxieXU.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-CgcqUFmH.mjs";
+import { e as o } from "../icons/Icons-knwkK_Mh.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-DFXTjZR6.mjs → CrossmarkListItem-CRelk7jn.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-CgcqUFmH.mjs";
+import { d as o } from "../icons/Icons-knwkK_Mh.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-BaTG2zyz.mjs

@@ -0,0 +1,63 @@
+import { jsx as e, 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 i } from "../icons/Icons-knwkK_Mh.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", k = "_icon_1x54j_80", B = "_buttons_1x54j_87", n = {
+  rdsPanel: $,
+  contentAndButtons: P,
+  content: S,
+  title: b,
+  contentCentered: A,
+  icon: k,
+  buttons: B
+}, I = {
+  error: {
+    title: "Feil",
+    icon: /* @__PURE__ */ e(i, {})
+  },
+  info: {
+    title: "Informasjon",
+    icon: /* @__PURE__ */ e(i, {})
+  },
+  success: {
+    title: "Vellykket",
+    icon: /* @__PURE__ */ e(N, {})
+  },
+  warning: {
+    title: "Advarsel",
+    icon: /* @__PURE__ */ e(y, {})
+  }
+}, T = x(
+  ({ className: a = "", intent: c = "info", heading: t, action: l, id: _, children: o, ...d }, m) => {
+    const { title: p, icon: f } = I[c], u = typeof t == "string" ? t : (t == null ? void 0 : t.title) ?? p, j = typeof t == "string" ? "span" : (t == null ? void 0 : t.level) ?? "span", r = v.count(o) === 0 || typeof o == "string" && o.trim() === "";
+    return /* @__PURE__ */ s(
+      "div",
+      {
+        id: _,
+        className: `${n.rdsPanel} ${a}`,
+        "data-testid": "rds-panel",
+        "data-intent": c,
+        ref: m,
+        ...d,
+        children: [
+          /* @__PURE__ */ s("span", { className: `${n.icon} ${r ? n.contentCentered : ""}`, children: [
+            " ",
+            f
+          ] }),
+          /* @__PURE__ */ s("div", { className: n.contentAndButtons, children: [
+            /* @__PURE__ */ s("div", { className: `${n.content} ${r ? n.contentCentered : ""}`, children: [
+              /* @__PURE__ */ e(j, { className: `${n.title} rds-title-4`, children: u }),
+              /* @__PURE__ */ e(C, { children: o })
+            ] }),
+            l && /* @__PURE__ */ e("div", { className: n.buttons, children: l })
+          ] })
+        ]
+      }
+    );
+  }
+);
+T.displayName = "Panel";
+export {
+  T as P
+};

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

@@ -1,26 +1,27 @@
-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);
+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);
     };
     return /* @__PURE__ */ t(
-      y,
+      B,
       {
-        id: i,
+        id: b,
         ref: o,
         dataTestId: "toggle-button__label",
-        containerClassName: _ + " rds-toggle-button-container",
+        containerClassName: h + " rds-toggle-button-container",
         inputClassName: "rds-toggle-button__input",
         labelClassName: "rds-toggle-button",
-        onChange: I,
+        onChange: k,
         defaultChecked: c,
-        ...f,
+        ...m,
         children: /* @__PURE__ */ l("span", { className: "rds-toggle-button__content", children: [
-          e && /* @__PURE__ */ l(x, { children: [
-            /* @__PURE__ */ l("span", { className: `rds-toggle-button__icon ${h}`, children: [
+          e && /* @__PURE__ */ l(C, { children: [
+            /* @__PURE__ */ l("span", { className: `rds-toggle-button__icon ${i}`, children: [
               u && /* @__PURE__ */ t(u, { checked: n }),
               r && n && /* @__PURE__ */ t(r, {}),
               d && !n && /* @__PURE__ */ t(d, {})
@@ -29,7 +30,7 @@ const B = C(
               "span",
               {
                 "data-testid": "toggle-button__icon__label__text",
-                className: `label-text__icon ${b ? "always-show-label" : ""}`,
+                className: `label-text__icon ${f ? "always-show-label" : ""}`,
                 children: a
               }
             )
@@ -40,7 +41,7 @@ const B = C(
     );
   }
 );
-B.displayName = "ToggleButton";
+R.displayName = "ToggleButton";
 export {
-  B as T
+  R as T
 };

package/dist/components/toggleInlineButton/ToggleInlineButton-Cnet1doK.mjs

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

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

@@ -0,0 +1,34 @@
+import { jsx as o, jsxs as p } from "react/jsx-runtime";
+import { forwardRef as f, useState as h } from "react";
+import "../icons/HeartToggle-Bwgo4FxH.mjs";
+import { f as x, g as N } from "../icons/Icons-knwkK_Mh.mjs";
+const S = f(
+  ({ toggledContentId: s, lightBackground: a, children: r, checked: l, defaultChecked: d, onChange: t, id: c, className: g = "", ...k }, u) => {
+    const [_, m] = h(!!d), n = l !== void 0, e = n ? l : _, b = () => {
+      const i = !e;
+      n || m(i), t == null || t({ target: { checked: i } });
+    };
+    return /* @__PURE__ */ o(
+      "button",
+      {
+        ref: u,
+        type: "button",
+        id: c,
+        className: `rds-toggle-link-button ${a ? "rds-light" : ""} ${g}`.trim(),
+        "aria-expanded": e,
+        "aria-controls": s,
+        onClick: b,
+        "data-testid": "toggle-link-button__label",
+        ...k,
+        children: /* @__PURE__ */ p("span", { className: "rds-toggle-link-button__label__content rds-link", "data-testid": "toggle-link-button__label__text", children: [
+          r,
+          e ? /* @__PURE__ */ o(x, { className: "rds-toggle-link-button__icon", "aria-hidden": !0 }) : /* @__PURE__ */ o(N, { className: "rds-toggle-link-button__icon", "aria-hidden": !0 })
+        ] })
+      }
+    );
+  }
+);
+S.displayName = "ToggleLinkButton";
+export {
+  S as T
+};

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

@@ -1,8 +1,16 @@
-import { InputHTMLAttributes } from 'react';
-interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+import { ButtonHTMLAttributes } from 'react';
+export interface ToggleLinkButtonChangeEvent {
+    target: {
+        checked: boolean;
+    };
+}
+interface Props extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "children"> {
     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<HTMLInputElement>>;
+export declare const ToggleLinkButton: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/components/toggleLinkButton/toggleLinkButton.scss

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