@bonniernews/dn-design-system-web 32.6.1 → 32.7.0

package/preact/components/byline/byline.js

@@ -0,0 +1,505 @@
+// ../src/components/byline/byline.tsx
+import { Fragment as Fragment2 } from "preact/jsx-runtime";
+
+// ../src/helpers/formatClassString.ts
+var formatClassString = (classesArray) => {
+  return classesArray.filter((x) => !!x).join(" ");
+};
+
+// ../src/foundations/icons/sprite.svg
+import { h } from "preact";
+import { jsx, jsxs } from "preact/jsx-runtime";
+
+// ../src/components/icon-sprite/icon-sprite.tsx
+import { jsx as jsx2 } from "preact/jsx-runtime";
+var IconUse = ({ iconName, classNames, attributes }) => {
+  const componentClassName = "ds-icon";
+  const classes = formatClassString([
+    componentClassName,
+    `${componentClassName}--sprite`,
+    `${componentClassName}--${iconName}`,
+    classNames
+  ]);
+  return /* @__PURE__ */ jsx2("i", { className: classes, ...attributes, children: /* @__PURE__ */ jsx2("svg", { children: /* @__PURE__ */ jsx2("use", { xlinkHref: `#ds-${iconName}` }) }) });
+};
+
+// ../src/components/spinner/spinner.tsx
+import { jsx as jsx3 } from "preact/jsx-runtime";
+var Spinner = ({ variant = "primary", size = "large", forcePx, classNames, attributes }) => {
+  const componentClassName = "ds-spinner";
+  const classes = formatClassString([
+    `${componentClassName}`,
+    `${componentClassName}--${variant}`,
+    `${componentClassName}--${size}`,
+    forcePx && "ds-force-px",
+    classNames
+  ]);
+  return /* @__PURE__ */ jsx3("span", { className: classes, ...attributes, children: /* @__PURE__ */ jsx3("span", { className: `${componentClassName}__inner` }) });
+};
+
+// ../src/components/button/button-base.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "preact/jsx-runtime";
+var InnerButton = ({ text, isIconButton = false, attributes, icon, loadingHtml }) => {
+  let optionalHtml;
+  if (!isIconButton && attributes["aria-label"]) {
+    optionalHtml = /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", children: text });
+  } else if (!isIconButton) {
+    optionalHtml = /* @__PURE__ */ jsx4("span", { children: text });
+  }
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    optionalHtml,
+    icon,
+    loadingHtml
+  ] });
+};
+var ToggleWrapper = ({
+  selected = false,
+  disabled = false,
+  attributes,
+  classes,
+  onChild,
+  offChild,
+  loadingHtml
+}) => {
+  return /* @__PURE__ */ jsxs2("button", { type: "button", role: "switch", "aria-checked": selected, className: classes, ...attributes, disabled, children: [
+    /* @__PURE__ */ jsx4("span", { className: "ds-btn__off", "aria-hidden": "true", children: onChild }),
+    /* @__PURE__ */ jsx4("span", { className: "ds-btn__on", "aria-hidden": "true", children: offChild }),
+    loadingHtml
+  ] });
+};
+var ButtonBase = ({
+  text,
+  disabled = false,
+  variant = "primary",
+  size = "md",
+  fullWidth = false,
+  mobileFullWidth = false,
+  iconPosition = "none",
+  iconName,
+  loading = false,
+  type = "button",
+  href,
+  classNames,
+  attributes = {},
+  forcePx = false,
+  isIconButton = false,
+  selected = false,
+  isToggle = false,
+  selectedIconName,
+  selectedText
+}) => {
+  if (isIconButton && text && !attributes["aria-label"]) {
+    attributes["aria-label"] = text;
+  } else if (isToggle && text && selectedText && !attributes["aria-label"]) {
+    attributes["aria-label"] = selected ? selectedText : text;
+  }
+  let spinnerVariant = "secondary";
+  if (variant === "staticWhite" || variant === "transparent") {
+    spinnerVariant = "staticBlack";
+  } else if (variant === "secondaryFilled" || variant === "secondaryOutline") {
+    spinnerVariant = "primary";
+  }
+  const loadingHtml = /* @__PURE__ */ jsx4(Spinner, { ...{ size: "small", variant: spinnerVariant, forcePx, attributes: { "aria-hidden": "true" } } });
+  let icon;
+  if (iconName && (iconPosition != "none" || isIconButton == true)) {
+    icon = /* @__PURE__ */ jsx4(IconUse, { ...{ iconName, attributes: { "aria-hidden": "true" } } });
+  }
+  const classNamePrefix = "ds-btn--";
+  const classes = formatClassString([
+    "ds-btn",
+    `${classNamePrefix}${variant}`,
+    `${classNamePrefix}${size}`,
+    isToggle && selected && `${classNamePrefix}selected`,
+    fullWidth && `${classNamePrefix}full-width`,
+    mobileFullWidth && `${classNamePrefix}mobile-full-width`,
+    icon && !isIconButton && `${classNamePrefix}icon-${iconPosition}`,
+    isIconButton && `${classNamePrefix}icon-only`,
+    isToggle && `${classNamePrefix}toggle`,
+    loading && "ds-loading",
+    forcePx && "ds-force-px",
+    classNames
+  ]);
+  let buttonToRender;
+  if (isToggle) {
+    let onChild, offChild;
+    if (isIconButton && iconName && selectedIconName) {
+      onChild = /* @__PURE__ */ jsx4(IconUse, { iconName });
+      offChild = /* @__PURE__ */ jsx4(IconUse, { iconName: selectedIconName });
+    } else {
+      onChild = /* @__PURE__ */ jsx4("span", { children: text });
+      offChild = /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx4(IconUse, { iconName: "check" }),
+        /* @__PURE__ */ jsx4("span", { children: selectedText })
+      ] });
+    }
+    buttonToRender = /* @__PURE__ */ jsx4(ToggleWrapper, { ...{ selected, classes, attributes, disabled, onChild, offChild, loadingHtml } });
+  } else {
+    const buttonParams = { isIconButton, text, icon, loadingHtml, attributes };
+    if (href) {
+      const params = { ...buttonParams, loadingHtml: null };
+      buttonToRender = /* @__PURE__ */ jsx4("a", { href, className: classes, ...attributes, children: /* @__PURE__ */ jsx4(InnerButton, { ...params }) });
+    } else {
+      buttonToRender = /* @__PURE__ */ jsx4("button", { type, className: classes, ...attributes, disabled, children: /* @__PURE__ */ jsx4(InnerButton, { ...buttonParams }) });
+    }
+  }
+  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";
+var ButtonToggle = ({
+  selected = false,
+  text,
+  selectedText,
+  disabled = false,
+  variant = "primary",
+  size = "md",
+  fullWidth = false,
+  mobileFullWidth = false,
+  isIconButton = false,
+  iconName,
+  selectedIconName,
+  loading = false,
+  attributes = {},
+  classNames,
+  forcePx = false
+}) => {
+  return /* @__PURE__ */ jsx7(
+    ButtonBase,
+    {
+      ...{
+        selected,
+        text,
+        disabled,
+        variant,
+        size,
+        fullWidth,
+        mobileFullWidth,
+        isIconButton,
+        iconName,
+        selectedIconName,
+        loading,
+        classNames,
+        attributes,
+        forcePx,
+        isToggle: true,
+        selectedText,
+        type: "button"
+      }
+    }
+  );
+};
+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 }) => {
+  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) => {
+    const { name, authorId, authorPageUrl, bylineImage, role, followable } = byline;
+    const linkAttributes = {
+      "data-link-category": "article author",
+      "data-index": `${index}`,
+      "data-label": name,
+      "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`,
+          dangerouslySetInnerHTML: { __html: bylineImage }
+        }
+      ),
+      /* @__PURE__ */ jsx8(
+        Title,
+        {
+          title: name,
+          role,
+          authorPageUrl: followable ? authorPageUrl : "",
+          attributes: followable && authorPageUrl ? linkAttributes : void 0
+        }
+      )
+    ] }, `byline-list-${index}`);
+  }) });
+};
+var BylineListInner = ({
+  disabled,
+  attributes,
+  linkAttributes,
+  authorPageUrl,
+  listItemClassNames,
+  buttonAttributes,
+  buttonClassNames,
+  followable,
+  followed,
+  border = true,
+  forcePx,
+  children
+}) => {
+  const componentClassName = "ds-byline-list__item";
+  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: [
+    children,
+    /* @__PURE__ */ jsx8("span", { className: `${componentClassName}__icon-right`, children: IconUse({ iconName: "arrow_forward" }) })
+  ] }) : /* @__PURE__ */ jsxs4("div", { className: `${componentClassName}__content`, children: [
+    children,
+    followable && /* @__PURE__ */ jsx8(
+      button_toggle_default,
+      {
+        ...{
+          text: "F\xF6lj",
+          selectedText: "F\xF6ljer",
+          variant: "secondaryFilled",
+          size: "sm",
+          selected: followed,
+          disabled,
+          forcePx,
+          attributes: buttonAttributes,
+          classNames: buttonClassNames
+        }
+      }
+    )
+  ] }) });
+};
+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 })
+  ] });
+};
+
+// ../src/components/byline/byline.tsx
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs5 } from "preact/jsx-runtime";
+var Byline = ({
+  bylines,
+  bylineTitle,
+  largeByline = false,
+  hideBylineImages = false,
+  renderBylineModal = false,
+  showNameAsLink = false,
+  classNames,
+  attributes
+}) => {
+  const componentClassName = "ds-byline";
+  const classes = formatClassString([
+    componentClassName,
+    largeByline ? `${componentClassName}--large` : "",
+    !hideBylineImages ? `${componentClassName}--show-images` : "",
+    classNames
+  ]);
+  const shouldRenderModal = !!bylines.length && renderBylineModal && !showNameAsLink;
+  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+    /* @__PURE__ */ jsx9("div", { className: classes, ...attributes, children: bylines.length === 1 ? /* @__PURE__ */ jsxs5("div", { className: `${componentClassName}__inner`, children: [
+      !hideBylineImages && /* @__PURE__ */ jsx9(
+        "div",
+        {
+          className: largeByline ? `${componentClassName}__portrait--large` : `${componentClassName}__portrait`,
+          dangerouslySetInnerHTML: { __html: bylines[0].bylineImage || "" }
+        }
+      ),
+      /* @__PURE__ */ jsxs5("div", { className: `${componentClassName}__info`, children: [
+        /* @__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`,
+          dangerouslySetInnerHTML: { __html: byline.bylineImage || "" }
+        },
+        `byline-portrait-${index}`
+      )),
+      /* @__PURE__ */ jsxs5("div", { className: `${componentClassName}__info`, children: [
+        /* @__PURE__ */ jsx9("span", { className: `${componentClassName}__role`, children: bylineTitle }),
+        bylines.map((byline, index) => {
+          const { authorPageUrl } = byline;
+          const isLast = index === bylines.length - 1;
+          return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+            isLast && /* @__PURE__ */ jsx9("span", { className: `${componentClassName}__and`, children: "och " }),
+            /* @__PURE__ */ jsx9(
+              AuthorName,
+              {
+                renderLink: showNameAsLink && !!authorPageUrl,
+                byline,
+                componentClassName,
+                index: index + 1,
+                showComma: index < bylines.length - 2
+              }
+            ),
+            " "
+          ] }, `byline-name-${index}`);
+        })
+      ] })
+    ] }) }),
+    shouldRenderModal && /* @__PURE__ */ jsx9(Modal, { modalType: "sheet", classNames: "ds-modal--byline", children: /* @__PURE__ */ jsx9(BylineList, { bylines }) })
+  ] });
+};
+var AuthorName = ({ renderLink, byline, componentClassName, index, showComma }) => {
+  const { authorPageUrl, name } = byline;
+  if (renderLink) {
+    return /* @__PURE__ */ jsxs5(
+      "a",
+      {
+        href: authorPageUrl,
+        className: `${componentClassName}__name`,
+        "data-link-category": "article author",
+        "data-id": authorPageUrl,
+        "data-index": index,
+        "data-label": name,
+        children: [
+          name,
+          showComma ? "," : ""
+        ]
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsxs5("span", { className: `${componentClassName}__name`, children: [
+      name,
+      showComma ? "," : ""
+    ] });
+  }
+};
+export {
+  Byline
+};
+//# sourceMappingURL=byline.js.map