@bonniernews/dn-design-system-web 3.0.0-alpha.7 → 3.0.0-alpha.71

package/components/pictogram/README.md

@@ -0,0 +1,39 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/pictogram](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/pictogram)
+- Storybook: [Pictogram > Web](https://designsystem.dn.se/?path=/story/components-app-web-pictogram-web)
+
+----
+
+# Pictogram
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|variant| String | yes | brand, business | brand | Design variant |
+|iconName | String | yes | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icon-web--all |
+|size| String | yes | small, large | small | |
+|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/pictogram/pictogram.njk' import Pictogram %}
+
+{{ Pictogram({
+  variant: "business",
+  size: "small",
+  iconName: "lock",
+  attributes: { "aria-label": "Låst innehåll"}
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/pictogram/pictogram";
+```

package/components/pictogram/pictogram.njk

@@ -0,0 +1,30 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+{% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
+
+{% macro Pictogram(params) %}
+  {%- set componentClassName = "ds-pictogram" %}
+  {%- set classNamePrefix = componentClassName + "--" %}
+  {%- set additionalClasses = [] %}
+  {%- set attributes = getAttributes(params.attributes) %}
+
+  {%- if params.forcePx %}
+    {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
+  {% endif %}
+
+  {%- if params.variant and params.variant != "brand" %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.variant), additionalClasses) %}
+  {% endif %}
+
+  {%- if params.size and params.size != "small" %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.size), additionalClasses) %}
+  {% endif %}
+
+  {%- if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
+  {% endif%}
+
+  {%- set classes = componentClassName + " " + additionalClasses | join(" ") %}
+  <div class="{{ classes }}" {{- attributes | safe }}>
+    {{ IconUse({ icon: params.iconName, attributs: { "aria-hidden": "true" } }) }}
+  </div>
+{% endmacro %}

package/components/pictogram/pictogram.scss

@@ -0,0 +1,54 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../icon-sprite/icon-sprite.scss";
+
+$ds-pictogram__size: 40px;
+$ds-pictogram__size--large: 64px;
+$ds-pictogram__icon-size: 24px;
+$ds-pictogram__icon-size--large: 40px;
+
+.ds-pictogram {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background-color: $ds-color-static-red-200;
+  height: ds-px-to-rem($ds-pictogram__size);
+  width: ds-px-to-rem($ds-pictogram__size);
+  @at-root .ds-force-px#{&} {
+    height: $ds-pictogram__size;
+    width: $ds-pictogram__size;
+  }
+
+  .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);
+    @at-root .ds-force-px#{&} {
+      height: $ds-pictogram__icon-size;
+      width: $ds-pictogram__icon-size;
+    }
+  }
+
+  &.ds-pictogram--business {
+    background-color: $ds-color-static-green-100;
+  }
+
+  &.ds-pictogram--large {
+    height: ds-px-to-rem($ds-pictogram__size--large);
+    width: ds-px-to-rem($ds-pictogram__size--large);
+    @at-root .ds-force-px#{&} {
+      height: $ds-pictogram__size--large;
+      width: $ds-pictogram__size--large;
+    }
+
+    .ds-icon {
+      height: ds-px-to-rem($ds-pictogram__icon-size--large);
+      width: ds-px-to-rem($ds-pictogram__icon-size--large);
+      @at-root .ds-force-px#{&} {
+        height: $ds-pictogram__icon-size--large;
+        width: $ds-pictogram__icon-size--large;
+      }
+    }
+  }
+}

package/components/quote/README.md

@@ -10,7 +10,7 @@
 |parameter | type | required | options | default | description |
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |bodyHtml | HTML String | yes | | | |
-|variant | String | no | standard, culture, sport, economy | standard | Design variant |
+|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 |
@@ -25,7 +25,6 @@ These are copy paste friendly examples to quickliy get started using a component
 {% from '@bonniernews/dn-design-system-web/components/quote/quote.njk' import Quote %}
 
 {{ Quote({
-  variant: "culture",
   bodyHtml: ""
 })}}
 ```

package/components/quote/quote.njk

@@ -3,24 +3,22 @@
 {% macro Quote(params) %}
   {% set componentClassName = "ds-quote" %}
   {% set classNamePrefix = componentClassName + "--" %}
-  {% set variant = [] %}
+  {% set additionalClasses = [] %}
   {% set attributes = getAttributes(params.attributes) %}
 
   {% if params.forcePx %}
-    {% set variant = (variant.push("ds-force-px"), variant) %}
+    {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
   {% endif %}
 
-  {% if params.variant %}
-    {% set variant = (variant.push(classNamePrefix + params.variant), variant) %}
-  {% else %}
-    {% set variant = (variant.push(classNamePrefix + "standard"), variant) %}
+  {% if params.theme %}
+    {% set additionalClasses = (additionalClasses.push('ds-theme--' + params.theme), additionalClasses) %}
   {% endif %}
 
   {% if params.classNames %}
-    {% set variant = (variant.push(params.classNames), variant) %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
   {% endif%}
 
-  {% set classes = componentClassName + " " + variant | join(" ") %}
+  {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
 
   <blockquote class="{{ classes }}" {{- attributes | safe }}>
     <span class="{{ componentClassName + '__border'}}"></span>

package/components/quote/quote.scss

@@ -17,21 +17,8 @@
     display: block;
     width: 40px;
     height: 8px;
-    color: $ds-color-component-brand;
+    color: $ds-theme-color;
     background: currentColor;
     margin: ds-spacing-component(0 0 $ds-sc-x2);
   }
-
-  &--culture .ds-quote__border {
-    color: $ds-color-static-kultur;
-  }
-  &--sport .ds-quote__border {
-    color: $ds-color-static-sport;
-  }
-  &--economy .ds-quote__border {
-    color: $ds-color-static-economy;
-  }
-  &--sthlm .ds-quote__border {
-    color: $ds-color-static-sthlm;
-  }
 }

package/components/radio-button/radio-button.njk

@@ -1,11 +1,11 @@
-{% from '@bonniernews/dn-design-system-web/foundations/icons/icon.njk' import Icon %}
+{% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
 {% from '@bonniernews/dn-design-system-web/assets/form-field/form-field.njk' import FormField %}
 
 {# Internal helper macro - not intended for use outside of this file #}
 {% macro RadioButtonIcons(componentClassName) %}
   <span class="{{ componentClassName + '__icon'}}">
-    {{ Icon({ icon: "radio_button_unchecked" }) }}
-    {{ Icon({ icon: "radio_button_checked" }) }}
+    {{ IconUse({ icon: "radio_button_unchecked" }) }}
+    {{ IconUse({ icon: "radio_button_checked" }) }}
   </span>
 {% endmacro %}
 

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

@@ -1,10 +1,5 @@
-@use "../../foundations/helpers/spacing.scss" as *;
-@use "../../foundations/helpers/typography.scss" as *;
-@use "../../foundations/helpers/mediaQueries.scss" as *;
-@use "../../foundations/helpers/metrics.scss" as *;
-@use "../../foundations/helpers/utilities.scss" as *;
-@use "../../foundations/helpers/colors.scss" as *;
-@use "../../foundations/icons/icon.scss" as *;
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../icon-sprite/icon-sprite.scss";
 @use "../../assets/form-field/form-field.scss" as *;
 
 $ds-radio-btn__icon-size: 24px;
@@ -65,9 +60,12 @@ $ds-radio-btn__icon-size: 24px;
       }
     }
 
-    &:hover,
-    &:active {
-      &::before {
+    &:active::before {
+      background-color: $ds-color-component-primary-overlay;
+    }
+
+    @include ds-hover() {
+      &:hover::before {
         background-color: $ds-color-component-primary-overlay;
       }
     }

package/components/spinner/spinner.njk

@@ -1,33 +1,29 @@
-{% macro Spinner(params) %}
-  {% set componentClassName = "ds-spinner" %}
-  {% set classNamePrefix = componentClassName + "--" %}
-  {% set variant = [] %}
-  {% set size = params.size | default("large") %}
-  {% set attributes %}
-    {% for attribute, value in params.attributes %}
-      {{attribute}}="{{value}}"
-    {% endfor %}
-  {% endset %}
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 
-  {% set variant = (variant.push(classNamePrefix + size), variant) %}
+{% macro Spinner(params) %}
+  {%- set componentClassName = "ds-spinner" %}
+  {%- set classNamePrefix = componentClassName + "--" %}
+  {%- set additionalClasses = [] %}
+  {%- set size = params.size | default("large") %}
+  {%- set attributes = getAttributes(params.attributes) %}
+  {%- set additionalClasses = (additionalClasses.push(classNamePrefix + size), additionalClasses) %}
 
-  {% if params.forcePx %}
-    {% set variant = (variant.push("ds-force-px"), variant) %}
+  {%- if params.forcePx %}
+    {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
   {% endif %}
 
-  {% if params.classNames %}
-    {% set variant = (variant.push(params.classNames), variant) %}
+  {%- if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
   {% endif%}
 
-  {% if params.variant %}
-    {% set variant = (variant.push(classNamePrefix + params.variant), variant) %}
+  {%- if params.variant %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.variant), additionalClasses) %}
   {% else %}
-    {% set variant = (variant.push(classNamePrefix + "primary"), variant) %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "primary"), additionalClasses) %}
   {% endif %}
 
-  {% set classes = componentClassName + " " + variant | join(" ") %}
-
-  <div class="{{ classes }}" {{- attributes | safe }}>
-    <div class="{{ componentClassName + '__inner'}}"></div>
-  </div>
+  {%- set classes = componentClassName + " " + additionalClasses | join(" ") %}
+  <span class="{{ classes }}" {{- attributes | safe }}>
+    <span class="{{ componentClassName + '__inner'}}"></span>
+  </span>
 {% endmacro %}

package/components/spinner/spinner.scss

@@ -12,18 +12,21 @@ $ds-spinner__shadow-border-opacity: 0.2;
 
 .ds-spinner {
   .ds-spinner__inner {
+    display: block;
     border-radius: $ds-spinner__border-radius;
     animation: ds-spinner-animation 1s linear infinite;
     border-style: solid;
     border-color: transparent;
     position: relative;
+    box-sizing: border-box;
 
-    &:before {
+    &::before {
       content: "";
       position: absolute;
       opacity: $ds-spinner__shadow-border-opacity;
       border-radius: $ds-spinner__border-radius;
       border-style: solid;
+      box-sizing: border-box;
     }
   }
 

package/components/teaser-dot/README.md

@@ -0,0 +1,34 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-dot](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-dot)
+- Storybook: [TeaserDot > Web](https://designsystem.dn.se/?path=/story/components-app-web-teaser-dot-web)
+
+----
+
+# TeaserDot
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|flashing | boolean | no | true, false | false | If the dot should be flashing |
+|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 |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+
+## 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-dot/teaser-dot.njk' import TeaserDot %}
+
+{{ TeaserDot({
+  flashing: false
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot";
+```

package/components/teaser-dot/teaser-dot.njk

@@ -0,0 +1,24 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+
+{% macro TeaserDot(params) %}
+  {% set componentClassName = "ds-teaser-dot" %}
+  {% set classNamePrefix = componentClassName + "--" %}
+  {% set variant = [] %}
+  {% set attributes = getAttributes(params.attributes) %}
+
+  {% if params.classNames %}
+    {% set variant = (variant.push(params.classNames), variant) %}
+  {% endif%}
+
+  {% if params.forcePx %}
+    {% set variant = (variant.push("ds-force-px"), variant) %}
+  {% endif %}
+
+  {% if params.flashing %}
+    {% set variant = (variant.push(classNamePrefix + "flashing"), variant) %}
+  {% endif %}
+
+  {% set classes = componentClassName + " " + variant | join(" ") %}
+
+  <span class="{{ classes }}" {{ attributes | safe }}></span>
+{% endmacro %}

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

@@ -0,0 +1,39 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+
+$ds-teaser-dot-size: 10px;
+
+.ds-teaser-dot {
+  display: inline-flex;
+  box-sizing: border-box;
+  background-color: $ds-theme-color;
+  border-radius: 50%;
+  height: ds-px-to-rem($ds-teaser-dot-size);
+  width: ds-px-to-rem($ds-teaser-dot-size);
+  margin-right: ds-px-to-rem(1px);
+
+  @at-root .ds-force-px#{&} {
+    height: $ds-teaser-dot-size;
+    width: $ds-teaser-dot-size;
+    margin-right: 1px;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    &.ds-teaser-dot--flashing {
+      animation: pulse 1.25s ease-in-out infinite;
+    }
+  }
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}

package/components/teaser-image/README.md

@@ -0,0 +1,40 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-image)
+- Storybook (PROD): [TeaserImage > Web](https://designsystem.dn.se/?path=/story/components-app-web-section-components-teaserimage-web--teaser-image)
+- Storybook (LATEST): [TeaserImage > Web](https://designsystem-latest.dn.se/?path=/story/components-app-web-section-components-teaserimage-web--teaser-image)
+
+----
+
+# teaser-image
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|imageHtml | HTML String | yes | | | The img element or equivalent |
+|byline | String | no | | | Media credit text |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|classNames | String | no | | | Ex. "my-special-class" |
+|~forcePx~ | | | | | Always applied |
+
+## 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-image/teaser-image.njk' import TeaserImage %}
+
+{{ TeaserImage({
+  imageHtml: "<img src='??'>",
+  byline: "Foto: Paul Hansen"
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/teaser-image/teaser-image" as *;
+```
+
+This scss is already included in `teaser.scss`.
+

package/components/teaser-image/teaser-image.njk

@@ -0,0 +1,21 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+
+{% macro TeaserImage(params) %}
+  {% set macroClassName = "ds-teaser-image" %}
+  {% set additionalClasses = [] %}
+  {% set attributes = getAttributes(params.attributes) %}
+
+  {% if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
+  {% endif %}
+
+  {% set classes = macroClassName + " " + additionalClasses | join(" ") %}
+
+  <figure class="{{ classes }}" {{- attributes | safe }}>
+    {{ params.imageHtml | safe }}
+
+    {% if params.byline %}
+      <figcaption class={{ macroClassName + "__byline" }}>{{ params.byline }}</figcaption>
+    {% endif %}
+  </figure>
+{% endmacro %}

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

@@ -0,0 +1,21 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+
+.ds-teaser-image {
+  position: relative;
+  width: 100%;
+  margin: 0;
+
+  .ds-teaser-image__byline {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    padding: ds-spacing-component($ds-sc-x1 $ds-sc-x2);
+    margin-left: ds-spacing-component($ds-sc-x2);
+
+    @include ds-typography($ds-typography-functional-meta01regular, true);
+    color: $ds-color-static-white;
+
+    background-color: $ds-color-static-transparent-black;
+    z-index: 5;
+  }
+}

package/components/teaser-large/README.md

@@ -0,0 +1,51 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-large](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-large)
+- Storybook (PROD): [TeaserLarge > Web](https://designsystem.dn.se/?path=/story/components-app-web-section-components-teaserlarge-web)
+- Storybook (LATEST): [TeaserLarge > Web](https://designsystem-latest.dn.se/?path=/story/components-app-web-section-components-teaserlarge-web)
+
+----
+
+# teaser-large
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|title | String | yes | | | Heading of the teaser |
+|targetLink | String | yes | | | Target URL for the teaser |
+|variant | String | no | "default" or "podd" | "default" | |
+|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 |
+|vignette | String | no | | | Top text in the teaser |
+|highlight | String | no | | | Text before the heading |
+|sticker | String | no | | | Red text before the text |
+|mediaHtml | HTML String | no | | | Main image or other media |
+|bylineHtml | HTML String | no | | | Side image of the author |
+|isItalicHeadline | bool | no | true, false | false | If the headline should be italic |
+|isLargeHeadline | bool | no | true, false | false | If the headline should be large. Only has an effect if  `isItalicHeadline` is true. |
+|isFlashingDot | bool | no | true, false | false | If there should be a flashing ball before the text |
+|isLocked | bool | no | true, false | false | If the paywall indicator should be shown. It is only shown if the teaser has an image. |
+|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-large/teaser-large.njk' import TeaserLarge %}
+
+{{ TeaserLarge({
+  title: "Upp på börsen",
+  text: "Det ser ganska normalt ut på Stockholmsbörsen.",
+  highlight: "Ekonominytt:"
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/teaser-large/teaser-large" as *;
+```

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

@@ -0,0 +1,93 @@
+{% 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/components/teaser-dot/teaser-dot.njk' import TeaserDot %}
+
+{% macro TeaserLarge(params) %}
+  {% set componentClassName = "ds-teaser" %}
+  {% set classNamePrefix = componentClassName + "--" %}
+  {% set additionalClasses = ["ds-teaser--large"] %}
+  {% set attributes = getAttributes(params.attributes) %}
+
+  {% if params.variant %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.variant), additionalClasses) %}
+  {% endif %}
+
+  {% if params.theme %}
+    {% set additionalClasses = (additionalClasses.push('ds-theme--' + params.theme), additionalClasses) %}
+  {% endif %}
+
+  {% if params.areaType %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.areaType), additionalClasses) %}
+  {% endif %}
+
+  {% if params.isLocked and not params.mediaHtml and not params.bylineHtml and params.isItalicHeadline %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "quote-badge"), additionalClasses) %}
+  {% endif %}
+
+  {% if params.mediaHtml %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + 'top-img'), additionalClasses) %}
+  {% endif %}
+
+  {% if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
+  {% endif%}
+
+  {% if params.isItalicHeadline and params.isLargeHeadline and params.areaType !== "right" %}
+    {% set additionalClasses = (additionalClasses.push("ds-teaser--large-big-italic"), additionalClasses) %}
+  {% elif params.isItalicHeadline %}
+    {% set additionalClasses = (additionalClasses.push("ds-teaser--large-italic"), additionalClasses) %}
+  {% endif %}
+
+  {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
+
+  <a href="{{ params.targetLink }}"
+    class="{{ classes }}"
+    {{- attributes | safe }}>
+
+    {% if params.mediaHtml %}
+      <div class="{{ componentClassName + '__media'}}">
+        {{ params.mediaHtml }}
+        {% if params.isLocked %}
+          {{ VipBadge({
+            showText: true,
+            forcePx: true
+          }) }}
+        {% endif %}
+      </div>
+    {% elif params.isItalicHeadline and params.isLocked %}
+      {{ VipBadge({
+        showText: false,
+        forcePx: true
+      }) }}
+    {% endif %}
+
+    <div class="{{ componentClassName + '__content'}}">
+      {% if params.vignette %}
+        <div class="ds-teaser__vignette">{{ params.vignette }}</div>
+      {% endif %}
+      <h2 class="ds-teaser__title">
+        {% if params.highlight %}
+          <span class="{{ componentClassName + '__highlight'}}">{{ params.highlight }}</span>
+        {% endif %}
+        {{ params.title | safe }}
+      </h2>
+
+      {% if params.text and params.areaType !== "right" %}
+        <p class="{{ componentClassName + '__text' }}">
+          {{ TeaserDot({ flashing: params.isFlashingDot }) }}
+          {% if params.sticker %}
+            <span class="ds-teaser__sticker">
+              {{ params.sticker }}
+            </span>
+          {% endif %}
+          {{ params.text | safe }}
+        </p>
+      {% endif %}
+      {% if params.bylineHtml %}
+        <div class="{{ componentClassName + '__byline'}}">
+          {{ params.bylineHtml | safe }}
+        </div>
+      {% endif %}
+    </div>
+  </a>
+{% endmacro %}