@bonniernews/dn-design-system-web 1.0.0-alpha.2 → 1.0.0-alpha.20

package/CHANGELOG.md

@@ -3,6 +3,164 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.0.0-alpha.20 (2023-01-13)
+
+
+### Features
+
+* **web:** helper for link styling ([#563](https://github.com/BonnierNews/dn-design-system/issues/563)) ([0895152](https://github.com/BonnierNews/dn-design-system/commit/0895152a9f9aa1e23b6ff9fbbea2a87f1f62f1eb))
+
+
+
+## 1.0.0-alpha.19 (2023-01-12)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [1.0.0-alpha.18](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.0.0-alpha.17...@bonniernews/dn-design-system-web@1.0.0-alpha.18) (2023-01-12)
+
+
+### Bug Fixes
+
+* **web:** adjust font weight for variable font ([#551](https://github.com/BonnierNews/dn-design-system/issues/551)) ([019e691](https://github.com/BonnierNews/dn-design-system/commit/019e6917d9826644d7f8112272a81093e348ed1a))
+
+
+
+## [1.0.0-alpha.17](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.0.0-alpha.16...@bonniernews/dn-design-system-web@1.0.0-alpha.17) (2023-01-11)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [1.0.0-alpha.16](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.0.0-alpha.15...@bonniernews/dn-design-system-web@1.0.0-alpha.16) (2023-01-05)
+
+
+### Bug Fixes
+
+* **web:** remove large container variants of list items ([#548](https://github.com/BonnierNews/dn-design-system/issues/548)) ([bf699c9](https://github.com/BonnierNews/dn-design-system/commit/bf699c92a9cca51dc1f662b95047c58954d0f058))
+
+
+
+## 1.0.0-alpha.15 (2023-01-05)
+
+
+### Bug Fixes
+
+* **web:** update tests to include  checkbox radio ([#546](https://github.com/BonnierNews/dn-design-system/issues/546)) ([bed3718](https://github.com/BonnierNews/dn-design-system/commit/bed3718fa6d9074294e5665af80e204d9ca5dee2))
+
+
+
+## [1.0.0-alpha.14](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.0.0-alpha.13...@bonniernews/dn-design-system-web@1.0.0-alpha.14) (2023-01-04)
+
+
+### Bug Fixes
+
+* **web:** update radiobuttons can have attribues on each radiobutton ([#543](https://github.com/BonnierNews/dn-design-system/issues/543)) ([be47d7f](https://github.com/BonnierNews/dn-design-system/commit/be47d7fbe2fca6d70935cff1640a8627b45ff99d))
+
+
+
+## [1.0.0-alpha.13](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.0.0-alpha.12...@bonniernews/dn-design-system-web@1.0.0-alpha.13) (2023-01-04)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## 1.0.0-alpha.12 (2023-01-04)
+
+
+### Features
+
+* **web:** toggle buttons for standard and text buttons ([#535](https://github.com/BonnierNews/dn-design-system/issues/535)) ([216e51e](https://github.com/BonnierNews/dn-design-system/commit/216e51edc0aa1cef80d8b25b00da7f0c1139a428))
+
+
+
+## 1.0.0-alpha.11 (2023-01-02)
+
+
+### Bug Fixes
+
+* **web:** wrap checkbox and radiobutton in form-field ([#458](https://github.com/BonnierNews/dn-design-system/issues/458)) ([18169ed](https://github.com/BonnierNews/dn-design-system/commit/18169edc295dc9ec7c92b690e98d306b0903bdbb))
+
+
+
+## [1.0.0-alpha.10](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.0.0-alpha.9...@bonniernews/dn-design-system-web@1.0.0-alpha.10) (2022-12-23)
+
+
+### Features
+
+* **web:** add static white filled and outline button ([#534](https://github.com/BonnierNews/dn-design-system/issues/534)) ([d50c4f3](https://github.com/BonnierNews/dn-design-system/commit/d50c4f37a5ca429168a28416d05b38dd7cf4847f))
+
+
+
+## [1.0.0-alpha.9](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.0.0-alpha.8...@bonniernews/dn-design-system-web@1.0.0-alpha.9) (2022-12-22)
+
+
+### Bug Fixes
+
+* **web:** add spinner to buttons ([#530](https://github.com/BonnierNews/dn-design-system/issues/530)) ([945a08d](https://github.com/BonnierNews/dn-design-system/commit/945a08d957ae794dc29dc15806849de807b979c3))
+
+
+
+## [1.0.0-alpha.8](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.0.0-alpha.7...@bonniernews/dn-design-system-web@1.0.0-alpha.8) (2022-12-21)
+
+
+### Features
+
+* **web:** new variant on icon button - elevated ([#526](https://github.com/BonnierNews/dn-design-system/issues/526)) ([98bc55d](https://github.com/BonnierNews/dn-design-system/commit/98bc55d98a43d99cda12c14eac1a47b1afdabc3d))
+
+
+
+## 1.0.0-alpha.7 (2022-12-21)
+
+
+### Bug Fixes
+
+* **web:** new design for disabled standard button ([#527](https://github.com/BonnierNews/dn-design-system/issues/527)) ([7505328](https://github.com/BonnierNews/dn-design-system/commit/7505328a76dee387807d5e4f34038e2fc38140d6))
+
+
+
+## [1.0.0-alpha.6](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.0.0-alpha.5...@bonniernews/dn-design-system-web@1.0.0-alpha.6) (2022-12-19)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [1.0.0-alpha.5](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.0.0-alpha.4...@bonniernews/dn-design-system-web@1.0.0-alpha.5) (2022-12-19)
+
+
+### Features
+
+* **foundations:** handle token types boxShadow and textDecoration ([#522](https://github.com/BonnierNews/dn-design-system/issues/522)) ([80339f3](https://github.com/BonnierNews/dn-design-system/commit/80339f35ca71e5f9efa0b8178ebbe8316619e2ab))
+
+
+
+## [1.0.0-alpha.4](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.0.0-alpha.3...@bonniernews/dn-design-system-web@1.0.0-alpha.4) (2022-12-19)
+
+
+### Features
+
+* **web:** spinner web component ([#515](https://github.com/BonnierNews/dn-design-system/issues/515)) ([f1146c2](https://github.com/BonnierNews/dn-design-system/commit/f1146c27434ed2c353bb27ee66e57d5b8145d043))
+
+
+
+## 1.0.0-alpha.3 (2022-12-16)
+
+
+### Bug Fixes
+
+* **web:** badge static white as text color ([#511](https://github.com/BonnierNews/dn-design-system/issues/511)) ([ae48f8d](https://github.com/BonnierNews/dn-design-system/commit/ae48f8ddc21fcc3c3fcd651560a37062689e2e0a))
+
+
+
 ## 1.0.0-alpha.2 (2022-12-15)
 
 **Note:** Version bump only for package @bonniernews/dn-design-system-web

package/assets/form-field/form-field.njk

@@ -8,10 +8,12 @@
 
   <div class="ds-form-field {{ wrapperClasses | join(" ") }} {{ classes | join(" ") }} {{"hidden" if params.type == "hidden" }}">
     {{ caller() if caller }}
-    <div class="ds-form-field__error-message js-field-error">
-      {{ Icon({ icon: "info-filled" }) }}
-      <span>{{ params.errorMessage | safe }}</span>
-    </div>
+    {% if params.errorMessage %}
+      <div class="ds-form-field__error-message js-field-error">
+        {{ Icon({ icon: "info-filled" }) }}
+        <span>{{ params.errorMessage | safe }}</span>
+      </div>
+    {% endif %}
     {% if params.helpText or params.helpHtml %}
       <p class="ds-form-field__help-text">{{ params.helpHtml | safe if params.helpHtml else params.helpText }}</p>
     {% endif %}

package/assets/form-field/form-field.scss

@@ -27,6 +27,7 @@ $ds-form-field__error-icon-size: 20px;
       height: ds-px-to-rem($ds-form-field__error-icon-size);
       width: ds-px-to-rem($ds-form-field__error-icon-size);
       line-height: 0;
+      flex-shrink: 0;
       svg {
         fill: var($ds-color-icon-critical);
       }

package/components/badge/badge.scss

@@ -12,7 +12,7 @@ $ds-badge__min-size: 8px;
 
   .ds-badge__inner {
     @include ds-typography($ds-typography-functional-meta02medium);
-    color: var($ds-color-text-on-brand);
+    color: var($ds-color-static-white);
     background-color: var($ds-color-component-brand);
     border: var($ds-color-border-secondary) ds-metrics-border-width(x2) solid;
     border-radius: 100px;

package/components/button/README.md

@@ -11,13 +11,13 @@
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |text | String | yes | | | |
 |disabled | bool | no | true, false | false | Note: only works on button-tag, not on a-tag |
-|variant | String | no | brand, business, primary, criticalOutlined, secondaryOutlined, SecondaryFilled | primary | Design variant |
+|variant | String | no | brand, business, criticalOutlined, primary, secondaryFilled, secondaryOutlined, staticWhiteFilled, staticWhiteOutlined | primary | Design variant |
 |size| String | no | default, small | default | |
 |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 | |
 |iconName | String | no | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icon-web--all |
-|~loading~ | bool | no | true, false | false | Not implemented |
+|loading | bool | no | true, false | false | |
 |type | String | no | button, submit | button | |
 |href | String | no | | | If href is set the button will be rendered as an a-tag |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |

package/components/button/button.njk

@@ -1,4 +1,5 @@
 {% from '@bonniernews/dn-design-system-web/foundations/icons/icon.njk' import Icon %}
+{% from '@bonniernews/dn-design-system-web/components/spinner/spinner.njk' import Spinner %}
 
 {% macro Button(params) %}
   {% set componentClassName = "ds-btn" %}
@@ -11,14 +12,22 @@
     {% endfor %}
   {% endset %}
 
-  {% if params.forcePx %}
-    {% set variant = (variant.push("ds-force-px"), variant) %}
+  {% set buttonVariant = params.variant | default("primary") %}
+  {% set variant = (variant.push(classNamePrefix + buttonVariant), variant) %}
+
+  {% set spinnerMap = { primary: "secondary", brand: "onBrand", business: "onBusiness", staticWhiteFilled: "staticBlack", staticWhiteOutlined: "staticWhite" } %}
+  {% set spinnerVariant = spinnerMap[buttonVariant] | default("primary") %}
+
+  {% set loadingHtml %}
+    {{ Spinner({ size: 'small', variant: spinnerVariant, forcePx: params.forcePx }) }}
+  {% endset %}
+
+  {% if params.loading %}
+    {% set variant = (variant.push("ds-loading"), variant) %}
   {% endif %}
 
-  {% if params.variant %}
-    {% set variant = (variant.push(classNamePrefix + params.variant), variant) %}
-  {% else %}
-    {% set variant = (variant.push(classNamePrefix + "primary"), variant) %}
+  {% if params.forcePx %}
+    {% set variant = (variant.push("ds-force-px"), variant) %}
   {% endif %}
 
   {% if params.size and params.size != "default" %}
@@ -45,8 +54,18 @@
   {% set classes = componentClassName + " " + variant | join(" ") %}
 
   {% if params.href %}
-    <a href="{{ params.href | default('#', true) }}" class="{{ classes }}" {{- attributes | safe}}><div class="{{ componentClassName + '__inner'}}"><span>{{ text }}</span>{{- iconSvg | safe if iconSvg -}}</div></a>
+    <a href="{{ params.href | default('#', true) }}" class="{{ classes }}" {{- attributes | safe}}>
+      <div class="{{ componentClassName + '__inner'}}">
+        <span>{{ text }}</span>
+        {{- iconSvg | safe if iconSvg -}} {{ loadingHtml | safe }}
+      </div>
+    </a>
   {% else %}
-    <button type="{{ params.type | default('button') }}" class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe}}><div class="{{ componentClassName + '__inner'}}"><span>{{ text }}</span>{{- iconSvg | safe if iconSvg -}}</div></button>
+    <button type="{{ params.type | default('button') }}" class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe}}>
+      <div class="{{ componentClassName + '__inner'}}">
+        <span>{{ text }}</span>
+        {{- iconSvg | safe if iconSvg -}} {{ loadingHtml | safe }}
+      </div>
+    </button>
   {% endif %}
 {% endmacro %}

package/components/button/button.scss

@@ -5,21 +5,13 @@
 @use "../../foundations/helpers/metrics.scss" as *;
 @use "../../foundations/helpers/utilities.scss" as *;
 @use "../../foundations/helpers/colors.scss" as *;
+@use "../../foundations/helpers/loading.scss" as *;
+@use "../spinner/spinner.scss" as *;
 
 $ds-btn-outlined__border-width: ds-metrics-border-width(x1);
 $ds-btn__min-clickable-area: 48px;
 $ds-btn__icon-size: 24px;
 
-@mixin ds-btn-disabled() {
-  cursor: not-allowed;
-  background-color: var($ds-color-component-primary-overlay);
-  border-color: transparent;
-  color: var($ds-color-text-disabled);
-  &::before {
-    background-color: unset;
-  }
-}
-
 .ds-btn {
   cursor: pointer;
   background-color: transparent;
@@ -30,6 +22,7 @@ $ds-btn__icon-size: 24px;
   align-items: center;
   justify-content: center;
   padding: 0;
+  position: relative;
 
   &:focus-visible {
     outline: none;
@@ -52,11 +45,6 @@ $ds-btn__icon-size: 24px;
     /* stylelint-disable-next-line */
     padding: ds-spacing-component(x3, rem) - ds-px-to-rem($ds-btn-outlined__border-width) ds-spacing-component(x6, rem) - ds-px-to-rem($ds-btn-outlined__border-width);
     position: relative;
-    @at-root .ds-force-px#{&} {
-      padding: ds-spacing-component(x3) - $ds-btn-outlined__border-width
-        ds-spacing-component(x6) - $ds-btn-outlined__border-width;
-      @include ds-typography($ds-typography-detailstandard-button, true);
-    }
     &::before {
       content: "";
       border-radius: inherit;
@@ -73,15 +61,14 @@ $ds-btn__icon-size: 24px;
     }
   }
 
-  &:hover:not(:disabled) .ds-btn__inner::before {
+  &:hover:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
     background-color: var($ds-color-component-primary-overlay);
   }
-  &:active:not(:disabled) .ds-btn__inner::before {
+  &:active:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
     background-color: var($ds-color-component-primary-overlay-02);
   }
-  &:disabled .ds-btn__inner {
-    @include ds-btn-disabled;
-  }
+
+  @include ds-loading();
 }
 
 .ds-btn--full-width {
@@ -92,8 +79,10 @@ $ds-btn__icon-size: 24px;
 }
 
 .ds-btn--small .ds-btn__inner {
-  padding: ds-spacing-component(x2)-$ds-btn-outlined__border-width
-    ds-spacing-component(x5)-$ds-btn-outlined__border-width;
+  padding: ds-px-to-rem(
+      ds-spacing-component(x2) - $ds-btn-outlined__border-width
+    )
+    ds-px-to-rem(ds-spacing-component(x5) - $ds-btn-outlined__border-width);
 }
 
 @include ds-mq-only-breakpoint(mobile) {
@@ -114,59 +103,40 @@ $ds-btn__icon-size: 24px;
     display: flex;
     height: ds-px-to-rem($ds-btn__icon-size);
     width: ds-px-to-rem($ds-btn__icon-size);
-    margin: ds-spacing-component(0 0 0 x2);
+    margin: ds-spacing-component(0 0 0 x2, rem);
     svg {
       fill: currentColor;
     }
   }
 }
 
-.ds-force-px {
-  &.ds-btn--icon-left .ds-btn__inner .ds-icon,
-  &.ds-btn--icon-right .ds-btn__inner .ds-icon {
-    height: $ds-btn__icon-size;
-    width: $ds-btn__icon-size;
-  }
-}
-
 .ds-btn--icon-right {
   .ds-btn__inner {
-    padding-right: ds-spacing-component(x5);
+    padding-right: ds-px-to-rem(
+      ds-spacing-component(x5) - $ds-btn-outlined__border-width
+    );
   }
-
-  &.ds-btn--secondaryOutlined,
-  &.ds-btn--destructive {
-    .ds-btn__inner {
-      padding-right: ds-spacing-component(x5)-$ds-btn-outlined__border-width;
-    }
-
-    &.ds-btn--small .ds-btn__inner {
-      padding-right: ds-spacing-component(x4)-$ds-btn-outlined__border-width;
-    }
+  &.ds-btn--small .ds-btn__inner {
+    padding-right: ds-px-to-rem(
+      ds-spacing-component(x4) - $ds-btn-outlined__border-width
+    );
   }
 }
 
 .ds-btn--icon-left {
   .ds-btn__inner {
     flex-direction: row-reverse;
-    padding-left: ds-spacing-component(x5);
+    padding-left: ds-px-to-rem(
+      ds-spacing-component(x5) - $ds-btn-outlined__border-width
+    );
     .ds-icon {
-      margin: ds-spacing-component(0 x2 0 0);
+      margin: ds-spacing-component(0 x2 0 0, rem);
     }
   }
   &.ds-btn--small .ds-btn__inner {
-    padding-left: ds-spacing-component(x4);
-  }
-
-  &.ds-btn--secondaryOutlined,
-  &.ds-btn--destructive {
-    .ds-btn__inner {
-      padding-left: ds-spacing-component(x5)-$ds-btn-outlined__border-width;
-    }
-
-    &.ds-btn--small .ds-btn__inner {
-      padding-left: ds-spacing-component(x4)-$ds-btn-outlined__border-width;
-    }
+    padding-left: ds-px-to-rem(
+      ds-spacing-component(x4) - $ds-btn-outlined__border-width
+    );
   }
 }
 
@@ -201,10 +171,10 @@ $ds-btn__icon-size: 24px;
   &:focus-visible .ds-btn__inner {
     outline-color: var($ds-color-border-focus-02);
   }
-  &:hover:not(:disabled) .ds-btn__inner::before {
+  &:hover:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
     background-color: var($ds-color-component-secondary-overlay);
   }
-  &:active:not(:disabled) .ds-btn__inner::before {
+  &:active:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
     background-color: var($ds-color-component-secondary-overlay-02);
   }
 }
@@ -237,7 +207,113 @@ $ds-btn__icon-size: 24px;
     border-color: var($ds-color-border-critical);
     color: var($ds-color-text-critical);
   }
+  &:not(:disabled) .ds-icon {
+    color: var($ds-color-icon-critical);
+  }
   &:focus-visible .ds-btn__inner {
     outline-color: var($ds-color-border-focus-03);
   }
 }
+
+.ds-btn--staticWhiteFilled {
+  .ds-btn__inner {
+    border-color: transparent;
+    background-color: var($ds-color-static-white);
+    color: var($ds-color-static-black);
+  }
+  &:focus-visible .ds-btn__inner {
+    outline-color: var($ds-color-border-focus-02);
+  }
+  &:hover:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
+    background-color: #0808081a; // static version of lightmode component-secondary-overlay
+  }
+  &:active:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
+    background-color: #08080833; // static version of lightmode component-secondary-overlay-2
+  }
+}
+
+.ds-btn--staticWhiteOutlined {
+  .ds-btn__inner {
+    background-color: transparent;
+    border-color: var($ds-color-static-white);
+    color: var($ds-color-static-white);
+  }
+  &:not(:disabled) .ds-icon {
+    color: var($ds-color-static-white);
+  }
+  &:focus-visible .ds-btn__inner {
+    outline-color: var($ds-color-static-white);
+  }
+  &:hover:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
+    background-color: rgba(255, 255, 255, 0.101960784);
+    // static version of darkmode component-secondary-overlay
+  }
+  &:active:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
+    background-color: rgba(255, 255, 255, 0.2);
+    // static version of darkmode component-secondary-overlay-2
+  }
+}
+
+.ds-btn--secondaryFilled,
+.ds-btn--secondaryOutlined,
+.ds-btn--criticalOutlined,
+.ds-btn--staticWhiteOutlined {
+  &:not(.ds-loading):disabled .ds-btn__inner {
+    cursor: not-allowed;
+    background-color: var($ds-color-component-primary-overlay);
+    border-color: transparent;
+    color: var($ds-color-text-disabled);
+    &::before {
+      background-color: unset;
+    }
+  }
+}
+
+.ds-btn--brand,
+.ds-btn--business,
+.ds-btn--primary,
+.ds-btn--staticWhiteFilled {
+  &:not(.ds-loading):disabled {
+    opacity: 0.6; // @todo replace with opacity token if/when available
+    .ds-btn__inner {
+      cursor: not-allowed;
+    }
+  }
+}
+
+.ds-btn.ds-force-px {
+  .ds-btn__inner {
+    padding: ds-spacing-component(x3) - $ds-btn-outlined__border-width
+      ds-spacing-component(x6) - $ds-btn-outlined__border-width;
+    @include ds-typography($ds-typography-detailstandard-button, true);
+  }
+  &.ds-btn--icon-left .ds-btn__inner,
+  &.ds-btn--icon-right .ds-btn__inner {
+    .ds-icon {
+      margin: ds-spacing-component(0 0 0 x2);
+      height: $ds-btn__icon-size;
+      width: $ds-btn__icon-size;
+    }
+  }
+  &.ds-btn--icon-right .ds-btn__inner {
+    padding-right: ds-spacing-component(x5)-$ds-btn-outlined__border-width;
+  }
+  &.ds-btn--icon-left .ds-btn__inner {
+    padding-left: ds-spacing-component(x5)-$ds-btn-outlined__border-width;
+    .ds-icon {
+      margin: ds-spacing-component(0 x2 0 0);
+    }
+  }
+  &.ds-btn--small {
+    .ds-btn__inner {
+      padding: ds-spacing-component(x2)-$ds-btn-outlined__border-width
+        ds-spacing-component(x5)-$ds-btn-outlined__border-width;
+    }
+    &.ds-btn--icon-right .ds-btn__inner {
+      padding-right: ds-spacing-component(x4)-$ds-btn-outlined__border-width;
+    }
+    &.ds-btn--icon-left .ds-btn__inner {
+      padding-left: ds-spacing-component(x4)-$ds-btn-outlined__border-width;
+    }
+  }
+}

package/components/button-toggle/README.md

@@ -0,0 +1,54 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/button-toggle](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/button-toggle)
+- Storybook: [Button > Web](https://designsystem.dn.se/?path=/story/components-app-web-button-togglebutton-web)
+
+----
+
+# ButtonToggle
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|selected | bool | no | true, false | false | |
+|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 | default | |
+|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 | |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|classNames | String | no | | | Ex. "my-special-class" |
+|forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size
+
+## Minimum requirement example
+
+### Nunjucks
+
+These are copy paste friendly examples to quickliy get started using a component.
+
+```html
+{% from '@bonniernews/dn-design-system-web/components/button-toggle/button-toggle.njk' import ButtonToggle %}
+
+{{ ButtonToggle({
+  text: 'Följ',
+  selectedText: 'Följer',
+  variant: 'brand',
+  mobile: {
+    fullWidth: true
+  }
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/button-toggle/button-toggle";
+```
+
+### Javascript
+
+```javascript
+import textInput from '@bonniernews/dn-design-system-web/components/button-toggle/button-toggle.js'
+DsButtonToggle();
+```

package/components/button-toggle/button-toggle.js

@@ -0,0 +1,9 @@
+export function DsButtonToggle() {
+  const toggleElements = Array.from(document.getElementsByClassName("ds-btn-toggle"));
+  toggleElements.forEach((toggleEl) => {
+    toggleEl.addEventListener("click", () => {
+      if (toggleEl.classList.contains("ds-btn-toggle--disabled")) return;
+      toggleEl.classList.toggle("ds-btn-toggle--selected");
+    });
+  });
+}

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

@@ -0,0 +1,63 @@
+{% from '@bonniernews/dn-design-system-web/foundations/icons/icon.njk' import Icon %}
+{% from '@bonniernews/dn-design-system-web/components/spinner/spinner.njk' import Spinner %}
+
+{% macro ButtonToggle(params) %}
+  {% set componentClassName = "ds-btn-toggle" %}
+  {% set classNamePrefix = componentClassName + "--" %}
+  {% set variant = [] %}
+  {% set attributes %}
+    {% for attribute, value in params.attributes %}
+      {{attribute}}="{{value}}"
+    {% endfor %}
+  {% endset %}
+
+  {% if params.selected %}
+    {% set variant = (variant.push(classNamePrefix + "selected"), variant) %}
+  {% endif %}
+
+  {% set buttonVariant = params.variant | default("brand") %}
+  {% set variant = (variant.push(classNamePrefix + buttonVariant), variant) %}
+
+  {% set spinnerMap = { primary: "secondary", brand: "onBrand", business: "onBusiness" } %}
+  {% set spinnerVariant = spinnerMap[buttonVariant] | default("primary") %}
+
+  {% set loadingHtml %}
+    {{ Spinner({ size: 'small', variant: spinnerVariant, forcePx: params.forcePx }) }}
+  {% endset %}
+
+  {% if params.loading %}
+    {% set variant = (variant.push("ds-loading"), variant) %}
+  {% endif %}
+
+  {% if params.forcePx %}
+    {% set variant = (variant.push("ds-force-px"), variant) %}
+  {% endif %}
+
+  {% if params.size and params.size != "default" %}
+    {% set variant = (variant.push(classNamePrefix + params.size), variant) %}
+  {% endif %}
+
+  {% if params.fullWidth %}
+    {% set variant = (variant.push(classNamePrefix + "full-width"), variant) %}
+  {% endif %}
+
+  {% if params.mobile and params.mobile.fullWidth %}
+    {% set variant = (variant.push(classNamePrefix + "mobile-full-width"), variant) %}
+  {% endif %}
+
+  {% if params.classNames %}
+    {% set variant = (variant.push(params.classNames), variant) %}
+  {% endif%}
+
+  {% set classes = componentClassName + " " + variant | join(" ") %}
+
+  <button type="button'" class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe}}>
+      <div class="{{ componentClassName + '__inner'}}">
+        <div class="{{ componentClassName + '__off'}}"><span>{{ params.text }}</span></div>
+        <div class="{{ componentClassName + '__on'}}">
+          {{ Icon({ icon: "check" }) }} <span>{{ params.selectedText }}</span>
+        </div>
+        {{ loadingHtml | safe }}
+      </div>
+    </button>
+{% endmacro %}