@bonniernews/dn-design-system-web 7.0.1 → 7.1.0

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.1.0 (2023-10-20)
+
+
+### Features
+
+* **web:** refactored spacing ([#1062](https://github.com/BonnierNews/dn-design-system/issues/1062)) ([6d76bc0](https://github.com/BonnierNews/dn-design-system/commit/6d76bc07dfb193333ebf841962e9a42560e77a74))
+
+
+
 ## 7.0.1 (2023-10-20)
 
 

package/components/disclaimer/disclaimer.scss

@@ -5,18 +5,18 @@ $ds-disclaimer__icon-size: 20px;
 $ds-btn-outlined__border-width: ds-metrics-border-width(x1);
 
 .ds-disclaimer {
-  @include ds-spacing-layout($ds-sl-gap-vertical-static-medium, padding-bottom);
+  padding-bottom: ds-spacing($ds-s-gap-vertical-static-medium);
   box-sizing: border-box;
 
   .ds-disclaimer__body-html,
   .ds-disclaimer__icon-wrapper {
     background-color: $ds-color-surface-raised;
-    padding: ds-spacing-component($ds-sc-x3 $ds-sc-x4);
+    padding: ds-spacing($ds-s-075 $ds-s-100);
   }
 
   .ds-disclaimer__icon-wrapper {
     // instead of margin to keep background color
-    padding-right: ds-spacing-component($ds-sc-x2);
+    padding-right: ds-spacing($ds-s-050);
   }
 
   .ds-disclaimer__body-html {

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

@@ -2,8 +2,8 @@
 @use "../../assets/teaser/teaser.scss" as *;
 
 .ds-split-container {
-  @include ds-spacing-layout(
-    $ds-sl-teaser-vertical-small $ds-sl-teaser-horizontal
+  padding: ds-spacing(
+    $ds-s-teaser-vertical-small $ds-s-teaser-horizontal
       $ds-sl-teaser-vertical-medium
   );
   display: flex;
@@ -21,7 +21,7 @@
       right: 0;
       top: 0;
       position: absolute;
-      @include ds-spacing-layout(0 $ds-sl-teaser-horizontal, margin);
+      margin: ds-spacing(0 $ds-s-teaser-horizontal);
     }
   }
 
@@ -30,7 +30,7 @@
     display: block;
     position: relative;
     flex: 1;
-    margin-right: ds-spacing-component($ds-sc-x4);
+    margin-right: ds-spacing($ds-s-100);
     &:last-child {
       margin-right: 0;
     }
@@ -38,7 +38,7 @@
     @include ds-teaser-focus(4px);
 
     @include ds-mq-largest-breakpoint(mobile) {
-      width: calc(50% - ds-spacing-component($ds-sc-x4) / 2);
+      width: calc(50% - ds-spacing($ds-s-100) / 2);
       flex: auto;
       // if a teaser is both third and last child it has the row by itself and should be full width
       &:nth-child(3):last-child {
@@ -53,8 +53,8 @@
     &:nth-child(4)::before {
       display: block;
       content: "";
-      @include ds-spacing-layout($ds-sl-teaser-vertical-medium, margin-top);
-      @include ds-spacing-layout($ds-sl-teaser-vertical-small, padding-top);
+      margin-top: ds-spacing($ds-s-teaser-vertical-medium);
+      padding-top: ds-spacing($ds-s-teaser-vertical-small);
       border-top: ds-metrics-border-width(x1) solid $ds-color-border-primary;
 
       @include ds-mq-smallest-breakpoint(tablet) {
@@ -65,7 +65,7 @@
     }
 
     &:nth-child(3):not(:last-child)::before {
-      margin-right: ds-spacing-component($ds-sc-x4, "px", true);
+      margin-right: ds-spacing($ds-s-100, "px", true);
     }
 
     .ds-teaser__title {
@@ -74,7 +74,7 @@
 
     .ds-teaser__media {
       @include ds-mq-largest-breakpoint(mobile) {
-        margin-bottom: ds-spacing-component($ds-sc-x2);
+        margin-bottom: ds-spacing($ds-s-050);
 
         .ds-teaser-image__byline {
           display: none;
@@ -82,7 +82,7 @@
       }
 
       @include ds-mq-smallest-breakpoint(tablet) {
-        margin-bottom: ds-spacing-component($ds-sc-x3);
+        margin-bottom: ds-spacing($ds-s-075);
       }
     }
   }

package/foundations/cssVariables.scss

@@ -1,3 +1,4 @@
 @use "./colors.scss";
 @use "./fontFamily.scss";
 @use "./shadows.scss";
+@use "./spacing.scss";

package/foundations/helpers/README-spacing.md

@@ -1,6 +1,6 @@
 - GitHub: [BonnierNews/dn-design-system/../web/src/foundations/helpers/spacing.scss](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/foundations/helpers/spacing.scss)
-- Storybook: [Spacing > Component](https://designsystem.dn.se/?path=/story/foundations-spacing--component)
-- Storybook: [Spacing > Layout](https://designsystem.dn.se/?path=/story/foundations-spacing--layout)
+- Storybook: [Spacing > Base](https://designsystem.dn.se/?path=/story/foundations-spacing--base)
+- Storybook: [Spacing > Detail](https://designsystem.dn.se/?path=/story/foundations-spacing--detail)
 
 ----
 
@@ -9,102 +9,50 @@
 ## use sass variable
 To avoid silent breaking changes use sass variable instead of raw token name.
 
-Ex: `margin: ds-spacing-component($ds-sc-x1 0 $ds-sc-x4)`
-
-Ex: `@include ds-spacing-layout($ds-sl-page-horizontal auto, padding-top)`
+Ex: `margin: ds-spacing($ds-s-050 0 $ds-s-page-horizontal)`
 
 By using sass variables (instead of token name directly), if a spacing token used in scss is removed sass will not compile - which is a good thing!
 
 By using sass variables for spacing tokens you will see which tokens are available through auto complete.
 
-Variables with `$ds-sc-` prefix are available for `ds-spacing-component()`
-
-Variables with `$ds-sl-` prefix are available for `ds-spacing-layout()`
-
-## ds-spacing-component | function
-
-Use for space _inside_ a component (or atom).
-
-Dynamic spacings are static and are _not_ wrapped in any media query, the function only return values.
+## ds-spacing | function
 
 ### Parameters
 
 |parameter | type | required | options | default | description |
 |:--- | :--- | :--- | :--- | :--- | :--- |
-|units | String | yes | one or more spacing tokens or `auto` or `0` | | Ex. x2 0 x4  |
-|sizeUnit | String | no | px, rem, em | px | |
+|units | String | yes | one or more spacing tokens or `auto` or `0` or numeric value `14`| | $ds-s-050 0 $ds-s-page-horizontal 14 |
+|sizeUnit | String | no | px, rem | px | |
 |negative | bool | no | true, false | false | Applies to all units except for `auto` and `0` |
 
 ```scss
 @use "@bonniernews/dn-design-system-web/foundations/helpers/forward.helpers.scss" as *;
 
 .test-1 {
-  margin: ds-spacing-component($ds-sc-x1 $ds-sc-x2 0);
+  margin: ds-spacing($ds-s-050 0 $ds-s-page-horizontal auto);
+  padding: ds-spacing($ds-s-125 14);
 }
 
 // Outputs:
-4px 8px 0
-
-.test-2 {
-  margin: ds-spacing-component($ds-sc-x1 $ds-sc-x2 0, px, true);
-}
-
-// Outputs:
--4px -8px 0
-```
-
-## ds-spacing-layout | mixin
-
-Use for space _between_ components.
-
-This mixin returns `property: value` wrapped in media query.
-
-### Parameters
-
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-|units | String | yes | one or more spacing tokens or `auto` or `0` | | Ex. 0 page-horizontal  |
-|property | String | no | padding, margin | padding | Use padding for layout spacing to avoid collapsing margins|
-|sizeUnit | String | no | px, rem, em | px | |
-|negative | bool | no | true, false | false | Applies to all units except for `auto` and `0` |
-
-```scss
-@use "@bonniernews/dn-design-system-web/foundations/helpers/forward.helpers.scss" as *;
-
 .test-1 {
-  @include ds-spacing-layout($ds-sl-page-top-small, padding-top);
-}
-
-// Outputs:
-@media (max-width: 1024px) {
-  .test-1 {
-    padding-top: 16px;
-  }
-}
-@media (min-width: 1025px) {
-  .test-1 {
-    padding-top: 32px;
-  }
+  margin: 8px 0 var(--ds-spacing-px-page-horizontal) auto;
+  padding: 20px 14px;
 }
 
 .test-2 {
-  @include ds-spacing-layout(
-    0 $ds-sl-page-horizontal,
-    margin,
-    px,
-    true
-  );
+  margin: ds-spacing($ds-s-050 0 $ds-s-page-horizontal auto, rem, true);
+  padding: ds-spacing($ds-s-125 14, rem);
 }
 
 // Outputs:
-@media (max-width: 1024px) {
-  .test-2 {
-    margin: 0 -16px;
-  }
-}
-@media (min-width: 1025px) {
-  .test-2 {
-    margin: 0 -32px;
-  }
+.test-2 {
+  margin: -0.5rem 0 var(--ds-spacing-negative-rem-page-horizontal) auto;
+  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/spacing-deprecated.scss

@@ -0,0 +1,77 @@
+@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/helpers/spacing.scss

@@ -2,76 +2,60 @@
 @use "sass:math";
 @use "sass:map";
 @use "mediaQueries.scss" as *;
-@use "../variables/spacingComponent.scss" as *;
-@use "../variables/spacingLayout.scss" as *;
-@use "../variables/spacingLayoutLargeScreen.scss" as *;
-@forward "../variables/spacingComponentList.scss";
-@forward "../variables/spacingLayoutList.scss";
+@use "../variables/spacingBase.scss" as *;
+@forward "../variables/spacingBaseList.scss";
+@use "../variables/spacingDetail.scss" as *;
+@use "../variables/spacingDetailScreenLarge.scss" as *;
+@forward "../variables/spacingDetailList.scss";
 
-@function ds-spacing-component(
-  $units: null,
-  $sizeUnit: "px",
-  $negative: false
-) {
-  @if $units {
-    @return _ds-get-spacings($spacingComponent, $units, $sizeUnit, $negative);
-  }
+// @todo remove when possible
+@forward "spacing-deprecated.scss";
 
-  @return null;
-}
-
-@mixin ds-spacing-layout(
+@function ds-spacing(
   $units: null,
-  $property: padding,
   $sizeUnit: "px",
   $negative: false
 ) {
   @if $units {
-    $values: _ds-get-spacings($spacingLayout, $units, $sizeUnit, $negative);
-    @include ds-mq-largest-breakpoint(mobile) {
-      #{$property}: $values;
-    }
-    $valuesLargeScreen: _ds-get-spacings(
-      $spacingLayoutLargeScreen,
-      $units,
-      $sizeUnit,
-      $negative
-    );
-    @include ds-mq-smallest-breakpoint(tablet) {
-      #{$property}: $valuesLargeScreen;
-    }
-  }
-}
+    $values: ();
 
-@function _ds-get-spacings($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;
+    @each $unit in $units {
+      @if map.has-key($spacingDetail, $unit) {
+        $value: var(--ds-spacing-#{$sizeUnit}-#{$unit});
+        @if ($negative) {
+          $value: calc(var(--ds-spacing-#{$sizeUnit}-#{$unit}) * -1);
+        }
+        $values: list.append($values, $value);
       } @else {
-        $value: $value * 1px;
-      }
-      @if $negative {
-        $value: $value * -1;
+        $value: $unit;
+        @if map.has-key($spacingBase, $unit) {
+          $value: map.get($spacingBase, $unit);
+        }
+
+        @if ($value == 0) {
+          $value: 0 * 1;
+        } @else if ($value and type-of($value) == "number") {
+          @if ($sizeUnit == "rem") {
+            $value: (math.div($value, 16)) * 1rem;
+          } @else {
+            $value: $value * 1px;
+          }
+          @if $negative {
+            $value: $value * -1;
+          }
+        }
+        @if (type-of($value) == "number" or $value == "auto") {
+          $values: list.append($values, $value);
+        }
       }
     }
-    @if (type-of($value) == "number" or $value == "auto") {
-      $values: list.append($values, $value);
+
+    @if length($values) == 1 {
+      @return list.nth($values, 1);
     }
-  }
 
-  @if length($values) == 1 {
-    @return list.nth($values, 1);
+    @return $values;
   }
 
-  @return $values;
+  @return null;
 }

package/foundations/spacing.scss

@@ -0,0 +1,24 @@
+@use "sass:map";
+@use "sass:meta";
+@use "./variables/spacingDetail";
+@use "./variables/spacingDetailScreenLarge";
+@use "./helpers/mediaQueries.scss" as *;
+@use "./helpers/utilities.scss" as *;
+
+:root {
+  @each $name, $map in meta.module-variables("spacingDetail") {
+    @each $key in map-keys($map) {
+      --ds-spacing-px-#{$key}: #{map.get($map, $key) * 1px};
+      --ds-spacing-rem-#{$key}: #{ds-px-to-rem(map.get($map, $key))};
+    }
+  }
+
+  @include ds-mq-smallest-breakpoint(tablet) {
+    @each $name, $map in meta.module-variables("spacingDetailScreenLarge") {
+      @each $key in map-keys($map) {
+        --ds-spacing-px-#{$key}: #{map.get($map, $key) * 1px};
+        --ds-spacing-rem-#{$key}: #{ds-px-to-rem(map.get($map, $key))};
+      }
+    }
+  }
+}

package/foundations/variables/spacingBase.scss

@@ -0,0 +1,14 @@
+$spacingBase: (
+  100: 16,
+  125: 20,
+  150: 24,
+  200: 32,
+  250: 40,
+  300: 48,
+  350: 56,
+  400: 64,
+  500: 80,
+  025: 4,
+  050: 8,
+  075: 12
+);

package/foundations/variables/spacingBaseList.scss

@@ -0,0 +1,12 @@
+$ds-s-100: 100;
+$ds-s-125: 125;
+$ds-s-150: 150;
+$ds-s-200: 200;
+$ds-s-250: 250;
+$ds-s-300: 300;
+$ds-s-350: 350;
+$ds-s-400: 400;
+$ds-s-500: 500;
+$ds-s-025: 025;
+$ds-s-050: 050;
+$ds-s-075: 075;

package/foundations/variables/spacingDetail.scss

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

package/foundations/variables/spacingDetailList.scss

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

package/foundations/variables/spacingDetailScreenLarge.scss

@@ -0,0 +1,15 @@
+$spacingDetailScreenLarge: (
+  page-top-small: 32,
+  page-horizontal: 32,
+  gap-vertical-medium: 32,
+  teaser-vertical-small: 12,
+  teaser-horizontal: 16,
+  teaser-vertical-medium: 16,
+  direkt-header-bottom: 64,
+  outer: 16,
+  outer-negative: -16,
+  gap-vertical-static-medium: 16,
+  gap-vertical-static-large: 32,
+  gap-vertical-static-small: 8,
+  page-top-xsmall: 4
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "7.0.1",
+  "version": "7.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/spacing-base-list.json

@@ -0,0 +1,14 @@
+{
+  "100": "100",
+  "125": "125",
+  "150": "150",
+  "200": "200",
+  "250": "250",
+  "300": "300",
+  "350": "350",
+  "400": "400",
+  "500": "500",
+  "025": "025",
+  "050": "050",
+  "075": "075"
+}

package/tokens/spacing-detail-list.json

@@ -0,0 +1,15 @@
+{
+  "outer": "outer",
+  "outer-negative": "outer-negative",
+  "page-horizontal": "page-horizontal",
+  "page-top-small": "page-top-small",
+  "gap-vertical-static-medium": "gap-vertical-static-medium",
+  "gap-vertical-medium": "gap-vertical-medium",
+  "gap-vertical-static-large": "gap-vertical-static-large",
+  "gap-vertical-static-small": "gap-vertical-static-small",
+  "page-top-xsmall": "page-top-xsmall",
+  "teaser-vertical-small": "teaser-vertical-small",
+  "teaser-horizontal": "teaser-horizontal",
+  "teaser-vertical-medium": "teaser-vertical-medium",
+  "direkt-header-bottom": "direkt-header-bottom"
+}