@bonniernews/dn-design-system-web 32.7.44 → 32.7.46-beta.0

package/preact/components/byline/byline.js

@@ -145,124 +145,8 @@ var ButtonBase = ({
   return /* @__PURE__ */ jsx4(Fragment, { children: buttonToRender });
 };
 
-// ../src/components/button/button.tsx
-import { jsx as jsx5 } from "preact/jsx-runtime";
-var Button = ({
-  text,
-  disabled = false,
-  variant = "primary",
-  size = "md",
-  fullWidth = false,
-  mobileFullWidth = false,
-  iconPosition = "none",
-  iconName,
-  loading = false,
-  type = "button",
-  href,
-  isIconButton = false,
-  classNames,
-  attributes,
-  forcePx = false
-}) => {
-  return /* @__PURE__ */ jsx5(ButtonBase, { ...{
-    text,
-    disabled,
-    variant,
-    size,
-    fullWidth,
-    mobileFullWidth,
-    iconPosition,
-    iconName,
-    loading,
-    type,
-    href,
-    isIconButton,
-    classNames,
-    attributes,
-    forcePx
-  } });
-};
-var button_default = Button;
-
-// ../src/components/modal/modal.tsx
-import { jsx as jsx6, jsxs as jsxs3 } from "preact/jsx-runtime";
-var Modal = ({
-  title,
-  modalType = "standard",
-  primaryButton,
-  secondaryButton,
-  classNames,
-  attributes,
-  forcePx,
-  children
-}) => {
-  const componentClassName = "ds-modal";
-  const classes = formatClassString([
-    componentClassName,
-    modalType === "sheet" && `${componentClassName}--sheet`,
-    forcePx && "ds-force-px",
-    classNames
-  ]);
-  const hasButtons = primaryButton || secondaryButton;
-  return /* @__PURE__ */ jsx6("div", { className: classes, children: /* @__PURE__ */ jsx6("dialog", { className: `${componentClassName}__inner`, ...attributes, children: /* @__PURE__ */ jsxs3("div", { className: `${componentClassName}__content`, children: [
-    modalType === "standard" && /* @__PURE__ */ jsx6(
-      button_default,
-      {
-        ...{
-          variant: "transparent",
-          size: "sm",
-          iconName: "close",
-          isIconButton: true,
-          attributes: {
-            "aria-label": "st\xE4ng"
-          },
-          classNames: "ds-modal__close ds-modal__close--icon"
-        }
-      }
-    ),
-    title && /* @__PURE__ */ jsx6("h2", { children: title }),
-    children,
-    hasButtons && /* @__PURE__ */ jsxs3("div", { className: "ds-modal__buttons", children: [
-      secondaryButton && /* @__PURE__ */ jsx6(
-        button_default,
-        {
-          ...{
-            text: secondaryButton.text,
-            size: "lg",
-            variant: "secondaryOutline",
-            href: secondaryButton.href,
-            classNames: [
-              "ds-modal__secondary-button",
-              secondaryButton.isCloseButton && "ds-modal__close",
-              secondaryButton.classNames
-            ].join(" "),
-            attributes: secondaryButton.attributes,
-            forcePx,
-            mobileFullWidth: true
-          }
-        }
-      ),
-      primaryButton && /* @__PURE__ */ jsx6(
-        button_default,
-        {
-          ...{
-            text: primaryButton.text,
-            size: "lg",
-            variant: "primaryBlack",
-            href: primaryButton.href,
-            classNames: ["ds-modal__primary-button", primaryButton.classNames].join(" "),
-            attributes: primaryButton.attributes,
-            forcePx,
-            mobileFullWidth: true
-          }
-        }
-      )
-    ] })
-  ] }) }) });
-};
-
 // ../src/components/button-toggle/button-toggle.tsx
-import { jsx as jsx7 } from "preact/jsx-runtime";
+import { jsx as jsx5 } from "preact/jsx-runtime";
 var ButtonToggle = ({
   selected = false,
   text,
@@ -280,7 +164,7 @@ var ButtonToggle = ({
   classNames,
   forcePx = false
 }) => {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx5(
     ButtonBase,
     {
       ...{
@@ -308,11 +192,17 @@ var ButtonToggle = ({
 var button_toggle_default = ButtonToggle;
 
 // ../src/components/byline-list/byline-list.tsx
-import { jsx as jsx8, jsxs as jsxs4 } from "preact/jsx-runtime";
-var BylineList = ({ bylines, attributes, showBorderOnLastItem = false, forcePx, classNames }) => {
+import { jsx as jsx6, jsxs as jsxs3 } from "preact/jsx-runtime";
+var BylineList = ({
+  bylines,
+  attributes,
+  showBorderOnLastItem = false,
+  forcePx,
+  classNames
+}) => {
   const componentClassName = "ds-byline-list__item";
   const classes = formatClassString(["ds-byline-list", forcePx && "ds-force-px", classNames]);
-  return /* @__PURE__ */ jsx8("ul", { className: classes, ...attributes, children: bylines && bylines.map((byline, index) => {
+  return /* @__PURE__ */ jsx6("ul", { className: classes, ...attributes, children: bylines && bylines.map((byline, index) => {
     const { name, authorId, authorPageUrl, bylineImage, role, followable } = byline;
     const linkAttributes = {
       "data-link-category": "article author",
@@ -321,18 +211,29 @@ var BylineList = ({ bylines, attributes, showBorderOnLastItem = false, forcePx,
       "data-id": authorId
     };
     const shouldShowBorder = showBorderOnLastItem || index !== bylines.length - 1;
-    return /* @__PURE__ */ jsxs4(BylineListInner, { ...{ ...byline, forcePx }, linkAttributes, border: shouldShowBorder, followable, authorPageUrl, children: [
-      bylineImage && /* @__PURE__ */ jsx8("div", { className: `${componentClassName}__portrait`, children: bylineImage }),
-      /* @__PURE__ */ jsx8(
-        Title,
-        {
-          title: name,
-          role,
-          authorPageUrl: followable ? authorPageUrl : "",
-          attributes: followable && authorPageUrl ? linkAttributes : void 0
-        }
-      )
-    ] }, `byline-list-${index}`);
+    return /* @__PURE__ */ jsxs3(
+      BylineListInner,
+      {
+        ...{ ...byline, forcePx },
+        linkAttributes,
+        border: shouldShowBorder,
+        followable,
+        authorPageUrl,
+        children: [
+          bylineImage && /* @__PURE__ */ jsx6("div", { className: `${componentClassName}__portrait`, children: bylineImage }),
+          /* @__PURE__ */ jsx6(
+            Title,
+            {
+              title: name,
+              role,
+              authorPageUrl: followable ? authorPageUrl : "",
+              attributes: followable && authorPageUrl ? linkAttributes : void 0
+            }
+          )
+        ]
+      },
+      `byline-list-${index}`
+    );
   }) });
 };
 var BylineListInner = ({
@@ -350,18 +251,14 @@ var BylineListInner = ({
   children
 }) => {
   const componentClassName = "ds-byline-list__item";
-  const classes = formatClassString([
-    componentClassName,
-    listItemClassNames,
-    border && `${componentClassName}--border`
-  ]);
+  const classes = formatClassString([componentClassName, listItemClassNames, border && `${componentClassName}--border`]);
   const isLink = authorPageUrl && !followable;
-  return /* @__PURE__ */ jsx8("li", { className: classes, ...attributes, children: isLink ? /* @__PURE__ */ jsxs4("a", { href: authorPageUrl, className: `${componentClassName}__content`, ...linkAttributes, children: [
+  return /* @__PURE__ */ jsx6("li", { className: classes, ...attributes, children: isLink ? /* @__PURE__ */ jsxs3("a", { href: authorPageUrl, className: `${componentClassName}__content`, ...linkAttributes, children: [
     children,
-    /* @__PURE__ */ jsx8("span", { className: `${componentClassName}__icon-right`, children: IconUse({ iconName: "arrow_forward" }) })
-  ] }) : /* @__PURE__ */ jsxs4("div", { className: `${componentClassName}__content`, children: [
+    /* @__PURE__ */ jsx6("span", { className: `${componentClassName}__icon-right`, children: IconUse({ iconName: "arrow_forward" }) })
+  ] }) : /* @__PURE__ */ jsxs3("div", { className: `${componentClassName}__content`, children: [
     children,
-    followable && /* @__PURE__ */ jsx8(
+    followable && /* @__PURE__ */ jsx6(
       button_toggle_default,
       {
         ...{
@@ -381,15 +278,134 @@ var BylineListInner = ({
 };
 var Title = ({ title, role, authorPageUrl, attributes }) => {
   const componentClassName = "ds-byline-list__item";
-  const titleClasses = formatClassString([
-    `${componentClassName}__title`
-  ]);
-  return /* @__PURE__ */ jsxs4("div", { className: `${componentClassName}__titles`, children: [
-    authorPageUrl ? /* @__PURE__ */ jsx8("a", { href: authorPageUrl, className: titleClasses, ...attributes, children: title }) : /* @__PURE__ */ jsx8("span", { className: titleClasses, ...attributes, children: title }),
-    /* @__PURE__ */ jsx8("span", { className: `${componentClassName}__role`, children: role })
+  const titleClasses = formatClassString([`${componentClassName}__title`]);
+  return /* @__PURE__ */ jsxs3("div", { className: `${componentClassName}__titles`, children: [
+    authorPageUrl ? /* @__PURE__ */ jsx6("a", { href: authorPageUrl, className: titleClasses, ...attributes, children: title }) : /* @__PURE__ */ jsx6("span", { className: titleClasses, ...attributes, children: title }),
+    /* @__PURE__ */ jsx6("span", { className: `${componentClassName}__role`, children: role })
   ] });
 };
 
+// ../src/components/button/button.tsx
+import { jsx as jsx7 } from "preact/jsx-runtime";
+var Button = ({
+  text,
+  disabled = false,
+  variant = "primary",
+  size = "md",
+  fullWidth = false,
+  mobileFullWidth = false,
+  iconPosition = "none",
+  iconName,
+  loading = false,
+  type = "button",
+  href,
+  isIconButton = false,
+  classNames,
+  attributes,
+  forcePx = false
+}) => {
+  return /* @__PURE__ */ jsx7(
+    ButtonBase,
+    {
+      ...{
+        text,
+        disabled,
+        variant,
+        size,
+        fullWidth,
+        mobileFullWidth,
+        iconPosition,
+        iconName,
+        loading,
+        type,
+        href,
+        isIconButton,
+        classNames,
+        attributes,
+        forcePx
+      }
+    }
+  );
+};
+var button_default = Button;
+
+// ../src/components/modal/modal.tsx
+import { jsx as jsx8, jsxs as jsxs4 } from "preact/jsx-runtime";
+var Modal = ({
+  title,
+  modalType = "standard",
+  primaryButton,
+  secondaryButton,
+  classNames,
+  attributes,
+  forcePx,
+  children
+}) => {
+  const componentClassName = "ds-modal";
+  const classes = formatClassString([
+    componentClassName,
+    modalType === "sheet" && `${componentClassName}--sheet`,
+    forcePx && "ds-force-px",
+    classNames
+  ]);
+  const hasButtons = primaryButton || secondaryButton;
+  return /* @__PURE__ */ jsx8("div", { className: classes, children: /* @__PURE__ */ jsx8("dialog", { className: `${componentClassName}__inner`, ...attributes, children: /* @__PURE__ */ jsxs4("div", { className: `${componentClassName}__content`, children: [
+    modalType === "standard" && /* @__PURE__ */ jsx8(
+      button_default,
+      {
+        ...{
+          variant: "transparent",
+          size: "sm",
+          iconName: "close",
+          isIconButton: true,
+          attributes: {
+            "aria-label": "st\xE4ng"
+          },
+          classNames: "ds-modal__close ds-modal__close--icon"
+        }
+      }
+    ),
+    title && /* @__PURE__ */ jsx8("h2", { children: title }),
+    children,
+    hasButtons && /* @__PURE__ */ jsxs4("div", { className: "ds-modal__buttons", children: [
+      secondaryButton && /* @__PURE__ */ jsx8(
+        button_default,
+        {
+          ...{
+            text: secondaryButton.text,
+            size: "lg",
+            variant: "secondaryOutline",
+            href: secondaryButton.href,
+            classNames: [
+              "ds-modal__secondary-button",
+              secondaryButton.isCloseButton && "ds-modal__close",
+              secondaryButton.classNames
+            ].join(" "),
+            attributes: secondaryButton.attributes,
+            forcePx,
+            mobileFullWidth: true
+          }
+        }
+      ),
+      primaryButton && /* @__PURE__ */ jsx8(
+        button_default,
+        {
+          ...{
+            text: primaryButton.text,
+            size: "lg",
+            variant: "primaryBlack",
+            href: primaryButton.href,
+            classNames: ["ds-modal__primary-button", primaryButton.classNames].join(" "),
+            attributes: primaryButton.attributes,
+            forcePx,
+            mobileFullWidth: true
+          }
+        }
+      )
+    ] })
+  ] }) }) });
+};
+
 // ../src/components/byline/byline.tsx
 import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs5 } from "preact/jsx-runtime";
 var Byline = ({
@@ -421,30 +437,29 @@ var Byline = ({
           children: bylines[0].bylineImage
         }
       ),
-      /* @__PURE__ */ jsxs5("div", { className: `${componentClassName}__info ${!bylineTitle ? `${componentClassName}__info--no-title` : ""}`, children: [
-        bylineTitle && /* @__PURE__ */ jsx9("span", { className: `${componentClassName}__role`, children: bylineTitle }),
-        /* @__PURE__ */ jsx9(
-          "a",
-          {
-            href: bylines[0].authorPageUrl || "#",
-            className: `${componentClassName}__name`,
-            "data-link-category": "article author",
-            "data-id": bylines[0].authorPageUrl,
-            "data-index": "1",
-            "data-label": bylines[0].name,
-            children: bylines[0].name
-          }
-        )
-      ] })
-    ] }) : /* @__PURE__ */ jsxs5("div", { className: `${componentClassName}__inner ${componentClassName}__inner--multiple`, children: [
-      !hideBylineImages && bylines.map((byline, index) => /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsxs5(
         "div",
         {
-          className: `${componentClassName}__portrait`,
-          children: byline.bylineImage
-        },
-        `byline-portrait-${index}`
-      )),
+          className: `${componentClassName}__info ${!bylineTitle ? `${componentClassName}__info--no-title` : ""}`,
+          children: [
+            bylineTitle && /* @__PURE__ */ jsx9("span", { className: `${componentClassName}__role`, children: bylineTitle }),
+            /* @__PURE__ */ jsx9(
+              "a",
+              {
+                href: bylines[0].authorPageUrl || "#",
+                className: `${componentClassName}__name`,
+                "data-link-category": "article author",
+                "data-id": bylines[0].authorPageUrl,
+                "data-index": "1",
+                "data-label": bylines[0].name,
+                children: bylines[0].name
+              }
+            )
+          ]
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs5("div", { className: `${componentClassName}__inner ${componentClassName}__inner--multiple`, children: [
+      !hideBylineImages && bylines.map((byline, index) => /* @__PURE__ */ jsx9("div", { className: `${componentClassName}__portrait`, children: byline.bylineImage }, `byline-portrait-${index}`)),
       /* @__PURE__ */ jsxs5("div", { className: `${componentClassName}__info`, children: [
         bylineTitle && /* @__PURE__ */ jsx9("span", { className: `${componentClassName}__role`, children: bylineTitle }),
         bylines.map((byline, index) => {