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

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

@@ -1,215 +1 @@
-@use "sass:math";
-@use "../../foundations/helpers/forward.helpers.scss" as *;
-@use "../icon-sprite/icon-sprite.scss";
-@use "../spinner/spinner.scss" as *;
-
-$ds-btn-toggle-outlined__border-width: ds-metrics-border-width(x1);
-$ds-btn-toggle__icon-size: 24px;
-$ds-btn-toggle__icon-size-xsmall: 20px;
-
-.ds-btn-toggle {
-  --ds-btn-toggle__background-color: transparent;
-  --ds-btn-toggle__background-color-hover: #{$ds-color-component-primary-overlay};
-  --ds-btn-toggle__background-color-active: #{$ds-color-component-primary-overlay-02};
-  --ds-btn-toggle__border-color: #{$ds-color-border-primary-03};
-  --ds-btn-toggle__outline-color: #{$ds-color-border-focus-02};
-  --ds-btn-toggle__color: #{$ds-color-text-primary};
-
-  &--brand:not(.ds-btn-toggle--selected) {
-    --ds-btn-toggle__background-color: #{$ds-color-component-brand};
-    --ds-btn-toggle__border-color: transparent;
-    --ds-btn-toggle__outline-color: #{$ds-color-border-focus};
-    --ds-btn-toggle__color: #{$ds-color-text-on-brand};
-    &:not(.ds-loading):disabled {
-      opacity: $ds-opacity-component-disabled;
-    }
-  }
-
-  &--secondaryFilled:not(.ds-btn-toggle--selected) {
-    --ds-btn-toggle__border-color: transparent;
-    --ds-btn-toggle__outline-color: #{$ds-color-border-focus-02};
-    --ds-btn-toggle__background-color: #{$ds-color-component-primary-overlay};
-  }
-
-  &--secondaryFilled,
-  &--selected {
-    &:not(.ds-loading):disabled {
-      --ds-btn-toggle__border-color: transparent;
-      --ds-btn-toggle__color: #{$ds-color-text-disabled};
-      &::before {
-        --ds-btn-toggle__background-color: unset;
-      }
-    }
-  }
-
-  &:not(.ds-loading):disabled {
-    cursor: not-allowed;
-  }
-
-  @include ds-typography($ds-typography-detailstandard-button);
-  cursor: pointer;
-  color: var(--ds-btn-toggle__color);
-  background-color: var(--ds-btn-toggle__background-color);
-  min-width: 0;
-  min-height: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  border: $ds-btn-toggle-outlined__border-width solid var(--ds-btn-toggle__border-color);
-  border-radius: 100px;
-  position: relative;
-  padding: ds-spacing($ds-s-075, rem) - ds-px-to-rem($ds-btn-toggle-outlined__border-width) ds-spacing($ds-s-150, rem) - ds-px-to-rem(
-      $ds-btn-toggle-outlined__border-width
-    );
-
-  &::before {
-    content: "";
-    border-radius: inherit;
-    pointer-events: none;
-    position: absolute;
-    top: -$ds-btn-toggle-outlined__border-width;
-    left: -$ds-btn-toggle-outlined__border-width;
-    bottom: -$ds-btn-toggle-outlined__border-width;
-    right: -$ds-btn-toggle-outlined__border-width;
-  }
-  span,
-  i {
-    position: relative;
-  }
-  .ds-btn-toggle__on {
-    display: none;
-  }
-
-  span {
-    pointer-events: none;
-  }
-
-  @include min-click-surface();
-
-  &:focus-visible {
-    outline: ds-metrics-border-width(x2) solid var(--ds-btn-toggle__outline-color);
-    outline-offset: 2px;
-  }
-
-  @at-root a#{&} {
-    box-sizing: border-box;
-    text-align: center;
-    text-decoration: none;
-  }
-
-  @include ds-hover() {
-    &:hover:not(:disabled):not(.ds-loading)::before {
-      background-color: var(--ds-btn-toggle__background-color-hover);
-    }
-  }
-  &:active:not(:disabled):not(.ds-loading)::before {
-    background-color: var(--ds-btn-toggle__background-color-active);
-  }
-
-  @include ds-loading();
-}
-
-.ds-btn-toggle--full-width {
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.ds-btn-toggle--small {
-  padding: ds-px-to-rem(ds-spacing($ds-s-050) - $ds-btn-toggle-outlined__border-width)
-    ds-px-to-rem(ds-spacing($ds-s-125) - $ds-btn-toggle-outlined__border-width);
-}
-
-.ds-btn-toggle--xsmall {
-  @include ds-typography($ds-typography-detailstandard-button-small);
-  padding: ds-px-to-rem(ds-spacing($ds-s-025) - $ds-btn-toggle-outlined__border-width)
-    ds-px-to-rem(ds-spacing($ds-s-075) - $ds-btn-toggle-outlined__border-width);
-}
-
-@include ds-mq-only-breakpoint(mobile) {
-  .ds-btn-toggle--mobile-full-width {
-    width: 100%;
-  }
-}
-
-.ds-btn-toggle--selected {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding-left: ds-px-to-rem(ds-spacing($ds-s-125) - $ds-btn-toggle-outlined__border-width);
-
-  .ds-btn-toggle__on {
-    display: flex;
-  }
-  .ds-btn-toggle__off {
-    display: none;
-  }
-
-  .ds-icon {
-    display: flex;
-    height: ds-px-to-rem($ds-btn-toggle__icon-size);
-    width: ds-px-to-rem($ds-btn-toggle__icon-size);
-    margin: ds-spacing(0 $ds-s-050 0 0, rem);
-    svg {
-      fill: currentColor;
-    }
-  }
-
-  &.ds-btn-toggle--small {
-    padding-left: ds-px-to-rem(ds-spacing($ds-s-100) - $ds-btn-toggle-outlined__border-width);
-  }
-
-  &.ds-btn-toggle--xsmall {
-    padding-left: ds-px-to-rem(ds-spacing($ds-s-050) - $ds-btn-toggle-outlined__border-width);
-    .ds-icon {
-      height: ds-px-to-rem($ds-btn-toggle__icon-size-xsmall);
-      width: ds-px-to-rem($ds-btn-toggle__icon-size-xsmall);
-      margin: ds-spacing(0 $ds-s-025 0 0, rem);
-    }
-  }
-
-  // we have to override spinner styling since spinner variant is based on "off" button variant
-  &.ds-loading {
-    .ds-spinner__inner {
-      border-top-color: $ds-color-icon-primary;
-      &::before {
-        border-color: $ds-color-icon-primary;
-      }
-    }
-  }
-}
-
-.ds-btn-toggle.ds-force-px {
-  /* stylelint-disable-next-line */
-  padding: ds-spacing($ds-s-075) - $ds-btn-toggle-outlined__border-width ds-spacing($ds-s-150) -
-    $ds-btn-toggle-outlined__border-width;
-  @include ds-typography($ds-typography-detailstandard-button, true);
-
-  &.ds-btn-toggle--selected {
-    padding-left: ds-spacing($ds-s-125)-$ds-btn-toggle-outlined__border-width;
-    .ds-icon {
-      margin: ds-spacing(0 $ds-s-050 0 0);
-      height: $ds-btn-toggle__icon-size;
-      width: $ds-btn-toggle__icon-size;
-    }
-  }
-  &.ds-btn-toggle--small {
-    padding: ds-spacing($ds-s-050)-$ds-btn-toggle-outlined__border-width ds-spacing($ds-s-125)-$ds-btn-toggle-outlined__border-width;
-
-    &.ds-btn-toggle--selected {
-      padding-left: ds-spacing($ds-s-100)-$ds-btn-toggle-outlined__border-width;
-    }
-  }
-  &.ds-btn-toggle--xsmall {
-    @include ds-typography($ds-typography-detailstandard-button-small, true);
-    padding: ds-spacing($ds-s-025)-$ds-btn-toggle-outlined__border-width ds-spacing($ds-s-075)-$ds-btn-toggle-outlined__border-width;
-    .ds-icon {
-      margin: ds-spacing(0 $ds-s-025 0 0);
-      height: $ds-btn-toggle__icon-size-xsmall;
-      width: $ds-btn-toggle__icon-size-xsmall;
-    }
-    &.ds-btn-toggle--selected {
-      padding-left: ds-spacing($ds-s-050)-$ds-btn-toggle-outlined__border-width;
-    }
-  }
-}
+@use "../button/button.scss" as *;

package/components/byline/README.md

@@ -62,7 +62,7 @@ These are copy paste friendly examples to quickliy get started using a component
 ### Javascript
 
 ```javascript
-import dsButtonToggle from '@bonniernews/dn-design-system-web/components/button-toggle/button-toggle.js'
-const toggleElements = Array.from(document.getElementsByClassName("ds-btn-toggle"));
+import dsButtonToggle from '@bonniernews/dn-design-system-web/components/button/button.js'
+const toggleElements = Array.from(document.getElementsByClassName("ds-btn--toggle"));
 dsButtonToggle(toggleElements);
 ```

package/components/byline/byline.njk

@@ -28,8 +28,8 @@
             text: "Följ",
             selectedText: "Följer",
             selected: params.followed,
-            variant: "secondaryFilled",
-            size: "xsmall",
+            variant: "secondary",
+            size: "small",
             attributes: params.elementAttributes,
             classNames: elementClassNames | join(" "),
             forcePx: params.forcePx

package/components/factbox/factbox.njk

@@ -29,8 +29,8 @@
       <div class="{{ componentClassName + '__show-more'}}">
         {{ Button({
           text: 'Visa mer',
-          variant: 'secondaryFilled',
-          size: 'small',
+          variant: 'secondary',
+          size: 'medium',
           iconPosition: 'right',
           iconName: 'expand_more',
           classNames: 'ds-factbox__expand-more',
@@ -39,8 +39,8 @@
         })}}
         {{ Button({
           text: 'Visa mindre',
-          variant: 'secondaryFilled',
-          size: 'small',
+          variant: 'secondary',
+          size: 'medium',
           iconPosition: 'right',
           iconName: 'expand_less',
           classNames: 'ds-factbox__expand-less',

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

@@ -44,7 +44,7 @@
     {% if params.variant == 'toggle' %}
       {{ ButtonToggle({
         variant: 'brand',
-        size: 'xsmall',
+        size: 'small',
         text: params.toggleText,
         selectedText: params.toggleSelectedText,
         selected: params.toggleSelected,
@@ -55,14 +55,16 @@
     {% elif (params.variant == 'arrows') %}
       <div class="{{ componentClassName + '__arrows' }} hidden-mobile hidden-tablet">
         {{ IconButton({
-          variant: "elevated",
+          variant: "primary",
+          emphasis: "outline",
           size: "small",
           iconName: "arrow_back",
           classNames: "ds-group-header__arrow ds-group-header__arrow--left",
           attributes: {"aria-label": "Föregående"}
         }) }}
         {{ IconButton({
-          variant: "elevated",
+          variant: "primary",
+          emphasis: "outline",
           size: "small",
           iconName: "arrow_forward",
           classNames: "ds-group-header__arrow ds-group-header__arrow--right",

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

@@ -42,7 +42,7 @@
 
   .ds-group-header__right-link,
   .ds-group-header__icon,
-  .ds-btn-toggle {
+  .ds-btn--toggle {
     flex-shrink: 0;
   }
 
@@ -51,15 +51,15 @@
     flex-shrink: 0;
     align-items: center;
 
-    .ds-icon-btn {
+    .ds-btn {
       margin: ds-spacing(0 $ds-s-050);
-      + .ds-icon-btn {
+      + .ds-btn {
         margin: ds-spacing(0 0 0 $ds-s-075);
       }
     }
   }
 
-  .ds-btn-toggle {
+  .ds-btn--toggle {
     align-self: center;
   }
 

package/components/icon-button/README.md

@@ -12,8 +12,9 @@
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |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 | outlined, transparent, elevated | outlined | Design variant |
-|size| String | no | default, small, large | default | |
+|variant | String | no | primary, secondary, brand, staticWhite | primary | Design variant |
+|emphasis | String | no | default, elevated, outline, transparent | default | |
+|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 |
@@ -31,7 +32,8 @@ These are copy paste friendly examples to quickliy get started using a component
 {% from '@bonniernews/dn-design-system-web/components/icon-button/icon-button.njk' import IconButton %}
 
 {{ IconButton({
-  variant: 'outlined',
+  variant: 'primary',
+  emphasis: 'outline',
   size: 'default',
   iconName: 'arrow_forward',
   attributes: { 'aria-label': 'Nästa' }

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

@@ -1,53 +1,19 @@
-{% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
-{% from '@bonniernews/dn-design-system-web/foundations/a11y/visually-hidden.njk' import VisuallyHidden %}
-{% from '@bonniernews/dn-design-system-web/components/spinner/spinner.njk' import Spinner %}
-{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+{% from '@bonniernews/dn-design-system-web/components/button/button.njk' import Button %}
 
-{% macro IconButton(params, isToggle) %}
-  {%- set componentClassName = "ds-icon-btn" %}
-  {%- set classNamePrefix = componentClassName + "--" %}
-  {%- set additionalClasses = [] %}
-  {%- set attributes = getAttributes(params.attributes) %}
-  {%- set variantClass = classNamePrefix + (params.variant if params.variant else "outlined") %}
-  {%- set classes = [
-    componentClassName,
-    "ds-force-px" if params.forcePx,
-    "ds-loading" if params.loading,
-    variantClass,
-    classNamePrefix + "toggle" if isToggle,
-    classNamePrefix + "selected" if isToggle and params.selected,
-    classNamePrefix + params.size if params.size and params.size !== "default",
-    params.classNames if params.classNames
-  ] | join(" ") %}
-
-  {%- set loadingHtml %}
-    {{ Spinner({ size: "small", additionalClasses: "primary", forcePx: params.forcePx, attributes: { "aria-hidden": "true" } }) }}
-  {% endset %}
-
-  {%- if params.a11y and params.a11y.visuallyHidden %}
-    {% set visuallyHidden = VisuallyHidden({ text: params.a11y.visuallyHidden }) %}
-  {% endif %}
-
-  {%- if isToggle %}
-    <button type="button" role="switch" aria-checked="{{ "true" if params.selected else "false" }}" class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe }}>
-      {{- visuallyHidden | safe if visuallyHidden -}}
-      <span class="{{ componentClassName + '__off' }}" aria-hidden="true">{{ IconUse({ icon: params.iconName }) }}</span>
-      <span class="{{ componentClassName + '__on' }}"  aria-hidden="true">{{ IconUse({ icon: params.selectedIconName }) }}</span>
-      {{ loadingHtml | safe }}
-    </button>
-  {% else %}
-    {% if params.href %}
-      <a href="{{ params.href | default('#', true) }}" class="{{ classes }}" {{- attributes | safe }}>
-        {{- visuallyHidden | safe if visuallyHidden -}}
-        {{ IconUse({ icon: params.iconName, attributes: { "aria-hidden": "true" } }) }}
-        {{ loadingHtml | safe }}
-      </a>
-    {% else %}
-      <button type="button" class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe }}>
-        {{- visuallyHidden | safe if visuallyHidden -}}
-        {{ IconUse({ icon: params.iconName, attributes: { "aria-hidden": "true" } }) }}
-        {{ loadingHtml | safe }}
-      </button>
-    {% endif %}
-  {% endif %}
+{% macro IconButton(params) %}
+  {{ Button({
+    isIconBtn: true,
+    isToggle: params.isToggle,
+    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/icon-button.scss

@@ -1,141 +1,34 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
-@use "../icon-sprite/icon-sprite.scss";
-@use "../spinner/spinner.scss" as *;
+@use "../button/button.scss" as *;
 
-$ds-icon-btn__border-radius: 50%;
-$ds-btn-outlined__border-width: ds-metrics-border-width(x1);
+.ds-btn.ds-btn--icon-only {
+  border-radius: 50%;
 
-.ds-icon-btn {
-  --ds-icon-btn__padding: #{ds-spacing($ds-s-050)-$ds-btn-outlined__border-width};
-  --ds-icon-btn__icon-size: #{ds-px-to-rem(24px)};
-  --ds-icon-btn__background-color: transparent;
-  --ds-icon-btn__background-color-hover: #{$ds-color-component-primary-overlay};
-  --ds-icon-btn__background-color-active: #{$ds-color-component-primary-overlay-02};
-  --ds-icon-btn__border-color: transparent;
-  --ds-icon-btn__outline-color: #{$ds-color-border-focus-02};
-  --ds-icon-btn__color: #{$ds-color-icon-primary};
-
-  &--outlined {
-    --ds-icon-btn__background-color: #{$ds-color-component-secondary};
-    --ds-icon-btn__border-color: #{$ds-color-border-primary-02};
-    --ds-icon-btn__color: #{$ds-color-icon-primary};
-  }
-
-  &--elevated {
-    box-shadow: ds-shadow-get-box-shadow($ds-shadow-elevation-m);
-    --ds-icon-btn__background-color: #{$ds-color-component-secondary};
-    --ds-icon-btn__border-color: #{$ds-color-border-primary-02};
-    --ds-icon-btn__color: #{$ds-color-icon-primary};
-  }
-
-  &--on-media {
-    --ds-icon-btn__background-color: #{$ds-color-static-transparent-black};
-    --ds-icon-btn__color: #{$ds-color-static-white};
-    @include ds-hover() {
-      &:hover:not(.ds-loading)::before {
-        --ds-icon-btn__background-color-hover: #{$ds-color-static-transparent-white-10};
-      }
-    }
-    &:active:not(.ds-loading)::before {
-      --ds-icon-btn__background-color-active: $ds-color-static-transparent-white-10;
-    }
-    &:disabled:not(.ds-loading) {
-      color: $ds-color-static-white;
-      &::before {
-        background-color: transparent;
-      }
+  &.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;
     }
-    &:focus-visible {
-      --ds-icon-btn__outline-color: #{$ds-color-static-white};
-    }
-  }
-
-  &--outlined:disabled,
-  &--elevated:disabled,
-  &--on-media:disabled {
-    --ds-icon-btn__border-color: #{$ds-color-border-primary};
-  }
-
-  &.ds-force-px {
-    --ds-icon-btn__icon-size: 24px;
-  }
-
-  &.ds-icon-btn--small {
-    --ds-icon-btn__padding: #{2px - $ds-btn-outlined__border-width};
   }
 
-  &.ds-icon-btn--large {
-    --ds-icon-btn__padding: #{ds-spacing($ds-s-075)-$ds-btn-outlined__border-width};
-  }
-
-  cursor: pointer;
-  background-color: var(--ds-icon-btn__background-color);
-  color: var(--ds-icon-btn__color);
-  box-sizing: border-box;
-  border-radius: $ds-icon-btn__border-radius;
-  border: $ds-btn-outlined__border-width solid var(--ds-icon-btn__border-color);
-  margin: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  padding: var(--ds-icon-btn__padding);
-
-  span {
-    pointer-events: none;
-  }
-
-  &::before {
-    content: "";
-    border-radius: inherit;
-    pointer-events: none;
-    position: absolute;
-    top: -$ds-btn-outlined__border-width;
-    left: -$ds-btn-outlined__border-width;
-    bottom: -$ds-btn-outlined__border-width;
-    right: -$ds-btn-outlined__border-width;
-  }
-
-  @include min-click-surface();
-
-  .ds-icon {
-    position: relative;
-    display: flex;
-    height: var(--ds-icon-btn__icon-size);
-    width: var(--ds-icon-btn__icon-size);
-    margin: 0;
-    svg {
-      fill: currentColor;
+  &.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;
     }
   }
 
-  @include ds-hover() {
-    &:hover:not(.ds-loading)::before {
-      background-color: var(--ds-icon-btn__background-color-hover);
+  &.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;
     }
   }
-  &:active:not(.ds-loading)::before {
-    background-color: var(--ds-icon-btn__background-color-active);
-  }
 
-  &:focus-visible {
-    outline: ds-metrics-border-width(x2) solid var(--ds-icon-btn__outline-color);
-    outline-offset: 2px;
-  }
-  &:disabled:not(.ds-loading) {
-    cursor: not-allowed;
-    color: $ds-color-icon-disabled;
-    outline: none;
-    &::before {
-      background-color: transparent;
+  &.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;
     }
   }
-
-  @at-root a#{&} {
-    box-sizing: border-box;
-    text-align: center;
-    text-decoration: none;
-  }
-
-  @include ds-loading();
 }

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

@@ -12,10 +12,11 @@
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |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 |v
+|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 | outlined, transparent | outlined | Design variant |
-|size| String | no | default, small, large | default | |
+|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 | |
 |a11y.visuallyHidden | Object | no | | | Ex. a11y: { visuallyHidden: "Dela på TikTok" } |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
@@ -32,7 +33,7 @@ These are copy paste friendly examples to quickliy get started using a component
 {% from '@bonniernews/dn-design-system-web/components/icon-button-toggle/icon-button-toggle.njk' import IconButtonToggle %}
 
 {{ IconButtonToggle({
-  variant: 'outlined',
+  variant: 'primary',
   size: 'default',
   iconName: 'bookmarked',
   selectedIconName: 'bookmark-fill'
@@ -47,7 +48,7 @@ These are copy paste friendly examples to quickliy get started using a component
 ### Javascript
 
 ```javascript
-import dsIconButtonToggle from '@bonniernews/dn-design-system-web/components/icon-button-toggle/icon-button-toggle.js'
-const toggleElements = Array.from(document.getElementsByClassName("ds-icon-btn--toggle"));
-dsIconButtonToggle(toggleElements);
+import dsButtonToggle from '@bonniernews/dn-design-system-web/components/button/button.js'
+const toggleElements = Array.from(document.getElementsByClassName("ds-btn--toggle"));
+dsButtonToggle(toggleElements);
 ```

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

@@ -1,5 +1,19 @@
 {% from '@bonniernews/dn-design-system-web/components/icon-button/icon-button.njk' import IconButton %}
 
 {% macro IconButtonToggle(params) %}
-  {{ IconButton(params, true) }}
+  {{ 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,
+    a11y: params.a11y
+  }) }}
 {% endmacro %}

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

@@ -1,17 +1 @@
-@use "../../foundations/helpers/forward.helpers.scss" as *;
-@use "../icon-button/icon-button.scss";
-
-.ds-icon-btn--toggle {
-  .ds-icon-btn__on {
-    display: none;
-  }
-
-  &.ds-icon-btn--selected {
-    .ds-icon-btn__on {
-      display: flex;
-    }
-    .ds-icon-btn__off {
-      display: none;
-    }
-  }
-}
+@use "../icon-button/icon-button.scss" as *;

package/components/list-item/list-item.js

@@ -1,4 +1,4 @@
-import {dsButtonToggle} from '@bonniernews/dn-design-system-web/components/button-toggle/button-toggle';
+import {dsButtonToggle} from '@bonniernews/dn-design-system-web/components/button/button';
 
 export {
   dsListItem,
@@ -23,7 +23,7 @@ function dsListItemAccordion(accordionEl) {
 }
 
 function dsListItemToggle(toggleEl) {
-  const toggleElements = Array.from(toggleEl.getElementsByClassName("ds-btn-toggle"));
+  const toggleElements = Array.from(toggleEl.getElementsByClassName("ds-btn--toggle"));
   dsButtonToggle(toggleElements);
 }