@bonniernews/dn-design-system-web 32.7.35 → 32.7.37

package/preact/components/teaser-list-swipe/teaser-list-swipe.js

@@ -0,0 +1,447 @@
+// ../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/teaser-card/teaser-card.tsx
+import { jsx as jsx6 } from "preact/jsx-runtime";
+var TeaserCard = ({ areaType, targetLink, theme = "nyheter", classNames, attributes, children }) => {
+  const componentClassName = "ds-teaser";
+  const classes = formatClassString([
+    componentClassName,
+    areaType && `${componentClassName}--${areaType}`,
+    areaType == "bauta" && "ds-dark",
+    `ds-theme--${theme}`,
+    classNames
+  ]);
+  if (targetLink) {
+    return /* @__PURE__ */ jsx6("a", { className: classes, href: targetLink, ...attributes, children });
+  }
+  return /* @__PURE__ */ jsx6("div", { className: classes, ...attributes, children });
+};
+
+// ../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/group-header/group-header.tsx
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs3 } from "preact/jsx-runtime";
+function GroupHeader({
+  title,
+  type = "icon",
+  variant,
+  media,
+  href,
+  linkText,
+  showBottomBorder = false,
+  toggleText,
+  toggleSelectedText,
+  toggleSelected = false,
+  toggleLoading = false,
+  toggleClassNames,
+  toggleAttributes = {},
+  classNames,
+  attributes = {}
+}) {
+  const componentClassName = "ds-group-header";
+  const classes = formatClassString([
+    componentClassName,
+    type && `${componentClassName}--${type}`,
+    variant && `${componentClassName}--${variant}`,
+    showBottomBorder && `${componentClassName}--bottom-border`,
+    variant === "bauta" && "ds-dark",
+    classNames
+  ]);
+  const groupHeaderInner = /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    media && /* @__PURE__ */ jsx8("div", { className: `${componentClassName}__image`, children: media }),
+    /* @__PURE__ */ jsx8("h2", { className: `${componentClassName}__title`, children: title }),
+    type === "link" && linkText && href && /* @__PURE__ */ jsx8("span", { className: `${componentClassName}__right-link`, children: linkText }),
+    type === "icon" && href && /* @__PURE__ */ jsx8(IconUse, { iconName: "arrow_forward", classNames: `${componentClassName}__icon` }),
+    type === "arrows" && href && linkText && /* @__PURE__ */ jsx8("span", { className: `${componentClassName}__right-link hidden-desktop`, children: linkText }),
+    type === "arrows" && href && !linkText && /* @__PURE__ */ jsx8(IconUse, { iconName: "arrow_forward", classNames: `${componentClassName}__icon hidden-desktop` })
+  ] });
+  const buttonVariant = variant ? "staticWhite" : "secondaryOutline";
+  return /* @__PURE__ */ jsxs3("div", { className: classes, ...attributes, children: [
+    href && /* @__PURE__ */ jsx8("a", { className: `${componentClassName}__href`, href, children: groupHeaderInner }),
+    !href && groupHeaderInner,
+    type === "toggle" && !variant && /* @__PURE__ */ jsx8(
+      button_toggle_default,
+      {
+        isIconButton: false,
+        variant: "primary",
+        size: "sm",
+        text: toggleText,
+        selectedText: toggleSelectedText || toggleText || "",
+        selected: toggleSelected,
+        loading: toggleLoading,
+        classNames: toggleClassNames,
+        attributes: toggleAttributes
+      }
+    ),
+    type === "arrows" && /* @__PURE__ */ jsxs3("div", { className: `${componentClassName}__arrows hidden-mobile hidden-tablet`, children: [
+      /* @__PURE__ */ jsx8(
+        button_default,
+        {
+          variant: buttonVariant,
+          size: "sm",
+          isIconButton: true,
+          iconName: "arrow_back",
+          classNames: `${componentClassName}__arrow ${componentClassName}__arrow--left`,
+          attributes: { "aria-label": "F\xF6reg\xE5ende" }
+        }
+      ),
+      /* @__PURE__ */ jsx8(
+        button_default,
+        {
+          variant: buttonVariant,
+          size: "sm",
+          isIconButton: true,
+          iconName: "arrow_forward",
+          classNames: `${componentClassName}__arrow ${componentClassName}__arrow--right`,
+          attributes: { "aria-label": "N\xE4sta" }
+        }
+      )
+    ] })
+  ] });
+}
+
+// ../src/components/teaser-dot/teaser-dot.tsx
+import { jsx as jsx9 } from "preact/jsx-runtime";
+
+// ../src/helpers/teaser.tsx
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs4 } from "preact/jsx-runtime";
+var Title = ({ title, highlight }) => {
+  return title ? /* @__PURE__ */ jsxs4("h2", { className: "ds-teaser__title", children: [
+    highlight && /* @__PURE__ */ jsxs4("span", { className: "ds-teaser__highlight", children: [
+      highlight,
+      " ",
+      " "
+    ] }),
+    title
+  ] }) : null;
+};
+var Vignette = ({ vignette, variant }) => {
+  return vignette ? /* @__PURE__ */ jsxs4("div", { className: "ds-teaser__vignette", children: [
+    variant === "podcast" && /* @__PURE__ */ jsx10(IconUse, { iconName: "headphones" }),
+    vignette
+  ] }) : null;
+};
+
+// ../src/components/teaser-swipe-card/teaser-swipe-card.tsx
+import { jsx as jsx11, jsxs as jsxs5 } from "preact/jsx-runtime";
+var TeaserSwipeCard = ({
+  title,
+  targetLink,
+  highlight,
+  theme,
+  time,
+  media,
+  vignette,
+  variant,
+  classNames,
+  attributes
+}) => {
+  const componentClassName = "ds-teaser-swipe-card";
+  const classes = formatClassString([
+    "ds-teaser",
+    componentClassName,
+    variant && variant !== "default" && `${componentClassName}--${variant}`,
+    classNames
+  ]);
+  return /* @__PURE__ */ jsxs5(TeaserCard, { theme, targetLink, classNames: classes, attributes, children: [
+    media && variant !== "direkt" && /* @__PURE__ */ jsx11("div", { className: "ds-teaser-image", children: media }),
+    /* @__PURE__ */ jsxs5("div", { className: "ds-teaser__text", children: [
+      variant === "direkt" ? /* @__PURE__ */ jsx11("span", { className: `${componentClassName}__time`, children: time }) : /* @__PURE__ */ jsx11(Vignette, { vignette, variant }),
+      /* @__PURE__ */ jsx11(Title, { title, highlight }),
+      variant !== "direkt" && /* @__PURE__ */ jsx11("span", { className: `${componentClassName}__time`, children: time })
+    ] })
+  ] });
+};
+
+// ../src/components/teaser-list-swipe/teaser-list-swipe.tsx
+import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs6 } from "preact/jsx-runtime";
+var TeaserListSwipe = ({
+  title,
+  titleHref,
+  areaType,
+  arrowPosition = "header",
+  theme,
+  teasers = [],
+  groupHeaderType,
+  groupHeaderToggleText,
+  groupHeaderToggleSelectedText,
+  groupHeaderToggleSelected = false,
+  groupHeaderToggleClassNames,
+  groupHeaderToggleAttributes = {},
+  classNames,
+  attributes = {}
+}) => {
+  const componentClassName = "ds-teaser";
+  const classes = formatClassString(["ds-teaser--list-swipe", classNames]);
+  const headerType = groupHeaderType || arrowPosition === "header" && "arrows" || "link";
+  return /* @__PURE__ */ jsxs6(TeaserCard, { areaType, theme, classNames: classes, attributes, children: [
+    /* @__PURE__ */ jsx12(
+      GroupHeader,
+      {
+        title,
+        href: titleHref,
+        type: headerType,
+        linkText: "Visa alla",
+        toggleText: groupHeaderToggleText,
+        toggleSelectedText: groupHeaderToggleSelectedText,
+        toggleSelected: groupHeaderToggleSelected,
+        toggleClassNames: groupHeaderToggleClassNames,
+        toggleAttributes: groupHeaderToggleAttributes
+      }
+    ),
+    /* @__PURE__ */ jsx12("div", { className: `${componentClassName}__carousel`, children: teasers.map((teaser, index) => /* @__PURE__ */ jsx12(TeaserSwipeCard, { ...teaser }, index)) }),
+    arrowPosition === "floating" && /* @__PURE__ */ jsxs6(Fragment4, { children: [
+      /* @__PURE__ */ jsx12(
+        Button,
+        {
+          iconName: "arrow_back",
+          variant: "staticWhite",
+          size: "sm",
+          isIconButton: true,
+          attributes: { "aria-label": "F\xF6reg\xE5ende" },
+          classNames: `${componentClassName}__swipe-arrow ${componentClassName}__swipe-arrow--back hidden-mobile hidden-tablet`
+        }
+      ),
+      /* @__PURE__ */ jsx12(
+        Button,
+        {
+          iconName: "arrow_forward",
+          variant: "staticWhite",
+          size: "sm",
+          isIconButton: true,
+          attributes: { "aria-label": "N\xE4sta" },
+          classNames: `${componentClassName}__swipe-arrow ${componentClassName}__swipe-arrow--forward hidden-mobile hidden-tablet`
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  TeaserListSwipe
+};
+//# sourceMappingURL=teaser-list-swipe.js.map