@bonniernews/dn-design-system-web 3.0.0-alpha.98 → 4.0.0-alpha.1

package/CHANGELOG.md

@@ -3,6 +3,152 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.0.0-alpha.1 (2023-08-16)
+
+
+### ⚠ BREAKING CHANGES
+
+* **web:** separera web storybook från app (#901)
+
+### Code Refactoring
+
+* **web:** separera web storybook från app ([#901](https://github.com/BonnierNews/dn-design-system/issues/901)) ([2ceb1ea](https://github.com/BonnierNews/dn-design-system/commit/2ceb1ea721fb3831a830d4b014ce56b9516995df))
+
+
+
+## [4.0.0-alpha.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.111...@bonniernews/dn-design-system-web@4.0.0-alpha.0) (2023-08-16)
+
+
+### ⚠ BREAKING CHANGES
+
+* **web:** move web storybook to its own folder and use storybook 7
+
+### Features
+
+* **web:** move web storybook to its own folder and use storybook 7 ([0bcdd9a](https://github.com/BonnierNews/dn-design-system/commit/0bcdd9a4775a40f46bb2ef38fda4ec8ab8e7f0fc)), closes [#900](https://github.com/BonnierNews/dn-design-system/issues/900) [#923](https://github.com/BonnierNews/dn-design-system/issues/923) [#933](https://github.com/BonnierNews/dn-design-system/issues/933) [#928](https://github.com/BonnierNews/dn-design-system/issues/928) [#932](https://github.com/BonnierNews/dn-design-system/issues/932) [#935](https://github.com/BonnierNews/dn-design-system/issues/935) [#926](https://github.com/BonnierNews/dn-design-system/issues/926) [#936](https://github.com/BonnierNews/dn-design-system/issues/936) [#909](https://github.com/BonnierNews/dn-design-system/issues/909) [#937](https://github.com/BonnierNews/dn-design-system/issues/937)
+
+
+
+## 3.0.0-alpha.111 (2023-08-02)
+
+
+### Features
+
+* **web:** implement `compact` variant of byline ([#917](https://github.com/BonnierNews/dn-design-system/issues/917)) ([05b3515](https://github.com/BonnierNews/dn-design-system/commit/05b3515ad25533fba8ecb0a62b95a5b577388fd7))
+
+
+
+## [3.0.0-alpha.110](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.109...@bonniernews/dn-design-system-web@3.0.0-alpha.110) (2023-07-31)
+
+
+### Features
+
+* **web:** update how to set color in pictogram ([#914](https://github.com/BonnierNews/dn-design-system/issues/914)) ([e18ff38](https://github.com/BonnierNews/dn-design-system/commit/e18ff38b8016209a39ae02f2d58a1cabf9a41a62))
+
+
+
+## [3.0.0-alpha.109](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.108...@bonniernews/dn-design-system-web@3.0.0-alpha.109) (2023-07-04)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.108](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.107...@bonniernews/dn-design-system-web@3.0.0-alpha.108) (2023-07-04)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.107](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.106...@bonniernews/dn-design-system-web@3.0.0-alpha.107) (2023-07-03)
+
+
+### Features
+
+* **web:** native teaser ([#897](https://github.com/BonnierNews/dn-design-system/issues/897)) ([72aa565](https://github.com/BonnierNews/dn-design-system/commit/72aa565578581c70f97d16fdd6a817e85a2b14ca))
+
+
+
+## 3.0.0-alpha.106 (2023-06-29)
+
+
+### ⚠ BREAKING CHANGES
+
+* **foundations:** Refactor import of typography sets from Figma
+
+### Miscellaneous Chores
+
+* **foundations:** skip variable typography sets ([#896](https://github.com/BonnierNews/dn-design-system/issues/896)) ([27e208d](https://github.com/BonnierNews/dn-design-system/commit/27e208d6ee1e00fbad23c581aebf0f9cf1e08377))
+
+
+
+## [3.0.0-alpha.105](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.104...@bonniernews/dn-design-system-web@3.0.0-alpha.105) (2023-06-21)
+
+
+### ⚠ BREAKING CHANGES
+
+* **foundations:** new font versions required
+
+### Miscellaneous Chores
+
+* **foundations:** update fonts ([#892](https://github.com/BonnierNews/dn-design-system/issues/892)) ([8f974fe](https://github.com/BonnierNews/dn-design-system/commit/8f974fe4e52ee26702885af1f1d4c29b5743cc73))
+
+
+
+## [3.0.0-alpha.104](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.103...@bonniernews/dn-design-system-web@3.0.0-alpha.104) (2023-06-20)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.103](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.102...@bonniernews/dn-design-system-web@3.0.0-alpha.103) (2023-06-20)
+
+
+### Bug Fixes
+
+* **web:** use correct param for flashing dot ([#890](https://github.com/BonnierNews/dn-design-system/issues/890)) ([52e5d3f](https://github.com/BonnierNews/dn-design-system/commit/52e5d3f1b2878831d0bccbc570a04e052d61bbd0))
+
+
+
+## 3.0.0-alpha.102 (2023-06-19)
+
+
+### Bug Fixes
+
+* **web:** float fixes for standard teasers ([#889](https://github.com/BonnierNews/dn-design-system/issues/889)) ([a14c41f](https://github.com/BonnierNews/dn-design-system/commit/a14c41f5f16484442757883b8baa784c4c11d7fa))
+
+
+
+## [3.0.0-alpha.101](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.100...@bonniernews/dn-design-system-web@3.0.0-alpha.101) (2023-06-15)
+
+
+### Bug Fixes
+
+* **web:** theme colors should work in darkmode ([#886](https://github.com/BonnierNews/dn-design-system/issues/886)) ([eb8fe1b](https://github.com/BonnierNews/dn-design-system/commit/eb8fe1b3259d6da8e519c0fb19d589e4c3ac505d))
+
+
+
+## [3.0.0-alpha.100](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.99...@bonniernews/dn-design-system-web@3.0.0-alpha.100) (2023-06-14)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.99](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.98...@bonniernews/dn-design-system-web@3.0.0-alpha.99) (2023-06-14)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
 ## 3.0.0-alpha.98 (2023-06-13)
 
 **Note:** Version bump only for package @bonniernews/dn-design-system-web

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

@@ -12,7 +12,7 @@
 
   <figure class="{{ classes }}" {{- params.attributes | safe }}>
     {% if params.fullWidth %}
-      <div class="ds-full-width-element">
+      <div class="ds-full-width-element article-full-width-element">
         {{ params.imageHtml | safe }}
       </div>
     {% else %}

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

@@ -1,5 +1,5 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
-@use "../../components/image-caption/image-caption.scss"  as *;
+@use "../../components/image-caption/image-caption.scss" as *;
 
 .ds-article-image {
   margin: 0;

package/assets/teaser/teaser.scss

@@ -4,6 +4,13 @@
 @use "../../components/teaser-image/teaser-image.scss";
 @use "../../components/teaser-dot/teaser-dot.scss";
 
+// used in standard and native teaser
+$ds-teaser-standard-image-width-mobile: 104px;
+$ds-teaser-standard-image-width-tablet: 156px;
+$ds-teaser-standard-image-width-desktop: 196px;
+
+$grade-size: ds-px-to-rem(34px);
+
 .ds-teaser {
   display: block;
   background-color: $ds-color-background-primary;
@@ -49,10 +56,13 @@
     @include ds-mq-smallest-breakpoint(tablet) {
       margin-top: ds-spacing-component($ds-sc-x3);
     }
+
+    &.ds-teaser__text--with-grade {
+      min-height: calc($grade-size + ds-spacing-component($ds-sc-x1, "rem"));
+    }
   }
 
   .ds-icon.ds-icon--grade {
-    $grade-size: ds-px-to-rem(34px);
     color: $ds-color-icon-primary;
     border-radius: 50%;
     float: left;

package/components/byline/README.md

@@ -12,12 +12,12 @@ The byline is a list item and should be wrapped in a list.
 
 |parameter | type | required | options | default | description |
 |:--- | :--- | :--- | :--- | :--- | :--- |
-|variant | String | yes | follow, link | | |
+|variant | String | yes | follow, link, compact | | |
 |authorName | String | yes | | | |
 |bylineImage | HTML | no | | | Html image from bang. The component only makes the image round. Scaling is up to the user. Should be 44px for non retina screens. |
-|role | String | no | | | Only used in variant link |
+|role | String | no | | | Used in variant link and compact |
 |email | String | no | | | email will be displayed instead of role for variant follow |
-|authorPageUrl | String | no | | | The whole item (varant link), or the title and subtitle (variant follow) will link to this url |
+|authorPageUrl | String | no | | | The whole item (varant link and compact), or the title and subtitle (variant follow) will link to this url |
 |followable | Boolean | no | true, false | true | If true the toggle button to follow will be shown when using variant follow. |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
 |elementAttributes | Object | no | | | Sets attributes on actual toggle element and not byline list item. Same structure as attributes above, for accessability reasons it's important to send in "aria-label": "Följ " + byline.name |

package/components/byline/byline.njk

@@ -60,7 +60,7 @@
   {% set classNamePrefix = componentClassName + "--" %}
   {% set variant = [] %}
   {% set attributes = getAttributes(params.attributes) %}
-  {% set visualVariant = "icon" if (params.variant == 'link' or params.followable != true) and params.authorPageUrl else "button" %}
+  {% set visualVariant = "icon" if (params.variant == 'link' or params.variant == 'compact' or params.followable != true) and params.authorPageUrl else "button" %}
 
   {% if params.forcePx %}
     {% set variant = (variant.push("ds-force-px"), variant) %}

package/components/byline/byline.scss

@@ -4,6 +4,7 @@
 
 $ds-byline__icon-size: 24px;
 $ds-byline__image-size: 44px;
+$ds-byline__image-size--compact: 36px;
 
 .ds-byline__outer {
   list-style: none;
@@ -127,7 +128,7 @@ $ds-byline__image-size: 44px;
   }
 
   .ds-byline__btn-toggle {
-    min-height: 44px;
+    min-height: $ds-byline__icon-size;
     min-width: 48px;
     margin-left: ds-spacing-component($ds-sc-x4);
   }
@@ -142,6 +143,22 @@ $ds-byline__image-size: 44px;
     }
   }
 
+  &.ds-byline--compact {
+    .ds-byline__titles {
+      .ds-byline__subtitle {
+        line-height: ds-spacing-component($ds-sc-x4);
+      }
+    }
+    .ds-byline__image {
+      height: $ds-byline__image-size--compact;
+      width: $ds-byline__image-size--compact;
+    }
+
+    .ds-byline__btn-toggle {
+      min-height: $ds-byline__image-size--compact;
+    }
+  }
+
   &:active:not(.ds-byline--noninteractive) .ds-byline__inner::before {
     background-color: $ds-color-component-primary-overlay-02;
   }

package/components/image-caption/image-caption.njk

@@ -1,6 +1,10 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+
 {% macro ImageCaption(params) %}
   {% set macroClassName = "ds-image-caption" %}
   {% set additionalClasses = [] %}
+  {% set attributes = getAttributes(params.attributes) %}
+
 
   {% if params.classNames %}
     {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
@@ -12,7 +16,7 @@
 
   {% set classes = macroClassName + " " + additionalClasses | join(" ") %}
 
-  <figcaption class="{{ classes }}" {{- params.attributes | safe }}>
+  <figcaption class="{{ classes }}" {{- attributes | safe }}>
     {% if params.caption %}
       <span aria-hidden="true">{{ params.caption | safe }}</span>
     {% endif %}

package/components/pictogram/pictogram.scss

@@ -20,7 +20,6 @@ $ds-pictogram__icon-size--large: 40px;
   }
 
   .ds-icon {
-    fill: $ds-color-static-black;
     display: flex;
     height: ds-px-to-rem($ds-pictogram__icon-size);
     width: ds-px-to-rem($ds-pictogram__icon-size);
@@ -28,6 +27,10 @@ $ds-pictogram__icon-size--large: 40px;
       height: $ds-pictogram__icon-size;
       width: $ds-pictogram__icon-size;
     }
+
+    > svg {
+      fill: $ds-color-static-black;
+    }
   }
 
   &.ds-pictogram--business {

package/components/teaser-large/teaser-large.njk

@@ -1,6 +1,7 @@
 {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 {% from '@bonniernews/dn-design-system-web/components/vip-badge/vip-badge.njk' import VipBadge %}
-{% from '@bonniernews/dn-design-system-web/assets/teaser/dot-or-grade.njk' import getDotOrGrade %}
+{% from '@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot.njk' import TeaserDot %}
+{% from '@bonniernews/dn-design-system-web/foundations/icons/grade-icon.njk' import GetGrade %}
 
 {% macro TeaserLarge(params) %}
   {% set componentClassName = "ds-teaser" %}
@@ -74,8 +75,9 @@
         </h2>
 
         {% if params.text and params.areaType !== "right" %}
-          <p class="{{ componentClassName + '__text' }}">
-            {{ getDotOrGrade({ flashing: params.isFlashingDot, grade: params.grade }) }}
+          {% set gradeHtml = GetGrade({ grade: params.grade, type: "single" }) | trim  if params.grade else "" %}
+          <p class="{{ componentClassName + '__text' }} {{ componentClassName + '__text--with-grade' if gradeHtml.length }}">
+            {{ gradeHtml if gradeHtml.length else TeaserDot({ flashing: params.isFlashingDot }) }}
             {% if params.sticker %}
               <span class="ds-teaser__sticker">
                 {{ params.sticker }}

package/components/teaser-list-timeline/README.md

@@ -0,0 +1,44 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-list-timeline](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-list-timeline)
+- Storybook (PROD): [TeaserListTimeline > Web](https://designsystem.dn.se/?path=/story/section-teaserlisttimeline--teaser-list-timeline)
+- Storybook (LATEST): [TeaserListTimeline > Web](https://designsystem-latest.dn.se/?path=/story/section-teaserlisttimeline--teaser-list-timeline)
+
+----
+
+# teaser-list-timeline
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|listTitle | String | yes | | | List title |
+|listLink | Object | no | | | Ex. { text: "Alla nyheter", url: "#" } |
+|flexible | bool | no | true, false | false | |
+|teasers | Array | yes | | | Array with teaser objects. Ex. [ { title: 'Malmö var det enda rimliga valet för Eurovision', targetLink: '#', highlight: 'Hanna Fahl:', publicationTime: 'I GÅR 12:28', sectionName: 'Kultur', attributes: { "data-test": "list-item-test-data" } } ] |
+|~areaType~ | String | no | "right" or "bauta" or "bautaxl" | | Not implemented |
+|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to _all_ teasers in the list |
+|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 quickliy get started using a component.
+
+```html
+{% from '@bonniernews/dn-design-system-web/components/teaser-list-timeline/teaser-list-timeline.njk' import TeaserListTimeline %}
+
+{{ TeaserListTimeline({
+  listTitle: "Senaste nytt",
+  listLink: { text: "Alla nyheter", url: "#"},
+  flexible: true,
+  theme: "ekonomi",
+  teasers: [ { title: 'Malmö var det enda rimliga valet för Eurovision', targetLink: '#', highlight: 'Hanna Fahl:', publicationTime: 'I GÅR 12:28', sectionName: 'Kultur', attributes: { "data-test": "list-item-test-data" } } ]
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/teaser-list-timeline/teaser-list-timeline" as *;
+```

package/components/teaser-list-timeline/teaser-list-timeline.njk

@@ -0,0 +1,62 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+{% from '@bonniernews/dn-design-system-web/components/button/button.njk' import Button %}
+
+{% macro TeaserListTimeline(params) %}
+  {% set componentClassName = "ds-teaser-list-timeline" %}
+  {% set classNamePrefix = componentClassName + "--" %}
+  {% set additionalClasses = [] %}
+  {% set attributes = getAttributes(params.attributes) %}
+  {% set showButton = params.listLink and params.listLink.text and params.listLink.url %}
+
+  {% if params.theme %}
+    {% set additionalClasses = (additionalClasses.push('ds-theme--' + params.theme), additionalClasses) %}
+  {% endif %}
+
+  {% if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
+  {% endif%}
+
+  {% if params.flexible %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + 'flexible'), additionalClasses) %}
+  {% endif%}
+
+  {% if showButton %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + 'linked'), additionalClasses) %}
+  {% endif%}
+
+  {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
+
+  <div class="{{ classes }}" {{- attributes | safe }}>
+    <h2 class="ds-teaser-list-timeline__vignette">{{ params.listTitle }}</h2>
+    <div class="{{ componentClassName + '__content'}}">
+      {% for teaser in params.teasers %}
+        {{ TeaserListTimelineItem(teaser) }}
+      {% endfor %}
+    </div>
+    {% if showButton %}
+      <div class="ds-teaser-list-timeline__link">
+        {{ Button({
+          text: params.listLink.text,
+          href: params.listLink.url,
+          variant: 'secondaryFilled',
+          fullWidth: true,
+          forcePx: false
+        })}}
+      </div>
+    {% endif %}
+  </div>
+{% endmacro %}
+
+{% macro TeaserListTimelineItem(teaser) %}
+  {% set attributes = getAttributes(teaser.attributes) %}
+
+  <a href="{{teaser.targetLink}}" class="ds-teaser-list-timeline__item" {{- attributes | safe }}>
+    <span class="ds-teaser-list-timeline__item-dot"></span>
+    <h3 class="ds-teaser-list-timeline__item-title">{{ teaser.highlight }} {{ teaser.title }}</h3>
+    {% if teaser.publicationTime or teaser.sectionName %}
+      <div class="ds-teaser-list-timeline__item-notes">
+        <span>{{ teaser.publicationTime }}<span>{{ " • " if teaser.publicationTime and teaser.sectionName }}<span>{{ teaser.sectionName }}</span>
+      </div>
+    {% endif %}
+  </a>
+{% endmacro %}

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

@@ -0,0 +1,80 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../button/button.scss" as *;
+
+$ds-teaser-list-timeline-dot-size: ds-px-to-rem(10px);
+
+.ds-teaser-list-timeline {
+  background-color: $ds-color-surface-background;
+
+  .ds-teaser-list-timeline__vignette {
+    @include ds-typography($ds-typography-functional-body02bold);
+    color: $ds-color-text-primary;
+    padding: ds-spacing-component($ds-sc-x3 $ds-sc-x4, rem);
+    margin: 0;
+  }
+
+  .ds-teaser-list-timeline__link {
+    border-top: ds-metrics-border-width(x1) solid $ds-color-border-primary;
+    padding: ds-spacing-component($ds-sc-x4, rem);
+  }
+
+  .ds-teaser-list-timeline__item {
+    padding: ds-spacing-component($ds-sc-x3 $ds-sc-x4, rem);
+    display: block;
+    text-decoration: none;
+    border-bottom: ds-metrics-border-width(x1) solid $ds-color-border-primary;
+    position: relative;
+
+    &:last-child {
+      border: none;
+    }
+
+    .ds-teaser-list-timeline__item-dot {
+      position: absolute;
+
+      &::before {
+        content: "";
+        position: absolute;
+        top: ds-px-to-rem(6px);
+        display: inline-flex;
+        box-sizing: border-box;
+        background-color: $ds-theme-color;
+        border-radius: 50%;
+        height: $ds-teaser-list-timeline-dot-size;
+        width: $ds-teaser-list-timeline-dot-size;
+      }
+    }
+
+    .ds-teaser-list-timeline__item-title,
+    .ds-teaser-list-timeline__item-notes {
+      margin: 0 0 0 (ds-spacing-component($ds-sc-x2, rem) + $ds-teaser-list-timeline-dot-size);
+    }
+
+    .ds-teaser-list-timeline__item-title {
+      @include ds-typography($ds-typography-expressive-heading01bold);
+      color: $ds-color-text-primary;
+      word-break: break-word;
+
+      @include ds-hover(true) {
+        @include ds-underline(2px, 1px);
+      }
+    }
+
+    .ds-teaser-list-timeline__item-notes {
+      @include ds-typography($ds-typography-functional-meta02regular);
+      color: $ds-color-text-primary-02;
+      margin-top: ds-spacing-component($ds-sc-x2, rem);
+    }
+  }
+
+  &.ds-teaser-list-timeline--flexible {
+    display: flex;
+    flex: 1 0 300px;
+    flex-direction: column;
+    overflow: hidden;
+
+    .ds-teaser-list-timeline__content {
+      overflow-y: auto;
+    }
+  }
+}

package/components/teaser-native/README.md

@@ -0,0 +1,41 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-native](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-native)
+- Storybook (PROD): [TeaserNative > Web](https://designsystem.dn.se/?path=/story/components-app-web-section-components-teasernative-web--native)
+- Storybook (LATEST): [TeaserNative > Web](https://designsystem-latest.dn.se/?path=/story/components-app-web-section-components-teasernative-web--native)
+
+----
+
+# teaser-native
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|title | String | yes | | | Heading of the teaser |
+|targetLink | String | yes | | | Target URL for the teaser |
+|nativeVariant | String | no | "standard" or "large" or "right"  | "standard" | |
+|areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
+|text | String | no | | | Teaser subtext |
+|vignette | String | no | | | Top text in the teaser |
+|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
+These are copy paste friendly examples to quickly get started using a component.
+
+### Nunjucks
+```html
+{% from '@bonniernews/dn-design-system-web/components/teaser-native/teaser-native.njk' import TeaserNative %}
+
+{{ TeaserNative({
+  title: "Fossilfri vätgas – en nyckel till minskade koldioxidutsläpp",
+  text: "Det blir en viktig konkurrensfördel att kunna leverera produkter som inte skadar klimatet",
+  vignette: "Innehåll från Vattenfall"
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/teaser-native/teaser-native";
+```

package/components/teaser-native/teaser-native.njk

@@ -0,0 +1,59 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+{% from '@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot.njk' import TeaserDot %}
+{% from '@bonniernews/dn-design-system-web/foundations/icons/grade-icon.njk' import GetGrade %}
+
+{% macro TeaserNative(params) %}
+  {% set componentClassName = "ds-teaser" %}
+  {% set classNamePrefix = componentClassName + "--" %}
+  {% set additionalClasses = ["ds-teaser--native"] %}
+  {% set attributes = getAttributes(params.attributes) %}
+  {% set nativeVariant = params.nativeVariant if params.nativeVariant else "standard" %}
+  {% set additionalClasses = (additionalClasses.push('ds-teaser--native-' + nativeVariant), additionalClasses) %}
+
+  {% if params.areaType %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.areaType), additionalClasses) %}
+  {% endif %}
+
+  {% if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
+  {% endif%}
+
+  {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
+
+  <a href="{{ params.targetLink }}"
+    class="{{ classes }}"
+    {{- attributes | safe }}>
+
+    <div class="{{ componentClassName + '__ad-bar'}}"><span>ANNONS</span></div>
+    {% if params.mediaHtml and nativeVariant !== "standard" %}
+      <div class="{{ componentClassName + '__media'}}">
+        {{ params.mediaHtml }}
+      </div>
+    {% endif %}
+
+    <div class="{{ componentClassName + '__inner'}}">
+      <div class="{{ componentClassName + '__content'}}">
+        {% if params.mediaHtml and nativeVariant == "standard" %}
+          <div class="{{ componentClassName + '__media'}}">
+            {{ params.mediaHtml }}
+          </div>
+        {% endif %}
+
+        {% if params.vignette %}
+          <div class="ds-teaser__vignette">{{ params.vignette }}</div>
+        {% endif %}
+
+        <h2 class="{{ componentClassName + '__title'}}">
+          {{ params.title }}
+        </h2>
+
+        {% if params.text and nativeVariant !== "right" %}
+          <p class="{{ componentClassName + '__text' }}">
+            {{ TeaserDot() }}
+            {{ params.text }}
+          </p>
+        {% endif %}
+      </div>
+    </div>
+  </a>
+{% endmacro %}