@bonniernews/dn-design-system-web 28.0.1 → 29.0.1

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

@@ -209,20 +209,14 @@ var Spinner = ({ variant = "primary", size = "large", forcePx, classNames, attri
   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 }) => {
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs6 } from "preact/jsx-runtime";
+var InnerButton = ({ text, isIconButton = false, attributes, 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 });
+  if (!isIconButton && attributes["aria-label"]) {
+    optionalHtml = /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", children: text });
+  } else if (!isIconButton) {
+    optionalHtml = /* @__PURE__ */ jsx8("span", { children: text });
   }
   return /* @__PURE__ */ jsxs6(Fragment3, { children: [
     optionalHtml,
@@ -240,8 +234,8 @@ var ToggleWrapper = ({
   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 }),
+    /* @__PURE__ */ jsx8("span", { className: "ds-btn__off", "aria-hidden": "true", children: onChild }),
+    /* @__PURE__ */ jsx8("span", { className: "ds-btn__on", "aria-hidden": "true", children: offChild }),
     loadingHtml
   ] });
 };
@@ -249,9 +243,7 @@ var ButtonBase = ({
   text,
   disabled = false,
   variant = "primary",
-  emphasis = "default",
-  rounded = false,
-  size = "medium",
+  size = "md",
   fullWidth = false,
   mobileFullWidth = false,
   iconPosition = "none",
@@ -263,42 +255,35 @@ var ButtonBase = ({
   attributes = {},
   forcePx = false,
   isIconButton = false,
-  a11y = {},
   selected = false,
   isToggle = false,
   selectedIconName,
   selectedText
 }) => {
-  if (text && !href && !attributes["aria-label"]) {
+  if (isIconButton && text && !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") {
+  if (variant === "staticWhite" || variant === "transparent") {
+    spinnerVariant = "staticBlack";
+  } else if (variant === "secondaryFilled" || variant === "secondaryOutline") {
     spinnerVariant = "primary";
   }
-  const loadingHtml = /* @__PURE__ */ jsx9(Spinner, { ...{ size: "small", variant: spinnerVariant, forcePx, attributes: { "aria-hidden": "true" } } });
+  const loadingHtml = /* @__PURE__ */ jsx8(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" } } });
+    icon = /* @__PURE__ */ jsx8(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",
@@ -308,45 +293,48 @@ var ButtonBase = ({
   if (isToggle) {
     let onChild, offChild;
     if (isIconButton && iconName && selectedIconName) {
-      onChild = /* @__PURE__ */ jsx9(IconUse, { iconName });
-      offChild = /* @__PURE__ */ jsx9(IconUse, { iconName: selectedIconName });
+      onChild = /* @__PURE__ */ jsx8(IconUse, { iconName });
+      offChild = /* @__PURE__ */ jsx8(IconUse, { iconName: selectedIconName });
     } else {
-      onChild = /* @__PURE__ */ jsx9("span", { children: text });
+      onChild = /* @__PURE__ */ jsx8("span", { children: text });
       offChild = /* @__PURE__ */ jsxs6(Fragment3, { children: [
-        /* @__PURE__ */ jsx9(IconUse, { iconName: "check" }),
-        /* @__PURE__ */ jsx9("span", { children: selectedText })
+        /* @__PURE__ */ jsx8(IconUse, { iconName: "check" }),
+        /* @__PURE__ */ jsx8("span", { children: selectedText })
       ] });
     }
-    buttonToRender = /* @__PURE__ */ jsx9(ToggleWrapper, { ...{ selected, classes, attributes, disabled, onChild, offChild, loadingHtml } });
+    buttonToRender = /* @__PURE__ */ jsx8(ToggleWrapper, { ...{ selected, classes, attributes, disabled, onChild, offChild, loadingHtml } });
   } else {
-    const buttonParams = { isIconButton, a11y, text, icon, loadingHtml, attributes };
+    const buttonParams = { isIconButton, text, icon, loadingHtml, attributes };
     if (href) {
       const params = { ...buttonParams, loadingHtml: null };
-      buttonToRender = /* @__PURE__ */ jsx9("a", { href, className: classes, ...attributes, children: /* @__PURE__ */ jsx9(InnerButton, { ...params }) });
+      buttonToRender = /* @__PURE__ */ jsx8("a", { href, className: classes, ...attributes, children: /* @__PURE__ */ jsx8(InnerButton, { ...params }) });
     } else {
-      buttonToRender = /* @__PURE__ */ jsx9("button", { type, className: classes, ...attributes, disabled, children: /* @__PURE__ */ jsx9(InnerButton, { ...buttonParams }) });
+      buttonToRender = /* @__PURE__ */ jsx8("button", { type, className: classes, ...attributes, disabled, children: /* @__PURE__ */ jsx8(InnerButton, { ...buttonParams }) });
     }
   }
-  return /* @__PURE__ */ jsx9(Fragment3, { children: buttonToRender });
+  return /* @__PURE__ */ jsx8(Fragment3, { children: buttonToRender });
 };
 
 // ../src/components/button-toggle/button-toggle.tsx
-import { jsx as jsx10 } from "preact/jsx-runtime";
+import { jsx as jsx9 } from "preact/jsx-runtime";
 var ButtonToggle = ({
   selected = false,
   text,
   selectedText,
   disabled = false,
   variant = "primary",
-  size = "medium",
+  size = "md",
   fullWidth = false,
   mobileFullWidth = false,
+  isIconButton = false,
+  iconName,
+  selectedIconName,
   loading = false,
   attributes = {},
   classNames,
   forcePx = false
 }) => {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx9(
     ButtonBase,
     {
       ...{
@@ -354,10 +342,12 @@ var ButtonToggle = ({
         text,
         disabled,
         variant,
-        rounded: true,
         size,
         fullWidth,
         mobileFullWidth,
+        isIconButton,
+        iconName,
+        selectedIconName,
         loading,
         classNames,
         attributes,
@@ -372,7 +362,7 @@ var ButtonToggle = ({
 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";
+import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs7 } from "preact/jsx-runtime";
 var ListItem = (props) => {
   const {
     listItemType,
@@ -407,16 +397,16 @@ var ListItem = (props) => {
     }
   }
   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(
+  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: getImageClass(componentClassName, listItemType),
         dangerouslySetInnerHTML: { __html: mediaHtml }
       }
     ),
-    title && /* @__PURE__ */ jsx11(
+    title && /* @__PURE__ */ jsx10(
       Title,
       {
         title,
@@ -426,8 +416,8 @@ var ListItem = (props) => {
         attributes
       }
     ),
-    meta && /* @__PURE__ */ jsx11("span", { className: `${componentClassName}__meta`, children: meta }),
-    iconRightSvg && /* @__PURE__ */ jsx11("span", { className: `${componentClassName}__icon-right`, children: iconRightSvg })
+    meta && /* @__PURE__ */ jsx10("span", { className: `${componentClassName}__meta`, children: meta }),
+    iconRightSvg && /* @__PURE__ */ jsx10("span", { className: `${componentClassName}__icon-right`, children: iconRightSvg })
   ] }) });
 };
 var ListItemInner = ({
@@ -457,10 +447,10 @@ var ListItemInner = ({
     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 }) });
+      return /* @__PURE__ */ jsx10(Fragment4, { children: hasLink ? /* @__PURE__ */ jsx10("a", { className: classes, href, ...attributes, children }) : /* @__PURE__ */ jsx10("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(
+        /* @__PURE__ */ jsx10(ListItemIconWrapper, { placement: "left", componentClassName, children: /* @__PURE__ */ jsx10(
           checkbox_default,
           {
             ...{
@@ -477,7 +467,7 @@ var ListItemInner = ({
       ] });
     case "radio":
       return /* @__PURE__ */ jsxs7("label", { className: classes, htmlFor: id, ...attributes, children: [
-        /* @__PURE__ */ jsx11(ListItemIconWrapper, { placement: "left", componentClassName, children: /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx10(ListItemIconWrapper, { placement: "left", componentClassName, children: /* @__PURE__ */ jsx10(
           RadioButton,
           {
             ...{
@@ -496,7 +486,7 @@ var ListItemInner = ({
     case "switch":
       return /* @__PURE__ */ jsxs7("label", { className: classes, htmlFor: name, ...attributes, children: [
         children,
-        /* @__PURE__ */ jsx11(ListItemIconWrapper, { placement: "right", componentClassName, children: /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx10(ListItemIconWrapper, { placement: "right", componentClassName, children: /* @__PURE__ */ jsx10(
           Switch,
           {
             ...{
@@ -516,22 +506,22 @@ var ListItemInner = ({
         /* @__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" })
+            /* @__PURE__ */ jsx10(IconUse, { iconName: "expand_less" }),
+            /* @__PURE__ */ jsx10(IconUse, { iconName: "expand_more" })
           ] })
         ] }),
-        accordionContent && /* @__PURE__ */ jsx11("div", { className: `${componentClassName}__accordion-inner`, children: accordionContent })
+        accordionContent && /* @__PURE__ */ jsx10("div", { className: `${componentClassName}__accordion-inner`, children: accordionContent })
       ] });
     case "toggle":
     case "byline":
-      const buttonComponent = /* @__PURE__ */ jsx11(
+      const buttonComponent = /* @__PURE__ */ jsx10(
         button_toggle_default,
         {
           ...{
             text: toggleText,
             selectedText: toggleSelectedText || "",
-            variant: variant || "secondary",
-            size: "small",
+            variant: variant || "secondaryFilled",
+            size: "sm",
             selected,
             disabled,
             forcePx,
@@ -544,7 +534,7 @@ var ListItemInner = ({
         buttonComponent
       ] });
     default:
-      return /* @__PURE__ */ jsx11("div", { className: classes, ...attributes, children });
+      return /* @__PURE__ */ jsx10("div", { className: classes, ...attributes, children });
   }
 };
 var Title = ({ title, subtitle, fontWeight, attributes }) => {
@@ -554,8 +544,8 @@ var Title = ({ title, subtitle, fontWeight, attributes }) => {
     `${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 })
+    /* @__PURE__ */ jsx10("span", { className: titleClasses, ...attributes, children: title }),
+    subtitle && /* @__PURE__ */ jsx10("span", { className: `${componentClassName}__subtitle`, children: subtitle })
   ] });
 };
 var ListItemIconWrapper = ({
@@ -563,7 +553,7 @@ var ListItemIconWrapper = ({
   componentClassName,
   children
 }) => {
-  return /* @__PURE__ */ jsx11("span", { className: `${componentClassName}__icon-${placement}`, children });
+  return /* @__PURE__ */ jsx10("span", { className: `${componentClassName}__icon-${placement}`, children });
 };
 var getImageClass = (componentClassName, listItemType) => {
   const imageType = listItemType === "byline" ? "portrait" : "image";