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

package/CHANGELOG.md

@@ -4,6 +4,29 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [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)
+
+
+### ⚠ BREAKING CHANGES
+
+* **web:** refactor buttons
+
+### Features
+
+* **web:** refactor buttons ([6fc9ca6](https://github.com/BonnierNews/dn-design-system/commit/6fc9ca69cdde1e6cb209a86282b863c4fb8a8518))
+
+## [14.0.4](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.0.3...@bonniernews/dn-design-system-web@14.0.4) (2024-03-07)
+
+
+### Bug Fixes
+
+* **foundations:** update tokens to get button-xlarge ([#1233](https://github.com/BonnierNews/dn-design-system/issues/1233)) ([94e127b](https://github.com/BonnierNews/dn-design-system/commit/94e127b03218cc845149ccfaa1c48dfe0fe5d104))
+
+
+### Maintenance
+
+* prerelease packages ([e2376b2](https://github.com/BonnierNews/dn-design-system/commit/e2376b2a4abf257a8255a08306f54c5f2480cf5e))
+
 ## [14.0.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.0.2...@bonniernews/dn-design-system-web@14.0.3) (2024-03-07)
 
 

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--secondaryFilled ds-btn--small ds-btn--full-width">
+        <button type="button" class="ds-btn ds-btn--secondary ds-btn--default ds-btn--medium 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: 'secondaryFilled',
-          size: 'small',
+          variant: 'secondary',
+          size: 'medium',
           classNames: '',
           fullWidth: true,
           forcePx: params.forcePx,

package/components/button/README.md

@@ -12,8 +12,10 @@
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |text | String | yes | | | |
 |disabled | bool | no | true, false | false | Note: only works on button-tag, not on a-tag |
-|variant | String | no | brand, business, criticalOutlined, primary, secondaryFilled, secondaryOutlined, staticWhiteFilled, staticWhiteOutlined | primary | Design variant |
-|size| String | no | default, small | default | |
+|variant | String | no | primary, secondary, brand, staticWhite | primary | Design variant |
+|emphasis | String | no | default, elevated, outline, transparent | default | |
+|rounded | bool | no | true, false | false | Button will be rounded |
+|size| String | no | small, medium, large, xlarge | medium | |
 |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 } |
 |iconPosition | String | no | none, left, right | none | |

package/components/{button-toggle/button-toggle.js → button/button.js}

@@ -7,8 +7,8 @@ function dsButtonToggle(toggleElements = []) {
   if (!toggleElements.length) return;
   toggleElements.forEach((toggleEl) => {
     toggleEl.addEventListener("click", () => {
-      if (toggleEl.classList.contains("ds-btn-toggle--disabled")) return;
-      toggleEl.classList.toggle("ds-btn-toggle--selected");
+      if (toggleEl.classList.contains("ds-btn--disabled")) return;
+      toggleEl.classList.toggle("ds-btn--selected");
       const ariaChecked = toggleEl.getAttribute("aria-checked") === "true" ? "false" : "true";
       toggleEl.setAttribute("aria-checked", ariaChecked);
     });
@@ -16,6 +16,6 @@ function dsButtonToggle(toggleElements = []) {
 }
 
 function dsButtonToggleAll() {
-  const toggleElements = Array.from(document.getElementsByClassName("ds-btn-toggle"));
+  const toggleElements = Array.from(document.getElementsByClassName("ds-btn--toggle"));
   dsButtonToggle(toggleElements);
 }

package/components/button/button.njk

@@ -9,38 +9,86 @@
   {%- set attributes = getAttributes(params.attributes) %}
   {%- set ariaLabel = 'aria-label="' + text + '"' if not params.attributes["aria-label"] else "" %}
   {%- set buttonVariant = params.variant | default("primary") %}
-  {%- set spinnerMap = { primary: "secondary", brand: "onBrand", business: "onBusiness", staticWhiteFilled: "staticBlack", staticWhiteOutlined: "staticWhite" } %}
-  {%- set spinnerVariant = spinnerMap[buttonVariant] | default("primary") %}
+  {%- set emphasis = params.emphasis | default("default") %}
+
+  {% if params.variant == "staticWhite" %}
+    {% if emphasis == "transparent" or emphasis == "outline" %}
+      {%- set spinnerVariant = "staticWhite" %}
+    {% else %}
+      {%- set spinnerVariant = "staticBlack" %}
+    {% endif %}
+  {% elif emphasis == "transparent" or emphasis == "outline" or params.variant == "secondary" %}
+    {%- set spinnerVariant = "primary" %}
+  {% else %}
+    {%- set spinnerVariant = "secondary" %}
+  {% endif %}
+
   {%- set loadingHtml %}
     {{ Spinner({ size: 'small', variant: spinnerVariant, forcePx: params.forcePx, attributes: { "aria-hidden": "true" } }) }}
   {% endset %}
 
-  {%- if params.iconName and params.iconPosition and params.iconPosition != "none" %}
+  {%- if params.iconName and ((params.iconPosition and params.iconPosition != "none") or params.isIconBtn == true) %}
     {% 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,
+    classNamePrefix + emphasis,
     classNamePrefix + "selected" if params.selected,
-    classNamePrefix + params.size if params.size and params.size !== "default",
+    classNamePrefix + params.size if params.size else classNamePrefix + "large",
     classNamePrefix + "full-width" if params.fullWidth,
     classNamePrefix + "mobile-full-width" if params.mobile and params.mobile.fullWidth,
-    classNamePrefix + "icon-" + params.iconPosition if iconSvg,
+    classNamePrefix + "icon-" + params.iconPosition if iconSvg and not params.isIconBtn,
+    classNamePrefix + "icon-only" if params.isIconBtn,
+    classNamePrefix + "rounded" if params.rounded,
+    classNamePrefix + "toggle" if params.isToggle,
+    classNamePrefix + "selected" if params.isToggle and params.selected,
     "ds-loading" if params.loading,
     "ds-force-px" if params.forcePx,
     params.classNames if params.classNames
   ] | join(" ") %}
 
-  {%- if params.href %}
-    <a href="{{ params.href | default('#', true) }}" {{ ariaLabel | safe }} class="{{ classes }}" {{- attributes | safe}}>
-      <span aria-hidden="true">{{ text }}</span>
-      {{- iconSvg | safe if iconSvg -}} {{ loadingHtml | safe }}
-    </a>
+  {%- 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">
+          {{ IconUse({ icon: "check" }) }} <span>{{ params.selectedText }}</span>
+        </span>
+        {{ loadingHtml | safe }}
+      </button>
+    {% endif %}
   {% else %}
-    <button type="{{ params.type | default('button') }}" {{ ariaLabel | safe }} class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe}}>
-      <span aria-hidden="true">{{ text }}</span>
-      {{- iconSvg | safe if iconSvg -}} {{ loadingHtml | safe }}
-    </button>
+    {%- 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>
+    {% 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>
+    {% endif %}
   {% endif %}
 {% endmacro %}

package/components/button/button.scss

@@ -4,94 +4,114 @@
 @use "../spinner/spinner.scss" as *;
 
 $ds-btn-outlined__border-width: ds-border-width(x1);
-$ds-btn__icon-size: 24px;
 
 .ds-btn {
   --ds-btn__background-color: transparent;
-  --ds-btn__background-color-hover: #{$ds-color-component-primary-overlay};
-  --ds-btn__background-color-active: #{$ds-color-component-primary-overlay-02};
-  --ds-btn__border-color: #{$ds-color-border-primary-03};
+  --ds-btn__border-color: transparent;
   --ds-btn__outline-color: #{$ds-color-border-focus-02};
-  --ds-btn__color: #{$ds-color-text-primary};
-
-  &.ds-btn--primary {
-    --ds-btn__background-color: #{$ds-color-component-primary};
-    --ds-btn__background-color-hover: #{$ds-color-component-secondary-overlay};
-    --ds-btn__background-color-active: #{$ds-color-component-secondary-overlay-02};
-    --ds-btn__border-color: transparent;
-    --ds-btn__color: #{$ds-color-text-secondary};
+  --ds-btn__icon-size: #{ds-px-to-rem(24px)};
+  @at-root .ds-force-px#{&} {
+    --ds-btn__icon-size: 24px;
   }
 
-  &.ds-btn--brand {
-    --ds-btn__background-color: #{$ds-color-component-brand};
-    --ds-btn__border-color: transparent;
-    --ds-btn__color: #{$ds-color-text-on-brand};
-    --ds-btn__outline-color: #{$ds-color-border-focus};
+  &.ds-btn--default,
+  &.ds-btn--elevated {
+    &.ds-btn--primary {
+      --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__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--business {
-    --ds-btn__background-color: #{$ds-color-component-business};
-    --ds-btn__border-color: transparent;
-    --ds-btn__color: #{$ds-color-text-on-business};
-    --ds-btn__outline-color: #{$ds-color-border-focus-04};
+  &.ds-btn--outline,
+  &.ds-btn--transparent {
+    &.ds-btn--primary,
+    &.ds-btn--secondary {
+      --ds-btn__color: #{$ds-color-text-primary};
+    }
+    &.ds-btn--brand {
+      --ds-btn__color: #{$ds-color-text-brand};
+    }
+    &.ds-btn--staticWhite {
+      --ds-btn__color: #{$ds-color-static-white};
+    }
   }
 
-  &.ds-btn--secondaryFilled {
-    --ds-btn__background-color: #{$ds-color-component-primary-overlay};
-    --ds-btn__border-color: transparent;
+  &.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__border-color: #{$ds-color-component-brand};
+    }
+    &.ds-btn--staticWhite {
+      --ds-btn__border-color: #{$ds-color-static-white};
+    }
   }
 
-  &.ds-btn--staticWhiteFilled {
-    --ds-btn__background-color: #{$ds-color-static-white};
-    --ds-btn__background-color-hover: #0808081a; // static version of lightmode component-secondary-overlay
-    --ds-btn__background-color-active: #08080833; // static version of lightmode component-secondary-overlay-2
-    --ds-btn__border-color: transparent;
-    --ds-btn__color: #{$ds-color-static-black};
+  &.ds-btn--toggle.ds-btn--selected:not(.ds-btn--icon-only) {
+    --ds-btn__background-color: transparent;
+    --ds-btn__color: #{$ds-color-text-primary};
+    --ds-btn__border-color: #{$ds-color-component-primary};
+    --ds-btn__outline-color: #{$ds-color-border-focus-02};
   }
 
-  &.ds-btn--staticWhiteOutlined {
-    // static version of darkmode component-secondary-overlay
-    --ds-btn__background-color-hover: rgba(255, 255, 255, 0.101960784);
-    // static version of darkmode component-secondary-overlay-2
-    --ds-btn__background-color-active: rgba(255, 255, 255, 0.2);
-    --ds-btn__border-color: #{$ds-color-static-white};
-    --ds-btn__color: #{$ds-color-static-white};
+  &.ds-btn--brand {
+    --ds-btn__outline-color: #{$ds-color-border-focus};
+  }
+  &.ds-btn--staticWhite {
     --ds-btn__outline-color: #{$ds-color-static-white};
+  }
+  &.ds-btn--rounded {
+    border-radius: 100px;
+  }
+  &.ds-btn--elevated {
+    box-shadow: ds-shadow-get-box-shadow($ds-shadow-elevation-m);
+  }
 
-    &:not(:disabled) .ds-icon {
-      --ds-btn__color: #{$ds-color-static-white};
+  &.ds-btn--small {
+    @include ds-typography($ds-typography-detailstandard-button-small);
+    --ds-btn__icon-size: #{ds-px-to-rem(20px)};
+    @at-root .ds-force-px#{&} {
+      @include ds-typography($ds-typography-detailstandard-button-small, true);
+      --ds-btn__icon-size: 20px;
     }
   }
 
-  &.ds-btn--criticalOutlined {
-    --ds-btn__border-color: #{$ds-color-border-critical};
-    --ds-btn__color: #{$ds-color-text-critical};
-    --ds-btn__outline-color: #{$ds-color-border-focus-03};
-
-    &:not(:disabled) .ds-icon {
-      --ds-btn__color: #{$ds-color-icon-critical};
+  &.ds-btn--medium,
+  &.ds-btn--large {
+    @include ds-typography($ds-typography-detailstandard-button);
+    @at-root .ds-force-px#{&} {
+      @include ds-typography($ds-typography-detailstandard-button, true);
     }
   }
 
-  &.ds-btn--secondaryFilled,
-  &.ds-btn--secondaryOutlined,
-  &.ds-btn--criticalOutlined,
-  &.ds-btn--staticWhiteOutlined {
-    &:not(.ds-loading):disabled {
-      --ds-btn__background-color: #{$ds-color-component-primary-overlay};
-      --ds-btn__border-color: transparent;
-      --ds-btn__color: #{ds-color-text-disabled};
-      cursor: not-allowed;
+  &.ds-btn--xlarge {
+    @include ds-typography($ds-typography-detailstandard-button-xlarge);
+    --ds-btn__icon-size: #{ds-px-to-rem(32px)};
+    @at-root .ds-force-px#{&} {
+      @include ds-typography($ds-typography-detailstandard-button-xlarge, true);
+      --ds-btn__icon-size: 32px;
     }
   }
 
-  @include ds-typography($ds-typography-detailstandard-button);
   cursor: pointer;
   border: $ds-btn-outlined__border-width solid var(--ds-btn__border-color);
   border-radius: ds-border-radius(x1);
-  padding: ds-spacing($ds-s-075, rem) - ds-px-to-rem($ds-btn-outlined__border-width) ds-spacing($ds-s-150, rem) - ds-px-to-rem(
-      $ds-btn-outlined__border-width
-    );
   position: relative;
   background-color: var(--ds-btn__background-color);
   color: var(--ds-btn__color);
@@ -108,6 +128,11 @@ $ds-btn__icon-size: 24px;
     outline-offset: 2px;
   }
 
+  &:not(.ds-loading):disabled {
+    opacity: $ds-opacity-component-disabled;
+    cursor: not-allowed;
+  }
+
   @at-root a#{&} {
     box-sizing: border-box;
     text-align: center;
@@ -134,12 +159,12 @@ $ds-btn__icon-size: 24px;
   }
 
   @include ds-hover() {
-    &:hover:not(:disabled):not(.ds-loading)::before {
-      background: var(--ds-btn__background-color-hover);
+    &:hover:not(:disabled):not(.ds-loading) {
+      opacity: $ds-opacity-component-hover-pressed;
     }
   }
   &:active:not(:disabled):not(.ds-loading)::before {
-    background: var(--ds-btn__background-color-active);
+    opacity: $ds-opacity-component-hover-pressed;
   }
 
   @include ds-loading();
@@ -151,8 +176,43 @@ $ds-btn__icon-size: 24px;
 }
 
 .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) {
@@ -162,15 +222,16 @@ $ds-btn__icon-size: 24px;
 }
 
 .ds-btn--icon-left,
-.ds-btn--icon-right {
+.ds-btn--icon-right,
+.ds-btn--selected,
+.ds-btn--icon-only {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   .ds-icon {
     display: flex;
-    height: ds-px-to-rem($ds-btn__icon-size);
-    width: ds-px-to-rem($ds-btn__icon-size);
-    margin: ds-spacing(0 0 0 $ds-s-050, rem);
+    height: var(--ds-btn__icon-size);
+    width: var(--ds-btn__icon-size);
     svg {
       fill: currentColor;
     }
@@ -178,63 +239,61 @@ $ds-btn__icon-size: 24px;
 }
 
 .ds-btn--icon-right {
-  padding-right: ds-px-to-rem(ds-spacing($ds-s-125) - $ds-btn-outlined__border-width);
-  &.ds-btn--small {
-    padding-right: ds-px-to-rem(ds-spacing($ds-s-100) - $ds-btn-outlined__border-width);
+  .ds-icon {
+    margin: ds-spacing(0 0 0 $ds-s-050, rem);
+    @at-root .ds-force-px#{&} {
+      margin: ds-spacing(0 0 0 $ds-s-050);
+    }
+  }
+  &.ds-btn--small .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);
+    }
   }
 }
 
-.ds-btn--icon-left {
+.ds-btn--icon-left,
+.ds-btn--selected:not(.ds-btn--icon-only) {
   flex-direction: row-reverse;
-  padding-left: ds-px-to-rem(ds-spacing($ds-s-125) - $ds-btn-outlined__border-width);
   .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 {
-    padding-left: ds-px-to-rem(ds-spacing($ds-s-100) - $ds-btn-outlined__border-width);
-  }
-}
-
-.ds-btn--brand,
-.ds-btn--business,
-.ds-btn--primary,
-.ds-btn--staticWhiteFilled {
-  &:not(.ds-loading):disabled {
-    opacity: $ds-opacity-component-disabled;
-    cursor: not-allowed;
+  &.ds-btn--small .ds-icon {
+    margin: ds-spacing(0 $ds-s-025 0 0, rem);
+    @at-root .ds-force-px#{&} {
+      margin: ds-spacing(0 $ds-s-025 0 0);
+    }
   }
 }
 
-.ds-btn.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;
-  @include ds-typography($ds-typography-detailstandard-button, true);
-
-  &.ds-btn--icon-left,
-  &.ds-btn--icon-right {
-    .ds-icon {
-      margin: ds-spacing(0 0 0 $ds-s-050);
-      height: $ds-btn__icon-size;
-      width: $ds-btn__icon-size;
-    }
+.ds-btn--toggle {
+  .ds-btn__on,
+  .ds-btn__off {
+    align-items: center;
   }
-  &.ds-btn--icon-right {
-    padding-right: ds-spacing($ds-s-125)-$ds-btn-outlined__border-width;
+  .ds-btn__on {
+    display: none;
   }
-  &.ds-btn--icon-left {
-    padding-left: ds-spacing($ds-s-125)-$ds-btn-outlined__border-width;
-    .ds-icon {
-      margin: ds-spacing(0 $ds-s-050 0 0);
+  &.ds-btn--selected {
+    .ds-btn__on {
+      display: flex;
     }
-  }
-  &.ds-btn--small {
-    padding: ds-spacing($ds-s-050)-$ds-btn-outlined__border-width ds-spacing($ds-s-125)-$ds-btn-outlined__border-width;
-    &.ds-btn--icon-right {
-      padding-right: ds-spacing($ds-s-100)-$ds-btn-outlined__border-width;
+    .ds-btn__off {
+      display: none;
     }
-    &.ds-btn--icon-left {
-      padding-left: ds-spacing($ds-s-100)-$ds-btn-outlined__border-width;
+  }
+
+  // we have to override spinner styling since spinner variant is based on "off" button variant
+  &.ds-btn--selected.ds-loading:not(.ds-btn--icon-only) {
+    .ds-spinner__inner {
+      border-top-color: $ds-color-icon-primary;
+      &::before {
+        border-color: $ds-color-icon-primary;
+      }
     }
   }
 }

package/components/button-toggle/README.md

@@ -14,8 +14,8 @@
 |text | String | yes | | | |
 |selectedText | String | yes | | | |
 |disabled | bool | no | true, false | false | |
-|variant | String | no | brand, SecondaryFilled | brand | Design variant |
-|size| String | no | default, small, xsmall | default | |
+|variant | String | no | primary, secondary, brand | primary | Design variant |
+|size| String | no | small, medium, large | medium | |
 |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 } |
 |loading | bool | no | true, false | false | |
@@ -50,7 +50,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/button-toggle/button-toggle.njk

@@ -1,39 +1,20 @@
-{% 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/components/button/button.njk' import Button %}
 
 {% macro ButtonToggle(params) %}
-  {%- set componentClassName = "ds-btn-toggle" %}
-  {%- set classNamePrefix = componentClassName + "--" %}
-  {%- set attributes = getAttributes(params.attributes) %}
-  {%- set ariaLabel = 'aria-label="' + params.text + '"' if not params.attributes["aria-label"] else "" %}
-  {%- set buttonVariant = params.variant | default("brand") %}
-
-  {%- set spinnerMap = { primary: "secondary", brand: "onBrand", business: "onBusiness" } %}
-  {%- set spinnerVariant = spinnerMap[buttonVariant] | default("primary") %}
-  {%- set spinnerSize = "xsmall" if params.size == "xsmall" else "small" %}
-
-  {%- set loadingHtml %}
-    {{ Spinner({ size: spinnerSize, variant: spinnerVariant, forcePx: params.forcePx, attributes: { "aria-hidden": "true" } }) }}
-  {% endset %}
-
-  {%- set classes = [
-    componentClassName,
-    classNamePrefix + buttonVariant,
-    classNamePrefix + "selected" if params.selected,
-    classNamePrefix + params.size if params.size and params.size !== "default",
-    classNamePrefix + "full-width" if params.fullWidth,
-    classNamePrefix + "mobile-full-width" if params.mobile and params.mobile.fullWidth,
-    "ds-loading" if params.loading,
-    "ds-force-px" if params.forcePx,
-    params.classNames if params.classNames
-  ] | join(" ") %}
-
-  <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">
-      {{ IconUse({ icon: "check" }) }} <span>{{ params.selectedText }}</span>
-    </span>
-    {{ loadingHtml | safe }}
-  </button>
+  {{ Button({
+    isToggle: true,
+    rounded: true,
+    selected: params.selected,
+    text: params.text,
+    selectedText: params.selectedText,
+    variant: params.variant,
+    disabled: params.disabled,
+    size: params.size,
+    fullWidth: params.fullWidth,
+    mobile: params.mobile,
+    loading: params.loading,
+    forcePx: params.forcePx,
+    classNames: params.classNames,
+    attributes: params.attributes
+  }) }}
 {% endmacro %}