@bonniernews/dn-design-system-web 4.1.0-alpha.4 → 4.1.0

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.1.0 (2023-09-05)
+
+
+### Bug Fixes
+
+* **web:** fix missing spacing and refactor text-button ([#976](https://github.com/BonnierNews/dn-design-system/issues/976)) ([f634b42](https://github.com/BonnierNews/dn-design-system/commit/f634b4235d2c6a939cf8ae9e47fcac242fe9f221))
+
+
+
+## [4.1.0-alpha.5](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@4.1.0-alpha.4...@bonniernews/dn-design-system-web@4.1.0-alpha.5) (2023-09-04)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
 ## 4.1.0-alpha.4 (2023-09-04)
 
 

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

@@ -4,19 +4,52 @@
 
 $ds-text-btn__min-clickable-area: 0;
 $ds-text-btn__underline-offset: 2px;
-$ds-text-btn__icon-size: 24px;
-$ds-text-btn__icon-size-small: 20px;
 
-@mixin ds-text-btn-disabled() {
-  cursor: not-allowed;
-  &::before {
-    background-color: unset;
+.ds-text-btn {
+  --ds-text-btn__inner-padding: #{ds-spacing-component($ds-sc-x3)};
+  --ds-text-btn__icon-size: #{ds-px-to-rem(24px)};
+
+  &.ds-force-px {
+    --ds-text-btn__icon-size: 24px;
   }
-  .ds-icon {
-    color: $ds-color-icon-disabled;
+
+  &.ds-text-btn--icon-left {
+    --ds-text-btn__inner-padding: #{ds-spacing-component($ds-sc-x3 $ds-sc-x3 $ds-sc-x3 $ds-sc-x2)};
+    --ds-text-btn__icon-margin: #{ds-spacing-component(0 $ds-sc-x2 0 0)};
   }
-  .ds-text-btn__text {
-    color: $ds-color-text-disabled;
+
+  &.ds-text-btn--icon-right {
+    --ds-text-btn__inner-padding: #{ds-spacing-component($ds-sc-x3 $ds-sc-x2 $ds-sc-x3 $ds-sc-x3)};
+    --ds-text-btn__icon-margin: #{ds-spacing-component(0 0 0 $ds-sc-x2)};
+  }
+
+  &.ds-text-btn--small {
+    --ds-text-btn__inner-padding: #{ds-spacing-component($ds-sc-x2)};
+    --ds-text-btn__icon-size: #{ds-px-to-rem(20px)};
+
+    &.ds-force-px {
+      --ds-text-btn__icon-size: 20px;
+    }
+
+    &.ds-text-btn--icon-left {
+      --ds-text-btn__icon-margin: #{ds-spacing-component(0 $ds-sc-x1 0 0)};
+      --ds-text-btn__inner-padding: #{ds-spacing-component($ds-sc-x2 $ds-sc-x2 $ds-sc-x2 $ds-sc-x1)};
+      &.ds-text-btn--condensed {
+        --ds-text-btn__inner-padding: #{ds-spacing-component($ds-sc-x1 $ds-sc-x1 $ds-sc-x1 0)};
+      }
+    }
+
+    &.ds-text-btn--icon-right {
+      --ds-text-btn__icon-margin: #{ds-spacing-component(0 0 0 $ds-sc-x1)};
+      --ds-text-btn__inner-padding: #{ds-spacing-component($ds-sc-x2 $ds-sc-x1 $ds-sc-x2 $ds-sc-x2)};
+      &.ds-text-btn--condensed {
+        --ds-text-btn__inner-padding: #{ds-spacing-component($ds-sc-x1 0 $ds-sc-x1 $ds-sc-x1)};
+      }
+    }
+  }
+
+  &.ds-text-btn--condensed {
+    --ds-text-btn__inner-padding: #{ds-spacing-component($ds-sc-x1)};
   }
 }
 
@@ -53,7 +86,7 @@ $ds-text-btn__icon-size-small: 20px;
   .ds-text-btn__inner {
     background-color: transparent;
     border-radius: ds-metrics-border-radius(x1);
-    padding: ds-spacing-component($ds-sc-x3);
+    padding: var(--ds-text-btn__inner-padding);
     position: relative;
     &::before {
       content: "";
@@ -65,16 +98,17 @@ $ds-text-btn__icon-size-small: 20px;
       bottom: 0;
       right: 0;
     }
+  }
 
-    .ds-text-btn__text {
-      @include ds-typography($ds-typography-functional-body02regular);
-      @at-root .ds-force-px#{&} {
-        @include ds-typography($ds-typography-functional-body02regular, true);
-      }
-      text-decoration: underline;
-      text-underline-offset: $ds-text-btn__underline-offset;
-      color: $ds-color-text-primary;
-    }
+  .ds-text-btn__text {
+    @include ds-typography-with-force-px($ds-typography-functional-body02regular);
+    text-decoration: underline;
+    text-underline-offset: $ds-text-btn__underline-offset;
+    color: $ds-color-text-primary;
+  }
+
+  &.ds-text-btn--small .ds-text-btn__text {
+    @include ds-typography-with-force-px($ds-typography-functional-body01regular);
   }
 
   @include ds-hover() {
@@ -87,7 +121,16 @@ $ds-text-btn__icon-size-small: 20px;
     background-color: $ds-color-component-primary-overlay-02;
   }
   &:disabled:not(.ds-loading) .ds-text-btn__inner {
-    @include ds-text-btn-disabled;
+    cursor: not-allowed;
+    &::before {
+      background-color: unset;
+    }
+    .ds-icon {
+      color: $ds-color-icon-disabled;
+    }
+    .ds-text-btn__text {
+      color: $ds-color-text-disabled;
+    }
   }
 
   @include ds-loading();
@@ -109,9 +152,9 @@ $ds-text-btn__icon-size-small: 20px;
 
   .ds-icon {
     display: flex;
-    height: ds-px-to-rem($ds-text-btn__icon-size);
-    width: ds-px-to-rem($ds-text-btn__icon-size);
-    margin: ds-spacing-component(0 0 0 $ds-sc-x2);
+    height: var(--ds-text-btn__icon-size);
+    width: var(--ds-text-btn__icon-size);
+    margin: var(--ds-text-btn__icon-margin);
     color: $ds-color-icon-primary;
     svg {
       fill: currentColor;
@@ -123,76 +166,8 @@ $ds-text-btn__icon-size-small: 20px;
   }
 }
 
-.ds-force-px {
-  &.ds-text-btn--icon-left .ds-text-btn__inner .ds-icon,
-  &.ds-text-btn--icon-right .ds-text-btn__inner .ds-icon {
-    height: $ds-text-btn__icon-size;
-    width: $ds-text-btn__icon-size;
-  }
-}
-
 .ds-text-btn--icon-left .ds-text-btn__inner {
-  padding: ds-spacing-component($ds-sc-x3 $ds-sc-x3 $ds-sc-x3 $ds-sc-x2);
   flex-direction: row-reverse;
-  .ds-icon {
-    margin: ds-spacing-component(0 $ds-sc-x2 0 0);
-  }
-}
-
-.ds-text-btn--icon-right .ds-text-btn__inner {
-  padding: ds-spacing-component($ds-sc-x3 $ds-sc-x2 $ds-sc-x3 $ds-sc-x3);
-}
-
-.ds-text-btn--small {
-  .ds-text-btn__inner {
-    padding: ds-spacing-component($ds-sc-x2);
-
-    .ds-text-btn__text {
-      @include ds-typography($ds-typography-functional-body01regular);
-      @at-root .ds-force-px#{&} {
-        @include ds-typography($ds-typography-functional-body01regular, true);
-      }
-    }
-  }
-
-  &.ds-text-btn--icon-left .ds-text-btn__inner,
-  &.ds-text-btn--icon-right .ds-text-btn__inner {
-    .ds-icon {
-      height: ds-px-to-rem($ds-text-btn__icon-size-small);
-      width: ds-px-to-rem($ds-text-btn__icon-size-small);
-      margin: ds-spacing-component(0 0 0 $ds-sc-x1);
-    }
-  }
-
-  &.ds-text-btn--icon-left .ds-text-btn__inner {
-    padding: ds-spacing-component($ds-sc-x2 $ds-sc-x2 $ds-sc-x2 $ds-sc-x1);
-  }
-
-
-  &.ds-text-btn--icon-right .ds-text-btn__inner {
-    padding: ds-spacing-component($ds-sc-x2 $ds-sc-x1 $ds-sc-x2 $ds-sc-x2);
-  }
-  &.ds-text-btn--condensed {
-    &.ds-text-btn--icon-left .ds-text-btn__inner {
-      padding: ds-spacing-component($ds-sc-x1 $ds-sc-x1 $ds-sc-x1 0);
-    }
-
-    &.ds-text-btn--icon-right .ds-text-btn__inner {
-      padding: ds-spacing-component($ds-sc-x1 0 $ds-sc-x1 $ds-sc-x1);
-    }
-  }
-
-  &.ds-force-px {
-    &.ds-text-btn--icon-left .ds-text-btn__inner .ds-icon,
-    &.ds-text-btn--icon-right .ds-text-btn__inner .ds-icon {
-      height: $ds-text-btn__icon-size-small;
-      width: $ds-text-btn__icon-size-small;
-    }
-  }
-}
-
-.ds-text-btn--condensed .ds-text-btn__inner {
-  padding: ds-spacing-component($ds-sc-x1);
 }
 
 @include ds-mq-only-breakpoint(mobile) {

package/foundations/helpers/typography.scss

@@ -191,3 +191,11 @@ $dsSerifWeights: (
     letter-spacing: normal;
   }
 }
+
+@mixin ds-typography-with-force-px($token) {
+  @include ds-typography($token);
+  // If called from element without a wrapper class, ex. a it will generate incorrect selector .ds-force-pxa
+  @at-root .ds-force-px#{&} {
+    @include ds-typography($token, true);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "4.1.0-alpha.4",
+  "version": "4.1.0",
   "description": "DN design system for web.",
   "main": "index.js",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",

package/tokens/icon-list.json

@@ -29,6 +29,7 @@
   "filter_list": "filter_list",
   "filter_none": "filter_none",
   "format_size": "format_size",
+  "forward_30": "forward_30",
   "grid_view": "grid_view",
   "headphones-filled": "headphones-filled",
   "headphones": "headphones",
@@ -40,6 +41,7 @@
   "instagram": "instagram",
   "integrity": "integrity",
   "ios_share": "ios_share",
+  "link": "link",
   "lock": "lock",
   "logout": "logout",
   "mail": "mail",
@@ -62,6 +64,8 @@
   "radio_button_checked": "radio_button_checked",
   "radio_button_unchecked": "radio_button_unchecked",
   "redeem": "redeem",
+  "refresh": "refresh",
+  "replay_30": "replay_30",
   "search_off": "search_off",
   "search": "search",
   "share": "share",