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

package/CHANGELOG.md

@@ -3,6 +3,211 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.0.0-alpha.30...@bonniernews/dn-design-system-web@1.0.0) (2023-01-20)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [1.0.0-alpha.30](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.0.0-alpha.29...@bonniernews/dn-design-system-web@1.0.0-alpha.30) (2023-01-20)
+
+
+### ⚠ BREAKING CHANGES
+
+* **web:** include var in color tokens (#579)
+
+### Code Refactoring
+
+* **web:** include var in color tokens ([#579](https://github.com/BonnierNews/dn-design-system/issues/579)) ([07403d4](https://github.com/BonnierNews/dn-design-system/commit/07403d478b9f685604da1a0308affa0c511dfba5))
+
+
+
+## [1.0.0-alpha.29](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.0.0-alpha.28...@bonniernews/dn-design-system-web@1.0.0-alpha.29) (2023-01-20)
+
+
+### Bug Fixes
+
+* **web:** specify icon button styling in input fields ([#580](https://github.com/BonnierNews/dn-design-system/issues/580)) ([382f4d6](https://github.com/BonnierNews/dn-design-system/commit/382f4d62f29501e776cb1499e436314097e4de68))
+
+
+
+## [1.0.0-alpha.28](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.0.0-alpha.27...@bonniernews/dn-design-system-web@1.0.0-alpha.28) (2023-01-19)
+
+
+### Bug Fixes
+
+* **web:** inner wrapper and tiny redesign for footer ([#578](https://github.com/BonnierNews/dn-design-system/issues/578)) ([1ca4def](https://github.com/BonnierNews/dn-design-system/commit/1ca4def2453ea26403b16f68e60d866e2048c447))
+
+
+
+## [1.0.0-alpha.27](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.0.0-alpha.26...@bonniernews/dn-design-system-web@1.0.0-alpha.27) (2023-01-18)
+
+
+### Bug Fixes
+
+* **web:** attributes parameter for link groups in footer ([#577](https://github.com/BonnierNews/dn-design-system/issues/577)) ([79d5e61](https://github.com/BonnierNews/dn-design-system/commit/79d5e6116dfa9772cda1fe1c4dc2751a75d26086))
+
+
+
+## [1.0.0-alpha.26](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.0.0-alpha.25...@bonniernews/dn-design-system-web@1.0.0-alpha.26) (2023-01-18)
+
+
+### Bug Fixes
+
+* **web:** add class to footer links ([#575](https://github.com/BonnierNews/dn-design-system/issues/575)) ([52be5a4](https://github.com/BonnierNews/dn-design-system/commit/52be5a4b6698bd53080a7b797beaef72902bdd3d))
+
+
+
+## [1.0.0-alpha.25](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.0.0-alpha.24...@bonniernews/dn-design-system-web@1.0.0-alpha.25) (2023-01-18)
+
+
+### Features
+
+* **web:** footer component ([#572](https://github.com/BonnierNews/dn-design-system/issues/572)) ([164ef30](https://github.com/BonnierNews/dn-design-system/commit/164ef30b70bed3400371c84e346a6cf6f35dcf7c))
+
+
+
+## [1.0.0-alpha.24](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.0.0-alpha.23...@bonniernews/dn-design-system-web@1.0.0-alpha.24) (2023-01-18)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [1.0.0-alpha.23](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.0.0-alpha.22...@bonniernews/dn-design-system-web@1.0.0-alpha.23) (2023-01-17)
+
+
+### Bug Fixes
+
+* **web:** add ds-dark and ds-light for color switching ([#571](https://github.com/BonnierNews/dn-design-system/issues/571)) ([3828761](https://github.com/BonnierNews/dn-design-system/commit/3828761c2835f189e431da0bb9017f811fa1d7cf))
+
+
+
+## [1.0.0-alpha.22](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.0.0-alpha.21...@bonniernews/dn-design-system-web@1.0.0-alpha.22) (2023-01-16)
+
+
+### Features
+
+* **web:** buddy menu ([#549](https://github.com/BonnierNews/dn-design-system/issues/549)) ([d0230ee](https://github.com/BonnierNews/dn-design-system/commit/d0230eec5b97fd04247035230471293ff72a3619))
+
+
+
+## [1.0.0-alpha.21](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.0.0-alpha.20...@bonniernews/dn-design-system-web@1.0.0-alpha.21) (2023-01-13)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## 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)
 
 

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

@@ -9,7 +9,7 @@ $ds-form-field__error-icon-size: 20px;
 .ds-form-field__help-text {
   margin-top: ds-spacing-component(x2);
   margin-bottom: 0;
-  color: var($ds-color-text-primary-02);
+  color: $ds-color-text-primary-02;
   @include ds-typography($ds-typography-functional-body01regular);
 }
 
@@ -27,8 +27,9 @@ $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);
+        fill: $ds-color-icon-critical;
       }
     }
     span {

package/components/badge/badge.scss

@@ -12,9 +12,9 @@ $ds-badge__min-size: 8px;
 
   .ds-badge__inner {
     @include ds-typography($ds-typography-functional-meta02medium);
-    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;
+    color: $ds-color-static-white;
+    background-color: $ds-color-component-brand;
+    border: $ds-color-border-secondary ds-metrics-border-width(x2) solid;
     border-radius: 100px;
     display: inline-flex;
     align-items: center;

package/components/buddy-menu/README.md

@@ -0,0 +1,63 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/buddy-menu](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/buddy-menu)
+- Storybook: [BuddyMenu > Web](https://designsystem.dn.se/?path=/story/components-web-buddymenu-web--buddy-menu)
+
+----
+
+# BuddyMenu
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|name | String | no | | none | Should be populated with product specific js|
+|links | HTML String | no | | | Should be list item components|
+|accountLevel | String | no | | none | Should be populated with product specific js|
+|myAccountUrl | String | yes | | | Url for "Mitt konto" button |
+|addons | Array > Object | no | | | Ex. [{ title: 'Annonsfri', href: "https://kund.dn.se/faq/Annonsfritt/" }] |
+|attributes | Object | no | | | Ex. { "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/buddy-menu/buddy-menu.njk' import BuddyMenu %}
+
+{% macro BuddyMenuSample() %}
+  {{ ListItem({
+    title: 'Följer (ämnen och skribenter)',
+    leadingIcon: 'favorite',
+    border: true,
+    listItemType: "standard",
+    forcePx: true,
+    href: "https://www.dn.se/foljer/"
+  })}}
+  {{ ListItem({
+    title: 'Logga ut',
+    leadingIcon: 'logout',
+    border: false,
+    listItemType: "standard",
+    forcePx: true,
+    href: params.urls.logOut | default('#'),
+    classNames: "js-buddy-menu__logout"
+  })}}
+{% endmacro %}
+
+{{ BuddyMenu({
+  name: "",
+  accountLevel: "",
+  myAccountUrl: "https://kund.dn.se/mitt-konto",
+  links: BuddyMenuSample(),
+  addons: [{ title: 'Annonsfri', href: "https://kund.dn.se/faq/Annonsfritt/" }],
+  forcePx: true
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/buddy-menu/buddy-menu" as *;
+```

package/components/buddy-menu/buddy-menu.njk

@@ -0,0 +1,77 @@
+{% from '@bonniernews/dn-design-system-web/components/list-item/list-item.njk' import ListItem %}
+{% from '@bonniernews/dn-design-system-web/components/icon-button/icon-button.njk' import IconButton %}
+{% from '@bonniernews/dn-design-system-web/components/button/button.njk' import Button %}
+
+{% macro BuddyMenu(params) %}
+  {% set componentClassName = "ds-buddy-menu" %}
+  {% set classNamePrefix = componentClassName + "--" %}
+  {% set variant = [] %}
+  {% set attributes %}
+    {% for attribute, value in params.attributes %}
+      {{attribute}}="{{value}}"
+    {% endfor %}
+  {% endset %}
+
+  {% if params.forcePx %}
+    {% set variant = (variant.push("ds-force-px"), variant) %}
+  {% endif %}
+
+  {% if params.classNames %}
+    {% set variant = (variant.push(params.classNames), variant) %}
+  {% endif%}
+
+  {% set classes = componentClassName + " " + variant | join(" ") %}
+
+  <div class="{{ classes }} {{ 'ds-buddy-menu--skola' if params.isDnSkola }}" {{- attributes | safe}}>
+    <div class="ds-buddy-menu__scrollable-container">
+      <div class="ds-buddy-menu__content">
+        {{ IconButton({
+          variant: "transparent",
+          size: "small",
+          iconName: "close",
+          classNames: "ds-buddy-menu__close",
+          forcePx: params.forcePx
+        })}}
+
+        {%- if params.isDnSkola %}
+          {# @todo add support for skola users #}
+        {%- else %}
+          <div class="ds-buddy-menu__header">
+            <span class="ds-buddy-menu__greeting">Hej <span class="ds-buddy-menu__name js-buddy-menu-name" data-name-type="given">{{ params.name }}</span>!</span>
+            <div class="ds-buddy-menu__account">
+              <h2 class="ds-buddy-menu__account-title">Min prenumeration</h2>
+              <span class="ds-buddy-menu__account-level js-buddy-menu__account-level">{{ params.accountLevel }}</span>
+    
+              {% if params.addons %}
+                <h2 class="ds-buddy-menu__addons-title">Mina tillägg</h2>
+                <ul class="ds-buddy-menu__addons-list">
+                  {% for addon in params.addons %}
+                    <li><a href="{{ addon.href }}">{{ addon.title }}</a></li>
+                  {% endfor %}
+                </ul>
+              {% endif %}
+
+              {{ Button({
+                text: "Mitt konto",
+                variant: "secondaryOutlined",
+                fullWidth: true,
+                href: params.myAccountUrl | default("#"),
+                attributes: { "data-hide-promo" : "" },
+                forcePx: params.forcePx
+              })}}
+            </div>
+          </div>
+
+          {# @todo add support for preniverse container and subscription cta #}
+
+          <div class="ds-buddy-menu__links">
+            <h2 class="ds-buddy-menu__links-title">Mitt innehåll</h2>
+            <ul class="ds-buddy-menu__links-list">
+              {{ params.links | safe }}
+            </ul>
+          </div>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+{% endmacro %}

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

@@ -0,0 +1,115 @@
+@use "../../foundations/helpers/spacing.scss" as *;
+@use "../../foundations/helpers/typography.scss" as *;
+@use "../../foundations/helpers/mediaQueries.scss" as *;
+@use "../../foundations/helpers/metrics.scss" as *;
+@use "../../foundations/helpers/utilities.scss" as *;
+@use "../../foundations/helpers/colors.scss" as *;
+@use "../../foundations/helpers/links.scss" as *;
+@use "../button/button.scss" as *;
+@use "../icon-button/icon-button.scss" as *;
+@use "../list-item/list-item.scss" as *;
+
+.ds-buddy-menu {
+  width: 360px;
+  background-color: $ds-color-surface-elevated;
+  border-radius: ds-metrics-border-radius(x2);
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1;
+
+  @include ds-mq-largest-breakpoint(mobile) {
+    width: 100vw;
+  }
+
+  &__scrollable-container {
+    max-height: calc(100vh - 100px);
+    overflow-y: auto;
+    /* @todo - should we style scrollbar? 
+    // Scrollbar styling based on existing styling in arkivet/bang
+    &::-webkit-scrollbar {
+      width: 8px;
+    }
+    &::-webkit-scrollbar-thumb {
+      border: 1px solid $ds-color-component-primary-overlay;
+      background-color: $ds-color-border-primary-02;
+      border-radius: ds-metrics-border-radius(x2);
+    }
+    &::-webkit-scrollbar-track {
+      border: 0;
+      background-color: $ds-color-component-primary-overlay;
+      border-radius: ds-metrics-border-radius(x2);
+    }
+    */
+  }
+  &__content {
+    position: relative;
+  }
+  &__header {
+    padding: ds-spacing-component(x8 x4 x4);
+    margin: ds-spacing-component(0 0 x4);
+  }
+  &__close {
+    position: absolute;
+    right: ds-spacing-component(x1);
+    top: ds-spacing-component(x1);
+  }
+  &__greeting {
+    @include ds-typography($ds-typography-functional-heading03bold);
+    color: $ds-color-text-primary;
+    margin: ds-spacing-component(0 0 x4);
+    display: block;
+  }
+  &__account-title,
+  &__addons-title,
+  &__links-title {
+    @include ds-typography($ds-typography-functional-body02medium);
+    color: $ds-color-text-primary;
+    margin: ds-spacing-component(0 0 x1);
+  }
+  &__links-title {
+    padding: ds-spacing-component(0 x4);
+  }
+  &__addons-list {
+    padding: 0;
+    margin: ds-spacing-component(0 0 x4);
+    list-style: none;
+    a {
+      @include ds-typography($ds-typography-functional-body02regular);
+      color: $ds-color-text-primary-02;
+      margin: ds-spacing-component(0 0 x4);
+      @include ds-link($ds-link-list);
+    }
+  }
+  &__account-level {
+    @include ds-typography($ds-typography-functional-body02regular);
+    color: $ds-color-text-primary-02;
+    margin: ds-spacing-component(0 0 x4);
+    display: block;
+  }
+  &__links-list {
+    border-bottom-left-radius: ds-metrics-border-radius(x2);
+    border-bottom-right-radius: ds-metrics-border-radius(x2);
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
+  }
+
+  &.ds-force-px {
+    .ds-buddy-menu__greeting {
+      @include ds-typography($ds-typography-functional-heading03bold, true);
+    }
+    .ds-buddy-menu__account-title,
+    .ds-buddy-menu__addons-title,
+    .ds-buddy-menu__links-title {
+      @include ds-typography($ds-typography-functional-body02medium, true);
+    }
+    .ds-buddy-menu__addons-list a {
+      @include ds-typography($ds-typography-functional-body02regular, true);
+    }
+    .ds-buddy-menu__account-level {
+      @include ds-typography($ds-typography-functional-body02regular, true);
+    }
+  }
+}

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 %}