@bonniernews/dn-design-system-web 1.1.0-alpha.8 → 2.0.0-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,182 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 2.0.0-alpha.0 (2023-02-14)
+
+
+### ⚠ BREAKING CHANGES
+
+* **foundations:** update tokens from Figma (#667)
+
+### Miscellaneous Chores
+
+* **foundations:** update tokens from Figma ([#667](https://github.com/BonnierNews/dn-design-system/issues/667)) ([b15fac1](https://github.com/BonnierNews/dn-design-system/commit/b15fac100e22a073c3e018ba13d2390c18429177))
+
+
+
+## 1.1.0-alpha.27 (2023-02-14)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## 1.1.0-alpha.26 (2023-02-13)
+
+
+### Bug Fixes
+
+* **web:** add article-body variant to link helper ([#662](https://github.com/BonnierNews/dn-design-system/issues/662)) ([3378bbe](https://github.com/BonnierNews/dn-design-system/commit/3378bbeafffdea56228dc207b9940dcc4e4ffdd2))
+
+
+
+## 1.1.0-alpha.25 (2023-02-13)
+
+
+### Features
+
+* **web:** topic variant of list item ([#650](https://github.com/BonnierNews/dn-design-system/issues/650)) ([45f2c02](https://github.com/BonnierNews/dn-design-system/commit/45f2c02f5745e30844caad3df0802195402c4676))
+
+
+
+## 1.1.0-alpha.24 (2023-02-10)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [1.1.0-alpha.23](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.1.0-alpha.22...@bonniernews/dn-design-system-web@1.1.0-alpha.23) (2023-02-08)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [1.1.0-alpha.22](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.1.0-alpha.21...@bonniernews/dn-design-system-web@1.1.0-alpha.22) (2023-02-08)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [1.1.0-alpha.21](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.1.0-alpha.20...@bonniernews/dn-design-system-web@1.1.0-alpha.21) (2023-02-07)
+
+
+### Features
+
+* **web:** add on-media icon button variant ([#637](https://github.com/BonnierNews/dn-design-system/issues/637)) ([f556c6b](https://github.com/BonnierNews/dn-design-system/commit/f556c6bdd6496007aeaf688ebe09781113d6dc9e))
+
+
+
+## [1.1.0-alpha.20](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.1.0-alpha.19...@bonniernews/dn-design-system-web@1.1.0-alpha.20) (2023-02-07)
+
+
+### Features
+
+* **web:** update toggle buttons and spinners ([#633](https://github.com/BonnierNews/dn-design-system/issues/633)) ([b20911d](https://github.com/BonnierNews/dn-design-system/commit/b20911db947901edff357a1c9fa470eaf294f11a))
+
+
+
+## 1.1.0-alpha.19 (2023-02-07)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [1.1.0-alpha.18](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.1.0-alpha.17...@bonniernews/dn-design-system-web@1.1.0-alpha.18) (2023-02-06)
+
+
+### Bug Fixes
+
+* **web:** fix broken media query ([#638](https://github.com/BonnierNews/dn-design-system/issues/638)) ([85ff24c](https://github.com/BonnierNews/dn-design-system/commit/85ff24c5e6119133ded11ba86c2ee09cf1d25a47))
+
+
+
+## [1.1.0-alpha.17](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.1.0-alpha.16...@bonniernews/dn-design-system-web@1.1.0-alpha.17) (2023-02-06)
+
+
+### Features
+
+* **web:** add support for textCase in typography tokens ([#636](https://github.com/BonnierNews/dn-design-system/issues/636)) ([e0b9327](https://github.com/BonnierNews/dn-design-system/commit/e0b93276dbd574ee0f7718b757ce6eb31c998425))
+
+
+
+## [1.1.0-alpha.16](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.1.0-alpha.15...@bonniernews/dn-design-system-web@1.1.0-alpha.16) (2023-02-03)
+
+
+### Bug Fixes
+
+* **web:** remove excessive css from src package ([#632](https://github.com/BonnierNews/dn-design-system/issues/632)) ([c322bdb](https://github.com/BonnierNews/dn-design-system/commit/c322bdb7e764c5e619270bbabab9da25e96bb8ad))
+
+
+
+## [1.1.0-alpha.15](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.1.0-alpha.14...@bonniernews/dn-design-system-web@1.1.0-alpha.15) (2023-02-03)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [1.1.0-alpha.14](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.1.0-alpha.13...@bonniernews/dn-design-system-web@1.1.0-alpha.14) (2023-02-03)
+
+
+### Bug Fixes
+
+* **web:** remove hover styling from list item on small devices ([#630](https://github.com/BonnierNews/dn-design-system/issues/630)) ([6a13dbd](https://github.com/BonnierNews/dn-design-system/commit/6a13dbd065dcf6ee430e46134b45385151e35c17))
+
+
+
+## 1.1.0-alpha.13 (2023-02-02)
+
+
+### Bug Fixes
+
+* **web:** add opsz to prevent ios bug ([#628](https://github.com/BonnierNews/dn-design-system/issues/628)) ([0c206b6](https://github.com/BonnierNews/dn-design-system/commit/0c206b6c82ef85f8193d31be44e323ad15448bc2))
+
+
+
+## [1.1.0-alpha.12](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.1.0-alpha.11...@bonniernews/dn-design-system-web@1.1.0-alpha.12) (2023-02-01)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## 1.1.0-alpha.11 (2023-02-01)
+
+
+### Bug Fixes
+
+* **web:** add support for combined shadows ([#624](https://github.com/BonnierNews/dn-design-system/issues/624)) ([c5a9bb8](https://github.com/BonnierNews/dn-design-system/commit/c5a9bb8f2b9c156d2d39f984834ed9327e2950b5))
+
+
+
+## [1.1.0-alpha.10](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.1.0-alpha.9...@bonniernews/dn-design-system-web@1.1.0-alpha.10) (2023-02-01)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [1.1.0-alpha.9](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.1.0-alpha.8...@bonniernews/dn-design-system-web@1.1.0-alpha.9) (2023-01-31)
+
+
+### Bug Fixes
+
+* **web:** always set width on icons ([#619](https://github.com/BonnierNews/dn-design-system/issues/619)) ([69f60b1](https://github.com/BonnierNews/dn-design-system/commit/69f60b152846fdffbe00207479e9ae0cc6e1d7d7))
+
+
+
 ## [1.1.0-alpha.8](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.1.0-alpha.7...@bonniernews/dn-design-system-web@1.1.0-alpha.8) (2023-01-30)
 
 **Note:** Version bump only for package @bonniernews/dn-design-system-web

package/README.md

@@ -1,6 +1,6 @@
 # @bonniernews/dn-design-system-web
 
-Components and foundations of DN design system for web
+Foundations, components and helpers of DN design system for web
 
 ## Useful links
 

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

@@ -3,6 +3,7 @@
 @use "../../foundations/helpers/utilities.scss" as *;
 @use "../../foundations/helpers/typography.scss" as *;
 @use "../../foundations/helpers/colors.scss" as *;
+@use "../../foundations/icons/icon.scss" as *;
 
 $ds-form-field__error-icon-size: 20px;
 

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

@@ -5,6 +5,7 @@
 @use "../../foundations/helpers/utilities.scss" as *;
 @use "../../foundations/helpers/colors.scss" as *;
 @use "../../foundations/helpers/links.scss" as *;
+@use "../../foundations/helpers/shadows.scss" as *;
 @use "../button/button.scss" as *;
 @use "../icon-button/icon-button.scss" as *;
 @use "../list-item/list-item.scss" as *;
@@ -32,7 +33,8 @@
   .ds-buddy-menu__inner {
     background-color: $ds-color-surface-elevated;
     border-radius: ds-metrics-border-radius(x2);
-    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
+    box-shadow: ds-shadow-get-box-shadow($ds-shadow-drop-shadow-a),
+      ds-shadow-get-box-shadow($ds-shadow-drop-shadow-b);
     position: relative;
     z-index: 1;
   }

package/components/button/button.scss

@@ -6,6 +6,7 @@
 @use "../../foundations/helpers/utilities.scss" as *;
 @use "../../foundations/helpers/colors.scss" as *;
 @use "../../foundations/helpers/loading.scss" as *;
+@use "../../foundations/icons/icon.scss" as *;
 @use "../spinner/spinner.scss" as *;
 
 $ds-btn-outlined__border-width: ds-metrics-border-width(x1);

package/components/button-toggle/README.md

@@ -16,6 +16,7 @@
 |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 |
+|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 |
 |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" } |
@@ -49,6 +50,7 @@ These are copy paste friendly examples to quickliy get started using a component
 ### Javascript
 
 ```javascript
-import textInput from '@bonniernews/dn-design-system-web/components/button-toggle/button-toggle.js'
-DsButtonToggle();
+import dsButtonToggle from '@bonniernews/dn-design-system-web/components/button-toggle/button-toggle.js'
+const toggleElements = Array.from(document.getElementsByClassName("ds-btn-toggle"));
+dsButtonToggle(toggleElements);
 ```

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

@@ -1,5 +1,10 @@
-export function DsButtonToggle() {
-  const toggleElements = Array.from(document.getElementsByClassName("ds-btn-toggle"));
+export {
+  dsButtonToggle,
+  dsButtonToggleAll
+};
+
+function dsButtonToggle(toggleElements = []) {
+  if (!toggleElements.length) return;
   toggleElements.forEach((toggleEl) => {
     toggleEl.addEventListener("click", () => {
       if (toggleEl.classList.contains("ds-btn-toggle--disabled")) return;
@@ -7,3 +12,8 @@ export function DsButtonToggle() {
     });
   });
 }
+
+function dsButtonToggleAll() {
+  const toggleElements = Array.from(document.getElementsByClassName("ds-btn-toggle"));
+  dsButtonToggle(toggleElements);
+}

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

@@ -20,9 +20,10 @@
 
   {% 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: 'small', variant: spinnerVariant, forcePx: params.forcePx }) }}
+    {{ Spinner({ size: spinnerSize, variant: spinnerVariant, forcePx: params.forcePx }) }}
   {% endset %}
 
   {% if params.loading %}
@@ -41,6 +42,10 @@
     {% set variant = (variant.push(classNamePrefix + "full-width"), variant) %}
   {% endif %}
 
+  {% if params.condensed %}
+    {% set variant = (variant.push(classNamePrefix + "condensed"), variant) %}
+  {% endif %}
+
   {% if params.mobile and params.mobile.fullWidth %}
     {% set variant = (variant.push(classNamePrefix + "mobile-full-width"), variant) %}
   {% endif %}
@@ -51,13 +56,13 @@
 
   {% 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 }}
+  <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>
-    </button>
+      {{ loadingHtml | safe }}
+    </div>
+  </button>
 {% endmacro %}

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

@@ -6,24 +6,31 @@
 @use "../../foundations/helpers/utilities.scss" as *;
 @use "../../foundations/helpers/colors.scss" as *;
 @use "../../foundations/helpers/loading.scss" as *;
+@use "../../foundations/icons/icon.scss" as *;
 @use "../spinner/spinner.scss" as *;
 
 $ds-btn-toggle-outlined__border-width: ds-metrics-border-width(x1);
 $ds-btn-toggle__min-clickable-area: 48px;
 $ds-btn-toggle__icon-size: 24px;
+$ds-btn-toggle__icon-size-xsmall: 20px;
 
 .ds-btn-toggle {
   cursor: pointer;
   background-color: transparent;
   border: none;
-  min-width: $ds-btn-toggle__min-clickable-area;
-  min-height: $ds-btn-toggle__min-clickable-area;
+  min-width: 0;
+  min-height: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   position: relative;
 
+  &:not(.ds-btn-toggle--condensed) {
+    min-width: $ds-btn-toggle__min-clickable-area;
+    min-height: $ds-btn-toggle__min-clickable-area;
+  }
+
   &:focus-visible {
     outline: none;
     .ds-btn-toggle__inner {
@@ -90,6 +97,16 @@ $ds-btn-toggle__icon-size: 24px;
     );
 }
 
+.ds-btn-toggle--xsmall .ds-btn-toggle__inner {
+  @include ds-typography($ds-typography-detailstandard-button-small);
+  padding: ds-px-to-rem(
+      ds-spacing-component(x1) - $ds-btn-toggle-outlined__border-width
+    )
+    ds-px-to-rem(
+      ds-spacing-component(x3) - $ds-btn-toggle-outlined__border-width
+    );
+}
+
 @include ds-mq-only-breakpoint(mobile) {
   .ds-btn-toggle--mobile-full-width {
     &,
@@ -178,6 +195,17 @@ $ds-btn-toggle__icon-size: 24px;
     );
   }
 
+  &.ds-btn-toggle--xsmall .ds-btn-toggle__inner {
+    padding-left: ds-px-to-rem(
+      ds-spacing-component(x2) - $ds-btn-toggle-outlined__border-width
+    );
+    .ds-icon {
+      height: ds-px-to-rem($ds-btn-toggle__icon-size-xsmall);
+      width: ds-px-to-rem($ds-btn-toggle__icon-size-xsmall);
+      margin: ds-spacing-component(0 x1 0 0, rem);
+    }
+  }
+
   &:focus-visible .ds-btn-toggle__inner {
     outline-color: $ds-color-border-focus-02;
   }
@@ -216,4 +244,19 @@ $ds-btn-toggle__icon-size: 24px;
       padding-left: ds-spacing-component(x4)-$ds-btn-toggle-outlined__border-width;
     }
   }
+  &.ds-btn-toggle--xsmall {
+    .ds-btn-toggle__inner {
+      @include ds-typography($ds-typography-detailstandard-button-small, true);
+      padding: ds-spacing-component(x1)-$ds-btn-toggle-outlined__border-width
+        ds-spacing-component(x3)-$ds-btn-toggle-outlined__border-width;
+      .ds-icon {
+        margin: ds-spacing-component(0 x1 0 0);
+        height: $ds-btn-toggle__icon-size-xsmall;
+        width: $ds-btn-toggle__icon-size-xsmall;
+      }
+    }
+    &.ds-btn-toggle--selected .ds-btn-toggle__inner {
+      padding-left: ds-spacing-component(x2)-$ds-btn-toggle-outlined__border-width;
+    }
+  }
 }

package/components/checkbox/checkbox.scss

@@ -4,6 +4,7 @@
 @use "../../foundations/helpers/utilities.scss" as *;
 @use "../../foundations/helpers/colors.scss" as *;
 @use "../../assets/form-field/form-field.scss" as *;
+@use "../../foundations/icons/icon.scss" as *;
 
 $ds-checkbox__icon-size: 24px;
 

package/components/icon-button/README.md

@@ -1,5 +1,5 @@
 - GitHub: [BonnierNews/dn-design-system/../web/src/components/icon-button](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/icon-button)
-- Storybook: [IconButton > Web](https://designsystem.dn.se/?path=/story/components-app-web-iconbutton-web)
+- Storybook: [IconButton > Web](https://designsystem.dn.se/?path=/story/components-app-web-iconbutton-iconbutton-web)
 
 ----
 

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

@@ -1,10 +1,5 @@
-@use "../../foundations/helpers/spacing.scss" as *;
-@use "../../foundations/helpers/typography.scss" as *;
-@use "../../foundations/helpers/metrics.scss" as *;
-@use "../../foundations/helpers/utilities.scss" as *;
-@use "../../foundations/helpers/colors.scss" as *;
-@use "../../foundations/helpers/shadows.scss" as *;
-@use "../../foundations/helpers/loading.scss" as *;
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../foundations/icons/icon.scss" as *;
 @use "../spinner/spinner.scss" as *;
 
 $ds-icon-btn__border-radius: 50%;
@@ -62,9 +57,10 @@ $ds-btn-outlined__border-width: ds-metrics-border-width(x1);
       }
     }
   }
-
-  &:hover:not(.ds-loading) .ds-icon-btn__inner::before {
-    background-color: $ds-color-component-primary-overlay;
+  @include ds-hover() {
+    &:hover:not(.ds-loading) .ds-icon-btn__inner::before {
+      background-color: $ds-color-component-primary-overlay;
+    }
   }
   &:active:not(.ds-loading) .ds-icon-btn__inner::before {
     background-color: $ds-color-component-primary-overlay-02;
@@ -125,7 +121,7 @@ $ds-btn-outlined__border-width: ds-metrics-border-width(x1);
 
 .ds-icon-btn--elevated {
   .ds-icon-btn__inner {
-    @include ds-shadow-get-drop-shadow($ds-shadow-drop-shadow-02);
+    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;
@@ -134,3 +130,31 @@ $ds-btn-outlined__border-width: ds-metrics-border-width(x1);
     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/README.md

@@ -0,0 +1,52 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/icon-button-toggle](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/icon-button-toggle)
+- Storybook: [IconButton > Web](https://designsystem.dn.se/?path=/story/components-app-web-iconbutton-toggleiconbutton-web)
+
+----
+
+# Icon button toggle
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|selected | bool | no | true, false | false | |
+|iconName | String | yes | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icon-web--all |
+|selectedIconName | String | yes | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icon-web--all |v
+|disabled | bool | no | true, false | false | Note: only works on button-tag, not on a-tag |
+|variant | String | no | outlined, transparent | outlined | Design variant |
+|size| String | no | default, small, large | default | |
+|loading | bool | no | true, false | false | |
+|a11y.visuallyHidden | Object | no | | | Ex. a11y: { visuallyHidden: "Dela på TikTok" } |
+|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/icon-button-toggle/icon-button-toggle.njk' import IconButtonToggle %}
+
+{{ IconButtonToggle({
+  variant: 'outlined',
+  size: 'default',
+  iconName: 'bookmarked',
+  selectedIconName: 'bookmark-fill'
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/icon-button-toggle/icon-button-toggle";
+```
+
+### Javascript
+
+```javascript
+import dsIconButtonToggle from '@bonniernews/dn-design-system-web/components/icon-button-toggle/icon-button-toggle.js'
+const toggleElements = Array.from(document.getElementsByClassName("ds-icon-btn-toggle"));
+dsIconButtonToggle(toggleElements);
+```

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

@@ -0,0 +1,19 @@
+export {
+  dsIconButtonToggle,
+  dsIconButtonToggleAll
+};
+
+function dsIconButtonToggle(toggleElements = []) {
+  if (!toggleElements.length) return;
+  toggleElements.forEach((toggleEl) => {
+    toggleEl.addEventListener("click", () => {
+      if (toggleEl.classList.contains("ds-icon-btn-toggle--disabled")) return;
+      toggleEl.classList.toggle("ds-icon-btn-toggle--selected");
+    });
+  });
+}
+
+function dsIconButtonToggleAll() {
+  const toggleElements = Array.from(document.getElementsByClassName("ds-icon-btn-toggle"));
+  dsIconButtonToggle(toggleElements);
+}

package/components/icon-button-toggle/icon-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/foundations/a11y/visually-hidden.njk' import VisuallyHidden %}
+{% from '@bonniernews/dn-design-system-web/components/spinner/spinner.njk' import Spinner %}
+
+{% macro IconButtonToggle(params) %}
+  {% set componentClassName = "ds-icon-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 %}
+  
+  {% if params.forcePx %}
+    {% set variant = (variant.push("ds-force-px"), variant) %}
+  {% endif %}
+
+  {% if params.variant %}
+    {% set variant = (variant.push(classNamePrefix + params.variant), variant) %}
+  {% else %}
+    {% set variant = (variant.push(classNamePrefix + "outlined"), variant) %}
+  {% endif %}
+
+  {% if params.size and params.size != "default" %}
+    {% set variant = (variant.push(classNamePrefix + params.size), variant) %}
+  {% endif %}
+
+  {% set loadingHtml %}
+    {{ Spinner({ size: "small", variant: "primary", forcePx: params.forcePx }) }}
+  {% endset %}
+
+  {% if params.loading %}
+    {% set variant = (variant.push("ds-loading"), variant) %}
+  {% endif %}
+
+  {% if params.a11y and params.a11y.visuallyHidden %}
+    {% set visuallyHidden = VisuallyHidden({ text: params.a11y.visuallyHidden }) %}
+  {% 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 }}>
+    {{- visuallyHidden | safe if visuallyHidden -}}
+    <div class="{{ componentClassName + '__inner'}}">
+      <div class="{{ componentClassName + '__off'}}">
+        {{ Icon({ icon: params.iconName }) }}
+      </div>
+      <div class="{{ componentClassName + '__on'}}">
+        {{ Icon({ icon: params.selectedIconName }) }}
+      </div>
+      {{ loadingHtml | safe }}
+    </div>
+  </button>
+{% endmacro %}