@bonniernews/dn-design-system-web 28.0.1-beta.0 → 28.0.1

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/button/button.njk' import Button %}
+{% from '@bonniernews/dn-design-system-web/components/icon-button/icon-button.njk' import IconButton %}
 
 {% 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: "primary",
-        size: 'sm',
+        variant: "brand",
+        size: 'small',
         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 "secondaryOutline" %}
+      {%  set buttonVariant = "staticWhite" if params.variant else "primary" %}
       <div class="{{ componentClassName + '__arrows' }} hidden-mobile hidden-tablet">
-        {{ Button({
+        {{ IconButton({
           variant: buttonVariant,
-          size: "sm",
-          isIconButton: true,
+          emphasis: "outline",
+          size: "small",
           iconName: "arrow_back",
           classNames: "ds-group-header__arrow ds-group-header__arrow--left",
           attributes: {"aria-label": "Föregående"}
         }) }}
-        {{ Button({
+        {{ IconButton({
           variant: buttonVariant,
-          size: "sm",
-          isIconButton: true,
+          emphasis: "outline",
+          size: "small",
           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,5 +1,6 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
-@use "../button/button.scss";
+@use "../button-toggle/button-toggle.scss";
+@use "../icon-button/icon-button.scss";
 
 $ds-group-header__icon-size: 24px;
 

package/components/icon-button/README-NJK.md

@@ -0,0 +1,47 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/icon-button](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/icon-button)
+- Storybook: [Buttons > IconButton](https://designsystem.dn.se/?path=/docs/basic-buttons-iconbutton--docs)
+- Storybook (Latest): [Buttons > IconButton](https://designsystem-latest.dn.se/?path=/docs/basic-buttons-iconbutton--docs)
+
+----
+
+# Icon button
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|iconName | String | yes | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icons--all-icons |
+|disabled | bool | no | true, false | false | Note: only works on button-tag, not on a-tag |
+|variant | String | no | primary, secondary, brand, staticWhite | primary | Design variant |
+|emphasis | String | no | default, elevated, outline, transparent | default | |
+|rounded | bool | no | true, false | true | Button will be rounded to the max |
+|size| String | no | small, medium, large, xlarge | medium | |
+|loading | bool | no | true, false | false | |
+|a11y.visuallyHidden | Object | no | | | Ex. a11y: { visuallyHidden: "Dela på TikTok" } |
+|href | String | no | | | If href is set the button will be rendered as an a-tag |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|classNames | String | no | | | Ex. "my-special-class" |
+|forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size
+
+## Minimum requirement example
+
+### Nunjucks
+
+These are copy paste friendly examples to quickliy get started using a component.
+
+```html
+{% from '@bonniernews/dn-design-system-web/components/icon-button/icon-button.njk' import IconButton %}
+
+{{ IconButton({
+  variant: 'primary',
+  emphasis: 'outline',
+  size: 'default',
+  iconName: 'arrow_forward',
+  attributes: { 'aria-label': 'Nästa' }
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/icon-button/icon-button";
+```

package/components/icon-button/README-UXD.md

@@ -0,0 +1,44 @@
+# Icon Button
+
+An icon-only button lets people take a common and recognizable action where space is limited.
+
+## Anatomy
+
+<img src="/images/uxd/icon-button.png">
+
+- **Icon:** The visual representation of an object, action, or concept, usually depicted in a simplified and recognizable form. See [Icon component](https://designsystem.dn.se/?path=/docs/foundations-icons--docs).
+- **Background:** The background area that encompasses the toggle button, providing visual context and affordance.
+- **Border:** The outline surrounding the button, providing visual separation from surrounding elements.
+- **Shape:** The standard shape is circular but the component also supports a rectangular format.
+
+## Variants
+
+| Variant        | How to use                                                                                         |
+| -------------- | -------------------------------------------------------------------------------------------------- |
+| Brand          | Not used at the moment.                                                                            |
+| Primary        | Primary icon buttons are used for key actions or primary functions within a context, providing visual emphasis. |
+| Secondary      | Secondary icon buttons denote lesser actions or supplementary functions, serving as supporting elements within the interface. |
+| Static White   | Static white icon button is used if the button should have a white background regardless of light/dark theme. |
+
+## Emphasis Styles
+
+| Style       | Description                                                                                   |
+| ----------- | --------------------------------------------------------------------------------------------- |
+| Elevated    | Elevated icon buttons have a raised appearance, indicating prominence or importance within the interface. |
+| Default     | Default icon buttons maintain a standard appearance, blending seamlessly with the surrounding content. |
+| Outline     | Outline icon buttons have a minimalistic outline appearance, providing visual contrast against the background. |
+| Transparent | Transparent icon buttons have no visible background, seamlessly integrating with any background color or pattern. |
+
+## Usage
+
+An icon-only button lets people take a common and recognizable action where space is limited.
+
+### Dos
+
+- **Only use conventional icon buttons:** Since the icon is the only cue it's important that the user recognize the call to action. Typical icon buttons are save, share, print, or next/previous in a slideshow.
+- **Consider Button Emphasis:** Choose the appropriate emphasis style (elevated, default, outline, or transparent) based on the context and background.
+
+### Don'ts
+
+- **Avoid Overloading Icon Buttons:** Refrain from overloading icon buttons with excessive icons or functionalities, as this can reduce clarity and usability.
+- **Unconventional use:** Use icon button variants appropriately, avoiding the use of unambiguous icons.

package/components/icon-button/README.md

@@ -0,0 +1,31 @@
+IconButton
+==========
+
+*   GitHub: [BonnierNews/dn-design-system/../web/src/components/icon-button](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/icon-button)
+*   Storybook: [Buttons > IconButton](https://designsystem.dn.se/?path=/docs/basic-buttons-iconbutton--docs)
+
+The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use "@bonniernews/dn-design-system-web/components/icon-button/icon-button.scss";`
+
+| Name | Description | Default |
+|:--- | :--- | :--- |
+| a11y | object | \- |
+| variant | "brand", "secondary", "primary" | "primary" |
+| disabled | Note: only works on button-tag, not on a-tag<br />boolean | false |
+| 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 | "large", "small", "medium", "xlarge" | "medium" |
+| loading | 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" | \- |
+| href | If href is set the button will be rendered as an a-tag<br />string | \- |
+| emphasis | "default", "elevated", "outline", "transparent" | "default" |
+| rounded | Button will be rounded<br />boolean | true |
+
+```jsx
+<IconButton
+  emphasis="outline"
+  iconName="home"
+  size="large"
+  variant="secondary"
+/>
+```

package/components/icon-button/icon-button.njk

@@ -0,0 +1,22 @@
+{% from '@bonniernews/dn-design-system-web/components/button/button.njk' import Button %}
+
+{% macro IconButton(params) %}
+  {{ Button({
+    isIconBtn: true,
+    isToggle: params.isToggle,
+    variant: params.variant,
+    href: params.href,
+    emphasis: params.emphasis,
+    rounded: false if params.rounded === false else true,
+    disabled: params.disabled,
+    size: params.size,
+    iconName: params.iconName,
+    selectedIconName: params.selectedIconName,
+    loading: params.loading,
+    selected: params.selected,
+    forcePx: params.forcePx,
+    classNames: params.classNames,
+    attributes: params.attributes,
+    a11y: params.a11y
+  }) }}
+{% endmacro %}

package/components/icon-button/icon-button.scss

@@ -0,0 +1,32 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../button/button.scss" as *;
+
+.ds-btn.ds-btn--icon-only {
+  &.ds-btn--small {
+    padding: ds-px-to-rem(ds-spacing($ds-s-025) - $ds-btn-outlined__border-width);
+    @at-root .ds-force-px#{&} {
+      padding: ds-spacing($ds-s-025) - $ds-btn-outlined__border-width;
+    }
+  }
+
+  &.ds-btn--medium {
+    padding: ds-px-to-rem(ds-spacing($ds-s-050) - $ds-btn-outlined__border-width);
+    @at-root .ds-force-px#{&} {
+      padding: ds-spacing($ds-s-050) - $ds-btn-outlined__border-width;
+    }
+  }
+
+  &.ds-btn--large {
+    padding: ds-px-to-rem(ds-spacing($ds-s-075) - $ds-btn-outlined__border-width);
+    @at-root .ds-force-px#{&} {
+      padding: ds-spacing($ds-s-075) - $ds-btn-outlined__border-width;
+    }
+  }
+
+  &.ds-btn--xlarge {
+    padding: ds-px-to-rem(ds-spacing($ds-s-075) - $ds-btn-outlined__border-width);
+    @at-root .ds-force-px#{&} {
+      padding: ds-spacing($ds-s-075) - $ds-btn-outlined__border-width;
+    }
+  }
+}

package/components/icon-button-toggle/README-NJK.md

@@ -0,0 +1,53 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/icon-button-toggle](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/icon-button-toggle)
+- Storybook: [Buttons > IconButtonToggle](https://designsystem.dn.se/?path=/docs/basic-buttons-iconbuttontoggle--docs)
+- Storybook (Latest): [Buttons > IconButtonToggle](https://designsystem-latest.dn.se/?path=/docs/basic-buttons-iconbuttontoggle--docs)
+
+----
+
+# Icon button toggle
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|selected | bool | no | true, false | false | |
+|iconName | String | yes | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icons--all-icons |
+|selectedIconName | String | yes | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icons--all-icons |
+|disabled | bool | no | true, false | false | Note: only works on button-tag, not on a-tag |
+|variant | String | no | primary, secondary, brand, staticWhite | primary | Design variant |
+|emphasis | String | no | default, elevated, outline, transparent | default | |
+|size| String | no | small, medium, large | medium | |
+|loading | bool | no | true, false | false | |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|classNames | String | no | | | Ex. "my-special-class" |
+|forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size
+
+## Minimum requirement example
+
+### Nunjucks
+
+These are copy paste friendly examples to quickliy get started using a component.
+
+```html
+{% from '@bonniernews/dn-design-system-web/components/icon-button-toggle/icon-button-toggle.njk' import IconButtonToggle %}
+
+{{ IconButtonToggle({
+  variant: 'primary',
+  size: 'default',
+  iconName: 'bookmarked',
+  selectedIconName: 'bookmark-fill'
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/icon-button-toggle/icon-button-toggle";
+```
+
+### Javascript
+
+```javascript
+import dsButtonToggle from '@bonniernews/dn-design-system-web/components/button/button-interactions.js'
+const toggleElements = Array.from(document.getElementsByClassName("ds-btn--toggle"));
+dsButtonToggle(toggleElements);
+```

package/components/icon-button-toggle/README.md

@@ -0,0 +1,38 @@
+IconButtonToggle
+================
+
+*   GitHub: [BonnierNews/dn-design-system/../web/src/components/icon-button-toggle](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/icon-button-toggle)
+*   Storybook: [Buttons > IconButtonToggle](https://designsystem.dn.se/?path=/docs/basic-buttons-iconbuttontoggle--docs)
+
+### [](#javascript)Javascript
+
+```javascript
+import dsButtonToggle from '@bonniernews/dn-design-system-web/components/button/button-interactions.js'
+const toggleElements = Array.from(document.getElementsByClassName("ds-btn--toggle"));
+dsButtonToggle(toggleElements);
+```
+
+The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use "@bonniernews/dn-design-system-web/components/icon-button-toggle/icon-button-toggle.scss";`
+
+| Name | Description | Default |
+|:--- | :--- | :--- |
+| selected | boolean | false |
+| variant | "brand", "secondary", "primary" | "primary" |
+| disabled | Note: only works on button-tag, not on a-tag<br />boolean | false |
+| 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 | "large", "small", "medium", "xlarge" | "medium" |
+| loading | 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" | \- |
+| emphasis | "default", "elevated", "outline", "transparent" | "default" |
+| selectedIconName | "add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "bookmark-filled", "bookmarked", "campaign" | \- |
+
+```jsx
+<IconButtonToggle
+  iconName="bookmarked"
+  selectedIconName="bookmark-filled"
+  size="medium"
+  variant="primary"
+/>
+```

package/components/icon-button-toggle/icon-button-toggle.njk

@@ -0,0 +1,18 @@
+{% from '@bonniernews/dn-design-system-web/components/icon-button/icon-button.njk' import IconButton %}
+
+{% macro IconButtonToggle(params) %}
+  {{ IconButton({
+    isToggle: true,
+    variant: params.variant,
+    emphasis: params.emphasis,
+    disabled: params.disabled,
+    size: params.size,
+    iconName: params.iconName,
+    selectedIconName: params.selectedIconName,
+    loading: params.loading,
+    selected: params.selected,
+    forcePx: params.forcePx,
+    classNames: params.classNames,
+    attributes: params.attributes
+  }) }}
+{% endmacro %}

package/components/icon-button-toggle/icon-button-toggle.scss

@@ -0,0 +1 @@
+@use "../icon-button/icon-button.scss" as *;

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 { ButtonToggleStandardProps } from '../button/button-types'
+import { ButtonToggleProps } from '../button/button-types'
 
 export interface ListItemSharedProps {
   title?: string
@@ -67,7 +67,7 @@ export interface SwitchListItemProps
 
 export interface ToggleListItemProps
   extends ListItemSharedProps,
-    ButtonToggleStandardProps,
+    ButtonToggleProps,
     Pick<ListItemBaseProps, 'title' | 'subtitle' | 'disabled' | 'selected'> {
   name: string
   titleHref?: string
@@ -104,7 +104,7 @@ export interface InnerListItemProps
       | 'toggleSelectedText'
       | 'disabled'
     >,
-    Pick<ButtonToggleStandardProps, 'variant'> {
+    Pick<ButtonToggleProps, '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("secondaryFilled"),
+          variant: params.variant | default("secondary"),
           disabled: params.disabled,
           forcePx: params.forcePx,
-          size: "sm",
+          size: "small",
           attributes: params.elementAttributes,
           classNames: params.elementClassNames
         })}}
@@ -164,10 +164,10 @@
           text: params.toggleText,
           selected: params.selected,
           selectedText: params.toggleSelectedText,
-          variant: params.variant | default("secondaryFilled"),
+          variant: params.variant | default("secondary"),
           disabled: params.disabled,
           forcePx: params.forcePx,
-          size: "sm",
+          size: "small",
           attributes: params.elementAttributes,
           classNames: params.elementClassNames
         })}}

package/components/modal/modal.njk

@@ -1,5 +1,6 @@
 {% 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) %}
@@ -15,11 +16,10 @@
   <div class="{{ classes }}">
     <dialog class="{{ componentClassName + '__inner' }}" {{- attributes | safe }}>
       <div class="{{ componentClassName + '__content' }}">
-        {{ Button({
+        {{ IconButton({
           variant: "transparent",
-          size: "sm",
+          size: "small",
           iconName: "close",
-          isIconButton: true,
           classNames: "ds-modal__close ds-modal__close--icon"
         })}}
 
@@ -32,13 +32,14 @@
         {% if params.primaryButton or params.secondaryButton %}
           <div class="ds-modal__buttons">
             {% if params.secondaryButton %}
-              {%- set secondaryButtonClasses = ["ds-modal__secondary-button",
+              {%- set secondaryButtonClasses = [
                 "ds-modal__close" if params.secondaryButton.isCloseButton,
                 params.secondaryButton.classNames if params.secondaryButton.classNames
               ] | join(" ") %}
               {{ Button({
                 text: params.secondaryButton.text,
-                variant: "secondaryOutline",
+                variant: "primary",
+                emphasis: "outline",
                 href: params.secondaryButton.href,
                 classNames: secondaryButtonClasses,
                 attributes: params.secondaryButton.attributes,
@@ -50,14 +51,11 @@
             {% endif %}
 
             {% if params.primaryButton %}
-            {%- set primaryButtonClasses = ["ds-modal__primary-button",
-              params.primaryButton.classNames if params.primaryButton.classNames
-          ] | join(" ") %}
               {{ Button({
                 text: params.primaryButton.text,
-                variant: "primaryBlack",
+                variant: "primary",
                 href: params.primaryButton.href,
-                classNames: primaryButtonClasses,
+                classNames: params.primaryButton.classNames,
                 attributes: params.primaryButton.attributes,
                 forcePx: params.forcePx,
                 mobile: {

package/components/modal/modal.scss

@@ -1,6 +1,7 @@
 @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 {
@@ -106,12 +107,12 @@ body.no-scroll {
         display: flex;
         flex-wrap: wrap;
 
-        .ds-modal__primary-button:not(:only-child) {
+        .ds-btn--default:not(:only-child) {
           order: 1;
           margin-bottom: ds-spacing($ds-s-100);
         }
 
-        .ds-modal__secondary-button:not(:only-child) {
+        .ds-btn--outline:not(:only-child) {
           order: 2;
         }
       }
@@ -120,7 +121,7 @@ body.no-scroll {
         display: flex;
         justify-content: center;
 
-        .ds-modal__secondary-button:not(:only-child) {
+        .ds-btn--outline:not(:only-child) {
           margin-right: ds-spacing($ds-s-100);
         }
       }

package/components/pagination/pagination.njk

@@ -1,5 +1,6 @@
 {% 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: 'primary',
-              size: 'md',
+              variant: 'brand',
+              size: 'medium',
               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: 'primary',
-              size: 'md',
+              variant: 'brand',
+              size: 'medium',
               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' %}
-      {{ Button({
+      {{ IconButton({
         iconName: 'arrow_back',
-        variant: 'staticWhite',
-        size: 'sm',
-        isIconButton: true,
+        variant: 'primary',
+        emphasis: 'outline',
+        size: 'small',
         attributes: { 'aria-label': 'Föregående' },
         classNames: componentClassName + '__swipe-arrow ' + componentClassName + '__swipe-arrow--back hidden-mobile hidden-tablet',
         forcePx: true
       }) }}
-      {{ Button({
+      {{ IconButton({
         iconName: 'arrow_forward',
-        variant: 'staticWhite',
-        size: 'sm',
-        isIconButton: true,
+        variant: 'primary',
+        emphasis: 'outline',
+        size: 'small',
         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/button/button.scss";
+@use "../../components/icon-button/icon-button";
 @use "../../components/group-header/group-header";
 @use "../../components/teaser-swipe-card/teaser-swipe-card";
 
@@ -47,11 +47,11 @@
       z-index: 5;
 
       &--back {
-        left: ds-spacing($ds-s-125);
+        left: 10px;
       }
 
       &--forward {
-        right: ds-spacing($ds-s-125);
+        right: 10px;
       }
     }
   }

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

@@ -34,7 +34,7 @@
         {{ Button({
           text: params.listLink.text,
           href: params.listLink.url,
-          variant: 'secondaryFilled',
+          variant: 'secondary',
           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,12 +23,10 @@
       <label class="{{ componentClassName + '__label'}}" for="{{ params.name }}">{{ params.label }}</label>
     {% endif %}
     {% if password %}
-      {{ ButtonToggle({
+      {{ IconButton({
         variant: "transparent",
-        size: "sm",
+        size: "small",
         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,9 +1,10 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
 @use "../../assets/form-field/form-field.scss";
-@use "../../components/button/button.scss";
+@use "../icon-button-toggle/icon-button-toggle.scss";
+@use "../icon-button/icon-button.scss"; // TODO remove when njk is removed
 
 $ds-text-input-toggle-btn__width: 28px;
-$ds-text-input-toggle-btn__top: 20px;
+$ds-text-input-toggle-btn__top: 22px;
 $ds-text-input-toggle-btn__area: ($ds-text-input-toggle-btn__width + ds-spacing($ds-s-050));
 
 .ds-form-field__error {