@bonniernews/dn-design-system-web - npm Package Compare versions

Comparing version 28.0.1-beta.0 to 28.0.1

components/blocked-content/blocked-content.js

@@ -18,3 +18,3 @@ export {
         </div>
-        <button type="button" class="ds-btn ds-btn--secondaryFilled ds-btn--default ds-btn--md ds-btn--full-width">
+        <button type="button" class="ds-btn ds-btn--secondary ds-btn--default ds-btn--medium ds-btn--full-width">
           <div class="ds-btn__inner">
@@ -21,0 +21,0 @@ <span>Hantera kakor</span>

components/button-toggle/README.md

@@ -19,15 +19,12 @@ ButtonToggle
 |:--- | :--- | :--- |
-| isIconButton | boolean | false |
-| selectedText | string | \- |
-| variant | Design variant<br />"primary", "staticWhite", "primaryBlack", "secondaryFilled", "secondaryOutline", "transparent" | "primary" |
+| selectedText\* | string | \- |
+| variant | "brand", "secondary", "primary" | "primary" |
 | disabled | Note: only works on button-tag, not on a-tag<br />boolean | false |
-| iconName | add, arrow\_back, arrow\_forward etc | | For all available icons see: [https://designsystem.dn.se/?path=/story/foundations-icons--all-icons](https://designsystem.dn.se/?path=/story/foundations-icons--all-icons)<br />"add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "bookmark-filled", "bookmarked", "campaign" | \- |
 | classNames | string | \- |
 | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />{ \[key: string\]: string; } | { } |
 | forcePx | Fixed pixel value is used for typography to prevent scaling based on html font-size<br />boolean | false |
-| size | "sm", "md", "lg", "xl" | "md" |
+| size | "large", "small", "medium", "xlarge" | "medium" |
 | loading | boolean | false |
 | text | string | \- |
 | selected | boolean | false |
-| selectedIconName | "add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "bookmark-filled", "bookmarked", "campaign" | \- |
 | fullWidth | Button will be full width on both desktop and mobile<br />boolean | false |
@@ -39,6 +36,6 @@ | mobileFullWidth | Button will only full width on mobile<br />boolean | false |
   selectedText="Följer"
-  size="lg"
+  size="large"
   text="Följ"
-  variant="primary"
+  variant="brand"
 />
 ```

components/button/button-types.ts

 import type { DsIcon } from '@bonniernews/dn-design-system-web/types-lib/ds-icon.d.ts'
 
 export interface ButtonSharedProps {
-  /** Design variant */
-  variant?: 'primary' | 'primaryBlack' | 'secondaryFilled' | 'secondaryOutline' | 'transparent' | 'staticWhite'
   /** Note: only works on button-tag, not on a-tag */
   disabled?: boolean
-  /** add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icons--all-icons */
-  iconName?: DsIcon
   classNames?: string
@@ -15,5 +11,4 @@ /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
   forcePx?: boolean
-  size?: 'sm' | 'md' | 'lg' | 'xl'
-  loading?: boolean,
-  isIconButton?: boolean
+  size?: 'small' | 'medium' | 'large' | 'xlarge'
+  loading?: boolean
 }
@@ -26,3 +21,8 @@
 export interface ButtonBaseProps extends ButtonSharedProps {
+  /** Design variant */
+  variant?: 'primary' | 'secondary' | 'brand' | 'staticWhite'
   text?: string
+  emphasis?: 'default' | 'elevated' | 'outline' | 'transparent'
+  /** Button will be rounded */
+  rounded?: boolean
   /** Button will be full width on both desktop and mobile */
@@ -33,5 +33,8 @@ fullWidth?: boolean
   iconPosition?: 'none' | 'left' | 'right'
+  /** add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icons--all-icons */
+  iconName?: DsIcon
   type?: 'button' | 'submit'
   /** If href is set the button will be rendered as an a-tag */
   href?: string
+  isIconButton?: boolean
   a11y?: AllyProps
@@ -63,38 +66,26 @@ selected?: boolean
 
-export interface ButtonStandardProps
+export interface ButtonProps
   extends ButtonSharedProps,
     Pick<
       ButtonBaseProps,
-      'text' | 'fullWidth' | 'mobileFullWidth' | 'iconPosition' | 'type' | 'href'
+      'text' | 'variant' | 'emphasis' | 'rounded' | 'fullWidth' | 'mobileFullWidth' | 'iconPosition' | 'iconName' | 'type' | 'href'
     > {
-      text: string
+      text: string // set as required
     }
 
-    export interface ButtonIconProps
+export interface ButtonToggleProps
   extends ButtonSharedProps,
-    Pick<
-      ButtonBaseProps,
-      'text' | 'fullWidth' | 'mobileFullWidth' | 'iconPosition' | 'type' | 'href'> {
-        iconName: DsIcon
-      }
-
-export type ButtonProps =
-| ({ isIconButton: true } & ButtonIconProps)
-| ({ isIconButton?: false } & ButtonStandardProps)
-
-export interface ButtonToggleStandardProps
-  extends ButtonSharedProps,
-    Pick<ButtonBaseProps, 'selected' | 'text' | 'selectedText' | 'selectedIconName' | 'fullWidth' | 'mobileFullWidth'> {
-      selectedText: string
+    Pick<ButtonBaseProps, 'selected' | 'text' | 'selectedText' | 'fullWidth' | 'mobileFullWidth'> {
+      selectedText: string // set as required
+      variant?: 'primary' | 'secondary' | 'brand'
     }
+export interface IconButtonProps extends ButtonSharedProps, Pick<ButtonBaseProps, 'iconName' | 'emphasis' | 'rounded' | 'href'> {
+  a11y?: object;
+  variant?: 'primary' | 'secondary' | 'brand'
+}
 
-export interface ButtonToggleIconProps
-extends ButtonSharedProps,
-  Pick<ButtonBaseProps, 'selected' | 'text' | 'selectedText' | 'fullWidth' | 'mobileFullWidth'> {
-    iconName: DsIcon
-    selectedIconName: DsIcon
-  }
 
-  export type ButtonToggleProps =
-    | ({ isIconButton?: false } & ButtonToggleStandardProps)
-    | ({ isIconButton: true } & ButtonToggleIconProps)
+export interface IconButtonToggleProps extends ButtonSharedProps, Pick<ButtonBaseProps, 'iconName' | 'emphasis' | 'selectedIconName'> {
+  selected?: boolean;
+  variant?: 'primary' | 'secondary' | 'brand'
+}

components/button/README.md

@@ -12,5 +12,3 @@ Button
 |:--- | :--- | :--- |
-| isIconButton | boolean | false |
-| iconName | add, arrow\_back, arrow\_forward etc | | For all available icons see: [https://designsystem.dn.se/?path=/story/foundations-icons--all-icons](https://designsystem.dn.se/?path=/story/foundations-icons--all-icons)<br />"add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "bookmark-filled", "bookmarked", "campaign" | \- |
-| variant | Design variant<br />"primary", "staticWhite", "primaryBlack", "secondaryFilled", "secondaryOutline", "transparent" | "primary" |
+| text\* | string | \- |
 | disabled | Note: only works on button-tag, not on a-tag<br />boolean | false |
@@ -20,5 +18,6 @@ | classNames | string | \- |
 | forcePx | Fixed pixel value is used for typography to prevent scaling based on html font-size<br />boolean | false |
-| size | "sm", "md", "lg", "xl" | "md" |
+| size | "large", "small", "medium", "xlarge" | "medium" |
 | loading | boolean | false |
-| text | string | \- |
+| iconName | add, arrow\_back, arrow\_forward etc | | For all available icons see: [https://designsystem.dn.se/?path=/story/foundations-icons--all-icons](https://designsystem.dn.se/?path=/story/foundations-icons--all-icons)<br />"add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "bookmark-filled", "bookmarked", "campaign" | \- |
+| variant | Design variant<br />"brand", "secondary", "primary", "staticWhite" | "primary" |
 | fullWidth | Button will be full width on both desktop and mobile<br />boolean | false |
@@ -28,2 +27,4 @@ | mobileFullWidth | Button will only full width on mobile<br />boolean | false |
 | type | "button", "submit" | "button" |
+| emphasis | "default", "elevated", "outline", "transparent" | "default" |
+| rounded | Button will be rounded<br />boolean | false |
 | iconPosition | "right", "none", "left" | "none" |
@@ -33,3 +34,4 @@
 <Button
-  size="md"
+  emphasis="default"
+  size="medium"
   text="Primary"
@@ -36,0 +38,0 @@ variant="primary"

components/divider/README.md

@@ -11,3 +11,3 @@ Divider
 |:--- | :--- | :--- |
-| variant | "soft", "medium", "hard" | "soft" |
+| variant | "medium", "soft", "hard" | "soft" |
 | classNames | string | \- |
@@ -14,0 +14,0 @@ | attributes | object | \- |

components/list-item/list-item-types.ts

@@ -6,3 +6,3 @@ import { ComponentChildren } from "preact";
 import { SwitchInnerProps } from '../switch/switch'
-import { ButtonToggleStandardProps } from '../button/button-types'
+import { ButtonToggleProps } from '../button/button-types'
 
@@ -71,3 +71,3 @@ export interface ListItemSharedProps {
   extends ListItemSharedProps,
-    ButtonToggleStandardProps,
+    ButtonToggleProps,
     Pick<ListItemBaseProps, 'title' | 'subtitle' | 'disabled' | 'selected'> {
@@ -109,3 +109,3 @@ name: string
     >,
-    Pick<ButtonToggleStandardProps, 'variant'> {
+    Pick<ButtonToggleProps, 'variant'> {
   componentClassName: string
@@ -112,0 +112,0 @@ }

package.json

 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "28.0.1-beta.0",
+  "version": "28.0.1",
   "description": "DN design system for web.",
@@ -5,0 +5,0 @@ "type": "module",

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

@@ -77,3 +77,5 @@ // ../src/helpers/formatClassString.ts
   variant = "primary",
-  size = "md",
+  emphasis = "default",
+  rounded = false,
+  size = "medium",
   fullWidth = false,
@@ -100,5 +102,9 @@ mobileFullWidth = false,
   let spinnerVariant = "secondary";
-  if (variant === "staticWhite" || variant === "transparent") {
-    spinnerVariant = "staticBlack";
-  } else if (variant === "secondaryFilled" || variant === "secondaryOutline") {
+  if (variant === "staticWhite") {
+    if (emphasis === "transparent" || emphasis === "outline") {
+      spinnerVariant = "staticWhite";
+    } else {
+      spinnerVariant = "staticBlack";
+    }
+  } else if (emphasis === "transparent" || emphasis === "outline" || variant === "secondary") {
     spinnerVariant = "primary";
@@ -115,2 +121,3 @@ }
     `${classNamePrefix}${variant}`,
+    `${classNamePrefix}${emphasis}`,
     `${classNamePrefix}${size}`,
@@ -122,2 +129,3 @@ isToggle && selected && `${classNamePrefix}selected`,
     isIconButton && `${classNamePrefix}icon-only`,
+    rounded && `${classNamePrefix}rounded`,
     isToggle && `${classNamePrefix}toggle`,
@@ -160,3 +168,5 @@ loading && "ds-loading",
   variant = "primary",
-  size = "md",
+  emphasis = "default",
+  rounded = false,
+  size = "medium",
   fullWidth = false,
@@ -169,3 +179,2 @@ mobileFullWidth = false,
   href,
-  isIconButton = false,
   classNames,
@@ -179,2 +188,4 @@ attributes,
     variant,
+    emphasis,
+    rounded,
     size,
@@ -188,3 +199,2 @@ fullWidth,
     href,
-    isIconButton,
     classNames,
@@ -196,4 +206,40 @@ attributes,
 
+// ../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 jsx7, jsxs as jsxs3 } from "preact/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs3 } from "preact/jsx-runtime";
 var BuddyMenu = ({
@@ -213,13 +259,12 @@ userName,
   const classes = formatClassString([componentClassName, forcePx && "ds-force-px", classNames]);
-  return /* @__PURE__ */ jsx7("div", { class: `${classes} ${isDnSkola && "ds-buddy-menu--skola"}`, ...attributes, children: /* @__PURE__ */ jsx7("div", { class: `${componentClassName}__inner`, children: /* @__PURE__ */ jsx7("div", { class: "ds-buddy-menu__scrollable-container", children: /* @__PURE__ */ jsxs3("div", { class: "ds-buddy-menu__content", children: [
-    /* @__PURE__ */ jsx7(
-      Button,
+  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,
       {
         ...{
-          size: "sm",
+          size: "small",
           iconName: "close",
           classNames: "ds-buddy-menu__close",
           forcePx,
-          variant: "transparent",
-          isIconButton: true
+          emphasis: "transparent"
         }
@@ -232,13 +277,13 @@ }
         " ",
-        /* @__PURE__ */ jsx7("span", { class: "ds-buddy-menu__name js-buddy-menu-name", "data-name-type": "given", children: userName }),
+        /* @__PURE__ */ jsx8("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__ */ jsx7("h2", { class: "ds-buddy-menu__account-title", children: "Min prenumeration" }),
-        /* @__PURE__ */ jsx7("span", { class: "ds-buddy-menu__account-level js-buddy-menu__account-level", children: accountLevel }),
+        /* @__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 }),
         addons && /* @__PURE__ */ jsxs3("div", { class: `ds-buddy-menu__addons ${addonsClassNames}`, children: [
-          /* @__PURE__ */ jsx7("h2", { class: "ds-buddy-menu__addons-title", children: "Mina till\xE4gg" }),
-          /* @__PURE__ */ jsx7("ul", { class: "ds-buddy-menu__addons-list", children: addons.map((addon) => /* @__PURE__ */ jsx7("li", { class: addon.classNames, children: /* @__PURE__ */ jsx7("a", { href: addon.href, children: addon.title }) })) })
+          /* @__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__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           Button,
@@ -248,4 +293,4 @@ {
               text: "Mitt konto",
-              size: "lg",
-              variant: "primaryBlack",
+              size: "large",
+              variant: "primary",
               fullWidth: true,
@@ -261,4 +306,4 @@ href: myAccountUrl,
     /* @__PURE__ */ jsxs3("div", { class: "ds-buddy-menu__links", children: [
-      /* @__PURE__ */ jsx7("h2", { class: "ds-buddy-menu__links-title", children: "Mitt inneh\xE5ll" }),
-      /* @__PURE__ */ jsx7("ul", { class: "ds-buddy-menu__links-list", children: links })
+      /* @__PURE__ */ jsx8("h2", { class: "ds-buddy-menu__links-title", children: "Mitt inneh\xE5ll" }),
+      /* @__PURE__ */ jsx8("ul", { class: "ds-buddy-menu__links-list", children: links })
     ] })
@@ -265,0 +310,0 @@ ] }) }) }) });

preact/components/button-toggle/button-toggle.d.ts

@@ -18,3 +18,3 @@ import type { ButtonToggleProps } from "@bonniernews/dn-design-system-web/components/button/button-types.ts";
  */
-export declare const ButtonToggle: ({ selected, text, selectedText, disabled, variant, size, fullWidth, mobileFullWidth, isIconButton, iconName, selectedIconName, loading, attributes, classNames, forcePx, }: ButtonToggleProps) => import("preact").JSX.Element;
+export declare const ButtonToggle: ({ selected, text, selectedText, disabled, variant, size, fullWidth, mobileFullWidth, loading, attributes, classNames, forcePx, }: ButtonToggleProps) => import("preact").JSX.Element;
 export default ButtonToggle;

preact/components/button-toggle/button-toggle.js

@@ -77,3 +77,5 @@ // ../src/helpers/formatClassString.ts
   variant = "primary",
-  size = "md",
+  emphasis = "default",
+  rounded = false,
+  size = "medium",
   fullWidth = false,
@@ -100,5 +102,9 @@ mobileFullWidth = false,
   let spinnerVariant = "secondary";
-  if (variant === "staticWhite" || variant === "transparent") {
-    spinnerVariant = "staticBlack";
-  } else if (variant === "secondaryFilled" || variant === "secondaryOutline") {
+  if (variant === "staticWhite") {
+    if (emphasis === "transparent" || emphasis === "outline") {
+      spinnerVariant = "staticWhite";
+    } else {
+      spinnerVariant = "staticBlack";
+    }
+  } else if (emphasis === "transparent" || emphasis === "outline" || variant === "secondary") {
     spinnerVariant = "primary";
@@ -115,2 +121,3 @@ }
     `${classNamePrefix}${variant}`,
+    `${classNamePrefix}${emphasis}`,
     `${classNamePrefix}${size}`,
@@ -122,2 +129,3 @@ isToggle && selected && `${classNamePrefix}selected`,
     isIconButton && `${classNamePrefix}icon-only`,
+    rounded && `${classNamePrefix}rounded`,
     isToggle && `${classNamePrefix}toggle`,
@@ -162,8 +170,5 @@ loading && "ds-loading",
   variant = "primary",
-  size = "md",
+  size = "medium",
   fullWidth = false,
   mobileFullWidth = false,
-  isIconButton = false,
-  iconName,
-  selectedIconName,
   loading = false,
@@ -182,8 +187,6 @@ attributes = {},
         variant,
+        rounded: true,
         size,
         fullWidth,
         mobileFullWidth,
-        isIconButton,
-        iconName,
-        selectedIconName,
         loading,
@@ -190,0 +193,0 @@ classNames,

preact/components/button/button-base.d.ts

 import type { ButtonBaseProps, InnerButtonProps, ToggleWrapperProps } from '@bonniernews/dn-design-system-web/components/button/button-types.ts';
 export declare const InnerButton: ({ text, isIconButton, attributes, a11y, icon, loadingHtml }: InnerButtonProps) => import("preact").JSX.Element;
 export declare const ToggleWrapper: ({ selected, disabled, attributes, classes, onChild, offChild, loadingHtml, }: ToggleWrapperProps) => import("preact").JSX.Element;
-export declare const ButtonBase: ({ text, disabled, variant, size, fullWidth, mobileFullWidth, iconPosition, iconName, loading, type, href, classNames, attributes, forcePx, isIconButton, a11y, selected, isToggle, selectedIconName, selectedText, }: ButtonBaseProps) => import("preact").JSX.Element;
+export declare const ButtonBase: ({ text, disabled, variant, emphasis, rounded, size, fullWidth, mobileFullWidth, iconPosition, iconName, loading, type, href, classNames, attributes, forcePx, isIconButton, a11y, selected, isToggle, selectedIconName, selectedText, }: ButtonBaseProps) => import("preact").JSX.Element;

preact/components/button/button-base.js

@@ -77,3 +77,5 @@ // ../src/helpers/formatClassString.ts
   variant = "primary",
-  size = "md",
+  emphasis = "default",
+  rounded = false,
+  size = "medium",
   fullWidth = false,
@@ -100,5 +102,9 @@ mobileFullWidth = false,
   let spinnerVariant = "secondary";
-  if (variant === "staticWhite" || variant === "transparent") {
-    spinnerVariant = "staticBlack";
-  } else if (variant === "secondaryFilled" || variant === "secondaryOutline") {
+  if (variant === "staticWhite") {
+    if (emphasis === "transparent" || emphasis === "outline") {
+      spinnerVariant = "staticWhite";
+    } else {
+      spinnerVariant = "staticBlack";
+    }
+  } else if (emphasis === "transparent" || emphasis === "outline" || variant === "secondary") {
     spinnerVariant = "primary";
@@ -115,2 +121,3 @@ }
     `${classNamePrefix}${variant}`,
+    `${classNamePrefix}${emphasis}`,
     `${classNamePrefix}${size}`,
@@ -122,2 +129,3 @@ isToggle && selected && `${classNamePrefix}selected`,
     isIconButton && `${classNamePrefix}icon-only`,
+    rounded && `${classNamePrefix}rounded`,
     isToggle && `${classNamePrefix}toggle`,
@@ -124,0 +132,0 @@ loading && "ds-loading",

preact/components/button/button-types.d.ts

 import type { DsIcon } from '@bonniernews/dn-design-system-web/types-lib/ds-icon.d.ts';
 export interface ButtonSharedProps {
-    /** Design variant */
-    variant?: 'primary' | 'primaryBlack' | 'secondaryFilled' | 'secondaryOutline' | 'transparent' | 'staticWhite';
     /** Note: only works on button-tag, not on a-tag */
     disabled?: boolean;
-    /** add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icons--all-icons */
-    iconName?: DsIcon;
     classNames?: string;
@@ -16,5 +12,4 @@ /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
     forcePx?: boolean;
-    size?: 'sm' | 'md' | 'lg' | 'xl';
+    size?: 'small' | 'medium' | 'large' | 'xlarge';
     loading?: boolean;
-    isIconButton?: boolean;
 }
@@ -25,3 +20,8 @@ export interface AllyProps {
 export interface ButtonBaseProps extends ButtonSharedProps {
+    /** Design variant */
+    variant?: 'primary' | 'secondary' | 'brand' | 'staticWhite';
     text?: string;
+    emphasis?: 'default' | 'elevated' | 'outline' | 'transparent';
+    /** Button will be rounded */
+    rounded?: boolean;
     /** Button will be full width on both desktop and mobile */
@@ -32,5 +32,8 @@ fullWidth?: boolean;
     iconPosition?: 'none' | 'left' | 'right';
+    /** add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icons--all-icons */
+    iconName?: DsIcon;
     type?: 'button' | 'submit';
     /** If href is set the button will be rendered as an a-tag */
     href?: string;
+    isIconButton?: boolean;
     a11y?: AllyProps;
@@ -59,24 +62,16 @@ selected?: boolean;
 }
-export interface ButtonStandardProps extends ButtonSharedProps, Pick<ButtonBaseProps, 'text' | 'fullWidth' | 'mobileFullWidth' | 'iconPosition' | 'type' | 'href'> {
+export interface ButtonProps extends ButtonSharedProps, Pick<ButtonBaseProps, 'text' | 'variant' | 'emphasis' | 'rounded' | 'fullWidth' | 'mobileFullWidth' | 'iconPosition' | 'iconName' | 'type' | 'href'> {
     text: string;
 }
-export interface ButtonIconProps extends ButtonSharedProps, Pick<ButtonBaseProps, 'text' | 'fullWidth' | 'mobileFullWidth' | 'iconPosition' | 'type' | 'href'> {
-    iconName: DsIcon;
-}
-export type ButtonProps = ({
-    isIconButton: true;
-} & ButtonIconProps) | ({
-    isIconButton?: false;
-} & ButtonStandardProps);
-export interface ButtonToggleStandardProps extends ButtonSharedProps, Pick<ButtonBaseProps, 'selected' | 'text' | 'selectedText' | 'selectedIconName' | 'fullWidth' | 'mobileFullWidth'> {
+export interface ButtonToggleProps extends ButtonSharedProps, Pick<ButtonBaseProps, 'selected' | 'text' | 'selectedText' | 'fullWidth' | 'mobileFullWidth'> {
     selectedText: string;
+    variant?: 'primary' | 'secondary' | 'brand';
 }
-export interface ButtonToggleIconProps extends ButtonSharedProps, Pick<ButtonBaseProps, 'selected' | 'text' | 'selectedText' | 'fullWidth' | 'mobileFullWidth'> {
-    iconName: DsIcon;
-    selectedIconName: DsIcon;
+export interface IconButtonProps extends ButtonSharedProps, Pick<ButtonBaseProps, 'iconName' | 'emphasis' | 'rounded' | 'href'> {
+    a11y?: object;
+    variant?: 'primary' | 'secondary' | 'brand';
 }
-export type ButtonToggleProps = ({
-    isIconButton?: false;
-} & ButtonToggleStandardProps) | ({
-    isIconButton: true;
-} & ButtonToggleIconProps);
+export interface IconButtonToggleProps extends ButtonSharedProps, Pick<ButtonBaseProps, 'iconName' | 'emphasis' | 'selectedIconName'> {
+    selected?: boolean;
+    variant?: 'primary' | 'secondary' | 'brand';
+}

preact/components/button/button.d.ts

@@ -9,3 +9,3 @@ import type { ButtonProps } from "@bonniernews/dn-design-system-web/components/button/button-types.ts";
  */
-export declare const Button: ({ text, disabled, variant, size, fullWidth, mobileFullWidth, iconPosition, iconName, loading, type, href, isIconButton, classNames, attributes, forcePx }: ButtonProps) => import("preact").JSX.Element;
+export declare const Button: ({ text, disabled, variant, emphasis, rounded, size, fullWidth, mobileFullWidth, iconPosition, iconName, loading, type, href, classNames, attributes, forcePx }: ButtonProps) => import("preact").JSX.Element;
 export default Button;

preact/components/button/button.js

@@ -77,3 +77,5 @@ // ../src/helpers/formatClassString.ts
   variant = "primary",
-  size = "md",
+  emphasis = "default",
+  rounded = false,
+  size = "medium",
   fullWidth = false,
@@ -100,5 +102,9 @@ mobileFullWidth = false,
   let spinnerVariant = "secondary";
-  if (variant === "staticWhite" || variant === "transparent") {
-    spinnerVariant = "staticBlack";
-  } else if (variant === "secondaryFilled" || variant === "secondaryOutline") {
+  if (variant === "staticWhite") {
+    if (emphasis === "transparent" || emphasis === "outline") {
+      spinnerVariant = "staticWhite";
+    } else {
+      spinnerVariant = "staticBlack";
+    }
+  } else if (emphasis === "transparent" || emphasis === "outline" || variant === "secondary") {
     spinnerVariant = "primary";
@@ -115,2 +121,3 @@ }
     `${classNamePrefix}${variant}`,
+    `${classNamePrefix}${emphasis}`,
     `${classNamePrefix}${size}`,
@@ -122,2 +129,3 @@ isToggle && selected && `${classNamePrefix}selected`,
     isIconButton && `${classNamePrefix}icon-only`,
+    rounded && `${classNamePrefix}rounded`,
     isToggle && `${classNamePrefix}toggle`,
@@ -160,3 +168,5 @@ loading && "ds-loading",
   variant = "primary",
-  size = "md",
+  emphasis = "default",
+  rounded = false,
+  size = "medium",
   fullWidth = false,
@@ -169,3 +179,2 @@ mobileFullWidth = false,
   href,
-  isIconButton = false,
   classNames,
@@ -179,2 +188,4 @@ attributes,
     variant,
+    emphasis,
+    rounded,
     size,
@@ -188,3 +199,2 @@ fullWidth,
     href,
-    isIconButton,
     classNames,
@@ -191,0 +201,0 @@ attributes,

preact/components/icon-sprite/icon-sprite.js

@@ -20,2 +20,3 @@ // ../src/helpers/formatClassString.ts
   /* @__PURE__ */ jsx("symbol", { id: "ds-arrow_upward", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M11.25 19.615V7.258L5.44 13.069 4.385 12 12 4.385 19.616 12l-1.054 1.07-5.812-5.812v12.357h-1.5Z" }) }),
+  /* @__PURE__ */ jsx("symbol", { id: "ds-autoplay", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M9.75 16.038V7.962L16.038 12 9.75 16.038ZM12 22.5c-1.87 0-3.592-.456-5.163-1.367C5.264 20.22 3.986 18.94 3 17.29v3.21H1.5v-5.692h5.683v1.5H4.175c.812 1.455 1.908 2.6 3.29 3.437A8.595 8.595 0 0 0 12 21c1.949 0 3.707-.57 5.275-1.712 1.568-1.142 2.656-2.64 3.264-4.496l1.469.325c-.686 2.21-1.95 3.992-3.789 5.348C16.38 21.822 14.306 22.5 12 22.5ZM1.55 11a11.3 11.3 0 0 1 .752-3.006c.378-.925.915-1.818 1.61-2.678L4.99 6.375a9.71 9.71 0 0 0-1.272 2.144A9.544 9.544 0 0 0 3.066 11H1.55Zm4.84-6.016L5.33 3.906a10.985 10.985 0 0 1 2.702-1.618A9.781 9.781 0 0 1 11 1.57v1.5c-.83.084-1.634.29-2.41.62-.777.33-1.51.762-2.2 1.295Zm11.216 0a9.007 9.007 0 0 0-2.178-1.29A8.238 8.238 0 0 0 13 3.07v-1.5c1.033.094 2.03.338 2.991.732a10.43 10.43 0 0 1 2.684 1.615l-1.07 1.068ZM20.93 11a8.605 8.605 0 0 0-1.935-4.615l1.07-1.07a9.99 9.99 0 0 1 1.623 2.665c.395.96.642 1.967.742 3.02h-1.5Z" }) }),
   /* @__PURE__ */ jsx("symbol", { id: "ds-bookmark-filled", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M5.5 20.25V3.5h13v16.75l-6.5-2.8-6.5 2.8Z" }) }),
@@ -76,2 +77,3 @@ /* @__PURE__ */ jsx("symbol", { id: "ds-bookmarked", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "m7 17.95 5-2.15 5 2.15V5H7v12.95Zm-1.5 2.3V3.5h13v16.75l-6.5-2.8-6.5 2.8Z" }) }),
   /* @__PURE__ */ jsx("symbol", { id: "ds-newsmode", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M4.308 20.5c-.505 0-.933-.175-1.283-.525a1.745 1.745 0 0 1-.525-1.283V5.308c0-.505.175-.933.525-1.283.35-.35.778-.525 1.283-.525h15.384c.505 0 .933.175 1.283.525.35.35.525.778.525 1.283v13.384c0 .505-.175.933-.525 1.283-.35.35-.778.525-1.283.525H4.308Zm0-1.5h15.384a.294.294 0 0 0 .212-.096.294.294 0 0 0 .096-.212V5.308a.294.294 0 0 0-.096-.212.294.294 0 0 0-.212-.096H4.308a.294.294 0 0 0-.212.096.294.294 0 0 0-.096.212v13.384c0 .077.032.148.096.212a.294.294 0 0 0 .212.096Zm2.077-2.385h11.23v-1.5H6.385v1.5Zm0-3.865h3.692V7.385H6.385v5.365Zm5.884 0h5.346v-1.5H12.27v1.5Zm0-3.865h5.346v-1.5H12.27v1.5Z" }) }),
+  /* @__PURE__ */ jsx("symbol", { id: "ds-notifications_off", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M4.22 18.714v-1.5H6.03V9.752c0-.466.056-.93.169-1.39.113-.46.282-.9.508-1.317L7.84 8.179a4.109 4.109 0 0 0-.311 1.573v7.462h7.277L1.756 4.202 2.809 3.15 20.652 20.99l-1.054 1.054-3.362-3.331H4.221Zm13.193-3.83-1.5-1.5V9.751c0-1.157-.41-2.145-1.228-2.964-.818-.819-1.806-1.228-2.964-1.228-.494 0-.97.081-1.426.243a3.714 3.714 0 0 0-1.232.73L7.98 5.45a5.878 5.878 0 0 1 1.156-.782c.419-.216.864-.371 1.336-.465V3.58c0-.347.121-.642.364-.885s.538-.365.885-.365.642.122.885.365c.244.243.366.538.366.885v.623c1.307.276 2.375.932 3.202 1.969.827 1.036 1.24 2.23 1.24 3.581v5.131Zm-5.694 6.638c-.497 0-.923-.177-1.276-.531a1.743 1.743 0 0 1-.53-1.277h3.616c0 .499-.178.925-.532 1.278-.354.353-.78.53-1.278.53Z" }) }),
   /* @__PURE__ */ jsx("symbol", { id: "ds-notifications", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M4.25 18.875v-1.5h2v-7.25A5.65 5.65 0 0 1 7.5 6.537C8.333 5.479 9.417 4.8 10.75 4.5V2.55h2.5V4.5c1.333.3 2.417.979 3.25 2.037a5.65 5.65 0 0 1 1.25 3.588v7.25h2v1.5H4.25ZM12 21.8c-.5 0-.925-.175-1.275-.525A1.736 1.736 0 0 1 10.2 20h3.6c0 .5-.175.925-.525 1.275-.35.35-.775.525-1.275.525Zm-4.25-4.425h8.5v-7.25c0-1.183-.417-2.188-1.25-3.013-.833-.825-1.833-1.237-3-1.237s-2.167.412-3 1.237c-.833.825-1.25 1.83-1.25 3.013v7.25Z" }) }),
@@ -97,2 +99,3 @@ /* @__PURE__ */ jsx("symbol", { id: "ds-pause", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M14 18.5v-13h3.75v13H14Zm-7.75 0v-13H10v13H6.25Z" }) }),
   /* @__PURE__ */ jsx("symbol", { id: "ds-search", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "m19.73 20.347-6.3-6.275c-.5.417-1.075.742-1.725.975-.65.233-1.317.35-2 .35-1.717 0-3.167-.592-4.35-1.775-1.184-1.184-1.775-2.633-1.775-4.35 0-1.7.591-3.146 1.775-4.338 1.183-1.191 2.633-1.787 4.35-1.787 1.7 0 3.142.592 4.325 1.775 1.183 1.183 1.775 2.633 1.775 4.35 0 .717-.117 1.4-.35 2.05a5.613 5.613 0 0 1-.95 1.7l6.275 6.275-1.05 1.05Zm-10.025-6.45c1.283 0 2.37-.45 3.263-1.35.891-.9 1.337-1.992 1.337-3.275s-.446-2.375-1.337-3.275c-.892-.9-1.98-1.35-3.263-1.35-1.3 0-2.396.45-3.287 1.35-.892.9-1.338 1.992-1.338 3.275s.446 2.375 1.338 3.275c.891.9 1.987 1.35 3.287 1.35Z" }) }),
+  /* @__PURE__ */ jsx("symbol", { id: "ds-settings", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "m9.692 21.5-.38-3.046a5.334 5.334 0 0 1-1.579-.896L4.912 18.75l-2.308-4 2.44-1.844a5.062 5.062 0 0 1-.049-.448 6.976 6.976 0 0 1 0-.882c.01-.147.026-.307.05-.482L2.603 9.25l2.308-3.98 2.811 1.182a6.42 6.42 0 0 1 .772-.524 5.1 5.1 0 0 1 .807-.382l.39-3.046h4.616l.38 3.056c.3.109.572.236.815.381.243.146.488.317.735.515l2.85-1.183 2.308 3.981-2.479 1.873c.036.162.056.313.059.453.003.14.005.282.005.424 0 .136-.004.274-.01.415-.006.14-.03.3-.069.481l2.46 1.854-2.308 4-2.816-1.202c-.247.198-.5.372-.757.524a4.576 4.576 0 0 1-.793.372l-.38 3.056H9.692ZM11 20h1.966l.359-2.679c.51-.133.977-.323 1.399-.568.422-.246.83-.561 1.222-.947l2.485 1.044.985-1.7-2.17-1.635c.084-.258.14-.512.17-.761a6.266 6.266 0 0 0 0-1.508 3.9 3.9 0 0 0-.17-.742l2.189-1.654-.985-1.7-2.513 1.06a5.327 5.327 0 0 0-1.203-.949 5.173 5.173 0 0 0-1.418-.582L13 4h-1.985l-.33 2.67a5.22 5.22 0 0 0-1.414.553c-.432.249-.844.57-1.237.962L5.55 7.15l-.984 1.7 2.159 1.61a3.65 3.65 0 0 0-.175.74 6.28 6.28 0 0 0 0 1.575c.033.25.088.497.165.74l-2.15 1.635.985 1.7 2.475-1.05c.38.39.785.709 1.217.958.432.248.91.44 1.433.573L11 20Zm1.011-5c.833 0 1.54-.292 2.125-.876A2.892 2.892 0 0 0 15.011 12c0-.832-.293-1.54-.877-2.124A2.892 2.892 0 0 0 12.012 9c-.843 0-1.553.292-2.132.876A2.905 2.905 0 0 0 9.01 12c0 .832.29 1.54.869 2.124.579.584 1.29.876 2.131.876Z" }) }),
   /* @__PURE__ */ jsx("symbol", { id: "ds-share", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M18 21.75a2.654 2.654 0 0 1-1.95-.8 2.654 2.654 0 0 1-.8-1.95c0-.117.008-.246.025-.388.017-.141.05-.262.1-.362l-7.4-4.35a3.014 3.014 0 0 1-.9.625A2.59 2.59 0 0 1 6 14.75a2.654 2.654 0 0 1-1.95-.8 2.653 2.653 0 0 1-.8-1.95c0-.767.267-1.417.8-1.95A2.654 2.654 0 0 1 6 9.25c.383 0 .742.075 1.075.225.333.15.633.358.9.625l7.4-4.35c-.05-.1-.083-.221-.1-.363A3.32 3.32 0 0 1 15.25 5c0-.767.267-1.417.8-1.95a2.653 2.653 0 0 1 1.95-.8c.767 0 1.417.267 1.95.8.533.533.8 1.183.8 1.95 0 .767-.267 1.417-.8 1.95-.533.533-1.183.8-1.95.8a2.59 2.59 0 0 1-1.075-.225 3.016 3.016 0 0 1-.9-.625l-7.4 4.35c.05.1.083.217.1.35a3.221 3.221 0 0 1 0 .787c-.017.142-.05.263-.1.363l7.4 4.35c.267-.267.567-.475.9-.625A2.59 2.59 0 0 1 18 16.25c.767 0 1.417.267 1.95.8.533.533.8 1.183.8 1.95 0 .767-.267 1.417-.8 1.95-.533.533-1.183.8-1.95.8Zm0-15.5c.35 0 .646-.121.888-.363.241-.241.362-.537.362-.887s-.12-.646-.362-.888A1.21 1.21 0 0 0 18 3.75c-.35 0-.646.12-.887.362A1.208 1.208 0 0 0 16.75 5c0 .35.121.646.363.887.241.242.537.363.887.363Zm-12 7c.35 0 .646-.121.888-.363.241-.241.362-.537.362-.887s-.12-.646-.362-.887A1.208 1.208 0 0 0 6 10.75c-.35 0-.646.121-.887.363A1.204 1.204 0 0 0 4.75 12c0 .35.121.646.363.887.241.242.537.363.887.363Zm12 7c.35 0 .646-.121.888-.363.241-.241.362-.537.362-.887s-.12-.646-.362-.887A1.208 1.208 0 0 0 18 17.75c-.35 0-.646.121-.887.363a1.204 1.204 0 0 0-.363.887c0 .35.121.646.363.887.241.242.537.363.887.363Z" }) }),
@@ -99,0 +102,0 @@ /* @__PURE__ */ jsx("symbol", { id: "ds-support_agent", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M10.957 21.094v-1.5h7.625v-7.525c0-.967-.183-1.875-.55-2.725a7.078 7.078 0 0 0-1.5-2.225 7.078 7.078 0 0 0-2.225-1.5 6.806 6.806 0 0 0-2.725-.55c-.966 0-1.875.183-2.725.55a7.077 7.077 0 0 0-2.225 1.5 7.077 7.077 0 0 0-1.5 2.225 6.805 6.805 0 0 0-.55 2.725v5.925h-2.5v-5.225h1l.05-1.275a8.237 8.237 0 0 1 .863-3.175A8.505 8.505 0 0 1 5.882 5.83a8.526 8.526 0 0 1 2.612-1.612 8.365 8.365 0 0 1 3.088-.575 8.46 8.46 0 0 1 3.1.575c.984.383 1.854.92 2.612 1.612a8.685 8.685 0 0 1 1.876 2.475c.492.959.779 2.013.862 3.163l.05 1.3h1v5.225h-1v3.1h-9.125Zm-2.175-6.925a.869.869 0 0 1-.638-.263.839.839 0 0 1-.262-.612.87.87 0 0 1 .262-.638.87.87 0 0 1 .638-.262c.234 0 .438.087.612.262a.869.869 0 0 1 .263.638.837.837 0 0 1-.263.612.837.837 0 0 1-.612.263Zm5.6 0a.837.837 0 0 1-.612-.263.837.837 0 0 1-.263-.612c0-.25.088-.463.263-.638a.838.838 0 0 1 .612-.262.87.87 0 0 1 .638.262.87.87 0 0 1 .262.638.839.839 0 0 1-.262.612.869.869 0 0 1-.638.263Zm-8.425-1.625c-.066-.917.063-1.754.388-2.512.325-.759.758-1.4 1.3-1.926a5.762 5.762 0 0 1 1.862-1.212 5.62 5.62 0 0 1 2.125-.425c1.434 0 2.67.45 3.712 1.35 1.042.9 1.672 2.025 1.888 3.375-1.466 0-2.8-.392-4-1.175-1.2-.783-2.1-1.792-2.7-3.025a7.46 7.46 0 0 1-1.6 3.375 7.376 7.376 0 0 1-2.975 2.175Z" }) }),

preact/components/list-item/list-item-types.d.ts

@@ -5,3 +5,3 @@ import { ComponentChildren } from "preact";
 import { SwitchInnerProps } from '../switch/switch';
-import { ButtonToggleStandardProps } from '../button/button-types';
+import { ButtonToggleProps } from '../button/button-types';
 export interface ListItemSharedProps {
@@ -53,3 +53,3 @@ title?: string;
 }
-export interface ToggleListItemProps extends ListItemSharedProps, ButtonToggleStandardProps, Pick<ListItemBaseProps, 'title' | 'subtitle' | 'disabled' | 'selected'> {
+export interface ToggleListItemProps extends ListItemSharedProps, ButtonToggleProps, Pick<ListItemBaseProps, 'title' | 'subtitle' | 'disabled' | 'selected'> {
     name: string;
@@ -79,3 +79,3 @@ titleHref?: string;
 } & BylineListItemProps);
-export interface InnerListItemProps extends ListItemSharedProps, Pick<ListItemBaseProps, 'listItemType' | 'href' | 'accordionContent' | 'name' | 'id' | 'checked' | 'selected' | 'value' | 'forcePx' | 'toggleText' | 'toggleSelectedText' | 'disabled'>, Pick<ButtonToggleStandardProps, 'variant'> {
+export interface InnerListItemProps extends ListItemSharedProps, Pick<ListItemBaseProps, 'listItemType' | 'href' | 'accordionContent' | 'name' | 'id' | 'checked' | 'selected' | 'value' | 'forcePx' | 'toggleText' | 'toggleSelectedText' | 'disabled'>, Pick<ButtonToggleProps, 'variant'> {
     componentClassName: string;
@@ -82,0 +82,0 @@ }

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

@@ -252,3 +252,5 @@ // ../src/helpers/formatClassString.ts
   variant = "primary",
-  size = "md",
+  emphasis = "default",
+  rounded = false,
+  size = "medium",
   fullWidth = false,
@@ -275,5 +277,9 @@ mobileFullWidth = false,
   let spinnerVariant = "secondary";
-  if (variant === "staticWhite" || variant === "transparent") {
-    spinnerVariant = "staticBlack";
-  } else if (variant === "secondaryFilled" || variant === "secondaryOutline") {
+  if (variant === "staticWhite") {
+    if (emphasis === "transparent" || emphasis === "outline") {
+      spinnerVariant = "staticWhite";
+    } else {
+      spinnerVariant = "staticBlack";
+    }
+  } else if (emphasis === "transparent" || emphasis === "outline" || variant === "secondary") {
     spinnerVariant = "primary";
@@ -290,2 +296,3 @@ }
     `${classNamePrefix}${variant}`,
+    `${classNamePrefix}${emphasis}`,
     `${classNamePrefix}${size}`,
@@ -297,2 +304,3 @@ isToggle && selected && `${classNamePrefix}selected`,
     isIconButton && `${classNamePrefix}icon-only`,
+    rounded && `${classNamePrefix}rounded`,
     isToggle && `${classNamePrefix}toggle`,
@@ -337,8 +345,5 @@ loading && "ds-loading",
   variant = "primary",
-  size = "md",
+  size = "medium",
   fullWidth = false,
   mobileFullWidth = false,
-  isIconButton = false,
-  iconName,
-  selectedIconName,
   loading = false,
@@ -357,8 +362,6 @@ attributes = {},
         variant,
+        rounded: true,
         size,
         fullWidth,
         mobileFullWidth,
-        isIconButton,
-        iconName,
-        selectedIconName,
         loading,
@@ -536,4 +539,4 @@ classNames,
             selectedText: toggleSelectedText || "",
-            variant: variant || "secondaryFilled",
-            size: "sm",
+            variant: variant || "secondary",
+            size: "small",
             selected,
@@ -540,0 +543,0 @@ disabled,

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

@@ -97,3 +97,5 @@ // ../src/helpers/formatClassString.ts
   variant = "primary",
-  size = "md",
+  emphasis = "default",
+  rounded = false,
+  size = "medium",
   fullWidth = false,
@@ -120,5 +122,9 @@ mobileFullWidth = false,
   let spinnerVariant = "secondary";
-  if (variant === "staticWhite" || variant === "transparent") {
-    spinnerVariant = "staticBlack";
-  } else if (variant === "secondaryFilled" || variant === "secondaryOutline") {
+  if (variant === "staticWhite") {
+    if (emphasis === "transparent" || emphasis === "outline") {
+      spinnerVariant = "staticWhite";
+    } else {
+      spinnerVariant = "staticBlack";
+    }
+  } else if (emphasis === "transparent" || emphasis === "outline" || variant === "secondary") {
     spinnerVariant = "primary";
@@ -135,2 +141,3 @@ }
     `${classNamePrefix}${variant}`,
+    `${classNamePrefix}${emphasis}`,
     `${classNamePrefix}${size}`,
@@ -142,2 +149,3 @@ isToggle && selected && `${classNamePrefix}selected`,
     isIconButton && `${classNamePrefix}icon-only`,
+    rounded && `${classNamePrefix}rounded`,
     isToggle && `${classNamePrefix}toggle`,
@@ -174,18 +182,14 @@ loading && "ds-loading",
 
-// ../src/components/button-toggle/button-toggle.tsx
+// ../src/components/icon-button-toggle/icon-button-toggle.tsx
 import { jsx as jsx7 } from "preact/jsx-runtime";
-var ButtonToggle = ({
+var IconButtonToggle = ({
+  iconName,
+  selectedIconName,
   selected = false,
-  text,
-  selectedText,
   disabled = false,
   variant = "primary",
-  size = "md",
-  fullWidth = false,
-  mobileFullWidth = false,
-  isIconButton = false,
-  iconName,
-  selectedIconName,
+  emphasis = "default",
+  size = "medium",
   loading = false,
-  attributes = {},
+  attributes,
   classNames,
@@ -199,18 +203,15 @@ forcePx = false
         selected,
-        text,
         disabled,
         variant,
+        emphasis,
         size,
-        fullWidth,
-        mobileFullWidth,
-        isIconButton,
+        loading,
         iconName,
         selectedIconName,
-        loading,
+        attributes,
         classNames,
-        attributes,
         forcePx,
-        isToggle: true,
-        selectedText,
-        type: "button"
+        rounded: true,
+        isIconButton: true,
+        isToggle: true
       }
@@ -259,9 +260,9 @@ }
     password && /* @__PURE__ */ jsx8(
-      ButtonToggle,
+      IconButtonToggle,
       {
-        variant: "transparent",
-        size: "sm",
+        variant: "secondary",
+        emphasis: "transparent",
+        size: "small",
         iconName: "visibility",
         selectedIconName: "visibility_off",
-        isIconButton: true,
         selected: false,
@@ -268,0 +269,0 @@ classNames: `${componentClassName}__password-toggle`,

types-lib/ds-icon.d.ts

@@ -7,2 +7,3 @@ export enum DsIconEnum {
   "arrow_upward" = "arrow_upward",
+  "autoplay" = "autoplay",
   "bookmark-filled" = "bookmark-filled",
@@ -63,2 +64,3 @@ "bookmarked" = "bookmarked",
   "newsmode" = "newsmode",
+  "notifications_off" = "notifications_off",
   "notifications" = "notifications",
@@ -84,2 +86,3 @@ "pause" = "pause",
   "search" = "search",
+  "settings" = "settings",
   "share" = "share",
@@ -86,0 +89,0 @@ "support_agent" = "support_agent",

variables/icon-list.json

@@ -7,2 +7,3 @@ {
   "arrow_upward": "arrow_upward",
+  "autoplay": "autoplay",
   "bookmark-filled": "bookmark-filled",
@@ -63,2 +64,3 @@ "bookmarked": "bookmarked",
   "newsmode": "newsmode",
+  "notifications_off": "notifications_off",
   "notifications": "notifications",
@@ -84,2 +86,3 @@ "pause": "pause",
   "search": "search",
+  "settings": "settings",
   "share": "share",
@@ -86,0 +89,0 @@ "support_agent": "support_agent",

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2350861

increased by11.01%

Number of package files

539

increased by3.65%

Lines of code

5328

increased by10.13%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Number of low supply chain risk alerts

15

increased by7.14%

No dependency changes