@bonniernews/dn-design-system-web 22.2.2 → 22.3.0

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

@@ -0,0 +1,573 @@
+// ../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/assets/form-field/form-field.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "preact/jsx-runtime";
+var FormField = ({ errorMessage, wrapperClasses, helpHtml, helpText, type, children }) => {
+  const classes = formatClassString([
+    "ds-form-field",
+    wrapperClasses,
+    errorMessage && `ds-form-field__error`,
+    type === "hidden" && "hidden"
+  ]);
+  const showHelp = helpHtml || helpText;
+  return /* @__PURE__ */ jsxs2("div", { className: classes, children: [
+    children,
+    errorMessage && /* @__PURE__ */ jsxs2("div", { className: "ds-form-field__error-message js-field-error", children: [
+      /* @__PURE__ */ jsx3(IconUse, { iconName: "info-filled" }),
+      /* @__PURE__ */ jsx3("span", { children: errorMessage })
+    ] }),
+    showHelp && /* @__PURE__ */ jsx3("p", { className: "ds-form-field__help-text", children: helpHtml ? helpHtml : helpText })
+  ] });
+};
+var form_field_default = FormField;
+
+// ../src/components/checkbox/checkbox.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "preact/jsx-runtime";
+var Checkbox = ({
+  error,
+  errorMessage,
+  label,
+  stripLabel,
+  name = "ds-checkbox",
+  validation,
+  checked,
+  required,
+  disabled,
+  forcePx,
+  classNames,
+  attributes
+}) => {
+  const componentClassName = "ds-checkbox";
+  const wrapperClasses = formatClassString([componentClassName, forcePx && "ds-force-px", classNames]);
+  return /* @__PURE__ */ jsxs3(form_field_default, { error, errorMessage: label && errorMessage, wrapperClasses, children: [
+    /* @__PURE__ */ jsx4(
+      "input",
+      {
+        type: "checkbox",
+        id: name,
+        name,
+        className: `${componentClassName}__input js-field-error`,
+        "data-validation": validation,
+        ...attributes,
+        defaultChecked: checked,
+        disabled,
+        required
+      }
+    ),
+    stripLabel ? /* @__PURE__ */ jsx4("div", { className: `${componentClassName}__inner`, children: /* @__PURE__ */ jsx4(CheckboxIcons, { componentClassName }) }) : /* @__PURE__ */ jsxs3("label", { className: `${componentClassName}__inner`, htmlFor: name, children: [
+      /* @__PURE__ */ jsx4(CheckboxIcons, { componentClassName }),
+      label && /* @__PURE__ */ jsx4("span", { className: `${componentClassName}__text`, children: label })
+    ] })
+  ] });
+};
+var CheckboxIcons = ({ componentClassName }) => {
+  return /* @__PURE__ */ jsxs3("span", { className: `${componentClassName}__icon`, children: [
+    /* @__PURE__ */ jsx4(IconUse, { iconName: "check_box_outline_blank" }),
+    /* @__PURE__ */ jsx4(IconUse, { iconName: "check_box-filled" })
+  ] });
+};
+var checkbox_default = Checkbox;
+
+// ../src/components/radio-button/radio-button.tsx
+import { Fragment } from "preact";
+import { jsx as jsx5, jsxs as jsxs4 } 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__ */ jsx5(form_field_default, { error, errorMessage, wrapperClasses, children: buttons?.map((button) => {
+    const { id, selected, value, label, attributes } = button;
+    return /* @__PURE__ */ jsxs4(Fragment, { children: [
+      /* @__PURE__ */ jsx5(
+        "input",
+        {
+          type: "radio",
+          id,
+          name,
+          defaultChecked: selected,
+          disabled,
+          required,
+          value,
+          ...attributes
+        }
+      ),
+      stripLabel ? /* @__PURE__ */ jsx5("div", { className: `${componentClassName}__inner`, children: /* @__PURE__ */ jsx5(RadioButtonIcons, { componentClassName }) }) : /* @__PURE__ */ jsxs4("label", { className: `${componentClassName}__inner`, htmlFor: id, children: [
+        /* @__PURE__ */ jsx5(RadioButtonIcons, { componentClassName }),
+        label && /* @__PURE__ */ jsx5("span", { className: `${componentClassName}__text`, children: label })
+      ] })
+    ] }, id);
+  }) });
+};
+var RadioButtonIcons = ({ componentClassName }) => {
+  return /* @__PURE__ */ jsxs4("span", { className: `${componentClassName}__icon`, children: [
+    /* @__PURE__ */ jsx5(IconUse, { iconName: "radio_button_unchecked" }),
+    /* @__PURE__ */ jsx5(IconUse, { iconName: "radio_button_checked" })
+  ] });
+};
+
+// ../src/components/switch/switch.tsx
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "preact/jsx-runtime";
+var Switch = ({
+  name = "ds-switch",
+  checked,
+  showMeta = false,
+  metaOn = "P\xE5",
+  metaOff = "Av",
+  disabled,
+  stripLabel,
+  forcePx,
+  classNames,
+  attributes
+}) => {
+  const componentClassName = "ds-switch";
+  const classes = formatClassString([componentClassName, forcePx && "ds-force-px", classNames]);
+  return /* @__PURE__ */ jsxs5("div", { className: classes, children: [
+    /* @__PURE__ */ jsx6(
+      "input",
+      {
+        type: "checkbox",
+        id: name,
+        name,
+        defaultChecked: checked,
+        disabled,
+        ...attributes
+      }
+    ),
+    stripLabel ? /* @__PURE__ */ jsx6("div", { className: `${componentClassName}__inner`, children: /* @__PURE__ */ jsx6(
+      SwitchInner,
+      {
+        ...{
+          checked,
+          showMeta,
+          metaOn,
+          metaOff,
+          componentClassName
+        }
+      }
+    ) }) : /* @__PURE__ */ jsx6("label", { className: `${componentClassName}__inner`, tabIndex: 0, htmlFor: name, children: /* @__PURE__ */ jsx6(
+      SwitchInner,
+      {
+        ...{
+          checked,
+          showMeta,
+          metaOn,
+          metaOff,
+          componentClassName
+        }
+      }
+    ) })
+  ] });
+};
+var SwitchInner = ({ showMeta, checked, metaOn, metaOff, componentClassName }) => {
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    showMeta && /* @__PURE__ */ jsx6("div", { className: `${componentClassName}__meta`, children: /* @__PURE__ */ jsx6("span", { children: checked ? metaOn : metaOff }) }),
+    /* @__PURE__ */ jsx6("span", { className: `${componentClassName}__box`, children: /* @__PURE__ */ jsx6("span", { className: `${componentClassName}__knob` }) })
+  ] });
+};
+
+// ../src/components/spinner/spinner.tsx
+import { jsx as jsx7 } 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__ */ jsx7("span", { className: classes, ...attributes, children: /* @__PURE__ */ jsx7("span", { className: `${componentClassName}__inner` }) });
+};
+
+// ../src/foundations/a11y/visually-hidden.tsx
+import { jsx as jsx8 } from "preact/jsx-runtime";
+var VisuallyHidden = ({ text }) => {
+  return /* @__PURE__ */ jsx8("span", { className: "visually-hidden", dangerouslySetInnerHTML: { __html: text } });
+};
+
+// ../src/components/button/button-base.tsx
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs6 } from "preact/jsx-runtime";
+var InnerButton = ({ text, isIconButton = false, attributes, a11y, icon, loadingHtml }) => {
+  let optionalHtml;
+  if (!isIconButton) {
+    optionalHtml = /* @__PURE__ */ jsx9("span", { "aria-hidden": "true", children: text });
+  } else if (!attributes["aria-label"] && a11y?.visuallyHidden) {
+    optionalHtml = /* @__PURE__ */ jsx9(VisuallyHidden, { text: a11y.visuallyHidden });
+  }
+  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    optionalHtml,
+    icon,
+    loadingHtml
+  ] });
+};
+var ToggleWrapper = ({
+  selected = false,
+  disabled = false,
+  attributes,
+  classes,
+  onChild,
+  offChild,
+  loadingHtml
+}) => {
+  return /* @__PURE__ */ jsxs6("button", { type: "button", role: "switch", "aria-checked": selected, className: classes, ...attributes, disabled, children: [
+    /* @__PURE__ */ jsx9("span", { className: "ds-btn__off", "aria-hidden": "true", children: onChild }),
+    /* @__PURE__ */ jsx9("span", { className: "ds-btn__on", "aria-hidden": "true", children: offChild }),
+    loadingHtml
+  ] });
+};
+var ButtonBase = ({
+  text,
+  disabled = false,
+  variant = "primary",
+  emphasis = "default",
+  rounded = false,
+  size = "medium",
+  fullWidth = false,
+  mobileFullWidth = false,
+  iconPosition = "none",
+  iconName,
+  loading = false,
+  type = "button",
+  href,
+  classNames,
+  attributes = {},
+  forcePx = false,
+  isIconButton = false,
+  a11y = {},
+  selected = false,
+  isToggle = false,
+  selectedIconName,
+  selectedText
+}) => {
+  if (text && !href && !attributes["aria-label"]) {
+    attributes["aria-label"] = text;
+  }
+  let spinnerVariant = "secondary";
+  if (variant === "staticWhite") {
+    if (emphasis === "transparent" || emphasis === "outline") {
+      spinnerVariant = "staticWhite";
+    } else {
+      spinnerVariant = "staticBlack";
+    }
+  } else if (emphasis === "transparent" || emphasis === "outline" || variant === "secondary") {
+    spinnerVariant = "primary";
+  }
+  const loadingHtml = /* @__PURE__ */ jsx9(Spinner, { ...{ size: "small", variant: spinnerVariant, forcePx, attributes: { "aria-hidden": "true" } } });
+  let icon;
+  if (iconName && (iconPosition != "none" || isIconButton == true)) {
+    icon = /* @__PURE__ */ jsx9(IconUse, { ...{ iconName, attributes: { "aria-hidden": "true" } } });
+  }
+  const classNamePrefix = "ds-btn--";
+  const classes = formatClassString([
+    "ds-btn",
+    `${classNamePrefix}${variant}`,
+    `${classNamePrefix}${emphasis}`,
+    `${classNamePrefix}${size}`,
+    isToggle && selected && `${classNamePrefix}selected`,
+    fullWidth && `${classNamePrefix}full-width`,
+    mobileFullWidth && `${classNamePrefix}mobile-full-width`,
+    icon && !isIconButton && `${classNamePrefix}icon-${iconPosition}`,
+    isIconButton && `${classNamePrefix}icon-only`,
+    rounded && `${classNamePrefix}rounded`,
+    isToggle && `${classNamePrefix}toggle`,
+    loading && "ds-loading",
+    forcePx && "ds-force-px",
+    classNames
+  ]);
+  let buttonToRender;
+  if (isToggle) {
+    let onChild, offChild;
+    if (isIconButton && iconName && selectedIconName) {
+      onChild = /* @__PURE__ */ jsx9(IconUse, { iconName });
+      offChild = /* @__PURE__ */ jsx9(IconUse, { iconName: selectedIconName });
+    } else {
+      onChild = /* @__PURE__ */ jsx9("span", { children: text });
+      offChild = /* @__PURE__ */ jsxs6(Fragment3, { children: [
+        /* @__PURE__ */ jsx9(IconUse, { iconName: "check" }),
+        /* @__PURE__ */ jsx9("span", { children: selectedText })
+      ] });
+    }
+    buttonToRender = /* @__PURE__ */ jsx9(ToggleWrapper, { ...{ selected, classes, attributes, disabled, onChild, offChild, loadingHtml } });
+  } else {
+    const buttonParams = { isIconButton, a11y, text, icon, loadingHtml, attributes };
+    if (href) {
+      buttonToRender = /* @__PURE__ */ jsx9("a", { href, className: classes, ...attributes, children: /* @__PURE__ */ jsx9(InnerButton, { ...buttonParams }) });
+    } else {
+      buttonToRender = /* @__PURE__ */ jsx9("button", { type, className: classes, ...attributes, disabled, children: /* @__PURE__ */ jsx9(InnerButton, { ...buttonParams }) });
+    }
+  }
+  return /* @__PURE__ */ jsx9(Fragment3, { children: buttonToRender });
+};
+
+// ../src/components/button-toggle/button-toggle.tsx
+import { jsx as jsx10 } from "preact/jsx-runtime";
+var ButtonToggle = ({
+  selected = false,
+  text,
+  selectedText,
+  disabled = false,
+  variant = "primary",
+  size = "medium",
+  fullWidth = false,
+  mobileFullWidth = false,
+  loading = false,
+  attributes = {},
+  classNames,
+  forcePx = false
+}) => {
+  return /* @__PURE__ */ jsx10(
+    ButtonBase,
+    {
+      ...{
+        selected,
+        text,
+        disabled,
+        variant,
+        rounded: true,
+        size,
+        fullWidth,
+        mobileFullWidth,
+        loading,
+        classNames,
+        attributes,
+        forcePx,
+        isToggle: true,
+        selectedText,
+        type: "button"
+      }
+    }
+  );
+};
+var button_toggle_default = ButtonToggle;
+
+// ../src/components/list-item/list-item.tsx
+import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs7 } from "preact/jsx-runtime";
+var ListItem = (props) => {
+  const {
+    listItemType,
+    title,
+    subtitle,
+    meta,
+    border = false,
+    fontWeight = "regular",
+    attributes,
+    forcePx,
+    classNames
+  } = props;
+  const componentClassName = "ds-list-item";
+  const classes = formatClassString([
+    componentClassName,
+    border && `${componentClassName}--border`,
+    forcePx && "ds-force-px",
+    classNames
+  ]);
+  let iconLeftSvg;
+  if (listItemType === "accordion" || listItemType === "switch" || listItemType === "standard") {
+    const { leadingIcon } = props;
+    if (leadingIcon) {
+      iconLeftSvg = IconUse({ iconName: leadingIcon });
+    }
+  }
+  let iconRightSvg;
+  if (listItemType === "standard" || listItemType === "image") {
+    const { trailingIcon } = props;
+    if (trailingIcon) {
+      iconRightSvg = IconUse({ iconName: trailingIcon });
+    }
+  }
+  const mediaHtml = (listItemType === "image" || listItemType === "byline") && props.mediaHtml;
+  return /* @__PURE__ */ jsx11("li", { className: classes, children: /* @__PURE__ */ jsxs7(ListItemInner, { ...{ ...props, componentClassName }, children: [
+    iconLeftSvg && /* @__PURE__ */ jsx11("span", { className: `${componentClassName}__icon-left`, children: iconLeftSvg }),
+    mediaHtml && /* @__PURE__ */ jsx11(
+      "div",
+      {
+        className: getImageClass(componentClassName, listItemType),
+        dangerouslySetInnerHTML: { __html: mediaHtml }
+      }
+    ),
+    title && /* @__PURE__ */ jsx11(
+      Title,
+      {
+        title,
+        subtitle,
+        fontWeight,
+        componentClassName,
+        attributes
+      }
+    ),
+    meta && /* @__PURE__ */ jsx11("span", { className: `${componentClassName}__meta`, children: meta }),
+    iconRightSvg && /* @__PURE__ */ jsx11("span", { className: `${componentClassName}__icon-right`, children: iconRightSvg })
+  ] }) });
+};
+var ListItemInner = ({
+  listItemType,
+  href,
+  disabled,
+  attributes,
+  checked,
+  selected,
+  value,
+  variant,
+  toggleText,
+  toggleSelectedText,
+  name = "ds-list-item",
+  id = "ds-list-item",
+  forcePx,
+  componentClassName,
+  accordionContent,
+  children
+}) => {
+  const classes = formatClassString([
+    `${componentClassName}__content`,
+    `${componentClassName}--${listItemType}`,
+    disabled && `${componentClassName}--disabled`
+  ]);
+  switch (listItemType) {
+    case "standard":
+    case "image":
+      const hasLink = href && !disabled;
+      return /* @__PURE__ */ jsx11(Fragment4, { children: hasLink ? /* @__PURE__ */ jsx11("a", { className: classes, href, ...attributes, children }) : /* @__PURE__ */ jsx11("button", { className: classes, disabled, ...attributes, children }) });
+    case "checkbox":
+      return /* @__PURE__ */ jsxs7("label", { className: classes, htmlFor: name, ...attributes, children: [
+        /* @__PURE__ */ jsx11(ListItemIconWrapper, { placement: "left", componentClassName, children: /* @__PURE__ */ jsx11(
+          checkbox_default,
+          {
+            ...{
+              name,
+              checked,
+              stripLabel: true,
+              disabled,
+              forcePx,
+              attributes
+            }
+          }
+        ) }),
+        children
+      ] });
+    case "radio":
+      return /* @__PURE__ */ jsxs7("label", { className: classes, htmlFor: id, ...attributes, children: [
+        /* @__PURE__ */ jsx11(ListItemIconWrapper, { placement: "left", componentClassName, children: /* @__PURE__ */ jsx11(
+          RadioButton,
+          {
+            ...{
+              id,
+              name,
+              disabled,
+              selected,
+              forcePx,
+              buttons: [{ id, selected, value: value || "" }],
+              attributes
+            }
+          }
+        ) }),
+        children
+      ] });
+    case "switch":
+      return /* @__PURE__ */ jsxs7("label", { className: classes, htmlFor: name, ...attributes, children: [
+        children,
+        /* @__PURE__ */ jsx11(ListItemIconWrapper, { placement: "right", componentClassName, children: /* @__PURE__ */ jsx11(
+          Switch,
+          {
+            ...{
+              name,
+              showMeta: true,
+              checked,
+              disabled,
+              forcePx,
+              stripLabel: true,
+              attributes
+            }
+          }
+        ) })
+      ] });
+    case "accordion":
+      return /* @__PURE__ */ jsxs7(Fragment4, { children: [
+        /* @__PURE__ */ jsxs7("button", { className: classes, disabled, ...attributes, children: [
+          children,
+          /* @__PURE__ */ jsxs7(ListItemIconWrapper, { placement: "right", componentClassName, children: [
+            /* @__PURE__ */ jsx11(IconUse, { iconName: "expand_less" }),
+            /* @__PURE__ */ jsx11(IconUse, { iconName: "expand_more" })
+          ] })
+        ] }),
+        accordionContent && /* @__PURE__ */ jsx11("div", { className: `${componentClassName}__accordion-inner`, children: accordionContent })
+      ] });
+    case "toggle":
+    case "byline":
+      const buttonComponent = /* @__PURE__ */ jsx11(
+        button_toggle_default,
+        {
+          ...{
+            text: toggleText,
+            selectedText: toggleSelectedText || "",
+            variant: variant || "secondary",
+            size: "small",
+            selected,
+            disabled,
+            forcePx,
+            attributes
+          }
+        }
+      );
+      return /* @__PURE__ */ jsxs7("div", { className: classes, ...attributes, children: [
+        children,
+        buttonComponent
+      ] });
+    default:
+      return /* @__PURE__ */ jsx11("div", { className: classes, ...attributes, children });
+  }
+};
+var Title = ({ title, subtitle, fontWeight, attributes }) => {
+  const componentClassName = "ds-list-item";
+  const titleClasses = formatClassString([
+    `${componentClassName}__title`,
+    `${componentClassName}__title--${fontWeight}`
+  ]);
+  return /* @__PURE__ */ jsxs7("div", { className: `${componentClassName}__titles`, children: [
+    /* @__PURE__ */ jsx11("span", { className: titleClasses, ...attributes, children: title }),
+    subtitle && /* @__PURE__ */ jsx11("span", { className: `${componentClassName}__subtitle`, children: subtitle })
+  ] });
+};
+var ListItemIconWrapper = ({
+  placement,
+  componentClassName,
+  children
+}) => {
+  return /* @__PURE__ */ jsx11("span", { className: `${componentClassName}__icon-${placement}`, children });
+};
+var getImageClass = (componentClassName, listItemType) => {
+  const imageType = listItemType === "byline" ? "portrait" : "image";
+  return `${componentClassName}__${imageType}`;
+};
+export {
+  ListItem
+};
+//# sourceMappingURL=list-item.js.map