@bonniernews/dn-design-system-web 36.0.0 → 37.0.1

package/preact/components/list-item/list-item.js

@@ -326,54 +326,8 @@ var SwitchInner = ({ showMeta, metaOn, metaOff, componentClassName }) => {
   ] });
 };
 
-// ../src/components/radio-button-group/radio-button-group.tsx
-import { Fragment as Fragment3 } from "preact";
-import { jsx as jsx9, jsxs as jsxs6 } from "preact/jsx-runtime";
-var RadioButtonGroup = ({
-  buttons,
-  error,
-  name,
-  errorMessage,
-  required,
-  stripLabel,
-  disabled,
-  forcePx,
-  classNames
-}) => {
-  const radioButtonClassName = "ds-radio-btn";
-  const wrapperClasses = formatClassString(["ds-radio-btn-group", forcePx && "ds-force-px", classNames]);
-  return /* @__PURE__ */ jsx9(form_field_default, { error, errorMessage, wrapperClasses, children: buttons?.map((button) => {
-    const { id, selected, value, label, attributes } = button;
-    return /* @__PURE__ */ jsxs6(Fragment3, { children: [
-      /* @__PURE__ */ jsx9(
-        "input",
-        {
-          type: "radio",
-          id,
-          name,
-          defaultChecked: selected,
-          disabled,
-          required,
-          value,
-          ...attributes
-        }
-      ),
-      stripLabel ? /* @__PURE__ */ jsx9("div", { className: `${radioButtonClassName}__inner`, children: /* @__PURE__ */ jsx9(RadioButtonIcons, { radioButtonClassName }) }) : /* @__PURE__ */ jsxs6("label", { className: `${radioButtonClassName}__inner`, htmlFor: id, children: [
-        /* @__PURE__ */ jsx9(RadioButtonIcons, { radioButtonClassName }),
-        label && /* @__PURE__ */ jsx9("span", { className: `${radioButtonClassName}__text`, children: label })
-      ] })
-    ] }, id);
-  }) });
-};
-var RadioButtonIcons = ({ radioButtonClassName }) => {
-  return /* @__PURE__ */ jsxs6("span", { className: `${radioButtonClassName}__icon`, children: [
-    /* @__PURE__ */ jsx9(IconUse, { iconName: "radio_button_unchecked" }),
-    /* @__PURE__ */ jsx9(IconUse, { iconName: "radio_button_checked" })
-  ] });
-};
-
 // ../src/components/list-item/list-item.tsx
-import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs7 } from "preact/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs6 } from "preact/jsx-runtime";
 var ListItem = (props) => {
   const {
     listItemType,
@@ -383,6 +337,8 @@ var ListItem = (props) => {
     border = false,
     fontWeight = "regular",
     attributes,
+    linkAttributes,
+    disabled,
     forcePx,
     classNames
   } = props;
@@ -408,21 +364,24 @@ var ListItem = (props) => {
     }
   }
   const mediaHtml = listItemType === "image" && props.mediaHtml;
-  return /* @__PURE__ */ jsx10("li", { className: classes, children: /* @__PURE__ */ jsxs7(ListItemInner, { ...{ ...props, componentClassName }, children: [
-    iconLeftSvg && /* @__PURE__ */ jsx10("span", { className: `${componentClassName}__icon-left`, children: iconLeftSvg }),
-    mediaHtml && /* @__PURE__ */ jsx10("div", { className: `${componentClassName}__image`, dangerouslySetInnerHTML: { __html: mediaHtml } }),
-    title && /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx9("li", { className: classes, children: /* @__PURE__ */ jsxs6(ListItemInner, { ...{ ...props, componentClassName }, children: [
+    iconLeftSvg && /* @__PURE__ */ jsx9("span", { className: `${componentClassName}__icon-left`, children: iconLeftSvg }),
+    mediaHtml && /* @__PURE__ */ jsx9("div", { className: `${componentClassName}__image`, dangerouslySetInnerHTML: { __html: mediaHtml } }),
+    title && /* @__PURE__ */ jsx9(
       Title,
       {
         title,
         subtitle,
+        titleHref: listItemType === "toggle" && props.titleHref || void 0,
         fontWeight,
         componentClassName,
-        attributes
+        disabled,
+        attributes,
+        linkAttributes
       }
     ),
-    meta && /* @__PURE__ */ jsx10("span", { className: `${componentClassName}__meta`, children: meta }),
-    iconRightSvg && /* @__PURE__ */ jsx10("span", { className: `${componentClassName}__icon-right`, children: iconRightSvg })
+    meta && /* @__PURE__ */ jsx9("span", { className: `${componentClassName}__meta`, children: meta }),
+    iconRightSvg && /* @__PURE__ */ jsx9("span", { className: `${componentClassName}__icon-right`, children: iconRightSvg })
   ] }) });
 };
 var ListItemInner = ({
@@ -430,14 +389,15 @@ var ListItemInner = ({
   href,
   disabled,
   attributes,
+  linkAttributes,
+  interactiveElementAttributes,
+  interactiveElementClassNames,
   checked,
   selected,
-  value,
   variant,
   toggleText,
   toggleSelectedText,
   name = "ds-list-item",
-  id = "ds-list-item",
   forcePx,
   componentClassName,
   accordionContent,
@@ -452,104 +412,91 @@ var ListItemInner = ({
     case "standard":
     case "image":
       const hasLink = href && !disabled;
-      return /* @__PURE__ */ jsx10(Fragment4, { children: hasLink ? /* @__PURE__ */ jsx10("a", { className: classes, href, ...attributes, children }) : /* @__PURE__ */ jsx10("button", { className: classes, disabled, ...attributes, children }) });
+      return /* @__PURE__ */ jsx9(Fragment3, { children: hasLink ? /* @__PURE__ */ jsx9("a", { className: classes, href, ...linkAttributes, children }) : /* @__PURE__ */ jsx9("button", { className: classes, disabled, ...attributes, children }) });
     case "checkbox":
-      return /* @__PURE__ */ jsxs7("label", { className: classes, htmlFor: name, ...attributes, children: [
-        /* @__PURE__ */ jsx10(ListItemIconWrapper, { placement: "left", componentClassName, children: /* @__PURE__ */ jsx10(
+      return /* @__PURE__ */ jsxs6("label", { className: classes, htmlFor: name, ...attributes, children: [
+        /* @__PURE__ */ jsx9(ListItemIconWrapper, { placement: "left", componentClassName, children: /* @__PURE__ */ jsx9(
           checkbox_default,
           {
-            ...{
-              name,
-              checked,
-              stripLabel: true,
-              disabled,
-              forcePx,
-              attributes
-            }
-          }
-        ) }),
-        children
-      ] });
-    case "radio":
-      return /* @__PURE__ */ jsxs7("label", { className: classes, htmlFor: id, ...attributes, children: [
-        /* @__PURE__ */ jsx10(ListItemIconWrapper, { placement: "left", componentClassName, children: /* @__PURE__ */ jsx10(
-          RadioButtonGroup,
-          {
-            ...{
-              id,
-              name,
-              disabled,
-              selected,
-              forcePx,
-              buttons: [{ id, selected, value: value || "" }],
-              attributes
-            }
+            name,
+            checked,
+            stripLabel: true,
+            disabled,
+            forcePx,
+            attributes: interactiveElementAttributes,
+            classNames: interactiveElementClassNames
           }
         ) }),
         children
       ] });
     case "switch":
-      return /* @__PURE__ */ jsxs7("label", { className: classes, htmlFor: name, ...attributes, children: [
+      return /* @__PURE__ */ jsxs6("label", { className: classes, htmlFor: name, ...attributes, children: [
         children,
-        /* @__PURE__ */ jsx10(ListItemIconWrapper, { placement: "right", componentClassName, children: /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx9(ListItemIconWrapper, { placement: "right", componentClassName, children: /* @__PURE__ */ jsx9(
           Switch,
           {
-            ...{
-              name,
-              showMeta: true,
-              checked,
-              disabled,
-              forcePx,
-              stripLabel: true,
-              attributes
-            }
+            name,
+            showMeta: true,
+            checked,
+            disabled,
+            forcePx,
+            stripLabel: true,
+            attributes: interactiveElementAttributes,
+            classNames: interactiveElementClassNames
           }
         ) })
       ] });
     case "accordion":
-      return /* @__PURE__ */ jsxs7(Fragment4, { children: [
-        /* @__PURE__ */ jsxs7("button", { className: classes, disabled, ...attributes, children: [
+      return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+        /* @__PURE__ */ jsxs6("button", { className: classes, disabled, ...attributes, children: [
           children,
-          /* @__PURE__ */ jsxs7(ListItemIconWrapper, { placement: "right", componentClassName, children: [
-            /* @__PURE__ */ jsx10(IconUse, { iconName: "expand_less" }),
-            /* @__PURE__ */ jsx10(IconUse, { iconName: "expand_more" })
+          /* @__PURE__ */ jsxs6(ListItemIconWrapper, { placement: "right", componentClassName, children: [
+            /* @__PURE__ */ jsx9(IconUse, { iconName: "expand_less" }),
+            /* @__PURE__ */ jsx9(IconUse, { iconName: "expand_more" })
           ] })
         ] }),
-        accordionContent && /* @__PURE__ */ jsx10("div", { className: `${componentClassName}__accordion-inner`, children: accordionContent })
+        accordionContent && /* @__PURE__ */ jsx9("div", { className: `${componentClassName}__accordion-inner`, children: accordionContent })
       ] });
     case "toggle":
-      const buttonComponent = /* @__PURE__ */ jsx10(
+      const buttonComponent = /* @__PURE__ */ jsx9(
         button_toggle_default,
         {
-          ...{
-            text: toggleText,
-            selectedText: toggleSelectedText || "",
-            variant: variant || "secondaryFilled",
-            size: "sm",
-            selected,
-            disabled,
-            forcePx,
-            attributes
-          }
+          text: toggleText,
+          selectedText: toggleSelectedText || "",
+          variant: variant || "secondaryFilled",
+          size: "sm",
+          selected,
+          disabled,
+          forcePx,
+          attributes: interactiveElementAttributes,
+          classNames: interactiveElementClassNames
         }
       );
-      return /* @__PURE__ */ jsxs7("div", { className: classes, ...attributes, children: [
+      return /* @__PURE__ */ jsxs6("div", { className: classes, ...attributes, children: [
         children,
         buttonComponent
       ] });
     default:
-      return /* @__PURE__ */ jsx10("div", { className: classes, ...attributes, children });
+      return /* @__PURE__ */ jsx9("div", { className: classes, ...attributes, children });
   }
 };
-var Title = ({ title, subtitle, fontWeight, attributes }) => {
-  const componentClassName = "ds-list-item";
+var Title = ({
+  title,
+  subtitle,
+  titleHref,
+  fontWeight,
+  disabled,
+  attributes,
+  linkAttributes,
+  componentClassName
+}) => {
   const titleClasses = formatClassString([
     `${componentClassName}__title`,
     `${componentClassName}__title--${fontWeight}`
   ]);
-  return /* @__PURE__ */ jsxs7("div", { className: `${componentClassName}__titles`, children: [
-    /* @__PURE__ */ jsx10("span", { className: titleClasses, ...attributes, children: title }),
-    subtitle && /* @__PURE__ */ jsx10("span", { className: `${componentClassName}__subtitle`, children: subtitle })
+  return /* @__PURE__ */ jsxs6("div", { className: `${componentClassName}__titles`, children: [
+    titleHref && !disabled ? /* @__PURE__ */ jsx9("a", { class: titleClasses, href: titleHref, ...linkAttributes, children: title }) : /* @__PURE__ */ jsx9("span", { className: titleClasses, ...attributes, children: title }),
+    subtitle && /* @__PURE__ */ jsx9("span", { className: `${componentClassName}__subtitle`, children: subtitle })
   ] });
 };
 var ListItemIconWrapper = ({
@@ -557,7 +504,7 @@ var ListItemIconWrapper = ({
   componentClassName,
   children
 }) => {
-  return /* @__PURE__ */ jsx10("div", { className: `${componentClassName}__icon-${placement}`, children });
+  return /* @__PURE__ */ jsx9("div", { className: `${componentClassName}__icon-${placement}`, children });
 };
 export {
   ListItem