@bonniernews/dn-design-system-web 9.1.1 → 10.0.0-beta.1

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

@@ -21,7 +21,7 @@
   ] | join(" ") %}
 
   {%- set loadingHtml %}
-    {{ Spinner({ size: "small", additionalClasses: "primary", forcePx: params.forcePx }) }}
+    {{ Spinner({ size: "small", additionalClasses: "primary", forcePx: params.forcePx, attributes: { "aria-hidden": "true" } }) }}
   {% endset %}
 
   {%- if params.a11y and params.a11y.visuallyHidden %}
@@ -31,23 +31,21 @@
   {%- 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 + '__inner' }}" aria-hidden="true">
-        <span class="{{ componentClassName + '__off' }}">{{ IconUse({ icon: params.iconName }) }}</span>
-        <span class="{{ componentClassName + '__on' }}">{{ IconUse({ icon: params.selectedIconName }) }}</span>
-        {{ loadingHtml | safe }}
-      </span>
+      <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 -}}
-        <span class="{{ componentClassName + '__inner' }}">{{IconUse({ icon: params.iconName, attributes: { "aria-hidden": "true" } }) }}</span>
+        {{ 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 -}}
-        <span class="{{ componentClassName + '__inner' }}">{{IconUse({ icon: params.iconName, attributes: { "aria-hidden": "true" } }) }}</span>
+        {{ IconUse({ icon: params.iconName, attributes: { "aria-hidden": "true" } }) }}
         {{ loadingHtml | safe }}
       </button>
     {% endif %}

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

@@ -3,97 +3,137 @@
 @use "../spinner/spinner.scss" as *;
 
 $ds-icon-btn__border-radius: 50%;
-$ds-icon-btn__min-clickable-area: 48px;
 $ds-btn-outlined__border-width: ds-metrics-border-width(x1);
 
 .ds-icon-btn {
-  --ds-icon-btn__inner-padding: #{ds-spacing($ds-s-050)-$ds-btn-outlined__border-width};
+  --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-drop-shadow-02);
+    --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;
+      }
+    }
+    &: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__inner-padding: #{2px - $ds-btn-outlined__border-width};
+    --ds-icon-btn__padding: #{2px - $ds-btn-outlined__border-width};
   }
 
   &.ds-icon-btn--large {
-    --ds-icon-btn__inner-padding: #{ds-spacing($ds-s-075)-$ds-btn-outlined__border-width};
+    --ds-icon-btn__padding: #{ds-spacing($ds-s-075)-$ds-btn-outlined__border-width};
   }
 
   cursor: pointer;
-  background-color: transparent;
-  border: 0;
-  min-width: $ds-icon-btn__min-clickable-area;
-  min-height: $ds-icon-btn__min-clickable-area;
+  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;
-  padding: 0;
   position: relative;
+  padding: var(--ds-icon-btn__padding);
 
   span {
     pointer-events: none;
   }
 
-  .ds-icon-btn__inner {
-    box-sizing: border-box;
-    border-radius: $ds-icon-btn__border-radius;
-    border: $ds-btn-outlined__border-width solid;
-    margin: 0;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    padding: var(--ds-icon-btn__inner-padding);
+  &::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;
+  }
 
-    &::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;
-    }
+  &::after {
+    content: "";
+    position: absolute;
+    min-width: $ds-btn__min-clickable-area;
+    min-height: $ds-btn__min-clickable-area;
+    width: 100%;
+  }
 
-    .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-icon {
+    position: relative;
+    display: flex;
+    height: var(--ds-icon-btn__icon-size);
+    width: var(--ds-icon-btn__icon-size);
+    margin: 0;
+    svg {
+      fill: currentColor;
     }
   }
+
   @include ds-hover() {
-    &:hover:not(.ds-loading) .ds-icon-btn__inner::before {
-      background-color: $ds-color-component-primary-overlay;
+    &:hover:not(.ds-loading)::before {
+      background-color: var(--ds-icon-btn__background-color-hover);
     }
   }
-  &:active:not(.ds-loading) .ds-icon-btn__inner::before {
-    background-color: $ds-color-component-primary-overlay-02;
+  &:active:not(.ds-loading)::before {
+    background-color: var(--ds-icon-btn__background-color-active);
   }
 
   &:focus-visible {
-    outline: none;
-    .ds-icon-btn__inner {
-      outline: ds-metrics-border-width(x2) solid $ds-color-border-focus-02;
-      outline-offset: 2px;
-    }
+    outline: ds-metrics-border-width(x2) solid var(--ds-icon-btn__outline-color);
+    outline-offset: 2px;
   }
   &:disabled:not(.ds-loading) {
     cursor: not-allowed;
-    .ds-icon-btn__inner {
-      color: $ds-color-icon-disabled;
-      outline: none;
-      &::before {
-        background-color: transparent;
-      }
+    color: $ds-color-icon-disabled;
+    outline: none;
+    &::before {
+      background-color: transparent;
     }
   }
 
@@ -105,61 +145,3 @@ $ds-btn-outlined__border-width: ds-metrics-border-width(x1);
 
   @include ds-loading();
 }
-
-.ds-icon-btn--transparent {
-  .ds-icon-btn__inner {
-    border-color: transparent;
-    color: $ds-color-icon-primary;
-  }
-}
-
-.ds-icon-btn--outlined {
-  .ds-icon-btn__inner {
-    background-color: $ds-color-component-secondary;
-    border-color: $ds-color-border-primary-02;
-    color: $ds-color-icon-primary;
-  }
-  &:disabled .ds-icon-btn__inner {
-    border-color: $ds-color-border-primary;
-  }
-}
-
-.ds-icon-btn--elevated {
-  .ds-icon-btn__inner {
-    box-shadow: ds-shadow-get-box-shadow($ds-shadow-drop-shadow-02);
-    background-color: $ds-color-component-secondary;
-    border-color: $ds-color-border-primary-02;
-    color: $ds-color-icon-primary;
-  }
-  &:disabled .ds-icon-btn__inner {
-    border-color: $ds-color-border-primary;
-  }
-}
-
-.ds-icon-btn--on-media {
-  .ds-icon-btn__inner {
-    background-color: $ds-color-static-transparent-black;
-    border-color: transparent;
-    color: $ds-color-static-white;
-  }
-  &:disabled .ds-icon-btn__inner {
-    border-color: $ds-color-border-primary;
-  }
-  @include ds-hover() {
-    &:hover:not(.ds-loading) .ds-icon-btn__inner::before {
-      background-color: $ds-color-static-transparent-white-10;
-    }
-  }
-  &:active:not(.ds-loading) .ds-icon-btn__inner::before {
-    background-color: $ds-color-static-transparent-white-10;
-  }
-  &:disabled:not(.ds-loading) .ds-icon-btn__inner {
-    color: $ds-color-static-white;
-    &::before {
-      background-color: transparent;
-    }
-  }
-  &:focus-visible .ds-icon-btn__inner {
-    outline-color: $ds-color-static-white;
-  }
-}

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

@@ -2,13 +2,11 @@
 @use "../icon-button/icon-button.scss";
 
 .ds-icon-btn--toggle {
-  .ds-icon-btn__inner {
-    .ds-icon-btn__on {
-      display: none;
-    }
+  .ds-icon-btn__on {
+    display: none;
   }
 
-  &.ds-icon-btn--selected .ds-icon-btn__inner {
+  &.ds-icon-btn--selected {
     .ds-icon-btn__on {
       display: flex;
     }

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

@@ -144,7 +144,6 @@
           selected: params.selected,
           selectedText: params.toggleSelectedText,
           variant: params.variant | default("secondaryFilled"),
-          condensed: false,
           disabled: params.disabled,
           forcePx: params.forcePx,
           size: "xsmall",

package/components/modal/modal.scss

@@ -67,8 +67,8 @@
 
     .ds-icon-btn.ds-modal__close {
       position: absolute;
-      top: ds-spacing($ds-s-100);
-      right: ds-spacing($ds-s-100);
+      top: ds-spacing($ds-s-150);
+      right: ds-spacing($ds-s-150);
     }
 
     > h2 {

package/components/pictogram/pictogram.njk

@@ -15,6 +15,6 @@
   ] | join(" ") %}
 
   <div class="{{ classes }}" {{- attributes | safe }}>
-    {{ IconUse({ icon: params.iconName, attributs: { "aria-hidden": "true" } }) }}
+    {{ IconUse({ icon: params.iconName, attributes: { "aria-hidden": "true" } }) }}
   </div>
 {% endmacro %}

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

@@ -47,11 +47,11 @@
       z-index: 2;
 
       &--back {
-        left: 0;
+        left: 10px;
       }
 
       &--forward {
-        right: 0;
+        right: 10px;
       }
     }
   }

package/components/text-button/README.md

@@ -15,7 +15,6 @@
 |disabled | bool | no | true, false | false | Note: only works on button-tag, not on a-tag |
 |fullWidth | bool | no | true, false | false | Button will be full width on both desktop and mobile |
 |mobile.fullWidth | bool | no | true, false | false | Ex mobile: { fullWidth: true } |
-|condensed | bool | no | true, false | false | Condensed reduces spacing to a bare minimum, use with care since this might make touch target area smaller than recommended size |
 |iconPosition | String | no | none, left, right | none | |
 |iconName | String | no | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icons--all-icons |
 |loading | bool | no | true, false | false | |

package/components/text-button/text-button.njk

@@ -7,7 +7,7 @@
   {%- set classNamePrefix = componentClassName + "--" %}
 
   {%- if params.iconName and params.iconPosition and params.iconPosition != "none" %}
-    {% set iconSvg = IconUse({ icon: params.iconName }) %}
+    {% set iconSvg = IconUse({ icon: params.iconName, attributes: { "aria-hidden": "true" } }) %}
   {% endif %}
 
   {%- set classes = [
@@ -16,7 +16,6 @@
     "ds-loading" if params.loading,
     classNamePrefix + params.size if params.size and params.size !== "default",
     classNamePrefix + "full-width" if params.fullWidth,
-    classNamePrefix + "condensed" if params.condensed and not params.fullWidth,
     classNamePrefix + "mobile-full-width" if params.mobile and params.mobile.fullwWidth,
     classNamePrefix + "icon-" + params.iconPosition if iconSvg,
     params.classNames if params.classNames
@@ -27,25 +26,21 @@
 
   {%- set loadingHtml %}
     {% if (params.size == 'small') %}
-      {{ Spinner({ size: "xsmall", variant: "primary", forcePx: params.forcePx }) }}
+      {{ Spinner({ size: "xsmall", variant: "primary", forcePx: params.forcePx, attributes: { "aria-hidden": "true" } }) }}
     {% else %}
-      {{ Spinner({ size: "small", variant: "primary", forcePx: params.forcePx }) }}
+      {{ Spinner({ size: "small", variant: "primary", forcePx: params.forcePx, attributes: { "aria-hidden": "true" } }) }}
     {% endif %}
   {% endset %}
 
   {%- if params.href %}
     <a href="{{ params.href | default('#', true) }}" {{ ariaLabel | safe }} class="{{ classes }}" {{- attributes | safe }}>
-      <span class="{{ componentClassName + '__inner'}}" aria-hidden="true">
-        <span class="ds-text-btn__text">{{ text }}</span>
-        {{- iconSvg | safe if iconSvg -}} {{ loadingHtml | safe }}
-      </span>
+      <span class="ds-text-btn__text" aria-hidden="true">{{ text }}</span>
+      {{- iconSvg | safe if iconSvg -}} {{ loadingHtml | safe }}
     </a>
   {%- else %}
     <button type="{{ params.type | default('button') }}" {{ ariaLabel | safe }} class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe }}>
-      <span class="{{ componentClassName + '__inner' }}" aria-hidden="true">
-        <span class="ds-text-btn__text">{{ text }}</span>
-        {{- iconSvg | safe if iconSvg -}} {{ loadingHtml | safe }}
-      </span>
+      <span class="ds-text-btn__text" aria-hidden="true">{{ text }}</span>
+      {{- iconSvg | safe if iconSvg -}} {{ loadingHtml | safe }}
     </button>
   {% endif %}
 {% endmacro %}

package/components/text-button/text-button.scss

@@ -2,11 +2,9 @@
 @use "../icon-sprite/icon-sprite.scss";
 @use "../spinner/spinner.scss" as *;
 
-$ds-text-btn__min-clickable-area: 0;
 $ds-text-btn__underline-offset: 2px;
 
 .ds-text-btn {
-  --ds-text-btn__inner-padding: #{ds-spacing($ds-s-075)};
   --ds-text-btn__icon-size: #{ds-px-to-rem(24px)};
 
   &.ds-force-px {
@@ -14,17 +12,14 @@ $ds-text-btn__underline-offset: 2px;
   }
 
   &.ds-text-btn--icon-left {
-    --ds-text-btn__inner-padding: #{ds-spacing($ds-s-075 $ds-s-075 $ds-s-075 $ds-s-050)};
     --ds-text-btn__icon-margin: #{ds-spacing(0 $ds-s-050 0 0)};
   }
 
   &.ds-text-btn--icon-right {
-    --ds-text-btn__inner-padding: #{ds-spacing($ds-s-075 $ds-s-050 $ds-s-075 $ds-s-075)};
     --ds-text-btn__icon-margin: #{ds-spacing(0 0 0 $ds-s-050)};
   }
 
   &.ds-text-btn--small {
-    --ds-text-btn__inner-padding: #{ds-spacing($ds-s-050)};
     --ds-text-btn__icon-size: #{ds-px-to-rem(20px)};
 
     &.ds-force-px {
@@ -33,92 +28,81 @@ $ds-text-btn__underline-offset: 2px;
 
     &.ds-text-btn--icon-left {
       --ds-text-btn__icon-margin: #{ds-spacing(0 $ds-s-025 0 0)};
-      --ds-text-btn__inner-padding: #{ds-spacing($ds-s-050 $ds-s-050 $ds-s-050 $ds-s-025)};
-      &.ds-text-btn--condensed {
-        --ds-text-btn__inner-padding: #{ds-spacing($ds-s-025 $ds-s-025 $ds-s-025 0)};
-      }
     }
 
     &.ds-text-btn--icon-right {
       --ds-text-btn__icon-margin: #{ds-spacing(0 0 0 $ds-s-025)};
-      --ds-text-btn__inner-padding: #{ds-spacing($ds-s-050 $ds-s-025 $ds-s-050 $ds-s-050)};
-      &.ds-text-btn--condensed {
-        --ds-text-btn__inner-padding: #{ds-spacing($ds-s-025 0 $ds-s-025 $ds-s-025)};
-      }
     }
   }
 
-  &.ds-text-btn--condensed {
-    --ds-text-btn__inner-padding: #{ds-spacing($ds-s-025)};
-  }
-
   cursor: pointer;
   background-color: transparent;
   border: 0;
-  min-width: $ds-text-btn__min-clickable-area;
-  min-height: $ds-text-btn__min-clickable-area;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  border-radius: ds-border-radius(x1);
   padding: 0;
   position: relative;
 
+  &::before {
+    content: "";
+    border-radius: inherit;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    min-width: $ds-btn__min-clickable-area;
+    min-height: $ds-btn__min-clickable-area;
+    width: 100%;
+  }
+
   span {
     pointer-events: none;
   }
 
   &:focus-visible {
-    outline: none;
-    .ds-text-btn__inner {
-      outline: ds-border-width(x2) solid $ds-color-border-focus-02;
-      outline-offset: 2px;
-    }
+    outline: ds-border-width(x2) solid $ds-color-border-focus-02;
+    outline-offset: 2px;
   }
 
   @at-root a#{&} {
     box-sizing: border-box;
     text-align: center;
-    text-decoration: none;
-  }
-
-  .ds-text-btn__inner {
-    background-color: transparent;
-    border-radius: ds-border-radius(x1);
-    padding: var(--ds-text-btn__inner-padding);
-    position: relative;
-    &::before {
-      content: "";
-      border-radius: inherit;
-      pointer-events: none;
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-    }
   }
 
   .ds-text-btn__text {
     @include ds-typography-with-force-px($ds-typography-functional-body02regular);
-    text-decoration: underline;
     text-underline-offset: $ds-text-btn__underline-offset;
     color: $ds-color-text-primary;
   }
 
+  &:not(:disabled) .ds-text-btn__text {
+    text-decoration: underline;
+  }
+
   &.ds-text-btn--small .ds-text-btn__text {
     @include ds-typography-with-force-px($ds-typography-functional-body01regular);
   }
 
   @include ds-hover() {
-    &:hover:not(.ds-loading) .ds-text-btn__inner::before {
-      background-color: $ds-color-component-primary-overlay;
+    &:hover:not(.ds-loading) .ds-text-btn__text {
+      text-decoration: none;
     }
   }
 
-  &:active:not(.ds-loading) .ds-text-btn__inner::before {
-    background-color: $ds-color-component-primary-overlay-02;
+  &:active:not(:disabled):not(.ds-loading) {
+    opacity: $ds-opacity-component-disabled;
   }
-  &:disabled:not(.ds-loading) .ds-text-btn__inner {
+
+  &:disabled:not(.ds-loading) {
     cursor: not-allowed;
     &::before {
       background-color: unset;
@@ -135,15 +119,12 @@ $ds-text-btn__underline-offset: 2px;
 }
 
 .ds-text-btn--full-width {
-  &,
-  & .ds-text-btn__inner {
-    width: 100%;
-    box-sizing: border-box;
-  }
+  width: 100%;
+  box-sizing: border-box;
 }
 
-.ds-text-btn--icon-left .ds-text-btn__inner,
-.ds-text-btn--icon-right .ds-text-btn__inner {
+.ds-text-btn--icon-left,
+.ds-text-btn--icon-right {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -159,20 +140,23 @@ $ds-text-btn__underline-offset: 2px;
     }
   }
 
-  .ds-text-btn__text {
+  &:not(:disabled) .ds-text-btn__text {
     text-decoration: none;
   }
+
+  @include ds-hover() {
+    &:hover:not(:disabled):not(.ds-loading) .ds-text-btn__text {
+      text-decoration: underline;
+    }
+  }
 }
 
-.ds-text-btn--icon-left .ds-text-btn__inner {
+.ds-text-btn--icon-left {
   flex-direction: row-reverse;
 }
 
 @include ds-mq-only-breakpoint(mobile) {
   .ds-text-btn--mobile-full-width {
-    &,
-    & .ds-text-btn__inner {
-      width: 100%;
-    }
+    width: 100%;
   }
 }

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

@@ -16,7 +16,6 @@
 |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 |
-|condensed | bool | no | true, false | false | Condensed reduces spacing to a bare minimum, use with care since this might make touch target area smaller than recommended size |
 |loading | bool | no | true, false | false | |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
 |classNames | String | no | | | Ex. "my-special-class" |

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

@@ -10,7 +10,6 @@
     "ds-force-px" if params.forcePx,
     "ds-loading" if params.loading,
     classNamePrefix + "selected" if params.selected,
-    classNamePrefix + "condensed" if params.condensed,
     params.classNames if params.classNames
   ] | join(" ") %}
 
@@ -18,18 +17,16 @@
   {%- set ariaLabel = 'aria-label="' + params.text + '"' if not params.attributes["aria-label"] else "" %}
 
   {%- set loadingHtml %}
-    {{ Spinner({ size: "small", additionalClasses: "primary", forcePx: params.forcePx }) }}
+    {{ Spinner({ size: "small", additionalClasses: "primary", forcePx: params.forcePx, attributes: { "aria-hidden": "true" } }) }}
   {%- endset %}
 
   <button type="{{ params.type | default('button') }}" role="switch" {{ ariaLabel | safe }} aria-checked="{{ "true" if params.selected else "false" }}" class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe }}>
-    <span class="{{ componentClassName + '__inner' }}" aria-hidden="true">
-      <span class="{{ componentClassName + '__off' }}">
-        {{ IconUse({ icon: params.iconName }) }} <span class="{{ componentClassName + '__text'}}">{{ params.text }}</span>
-      </span>
-      <span class="{{ componentClassName + '__on' }}">
-        {{ IconUse({ icon: params.selectedIconName }) }} <span class="{{ componentClassName + '__text' }}">{{ params.selectedText }}</span>
-      </span>
-      {{ loadingHtml | safe }}
+    <span class="{{ componentClassName + '__off' }}" aria-hidden="true">
+      {{ IconUse({ icon: params.iconName }) }} <span class="{{ componentClassName + '__text'}}">{{ params.text }}</span>
     </span>
+    <span class="{{ componentClassName + '__on' }}" aria-hidden="true">
+      {{ IconUse({ icon: params.selectedIconName }) }} <span class="{{ componentClassName + '__text' }}">{{ params.selectedText }}</span>
+    </span>
+    {{ loadingHtml | safe }}
   </button>
 {% endmacro %}