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

package/components/group-header/group-header.njk

@@ -1,7 +1,7 @@
 {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 {% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
 {% from '@bonniernews/dn-design-system-web/components/button-toggle/button-toggle.njk' import ButtonToggle %}
-{% from '@bonniernews/dn-design-system-web/components/icon-button/icon-button.njk' import IconButton %}
+{% from '@bonniernews/dn-design-system-web/components/button/button.njk' import Button %}
 
 {% macro GroupHeader(params) %}
   {% set componentClassName = "ds-group-header" %}
@@ -49,8 +49,8 @@
     {# there is no static-white toggle btn so it is disabled for bauta for now #}
     {% if params.type == 'toggle' and not params.variant %}
       {{ ButtonToggle({
-        variant: "brand",
-        size: 'small',
+        variant: "primary",
+        size: 'sm',
         text: params.toggleText,
         selectedText: params.toggleSelectedText,
         selected: params.toggleSelected,
@@ -59,20 +59,20 @@
         attributes: params.toggleAttributes
       }) }}
     {% elif (params.type == 'arrows') %}
-      {%  set buttonVariant = "staticWhite" if params.variant else "primary" %}
+      {%  set buttonVariant = "staticWhite" if params.variant else "secondaryOutline" %}
       <div class="{{ componentClassName + '__arrows' }} hidden-mobile hidden-tablet">
-        {{ IconButton({
+        {{ Button({
           variant: buttonVariant,
-          emphasis: "outline",
-          size: "small",
+          size: "sm",
+          isIconButton: true,
           iconName: "arrow_back",
           classNames: "ds-group-header__arrow ds-group-header__arrow--left",
           attributes: {"aria-label": "Föregående"}
         }) }}
-        {{ IconButton({
+        {{ Button({
           variant: buttonVariant,
-          emphasis: "outline",
-          size: "small",
+          size: "sm",
+          isIconButton: true,
           iconName: "arrow_forward",
           classNames: "ds-group-header__arrow ds-group-header__arrow--right",
           attributes: {"aria-label": "Nästa"}

package/components/group-header/group-header.scss

@@ -1,6 +1,5 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
-@use "../button-toggle/button-toggle.scss";
-@use "../icon-button/icon-button.scss";
+@use "../button/button.scss";
 
 $ds-group-header__icon-size: 24px;
 

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

@@ -3,7 +3,7 @@ import { ComponentChildren } from "preact";
 import { ButtonProps } from '../radio-button/radio-button'
 import type { DsIcon } from '@bonniernews/dn-design-system-web/types-lib/ds-icon.d.ts'
 import { SwitchInnerProps } from '../switch/switch'
-import { ButtonToggleProps } from '../button/button-types'
+import { ButtonToggleStandardProps } from '../button/button-types'
 
 export interface ListItemSharedProps {
   title?: string
@@ -67,7 +67,7 @@ export interface SwitchListItemProps
 
 export interface ToggleListItemProps
   extends ListItemSharedProps,
-    ButtonToggleProps,
+    ButtonToggleStandardProps,
     Pick<ListItemBaseProps, 'title' | 'subtitle' | 'disabled' | 'selected'> {
   name: string
   titleHref?: string
@@ -104,7 +104,7 @@ export interface InnerListItemProps
       | 'toggleSelectedText'
       | 'disabled'
     >,
-    Pick<ButtonToggleProps, 'variant'> {
+    Pick<ButtonToggleStandardProps, 'variant'> {
   componentClassName: string
 }
 

package/components/list-item/list-item.njk

@@ -147,10 +147,10 @@
           text: params.toggleText,
           selected: params.selected,
           selectedText: params.toggleSelectedText,
-          variant: params.variant | default("secondary"),
+          variant: params.variant | default("secondaryFilled"),
           disabled: params.disabled,
           forcePx: params.forcePx,
-          size: "small",
+          size: "sm",
           attributes: params.elementAttributes,
           classNames: params.elementClassNames
         })}}
@@ -164,10 +164,10 @@
           text: params.toggleText,
           selected: params.selected,
           selectedText: params.toggleSelectedText,
-          variant: params.variant | default("secondary"),
+          variant: params.variant | default("secondaryFilled"),
           disabled: params.disabled,
           forcePx: params.forcePx,
-          size: "small",
+          size: "sm",
           attributes: params.elementAttributes,
           classNames: params.elementClassNames
         })}}

package/components/modal/modal.njk

@@ -1,6 +1,5 @@
 {% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
 {% from '@bonniernews/dn-design-system-web/components/button/button.njk' import Button %}
-{% from '@bonniernews/dn-design-system-web/components/icon-button/icon-button.njk' import IconButton %}
 {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 
 {% macro Modal(params) %}
@@ -16,10 +15,11 @@
   <div class="{{ classes }}">
     <dialog class="{{ componentClassName + '__inner' }}" {{- attributes | safe }}>
       <div class="{{ componentClassName + '__content' }}">
-        {{ IconButton({
+        {{ Button({
           variant: "transparent",
-          size: "small",
+          size: "sm",
           iconName: "close",
+          isIconButton: true,
           classNames: "ds-modal__close ds-modal__close--icon"
         })}}
 
@@ -32,14 +32,13 @@
         {% if params.primaryButton or params.secondaryButton %}
           <div class="ds-modal__buttons">
             {% if params.secondaryButton %}
-              {%- set secondaryButtonClasses = [
+              {%- set secondaryButtonClasses = ["ds-modal__secondary-button",
                 "ds-modal__close" if params.secondaryButton.isCloseButton,
                 params.secondaryButton.classNames if params.secondaryButton.classNames
               ] | join(" ") %}
               {{ Button({
                 text: params.secondaryButton.text,
-                variant: "primary",
-                emphasis: "outline",
+                variant: "secondaryOutline",
                 href: params.secondaryButton.href,
                 classNames: secondaryButtonClasses,
                 attributes: params.secondaryButton.attributes,
@@ -51,11 +50,14 @@
             {% endif %}
 
             {% if params.primaryButton %}
+            {%- set primaryButtonClasses = ["ds-modal__primary-button",
+              params.primaryButton.classNames if params.primaryButton.classNames
+          ] | join(" ") %}
               {{ Button({
                 text: params.primaryButton.text,
-                variant: "primary",
+                variant: "primaryBlack",
                 href: params.primaryButton.href,
-                classNames: params.primaryButton.classNames,
+                classNames: primaryButtonClasses,
                 attributes: params.primaryButton.attributes,
                 forcePx: params.forcePx,
                 mobile: {

package/components/modal/modal.scss

@@ -1,7 +1,6 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
 @use "../../components/icon-sprite/icon-sprite.scss";
 @use "../../components/button/button.scss";
-@use "../../components/icon-button/icon-button.scss";
 
 body:has(dialog[open]),
 body.no-scroll {
@@ -107,12 +106,12 @@ body.no-scroll {
         display: flex;
         flex-wrap: wrap;
 
-        .ds-btn--default:not(:only-child) {
+        .ds-modal__primary-button:not(:only-child) {
           order: 1;
           margin-bottom: ds-spacing($ds-s-100);
         }
 
-        .ds-btn--outline:not(:only-child) {
+        .ds-modal__secondary-button:not(:only-child) {
           order: 2;
         }
       }
@@ -121,7 +120,7 @@ body.no-scroll {
         display: flex;
         justify-content: center;
 
-        .ds-btn--outline:not(:only-child) {
+        .ds-modal__secondary-button:not(:only-child) {
           margin-right: ds-spacing($ds-s-100);
         }
       }

package/components/pagination/pagination.njk

@@ -1,6 +1,5 @@
 {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 {% from '@bonniernews/dn-design-system-web/components/text-button/text-button.njk' import TextButton %}
-{% from '@bonniernews/dn-design-system-web/components/icon-button/icon-button.njk' import IconButton %}
 
 {% macro Pagination(params) %}
   {%- set componentClassName = "ds-pagination" %}

package/components/profile-header/profile-header.njk

@@ -18,8 +18,8 @@
           <h1 class="{{ componentClassName }}__title">{{ params.title}}</h1>
           {% if params.toggle %}
             {{ ButtonToggle({
-              variant: 'brand',
-              size: 'medium',
+              variant: 'primary',
+              size: 'md',
               text: params.toggleText,
               selectedText: params.toggleSelectedText,
               selected: params.toggleSelected,

package/components/tag-header/tag-header.njk

@@ -26,8 +26,8 @@
           <h1 class="{{ componentClassName }}__title">{{ params.title}}</h1>
           {% if params.toggle %}
             {{ ButtonToggle({
-              variant: 'brand',
-              size: 'medium',
+              variant: 'primary',
+              size: 'md',
               text: params.toggleText,
               selectedText: params.toggleSelectedText,
               selected: params.toggleSelected,

package/components/teaser-list-swipe/teaser-list-swipe.njk

@@ -1,8 +1,8 @@
 {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 {% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}
-{% from '@bonniernews/dn-design-system-web/components/icon-button/icon-button.njk' import IconButton %}
 {% from '@bonniernews/dn-design-system-web/components/group-header/group-header.njk' import GroupHeader %}
 {% from '@bonniernews/dn-design-system-web/components/teaser-swipe-card/teaser-swipe-card.njk' import TeaserSwipeCard %}
+{% from '@bonniernews/dn-design-system-web/components/button/button.njk' import Button %}
 
 {% macro TeaserListSwipe(params) %}
   {% set componentClassName = "ds-teaser" %}
@@ -45,20 +45,20 @@
     </div>
 
     {% if arrowPosition === 'floating' %}
-      {{ IconButton({
+      {{ Button({
         iconName: 'arrow_back',
-        variant: 'primary',
-        emphasis: 'outline',
-        size: 'small',
+        variant: 'staticWhite',
+        size: 'sm',
+        isIconButton: true,
         attributes: { 'aria-label': 'Föregående' },
         classNames: componentClassName + '__swipe-arrow ' + componentClassName + '__swipe-arrow--back hidden-mobile hidden-tablet',
         forcePx: true
       }) }}
-      {{ IconButton({
+      {{ Button({
         iconName: 'arrow_forward',
-        variant: 'primary',
-        emphasis: 'outline',
-        size: 'small',
+        variant: 'staticWhite',
+        size: 'sm',
+        isIconButton: true,
         attributes: { 'aria-label': 'Nästa' },
         classNames: componentClassName + '__swipe-arrow ' + componentClassName + '__swipe-arrow--forward hidden-mobile hidden-tablet',
         forcePx: true

package/components/teaser-list-swipe/teaser-list-swipe.scss

@@ -1,6 +1,6 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
 @use "../../assets/teaser/teaser.scss" as *;
-@use "../../components/icon-button/icon-button";
+@use "../../components/button/button.scss";
 @use "../../components/group-header/group-header";
 @use "../../components/teaser-swipe-card/teaser-swipe-card";
 
@@ -47,11 +47,11 @@
       z-index: 5;
 
       &--back {
-        left: 10px;
+        left: ds-spacing($ds-s-125);
       }
 
       &--forward {
-        right: 10px;
+        right: ds-spacing($ds-s-125);
       }
     }
   }

package/components/teaser-list-vertical/teaser-list-vertical.njk

@@ -34,7 +34,7 @@
         {{ Button({
           text: params.listLink.text,
           href: params.listLink.url,
-          variant: 'secondary',
+          variant: 'secondaryFilled',
           fullWidth: true,
           classNames: params.listLink.classNames,
           attributes: params.listLink.attributes,

package/components/text-input/text-input.njk

@@ -1,5 +1,5 @@
-{% from '@bonniernews/dn-design-system-web/components/icon-button/icon-button.njk' import IconButton %} {# TODO switch to on-off button  #}
 {% from '@bonniernews/dn-design-system-web/assets/form-field/form-field.njk' import FormField %}
+{% from '@bonniernews/dn-design-system-web/components/button-toggle/button-toggle.njk' import ButtonToggle %}
 
 {% macro TextInput(params) %}
   {% set componentClassName = "ds-text-input" %}
@@ -23,10 +23,12 @@
       <label class="{{ componentClassName + '__label'}}" for="{{ params.name }}">{{ params.label }}</label>
     {% endif %}
     {% if password %}
-      {{ IconButton({
+      {{ ButtonToggle({
         variant: "transparent",
-        size: "small",
+        size: "sm",
         iconName: "visibility",
+        selectedIconName: "visibility_off",
+        isIconButton: true,
         classNames: componentClassName + "__password-toggle",
         attributes: {
           id: params.name + "-password-toggle"

package/components/text-input/text-input.scss

@@ -1,10 +1,9 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
 @use "../../assets/form-field/form-field.scss";
-@use "../icon-button-toggle/icon-button-toggle.scss";
-@use "../icon-button/icon-button.scss"; // TODO remove when njk is removed
+@use "../../components/button/button.scss";
 
 $ds-text-input-toggle-btn__width: 28px;
-$ds-text-input-toggle-btn__top: 22px;
+$ds-text-input-toggle-btn__top: 20px;
 $ds-text-input-toggle-btn__area: ($ds-text-input-toggle-btn__width + ds-spacing($ds-s-050));
 
 .ds-form-field__error {

package/components/tooltip/tooltip.njk

@@ -1,6 +1,5 @@
 {% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
 {% from '@bonniernews/dn-design-system-web/components/button/button.njk' import Button %}
-{% from '@bonniernews/dn-design-system-web/components/icon-button/icon-button.njk' import IconButton %}
 {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 
 {% macro Tooltip(params) %}
@@ -24,12 +23,13 @@
 
       {{ caller() if caller }}
     </div>
-    
+
     {% if params.closeButton %}
-      {{ IconButton({
+      {{ Button({
         variant: "transparent",
-        size: "small",
+        size: "sm",
         iconName: "close",
+        isIconButton: true,
         classNames: "ds-tooltip__close",
         attributes: { "aria-label": "Stäng" }
       })}}

package/components/tooltip/tooltip.scss

@@ -2,7 +2,6 @@
 @use "../../foundations/variables/typographyFontWeight.scss";
 @use "../../components/icon-sprite/icon-sprite.scss";
 @use "../../components/button/button.scss";
-@use "../../components/icon-button/icon-button.scss";
 
 .ds-tooltip {
   background-color: $ds-color-surface-primary-raised-strong;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "28.0.1",
+  "version": "29.0.0",
   "description": "DN design system for web.",
   "type": "module",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",

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

@@ -74,9 +74,7 @@ var ButtonBase = ({
   text,
   disabled = false,
   variant = "primary",
-  emphasis = "default",
-  rounded = false,
-  size = "medium",
+  size = "md",
   fullWidth = false,
   mobileFullWidth = false,
   iconPosition = "none",
@@ -98,13 +96,9 @@ var ButtonBase = ({
     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" } } });
@@ -116,14 +110,12 @@ var ButtonBase = ({
   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",
@@ -161,9 +153,7 @@ var Button = ({
   text,
   disabled = false,
   variant = "primary",
-  emphasis = "default",
-  rounded = false,
-  size = "medium",
+  size = "md",
   fullWidth = false,
   mobileFullWidth = false,
   iconPosition = "none",
@@ -171,6 +161,7 @@ var Button = ({
   loading = false,
   type = "button",
   href,
+  isIconButton = false,
   classNames,
   attributes,
   forcePx = false
@@ -179,8 +170,6 @@ var Button = ({
     text,
     disabled,
     variant,
-    emphasis,
-    rounded,
     size,
     fullWidth,
     mobileFullWidth,
@@ -189,50 +178,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 jsx7, jsxs as jsxs3 } from "preact/jsx-runtime";
 var BuddyMenu = ({
   userName,
   links,
@@ -247,16 +201,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__ */ 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,
       {
         ...{
-          size: "small",
+          size: "sm",
           iconName: "close",
           classNames: "ds-buddy-menu__close",
           forcePx,
-          emphasis: "transparent"
+          variant: "transparent",
+          isIconButton: true
         }
       }
     ),
@@ -264,23 +219,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__ */ jsx7("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__ */ 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 }),
         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__ */ 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(
+        /* @__PURE__ */ jsx7(
           Button,
           {
             ...{
               text: "Mitt konto",
-              size: "large",
-              variant: "primary",
+              size: "lg",
+              variant: "primaryBlack",
               fullWidth: true,
               href: myAccountUrl,
               attributes: { "data-hide-promo": "" },
@@ -291,8 +246,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__ */ jsx7("h2", { class: "ds-buddy-menu__links-title", children: "Mitt inneh\xE5ll" }),
+      /* @__PURE__ */ jsx7("ul", { class: "ds-buddy-menu__links-list", children: links })
     ] })
   ] }) }) }) });
 };