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

package/components/blocked-content/blocked-content.js

@@ -15,7 +15,7 @@ function dsBlockedContent(params) {
           <h2 class="ds-blocked-content__title">Hoppsan, här saknas något</h2>
           <div class="ds-blocked-content__body">Innehållet ${ params.vendor ? `från ${params.vendor}` : '' } kunde inte visas på grund av dina val i kakinställningarna.</div>
         </div>
-        <button type="button" class="ds-btn ds-btn--secondary ds-btn--default ds-btn--medium ds-btn--full-width">
+        <button type="button" class="ds-btn ds-btn--secondaryFilled ds-btn--default ds-btn--md ds-btn--full-width">
           <div class="ds-btn__inner">
             <span>Hantera kakor</span>
             <div class="ds-spinner ds-spinner--small ds-spinner--primary">

package/components/blocked-content/blocked-content.njk

@@ -23,8 +23,8 @@
       </div>
       {{ Button({
           text: 'Hantera kakor',
-          variant: 'secondary',
-          size: 'medium',
+          variant: 'secondaryFilled',
+          size: 'md',
           classNames: '',
           fullWidth: true,
           forcePx: params.forcePx,

package/components/buddy-menu/buddy-menu.njk

@@ -1,6 +1,5 @@
 {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 {% from '@bonniernews/dn-design-system-web/components/list-item/list-item.njk' import ListItem %}
-{% 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 BuddyMenu(params) %}
@@ -18,12 +17,13 @@
     <div class="{{ componentClassName + '__inner'}}">
       <div class="ds-buddy-menu__scrollable-container">
         <div class="ds-buddy-menu__content">
-          {{ IconButton({
+          {{ Button({
             variant: "transparent",
-            size: "small",
+            size: "sm",
             iconName: "close",
             classNames: "ds-buddy-menu__close",
-            forcePx: params.forcePx
+            forcePx: params.forcePx,
+            isIconButton: true
           })}}
 
           <div class="ds-buddy-menu__header">
@@ -46,7 +46,7 @@
 
                 {{ Button({
                   text: "Mitt konto",
-                  variant: "primary",
+                  variant: "primaryBlack",
                   fullWidth: true,
                   href: params.myAccountUrl | default("#"),
                   attributes: { "data-hide-promo" : "" },

package/components/buddy-menu/buddy-menu.scss

@@ -1,6 +1,5 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
 @use "../button/button.scss" as *;
-@use "../icon-button/icon-button.scss" as *;
 @use "../list-item/list-item.scss" as *;
 
 :root {

package/components/button/README.md

@@ -9,27 +9,25 @@ Button
 
 | Name | Description | Default |
 |:--- | :--- | :--- |
-| text\* | string | \- |
+| 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" |
 | 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" |
+| size | "sm", "md", "lg", "xl" | "md" |
 | 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" | \- |
-| variant | Design variant<br />"brand", "secondary", "primary", "staticWhite" | "primary" |
+| text | string | \- |
 | fullWidth | Button will be full width on both desktop and mobile<br />boolean | false |
 | mobileFullWidth | Button will only full width on mobile<br />boolean | false |
 | href | If href is set the button will be rendered as an a-tag<br />string | \- |
 | type | "button", "submit" | "button" |
-| emphasis | "default", "elevated", "outline", "transparent" | "default" |
-| rounded | Button will be rounded<br />boolean | false |
 | iconPosition | "right", "none", "left" | "none" |
 
 ```jsx
 <Button
-  emphasis="default"
-  size="medium"
+  size="md"
   text="Primary"
   variant="primary"
 />

package/components/button/button-types.ts

@@ -1,15 +1,20 @@
 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
   /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
   attributes?: { [key: string]: string }
   /** Fixed pixel value is used for typography to prevent scaling based on html font-size */
   forcePx?: boolean
-  size?: 'small' | 'medium' | 'large' | 'xlarge'
-  loading?: boolean
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+  loading?: boolean,
+  isIconButton?: boolean
 }
 
 export interface AllyProps {
@@ -17,23 +22,15 @@ 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 */
   fullWidth?: boolean
   /** Button will only full width on mobile */
   mobileFullWidth?: 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
   selected?: boolean
   isToggle?: boolean
@@ -60,28 +57,40 @@ export interface ToggleWrapperProps {
   offChild?: any
 }
 
-export interface ButtonProps
+export interface ButtonStandardProps
   extends ButtonSharedProps,
     Pick<
       ButtonBaseProps,
-      'text' | 'variant' | 'emphasis' | 'rounded' | 'fullWidth' | 'mobileFullWidth' | 'iconPosition' | 'iconName' | 'type' | 'href'
+      'text' | 'fullWidth' | 'mobileFullWidth' | 'iconPosition' | 'type' | 'href'
     > {
-      text: string // set as required
+      text: string
     }
 
-export interface ButtonToggleProps
+    export interface ButtonIconProps
   extends ButtonSharedProps,
-    Pick<ButtonBaseProps, 'selected' | 'text' | 'selectedText' | 'fullWidth' | 'mobileFullWidth'> {
-      selectedText: string // set as required
-      variant?: 'primary' | 'secondary' | 'brand'
+    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
     }
-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 interface IconButtonToggleProps extends ButtonSharedProps, Pick<ButtonBaseProps, 'iconName' | 'emphasis' | 'selectedIconName'> {
-  selected?: boolean;
-  variant?: 'primary' | 'secondary' | 'brand'
-}
+  export type ButtonToggleProps =
+    | ({ isIconButton?: false } & ButtonToggleStandardProps)
+    | ({ isIconButton: true } & ButtonToggleIconProps)

package/components/button/button.njk

@@ -26,15 +26,10 @@
   {%- set attributes = getAttributes(params.attributes) %}
   {%- set ariaLabel = 'aria-label="' + text + '"' if params.text and not params.attributes["aria-label"] else "" %}
   {%- set buttonVariant = params.variant | default("primary") %}
-  {%- set emphasis = params.emphasis | default("default") %}
 
-  {% if params.variant == "staticWhite" %}
-    {% if emphasis == "transparent" or emphasis == "outline" %}
-      {%- set spinnerVariant = "staticWhite" %}
-    {% else %}
+  {% if params.variant == "staticWhite" or params.variant == "transparent" %}
       {%- set spinnerVariant = "staticBlack" %}
-    {% endif %}
-  {% elif emphasis == "transparent" or emphasis == "outline" or params.variant == "secondary" %}
+  {% elif params.variant == "secondaryFilled" or params.variant == "secondaryOutline" %}
     {%- set spinnerVariant = "primary" %}
   {% else %}
     {%- set spinnerVariant = "secondary" %}
@@ -44,21 +39,19 @@
     {{ Spinner({ size: 'small', variant: spinnerVariant, forcePx: params.forcePx, attributes: { "aria-hidden": "true" } }) }}
   {% endset %}
 
-  {%- if params.iconName and ((params.iconPosition and params.iconPosition != "none") or params.isIconBtn == true) %}
+  {%- if params.iconName and ((params.iconPosition and params.iconPosition != "none") or params.isIconButton == true) %}
     {% set iconSvg =  IconUse({ icon: params.iconName, attributes: { "aria-hidden": "true" } }) %}
   {% endif %}
 
   {%- set classes = [
     componentClassName,
     classNamePrefix + buttonVariant,
-    classNamePrefix + emphasis,
     classNamePrefix + "selected" if params.selected,
-    classNamePrefix + params.size if params.size else classNamePrefix + "large",
+    classNamePrefix + params.size if params.size else classNamePrefix + "lg",
     classNamePrefix + "full-width" if params.fullWidth,
     classNamePrefix + "mobile-full-width" if params.mobile and params.mobile.fullWidth,
-    classNamePrefix + "icon-" + params.iconPosition if iconSvg and not params.isIconBtn,
-    classNamePrefix + "icon-only" if params.isIconBtn,
-    classNamePrefix + "rounded" if params.rounded,
+    classNamePrefix + "icon-" + params.iconPosition if iconSvg and not params.isIconButton,
+    classNamePrefix + "icon-only" if params.isIconButton,
     classNamePrefix + "toggle" if params.isToggle,
     classNamePrefix + "selected" if params.isToggle and params.selected,
     "ds-loading" if params.loading,
@@ -68,7 +61,7 @@
 
   {%- if params.isToggle %}
     {% call ToggleWrapper({ ariaLabel: ariaLabel, selected: params.selected, classes: classes, attributes: attributes, disabled: params.disabled, loadingHtml: loadingHtml }) %}
-      {%- if params.isIconBtn %}
+      {%- if params.isIconButton %}
         <span class="ds-btn__off" aria-hidden="true">{{ IconUse({ icon: params.iconName }) }}</span>
         <span class="ds-btn__on"  aria-hidden="true">{{ IconUse({ icon: params.selectedIconName }) }}</span>
       {% else %}
@@ -82,7 +75,7 @@
     {% if params.href %}
       {% set loadingHtml = null %}
     {% endif %}
-    {% set buttonParams = { isIconButton: params.isIconBtn, a11y: params.a11y, text: text, iconSvg: iconSvg, loadingHtml: loadingHtml , attributes: params.attributes } %}
+    {% set buttonParams = { isIconButton: params.isIconButton, a11y: params.a11y, text: text, iconSvg: iconSvg, loadingHtml: loadingHtml , attributes: params.attributes } %}
     {%- if params.href %}
       <a href="{{ params.href | default('#', true) }}" {{ ariaLabel | safe }} class="{{ classes }}" {{- attributes | safe }}>
         {{ InnerButton(buttonParams) }}

package/components/button/button.scss

@@ -19,7 +19,7 @@ $ds-btn-outlined__border-width: ds-border-width(xxs);
 
   cursor: pointer;
   border: $ds-btn-outlined__border-width solid var(--ds-btn__border-color);
-  border-radius: ds-border-radius(012);
+  border-radius: 100px;
   position: relative;
   background-color: var(--ds-btn__background-color);
   color: var(--ds-btn__color);
@@ -32,66 +32,35 @@ $ds-btn-outlined__border-width: ds-border-width(xxs);
   }
 
   &.ds-btn--primary {
-    &.ds-btn--default,
-    &.ds-btn--elevated {
-      --ds-btn__background-color: #{$ds-color-surface-primaryinvert};
-      --ds-btn__color: #{$ds-color-text-primaryinvert};
-    }
-    &.ds-btn--outline {
-      --ds-btn__border-color: #{$ds-color-border-primary-strongest};
-      --ds-btn__color: #{$ds-color-text-primary};
-    }
-    &.ds-btn--transparent {
-      --ds-btn__color: #{$ds-color-text-primary};
-    }
+    --ds-btn__background-color: #{$ds-color-brand-600};
+    --ds-btn__color: #{$ds-color-text-on-brand};
   }
 
-  &.ds-btn--secondary {
-    &.ds-btn--default,
-    &.ds-btn--elevated {
-      --ds-btn__background-color: #{$ds-color-surface-primary-raised-strong};
-      --ds-btn__color: #{$ds-color-text-primary};
-    }
-    &.ds-btn--outline {
-      --ds-btn__border-color: #{$ds-color-border-primary-strong};
-      --ds-btn__color: #{$ds-color-text-primary};
-    }
-    &.ds-btn--transparent {
-      --ds-btn__color: #{$ds-color-text-primary};
-    }
+  &.ds-btn--primaryBlack {
+    --ds-btn__background-color: #{$ds-color-surface-primaryinvert};
+    --ds-btn__color: #{$ds-color-text-primaryinvert};
   }
 
-  &.ds-btn--brand {
-    --ds-btn__outline-color: #{$ds-color-border-brand};
-    &.ds-btn--default,
-    &.ds-btn--elevated {
-      --ds-btn__background-color: #{$ds-color-surface-brand};
-      --ds-btn__color: #{$ds-color-neutral-white};
-    }
-    &.ds-btn--outline {
-      --ds-btn__border-color: #{$ds-color-surface-brand};
-      --ds-btn__color: #{$ds-color-text-brand};
-    }
-    &.ds-btn--transparent {
-      --ds-btn__color: #{$ds-color-text-brand};
-    }
+  &.ds-btn--secondaryFilled {
+    --ds-btn__background-color: #{$ds-color-surface-primary-raised-strong};
+    --ds-btn__color: #{$ds-color-text-primary};
+  }
+
+  &.ds-btn--secondaryOutline {
+    --ds-btn__background-color: transparent;
+    --ds-btn__color: #{$ds-color-text-primary};
+    --ds-btn__border-color: #{$ds-color-border-primary-strong};
   }
 
   &.ds-btn--staticWhite {
     --ds-btn__outline-color: #{$ds-color-neutral-white};
-    &.ds-btn--default,
-    &.ds-btn--elevated {
-      --ds-btn__background-color: #{$ds-color-neutral-white};
-      --ds-btn__color: #{$ds-color-neutral-black};
-    }
-    &.ds-btn--outline {
-      --ds-btn__background-color: transparent;
-      --ds-btn__border-color: #{$ds-color-neutral-white};
-      --ds-btn__color: #{$ds-color-neutral-white};
-    }
-    &.ds-btn--transparent {
-      --ds-btn__color: #{$ds-color-neutral-white};
-    }
+    --ds-btn__background-color: #{$ds-color-neutral-white};
+    --ds-btn__color: #{$ds-color-neutral-black};
+  }
+
+  &.ds-btn--transparent {
+    --ds-btn__color: #{$ds-color-text-primary};
+    --ds-btn__background-color: transparent;
   }
 
   &.ds-btn--toggle.ds-btn--selected:not(.ds-btn--icon-only) {
@@ -100,83 +69,87 @@ $ds-btn-outlined__border-width: ds-border-width(xxs);
     --ds-btn__border-color: #{$ds-color-border-primary-strongest};
     --ds-btn__outline-color: #{$ds-color-border-primary-strongest};
   }
-  &.ds-btn--transparent {
-    --ds-btn__background-color: transparent;
-  }
-
-  &.ds-btn--rounded {
-    border-radius: 100px;
-  }
 
-  &.ds-btn--elevated {
-    box-shadow: ds-shadow-get-box-shadow($ds-shadow-elevation-md);
-  }
-
-  &.ds-btn--small {
+  &.ds-btn--sm {
     --ds-btn__icon-size: #{ds-px-to-rem(20px)};
     --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-050), true)};
+    --ds-btn__icon-only-padding: #{ds-px-to-rem(5px)};
     padding: _btn-brdr(ds-spacing($ds-s-025), true) _btn-brdr(ds-spacing($ds-s-075), true);
-    @include ds-typography($variable: $ds-typography-functional-body-sm, $fontWeight: $ds-fontweight-semibold);
+    @include ds-typography($variable: $ds-typography-functional-body-md, $fontWeight: $ds-fontweight-medium);
     @at-root .ds-force-px#{&} {
       --ds-btn__icon-size: 20px;
       --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-050))};
+      --ds-btn__icon-only-padding: 5px;
       padding: _btn-brdr(ds-spacing($ds-s-025)) _btn-brdr(ds-spacing($ds-s-075));
       @include ds-typography(
-        $variable: $ds-typography-functional-body-sm,
-        $fontWeight: $ds-fontweight-semibold,
+        $variable: $ds-typography-functional-body-md,
+        $fontWeight: $ds-fontweight-medium,
         $forcePx: true
       );
     }
   }
 
-  &.ds-btn--medium {
+  &.ds-btn--md {
     --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-100), true)};
+    --ds-btn__icon-only-padding: #{_btn-brdr(ds-spacing($ds-s-050), true)};
     padding: _btn-brdr(ds-spacing($ds-s-050), true) _btn-brdr(ds-spacing($ds-s-125), true);
-    @include ds-typography($variable: $ds-typography-functional-body-md, $fontWeight: $ds-fontweight-semibold);
+    @include ds-typography($variable: $ds-typography-functional-body-md, $fontWeight: $ds-fontweight-medium);
     @at-root .ds-force-px#{&} {
       --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-100))};
+      --ds-btn__icon-only-padding: #{_btn-brdr(ds-spacing($ds-s-050))};
       padding: _btn-brdr(ds-spacing($ds-s-050)) _btn-brdr(ds-spacing($ds-s-125));
       @include ds-typography(
         $variable: $ds-typography-functional-body-md,
-        $fontWeight: $ds-fontweight-semibold,
+        $fontWeight: $ds-fontweight-medium,
         $forcePx: true
       );
     }
   }
 
-  &.ds-btn--large {
+  &.ds-btn--lg {
     --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-125), true)};
+    --ds-btn__icon-only-padding: #{_btn-brdr(ds-spacing($ds-s-075), true)};
     padding: _btn-brdr(ds-spacing($ds-s-075), true) _btn-brdr(ds-spacing($ds-s-150), true);
-    @include ds-typography($variable: $ds-typography-functional-body-md, $fontWeight: $ds-fontweight-semibold);
+    @include ds-typography($variable: $ds-typography-functional-body-md, $fontWeight: $ds-fontweight-medium);
 
     @at-root .ds-force-px#{&} {
       --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-125))};
+      --ds-btn__icon-only-padding: #{_btn-brdr(ds-spacing($ds-s-075))};
       padding: _btn-brdr(ds-spacing($ds-s-075)) _btn-brdr(ds-spacing($ds-s-150));
       @include ds-typography(
         $variable: $ds-typography-functional-body-md,
-        $fontWeight: $ds-fontweight-semibold,
+        $fontWeight: $ds-fontweight-medium,
         $forcePx: true
       );
     }
   }
 
-  &.ds-btn--xlarge {
-    --ds-btn__icon-size: #{ds-px-to-rem(32px)};
+  &.ds-btn--xl {
+    --ds-btn__icon-size: #{ds-px-to-rem(24px)};
     --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-200), true) - ds-px-to-rem(4px)};
-    padding: _btn-brdr(ds-spacing($ds-s-075), true) _btn-brdr(ds-spacing($ds-s-200), true);
-    @include ds-typography($variable: $ds-typography-functional-body-lg, $fontWeight: $ds-fontweight-semibold);
+    --ds-btn__icon-only-padding: #{_btn-brdr(ds-spacing($ds-s-100), true)};
+    padding: _btn-brdr(ds-spacing($ds-s-100), true) _btn-brdr(ds-spacing($ds-s-200), true);
+    @include ds-typography($variable: $ds-typography-functional-body-md, $fontWeight: $ds-fontweight-medium);
     @at-root .ds-force-px#{&} {
-      --ds-btn__icon-size: 32px;
+      --ds-btn__icon-size: 24px;
       --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-200)) - 4px};
-      padding: _btn-brdr(ds-spacing($ds-s-075)) _btn-brdr(ds-spacing($ds-s-200));
+      --ds-btn__icon-only-padding: #{_btn-brdr(ds-spacing($ds-s-200))};
+      padding: _btn-brdr(ds-spacing($ds-s-100)) _btn-brdr(ds-spacing($ds-s-200));
       @include ds-typography(
-        $variable: $ds-typography-functional-body-lg,
-        $fontWeight: $ds-fontweight-semibold,
+        $variable: $ds-typography-functional-body-md,
+        $fontWeight: $ds-fontweight-medium,
         $forcePx: true
       );
     }
   }
 
+  &.ds-btn--icon-only {
+    padding: var(--ds-btn__icon-only-padding);
+    @at-root .ds-force-px#{&} {
+      padding: var(--ds-btn__icon-only-padding);
+    }
+  }
+
   span {
     pointer-events: none;
   }
@@ -267,7 +240,7 @@ $ds-btn-outlined__border-width: ds-border-width(xxs);
       margin: ds-spacing(0 0 0 $ds-s-050);
     }
   }
-  &.ds-btn--small .ds-icon {
+  &.ds-btn--sm .ds-icon {
     margin: ds-spacing(0 0 0 $ds-s-025, rem);
     @at-root .ds-force-px#{&} {
       margin: ds-spacing(0 0 0 $ds-s-025);
@@ -281,7 +254,7 @@ $ds-btn-outlined__border-width: ds-border-width(xxs);
   .ds-icon {
     margin: ds-spacing(0 $ds-s-050 0 0, rem);
   }
-  &.ds-btn--small .ds-icon {
+  &.ds-btn--sm .ds-icon {
     margin: ds-spacing(0 $ds-s-025 0 0, rem);
   }
   &.ds-force-px {
@@ -289,7 +262,7 @@ $ds-btn-outlined__border-width: ds-border-width(xxs);
     .ds-icon {
       margin: ds-spacing(0 $ds-s-050 0 0);
     }
-    &.ds-btn--small .ds-icon {
+    &.ds-btn--sm .ds-icon {
       margin: ds-spacing(0 $ds-s-025 0 0);
     }
   }

package/components/button-toggle/README.md

@@ -16,24 +16,27 @@ The component will not include styling by itself. Make sure to include the right
 
 | Name | Description | Default |
 |:--- | :--- | :--- |
-| selectedText\* | string | \- |
-| variant | "brand", "secondary", "primary" | "primary" |
+| isIconButton | boolean | false |
+| selectedText | string | \- |
+| variant | Design variant<br />"primary", "staticWhite", "primaryBlack", "secondaryFilled", "secondaryOutline", "transparent" | "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 | "large", "small", "medium", "xlarge" | "medium" |
+| size | "sm", "md", "lg", "xl" | "md" |
 | 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 |
 | mobileFullWidth | Button will only full width on mobile<br />boolean | false |
 
 ```jsx
 <ButtonToggle
   selectedText="Följer"
-  size="large"
+  size="lg"
   text="Följ"
-  variant="brand"
+  variant="primary"
 />
 ```

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

@@ -12,6 +12,9 @@
     size: params.size,
     fullWidth: params.fullWidth,
     mobile: params.mobile,
+    isIconButton: params.isIconButton,
+    iconName: params.iconName,
+    selectedIconName: params.selectedIconName,
     loading: params.loading,
     forcePx: params.forcePx,
     classNames: params.classNames,

package/components/divider/README.md

@@ -8,7 +8,7 @@ The component will not include styling by itself. Make sure to include the right
 
 | Name | Description | Default |
 |:--- | :--- | :--- |
-| variant | "medium", "soft", "hard" | "soft" |
+| variant | "soft", "medium", "hard" | "soft" |
 | classNames | string | \- |
 | attributes | object | \- |
 

package/components/empty-state/empty-state.njk

@@ -35,7 +35,7 @@
           {% if params.brandButton %}
             {{ Button({
               text: params.brandButton.text,
-              variant: "brand",
+              variant: "primary",
               href: params.brandButton.href,
               classNames: params.brandButton.classNames,
               attributes: params.brandButton.attributes,
@@ -47,8 +47,7 @@
           {% if params.primaryButton %}
             {{ Button({
               text: params.primaryButton.text,
-              variant: "primary",
-              emphasis: "outline",
+              variant: "secondaryOutline",
               href: params.primaryButton.href,
               classNames: params.primaryButton.classNames,
               attributes: params.primaryButton.attributes,

package/components/factbox/factbox.njk

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

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"}