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

package/preact/components/text-input/text-input.js

@@ -54,20 +54,14 @@ var Spinner = ({ variant = "primary", size = "large", forcePx, classNames, attri
   return /* @__PURE__ */ jsx4("span", { className: classes, ...attributes, children: /* @__PURE__ */ jsx4("span", { className: `${componentClassName}__inner` }) });
 };
 
-// ../src/foundations/a11y/visually-hidden.tsx
-import { jsx as jsx5 } from "preact/jsx-runtime";
-var VisuallyHidden = ({ text }) => {
-  return /* @__PURE__ */ jsx5("span", { className: "visually-hidden", dangerouslySetInnerHTML: { __html: text } });
-};
-
 // ../src/components/button/button-base.tsx
-import { Fragment, jsx as jsx6, jsxs as jsxs3 } from "preact/jsx-runtime";
-var InnerButton = ({ text, isIconButton = false, attributes, a11y, icon, loadingHtml }) => {
+import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "preact/jsx-runtime";
+var InnerButton = ({ text, isIconButton = false, attributes, icon, loadingHtml }) => {
   let optionalHtml;
-  if (!isIconButton) {
-    optionalHtml = /* @__PURE__ */ jsx6("span", { "aria-hidden": "true", children: text });
-  } else if (!attributes["aria-label"] && a11y?.visuallyHidden) {
-    optionalHtml = /* @__PURE__ */ jsx6(VisuallyHidden, { text: a11y.visuallyHidden });
+  if (!isIconButton && attributes["aria-label"]) {
+    optionalHtml = /* @__PURE__ */ jsx5("span", { "aria-hidden": "true", children: text });
+  } else if (!isIconButton) {
+    optionalHtml = /* @__PURE__ */ jsx5("span", { children: text });
   }
   return /* @__PURE__ */ jsxs3(Fragment, { children: [
     optionalHtml,
@@ -85,8 +79,8 @@ var ToggleWrapper = ({
   loadingHtml
 }) => {
   return /* @__PURE__ */ jsxs3("button", { type: "button", role: "switch", "aria-checked": selected, className: classes, ...attributes, disabled, children: [
-    /* @__PURE__ */ jsx6("span", { className: "ds-btn__off", "aria-hidden": "true", children: onChild }),
-    /* @__PURE__ */ jsx6("span", { className: "ds-btn__on", "aria-hidden": "true", children: offChild }),
+    /* @__PURE__ */ jsx5("span", { className: "ds-btn__off", "aria-hidden": "true", children: onChild }),
+    /* @__PURE__ */ jsx5("span", { className: "ds-btn__on", "aria-hidden": "true", children: offChild }),
     loadingHtml
   ] });
 };
@@ -94,9 +88,7 @@ var ButtonBase = ({
   text,
   disabled = false,
   variant = "primary",
-  emphasis = "default",
-  rounded = false,
-  size = "medium",
+  size = "md",
   fullWidth = false,
   mobileFullWidth = false,
   iconPosition = "none",
@@ -108,42 +100,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__ */ jsx6(Spinner, { ...{ size: "small", variant: spinnerVariant, forcePx, attributes: { "aria-hidden": "true" } } });
+  const loadingHtml = /* @__PURE__ */ jsx5(Spinner, { ...{ size: "small", variant: spinnerVariant, forcePx, attributes: { "aria-hidden": "true" } } });
   let icon;
   if (iconName && (iconPosition != "none" || isIconButton == true)) {
-    icon = /* @__PURE__ */ jsx6(IconUse, { ...{ iconName, attributes: { "aria-hidden": "true" } } });
+    icon = /* @__PURE__ */ jsx5(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",
@@ -153,68 +138,75 @@ var ButtonBase = ({
   if (isToggle) {
     let onChild, offChild;
     if (isIconButton && iconName && selectedIconName) {
-      onChild = /* @__PURE__ */ jsx6(IconUse, { iconName });
-      offChild = /* @__PURE__ */ jsx6(IconUse, { iconName: selectedIconName });
+      onChild = /* @__PURE__ */ jsx5(IconUse, { iconName });
+      offChild = /* @__PURE__ */ jsx5(IconUse, { iconName: selectedIconName });
     } else {
-      onChild = /* @__PURE__ */ jsx6("span", { children: text });
+      onChild = /* @__PURE__ */ jsx5("span", { children: text });
       offChild = /* @__PURE__ */ jsxs3(Fragment, { children: [
-        /* @__PURE__ */ jsx6(IconUse, { iconName: "check" }),
-        /* @__PURE__ */ jsx6("span", { children: selectedText })
+        /* @__PURE__ */ jsx5(IconUse, { iconName: "check" }),
+        /* @__PURE__ */ jsx5("span", { children: selectedText })
       ] });
     }
-    buttonToRender = /* @__PURE__ */ jsx6(ToggleWrapper, { ...{ selected, classes, attributes, disabled, onChild, offChild, loadingHtml } });
+    buttonToRender = /* @__PURE__ */ jsx5(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__ */ jsx6("a", { href, className: classes, ...attributes, children: /* @__PURE__ */ jsx6(InnerButton, { ...params }) });
+      buttonToRender = /* @__PURE__ */ jsx5("a", { href, className: classes, ...attributes, children: /* @__PURE__ */ jsx5(InnerButton, { ...params }) });
     } else {
-      buttonToRender = /* @__PURE__ */ jsx6("button", { type, className: classes, ...attributes, disabled, children: /* @__PURE__ */ jsx6(InnerButton, { ...buttonParams }) });
+      buttonToRender = /* @__PURE__ */ jsx5("button", { type, className: classes, ...attributes, disabled, children: /* @__PURE__ */ jsx5(InnerButton, { ...buttonParams }) });
     }
   }
-  return /* @__PURE__ */ jsx6(Fragment, { children: buttonToRender });
+  return /* @__PURE__ */ jsx5(Fragment, { children: buttonToRender });
 };
 
-// ../src/components/icon-button-toggle/icon-button-toggle.tsx
-import { jsx as jsx7 } from "preact/jsx-runtime";
-var IconButtonToggle = ({
-  iconName,
-  selectedIconName,
+// ../src/components/button-toggle/button-toggle.tsx
+import { jsx as jsx6 } from "preact/jsx-runtime";
+var ButtonToggle = ({
   selected = false,
+  text,
+  selectedText,
   disabled = false,
   variant = "primary",
-  emphasis = "default",
-  size = "medium",
+  size = "md",
+  fullWidth = false,
+  mobileFullWidth = false,
+  isIconButton = false,
+  iconName,
+  selectedIconName,
   loading = false,
-  attributes,
+  attributes = {},
   classNames,
   forcePx = false
 }) => {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     ButtonBase,
     {
       ...{
         selected,
+        text,
         disabled,
         variant,
-        emphasis,
         size,
-        loading,
+        fullWidth,
+        mobileFullWidth,
+        isIconButton,
         iconName,
         selectedIconName,
-        attributes,
+        loading,
         classNames,
+        attributes,
         forcePx,
-        rounded: true,
-        isIconButton: true,
-        isToggle: true
+        isToggle: true,
+        selectedText,
+        type: "button"
       }
     }
   );
 };
 
 // ../src/components/text-input/text-input.tsx
-import { jsx as jsx8, jsxs as jsxs4 } from "preact/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs4 } from "preact/jsx-runtime";
 var TextInput = ({
   name,
   type = "text",
@@ -234,7 +226,7 @@ var TextInput = ({
   const wrapperClasses = formatClassString([componentClassName, forcePx && "ds-force-px", classNames]);
   const password = type === "password";
   return /* @__PURE__ */ jsxs4(FormField, { ...{ error, errorMessage, helpText, wrapperClasses }, children: [
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx7(
       "input",
       {
         type,
@@ -249,15 +241,15 @@ var TextInput = ({
         ...attributes
       }
     ),
-    /* @__PURE__ */ jsx8("label", { className: `${componentClassName}__label`, htmlFor: name, children: label }),
-    password && /* @__PURE__ */ jsx8(
-      IconButtonToggle,
+    /* @__PURE__ */ jsx7("label", { className: `${componentClassName}__label`, htmlFor: name, children: label }),
+    password && /* @__PURE__ */ jsx7(
+      ButtonToggle,
       {
-        variant: "secondary",
-        emphasis: "transparent",
-        size: "small",
+        variant: "transparent",
+        size: "sm",
         iconName: "visibility",
         selectedIconName: "visibility_off",
+        isIconButton: true,
         selected: false,
         classNames: `${componentClassName}__password-toggle`,
         attributes: {