@bonniernews/dn-design-system-web 16.1.0 → 16.1.2

package/CHANGELOG.md

@@ -4,6 +4,20 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [16.1.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@16.1.1...@bonniernews/dn-design-system-web@16.1.2) (2024-07-16)
+
+
+### Maintenance
+
+* **web:** remove deprecated spacing ([#1337](https://github.com/BonnierNews/dn-design-system/issues/1337)) ([82823ad](https://github.com/BonnierNews/dn-design-system/commit/82823ad8bb5ad3591bcad1d9916ee25267bb62b6))
+
+## [16.1.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@16.1.0...@bonniernews/dn-design-system-web@16.1.1) (2024-07-16)
+
+
+### Maintenance
+
+* **web:** use correct metric helpers ([#1338](https://github.com/BonnierNews/dn-design-system/issues/1338)) ([ca0bec0](https://github.com/BonnierNews/dn-design-system/commit/ca0bec05a2c2b272b45600ec5a8a94e35c22ff05))
+
 ## [16.1.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@16.0.7...@bonniernews/dn-design-system-web@16.1.0) (2024-07-15)
 
 

package/components/badge/badge.scss

@@ -10,7 +10,7 @@ $ds-badge__min-size: 8px;
     @include ds-typography($ds-typography-functionalmeta02, $lineHeight: 0, $fontWeight: $ds-fontweight-semibold);
     color: $ds-color-static-white;
     background-color: $ds-color-component-brand;
-    border: $ds-color-border-secondary ds-metrics-border-width(x2) solid;
+    border: $ds-color-border-secondary ds-border-width(x2) solid;
     border-radius: 100px;
     display: inline-flex;
     align-items: center;

package/components/byline/byline.scss

@@ -23,7 +23,7 @@ $ds-byline__image-size--direkt: 36px;
 
   &::after {
     content: "";
-    height: ds-metrics-border-width(x1);
+    height: ds-border-width(x1);
     width: calc(100% - ds-spacing($ds-s-200));
     background-color: $ds-color-border-primary;
     position: absolute;
@@ -62,7 +62,7 @@ $ds-byline__image-size--direkt: 36px;
     text-decoration: none;
 
     &:focus-visible {
-      outline: ds-metrics-border-width(x2) solid $ds-color-border-focus-02;
+      outline: ds-border-width(x2) solid $ds-color-border-focus-02;
       outline-offset: 2px;
     }
   }
@@ -174,7 +174,7 @@ $ds-byline__image-size--direkt: 36px;
   &:focus-visible {
     outline: none;
     .ds-byline__inner {
-      outline: ds-metrics-border-width(x2) solid $ds-color-border-focus-02;
+      outline: ds-border-width(x2) solid $ds-color-border-focus-02;
       outline-offset: -2px;
     }
   }

package/components/disclaimer/disclaimer.scss

@@ -2,7 +2,7 @@
 @use "../icon-sprite/icon-sprite.scss";
 
 $ds-disclaimer__icon-size: 20px;
-$ds-btn-outlined__border-width: ds-metrics-border-width(x1);
+$ds-btn-outlined__border-width: ds-border-width(x1);
 
 .ds-disclaimer {
   padding-bottom: ds-spacing($ds-s-100);

package/components/divider/divider.scss

@@ -8,7 +8,7 @@
     margin: 0 auto;
     border: none;
     background-color: $ds-color-border-primary;
-    height: ds-metrics-border-width(x1);
+    height: ds-border-width(x1);
     width: 100%;
   }
 }

package/components/factbox/factbox.scss

@@ -15,14 +15,14 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
   padding: ds-spacing($ds-s-100 0 $ds-s-200);
 
   .ds-factbox__inner {
-    border-top: ds-metrics-border-width(x1) solid $ds-color-border-primary;
+    border-top: ds-border-width(x1) solid $ds-color-border-primary;
     border-left: $ds-factbox-border-width solid $ds-theme-color;
     max-height: ds-px-to-rem($ds-factbox__max-height);
     overflow: hidden;
     position: relative;
     padding: $ds-factbox__padding;
     padding-left: $ds-factbox__padding-left;
-    padding-top: $ds-factbox__padding - ds-metrics-border-width(x1);
+    padding-top: $ds-factbox__padding - ds-border-width(x1);
 
     @at-root .ds-force-px#{&} {
       max-height: $ds-factbox__max-height;

package/components/footer/footer.scss

@@ -37,7 +37,7 @@ $ds-footer-column-gap: ds-spacing($ds-s-400);
   &__rudolf,
   &__editors,
   &__channels {
-    border-top-width: ds-metrics-border-width(x1);
+    border-top-width: ds-border-width(x1);
     border-top-style: solid;
     border-color: $ds-color-static-transparent-white-10;
   }
@@ -50,7 +50,7 @@ $ds-footer-column-gap: ds-spacing($ds-s-400);
 
     &__link-grid {
       border-bottom-style: solid;
-      border-bottom-width: ds-metrics-border-width(x1);
+      border-bottom-width: ds-border-width(x1);
       border-color: $ds-color-static-transparent-white-10;
     }
   }

package/components/group-header/group-header.scss

@@ -16,7 +16,7 @@ $ds-group-header__icon-size: 24px;
   @include ds-typography($ds-typography-functionalbody02);
 
   &--bottom-border {
-    border-bottom: ds-metrics-border-width(x1) solid $ds-color-border-primary;
+    border-bottom: ds-border-width(x1) solid $ds-color-border-primary;
   }
 
   &--bauta {
@@ -110,7 +110,7 @@ $ds-group-header__icon-size: 24px;
   }
 
   &--bottom-border .ds-group-header__title {
-    padding-bottom: ds-spacing($ds-s-075) - ds-metrics-border-width(x1);
+    padding-bottom: ds-spacing($ds-s-075) - ds-border-width(x1);
   }
 
   &--bautaxl .ds-group-header__title {

package/components/list-item/list-item.scss

@@ -153,7 +153,7 @@ $ds-list-item__icon-size: 24px;
   &:focus-visible {
     outline: none;
     .ds-list-item__inner {
-      outline: ds-metrics-border-width(x2) solid $ds-color-border-focus-02;
+      outline: ds-border-width(x2) solid $ds-color-border-focus-02;
       outline-offset: -2px;
     }
   }
@@ -171,7 +171,7 @@ $ds-list-item__icon-size: 24px;
   &::after,
   &.ds-list-item--accordion-active + .ds-list-item__accordion-inner::after {
     content: "";
-    height: ds-metrics-border-width(x1);
+    height: ds-border-width(x1);
     width: calc(100% - (ds-spacing($ds-s-100) * 2));
     background-color: $ds-color-border-primary;
     position: absolute;

package/components/profile-header/profile-header.scss

@@ -47,7 +47,7 @@
     @include ds-typography($ds-typography-functionalbody02);
     color: $ds-color-text-primary;
     margin: ds-spacing(0 $ds-s-100 0);
-    border-top: ds-metrics-border-width(x1) solid $ds-color-border-primary;
+    border-top: ds-border-width(x1) solid $ds-color-border-primary;
     padding: ds-spacing($ds-s-100 0);
 
     a {

package/components/switch/switch.scss

@@ -101,7 +101,7 @@ $ds-switch__container-width: 44px;
     }
 
     &:focus-visible + .ds-switch__inner .ds-switch__box {
-      outline: ds-metrics-border-width(x2) solid $ds-color-border-focus-02;
+      outline: ds-border-width(x2) solid $ds-color-border-focus-02;
       outline-offset: 2px;
     }
 

package/components/tag-header/tag-header.scss

@@ -74,7 +74,7 @@
     @include ds-typography($ds-typography-functionalbody02);
     color: $ds-color-text-primary;
     margin: ds-spacing($ds-s-100 $ds-s-100 0);
-    border-top: ds-metrics-border-width(x1) solid $ds-color-border-primary;
+    border-top: ds-border-width(x1) solid $ds-color-border-primary;
     padding-top: ds-spacing($ds-s-100);
 
     a {

package/components/teaser-list-vertical/teaser-list-vertical.scss

@@ -35,7 +35,7 @@ $ds-teaser-list-vertical-media-icon-size: 20px;
       top: 0;
       left: 0;
       right: 0;
-      height: ds-metrics-border-width(x1);
+      height: ds-border-width(x1);
       background-color: $ds-color-border-primary;
     }
   }
@@ -51,7 +51,7 @@ $ds-teaser-list-vertical-media-icon-size: 20px;
       content: "";
       position: absolute;
       bottom: 0;
-      height: ds-metrics-border-width(x1);
+      height: ds-border-width(x1);
       width: calc(100% - ds-spacing($ds-s-200));
       background-color: $ds-color-border-primary;
     }

package/components/teaser-package/teaser-package.scss

@@ -13,7 +13,7 @@
   > .ds-teaser::after,
   > .ds-split-container::after {
     content: "";
-    height: ds-metrics-border-width(x1);
+    height: ds-border-width(x1);
     background-color: $ds-color-border-primary;
     position: absolute;
     display: block;

package/components/teaser-split/teaser-split.scss

@@ -12,7 +12,7 @@
   @at-root .ds-teaser-package > & + & {
     &:before {
       content: "";
-      height: ds-metrics-border-width(x1);
+      height: ds-border-width(x1);
       background-color: $ds-color-border-primary;
       left: 0;
       right: 0;
@@ -52,7 +52,7 @@
       content: "";
       margin-top: ds-spacing($ds-s-100);
       padding-top: ds-spacing($ds-s-075);
-      border-top: ds-metrics-border-width(x1) solid $ds-color-border-primary;
+      border-top: ds-border-width(x1) solid $ds-color-border-primary;
 
       @include ds-mq-smallest-breakpoint(tablet) {
         margin-top: 0;

package/foundations/helpers/README-spacing.md

@@ -50,9 +50,3 @@ By using sass variables for spacing tokens you will see which tokens are availab
   padding: 1.25rem 0.875rem;
 }
 ```
-
-## ⚠️ Deprecated functions and mixins
-
-The function `ds-spacing-component()` is deprecated.
-
-The mixin `@include ds-spacing-layout()` is deprecated.

package/foundations/helpers/hover.scss

@@ -24,7 +24,7 @@
 @mixin ds-focus(
   $offset: false,
   $includeSelector: true,
-  $width: ds-metrics-border-width(x2),
+  $width: ds-border-width(x2),
   $color: $ds-color-border-focus-02
 ) {
   @if not $includeSelector {

package/foundations/helpers/metrics.scss

@@ -41,13 +41,3 @@ $dsBorderWidth: map.get($metrics, "border-width");
 
   @return $values;
 }
-
-// deprecated
-@function ds-metrics-border-radius($units: null) {
-  @return ds-border-radius($units);
-}
-
-// deprecated
-@function ds-metrics-border-width($units: null) {
-  @return ds-border-width($units);
-}

package/foundations/helpers/spacing.scss

@@ -8,9 +8,6 @@
 @use "../variables/spacingDetailScreenLarge.scss" as *;
 @forward "../variables/spacingDetailList.scss";
 
-// @todo remove when possible
-@forward "spacing-deprecated.scss";
-
 @function ds-spacing($units: null, $sizeUnit: "px", $negative: false) {
   @if $units {
     $values: ();

package/package.json

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

package/foundations/helpers/spacing-deprecated.scss

@@ -1,63 +0,0 @@
-@use "sass:list";
-@use "sass:math";
-@use "sass:map";
-@use "mediaQueries.scss" as *;
-@use "../variables/deprecated/spacingComponent.scss" as *;
-@use "../variables/deprecated/spacingLayout.scss" as *;
-@use "../variables/deprecated/spacingLayoutLargeScreen.scss" as *;
-@forward "../variables/deprecated/spacingComponentList.scss";
-@forward "../variables/deprecated/spacingLayoutList.scss";
-
-@function ds-spacing-component($units: null, $sizeUnit: "px", $negative: false) {
-  @if $units {
-    @return _ds-get-spacings-deprecated($spacingComponent, $units, $sizeUnit, $negative);
-  }
-
-  @return null;
-}
-
-@mixin ds-spacing-layout($units: null, $property: padding, $sizeUnit: "px", $negative: false) {
-  @if $units {
-    $values: _ds-get-spacings-deprecated($spacingLayout, $units, $sizeUnit, $negative);
-    @include ds-mq-largest-breakpoint(mobile) {
-      #{$property}: $values;
-    }
-    $valuesLargeScreen: _ds-get-spacings-deprecated($spacingLayoutLargeScreen, $units, $sizeUnit, $negative);
-    @include ds-mq-smallest-breakpoint(tablet) {
-      #{$property}: $valuesLargeScreen;
-    }
-  }
-}
-
-@function _ds-get-spacings-deprecated($map, $units, $sizeUnit: "px", $negative: false) {
-  $values: ();
-
-  @each $unit in $units {
-    $value: map.get($map, $unit);
-    @if ($unit == "auto") {
-      $value: auto;
-    } @else if ($unit == 0) {
-      $value: 0 * 1;
-    } @else if ($value and type-of($value) == "number") {
-      @if ($sizeUnit == "rem") {
-        $value: (math.div($value, 16)) * 1rem;
-      } @else if ($sizeUnit == "em") {
-        $value: (math.div($value, 16)) * 1em;
-      } @else {
-        $value: $value * 1px;
-      }
-      @if $negative {
-        $value: $value * -1;
-      }
-    }
-    @if (type-of($value) == "number" or $value == "auto") {
-      $values: list.append($values, $value);
-    }
-  }
-
-  @if length($values) == 1 {
-    @return list.nth($values, 1);
-  }
-
-  @return $values;
-}

package/foundations/variables/deprecated/spacingComponent.scss

@@ -1,12 +0,0 @@
-$spacingComponent: (
-  x1: 4,
-  x2: 8,
-  x3: 12,
-  x4: 16,
-  x5: 20,
-  x6: 24,
-  x8: 32,
-  x20: 80,
-  outer: 16,
-  outer-negative: -16
-);

package/foundations/variables/deprecated/spacingComponentList.scss

@@ -1,10 +0,0 @@
-$ds-sc-x1: x1;
-$ds-sc-x2: x2;
-$ds-sc-x3: x3;
-$ds-sc-x4: x4;
-$ds-sc-x5: x5;
-$ds-sc-x6: x6;
-$ds-sc-x8: x8;
-$ds-sc-x20: x20;
-$ds-sc-outer: outer;
-$ds-sc-outer-negative: outer-negative;

package/foundations/variables/deprecated/spacingLayout.scss

@@ -1,17 +0,0 @@
-$spacingLayout: (
-  page-horizontal: 16,
-  page-top-small: 16,
-  page-top-large: 48,
-  page-bottom: 16,
-  gap-vertical-static-medium: 16,
-  gap-vertical-medium: 16,
-  gap-vertical-static-large: 32,
-  gap-horizontal-static-small: 8,
-  gap-vertical-static-small: 8,
-  page-top-xsmall: 4,
-  teaser-vertical-small: 8,
-  teaser-horizontal: 16,
-  gap-vertical-xsmall: 4,
-  teaser-vertical-medium: 12,
-  direkt-header-bottom: 48
-);

package/foundations/variables/deprecated/spacingLayoutLargeScreen.scss

@@ -1,17 +0,0 @@
-$spacingLayoutLargeScreen: (
-  page-top-small: 32,
-  page-top-large: 48,
-  page-bottom: 32,
-  page-horizontal: 32,
-  gap-vertical-medium: 32,
-  page-top-xsmall: 8,
-  teaser-vertical-small: 12,
-  teaser-horizontal: 16,
-  gap-vertical-xsmall: 8,
-  teaser-vertical-medium: 16,
-  direkt-header-bottom: 64,
-  gap-vertical-static-medium: 16,
-  gap-vertical-static-large: 32,
-  gap-horizontal-static-small: 8,
-  gap-vertical-static-small: 8
-);

package/foundations/variables/deprecated/spacingLayoutList.scss

@@ -1,15 +0,0 @@
-$ds-sl-page-horizontal: page-horizontal;
-$ds-sl-page-top-small: page-top-small;
-$ds-sl-page-top-large: page-top-large;
-$ds-sl-page-bottom: page-bottom;
-$ds-sl-gap-vertical-static-medium: gap-vertical-static-medium;
-$ds-sl-gap-vertical-medium: gap-vertical-medium;
-$ds-sl-gap-vertical-static-large: gap-vertical-static-large;
-$ds-sl-gap-horizontal-static-small: gap-horizontal-static-small;
-$ds-sl-gap-vertical-static-small: gap-vertical-static-small;
-$ds-sl-page-top-xsmall: page-top-xsmall;
-$ds-sl-teaser-vertical-small: teaser-vertical-small;
-$ds-sl-teaser-horizontal: teaser-horizontal;
-$ds-sl-gap-vertical-xsmall: gap-vertical-xsmall;
-$ds-sl-teaser-vertical-medium: teaser-vertical-medium;
-$ds-sl-direkt-header-bottom: direkt-header-bottom;