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

package/preact/components/buddy-menu/buddy-menu.js

@@ -34,20 +34,14 @@ var Spinner = ({ variant = "primary", size = "large", forcePx, classNames, attri
   return /* @__PURE__ */ jsx3("span", { className: classes, ...attributes, children: /* @__PURE__ */ jsx3("span", { className: `${componentClassName}__inner` }) });
 };
 
-// ../src/foundations/a11y/visually-hidden.tsx
-import { jsx as jsx4 } from "preact/jsx-runtime";
-var VisuallyHidden = ({ text }) => {
-  return /* @__PURE__ */ jsx4("span", { className: "visually-hidden", dangerouslySetInnerHTML: { __html: text } });
-};
-
 // ../src/components/button/button-base.tsx
-import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "preact/jsx-runtime";
-var InnerButton = ({ text, isIconButton = false, attributes, a11y, icon, loadingHtml }) => {
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "preact/jsx-runtime";
+var InnerButton = ({ text, isIconButton = false, attributes, icon, loadingHtml }) => {
   let optionalHtml;
-  if (!isIconButton) {
-    optionalHtml = /* @__PURE__ */ jsx5("span", { "aria-hidden": "true", children: text });
-  } else if (!attributes["aria-label"] && a11y?.visuallyHidden) {
-    optionalHtml = /* @__PURE__ */ jsx5(VisuallyHidden, { text: a11y.visuallyHidden });
+  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,
@@ -65,8 +59,8 @@ var ToggleWrapper = ({
   loadingHtml
 }) => {
   return /* @__PURE__ */ jsxs2("button", { type: "button", role: "switch", "aria-checked": selected, className: classes, ...attributes, disabled, children: [
-    /* @__PURE__ */ jsx5("span", { className: "ds-btn__off", "aria-hidden": "true", children: onChild }),
-    /* @__PURE__ */ jsx5("span", { className: "ds-btn__on", "aria-hidden": "true", children: offChild }),
+    /* @__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
   ] });
 };
@@ -74,9 +68,7 @@ var ButtonBase = ({
   text,
   disabled = false,
   variant = "primary",
-  emphasis = "default",
-  rounded = false,
-  size = "medium",
+  size = "md",
   fullWidth = false,
   mobileFullWidth = false,
   iconPosition = "none",
@@ -88,42 +80,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__ */ jsx5(Spinner, { ...{ size: "small", variant: spinnerVariant, forcePx, attributes: { "aria-hidden": "true" } } });
+  const loadingHtml = /* @__PURE__ */ jsx4(Spinner, { ...{ size: "small", variant: spinnerVariant, forcePx, attributes: { "aria-hidden": "true" } } });
   let icon;
   if (iconName && (iconPosition != "none" || isIconButton == true)) {
-    icon = /* @__PURE__ */ jsx5(IconUse, { ...{ iconName, attributes: { "aria-hidden": "true" } } });
+    icon = /* @__PURE__ */ jsx4(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",
@@ -133,37 +118,35 @@ var ButtonBase = ({
   if (isToggle) {
     let onChild, offChild;
     if (isIconButton && iconName && selectedIconName) {
-      onChild = /* @__PURE__ */ jsx5(IconUse, { iconName });
-      offChild = /* @__PURE__ */ jsx5(IconUse, { iconName: selectedIconName });
+      onChild = /* @__PURE__ */ jsx4(IconUse, { iconName });
+      offChild = /* @__PURE__ */ jsx4(IconUse, { iconName: selectedIconName });
     } else {
-      onChild = /* @__PURE__ */ jsx5("span", { children: text });
+      onChild = /* @__PURE__ */ jsx4("span", { children: text });
       offChild = /* @__PURE__ */ jsxs2(Fragment, { children: [
-        /* @__PURE__ */ jsx5(IconUse, { iconName: "check" }),
-        /* @__PURE__ */ jsx5("span", { children: selectedText })
+        /* @__PURE__ */ jsx4(IconUse, { iconName: "check" }),
+        /* @__PURE__ */ jsx4("span", { children: selectedText })
       ] });
     }
-    buttonToRender = /* @__PURE__ */ jsx5(ToggleWrapper, { ...{ selected, classes, attributes, disabled, onChild, offChild, loadingHtml } });
+    buttonToRender = /* @__PURE__ */ jsx4(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__ */ jsx5("a", { href, className: classes, ...attributes, children: /* @__PURE__ */ jsx5(InnerButton, { ...params }) });
+      buttonToRender = /* @__PURE__ */ jsx4("a", { href, className: classes, ...attributes, children: /* @__PURE__ */ jsx4(InnerButton, { ...params }) });
     } else {
-      buttonToRender = /* @__PURE__ */ jsx5("button", { type, className: classes, ...attributes, disabled, children: /* @__PURE__ */ jsx5(InnerButton, { ...buttonParams }) });
+      buttonToRender = /* @__PURE__ */ jsx4("button", { type, className: classes, ...attributes, disabled, children: /* @__PURE__ */ jsx4(InnerButton, { ...buttonParams }) });
     }
   }
-  return /* @__PURE__ */ jsx5(Fragment, { children: buttonToRender });
+  return /* @__PURE__ */ jsx4(Fragment, { children: buttonToRender });
 };
 
 // ../src/components/button/button.tsx
-import { jsx as jsx6 } from "preact/jsx-runtime";
+import { jsx as jsx5 } from "preact/jsx-runtime";
 var Button = ({
   text,
   disabled = false,
   variant = "primary",
-  emphasis = "default",
-  rounded = false,
-  size = "medium",
+  size = "md",
   fullWidth = false,
   mobileFullWidth = false,
   iconPosition = "none",
@@ -171,16 +154,15 @@ var Button = ({
   loading = false,
   type = "button",
   href,
+  isIconButton = false,
   classNames,
   attributes,
   forcePx = false
 }) => {
-  return /* @__PURE__ */ jsx6(ButtonBase, { ...{
+  return /* @__PURE__ */ jsx5(ButtonBase, { ...{
     text,
     disabled,
     variant,
-    emphasis,
-    rounded,
     size,
     fullWidth,
     mobileFullWidth,
@@ -189,50 +171,15 @@ var Button = ({
     loading,
     type,
     href,
+    isIconButton,
     classNames,
     attributes,
     forcePx
   } });
 };
 
-// ../src/components/icon-button/icon-button.tsx
-import { jsx as jsx7 } from "preact/jsx-runtime";
-var IconButton = ({
-  iconName,
-  disabled = false,
-  variant = "primary",
-  emphasis = "default",
-  rounded = true,
-  size = "medium",
-  loading = false,
-  a11y,
-  attributes,
-  classNames,
-  forcePx = false
-}) => {
-  return /* @__PURE__ */ jsx7(
-    ButtonBase,
-    {
-      ...{
-        disabled,
-        variant,
-        emphasis,
-        rounded,
-        size,
-        loading,
-        iconName,
-        a11y,
-        attributes,
-        classNames,
-        forcePx,
-        isIconButton: true
-      }
-    }
-  );
-};
-
 // ../src/components/buddy-menu/buddy-menu.tsx
-import { jsx as jsx8, jsxs as jsxs3 } from "preact/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs3 } from "preact/jsx-runtime";
 var BuddyMenu = ({
   userName,
   links,
@@ -247,16 +194,17 @@ var BuddyMenu = ({
 }) => {
   const componentClassName = "ds-buddy-menu";
   const classes = formatClassString([componentClassName, forcePx && "ds-force-px", classNames]);
-  return /* @__PURE__ */ jsx8("div", { class: `${classes} ${isDnSkola && "ds-buddy-menu--skola"}`, ...attributes, children: /* @__PURE__ */ jsx8("div", { class: `${componentClassName}__inner`, children: /* @__PURE__ */ jsx8("div", { class: "ds-buddy-menu__scrollable-container", children: /* @__PURE__ */ jsxs3("div", { class: "ds-buddy-menu__content", children: [
-    /* @__PURE__ */ jsx8(
-      IconButton,
+  return /* @__PURE__ */ jsx6("div", { class: `${classes} ${isDnSkola && "ds-buddy-menu--skola"}`, ...attributes, children: /* @__PURE__ */ jsx6("div", { class: `${componentClassName}__inner`, children: /* @__PURE__ */ jsx6("div", { class: "ds-buddy-menu__scrollable-container", children: /* @__PURE__ */ jsxs3("div", { class: "ds-buddy-menu__content", children: [
+    /* @__PURE__ */ jsx6(
+      Button,
       {
         ...{
-          size: "small",
+          size: "sm",
           iconName: "close",
           classNames: "ds-buddy-menu__close",
           forcePx,
-          emphasis: "transparent"
+          variant: "transparent",
+          isIconButton: true
         }
       }
     ),
@@ -264,23 +212,23 @@ var BuddyMenu = ({
       /* @__PURE__ */ jsxs3("span", { class: "ds-buddy-menu__greeting", children: [
         "Hej",
         " ",
-        /* @__PURE__ */ jsx8("span", { class: "ds-buddy-menu__name js-buddy-menu-name", "data-name-type": "given", children: userName }),
+        /* @__PURE__ */ jsx6("span", { class: "ds-buddy-menu__name js-buddy-menu-name", "data-name-type": "given", children: userName }),
         "!"
       ] }),
       !isDnSkola && /* @__PURE__ */ jsxs3("div", { class: "ds-buddy-menu__account", children: [
-        /* @__PURE__ */ jsx8("h2", { class: "ds-buddy-menu__account-title", children: "Min prenumeration" }),
-        /* @__PURE__ */ jsx8("span", { class: "ds-buddy-menu__account-level js-buddy-menu__account-level", children: accountLevel }),
+        /* @__PURE__ */ jsx6("h2", { class: "ds-buddy-menu__account-title", children: "Min prenumeration" }),
+        /* @__PURE__ */ jsx6("span", { class: "ds-buddy-menu__account-level js-buddy-menu__account-level", children: accountLevel }),
         addons && /* @__PURE__ */ jsxs3("div", { class: `ds-buddy-menu__addons ${addonsClassNames}`, children: [
-          /* @__PURE__ */ jsx8("h2", { class: "ds-buddy-menu__addons-title", children: "Mina till\xE4gg" }),
-          /* @__PURE__ */ jsx8("ul", { class: "ds-buddy-menu__addons-list", children: addons.map((addon) => /* @__PURE__ */ jsx8("li", { class: addon.classNames, children: /* @__PURE__ */ jsx8("a", { href: addon.href, children: addon.title }) })) })
+          /* @__PURE__ */ jsx6("h2", { class: "ds-buddy-menu__addons-title", children: "Mina till\xE4gg" }),
+          /* @__PURE__ */ jsx6("ul", { class: "ds-buddy-menu__addons-list", children: addons.map((addon) => /* @__PURE__ */ jsx6("li", { class: addon.classNames, children: /* @__PURE__ */ jsx6("a", { href: addon.href, children: addon.title }) })) })
         ] }),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx6(
           Button,
           {
             ...{
               text: "Mitt konto",
-              size: "large",
-              variant: "primary",
+              size: "lg",
+              variant: "primaryBlack",
               fullWidth: true,
               href: myAccountUrl,
               attributes: { "data-hide-promo": "" },
@@ -291,8 +239,8 @@ var BuddyMenu = ({
       ] })
     ] }),
     /* @__PURE__ */ jsxs3("div", { class: "ds-buddy-menu__links", children: [
-      /* @__PURE__ */ jsx8("h2", { class: "ds-buddy-menu__links-title", children: "Mitt inneh\xE5ll" }),
-      /* @__PURE__ */ jsx8("ul", { class: "ds-buddy-menu__links-list", children: links })
+      /* @__PURE__ */ jsx6("h2", { class: "ds-buddy-menu__links-title", children: "Mitt inneh\xE5ll" }),
+      /* @__PURE__ */ jsx6("ul", { class: "ds-buddy-menu__links-list", children: links })
     ] })
   ] }) }) }) });
 };