@bonniernews/dn-design-system-web 35.0.0 → 37.0.0

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

@@ -264,54 +264,8 @@ var CheckboxIcons = ({ componentClassName }) => {
 };
 var checkbox_default = Checkbox;
 
-// ../src/components/radio-button/radio-button.tsx
-import { Fragment as Fragment2 } from "preact";
-import { jsx as jsx8, jsxs as jsxs5 } from "preact/jsx-runtime";
-var RadioButton = ({
-  buttons,
-  error,
-  name,
-  errorMessage,
-  required,
-  stripLabel,
-  disabled,
-  forcePx,
-  classNames
-}) => {
-  const componentClassName = "ds-radio-btn";
-  const wrapperClasses = formatClassString([componentClassName, forcePx && "ds-force-px", classNames]);
-  return /* @__PURE__ */ jsx8(form_field_default, { error, errorMessage, wrapperClasses, children: buttons?.map((button) => {
-    const { id, selected, value, label, attributes } = button;
-    return /* @__PURE__ */ jsxs5(Fragment2, { children: [
-      /* @__PURE__ */ jsx8(
-        "input",
-        {
-          type: "radio",
-          id,
-          name,
-          defaultChecked: selected,
-          disabled,
-          required,
-          value,
-          ...attributes
-        }
-      ),
-      stripLabel ? /* @__PURE__ */ jsx8("div", { className: `${componentClassName}__inner`, children: /* @__PURE__ */ jsx8(RadioButtonIcons, { componentClassName }) }) : /* @__PURE__ */ jsxs5("label", { className: `${componentClassName}__inner`, htmlFor: id, children: [
-        /* @__PURE__ */ jsx8(RadioButtonIcons, { componentClassName }),
-        label && /* @__PURE__ */ jsx8("span", { className: `${componentClassName}__text`, children: label })
-      ] })
-    ] }, id);
-  }) });
-};
-var RadioButtonIcons = ({ componentClassName }) => {
-  return /* @__PURE__ */ jsxs5("span", { className: `${componentClassName}__icon`, children: [
-    /* @__PURE__ */ jsx8(IconUse, { iconName: "radio_button_unchecked" }),
-    /* @__PURE__ */ jsx8(IconUse, { iconName: "radio_button_checked" })
-  ] });
-};
-
 // ../src/components/switch/switch.tsx
-import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs6 } from "preact/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs5 } from "preact/jsx-runtime";
 var Switch = ({
   name = "ds-switch",
   checked,
@@ -326,8 +280,8 @@ var Switch = ({
 }) => {
   const componentClassName = "ds-switch";
   const classes = formatClassString([componentClassName, forcePx && "ds-force-px", classNames]);
-  return /* @__PURE__ */ jsxs6("div", { className: classes, children: [
-    /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs5("div", { className: classes, children: [
+    /* @__PURE__ */ jsx8(
       "input",
       {
         type: "checkbox",
@@ -339,7 +293,7 @@ var Switch = ({
         ...attributes
       }
     ),
-    stripLabel ? /* @__PURE__ */ jsx9("div", { className: `${componentClassName}__inner`, children: /* @__PURE__ */ jsx9(
+    stripLabel ? /* @__PURE__ */ jsx8("div", { className: `${componentClassName}__inner`, children: /* @__PURE__ */ jsx8(
       SwitchInner,
       {
         ...{
@@ -349,7 +303,7 @@ var Switch = ({
           componentClassName
         }
       }
-    ) }) : /* @__PURE__ */ jsx9("label", { className: `${componentClassName}__inner`, tabIndex: 0, htmlFor: name, children: /* @__PURE__ */ jsx9(
+    ) }) : /* @__PURE__ */ jsx8("label", { className: `${componentClassName}__inner`, tabIndex: 0, htmlFor: name, children: /* @__PURE__ */ jsx8(
       SwitchInner,
       {
         ...{
@@ -363,17 +317,17 @@ var Switch = ({
   ] });
 };
 var SwitchInner = ({ showMeta, metaOn, metaOff, componentClassName }) => {
-  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
-    showMeta && /* @__PURE__ */ jsxs6("div", { className: `${componentClassName}__meta`, children: [
-      /* @__PURE__ */ jsx9("span", { className: `${componentClassName}__meta-on`, children: metaOn }),
-      /* @__PURE__ */ jsx9("span", { className: `${componentClassName}__meta-off`, children: metaOff })
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    showMeta && /* @__PURE__ */ jsxs5("div", { className: `${componentClassName}__meta`, children: [
+      /* @__PURE__ */ jsx8("span", { className: `${componentClassName}__meta-on`, children: metaOn }),
+      /* @__PURE__ */ jsx8("span", { className: `${componentClassName}__meta-off`, children: metaOff })
     ] }),
-    /* @__PURE__ */ jsx9("span", { className: `${componentClassName}__box`, children: /* @__PURE__ */ jsx9("span", { className: `${componentClassName}__knob` }) })
+    /* @__PURE__ */ jsx8("span", { className: `${componentClassName}__box`, children: /* @__PURE__ */ jsx8("span", { className: `${componentClassName}__knob` }) })
   ] });
 };
 
 // ../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(
-          RadioButton,
-          {
-            ...{
-              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