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

package/CHANGELOG.md

@@ -4,6 +4,159 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [15.0.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.3.11...@bonniernews/dn-design-system-web@15.0.0) (2024-03-26)
+
+
+### ⚠ BREAKING CHANGES
+
+* **web:** some button properties are deprecated
+
+### Features
+
+* **web:** refactor buttons ([#1238](https://github.com/BonnierNews/dn-design-system/issues/1238)) ([d9ee881](https://github.com/BonnierNews/dn-design-system/commit/d9ee881010c3e14388fc648ced552cec9a0a4c36))
+
+
+### Bug Fixes
+
+* **app:** adjust for ÅÄÖ and small lineheight when creating styles ([#1260](https://github.com/BonnierNews/dn-design-system/issues/1260)) ([61893ce](https://github.com/BonnierNews/dn-design-system/commit/61893ce7f06546e7bbadf367fdddb33fb6ab6e98))
+* **app:** remove paddingTop and negative marginTop in TextInput ([#1262](https://github.com/BonnierNews/dn-design-system/issues/1262)) ([b602c06](https://github.com/BonnierNews/dn-design-system/commit/b602c066fdd470282558cfee91eb5c0135b0fceb))
+
+
+### Maintenance
+
+* prerelease packages ([9cb4286](https://github.com/BonnierNews/dn-design-system/commit/9cb4286bea19b21e9c82bfcaa479075fdb33d3f3))
+* prerelease packages ([12eb081](https://github.com/BonnierNews/dn-design-system/commit/12eb08160c5f4577f51981dbb24b0ad4ad1d4f66))
+
+## [14.3.11](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.3.10...@bonniernews/dn-design-system-web@14.3.11) (2024-03-21)
+
+
+### Bug Fixes
+
+* **web:** add arrow icon to image group header ([#1258](https://github.com/BonnierNews/dn-design-system/issues/1258)) ([4237649](https://github.com/BonnierNews/dn-design-system/commit/423764937fd44e277e57d03f0683bd900b284b31))
+## [14.4.0-beta.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.3.10...@bonniernews/dn-design-system-web@14.4.0-beta.0) (2024-03-20)
+
+
+### Features
+
+* **web:** refactor buttons ([e3124c6](https://github.com/BonnierNews/dn-design-system/commit/e3124c686fbe6b370eea0cd0acc8bebda926b29f))
+
+## [14.3.10](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.3.9...@bonniernews/dn-design-system-web@14.3.10) (2024-03-20)
+
+
+### Maintenance
+
+* **web:** upgrade to storybook 8.0.0 add UXD-readme ([#1194](https://github.com/BonnierNews/dn-design-system/issues/1194)) ([59adc00](https://github.com/BonnierNews/dn-design-system/commit/59adc00f9d797e0e999250f1aa92d68626c8091c))
+
+## [14.3.9](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.3.8...@bonniernews/dn-design-system-web@14.3.9) (2024-03-20)
+
+
+### Bug Fixes
+
+* **web:** minor fix for tooltip js ([#1257](https://github.com/BonnierNews/dn-design-system/issues/1257)) ([db6ddcf](https://github.com/BonnierNews/dn-design-system/commit/db6ddcf737188bef7b9fd2085e9de80d5f3418b9))
+
+## [14.3.8](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.3.7...@bonniernews/dn-design-system-web@14.3.8) (2024-03-20)
+
+
+### Bug Fixes
+
+* **web:** export tooltip close function and add a toggle function ([#1253](https://github.com/BonnierNews/dn-design-system/issues/1253)) ([c032cbc](https://github.com/BonnierNews/dn-design-system/commit/c032cbc60f7084027d4965af1af0d4f193200ec6))
+
+## [14.3.7](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.3.6...@bonniernews/dn-design-system-web@14.3.7) (2024-03-20)
+
+
+### Bug Fixes
+
+* **web:** correct static color for pictogram ([#1256](https://github.com/BonnierNews/dn-design-system/issues/1256)) ([3862b3d](https://github.com/BonnierNews/dn-design-system/commit/3862b3daf8444881128b351eaaee9604cec0a89f))
+
+## [14.3.6](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.3.5...@bonniernews/dn-design-system-web@14.3.6) (2024-03-19)
+
+
+### Bug Fixes
+
+* **web:** semibold text on image list item ([#1251](https://github.com/BonnierNews/dn-design-system/issues/1251)) ([e623514](https://github.com/BonnierNews/dn-design-system/commit/e623514d5761e60a4d853737dcc7cada0d7dffce))
+
+## [14.3.5](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.3.4...@bonniernews/dn-design-system-web@14.3.5) (2024-03-15)
+
+
+### Maintenance
+
+* **foundations:** update tokens from Figma ([#1247](https://github.com/BonnierNews/dn-design-system/issues/1247)) ([13c450c](https://github.com/BonnierNews/dn-design-system/commit/13c450c200d518f199ad4190d62fce10bf234228))
+* prerelease packages ([51094f1](https://github.com/BonnierNews/dn-design-system/commit/51094f148b5113464f5ea4bf2adc7ef6a6aeda91))
+
+## [14.3.4](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.3.3...@bonniernews/dn-design-system-web@14.3.4) (2024-03-15)
+
+
+### Bug Fixes
+
+* **web:** move max-height styling to img element ([#1248](https://github.com/BonnierNews/dn-design-system/issues/1248)) ([811da42](https://github.com/BonnierNews/dn-design-system/commit/811da4268bacfbd2753ea01ac3836656ef8594d0))
+
+## [14.3.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.3.2...@bonniernews/dn-design-system-web@14.3.3) (2024-03-14)
+
+
+### Bug Fixes
+
+* **web:** allow href attribute for imageListItem ([#1245](https://github.com/BonnierNews/dn-design-system/issues/1245)) ([4f8f6d1](https://github.com/BonnierNews/dn-design-system/commit/4f8f6d1092dcd3126498fcc5c4f90987dfd416c9))
+
+## [14.3.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.3.1...@bonniernews/dn-design-system-web@14.3.2) (2024-03-14)
+
+
+### Bug Fixes
+
+* **web:** pass vignette icon markup to teaser package ([#1244](https://github.com/BonnierNews/dn-design-system/issues/1244)) ([e206d25](https://github.com/BonnierNews/dn-design-system/commit/e206d25989a09f686caca515b5ff284befd8a80c))
+
+
+### Maintenance
+
+* adjust list item spacing ([#1243](https://github.com/BonnierNews/dn-design-system/issues/1243)) ([1235245](https://github.com/BonnierNews/dn-design-system/commit/123524541b75e0eab2fd449dd6764f916718dfe9))
+* prerelease packages ([5fc1a71](https://github.com/BonnierNews/dn-design-system/commit/5fc1a718158f263abd7b4b9baf42b8f60b044eed))
+
+## [14.3.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.3.0...@bonniernews/dn-design-system-web@14.3.1) (2024-03-13)
+
+
+### Maintenance
+
+* **web:** use new typo for podd components ([#1239](https://github.com/BonnierNews/dn-design-system/issues/1239)) ([c0a172e](https://github.com/BonnierNews/dn-design-system/commit/c0a172e69d429d19f3489e7a7a716d114bf7051e))
+
+## [14.3.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.2.1...@bonniernews/dn-design-system-web@14.3.0) (2024-03-13)
+
+
+### Features
+
+* **web:** support for images in list item ([#1240](https://github.com/BonnierNews/dn-design-system/issues/1240)) ([0b83b22](https://github.com/BonnierNews/dn-design-system/commit/0b83b22ef2f843e63a127db7e4324d7d077c9ccb))
+
+
+### Bug Fixes
+
+* **app:** better flex in BaseListItem ([#1241](https://github.com/BonnierNews/dn-design-system/issues/1241)) ([12f7229](https://github.com/BonnierNews/dn-design-system/commit/12f72296fe2ae6b5c73273b9449d92b85f07b335))
+
+
+### Maintenance
+
+* prerelease packages ([114a615](https://github.com/BonnierNews/dn-design-system/commit/114a615923ab90db49adff9c6a9ce868d1b7d2f2))
+
+## [14.2.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.2.0...@bonniernews/dn-design-system-web@14.2.1) (2024-03-12)
+
+## [14.2.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.1.0...@bonniernews/dn-design-system-web@14.2.0) (2024-03-12)
+
+
+### Features
+
+* **web:** tooltip ([#1210](https://github.com/BonnierNews/dn-design-system/issues/1210)) ([0f68d20](https://github.com/BonnierNews/dn-design-system/commit/0f68d20d9d950b42af3931f33b61d6d7260dec7d))
+
+## [14.1.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.0.4...@bonniernews/dn-design-system-web@14.1.0) (2024-03-11)
+
+
+### Features
+
+* **app:** create ImageListItem and add font weight prop to all list items ([#1234](https://github.com/BonnierNews/dn-design-system/issues/1234)) ([73e06e9](https://github.com/BonnierNews/dn-design-system/commit/73e06e9df30f2bdb1677dd4bde015ddea9ddb185))
+* **web:** support for images in group header ([#1235](https://github.com/BonnierNews/dn-design-system/issues/1235)) ([f4148dc](https://github.com/BonnierNews/dn-design-system/commit/f4148dc90b104326cd53e72f930510393bb533a6))
+
+
+### Maintenance
+
+* prerelease packages ([2a8954c](https://github.com/BonnierNews/dn-design-system/commit/2a8954c0cce43dfc53d0b5617c0d41c6ae2ba94b))
+
+
 ## [15.0.0-beta.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.0.4...@bonniernews/dn-design-system-web@15.0.0-beta.0) (2024-03-11)
 
 

package/components/button/README-UXD.md

@@ -0,0 +1,40 @@
+# Standard button
+
+Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.
+
+
+### Anatomy
+
+1. **Label:** The text displayed on the button, indicating its function.
+2. **Icon** Iconography that enhances the function.
+3. **Background:** The background color or style that defines the button's appearance.
+4. **Border:** The outline surrounding the button, providing visual separation from surrounding elements.
+5. **Shape** The standard shape is rectangular but the component also supports a rounded format.
+
+
+## Variants
+
+| Variant   | How to use                                                                              |
+| --------- | ---------------------------------------------------------------------------------------------------- |
+| [Brand](#brand)   | Extra high emphasis button used for actions that are extra important for the user flow and conversion. I.e. ”Logga in” |
+| [Primary](#primary)    | High emphasis button used to attract attention to the most important task of the layout, typically the next step in the user flow. I.e. ”Nästa fråga” in a quiz.    |
+| [Secondary](#secondary)| Medium emphasis button used for alternative non-primary actions. I.e. ”Alla nyheter” in a list of news.   |
+| [Outline](#primary%20outline)  | Low emphasis Button used for less important actions. Usually used in combination with a primary or brand Button. |
+
+
+## Usage
+
+Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.
+
+
+### Dos
+
+- **Use Primary Buttons for Key Actions:** Employ primary buttons for primary actions within a given context, guiding user focus towards important interactions.
+- **Provide Clear Labeling:** Ensure button labels are concise, descriptive, and indicative of the action they perform, enhancing usability.
+- **Maintain Visual Hierarchy:** Utilize secondary and outline buttons to distinguish lesser actions or provide alternative choices, maintaining a clear visual hierarchy.
+
+### Don'ts
+
+- **Avoid Ambiguous Labels:** Refrain from using vague or ambiguous labels like ”Fortsätt” that might confuse users about the button's function.
+- **Overuse of Primary Buttons:** Reserve primary buttons for the most crucial actions to avoid overwhelming users with excessive visual weight.
+

package/components/button/button.njk

@@ -1,13 +1,30 @@
 {% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
 {% 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/foundations/a11y/visually-hidden.njk' import VisuallyHidden %}
+
+{% macro InnerButton(params) %}
+  {% if not params.isIconButton %}
+    <span aria-hidden="true">{{ params.text }}</span>
+  {% elif not params.attributes["aria-label"] and params.a11y and params.a11y.visuallyHidden %}
+    {{- VisuallyHidden({ text: params.a11y.visuallyHidden }) | safe -}}
+  {% endif %}
+  {{- params.iconSvg | safe if params.iconSvg -}} {{ params.loadingHtml | safe }}
+{% endmacro %}
+
+{% macro ToggleWrapper(params) %}
+  <button type="button" role="switch" {{ params.ariaLabel | safe }} aria-checked="{{ "true" if params.selected else "false" }}" class="{{ params.classes }}" {{ "disabled" if params.disabled }} {{- params.attributes | safe }}>
+    {{ caller() }}
+    {{ params.loadingHtml | safe }}
+  </button>
+{% endmacro %}
 
 {% macro Button(params) %}
   {%- set componentClassName = "ds-btn" %}
   {%- set classNamePrefix = componentClassName + "--" %}
   {%- set text = params.text %}
   {%- set attributes = getAttributes(params.attributes) %}
-  {%- set ariaLabel = 'aria-label="' + text + '"' if not params.attributes["aria-label"] else "" %}
+  {%- 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") %}
 
@@ -31,10 +48,6 @@
     {% set iconSvg =  IconUse({ icon: params.iconName, attributes: { "aria-hidden": "true" } }) %}
   {% endif %}
 
-  {%- if params.a11y and params.a11y.visuallyHidden %}
-    {% set visuallyHidden = VisuallyHidden({ text: params.a11y.visuallyHidden }) %}
-  {% endif %}
-
   {%- set classes = [
     componentClassName,
     classNamePrefix + buttonVariant,
@@ -54,40 +67,26 @@
   ] | join(" ") %}
 
   {%- if params.isToggle %}
-    {%- if params.isIconBtn %}
-      <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 %}
-      <button type="button" role="switch" {{ ariaLabel | safe }} aria-checked="{{ "true" if params.selected else "false" }}" class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe }}>
-        <span class="{{ componentClassName + '__off' }}" aria-hidden="true"><span>{{ params.text }}</span></span>
-        <span class="{{ componentClassName + '__on' }}" aria-hidden="true">
+    {% call ToggleWrapper({ ariaLabel: ariaLabel, selected: params.selected, classes: classes, attributes: attributes, disabled: params.disabled, loadingHtml: loadingHtml }) %}
+      {%- if params.isIconBtn %}
+        <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 %}
+        <span class="ds-btn__off" aria-hidden="true"><span>{{ params.text }}</span></span>
+        <span class="ds-btn__on" aria-hidden="true">
           {{ IconUse({ icon: "check" }) }} <span>{{ params.selectedText }}</span>
         </span>
-        {{ loadingHtml | safe }}
-      </button>
-    {% endif %}
+      {% endif %}
+    {% endcall %}
   {% else %}
+    {% set buttonParams = { isIconButton: params.isIconBtn, 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}}>
-        {% if isIconButton %}
-          {{- visuallyHidden | safe if visuallyHidden -}}
-        {% else %}
-          <span aria-hidden="true">{{ text }}</span>
-        {% endif %}
-        {{- iconSvg | safe if iconSvg -}} {{ loadingHtml | safe }}
+      <a href="{{ params.href | default('#', true) }}" {{ ariaLabel | safe }} class="{{ classes }}" {{- attributes | safe }}>
+        {{ InnerButton(buttonParams) }}
       </a>
     {% else %}
-      <button type="{{ params.type | default('button') }}" {{ ariaLabel | safe }} class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe}}>
-        {% if isIconButton %}
-          {{- visuallyHidden | safe if visuallyHidden -}}
-        {% else %}
-          <span aria-hidden="true">{{ text }}</span>
-        {% endif %}
-        {{- iconSvg | safe if iconSvg -}} {{ loadingHtml | safe }}
+      <button type="{{ params.type | default('button') }}" {{ ariaLabel | safe }} class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe }}>
+        {{ InnerButton(buttonParams) }}
       </button>
     {% endif %}
   {% endif %}

package/components/button/button.scss

@@ -4,9 +4,16 @@
 @use "../spinner/spinner.scss" as *;
 
 $ds-btn-outlined__border-width: ds-border-width(x1);
+@function _btn-brdr($value, $rem: false) {
+  $value: (ds-strip-unit($value) - ds-strip-unit($ds-btn-outlined__border-width)) * 1px;
+  @if $rem {
+    @return ds-px-to-rem($value);
+  }
+  @return $value;
+}
 
 .ds-btn {
-  --ds-btn__background-color: transparent;
+  --ds-btn__background-color: #{$ds-color-surface-background};
   --ds-btn__border-color: transparent;
   --ds-btn__outline-color: #{$ds-color-border-focus-02};
   --ds-btn__icon-size: #{ds-px-to-rem(24px)};
@@ -14,52 +21,63 @@ $ds-btn-outlined__border-width: ds-border-width(x1);
     --ds-btn__icon-size: 24px;
   }
 
-  &.ds-btn--default,
-  &.ds-btn--elevated {
-    &.ds-btn--primary {
+  &.ds-btn--primary {
+    &.ds-btn--default,
+    &.ds-btn--elevated {
       --ds-btn__background-color: #{$ds-color-component-primary};
       --ds-btn__color: #{$ds-color-text-secondary};
     }
-    &.ds-btn--secondary {
-      --ds-btn__background-color: #{$ds-color-component-primary-overlay};
+    &.ds-btn--outline {
+      --ds-btn__border-color: #{$ds-color-component-primary};
       --ds-btn__color: #{$ds-color-text-primary};
     }
-    &.ds-btn--brand {
-      --ds-btn__background-color: #{$ds-color-component-brand};
-      --ds-btn__color: #{$ds-color-text-secondary};
-    }
-    &.ds-btn--staticWhite {
-      --ds-btn__background-color: #{$ds-color-static-white};
-      --ds-btn__color: #{$ds-color-static-black};
+    &.ds-btn--transparent {
+      --ds-btn__color: #{$ds-color-text-primary};
     }
   }
-
-  &.ds-btn--outline,
-  &.ds-btn--transparent {
-    &.ds-btn--primary,
-    &.ds-btn--secondary {
+  &.ds-btn--secondary {
+    &.ds-btn--default,
+    &.ds-btn--elevated {
+      --ds-btn__background-color: #{$ds-color-component-primary-overlay};
       --ds-btn__color: #{$ds-color-text-primary};
     }
-    &.ds-btn--brand {
-      --ds-btn__color: #{$ds-color-text-brand};
+    &.ds-btn--outline {
+      --ds-btn__border-color: #{$ds-color-border-primary-02};
+      --ds-btn__color: #{$ds-color-text-primary};
     }
-    &.ds-btn--staticWhite {
-      --ds-btn__color: #{$ds-color-static-white};
+    &.ds-btn--transparent {
+      --ds-btn__color: #{$ds-color-text-primary};
     }
   }
-
-  &.ds-btn--outline {
-    &.ds-btn--primary {
-      --ds-btn__border-color: #{$ds-color-component-primary};
-    }
-    &.ds-btn--secondary {
-      --ds-btn__border-color: #{$ds-color-border-primary-02};
+  &.ds-btn--brand {
+    --ds-btn__outline-color: #{$ds-color-border-focus};
+    &.ds-btn--default,
+    &.ds-btn--elevated {
+      --ds-btn__background-color: #{$ds-color-component-brand};
+      --ds-btn__color: #{$ds-color-text-secondary};
     }
-    &.ds-btn--brand {
+    &.ds-btn--outline {
       --ds-btn__border-color: #{$ds-color-component-brand};
+      --ds-btn__color: #{$ds-color-text-brand};
+    }
+    &.ds-btn--transparent {
+      --ds-btn__color: #{$ds-color-text-brand};
+    }
+  }
+  &.ds-btn--staticWhite {
+    --ds-btn__outline-color: #{$ds-color-static-white};
+    &.ds-btn--default,
+    &.ds-btn--elevated {
+      --ds-btn__background-color: #{$ds-color-static-white};
+      --ds-btn__color: #{$ds-color-static-black};
     }
-    &.ds-btn--staticWhite {
+    &.ds-btn--outline {
+      --ds-btn__background-color: transparent;
       --ds-btn__border-color: #{$ds-color-static-white};
+      --ds-btn__color: #{$ds-color-static-white};
+    }
+    &.ds-btn--transparent {
+      --ds-btn__color: #{$ds-color-static-white};
     }
   }
 
@@ -69,12 +87,8 @@ $ds-btn-outlined__border-width: ds-border-width(x1);
     --ds-btn__border-color: #{$ds-color-component-primary};
     --ds-btn__outline-color: #{$ds-color-border-focus-02};
   }
-
-  &.ds-btn--brand {
-    --ds-btn__outline-color: #{$ds-color-border-focus};
-  }
-  &.ds-btn--staticWhite {
-    --ds-btn__outline-color: #{$ds-color-static-white};
+  &.ds-btn--transparent {
+    --ds-btn__background-color: transparent;
   }
   &.ds-btn--rounded {
     border-radius: 100px;
@@ -86,26 +100,45 @@ $ds-btn-outlined__border-width: ds-border-width(x1);
   &.ds-btn--small {
     @include ds-typography($ds-typography-detailstandard-button-small);
     --ds-btn__icon-size: #{ds-px-to-rem(20px)};
+    --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-050), true)};
+    padding: _btn-brdr(ds-spacing($ds-s-025), true) _btn-brdr(ds-spacing($ds-s-075), true);
     @at-root .ds-force-px#{&} {
       @include ds-typography($ds-typography-detailstandard-button-small, true);
       --ds-btn__icon-size: 20px;
+      --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-050))};
+      padding: _btn-brdr(ds-spacing($ds-s-025)) _btn-brdr(ds-spacing($ds-s-075));
+    }
+  }
+  &.ds-btn--medium {
+    @include ds-typography($ds-typography-detailstandard-button);
+    --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-100), true)};
+    padding: _btn-brdr(ds-spacing($ds-s-050), true) _btn-brdr(ds-spacing($ds-s-125), true);
+    @at-root .ds-force-px#{&} {
+      --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-100))};
+      @include ds-typography($ds-typography-detailstandard-button, true);
+      padding: _btn-brdr(ds-spacing($ds-s-050)) _btn-brdr(ds-spacing($ds-s-125));
     }
   }
-
-  &.ds-btn--medium,
   &.ds-btn--large {
     @include ds-typography($ds-typography-detailstandard-button);
+    --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-125), true)};
+    padding: _btn-brdr(ds-spacing($ds-s-075), true) _btn-brdr(ds-spacing($ds-s-150), true);
     @at-root .ds-force-px#{&} {
       @include ds-typography($ds-typography-detailstandard-button, true);
+      --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-125))};
+      padding: _btn-brdr(ds-spacing($ds-s-075)) _btn-brdr(ds-spacing($ds-s-150));
     }
   }
-
   &.ds-btn--xlarge {
     @include ds-typography($ds-typography-detailstandard-button-xlarge);
     --ds-btn__icon-size: #{ds-px-to-rem(32px)};
+    --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);
     @at-root .ds-force-px#{&} {
       @include ds-typography($ds-typography-detailstandard-button-xlarge, true);
       --ds-btn__icon-size: 32px;
+      --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));
     }
   }
 
@@ -175,46 +208,6 @@ $ds-btn-outlined__border-width: ds-border-width(x1);
   box-sizing: border-box;
 }
 
-.ds-btn--small {
-  padding: ds-px-to-rem(ds-spacing($ds-s-025) - $ds-btn-outlined__border-width)
-    ds-px-to-rem(ds-spacing($ds-s-075) - $ds-btn-outlined__border-width);
-  @at-root .ds-force-px#{&} {
-    /* stylelint-disable-next-line */
-    padding: ds-spacing($ds-s-025) - $ds-btn-outlined__border-width ds-spacing($ds-s-075) -
-      $ds-btn-outlined__border-width;
-  }
-}
-
-.ds-btn--medium {
-  padding: ds-px-to-rem(ds-spacing($ds-s-050) - $ds-btn-outlined__border-width)
-    ds-px-to-rem(ds-spacing($ds-s-125) - $ds-btn-outlined__border-width);
-  @at-root .ds-force-px#{&} {
-    /* stylelint-disable-next-line */
-    padding: ds-spacing($ds-s-050) - $ds-btn-outlined__border-width ds-spacing($ds-s-125) -
-      $ds-btn-outlined__border-width;
-  }
-}
-
-.ds-btn--large {
-  padding: ds-px-to-rem(ds-spacing($ds-s-075) - $ds-btn-outlined__border-width)
-    ds-px-to-rem(ds-spacing($ds-s-150) - $ds-btn-outlined__border-width);
-  @at-root .ds-force-px#{&} {
-    /* stylelint-disable-next-line */
-    padding: ds-spacing($ds-s-075) - $ds-btn-outlined__border-width ds-spacing($ds-s-150) -
-      $ds-btn-outlined__border-width;
-  }
-}
-
-.ds-btn--xlarge {
-  padding: ds-px-to-rem(ds-spacing($ds-s-075) - $ds-btn-outlined__border-width)
-    ds-px-to-rem(ds-spacing($ds-s-200) - $ds-btn-outlined__border-width);
-  @at-root .ds-force-px#{&} {
-    /* stylelint-disable-next-line */
-    padding: ds-spacing($ds-s-075) - $ds-btn-outlined__border-width ds-spacing($ds-s-200) -
-      $ds-btn-outlined__border-width;
-  }
-}
-
 @include ds-mq-only-breakpoint(mobile) {
   .ds-btn--mobile-full-width {
     width: 100%;
@@ -223,7 +216,7 @@ $ds-btn-outlined__border-width: ds-border-width(x1);
 
 .ds-btn--icon-left,
 .ds-btn--icon-right,
-.ds-btn--selected,
+.ds-btn--toggle.ds-btn--selected,
 .ds-btn--icon-only {
   display: inline-flex;
   align-items: center;
@@ -237,8 +230,11 @@ $ds-btn-outlined__border-width: ds-border-width(x1);
     }
   }
 }
-
-.ds-btn--icon-right {
+.ds-btn.ds-btn--icon-right {
+  padding-right: var(--ds-btn__icon-padding);
+  &.ds-force-px {
+    padding-right: var(--ds-btn__icon-padding);
+  }
   .ds-icon {
     margin: ds-spacing(0 0 0 $ds-s-050, rem);
     @at-root .ds-force-px#{&} {
@@ -252,19 +248,22 @@ $ds-btn-outlined__border-width: ds-border-width(x1);
     }
   }
 }
-
-.ds-btn--icon-left,
-.ds-btn--selected:not(.ds-btn--icon-only) {
+.ds-btn.ds-btn--icon-left,
+.ds-btn.ds-btn--selected:not(.ds-btn--icon-only) {
   flex-direction: row-reverse;
+  padding-left: var(--ds-btn__icon-padding);
   .ds-icon {
     margin: ds-spacing(0 $ds-s-050 0 0, rem);
-    @at-root .ds-force-px#{&} {
-      margin: ds-spacing(0 $ds-s-050 0 0);
-    }
   }
   &.ds-btn--small .ds-icon {
     margin: ds-spacing(0 $ds-s-025 0 0, rem);
-    @at-root .ds-force-px#{&} {
+  }
+  &.ds-force-px {
+    padding-left: var(--ds-btn__icon-padding);
+    .ds-icon {
+      margin: ds-spacing(0 $ds-s-050 0 0);
+    }
+    &.ds-btn--small .ds-icon {
       margin: ds-spacing(0 $ds-s-025 0 0);
     }
   }

package/components/group-header/README.md

@@ -11,7 +11,7 @@
 |parameter | type | required | options | default | description |
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |title | string | yes | | | The title text |
-|variant | string | no | icon, link, toggle, arrows | icon | The variant to render |
+|variant | string | no | icon, link, toggle, arrows, image, bauta, bauataxl, image | icon | The variant to render |
 |href | string | no | | | If given, the title is rendered as a link |
 |linkText | string | no | | | The link text to render (only for variants `link` and `direkt`) |
 |showBottomBorder | boolean | no | | | If true there will be a bottom border |

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

@@ -16,13 +16,16 @@
   ] | join(" ") %}
 
   {% set groupHeaderInner %}
-    <h2 class="{{ componentClassName + '__title'}}">{{ params.title}}</h2>
+    {% if params.variant == 'image' %}
+      <div class="{{ componentClassName + '__image'}}">{{ params.mediaHtml | safe }}</div>
+    {% endif %}
+    <h2 class="{{ componentClassName + '__title'}}">{{ params.title }}</h2>
 
     {% if params.variant == 'link' and params.linkText and params.href %}
       <span class="{{ componentClassName + '__right-link' }}">
         {{ params.linkText }}
       </span>
-    {% elif (params.variant == 'icon' or params.variant == 'bauta' or not params.variant) and params.href %}
+    {% elif (params.variant == 'icon' or params.variant == 'bauta' or params.variant == 'image' or not params.variant) and params.href %}
       {{ IconUse({ icon: "arrow_forward", classNames: componentClassName + '__icon' }) }}
     {% elif (params.variant == 'arrows') and params.href and params.linkText %}
       <span class="{{ componentClassName + '__right-link' }} hidden-desktop">