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

package/CHANGELOG.md

@@ -3,6 +3,331 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-alpha.41](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.40...@bonniernews/dn-design-system-web@3.0.0-alpha.41) (2023-05-03)
+
+
+### Features
+
+* **web:** tipsa teaser  ([#780](https://github.com/BonnierNews/dn-design-system/issues/780)) ([cb2a263](https://github.com/BonnierNews/dn-design-system/commit/cb2a2636cdbc823f8584133b27a6730e9eddb973))
+
+
+### Bug Fixes
+
+* **web:** teaserLarge should check params.targetId ([#789](https://github.com/BonnierNews/dn-design-system/issues/789)) ([4ea1838](https://github.com/BonnierNews/dn-design-system/commit/4ea18388286217e9171f1a851c3dad65c1eace0f))
+
+
+
+## 3.0.0-alpha.40 (2023-05-03)
+
+
+### Bug Fixes
+
+* **web:** changes needed in large & standard teasers after implementing them in bang ([#782](https://github.com/BonnierNews/dn-design-system/issues/782)) ([d028b52](https://github.com/BonnierNews/dn-design-system/commit/d028b5240b4c263f88e9c903db2469ddd505bac5))
+
+
+
+## [3.0.0-alpha.39](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.38...@bonniernews/dn-design-system-web@3.0.0-alpha.39) (2023-05-02)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.38](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.37...@bonniernews/dn-design-system-web@3.0.0-alpha.38) (2023-04-28)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.37](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.36...@bonniernews/dn-design-system-web@3.0.0-alpha.37) (2023-04-28)
+
+
+### Bug Fixes
+
+* **web:** add bauta properties to shared argTypes ([#779](https://github.com/BonnierNews/dn-design-system/issues/779)) ([38790e7](https://github.com/BonnierNews/dn-design-system/commit/38790e7c8c381ac00789c7817e1c3aac6c0dd9d2))
+
+
+
+## [3.0.0-alpha.36](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.35...@bonniernews/dn-design-system-web@3.0.0-alpha.36) (2023-04-28)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## 3.0.0-alpha.35 (2023-04-27)
+
+
+### Features
+
+* **web:** large and standard teasers ([#763](https://github.com/BonnierNews/dn-design-system/issues/763)) ([0713caa](https://github.com/BonnierNews/dn-design-system/commit/0713caa3c451419e21b185496d8d77726c972bfd))
+
+
+
+## [3.0.0-alpha.34](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.33...@bonniernews/dn-design-system-web@3.0.0-alpha.34) (2023-04-26)
+
+
+### Bug Fixes
+
+* **web:** button accessbility ([#767](https://github.com/BonnierNews/dn-design-system/issues/767)) ([1b19f98](https://github.com/BonnierNews/dn-design-system/commit/1b19f983f208ab3467640b8f921e8f711f569ab5))
+* **web:** vip-badge square top-right corner ([#771](https://github.com/BonnierNews/dn-design-system/issues/771)) ([19e2753](https://github.com/BonnierNews/dn-design-system/commit/19e275397f5d9ac7a16703141c0c5372ee1f0e02))
+
+
+
+## 3.0.0-alpha.33 (2023-04-24)
+
+
+### Features
+
+* **web:** pictogram component for web ([#770](https://github.com/BonnierNews/dn-design-system/issues/770)) ([2ad5076](https://github.com/BonnierNews/dn-design-system/commit/2ad50768177689598d9b34605161763630fea1f9))
+
+
+
+## [3.0.0-alpha.32](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.31...@bonniernews/dn-design-system-web@3.0.0-alpha.32) (2023-04-21)
+
+
+### Bug Fixes
+
+* **web:** set vip text in component and change property to boolean ([#768](https://github.com/BonnierNews/dn-design-system/issues/768)) ([5004120](https://github.com/BonnierNews/dn-design-system/commit/500412093b8caf4ea5e46d6a529a390da33b2b6d))
+
+
+
+## 3.0.0-alpha.31 (2023-04-20)
+
+
+### ⚠ BREAKING CHANGES
+
+* **web:** Quote and Factbox has property from ´variant´ to ´theme´
+
+### Bug Fixes
+
+* **web:** add web themes and update quote and factbox ([#761](https://github.com/BonnierNews/dn-design-system/issues/761)) ([0ee3299](https://github.com/BonnierNews/dn-design-system/commit/0ee329900641325278e04242074f819f66bda025))
+
+
+
+## 3.0.0-alpha.30 (2023-04-19)
+
+
+### Features
+
+* **web:** vip badge component ([#759](https://github.com/BonnierNews/dn-design-system/issues/759)) ([7d0791e](https://github.com/BonnierNews/dn-design-system/commit/7d0791ee9d101265ec5f5427b550da783afff93e))
+
+
+
+## 3.0.0-alpha.29 (2023-04-19)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## 3.0.0-alpha.28 (2023-04-13)
+
+
+### Bug Fixes
+
+* **web:** remove easing from hover effekt ([#753](https://github.com/BonnierNews/dn-design-system/issues/753)) ([86cce98](https://github.com/BonnierNews/dn-design-system/commit/86cce9804593683642ae2d44cd76803f06f340d6))
+
+
+
+## 3.0.0-alpha.27 (2023-04-13)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.26](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.25...@bonniernews/dn-design-system-web@3.0.0-alpha.26) (2023-04-06)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## 3.0.0-alpha.25 (2023-04-05)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## 3.0.0-alpha.24 (2023-04-03)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## 3.0.0-alpha.23 (2023-03-31)
+
+
+### Bug Fixes
+
+* **web:** only fullwidth factbox button in small screen ([#742](https://github.com/BonnierNews/dn-design-system/issues/742)) ([97b7a4d](https://github.com/BonnierNews/dn-design-system/commit/97b7a4dec6731ec38ae67345296338c08da65a00))
+
+
+
+## 3.0.0-alpha.22 (2023-03-30)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.21](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.20...@bonniernews/dn-design-system-web@3.0.0-alpha.21) (2023-03-28)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.20](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.19...@bonniernews/dn-design-system-web@3.0.0-alpha.20) (2023-03-24)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.19](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.18...@bonniernews/dn-design-system-web@3.0.0-alpha.19) (2023-03-24)
+
+
+### Bug Fixes
+
+* **web:** use spacing layout in disclaimer ([#730](https://github.com/BonnierNews/dn-design-system/issues/730)) ([a29d313](https://github.com/BonnierNews/dn-design-system/commit/a29d3137ac57cafa317c75f1f8c74504f45f270d))
+
+
+
+## [3.0.0-alpha.18](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.17...@bonniernews/dn-design-system-web@3.0.0-alpha.18) (2023-03-24)
+
+
+### Bug Fixes
+
+* **web:** dynamic spacing image top ([#736](https://github.com/BonnierNews/dn-design-system/issues/736)) ([dfb418f](https://github.com/BonnierNews/dn-design-system/commit/dfb418f471429d685a2fed738cbcd8006ef87f32))
+
+
+
+## [3.0.0-alpha.17](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.16...@bonniernews/dn-design-system-web@3.0.0-alpha.17) (2023-03-24)
+
+
+### Bug Fixes
+
+* **web:** clean up helper includes ([#731](https://github.com/BonnierNews/dn-design-system/issues/731)) ([9680d73](https://github.com/BonnierNews/dn-design-system/commit/9680d73f7c4ce0609b1d964666ae9845f0464955))
+
+
+
+## [3.0.0-alpha.16](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.15...@bonniernews/dn-design-system-web@3.0.0-alpha.16) (2023-03-24)
+
+
+### Bug Fixes
+
+* **web:** image-caption credit is now inline ([#734](https://github.com/BonnierNews/dn-design-system/issues/734)) ([beeeaf8](https://github.com/BonnierNews/dn-design-system/commit/beeeaf8236163438bc42963a55a7ca44856627c1))
+
+
+
+## 3.0.0-alpha.15 (2023-03-24)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.14](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.13...@bonniernews/dn-design-system-web@3.0.0-alpha.14) (2023-03-22)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.13](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.12...@bonniernews/dn-design-system-web@3.0.0-alpha.13) (2023-03-21)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.12](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.11...@bonniernews/dn-design-system-web@3.0.0-alpha.12) (2023-03-20)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.11](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.10...@bonniernews/dn-design-system-web@3.0.0-alpha.11) (2023-03-15)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.10](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.9...@bonniernews/dn-design-system-web@3.0.0-alpha.10) (2023-03-15)
+
+
+### Features
+
+* **web:** image caption ([#723](https://github.com/BonnierNews/dn-design-system/issues/723)) ([5247279](https://github.com/BonnierNews/dn-design-system/commit/5247279d3205eef7bc19599e21dbac997994cc92))
+
+
+
+## [3.0.0-alpha.9](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.8...@bonniernews/dn-design-system-web@3.0.0-alpha.9) (2023-03-15)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.8](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.7...@bonniernews/dn-design-system-web@3.0.0-alpha.8) (2023-03-10)
+
+
+### Bug Fixes
+
+* **web:** treat b as strong ([#722](https://github.com/BonnierNews/dn-design-system/issues/722)) ([8148ce9](https://github.com/BonnierNews/dn-design-system/commit/8148ce98e11827668858a1507ea69b8f122d8a83))
+
+
+
+## 3.0.0-alpha.7 (2023-03-10)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.6](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.5...@bonniernews/dn-design-system-web@3.0.0-alpha.6) (2023-03-08)
+
+
+### Bug Fixes
+
+* **web:** add sass variables for spacing and refactor helper ([#719](https://github.com/BonnierNews/dn-design-system/issues/719)) ([e65417c](https://github.com/BonnierNews/dn-design-system/commit/e65417cbcbe54d6d388e7b7f8b88e33ec7598588))
+
+
+
+## [3.0.0-alpha.5](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.4...@bonniernews/dn-design-system-web@3.0.0-alpha.5) (2023-03-08)
+
+
+### Features
+
+* **web:** video caption component ([#706](https://github.com/BonnierNews/dn-design-system/issues/706)) ([a64278a](https://github.com/BonnierNews/dn-design-system/commit/a64278a64840e2422baed278b7bae29055dabf78))
+
+
+
 ## [3.0.0-alpha.4](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.3...@bonniernews/dn-design-system-web@3.0.0-alpha.4) (2023-03-08)
 
 

package/README.md

@@ -10,4 +10,4 @@ Storybook latest: [https://designsystem-latest.dn.se/](https://designsystem-late
 
 Github: [https://github.com/BonnierNews/dn-design-system/tree/main/web/src](https://github.com/BonnierNews/dn-design-system/tree/main/web/src)
 
-For specific instructions see each component or helper readme.
+For specific instructions see each component or helper readme

package/assets/article-image/article-image.njk

@@ -1,3 +1,5 @@
+{% from '@bonniernews/dn-design-system-web/components/image-caption/image-caption.njk' import ImageCaption %}
+
 {% macro ArticleImage(params) %}
   {% set macroClassName = "ds-article-image" %}
   {% set additionalClasses = [] %}
@@ -18,16 +20,15 @@
     {% endif %}
 
     {% if params.caption or params.author %}
-      <figcaption>
-        {% if params.caption %}
-          <span aria-hidden="true">{{ params.caption | safe }}</span>
-        {% endif %}
-        {% if params.author %}
-          <span class="ds-article-image__credits">
-            {%- if params.imageType %}{{ params.imageType | capitalize }}: {% endif %}{{ params.author -}}
-          </span>
-        {% endif %}
-      </figcaption>
+      {% set caption = params.caption if params.caption else "" %}
+      {% set author = params.author if params.author else "" %}
+      {% set imageType = params.imageType if params.imageType else "" %}
+      {{ ImageCaption({
+        caption: caption,
+        author: author,
+        imageType: imageType,
+        forcePx: params.forcePx
+      })}}
     {% endif %}
   </figure>
 {% endmacro %}

package/assets/article-image/article-image.scss

@@ -1,20 +1,6 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../components/image-caption/image-caption.scss"  as *;
 
 .ds-article-image {
   margin: 0;
-
-  > figcaption {
-    @include ds-typography($ds-typography-functional-body01regular);
-    margin-top: ds-spacing-component(x2);
-    color: $ds-color-text-primary;
-
-    @at-root .ds-force-px#{&} {
-      @include ds-typography($ds-typography-functional-body01regular, true);
-    }
-
-    > .ds-article-image__credits {
-      display: block;
-      color: $ds-color-text-primary-02;
-    }
-  }
 }

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

@@ -1,14 +1,10 @@
-@use "../../foundations/helpers/spacing.scss" as *;
-@use "../../foundations/helpers/metrics.scss" as *;
-@use "../../foundations/helpers/utilities.scss" as *;
-@use "../../foundations/helpers/typography.scss" as *;
-@use "../../foundations/helpers/colors.scss" as *;
+@use "../../foundations/helpers/forward.helpers.scss" as *;
 @use "../../foundations/icons/icon.scss" as *;
 
 $ds-form-field__error-icon-size: 20px;
 
 .ds-form-field__help-text {
-  margin-top: ds-spacing-component(x2);
+  margin-top: ds-spacing-component($ds-sc-x2);
   margin-bottom: 0;
   color: $ds-color-text-primary-02;
   @include ds-typography($ds-typography-functional-body01regular);
@@ -22,9 +18,9 @@ $ds-form-field__error-icon-size: 20px;
 .invalid {
   .ds-form-field__error-message {
     display: flex;
-    margin-top: ds-spacing-component(x2);
+    margin-top: ds-spacing-component($ds-sc-x2);
     .ds-icon {
-      margin: 0 ds-px-to-rem(ds-spacing-component(x2)) 0 0;
+      margin: 0 ds-px-to-rem(ds-spacing-component($ds-sc-x2)) 0 0;
       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;
@@ -48,7 +44,7 @@ $ds-form-field__error-icon-size: 20px;
   .invalid {
     .ds-form-field__error-message {
       .ds-icon {
-        margin: 0 ds-spacing-component(x2) 0 0;
+        margin: 0 ds-spacing-component($ds-sc-x2) 0 0;
         height: $ds-form-field__error-icon-size;
         width: $ds-form-field__error-icon-size;
       }

package/assets/teaser/sticker.scss

@@ -0,0 +1,31 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+
+.ds-sticker {
+  display: inline;
+  color: $ds-theme-color;
+  @include ds-typography($ds-typography-detailarticle-label);
+}
+
+.ds-sticker__flashing-dot {
+  border-radius: 50%;
+  background-color: $ds-theme-color;
+  display: inline-block;
+  width: ds-px-to-rem(10px);
+  height: ds-px-to-rem(10px);
+  margin-right: ds-px-to-rem(1px);
+  animation: pulse 1.25s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}

package/assets/teaser/teaser.scss

@@ -0,0 +1,60 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../foundations/icons/icon.scss";
+@use "../../components/vip-badge/vip-badge.scss";
+@use "../../components/teaser-image/teaser-image.scss";
+@use "./sticker.scss";
+
+.ds-teaser {
+  display: block;
+  background-color: $ds-color-background-primary;
+  text-decoration: none;
+
+  .ds-teaser__content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+
+  .ds-teaser__vignette {
+    display: block;
+    @include ds-typography($ds-typography-detailarticle-label);
+    color: $ds-theme-color;
+    margin-bottom: ds-spacing-component($ds-sc-x1);
+  }
+
+  .ds-teaser__title {
+    color: $ds-color-text-primary;
+    margin: 0;
+    word-break: break-word;
+
+    .ds-teaser__highlight {
+      color: $ds-theme-color;
+    }
+  }
+
+  .ds-teaser__text {
+    @include ds-typography($ds-typography-detailmedryckare);
+    color: $ds-color-text-primary;
+    margin: ds-spacing-component($ds-sc-x2 0 0);
+  }
+
+  .ds-teaser__media {
+    width: 100%;
+    position: relative;
+
+    .ds-vip-badge {
+      position: absolute;
+      top: 0;
+      right: 0;
+      z-index: 5;
+    }
+  }
+
+  @include ds-hover {
+    &:hover {
+      .ds-teaser__title {
+        text-decoration: $ds-text-decoration-link-underline;
+      }
+    }
+  }
+}

package/components/article-body-image/README.md

@@ -1,5 +1,5 @@
 - GitHub: [BonnierNews/dn-design-system/../web/src/components/article-body-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/article-body-image)
-- Storybook: [Disclaimer > Web](https://designsystem.dn.se/?path=/story/components-app-web-article-components-image-bodyimage-web--article-body-image)
+- Storybook: [ArticleBodyImage > Web](https://designsystem.dn.se/?path=/story/components-app-web-article-components-image-bodyimage-web--article-body-image)
 
 ----
 
@@ -32,7 +32,7 @@ These are copy paste friendly examples to quickliy get started using a component
   fullWidth: true,
   caption: "En bildtext",
   imageType: "Foto",
-  author: "Paul Hansen",
+  author: "Paul Hansen"
 })}}
 ```
 

package/components/article-body-image/article-body-image.njk

@@ -11,13 +11,9 @@
     {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
   {% endif %}
 
-  {% if params.forcePx %}
-    {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
-  {% endif %}
-
   {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
 
-  {% set imageParams = { fullWidth: params.fullWidth, caption: params.caption, imageType: params.imageType, author: params.author, imageHtml: params.imageHtml, classNames: classes, attributes: attributes  } %}
+  {% set imageParams = { fullWidth: params.fullWidth, caption: params.caption, imageType: params.imageType, author: params.author, imageHtml: params.imageHtml, classNames: classes, attributes: attributes, forcePx: params.forcePx  } %}
 
   {% call ArticleImage(imageParams) %}{% endcall %}
 {% endmacro %}

package/components/article-body-image/article-body-image.scss

@@ -3,6 +3,6 @@
 
 .ds-article-image--body {
   @include ds-spacing-layout(
-    gap-vertical-static-medium 0 gap-vertical-static-large
+    $ds-sl-gap-vertical-static-medium 0 $ds-sl-gap-vertical-static-large
   );
 }

package/components/article-top-image/README.md

@@ -1,5 +1,5 @@
 - GitHub: [BonnierNews/dn-design-system/../web/src/components/article-top-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/article-top-image)
-- Storybook: [Disclaimer > Web](https://designsystem.dn.se/?path=/story/components-app-web-article-components-image-topimage-web--article-top-image)
+- Storybook: [ArticleTopImage > Web](https://designsystem.dn.se/?path=/story/components-app-web-article-components-image-topimage-web--article-top-image)
 
 ----
 
@@ -30,7 +30,7 @@ These are copy paste friendly examples to quickliy get started using a component
   imageHtml: exampleArticleTopImageHtml(),
   caption: "En bildtext",
   imageType: "Foto",
-  author: "Beatrice Lundborg",
+  author: "Beatrice Lundborg"
 })}}
 ```
 

package/components/article-top-image/article-top-image.njk

@@ -11,13 +11,9 @@
     {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
   {% endif %}
 
-  {% if params.forcePx %}
-    {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
-  {% endif %}
-
   {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
 
-  {% set imageParams = { fullWidth: true, caption: params.caption, imageType: params.imageType, author: params.author, imageHtml: params.imageHtml, classNames: classes, attributes: attributes  } %}
+  {% set imageParams = { fullWidth: true, caption: params.caption, imageType: params.imageType, author: params.author, imageHtml: params.imageHtml, classNames: classes, attributes: attributes, forcePx: params.forcePx  } %}
 
   {% call ArticleImage(imageParams) %}{% endcall %}
 {% endmacro %}

package/components/article-top-image/article-top-image.scss

@@ -2,5 +2,5 @@
 @use "../../assets/article-image/article-image.scss" as *;
 
 .ds-article-image--top {
-  @include ds-spacing-layout(gap-vertical-static-large, px, padding-bottom);
+  @include ds-spacing-layout($ds-sl-gap-vertical-medium, padding-bottom);
 }

package/components/badge/badge.scss

@@ -1,8 +1,4 @@
-@use "../../foundations/helpers/metrics.scss" as *;
-@use "../../foundations/helpers/spacing.scss" as *;
-@use "../../foundations/helpers/typography.scss" as *;
-@use "../../foundations/helpers/utilities.scss" as *;
-@use "../../foundations/helpers/colors.scss" as *;
+@use "../../foundations/helpers/forward.helpers.scss" as *;
 
 $ds-badge__min-size: 8px;
 
@@ -21,12 +17,12 @@ $ds-badge__min-size: 8px;
     justify-content: center;
     min-height: ds-px-to-rem($ds-badge__min-size);
     min-width: ds-px-to-rem($ds-badge__min-size);
-    padding: 0 ds-px-to-rem(ds-spacing-component(x1));
+    padding: 0 ds-px-to-rem(ds-spacing-component($ds-sc-x1));
     @at-root .ds-force-px#{&} {
       @include ds-typography($ds-typography-functional-meta02semibold, true);
       min-height: $ds-badge__min-size;
       min-width: $ds-badge__min-size;
-      padding: 0 ds-spacing-component(x1);
+      padding: 0 ds-spacing-component($ds-sc-x1);
     }
   }
 

package/components/blocked-content/blocked-content.scss

@@ -5,18 +5,18 @@
   background-color: $ds-color-surface-background;
   margin: 0;
   @include ds-spacing-layout(
-    gap-vertical-static-medium 0 gap-vertical-static-large
+    $ds-sl-gap-vertical-static-medium 0 $ds-sl-gap-vertical-static-large
   );
 
   .ds-blocked-content__inner {
     text-align: center;
     border: ds-metrics-border-width(x1) solid $ds-color-border-primary;
     border-radius: ds-metrics-border-radius(x1);
-    padding: ds-spacing-component(x8 x4 x4);
+    padding: ds-spacing-component($ds-sc-x8 $ds-sc-x4 $ds-sc-x4);
   }
 
   .ds-blocked-content__body {
-    margin: ds-spacing-component(0 0 x8);
+    margin: ds-spacing-component(0 0 $ds-sc-x8);
     @include ds-typography($ds-typography-functional-body02regular);
     color: $ds-color-text-primary;
     @at-root .ds-force-px#{&} {
@@ -26,7 +26,7 @@
   .ds-blocked-content__title {
     @include ds-typography($ds-typography-functional-heading01semibold);
     color: $ds-color-text-primary;
-    margin: 0 0 ds-spacing-component(x2);
+    margin: 0 0 ds-spacing-component($ds-sc-x2);
     @at-root .ds-force-px#{&} {
       @include ds-typography($ds-typography-functional-heading01semibold, true);
     }