@bonniernews/dn-design-system-web 21.1.2 → 21.1.4

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

@@ -89,14 +89,16 @@ $ds-list-item__portrait-size--small: 36px;
     overflow-wrap: anywhere;
 
     .ds-list-item__title {
-      @include ds-typography($ds-typography-functionalbody02, $lineHeight: $ds-lineheight-m);
+      text-align: left;
+      @include ds-typography($ds-typography-functionalbody02, $lineHeight: $ds-lineheight-m) {
+        color: $ds-color-text-primary;
+      }
       @at-root .ds-force-px#{&} {
-        @include ds-typography($ds-typography-functionalbody02, $lineHeight: $ds-lineheight-m, $forcePx: true);
+        @include ds-typography($ds-typography-functionalbody02, $lineHeight: $ds-lineheight-m, $forcePx: true) {
+          color: $ds-color-text-primary;
+        }
       }
 
-      color: $ds-color-text-primary;
-      text-align: left;
-
       &.ds-list-item__title--semibold {
         @include ds-typography(
           $ds-typography-functionalbody02,
@@ -137,22 +139,28 @@ $ds-list-item__portrait-size--small: 36px;
     }
 
     .ds-list-item__subtitle {
-      @include ds-typography($ds-typography-functionalbody02);
+      text-align: left;
+      @include ds-typography($ds-typography-functionalbody02) {
+        color: $ds-color-text-primary-02;
+      }
       @at-root .ds-force-px#{&} {
-        @include ds-typography($ds-typography-functionalbody02, true);
+        @include ds-typography($ds-typography-functionalbody02, true) {
+          color: $ds-color-text-primary-02;
+        }
       }
-      color: $ds-color-text-primary-02;
-      text-align: left;
     }
   }
 
   .ds-list-item__meta {
-    @include ds-typography($ds-typography-functionalbody01);
+    text-align: right;
+    @include ds-typography($ds-typography-functionalbody01) {
+      color: $ds-color-text-primary-02;
+    }
     @at-root .ds-force-px#{&} {
-      @include ds-typography($ds-typography-functionalbody01, true);
+      @include ds-typography($ds-typography-functionalbody01, true) {
+        color: $ds-color-text-primary-02;
+      }
     }
-    color: $ds-color-text-primary-02;
-    text-align: right;
   }
 
   .ds-list-item__icon-left {
@@ -265,9 +273,9 @@ $ds-list-item__portrait-size--small: 36px;
 
 .ds-list-item--toggle {
   a {
-    @include ds-link($ds-link-list);
     display: block;
     width: 100%;
+    @include ds-link($ds-link-list);
   }
 }
 

package/components/modal/modal.scss

@@ -85,17 +85,19 @@ body.no-scroll {
     }
 
     > h2 {
-      @include ds-typography($ds-typography-functionalheading03);
       margin: ds-spacing(0 0 $ds-s-200);
-      color: $ds-color-text-primary;
       text-align: center;
+      @include ds-typography($ds-typography-functionalheading03) {
+        color: $ds-color-text-primary;
+      }
     }
 
     > p {
-      @include ds-typography($ds-typography-functionalbody02);
       margin: 0;
       text-align: center;
-      color: $ds-color-text-primary;
+      @include ds-typography($ds-typography-functionalbody02) {
+        color: $ds-color-text-primary;
+      }
     }
 
     > .ds-modal__buttons {

package/components/pagination/pagination.scss

@@ -19,14 +19,15 @@
     display: flex;
   }
   &__page {
-    @include ds-typography($ds-typography-functionalbody02);
-    color: $ds-color-text-primary;
     margin: ds-spacing($ds-s-050);
     min-height: ds-px-to-rem(32);
     min-width: ds-px-to-rem(32);
     display: flex;
     align-items: center;
     justify-content: center;
+    @include ds-typography($ds-typography-functionalbody02) {
+      color: $ds-color-text-primary;
+    }
 
     &--current {
       color: $ds-color-text-secondary;

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

@@ -39,10 +39,11 @@
   }
 
   .ds-profile-header__title {
-    @include ds-typography($ds-typography-functionalheading03, $fontWeight: $ds-fontweight-bold);
-    color: $ds-color-text-primary;
     margin: 0;
     word-break: break-word;
+    @include ds-typography($ds-typography-functionalheading03, $fontWeight: $ds-fontweight-bold) {
+      color: $ds-color-text-primary;
+    }
   }
 
   .ds-profile-header__media {
@@ -56,15 +57,17 @@
   .ds-profile-header__article-count {
     margin: ds-spacing(0 $ds-s-100 0);
     padding-top: ds-spacing($ds-s-050);
-    @include ds-typography($ds-typography-functionalbody02);
-    color: $ds-color-text-primary-02;
+    @include ds-typography($ds-typography-functionalbody02) {
+      color: $ds-color-text-primary-02;
+    }
   }
 
   .ds-profile-header__description {
-    @include ds-typography($ds-typography-functionalbody02);
-    color: $ds-color-text-primary;
     margin: ds-spacing(0 $ds-s-100 0);
     padding-top: ds-spacing($ds-s-100);
+    @include ds-typography($ds-typography-functionalbody02) {
+      color: $ds-color-text-primary;
+    }
 
     a {
       @include ds-link($ds-link-article-body);

package/components/quote/README-NJK.md

@@ -0,0 +1,36 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/quote](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/quote)
+- Storybook: [Quote](https://designsystem.dn.se/?path=/docs/article-quote--docs)
+- Storybook (Latest): [Quote](https://designsystem-latest.dn.se/?path=/docs/article-quote--docs)
+
+----
+
+# Quote
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|bodyHtml | HTML String | yes | | | |
+|theme | String | no | default, kultur, nyheter, sport, ekonomi | | Design theme |
+|attributes | Object | no | | | Ex. { target: "_blank", "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/quote/quote.njk' import Quote %}
+
+{{ Quote({
+  bodyHtml: ""
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/quote/quote";
+```

package/components/quote/README.md

@@ -1,36 +1,11 @@
-- GitHub: [BonnierNews/dn-design-system/../web/src/components/quote](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/quote)
-- Storybook: [Quote](https://designsystem.dn.se/?path=/docs/article-quote--docs)
-- Storybook (Latest): [Quote](https://designsystem-latest.dn.se/?path=/docs/article-quote--docs)
+Quote
+=====
 
-----
+*   GitHub: [BonnierNews/dn-design-system/../web/src/components/quote](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/quote)
+*   Storybook: [Quote](https://designsystem.dn.se/?path=/docs/article-quote--docs)
 
-# Quote
+The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use '@bonniernews/dn-design-system-web/components/quote/quote.scss'`
 
-## Parameters
+<table class="docblock-argstable sb-unstyled css-v2ifgj"><thead class="docblock-argstable-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th></tr></thead><tbody class="docblock-argstable-body"><tr><td class="css-4lbn0a"><span class="css-in3yi3">bodyHtml</span><span title="Required" class="css-1ywjlcj">*</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">theme</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"kultur"</span><span class="css-o1d7ko">"nyheter"</span><span class="css-o1d7ko">"sport"</span><span class="css-o1d7ko">"ekonomi"</span><span class="css-o1d7ko">"sthlm"</span></div></div></td><td><div class="css-13nzt7e"><span class="css-o1d7ko">"nyheter"</span></div></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">classNames</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">attributes</span></td><td><div class="css-18pz2h2"><span>Ex. { target: "_blank", "data-test": "lorem ipsum" }</span></div><div class="css-1ije3e2"><div class="css-13nzt7e"><span class="css-o1d7ko">object</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">forcePx</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">boolean</span></div></div></td><td><span>-</span></td></tr></tbody></table>
 
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-|bodyHtml | HTML String | yes | | | |
-|theme | String | no | default, kultur, nyheter, sport, ekonomi | | Design theme |
-|attributes | Object | no | | | Ex. { target: "_blank", "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/quote/quote.njk' import Quote %}
-
-{{ Quote({
-  bodyHtml: ""
-})}}
-```
-
-### SCSS
-```scss
-@use "@bonniernews/dn-design-system-web/components/quote/quote";
-```
+<pre class="prismjs css-4zr3vl"><div class="language-jsx css-zye6j" style="white-space: pre;"><span class="token tag punctuation">&lt;</span><span class="token tag class-name">Quote</span><span class="token tag"> </span><span class="token tag attr-name">bodyHtml</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">&lt;p&gt;Vi har blivit som Kuba. Vi lever inte. Vi överlever.&lt;/p&gt;</span><span class="token tag attr-value punctuation">"</span><span class="token tag"> </span><span class="token tag punctuation">/&gt;</span></div></pre>

package/components/quote/quote.scss

@@ -1,11 +1,12 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
 
 .ds-quote {
-  @include ds-typography($ds-typography-detailarticle-quote);
-  color: $ds-color-text-primary;
   margin: 0;
   padding: ds-spacing($ds-s-100 0 $ds-s-200);
   position: relative;
+  @include ds-typography($ds-typography-detailarticle-quote) {
+    color: $ds-color-text-primary;
+  }
 
   @at-root .ds-force-px#{&} {
     @include ds-typography($ds-typography-detailarticle-quote, true);

package/components/quote/quote.tsx

@@ -9,6 +9,13 @@ export interface QuoteProps {
   forcePx?: boolean;
 }
 
+/**
+ * - GitHub: [BonnierNews/dn-design-system/../web/src/components/quote](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/quote)
+ * - Storybook: [Quote](https://designsystem.dn.se/?path=/docs/article-quote--docs)
+ *
+ * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
+ * `@use '@bonniernews/dn-design-system-web/components/quote/quote.scss'`
+ */
 export const Quote = ({ bodyHtml, theme = 'nyheter', classNames, attributes, forcePx }: QuoteProps) => {
   const componentClassName = 'ds-quote';
 

package/components/radio-button/radio-button.scss

@@ -40,8 +40,8 @@ $ds-radio-btn__icon-size: 24px;
       margin: ds-spacing(0 0 0 $ds-s-050, rem);
       @include ds-typography($ds-typography-functionalbody02);
       @at-root .ds-force-px#{&} {
-        @include ds-typography($ds-typography-functionalbody02, true);
         margin: ds-spacing(0 0 0 $ds-s-050);
+        @include ds-typography($ds-typography-functionalbody02, true);
       }
     }
 

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

@@ -50,21 +50,23 @@
   }
 
   .ds-tag-header__vignette {
-    @include ds-typography($ds-typography-functionallabel01);
-    color: $ds-theme-color;
     margin-bottom: ds-spacing($ds-s-025);
     display: block;
     text-decoration: none;
+    @include ds-typography($ds-typography-functionallabel01) {
+      color: $ds-theme-color;
+    }
     &:hover {
       text-decoration: none;
     }
   }
 
   .ds-tag-header__title {
-    @include ds-typography($ds-typography-functionalheading03, $fontWeight: $ds-fontweight-bold);
-    color: $ds-color-text-primary;
-    margin: 0;
     word-break: break-word;
+    margin: 0;
+    @include ds-typography($ds-typography-functionalheading03, $fontWeight: $ds-fontweight-bold) {
+      color: $ds-color-text-primary;
+    }
   }
 
   .ds-tag-header__media {
@@ -84,15 +86,17 @@
   .ds-tag-header__article-count {
     margin: ds-spacing(0 $ds-s-100 0);
     padding-top: ds-spacing($ds-s-050);
-    @include ds-typography($ds-typography-functionalbody02);
-    color: $ds-color-text-primary-02;
+    @include ds-typography($ds-typography-functionalbody02) {
+      color: $ds-color-text-primary-02;
+    }
   }
 
   .ds-tag-header__description {
-    @include ds-typography($ds-typography-functionalbody02);
-    color: $ds-color-text-primary;
     margin: ds-spacing(0 $ds-s-100 0);
     padding-top: ds-spacing($ds-s-100);
+    @include ds-typography($ds-typography-functionalbody02) {
+      color: $ds-color-text-primary;
+    }
 
     a {
       @include ds-link($ds-link-article-body);

package/components/teaser-card/README-NJK.md

@@ -0,0 +1,41 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-card](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-card)
+- Storybook: [Subcomponents > TeaserCard](https://designsystem.dn.se/?path=/docs/section-subcomponents-teaserdot--docs)
+- Storybook (Latest): [Subcomponents > TeaserCard](https://designsystem-latest.dn.se/?path=/docs/section-subcomponents-teaserdot--docs)
+
+----
+
+# TeaserCard
+
+This component is the basis for all Teasers. While it does not render much itself, it brings a common styling base for its children.
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|targetLink | String | no | | | If given, the card will render as a link |
+|areaType | String | no | '', 'right', 'bauta', 'bautaxl' | '' | The area the teaser will be rendered in |
+|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
+|classNames | String | no | | | Ex. "ds-teaser--large" |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|~forcePx~ | | | | | Not supported |
+
+## 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/teaser-card/teaser-card.njk' import TeaserCard %}
+
+{% call TeaserCard({
+  targetLink: 'https://www.dn.se/',
+}) %}
+  (content)
+{% endcall %}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/assets/teaser/teaser";
+```

package/components/teaser-card/README.md

@@ -1,41 +1,17 @@
-- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-card](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-card)
-- Storybook: [Subcomponents > TeaserCard](https://designsystem.dn.se/?path=/docs/section-subcomponents-teaserdot--docs)
-- Storybook (Latest): [Subcomponents > TeaserCard](https://designsystem-latest.dn.se/?path=/docs/section-subcomponents-teaserdot--docs)
+TeaserCard
+==========
 
-----
+*   GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-card](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-card)
+*   Storybook: [Subcomponents > TeaserCard](https://designsystem.dn.se/?path=/docs/section-subcomponents-teaserdot--docs)
 
-# TeaserCard
+The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use '@bonniernews/dn-design-system-web/assets/teaser/teaser.scss'`
 
-This component is the basis for all Teasers. While it does not render much itself, it brings a common styling base for its children.
+<table class="docblock-argstable sb-unstyled css-v2ifgj"><thead class="docblock-argstable-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th></tr></thead><tbody class="docblock-argstable-body"><tr><td class="css-4lbn0a"><span class="css-in3yi3">areaType</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"right"</span><span class="css-o1d7ko">"bauta"</span><span class="css-o1d7ko">"bautaxl"</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">targetLink</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">theme</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"kultur"</span><span class="css-o1d7ko">"nyheter"</span><span class="css-o1d7ko">"sport"</span><span class="css-o1d7ko">"ekonomi"</span><span class="css-o1d7ko">"sthlm"</span></div></div></td><td><div class="css-13nzt7e"><span class="css-o1d7ko">"nyheter"</span></div></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">classes</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">attributes</span></td><td><div class="css-18pz2h2"><span>Ex. { target: "_blank", "data-test": "lorem ipsum" }</span></div><div class="css-1ije3e2"><div class="css-13nzt7e"><span class="css-o1d7ko">object</span></div></div></td><td><span>-</span></td></tr></tbody></table>
 
-## Parameters
-
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-|targetLink | String | no | | | If given, the card will render as a link |
-|areaType | String | no | '', 'right', 'bauta', 'bautaxl' | '' | The area the teaser will be rendered in |
-|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
-|classNames | String | no | | | Ex. "ds-teaser--large" |
-|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
-|~forcePx~ | | | | | Not supported |
-
-## 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/teaser-card/teaser-card.njk' import TeaserCard %}
-
-{% call TeaserCard({
-  targetLink: 'https://www.dn.se/',
-}) %}
-  (content)
-{% endcall %}
-```
-
-### SCSS
-```scss
-@use "@bonniernews/dn-design-system-web/assets/teaser/teaser";
-```
+<pre class="prismjs css-4zr3vl"><div class="language-jsx css-zye6j" style="white-space: pre;"><span class="token tag punctuation">&lt;</span><span class="token tag class-name">TeaserCard</span><span class="token tag punctuation">&gt;</span><span class="token plain-text">
+</span><span class="token plain-text">  </span><span class="token tag punctuation">&lt;</span><span class="token tag">div</span><span class="token tag">
+</span><span class="token tag">    </span><span class="token tag attr-name">style</span><span class="token tag script language-javascript script-punctuation punctuation">=</span><span class="token tag script language-javascript punctuation">{</span><span class="token tag script language-javascript punctuation">{</span><span class="token tag script language-javascript">
+</span><span class="token tag script language-javascript">      </span><span class="token tag script language-javascript literal-property property">height</span><span class="token tag script language-javascript operator">:</span><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript string">'48px'</span><span class="token tag script language-javascript">
+</span><span class="token tag script language-javascript">    </span><span class="token tag script language-javascript punctuation">}</span><span class="token tag script language-javascript punctuation">}</span><span class="token tag">
+</span><span class="token tag">   </span><span class="token tag punctuation">/&gt;</span><span class="token plain-text">
+</span><span class="token plain-text"></span><span class="token tag punctuation">&lt;/</span><span class="token tag class-name">TeaserCard</span><span class="token tag punctuation">&gt;</span></div></pre>

package/components/teaser-card/teaser-card.tsx

@@ -10,6 +10,13 @@ export interface TeaserCardsProps {
   children: any;
 }
 
+/**
+ * - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-card](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-card)
+ * - Storybook: [Subcomponents > TeaserCard](https://designsystem.dn.se/?path=/docs/section-subcomponents-teaserdot--docs)
+ *
+ * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
+ * `@use '@bonniernews/dn-design-system-web/assets/teaser/teaser.scss'`
+ */
 export const TeaserCard = ({ areaType, targetLink, theme = 'nyheter', classes, attributes, children }: TeaserCardsProps) => {
   const componentClassName = 'ds-teaser';
 

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

@@ -9,9 +9,10 @@
 }
 
 .ds-teaser-footer__notes {
-  @include ds-typography($ds-typography-functionalmeta02);
   display: block;
-  color: $ds-color-text-primary-02;
+  @include ds-typography($ds-typography-functionalmeta02) {
+    color: $ds-color-text-primary-02;
+  }
 }
 
 .ds-teaser-footer--podcast {
@@ -21,8 +22,9 @@
   margin-top: ds-spacing($ds-s-050);
 
   .ds-teaser-footer__title {
-    @include ds-typography($ds-typography-functionalbody01, $fontWeight: $ds-fontweight-semibold);
-    color: $ds-color-text-primary;
+    @include ds-typography($ds-typography-functionalbody01, $fontWeight: $ds-fontweight-semibold) {
+      color: $ds-color-text-primary;
+    }
   }
 
   .ds-teaser-footer__notes {

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

@@ -7,15 +7,16 @@
   margin: 0;
 
   .ds-teaser-image__byline {
-    @include ds-typography($ds-typography-functionalmeta01, $lineHeight: $ds-lineheight-l);
     position: absolute;
     bottom: 0;
     right: 0;
     padding: ds-spacing(0 $ds-s-025);
     margin-left: ds-spacing($ds-s-050);
-    color: $ds-color-static-white;
     background-color: $ds-color-static-transparent-black;
     z-index: 5;
+    @include ds-typography($ds-typography-functionalmeta01, $lineHeight: $ds-lineheight-l) {
+      color: $ds-color-static-white;
+    }
   }
 
   &--mask {

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

@@ -63,15 +63,17 @@ $ds-teaser-list-vertical-media-icon-size: 20px;
 
     .ds-teaser-list-vertical__item-vignette {
       display: block;
-      @include ds-typography($ds-typography-functionallabel01);
-      color: $ds-theme-color;
       margin-bottom: ds-spacing($ds-s-025);
+      @include ds-typography($ds-typography-functionallabel01) {
+        color: $ds-theme-color;
+      }
     }
 
     .ds-teaser-list-vertical__item-title {
-      @include ds-typography($ds-typography-expressiveheading01);
-      color: $ds-color-text-primary;
       word-break: break-word;
+      @include ds-typography($ds-typography-expressiveheading01) {
+        color: $ds-color-text-primary;
+      }
 
       .ds-teaser-list-vertical__item-highlight {
         color: $ds-theme-color;

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

@@ -52,12 +52,12 @@
 
   .ds-teaser__vignette {
     color: currentColor;
+    margin: 0;
     @include ds-typography(
       $ds-typography-functionallabel01,
       $lineHeight: $ds-lineheight-l,
       $letterSpacing: $ds-letterspacing-none
     );
-    margin: 0;
   }
 
   .ds-teaser__title {

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

@@ -1,6 +1,5 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
 @use "../../assets/teaser/teaser.scss" as *;
-@use "sass:math";
 
 .ds-teaser.ds-teaser--native {
   overflow: hidden;
@@ -24,8 +23,9 @@
   }
 
   .ds-teaser__title {
-    @include ds-typography($ds-typography-expressiveheading02);
-    font-family: $ds-font--arial !important; /* stylelint-disable-line declaration-no-important */
+    @include ds-typography($ds-typography-expressiveheading02) {
+      font-family: $ds-font--arial !important; /* stylelint-disable-line declaration-no-important */
+    }
   }
 
   &::after {

package/components/teaser-onsite/README-NJK.md

@@ -0,0 +1,45 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-onsite](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-onsite)
+- Storybook: [TeaserOnSite](https://designsystem.dn.se/?path=/docs/section-teaseronsite--docs)
+- Storybook (Latest): [TeaserOnSite](https://designsystem-latest.dn.se/?path=/docs/section-teaseronsite--docs)
+
+----
+
+# teaser-onsite
+
+Also known as "På Plats-puffen".
+
+In the CMS title will be set to a location like "Kiev, Ukraina" or "USA" and text is usually set to some author names like "Jan Banan och Kalle Kula"
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|title | String | yes | | | Heading of the teaser |
+|targetLink | String | yes | | | Target URL for the teaser |
+|areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
+|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
+|text | String | no | | | Teaser subtext |
+|mediaHtml | HTML String | no | | | Main image or other media |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|classNames | String | no | | | Ex. "my-special-class" |
+|~forcePx~ | | | | | Not supported |
+
+## Minimum requirement example
+
+### Nunjucks
+
+These are copy paste friendly examples to quickly get started using a component.
+
+```html
+{% from '@bonniernews/dn-design-system-web/components/teaser-onsite/teaser-onsite.njk' import TeaserOnSite %}
+
+{{ TeaserOnSite({
+  title: 'Kiev, Ukraina',
+  text: 'Henrik Brandão Jönsson och Eduardo Leal'
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/teaser-onsite/teaser-onsite";
+```